@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

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;

package/esm/tooltip/tooltip-foundation.js

@@ -6,6 +6,7 @@
 import { TOOLTIP_CONSTANTS } from './tooltip-constants';
 import { WithLongpressListener } from '../core/mixins/interactions/longpress/with-longpress-listener';
 import { canUserHoverElements } from '../constants';
+import { DismissibleStack } from '../core/utils/dismissible-stack';
 const BaseClass = WithLongpressListener();
 export class TooltipFoundation extends BaseClass {
     constructor(_adapter) {
@@ -97,6 +98,7 @@ export class TooltipFoundation extends BaseClass {
     _show() {
         this._open = true;
         this._adapter.show();
+        DismissibleStack.instance.add(this._adapter.hostElement);
         this._attachDismissListeners();
         this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.OPEN, this._open);
     }
@@ -105,6 +107,7 @@ export class TooltipFoundation extends BaseClass {
         window.clearTimeout(this._longpressVisibilityTimeout);
         this._open = false;
         this._adapter.hide();
+        DismissibleStack.instance.remove(this._adapter.hostElement);
         this._detachDismissListeners();
         this._adapter.toggleHostAttribute(TOOLTIP_CONSTANTS.attributes.OPEN, this._open);
     }

package/esm/tooltip/tooltip.d.ts

@@ -9,7 +9,8 @@ import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
 import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
 import { OverlayFlipState } from '../overlay/overlay-constants';
 import { PositionPlacement } from '../core/utils/position-utils';
-export interface ITooltipComponent extends IWithDefaultAria, IWithElementInternals {
+import { IDismissible, IDismissibleStackState, tryDismiss } from '../core/utils/dismissible-stack';
+export interface ITooltipComponent extends IWithDefaultAria, IWithElementInternals, IDismissible {
     open: boolean;
     type: TooltipType;
     anchor: string;
@@ -95,6 +96,7 @@ export declare class TooltipComponent extends BaseClass implements ITooltipCompo
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
+    [tryDismiss](state?: IDismissibleStackState<string> | undefined): boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;

package/esm/tooltip/tooltip.js

@@ -13,6 +13,7 @@ import { OverlayComponent } from '../overlay/overlay';
 import { coerceStringToArray } from '../core/utils/utils';
 import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
 import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { tryDismiss } from '../core/utils/dismissible-stack';
 const template = '<template><div class=\"forge-tooltip\" part=\"surface\"><slot></slot><div class=\"arrow\" part=\"arrow\"></div></div></template>';
 const styles = '@-webkit-keyframes slidein{from{opacity:0;-webkit-transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes slidein{from{opacity:0;-webkit-transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, var(--forge-shape-medium, 4px));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-popup-elevation, var(--forge-theme-surface-bright-shadow)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, var(--forge-shape-small, 2px));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);-webkit-box-shadow:var(--_tooltip-elevation);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;-webkit-animation-duration:var(--_tooltip-animation-duration);animation-duration:var(--_tooltip-animation-duration);-webkit-animation-timing-function:var(--_tooltip-animation-timing);animation-timing-function:var(--_tooltip-animation-timing);-webkit-animation-name:slidein;animation-name:slidein;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);-webkit-box-shadow:inherit;box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);-webkit-clip-path:var(--_tooltip-arrow-clip-path);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);-webkit-margin-after:var(--_tooltip-border-width);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);-webkit-margin-start:var(--_tooltip-border-width);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);-webkit-margin-before:var(--_tooltip-border-width);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);-webkit-margin-end:var(--_tooltip-border-width);margin-inline-end:var(--_tooltip-border-width)}';
 const BaseClass = WithDefaultAria(WithElementInternals(BaseComponent));
@@ -83,6 +84,9 @@ let TooltipComponent = class TooltipComponent extends BaseClass {
         attachShadowTemplate(this, template, styles);
         this._foundation = new TooltipFoundation(new TooltipAdapter(this));
     }
+    [tryDismiss](state) {
+        return true;
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.21",
+  "version": "3.0.0-next.23",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,17 +16,12 @@
     "@floating-ui/dom": "~1.5.3",
     "@material/animation": "^14.0.0",
     "@material/button": "^14.0.0",
-    "@material/card": "^14.0.0",
-    "@material/checkbox": "^14.0.0",
-    "@material/chips": "^14.0.0",
     "@material/drawer": "^14.0.0",
     "@material/elevation": "^14.0.0",
     "@material/feature-targeting": "^14.0.0",
-    "@material/form-field": "^14.0.0",
     "@material/menu-surface": "^14.0.0",
     "@material/ripple": "^14.0.0",
     "@material/rtl": "^14.0.0",
-    "@material/select": "^14.0.0",
     "@material/shape": "^14.0.0",
     "@material/theme": "^14.0.0",
     "@material/typography": "^14.0.0",

package/styles/backdrop/_animations.scss

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core' as *;
+
+@keyframes enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: #{token(opacity)};
+  }
+}
+
+@keyframes exit {
+  from {
+    opacity: #{token(opacity)};
+  }
+  to {
+    opacity: 0;
+  }
+}

package/styles/backdrop/_core.scss

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: contents;
+}
+
+@mixin base {
+  position: absolute;
+  inset: 0;
+  contain: content;
+
+  z-index: #{token(z-index)};
+
+  background: #{token(background)};
+  opacity: 0;
+
+  animation-fill-mode: forwards;
+}
+
+@mixin visible {
+  opacity: #{token(opacity)};
+}
+
+@mixin entering {
+  animation-name: enter;
+  animation-duration: #{token(enter-animation-duration)};
+  animation-timing-function: #{token(enter-animation-easing)};
+}
+
+@mixin exiting {
+  animation-name: exit;
+  animation-duration: #{token(exit-animation-duration)};
+  animation-timing-function: #{token(exit-animation-easing)};
+}

package/styles/backdrop/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/backdrop/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: backdrop;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

package/styles/backdrop/backdrop.scss

@@ -3,30 +3,57 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use 'sass:map';
-@use './mixins';
-@use '../theme';
+@use './core' as *;
+@use './animations';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  display: block;
+  display: contents;
 }
 
 :host([hidden]) {
-  display: none;
+  display: flex;
 }
 
+//
+// Base
+//
+
+.forge-backdrop {
+  @include tokens;
+}
+
+.forge-backdrop {
+  @include base;
+}
+
+//
+// Fixed
+//
+
 :host([fixed]) {
   .forge-backdrop {
     position: fixed;
   }
 }
 
-:host([appearance='light']) {
-  --forge-backdrop-theme-background: #{map.get(map.get(theme.$text-colors, light), secondary-alternative)};
-}
+//
+// Animation
+//
+
+:host([visible]) {
+  .forge-backdrop {
+    @include visible;
 
-:host([appearance='dark']) {
-  --forge-backdrop-theme-background: #{map.get(map.get(theme.$text-colors, dark), secondary)};
+    &.entering {
+      @include entering;
+    }
+
+    &.exiting {
+      @include exiting;
+    }
+  }
 }

package/{esm/radio/radio-group/radio-group-component-delegate.js → styles/backdrop/index.scss}

@@ -3,3 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@forward './core';

package/styles/bottom-sheet/_mixins.scss

@@ -26,11 +26,11 @@
     }
 
     &--dragging {
-		@include dragging;
+		  @include dragging;
     }
 
     &--scrollable {
-		@include scrollable;
+		  @include scrollable;
     }
   }
 }
