@tylertech/forge 3.0.0-next.20 → 3.0.0-next.22

package/esm/toast/toast-foundation.js

@@ -3,111 +3,74 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { isFunction } from '@tylertech/forge-core';
 import { TOAST_CONSTANTS } from './toast-constants';
-/**
- * The foundation class behind the `ToastComponent` class that manages the state of a toast component instance.
- */
 export class ToastFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
+        this._open = false;
         this._duration = TOAST_CONSTANTS.defaults.DURATION;
         this._placement = TOAST_CONSTANTS.defaults.PLACEMENT;
-        this._showClose = true;
-        this._hasAction = false;
-        this._isActive = false;
-        this._actionListener = (evt) => this._onAction(evt);
-        this._closeListener = (evt) => this._onClose(evt);
+        this._dismissible = false;
+        this._theme = TOAST_CONSTANTS.defaults.THEME;
+        this._actionListener = this._onAction.bind(this);
+        this._closeListener = this._onClose.bind(this);
     }
     initialize() {
-        this._adapter.setPlacement(this._placement);
-        this._adapter.registerCloseListener(this._closeListener);
-        this._adapter.setCloseButtonVisibility(this._showClose);
-        this._adapter.setActionVisibility(!!this._actionText);
-        this.show();
-    }
-    /**
-     * Starts the animation of the toast and hides it after the duration.
-     */
-    show() {
-        // Check if we were provided a builder function and call it if so (this will override the message text)
-        if (isFunction(this._builder)) {
-            const tpl = this._builder();
-            this._adapter.setMessageTemplate(tpl);
+        if (this._open) {
+            this.show();
         }
-        this._isActive = true;
-        this._adapter.setActive(true);
+    }
+    show() {
+        this._adapter.show();
         if (isFinite(this._duration) && this._duration > 0) {
-            this._hideTimeout = setTimeout(() => this.hide(true), this._duration);
+            /* c8 ignore next 3 */
+            if (this._hideTimeout) {
+                window.clearTimeout(this._hideTimeout);
+            }
+            this._hideTimeout = window.setTimeout(() => this.hide(), this._duration);
         }
+        this._open = true;
+        this._adapter.toggleHostAttribute(TOAST_CONSTANTS.attributes.OPEN, this._open);
     }
-    /**
-     * Hides the toast and removes it from the DOM.
-     */
-    hide(emitEvent = false) {
-        if (!this._isActive) {
-            return;
-        }
-        this._isActive = false;
-        this._adapter.setActive(false);
+    async hide({ dispatchEvent = true } = {}) {
         if (this._hideTimeout) {
-            clearTimeout(this._hideTimeout);
+            window.clearTimeout(this._hideTimeout);
             this._hideTimeout = undefined;
         }
-        if (emitEvent) {
-            this._adapter.emitHostEvent(TOAST_CONSTANTS.events.CLOSE);
+        await this._adapter.hide();
+        this._open = false;
+        this._adapter.toggleHostAttribute(TOAST_CONSTANTS.attributes.OPEN, this._open);
+        if (dispatchEvent) {
+            this._adapter.dispatchHostEvent(new CustomEvent(TOAST_CONSTANTS.events.CLOSE, { bubbles: true }));
         }
     }
-    /**
-     * Handles click events from the optional action button.
-     * @param {MouseEvent} evt The mouse event.
-     */
     _onAction(evt) {
         evt.stopPropagation();
-        this._adapter.emitHostEvent(TOAST_CONSTANTS.events.ACTION);
-    }
-    _onClose(evt) {
-        this.hide(true);
+        this._adapter.dispatchHostEvent(new CustomEvent(TOAST_CONSTANTS.events.ACTION, { bubbles: true }));
     }
-    /** The message to display in the toast. */
-    get message() {
-        return this._message;
+    _onClose(_evt) {
+        this.hide();
     }
-    set message(value) {
-        if (this._message !== value) {
-            this._message = value;
-            this._adapter.setMessage(this._message);
-            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.MESSAGE, this._message);
-        }
+    get open() {
+        return this._open;
     }
-    /** The text to display in the action button. */
-    get actionText() {
-        return this._actionText;
-    }
-    set actionText(value) {
-        if (this._actionText !== value) {
-            this._actionText = value;
-            if (this._actionText) {
-                if (this._hasAction) {
-                    this._adapter.setActionText(this._actionText);
+    set open(value) {
+        value = Boolean(value);
+        if (this._open !== value) {
+            if (this._adapter.isConnected) {
+                if (value) {
+                    this.show();
                 }
                 else {
-                    this._adapter.setActionText(this._actionText);
-                    this._adapter.setActionVisibility(true);
-                    this._adapter.registerActionListener('click', this._actionListener);
-                    this._hasAction = true;
+                    this.hide({ dispatchEvent: false });
                 }
             }
-            else if (this._hasAction) {
-                this._adapter.setActionText('');
-                this._adapter.setActionVisibility(false);
-                this._adapter.deregisterActionListener('click', this._actionListener);
-                this._hasAction = false;
+            else {
+                this._open = value;
+                this._adapter.toggleHostAttribute(TOAST_CONSTANTS.attributes.OPEN, this._open);
             }
-            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.ACTION_TEXT, this._actionText);
         }
     }
-    /** The time in milliseconds to show the toast. */
     get duration() {
         return this._duration;
     }
@@ -115,36 +78,73 @@ export class ToastFoundation {
         if (this._duration !== value) {
             this._duration = value;
             if (this._hideTimeout) {
-                clearTimeout(this._hideTimeout);
-                this._hideTimeout = setTimeout(() => this.hide(true), this._duration);
+                window.clearTimeout(this._hideTimeout);
+                if (isFinite(this._duration) && this._duration > 0) {
+                    this._hideTimeout = window.setTimeout(() => this.hide(), this._duration);
+                }
             }
         }
     }
-    /** The placement of the toast. */
     get placement() {
         return this._placement;
     }
     set placement(value) {
         if (this._placement !== value) {
             this._placement = value;
-            this._adapter.setPlacement(this._placement);
+            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.PLACEMENT, this._placement);
         }
-        this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.PLACEMENT, this._placement);
     }
-    get builder() {
-        return this._builder;
+    get actionText() {
+        return this._actionText;
     }
-    set builder(value) {
-        this._builder = value;
+    set actionText(value) {
+        var _a;
+        value = (_a = value === null || value === void 0 ? void 0 : value.trim()) !== null && _a !== void 0 ? _a : '';
+        if (this._actionText !== value) {
+            this._actionText = value;
+            this._adapter.setActionText(this._actionText);
+            if (!!this._actionText) {
+                this._adapter.addActionListener(this._actionListener);
+            }
+            else {
+                this._adapter.removeActionListener(this._actionListener);
+            }
+            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.ACTION_TEXT, this._actionText);
+        }
+    }
+    get dismissible() {
+        return this._dismissible;
+    }
+    set dismissible(value) {
+        value = Boolean(value);
+        if (this._dismissible !== value) {
+            this._dismissible = value;
+            if (this._dismissible) {
+                this._adapter.addCloseListener(this._closeListener);
+            }
+            else {
+                this._adapter.removeCloseListener(this._closeListener);
+            }
+            this._adapter.toggleHostAttribute(TOAST_CONSTANTS.attributes.DISMISSIBLE, this._dismissible);
+        }
+    }
+    get dismissLabel() {
+        return this._dismissLabel;
+    }
+    set dismissLabel(value) {
+        if (this._dismissLabel !== value) {
+            this._dismissLabel = value;
+            this._adapter.setDismissLabel(this._dismissLabel);
+        }
     }
-    get showClose() {
-        return this._showClose;
+    get theme() {
+        return this._theme;
     }
-    set showClose(value) {
-        if (this._showClose !== value) {
-            this._showClose = value;
-            this._adapter.setCloseButtonVisibility(this._showClose);
-            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.SHOW_CLOSE, this._showClose.toString());
+    set theme(value) {
+        value !== null && value !== void 0 ? value : (value = TOAST_CONSTANTS.defaults.THEME);
+        if (this._theme !== value) {
+            this._theme = value;
+            this._adapter.setHostAttribute(TOAST_CONSTANTS.attributes.THEME, this._theme);
         }
     }
 }

package/esm/toast/toast.d.ts

@@ -3,16 +3,29 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { ToastBuilder, ToastPlacement } from './toast-constants';
-export interface IToastComponent extends IBaseComponent {
-    message: string;
-    actionText: string;
+import { BaseComponent } from '../core/base/base-component';
+import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { IIconProperties } from '../icon';
+import { ToastPlacement, ToastTheme } from './toast-constants';
+export interface IToastProperties {
+    open: boolean;
     duration: number;
     placement: ToastPlacement;
-    showClose: boolean;
-    builder: ToastBuilder | string;
-    hide(): void;
+    actionText: string;
+    dismissible: boolean;
+    dismissLabel: string;
+    theme: ToastTheme;
+}
+export interface IToastPresentConfiguration extends Partial<IToastProperties> {
+    message?: string;
+    element?: HTMLElement;
+    className?: string | string[];
+    icon?: Partial<IIconProperties>;
+}
+export interface IToastComponent extends IToastProperties, IWithElementInternals, IWithDefaultAria {
+    show(): void;
+    hide(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -23,29 +36,75 @@ declare global {
         'forge-toast-close': CustomEvent<void>;
     }
 }
+declare const BaseClass: import("../constants").AbstractConstructor<import("../core/mixins/internals/with-element-internals").WithElementInternalsContract> & import("../constants").AbstractConstructor<import("../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & typeof BaseComponent;
 /**
- * The custom element class behind the `<forge-toast>` web component.
- *
  * @tag forge-toast
+ *
+ * @summary Toasts are non-modal notifications that appear in response to user interactions.
+ *
+ * @property {boolean} open - The open state.
+ * @property {number} duration - The duration in milliseconds that the toast is displayed.
+ * @property {ToastPlacement} placement - The placement of the toast.
+ * @property {string} actionText - The text for the action button. This controls the visibility of the action button.
+ * @property {boolean} dismissible - Whether the toast is dismissible (displays a close button).
+ * @property {string} dismissLabel - The accessible label for the dismiss button.
+ * @property {ToastTheme} theme - The theme of the toast.
+ *
+ * @attribute {boolean} open - The open state.
+ * @attribute {number} duration - The duration in milliseconds that the toast is displayed.
+ * @attribute {ToastPlacement} placement - The placement of the toast.
+ * @attribute {string} action-text - The text for the action button. This controls the visibility of the action button.
+ * @attribute {boolean} dismissible - Whether the toast is dismissible (displays a close button).
+ * @attribute {string} dismiss-label - The accessible label for the dismiss button.
+ * @attribute {ToastTheme} theme - The theme of the toast.
+ *
+ * @event {CustomEvent<void>} forge-toast-action - Dispatched when the action button is clicked.
+ * @event {CustomEvent<void>} forge-toast-close - Dispatched when the toast is closed.
+ *
+ * @cssproperty --forge-toast-background - The background color of the toast.
+ * @cssproperty --forge-toast-color - The text color of the toast.
+ * @cssproperty --forge-toast-offset - The offset of the toast from the edge of the viewport.
+ * @cssproperty --forge-toast-shape - The shape of the toast.
+ * @cssproperty --forge-toast-elevation - The elevation of the toast.
+ * @cssproperty --forge-toast-action-color - The text color of the action button.
+ * @cssproperty --forge-toast-min-width - The minimum width of the toast.
+ * @cssproperty --forge-toast-max-width - The maximum width of the toast.
+ * @cssproperty --forge-toast-min-height - The minimum height of the toast.
+ * @cssproperty --forge-toast-inline-padding - The padding of the toast when inline.
+ * @cssproperty --forge-toast-spacing - The spacing between toasts.
+ * @cssproperty --forge-toast-message-padding - The padding of the toast message.
+ * @cssproperty --forge-toast-enter-duration - The duration of the enter animation.
+ * @cssproperty --forge-toast-enter-timing - The timing function of the enter animation.
+ * @cssproperty --forge-toast-exit-duration - The duration of the exit animation.
+ * @cssproperty --forge-toast-exit-timing - The timing function of the exit animation.
+ * @cssproperty --forge-toast-slide-origin - The origin of the slide animation.
+ *
+ * @csspart surface - The surface container.
+ * @csspart message - The message container.
+ * @csspart action-button - The action button.
+ * @csspart close-button - The close button.
+ * @csspart overlay - The `<forge-overlay>` element.
  */
-export declare class ToastComponent extends BaseComponent implements IToastComponent {
+export declare class ToastComponent extends BaseClass implements IToastComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
-    initializedCallback(): void;
+    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** The message to display in the toast. */
-    message: string;
-    /** The text to display in the action button. */
-    actionText: string;
-    /** The time in milliseconds to show the toast. */
+    open: boolean;
     duration: number;
-    /** The placement of the toast. */
     placement: ToastPlacement;
-    /** Sets the toast builder function for displaying custom content. */
-    builder: ToastBuilder | string;
-    /** Controls the visibility of the close button. */
-    showClose: boolean;
-    /** Hides the toast and removes it from the DOM. */
-    hide(): void;
+    actionText: string;
+    dismissible: boolean;
+    dismissLabel: string;
+    theme: ToastTheme;
+    show(): void;
+    hide(): Promise<void>;
+    /**
+     * Presents a toast notification.
+     * @param config The configuration for the toast.
+     * @returns A promise that resolves when the toast is closed.
+     */
+    static present({ message, element, icon, className, ...config }: IToastPresentConfiguration): IToastComponent;
 }
+export {};

package/esm/toast/toast.js

@@ -3,32 +3,75 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
+import { __decorate, __rest } from "tslib";
 import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
 import { tylIconClose } from '@tylertech/tyler-icons/standard';
 import { ButtonComponent } from '../button';
+import { setDefaultAria } from '../constants';
 import { BaseComponent } from '../core/base/base-component';
+import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { DialogComponent, dialogStack } from '../dialog';
 import { IconComponent, IconRegistry } from '../icon';
 import { IconButtonComponent } from '../icon-button';
+import { OverlayComponent } from '../overlay';
 import { ToastAdapter } from './toast-adapter';
 import { TOAST_CONSTANTS } from './toast-constants';
 import { ToastFoundation } from './toast-foundation';
-const template = '<template><div class=\"forge-toast__container\" aria-live=\"assertive\" aria-atomic=\"true\" part=\"root\"><slot></slot><div class=\"forge-toast__message\" part=\"message\"></div><div class=\"forge-toast__action-container\" part=\"action-container\"><forge-button part=\"action-button\" class=\"forge-toast__action-button\" part=\"action-button-element\"></forge-button><forge-icon-button part=\"close-button\" class=\"forge-toast__close-button\" aria-label=\"Close toast message\" part=\"close-button-element\"><forge-icon name=\"close\" part=\"close-button-icon\"></forge-icon></forge-icon-button></div></div></template>';
-const styles = '.forge-toast__container{z-index:9;z-index:var(--forge-z-index-notification,9);-webkit-box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);background-color:#333;background-color:var(--forge-toast-theme-background,#333);display:-webkit-box;display:flex;position:fixed;border-radius:2px;-webkit-transition:-webkit-transform 250ms 0s cubic-bezier(.4, 0, 1, 1);transition:-webkit-transform 250ms 0s cubic-bezier(.4, 0, 1, 1);transition:transform 250ms 0s cubic-bezier(.4, 0, 1, 1);transition:transform 250ms 0s cubic-bezier(.4, 0, 1, 1),-webkit-transform 250ms 0s cubic-bezier(.4, 0, 1, 1);-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-sizing:border-box;box-sizing:border-box;padding:4px 8px 4px 16px;min-height:48px}@media (max-width:599px){.forge-toast__container{bottom:0;width:100%;border-radius:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}.forge-toast__container ::slotted(*){color:rgba(255,255,255,.87);color:var(--forge-toast-theme-on-background,rgba(255,255,255,.87))}@media (min-width:600px){.forge-toast__container{min-width:344px;max-width:568px}.forge-toast__container.forge-toast__container--top,.forge-toast__container.forge-toast__container--top-left,.forge-toast__container.forge-toast__container--top-right{top:0}.forge-toast__container.forge-toast__container--top{left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);margin-top:0;margin-top:var(--forge-toast-top-margin-top,0)}.forge-toast__container.forge-toast__container--bottom{left:50%;-webkit-transform:translateX(-50%) translateY(100%);transform:translateX(-50%) translateY(100%);margin-bottom:0;margin-bottom:var(--forge-toast-bottom-margin-bottom,0)}.forge-toast__container.forge-toast__container--top-left,.forge-toast__container.forge-toast__container--top-right{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.forge-toast__container.forge-toast__container--bottom-left,.forge-toast__container.forge-toast__container--bottom-right{-webkit-transform:translateY(100%);transform:translateY(100%)}.forge-toast__container.forge-toast__container--bottom,.forge-toast__container.forge-toast__container--bottom-left,.forge-toast__container.forge-toast__container--bottom-right{bottom:0}.forge-toast__container.forge-toast__container--bottom-left{margin-bottom:24px;margin-bottom:var(--forge-toast-bottom-left-margin-bottom,24px);margin-left:24px;margin-left:var(--forge-toast-bottom-left-margin-left,24px);left:0}.forge-toast__container.forge-toast__container--bottom-right{margin-bottom:24px;margin-bottom:var(--forge-toast-bottom-right-margin-bottom,24px);margin-right:24px;margin-right:var(--forge-toast-bottom-right-margin-right,24px)}.forge-toast__container.forge-toast__container--top-left{margin-top:24px;margin-top:var(--forge-toast-top-left-margin-top,24px);margin-left:24px;margin-left:var(--forge-toast-top-left-margin-left,24px);left:0}.forge-toast__container.forge-toast__container--top-right{margin-top:24px;margin-top:var(--forge-toast-top-right-margin-top,24px);margin-right:24px;margin-right:var(--forge-toast-top-right-margin-right,24px);right:0}.forge-toast__container.forge-toast__container--bottom-right{margin-bottom:24px;margin-bottom:var(--forge-toast-bottom-right-margin-bottom,24px);margin-right:24px;margin-right:var(--forge-toast-bottom-right-margin-right,24px);right:0}}.forge-toast__container--active{-webkit-transition:-webkit-transform 250ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 250ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 250ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 250ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 250ms 0s cubic-bezier(0, 0, .2, 1)}.forge-toast__container--active>.forge-toast__message{opacity:1}.forge-toast__container--active>.forge-toast__action-button{opacity:1}@media (max-width:599px){.forge-toast__container--active{-webkit-transform:translateY(0)!important;transform:translateY(0)!important}}@media (min-width:600px){.forge-toast__container--active.forge-toast__container--bottom,.forge-toast__container--active.forge-toast__container--top{-webkit-transform:translateX(-50%) translateY(0)!important;transform:translateX(-50%) translateY(0)!important}.forge-toast__container--active.forge-toast__container--bottom-left,.forge-toast__container--active.forge-toast__container--bottom-right,.forge-toast__container--active.forge-toast__container--top-left,.forge-toast__container--active.forge-toast__container--top-right{-webkit-transform:translateY(0)!important;transform:translateY(0)!important}}.forge-toast__container--custom{min-width:0;max-width:none}.forge-toast__message{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size, 1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);color:rgba(255,255,255,.87);color:var(--forge-toast-theme-on-background,rgba(255,255,255,.87));display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-transition:opacity .3s 0s cubic-bezier(.4, 0, 1, 1);transition:opacity .3s 0s cubic-bezier(.4, 0, 1, 1);opacity:0}.forge-toast__action-container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-left:8px}.forge-toast__action-button{--forge-theme-primary:#ffc107;--forge-theme-primary:var(--forge-toast-theme-action, #ffc107)}.forge-toast__close-button{color:rgba(255,255,255,.87);color:var(--forge-toast-theme-on-background,rgba(255,255,255,.87));margin-left:8px}.forge-toast__close-button::after,.forge-toast__close-button::before{background-color:rgba(255,255,255,.87);background-color:var(--forge-toast-theme-on-background,rgba(255,255,255,.87))}:host{display:inline-block}:host([hidden]){display:none}';
+const template = '<template><forge-overlay exportparts=\"root:overlay\" no-anchor persistent><div class=\"surface\" part=\"surface\"><slot name=\"icon\"></slot><div class=\"message\" part=\"message\"><slot></slot></div><forge-button hidden part=\"action-button\" class=\"action-button\"></forge-button><forge-icon-button part=\"close-button\" class=\"close-button\" aria-label=\"Dismiss\" density=\"medium\"><forge-icon name=\"close\"></forge-icon></forge-icon-button></div></forge-overlay></template>';
+const styles = '@-webkit-keyframes slidein{from{-webkit-transform:translateY(var(--_toast-slide-origin));transform:translateY(var(--_toast-slide-origin))}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slidein{from{-webkit-transform:translateY(var(--_toast-slide-origin));transform:translateY(var(--_toast-slide-origin))}to{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slideout{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(var(--_toast-slide-origin));transform:translateY(var(--_toast-slide-origin))}}@keyframes slideout{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(var(--_toast-slide-origin));transform:translateY(var(--_toast-slide-origin))}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0}}@keyframes fadeout{from{opacity:1}to{opacity:0}}@layer base,open,theme,placement,media; @layer base{:host{display:contents}:host([hidden]){display:none}.surface{--_toast-background:var(--forge-toast-background, var(--forge-theme-surface-inverse, #333333));--_toast-color:var(--forge-toast-color, var(--forge-theme-on-surface-inverse, #ffffff));--_toast-offset:var(--forge-toast-offset, var(--forge-spacing-medium, 16px));--_toast-shape:var(--forge-toast-shape, var(--forge-shape-medium, 4px));--_toast-elevation:var(--forge-toast-elevation, 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12));--_toast-action-color:var(--forge-toast-action-color, var(--forge-theme-secondary, #ffc107));--_toast-min-width:var(--forge-toast-min-width, 344px);--_toast-max-width:var(--forge-toast-max-width, 672px);--_toast-min-height:var(--forge-toast-min-height, 48px);--_toast-inline-padding:var(--forge-toast-inline-padding, var(--forge-spacing-medium, 16px));--_toast-spacing:var(--forge-toast-spacing, var(--forge-spacing-xsmall, 8px));--_toast-message-padding:var(--forge-toast-message-padding, var(--forge-spacing-xsmall, 8px));--_toast-enter-duration:var(--forge-toast-enter-duration, var(--forge-animation-duration-medium1, 250ms));--_toast-enter-timing:var(--forge-toast-enter-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_toast-exit-duration:var(--forge-toast-exit-duration, var(--forge-animation-duration-short4, 200ms));--_toast-exit-timing:var(--forge-toast-exit-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));--_toast-slide-origin:var(--forge-toast-slide-origin, 100%)}.surface{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));font-weight:var(--forge-typography-body2-font-weight,400);line-height:var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body2-text-decoration,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);position:fixed;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-column-gap:var(--_toast-spacing);-moz-column-gap:var(--_toast-spacing);column-gap:var(--_toast-spacing);border-radius:var(--_toast-shape);padding-inline:var(--_toast-inline-padding);margin:var(--_toast-offset);min-width:var(--_toast-min-width);max-width:var(--_toast-max-width);min-height:var(--_toast-min-height);-webkit-box-sizing:border-box;box-sizing:border-box;background:var(--_toast-background);color:var(--_toast-color);-webkit-box-shadow:var(--_toast-elevation);box-shadow:var(--_toast-elevation)}.message{-webkit-box-flex:1;flex-grow:1;padding-block:var(--_toast-message-padding);text-overflow:ellipsis;overflow:hidden}forge-button.action-button{--forge-button-primary-color:var(--_toast-action-color)}forge-icon-button.close-button{--forge-icon-button-focus-indicator-color:var(--_toast-color)}:host(:not([dismissible])) .close-button{display:none}.action-button:not([hidden]){-webkit-margin-end:-8px;margin-inline-end:-8px}:host([dismissible]) .close-button{-webkit-margin-end:-8px;margin-inline-end:-8px}}@layer theme{:host([theme=primary]) .surface{--_toast-background:var(--forge-toast-background, var(--forge-theme-primary, #3f51b5));--_toast-color:var(--forge-toast-color, var(--forge-theme-on-primary, #ffffff));--_toast-action-color:var(--_toast-color)}:host([theme=secondary]) .surface{--_toast-background:var(--forge-toast-background, var(--forge-theme-secondary, #ffc107));--_toast-color:var(--forge-toast-color, var(--forge-theme-on-secondary, #000000));--_toast-action-color:var(--_toast-color)}:host([theme=tertiary]) .surface{--_toast-background:var(--forge-toast-background, var(--forge-theme-tertiary, #3d5afe));--_toast-color:var(--forge-toast-color, var(--forge-theme-on-tertiary, #ffffff));--_toast-action-color:var(--_toast-color)}:host([theme=success]) .surface{--_toast-background:var(--forge-toast-background, var(--forge-theme-success, #2e7d32));--_toast-color:var(--forge-toast-color, var(--forge-theme-on-success, #ffffff));--_toast-action-color:var(--_toast-color)}:host([theme=warning]) .surface{--_toast-background:var(--forge-toast-background, var(--forge-theme-warning, #d14900));--_toast-color:var(--forge-toast-color, var(--forge-theme-on-warning, #ffffff));--_toast-action-color:var(--_toast-color)}:host([theme=error]) .surface{--_toast-background:var(--forge-toast-background, var(--forge-theme-error, #b00020));--_toast-color:var(--forge-toast-color, var(--forge-theme-on-error, #ffffff));--_toast-action-color:var(--_toast-color)}:host([theme=info]) .surface{--_toast-background:var(--forge-toast-background, var(--forge-theme-info, #1565c0));--_toast-color:var(--forge-toast-color, var(--forge-theme-on-info, #ffffff));--_toast-action-color:var(--_toast-color)}}@layer open{forge-overlay[open] .surface{-webkit-animation-name:slidein;animation-name:slidein;-webkit-animation-duration:var(--_toast-enter-duration);animation-duration:var(--_toast-enter-duration);-webkit-animation-timing-function:var(--_toast-enter-timing);animation-timing-function:var(--_toast-enter-timing)}forge-overlay[open] .surface.exiting{-webkit-animation-name:slideout;animation-name:slideout;-webkit-animation-duration:var(--_toast-exit-duration);animation-duration:var(--_toast-exit-duration);-webkit-animation-timing-function:var(--_toast-exit-timing);animation-timing-function:var(--_toast-exit-timing)}}@layer placement{:host([placement=bottom-start]) .surface{bottom:0;left:0}:host(:is(:not([placement]),[placement=bottom])) .surface{bottom:0;left:50%;translate:-50%}:host([placement=bottom-end]) .surface{bottom:0;right:0}:host([placement=top-start]) .surface{--_toast-slide-origin:var(--forge-toast-slide-origin, -100%);top:0;left:0}:host([placement=top]) .surface{--_toast-slide-origin:var(--forge-toast-slide-origin, -100%);top:0;left:50%;translate:-50%}:host([placement=top-end]) .surface{--_toast-slide-origin:var(--forge-toast-slide-origin, -100%);top:0;right:0}}@layer media{@media (prefers-reduced-motion:reduce){forge-overlay[open] .surface{-webkit-animation-name:fadein;animation-name:fadein}forge-overlay[open] .surface.exiting{-webkit-animation-name:fadeout;animation-name:fadeout}}@media (max-width:599px){:host([placement^=top]) .surface{bottom:auto;top:0}.surface{bottom:0;left:0;right:0;margin:0;translate:none;max-width:none;min-width:auto;border-radius:0}}}';
+const BaseClass = WithElementInternals(WithDefaultAria(BaseComponent));
 /**
- * The custom element class behind the `<forge-toast>` web component.
- *
  * @tag forge-toast
+ *
+ * @summary Toasts are non-modal notifications that appear in response to user interactions.
+ *
+ * @property {boolean} open - The open state.
+ * @property {number} duration - The duration in milliseconds that the toast is displayed.
+ * @property {ToastPlacement} placement - The placement of the toast.
+ * @property {string} actionText - The text for the action button. This controls the visibility of the action button.
+ * @property {boolean} dismissible - Whether the toast is dismissible (displays a close button).
+ * @property {string} dismissLabel - The accessible label for the dismiss button.
+ * @property {ToastTheme} theme - The theme of the toast.
+ *
+ * @attribute {boolean} open - The open state.
+ * @attribute {number} duration - The duration in milliseconds that the toast is displayed.
+ * @attribute {ToastPlacement} placement - The placement of the toast.
+ * @attribute {string} action-text - The text for the action button. This controls the visibility of the action button.
+ * @attribute {boolean} dismissible - Whether the toast is dismissible (displays a close button).
+ * @attribute {string} dismiss-label - The accessible label for the dismiss button.
+ * @attribute {ToastTheme} theme - The theme of the toast.
+ *
+ * @event {CustomEvent<void>} forge-toast-action - Dispatched when the action button is clicked.
+ * @event {CustomEvent<void>} forge-toast-close - Dispatched when the toast is closed.
+ *
+ * @cssproperty --forge-toast-background - The background color of the toast.
+ * @cssproperty --forge-toast-color - The text color of the toast.
+ * @cssproperty --forge-toast-offset - The offset of the toast from the edge of the viewport.
+ * @cssproperty --forge-toast-shape - The shape of the toast.
+ * @cssproperty --forge-toast-elevation - The elevation of the toast.
+ * @cssproperty --forge-toast-action-color - The text color of the action button.
+ * @cssproperty --forge-toast-min-width - The minimum width of the toast.
+ * @cssproperty --forge-toast-max-width - The maximum width of the toast.
+ * @cssproperty --forge-toast-min-height - The minimum height of the toast.
+ * @cssproperty --forge-toast-inline-padding - The padding of the toast when inline.
+ * @cssproperty --forge-toast-spacing - The spacing between toasts.
+ * @cssproperty --forge-toast-message-padding - The padding of the toast message.
+ * @cssproperty --forge-toast-enter-duration - The duration of the enter animation.
+ * @cssproperty --forge-toast-enter-timing - The timing function of the enter animation.
+ * @cssproperty --forge-toast-exit-duration - The duration of the exit animation.
+ * @cssproperty --forge-toast-exit-timing - The timing function of the exit animation.
+ * @cssproperty --forge-toast-slide-origin - The origin of the slide animation.
+ *
+ * @csspart surface - The surface container.
+ * @csspart message - The message container.
+ * @csspart action-button - The action button.
+ * @csspart close-button - The close button.
+ * @csspart overlay - The `<forge-overlay>` element.
  */
-let ToastComponent = class ToastComponent extends BaseComponent {
+let ToastComponent = class ToastComponent extends BaseClass {
     static get observedAttributes() {
-        return [
-            TOAST_CONSTANTS.attributes.MESSAGE,
-            TOAST_CONSTANTS.attributes.ACTION_TEXT,
-            TOAST_CONSTANTS.attributes.DURATION,
-            TOAST_CONSTANTS.attributes.PLACEMENT,
-            TOAST_CONSTANTS.attributes.SHOW_CLOSE
-        ];
+        return Object.values(TOAST_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
@@ -36,16 +79,21 @@ let ToastComponent = class ToastComponent extends BaseComponent {
         attachShadowTemplate(this, template, styles);
         this._foundation = new ToastFoundation(new ToastAdapter(this));
     }
-    initializedCallback() {
+    connectedCallback() {
+        const hasRole = this.hasAttribute('role') || this.getAttribute('aria-hidden') === 'true';
+        if (!hasRole) {
+            this[setDefaultAria]({
+                role: 'alert',
+                ariaLive: 'assertive',
+                ariaAtomic: 'true'
+            });
+        }
         this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case TOAST_CONSTANTS.attributes.MESSAGE:
-                this.message = newValue;
-                break;
-            case TOAST_CONSTANTS.attributes.ACTION_TEXT:
-                this.actionText = newValue;
+            case TOAST_CONSTANTS.attributes.OPEN:
+                this.open = coerceBoolean(newValue);
                 break;
             case TOAST_CONSTANTS.attributes.DURATION:
                 const value = Number(newValue);
@@ -54,22 +102,64 @@ let ToastComponent = class ToastComponent extends BaseComponent {
             case TOAST_CONSTANTS.attributes.PLACEMENT:
                 this.placement = newValue || TOAST_CONSTANTS.defaults.PLACEMENT;
                 break;
-            case TOAST_CONSTANTS.attributes.SHOW_CLOSE:
-                this.showClose = coerceBoolean(newValue);
+            case TOAST_CONSTANTS.attributes.ACTION_TEXT:
+                this.actionText = newValue;
+                break;
+            case TOAST_CONSTANTS.attributes.DISMISSIBLE:
+                this.dismissible = coerceBoolean(newValue);
+                break;
+            case TOAST_CONSTANTS.attributes.DISMISS_LABEL:
+                this.dismissLabel = newValue;
+                break;
+            case TOAST_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
                 break;
         }
     }
-    /** Hides the toast and removes it from the DOM. */
+    show() {
+        this._foundation.show();
+    }
     hide() {
-        this._foundation.hide();
+        return this._foundation.hide();
+    }
+    /**
+     * Presents a toast notification.
+     * @param config The configuration for the toast.
+     * @returns A promise that resolves when the toast is closed.
+     */
+    static present(_a) {
+        var _b;
+        var { message, element, icon, className } = _a, config = __rest(_a, ["message", "element", "icon", "className"]);
+        const toast = document.createElement(TOAST_CONSTANTS.elementName);
+        if (element) {
+            toast.appendChild(element);
+        }
+        else if (message) {
+            toast.append(message);
+        }
+        if (icon) {
+            const iconEl = document.createElement('forge-icon');
+            Object.assign(iconEl, icon);
+            iconEl.slot = 'icon';
+            toast.appendChild(iconEl);
+        }
+        if (className) {
+            const classes = Array.isArray(className) ? className : [className];
+            toast.classList.add(...classes);
+        }
+        if (config) {
+            Object.assign(toast, config);
+        }
+        const hostEl = (_b = Array.from(DialogComponent[dialogStack]).at(-1)) !== null && _b !== void 0 ? _b : document.body;
+        hostEl.appendChild(toast);
+        toast.open = true;
+        toast.addEventListener(TOAST_CONSTANTS.events.CLOSE, () => toast.remove());
+        return toast;
     }
 };
 __decorate([
     FoundationProperty()
-], ToastComponent.prototype, "message", void 0);
-__decorate([
-    FoundationProperty()
-], ToastComponent.prototype, "actionText", void 0);
+], ToastComponent.prototype, "open", void 0);
 __decorate([
     FoundationProperty()
 ], ToastComponent.prototype, "duration", void 0);
@@ -78,14 +168,21 @@ __decorate([
 ], ToastComponent.prototype, "placement", void 0);
 __decorate([
     FoundationProperty()
-], ToastComponent.prototype, "builder", void 0);
+], ToastComponent.prototype, "actionText", void 0);
+__decorate([
+    FoundationProperty()
+], ToastComponent.prototype, "dismissible", void 0);
+__decorate([
+    FoundationProperty()
+], ToastComponent.prototype, "dismissLabel", void 0);
 __decorate([
     FoundationProperty()
-], ToastComponent.prototype, "showClose", void 0);
+], ToastComponent.prototype, "theme", void 0);
 ToastComponent = __decorate([
     CustomElement({
         name: TOAST_CONSTANTS.elementName,
         dependencies: [
+            OverlayComponent,
             ButtonComponent,
             IconButtonComponent,
             IconComponent

package/esm/tooltip/tooltip-adapter.d.ts

@@ -6,6 +6,7 @@
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { ITooltipComponent } from './tooltip';
 export interface ITooltipAdapter extends IBaseAdapter {
+    readonly hostElement: ITooltipComponent;
     readonly anchorElement: HTMLElement | null;
     syncAria(): void;
     detachAria(): void;