import { LitElement } from "lit";
import { SnackbarDuration, type WarpSnackbarItem, type SnackbarVariant, type SnackbarActionPlacement } from "../snackbar-item/snackbar-item.js";
export type CreateSnackbarOptions = {
/**
* Show a close button so users can dismiss the message early.
*
* Can not be turned off if duration is Long or more.
*
* Pass a click event handler if you need to react to clicks on the close button somehow.
* You can stop the message from closing by calling `event.preventDefault()`.
*
* @default true
*/
canClose?: boolean | ((this: GlobalEventHandlers, ev: PointerEvent) => void);
/**
* Duration until the message hides automatically.
*
* If the message has an action the default `duration` is `SnackbarDuration.Long`.
*
* @default SnackbarDuration.Short
*/
duration?: SnackbarDuration;
/**
* @default 'neutral'
*/
variant?: SnackbarVariant;
/**
* Shows an action before the close button.
*
* Use this action as a convenience only. Ensure the result of any action in the snackbar,
* such as Undo, is possible to achieve elsewhere in your application.
*/
action?: {
/**
* Keep action labels short.
*
* If the label includes a space the `placement` is set to `block` by default.
*/
label: string;
/**
* The action button's `onclick` property.
*/
onclick: (this: GlobalEventHandlers, ev: PointerEvent) => void;
/**
* Overrides the default placement of the action button.
*
* By default labels that are only one word are `inline` and labels with multiple words are `block`.
* If you have a particularly long word as a label you can set `placement: 'block'`.
*/
placement?: SnackbarActionPlacement;
};
};
/**
* A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
*
* Include one `` in the document ``. Use the `create` function to create messages.
*
* [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
*
* @example
*
* ```html
*
*
*
* ```
*
* @example
*
* ```ts
* // Short message indicating an operation succeeded
* const snackbar = document.querySelector("w-snackbar");
* const snackbarItem = snackbar.create("Settings saved", { variant: "success" });
* ```
*
* @example
*
* ```ts
* // An action to undo what was just done
* const snackbar = document.querySelector("w-snackbar");
* const snackbarItem = snackbar.create("Settings saved", {
* variant: "success",
* action: {
* label: "Undo",
* onclick: () => {
* // undoSave();
* },
* },
* });
* ```
*
* @slot default - `w-snackbar-item` gets placed inside the default slot by the `create` function.
*
* @csspart container - the live region that positions messages on the screen.
*
* @cssprop --w-c-snackbar-container-gap
* @cssprop --w-c-snackbar-position-bottom
* @cssprop --w-c-snackbar-position-left
* @cssprop --w-c-snackbar-position-right
* @cssprop --w-c-snackbar-position-top
* @cssprop --w-c-snackbar-z-index
*/
export declare class WarpSnackbar extends LitElement {
private internals;
static styles: import("lit").CSSResult[];
constructor();
connectedCallback(): void;
disconnectedCallback(): void;
/** @internal */
_onKeydown(e: KeyboardEvent): void;
/**
* Creates a snackbar item and immediately adds it to the snackbar.
*
* By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
*
* If you include an `action` in the options the default `duration` is
* set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
*
* A `duration` of 10 seconds or longer forces the close button to be visible.
*
* The default `variant` is `neutral` which does not have an icon.
*
* Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
*
* @returns The instance of `w-snackbar-item` added to the snackbar.
*/
create(message: string, options?: CreateSnackbarOptions): WarpSnackbarItem;
render(): import("lit").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
"w-snackbar": WarpSnackbar;
}
}