@@ -41,17 +41,12 @@
   position: fixed;
 }
 
-@mixin backdrop() {
-  @include utils-mixins.position-abs-zero;
-
-  position: fixed;
-}
-
 @mixin base() {
   @include mdc-theme.property(background-color, surface);
   @include mdc-elevation-theme.elevation(8);
   @include theme.css-custom-property(border-radius, --forge-bottom-sheet-border-radius, mdc-shape.$medium-component-radius mdc-shape.$medium-component-radius 0 0);
   @include theme.css-custom-property(max-width, --forge-bottom-sheet-desktop-max-width, 50%);
+  @include theme.z-index(dialog);
 
   box-sizing: border-box;
   position: fixed;

package/styles/bottom-sheet/bottom-sheet.scss

@@ -9,10 +9,6 @@
 
 :host {
   @include mixins.host;
-
-  forge-backdrop {
-    @include mixins.backdrop;
-  }
 }
 
 :host([hidden]) {

package/styles/calendar/calendar-menu/calendar-menu.scss

@@ -17,6 +17,6 @@
 }
 
 // This is here until Firefox supports :host-context()...
-:host([forge-popup-context=true]) {
+:host([forge-popover-context=true]) {
   @include mixins.popup-context-styles;
 }

package/styles/calendar/calendar.scss

@@ -17,6 +17,6 @@
 }
 
 // This is here until Firefox supports :host-context()...
-:host([forge-popup-context=true]) {
+:host([forge-popover-context=true]) {
   @include mixins.popup-context-styles;
 }

package/styles/card/_core.scss

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: block;
+}
+
+@mixin base {
+  background: #{token(background)};
+
+  border-color: #{token(outline-color)};
+  border-width: #{token(outline-width)};
+  border-style: #{token(outline-style)};
+  border-radius: #{token(shape)};
+  
+  box-shadow: #{token(elevation)};
+  box-sizing: border-box;
+  padding: #{token(padding)};
+  overflow: #{token(overflow)};
+  height: #{token(height)};
+  width: #{token(width)};
+
+  -webkit-tap-highlight-color: transparent;
+}
+
+@mixin raised {
+  @include override(elevation, raised-elevation);
+  @include override(outline-width, raised-outline-width);
+}