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

package/esm/dialog/dialog.d.ts

@@ -3,78 +3,159 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { DialogPositionType, IDialogMoveStartEventData, IDialogMoveEventData, DialogStateCallback } from './dialog-constants';
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface IDialogComponent extends IBaseComponent {
-    backdropClose: boolean;
-    escapeClose: boolean;
+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 { DialogAnimationType, DialogMode, DialogPlacement, DialogPositionStrategy, DialogPreset, DialogSizeStrategy, dialogStack, DialogType, hideBackdrop, IDialogMoveEventData, IDialogMoveStartEventData, showBackdrop } from './dialog-constants';
+import { IDismissible, IDismissibleStackState, tryDismiss } from '../core/utils/dismissible-stack';
+export interface IDialogComponent extends IWithDefaultAria, IWithElementInternals, IDismissible {
     open: boolean;
+    mode: DialogMode;
+    type: DialogType;
+    animationType: DialogAnimationType;
+    preset: DialogPreset;
+    persistent: boolean;
     fullscreen: boolean;
-    openCallback: DialogStateCallback;
-    closeCallback: DialogStateCallback;
-    beforeCloseCallback: () => boolean | Promise<boolean>;
-    positionType: DialogPositionType;
-    positionX: number | string | null | undefined;
-    positionY: number | string | null | undefined;
+    trigger: string;
+    triggerElement: HTMLElement | null;
+    positionStrategy: DialogPositionStrategy;
+    sizeStrategy: DialogSizeStrategy;
+    placement: DialogPlacement;
     moveable: boolean;
-    moveTarget: string;
-    initializeMoveTarget(): void;
-    resetPosition(): void;
-    show(parent?: HTMLElement): Promise<void>;
-    hide(remove?: boolean): Promise<void>;
+    show(): void;
+    hide(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-dialog': IDialogComponent;
     }
     interface HTMLElementEventMap {
-        'forge-dialog-before-close': CustomEvent<void>;
         'forge-dialog-open': CustomEvent<void>;
         'forge-dialog-close': CustomEvent<void>;
-        'forge-dialog-ready': CustomEvent<void>;
+        'forge-dialog-before-close': CustomEvent<void>;
         'forge-dialog-move-start': CustomEvent<IDialogMoveStartEventData>;
         'forge-dialog-move': CustomEvent<IDialogMoveEventData>;
         'forge-dialog-move-end': CustomEvent<void>;
     }
 }
+declare const BaseClass: import("..").AbstractConstructor<import("../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("..").AbstractConstructor<import("../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
- * The web component class behind the `<forge-dialog>` custom element.
- *
  * @tag forge-dialog
+ *
+ * @summary Dialogs are temporary UI elements that are used to display information, ask for input, or confirm actions.
+ *
+ * @property {boolean} open - Indicates whether the dialog is open.
+ * @property {DialogMode} mode - The mode of the dialog. Default is 'modal'.
+ * @property {DialogType} type - The type of the dialog. Default is 'dialog'.
+ * @property {DialogAnimationType} animationType - The animation type of the dialog.
+ * @property {DialogPreset} preset - The preset design that the dialog will apply.
+ * @property {boolean} persistent - Indicates whether the dialog is dismissible via escape and backdrop click or not.
+ * @property {boolean} fullscreen - Indicates whether the dialog is fullscreen or not.
+ * @property {string} trigger - The selector of the element that triggers the dialog.
+ * @property {HTMLElement | null} triggerElement - The element that triggers the dialog.
+ * @property {boolean} moveable - Indicates whether the dialog is moveable or not.
+ * @property {DialogPositionStrategy} positionStrategy - Controls whether the dialog is rendered relative to the viewport its nearest containing block.
+ * @property {DialogSizeStrategy} sizeStrategy - Controls the block and/or inline size of the dialog. Defaults to the size of the content it contains.
+ * @property {DialogPlacement} placement - The placement of the dialog. Defaults to center.
+ *
+ * @attribute {boolean} open - Indicates whether the dialog is open.
+ * @attribute {DialogMode} mode - The mode of the dialog. Default is 'modal'.
+ * @attribute {DialogType} type - The type of the dialog. Default is 'dialog'.
+ * @attribute {DialogAnimationType} animationType - The animation type of the dialog.
+ * @attribute {DialogPreset} preset - The preset design that the dialog will apply.
+ * @attribute {boolean} persistent - Indicates whether the dialog is dismissible via escape and backdrop click or not.
+ * @attribute {boolean} fullscreen - Indicates whether the dialog is fullscreen or not.
+ * @attribute {string} trigger - The selector of the element that triggers the dialog.
+ * @attribute {boolean} moveable - Indicates whether the dialog is moveable or not.
+ * @attribute {DialogPositionStrategy} positionStrategy - Controls whether the dialog is rendered relative to the viewport its nearest containing block.
+ * @attribute {DialogSizeStrategy} sizeStrategy - Controls the block and/or inline size of the dialog. Defaults to the size of the content it contains.
+ * @attribute {DialogPlacement} placement - The placement of the dialog. Defaults to center.
+ *
+ * @event {CustomEvent<void>} forge-dialog-open - Dispatched when the dialog is opened.
+ * @event {CustomEvent<void>} forge-dialog-close - Dispatched when the dialog is closed.
+ * @event {CustomEvent<void>} forge-dialog-before-close - Dispatched before the dialog is closed. This event is cancelable.
+ * @event {CustomEvent<IDialogMoveStartEventData>} forge-dialog-move-start - Dispatched when the dialog is first moved.
+ * @event {CustomEvent<IDialogMoveEventData>} forge-dialog-move - Dispatched when the dialog is being moved.
+ * @event {CustomEvent<void>} forge-dialog-move-end - Dispatched when the dialog is done being moved.
+ *
+ * @cssproperty --forge-dialog-background - The background color of the dialog.
+ * @cssproperty --forge-dialog-shape - The shape of the dialog.
+ * @cssproperty --forge-dialog-elevation - The elevation of the dialog.
+ * @cssproperty --forge-dialog-spacing - The spacing between elements inside the dialog.
+ * @cssproperty --forge-dialog-block-start-spacing - The spacing at the start of the dialog block.
+ * @cssproperty --forge-dialog-block-end-spacing - The spacing at the end of the dialog block.
+ * @cssproperty --forge-dialog-inline-start-spacing - The spacing at the start of the dialog inline.
+ * @cssproperty --forge-dialog-inline-end-spacing - The spacing at the end of the dialog inline.
+ * @cssproperty --forge-dialog-padding - The padding of the dialog.
+ * @cssproperty --forge-dialog-width - The width of the dialog.
+ * @cssproperty --forge-dialog-height - The height of the dialog.
+ * @cssproperty --forge-dialog-min-width - The minimum width of the dialog.
+ * @cssproperty --forge-dialog-max-width - The maximum width of the dialog.
+ * @cssproperty --forge-dialog-min-height - The minimum height of the dialog.
+ * @cssproperty --forge-dialog-max-height - The maximum height of the dialog.
+ * @cssproperty --forge-dialog-z-index - The z-index of the dialog.
+ * @cssproperty --forge-dialog-move-handle-color - The color of the move handle.
+ * @cssproperty --forge-dialog-move-handle-size - The size of the move handle.
+ * @cssproperty --forge-dialog-move-handle-hover-cursor - The cursor style when hovering over the move handle.
+ * @cssproperty --forge-dialog-move-handle-active-cursor - The cursor style when the move handle is active.
+ * @cssproperty --forge-dialog-move-handle-spacing - The spacing around the move handle.
+ * @cssproperty --forge-dialog-move-transition-duration - The duration of the move transition.
+ * @cssproperty --forge-dialog-move-transition-easing - The easing function of the move transition.
+ * @cssproperty --forge-dialog-moving-opacity - The opacity of the dialog when it is being moved.
+ * @cssproperty --forge-dialog-enter-animation-duration - The duration of the enter animation.
+ * @cssproperty --forge-dialog-enter-animation-easing - The easing function of the enter animation.
+ * @cssproperty --forge-dialog-exit-animation-duration - The duration of the exit animation.
+ * @cssproperty --forge-dialog-exit-animation-easing - The easing function of the exit animation.
+ * @cssproperty --forge-dialog-zoom-opacity - The opacity of the dialog during zoom animation.
+ * @cssproperty --forge-dialog-zoom-scale - The scale of the dialog during zoom animation.
+ * @cssproperty --forge-dialog-fade-opacity - The opacity of the dialog during fade animation.
+ * @cssproperty --forge-dialog-slide-opacity - The opacity of the dialog during slide animation.
+ * @cssproperty --forge-dialog-slide-translate - The translation distance of the dialog during slide animation.
+ * @cssproperty --forge-dialog-backdrop-opacity - The opacity of the dialog backdrop.
+ * @cssproperty --forge-dialog-nonmodal-elevation - The elevation of non-modal dialogs.
+ * @cssproperty --forge-dialog-fullscreen-enter-animation-duration - The duration of the enter animation for fullscreen dialogs.
+ * @cssproperty --forge-dialog-fullscreen-exit-animation-duration - The duration of the exit animation for fullscreen dialogs.
+ * @cssproperty --forge-dialog-position-x - The x-axis position of the dialog.
+ * @cssproperty --forge-dialog-position-y - The y-axis position of the dialog.
+ * @cssproperty --forge-dialog-preset-sheet-enter-animation-duration - The duration of the enter animation for preset sheet dialogs.
+ * @cssproperty --forge-dialog-preset-sheet-exit-animation-duration - The duration of the exit animation for preset sheet dialogs.
+ *
+ * @csspart root - The dialog container element.
+ * @csspart backdrop - The backdrop element.
+ * @csspart surface - The dialog surface element.
+ * @csspart move-handle-container - The alignment container for the move handle.
+ * @csspart move-handle - The move handle element.
+ * @csspart move-handle-icon - The move handle icon element.
+ *
+ * @slot - The content of the dialog.
+ * @slot move-handle - The move handle content.
  */
-export declare class DialogComponent extends BaseComponent implements IDialogComponent {
+export declare class DialogComponent extends BaseClass implements IDialogComponent {
     static get observedAttributes(): string[];
+    /** Contains all the dialogs that are currently open. */
+    static readonly [dialogStack]: Set<IDialogComponent>;
     private _foundation;
+    [hideBackdrop](): void;
+    [showBackdrop](): void;
+    [tryDismiss](_state?: IDismissibleStackState<string> | undefined): boolean;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Controls whether clicking the backdrop closes the dialog or not. Default is true. */
-    backdropClose: boolean;
-    /** Controls whether pressing the escape key closes the dialog or not. Default is true. */
-    escapeClose: boolean;
-    /** Controls whether the dialog is open or not. Default is false. */
     open: boolean;
-    /** Controls whether the dialog is full screen or not. Default is false. */
+    mode: DialogMode;
+    type: DialogType;
+    animationType: DialogAnimationType;
+    preset: DialogPreset;
+    persistent: boolean;
     fullscreen: boolean;
-    /** The function to call when the dialog wants to open. */
-    openCallback: DialogStateCallback;
-    /** the function to call when the dialog wants to close. */
-    closeCallback: DialogStateCallback;
-    /** the function to call when the dialog wants to close. */
-    beforeCloseCallback: () => boolean | Promise<boolean>;
-    /** Gets/sets the position type when using custom positioning values. Default is 'absolute'. */
-    positionType: DialogPositionType;
-    /** Controls the horizontal position of the dialog surface. */
-    positionX: number | string | null | undefined;
-    /** Controls the vertical position of the dialog surface. */
-    positionY: number | string | null | undefined;
-    /** Gets/sets whether the dialog surface can be moved or not. */
+    trigger: string;
+    triggerElement: HTMLElement | null;
     moveable: boolean;
-    /** Gets/sets the selector used to target the element that is used as the drag target. */
-    moveTarget: string;
-    initializeMoveTarget(): void;
-    resetPosition(): void;
-    show(parent?: HTMLElement): Promise<void>;
-    hide(remove?: boolean): Promise<void>;
+    positionStrategy: DialogPositionStrategy;
+    sizeStrategy: DialogSizeStrategy;
+    placement: DialogPlacement;
+    show(): void;
+    hide(): void;
 }
+export {};

package/esm/dialog/dialog.js

@@ -3,33 +3,123 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+var _a;
 import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
-import { DialogFoundation } from './dialog-foundation';
-import { DialogAdapter } from './dialog-adapter';
-import { DIALOG_CONSTANTS } from './dialog-constants';
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
 import { BackdropComponent } from '../backdrop';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-dialog\" part=\"root\"><div class=\"forge-dialog__surface\" part=\"surface\"><slot></slot></div></div></template>';
-const styles = '.forge-dialog{position:fixed;top:0;bottom:0;left:0;right:0;z-index:8;z-index:var(--forge-z-index-dialog,8);-webkit-box-align:center;align-items:center;-webkit-box-align:var(--forge-dialog-align-items,center);align-items:var(--forge-dialog-align-items,center);top:0;top:var(--forge-dialog-top,0);padding:24px;padding:var(--forge-dialog-padding,24px);display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;visibility:hidden}@media (max-width:599px){.forge-dialog{padding:0}}.forge-dialog--moveable:not(.forge-dialog--fullscreen) ::slotted([forge-dialog-move-target]){cursor:move}.forge-dialog--animating{visibility:visible}.forge-dialog--animating .forge-dialog--open .forge-dialog__surface{-webkit-transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1)}.forge-dialog--animating .forge-dialog__surface{-webkit-transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1);transition:transform 150ms 0s cubic-bezier(0, 0, .2, 1),-webkit-transform 150ms 0s cubic-bezier(0, 0, .2, 1)}.forge-dialog--scrollable .forge-dialog__footer,.forge-dialog--scrollable .forge-dialog__title{border-color:rgba(0,0,0,.12)}.forge-dialog--open{visibility:visible!important}.forge-dialog--open .forge-dialog__surface{-webkit-transform:scale(1);transform:scale(1);opacity:1}.forge-dialog__surface{-webkit-box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);width:auto;width:var(--forge-dialog-width,auto);height:auto;height:var(--forge-dialog-height,auto);min-width:280px;min-width:var(--forge-dialog-min-width,280px);max-width:100%;max-width:var(--forge-dialog-max-width,100%);max-height:100%;max-height:var(--forge-dialog-max-height,100%);border-radius:4px;border-radius:var(--forge-dialog-border-radius,var(--mdc-shape-medium,4px));overflow:visible;overflow:var(--forge-dialog-overflow,visible);display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:scale(.8);transform:scale(.8);opacity:0;z-index:inherit}.forge-dialog__header{margin:0;padding:0 24px 9px;border-bottom:1px solid transparent}.forge-dialog__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1.25rem;font-size:var(--forge-typography-title-font-size, 1.25rem);line-height:2rem;line-height:var(--forge-typography-title-line-height, 2rem);font-weight:400;font-weight:var(--forge-typography-title-font-weight,400);letter-spacing:.0125em;letter-spacing:var(--forge-typography-title-letter-spacing, .0125em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-title-text-decoration,inherit);text-decoration:var(--forge-typography-title-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-title-text-transform,inherit);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.forge-dialog__title::before{display:inline-block;width:0;height:40px;content:\"\";vertical-align:0}.forge-dialog__body{-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);padding-top:20px;padding:0 24px 24px;overflow:auto}.forge-dialog__body--scrollable{max-height:195px;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);overflow-x:auto;overflow-y:scroll;-webkit-overflow-scrolling:touch}.forge-dialog__footer{display:-webkit-box;display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:end;justify-content:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:52px;margin:0;padding:8px;border-top:1px solid transparent}.forge-dialog--fullscreen{padding:0}.forge-dialog--fullscreen .forge-dialog__surface{height:100%;width:100%;min-width:auto;max-width:100%;border-radius:0}:host{display:block}:host([hidden]){display:none}';
+import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { DialogAdapter } from './dialog-adapter';
+import { DialogFoundation } from './dialog-foundation';
+import { dialogStack, DIALOG_CONSTANTS, hideBackdrop, showBackdrop } from './dialog-constants';
+import { tryDismiss } from '../core/utils/dismissible-stack';
+const template = '<template><dialog class=\"forge-dialog\" part=\"root\"><forge-backdrop exportparts=\"root:backdrop\"></forge-backdrop><div class=\"surface\" part=\"surface\"><div class=\"move-handle-container\" part=\"move-handle-container\"><div class=\"move-handle\" part=\"move-handle\"><slot name=\"move-handle\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" part=\"move-handle-icon\"><path d=\"M3 15v-2h2v2H3m0-4V9h2v2H3m4 4v-2h2v2H7m0-4V9h2v2H7m4 4v-2h2v2h-2m0-4V9h2v2h-2m4 4v-2h2v2h-2m0-4V9h2v2h-2m4 4v-2h2v2h-2m0-4V9h2v2h-2z\"/></svg></slot></div></div><slot></slot></div></dialog></template>';
+const styles = '@-webkit-keyframes zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@keyframes zoom-in{from{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}to{opacity:1;scale:1}}@-webkit-keyframes zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@keyframes zoom-out{from{opacity:1;scale:1}to{opacity:var(--_dialog-zoom-opacity);scale:var(--_dialog-zoom-scale)}}@-webkit-keyframes fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@keyframes fade-in{from{opacity:var(--_dialog-fade-opacity)}to{opacity:1}}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@keyframes fade-out{from{opacity:1}to{opacity:var(--_dialog-fade-opacity)}}@-webkit-keyframes slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@keyframes slide-in{from{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}to{opacity:1;translate:0 0}}@-webkit-keyframes slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}@keyframes slide-out{from{opacity:1;translate:0 0}to{opacity:var(--_dialog-slide-opacity);translate:var(--_dialog-slide-translate)}}@layer base,nonmodal,animation,placement,size-strategy,preset,fullscreen,position-strategy,media; @layer base{:host{display:none;--forge-theme-surface:var(--forge-theme-surface-bright, #ffffff)}:host([hidden]){display:none}.forge-dialog{--_dialog-background:var(--forge-dialog-background, var(--forge-theme-surface-bright, #ffffff));--_dialog-shape:var(--forge-dialog-shape, var(--forge-shape-medium, 4px));--_dialog-elevation:var(--forge-dialog-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));--_dialog-spacing:var(--forge-dialog-spacing, auto);--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, var(--_dialog-spacing));--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, var(--_dialog-spacing));--_dialog-inline-start-spacing:var(--forge-dialog-inline-start-spacing, var(--_dialog-spacing));--_dialog-inline-end-spacing:var(--forge-dialog-inline-end-spacing, var(--_dialog-spacing));--_dialog-padding:var(--forge-dialog-padding, 0);--_dialog-width:var(--forge-dialog-width, fit-content);--_dialog-height:var(--forge-dialog-height, fit-content);--_dialog-min-width:var(--forge-dialog-min-width, 0);--_dialog-max-width:var(--forge-dialog-max-width, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-min-height:var(--forge-dialog-min-height, 0);--_dialog-max-height:var(--forge-dialog-max-height, calc(100% - var(--forge-spacing-xxlarge, 48px)));--_dialog-z-index:var(--forge-dialog-z-index, var(--forge-z-index-dialog, 8));--_dialog-move-handle-color:var(--forge-dialog-move-handle-color, currentColor);--_dialog-move-handle-size:var(--forge-dialog-move-handle-size, 24px);--_dialog-move-handle-hover-cursor:var(--forge-dialog-move-handle-hover-cursor, grab);--_dialog-move-handle-active-cursor:var(--forge-dialog-move-handle-active-cursor, grabbing);--_dialog-move-handle-spacing:var(--forge-dialog-move-handle-spacing, calc(var(--forge-spacing-xxsmall, 4px) * -1) 0 0);--_dialog-move-transition-duration:var(--forge-dialog-move-transition-duration, var(--forge-animation-duration-short4, 200ms));--_dialog-move-transition-easing:var(--forge-dialog-move-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-moving-opacity:var(--forge-dialog-moving-opacity, 0.54);--_dialog-enter-animation-duration:var(--forge-dialog-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-enter-animation-easing:var(--forge-dialog-enter-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_dialog-exit-animation-duration:var(--forge-dialog-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-exit-animation-easing:var(--forge-dialog-exit-animation-easing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)));--_dialog-zoom-opacity:var(--forge-dialog-zoom-opacity, 0);--_dialog-zoom-scale:var(--forge-dialog-zoom-scale, 0.8);--_dialog-fade-opacity:var(--forge-dialog-fade-opacity, 0);--_dialog-slide-opacity:var(--forge-dialog-slide-opacity, 0);--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -30%);--_dialog-backdrop-opacity:var(--forge-dialog-backdrop-opacity, var(--forge-backdrop-opacity, 0.54));--_dialog-nonmodal-elevation:var(--forge-dialog-nonmodal-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_dialog-fullscreen-enter-animation-duration:var(--forge-dialog-fullscreen-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-fullscreen-exit-animation-duration:var(--forge-dialog-fullscreen-exit-animation-duration, var(--forge-animation-duration-short2, 100ms));--_dialog-position-x:var(--forge-dialog-position-x, 0);--_dialog-position-y:var(--forge-dialog-position-y, 0);--_dialog-preset-sheet-enter-animation-duration:var(--forge-dialog-preset-sheet-enter-animation-duration, var(--forge-animation-duration-medium1, 250ms));--_dialog-preset-sheet-exit-animation-duration:var(--forge-dialog-preset-sheet-exit-animation-duration, var(--forge-animation-duration-short3, 150ms))}.forge-dialog{position:fixed;inset:0;z-index:var(--_dialog-z-index);background-color:transparent;color:inherit;border:none;width:auto;height:auto;padding:0;margin:0;overflow:visible;max-width:100%;max-height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.surface{position:absolute;inset:0;background:var(--_dialog-background);-webkit-box-shadow:var(--_dialog-elevation);box-shadow:var(--_dialog-elevation);z-index:var(--_dialog-z-index);overflow:hidden;border-radius:var(--_dialog-shape);-webkit-margin-before:var(--_dialog-block-start-spacing);margin-block-start:var(--_dialog-block-start-spacing);-webkit-margin-after:var(--_dialog-block-end-spacing);margin-block-end:var(--_dialog-block-end-spacing);-webkit-margin-start:var(--_dialog-inline-start-spacing);margin-inline-start:var(--_dialog-inline-start-spacing);-webkit-margin-end:var(--_dialog-inline-end-spacing);margin-inline-end:var(--_dialog-inline-end-spacing);padding:var(--_dialog-padding);width:var(--_dialog-width);height:var(--_dialog-height);min-width:var(--_dialog-min-width);max-width:var(--_dialog-max-width);min-height:var(--_dialog-min-height);max-height:var(--_dialog-max-height);-webkit-box-sizing:border-box;box-sizing:border-box}dialog.forge-dialog::-webkit-backdrop{display:none}dialog.forge-dialog::backdrop{display:none}forge-backdrop{--forge-backdrop-opacity:var(--_dialog-backdrop-opacity);--forge-backdrop-enter-animation-duration:var(--_dialog-enter-animation-duration);--forge-backdrop-enter-animation-easing:var(--_dialog-enter-animation-easing);--forge-backdrop-exit-animation-duration:var(--_dialog-exit-animation-duration);--forge-backdrop-exit-animation-easing:var(--_dialog-exit-animation-easing)}:host(:not([moveable])) .move-handle{display:none}:host([moveable]:not([fullscreen]):not([preset])) .surface{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:var(--_dialog-move-transition-duration);transition-duration:var(--_dialog-move-transition-duration);-webkit-transition-timing-function:var(--_dialog-move-transition-easing);transition-timing-function:var(--_dialog-move-transition-easing)}:host([moveable]:not([fullscreen]):not([preset])) .surface:not(:hover) .move-handle-container{display:none}:host([moveable]:not([fullscreen]):not([preset])) .surface.moved{margin:0}:host([moveable]:not([fullscreen]):not([preset])) .surface.moving{opacity:var(--_dialog-moving-opacity)}:host([moveable]:not([fullscreen]):not([preset])) .move-handle-container{position:absolute;top:0;z-index:1;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;width:100%}:host([moveable]:not([fullscreen]):not([preset])) .move-handle-container .move-handle{fill:var(--_dialog-move-handle-color);height:var(--_dialog-move-handle-size);width:var(--_dialog-move-handle-size);margin:var(--_dialog-move-handle-spacing);touch-action:none}:host([moveable]:not([fullscreen]):not([preset])) .move-handle-container .move-handle:hover{cursor:var(--_dialog-move-handle-hover-cursor)}:host([moveable]:not([fullscreen]):not([preset])) .move-handle-container .move-handle:active{cursor:var(--_dialog-move-handle-active-cursor)}:host([moveable]:not([fullscreen]):not([preset])) .move-handle-container .move-handle svg{fill:currentColor}:host([visible]){display:initial}}@layer nonmodal{:host([mode=nonmodal]) .forge-dialog{pointer-events:none}:host([mode=nonmodal]) .container{display:contents}:host([mode=nonmodal]) .surface{--_dialog-elevation:var(--_dialog-nonmodal-elevation);pointer-events:all}:host([mode=nonmodal]) forge-backdrop{display:none}}@layer animation{:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface{-webkit-animation-duration:var(--_dialog-enter-animation-duration);animation-duration:var(--_dialog-enter-animation-duration);-webkit-animation-timing-function:var(--_dialog-enter-animation-easing);animation-timing-function:var(--_dialog-enter-animation-easing)}:host([visible]:not([animation-type=none])) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-duration:var(--_dialog-exit-animation-duration);animation-duration:var(--_dialog-exit-animation-duration);-webkit-animation-timing-function:var(--_dialog-exit-animation-easing);animation-timing-function:var(--_dialog-exit-animation-easing)}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface{-webkit-animation-name:zoom-in;animation-name:zoom-in}:host([visible]:not([animation-type=none]):is(:not([animation-type]),[animation-type=zoom])) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-name:zoom-out;animation-name:zoom-out}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface{-webkit-animation-name:fade-in;animation-name:fade-in}:host([visible]:not([animation-type=none])[animation-type=fade]) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-name:fade-out;animation-name:fade-out}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface{-webkit-animation-name:slide-in;animation-name:slide-in}:host([visible]:not([animation-type=none])[animation-type=slide]) dialog.forge-dialog[open] .surface.exiting{-webkit-animation-name:slide-out;animation-name:slide-out}}@layer placement{:host([placement=custom]) .surface{margin:0;top:var(--_dialog-position-x);left:var(--_dialog-position-y)}:host([placement=top]) .surface{--_dialog-block-start-spacing:var(--forge-dialog-block-start-spacing, 0);top:0;bottom:auto}:host([placement=top-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:auto;right:0;bottom:auto}:host([placement=top-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:0;left:0;right:auto;bottom:auto}:host([placement=bottom]) .surface{--_dialog-block-end-spacing:var(--forge-dialog-block-end-spacing, 0);top:auto;bottom:0}:host([placement=bottom-right]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:auto;right:0;bottom:0}:host([placement=bottom-left]) .surface{--_dialog-spacing:var(--forge-dialog-spacing, 0);top:auto;left:0;right:auto;bottom:0}}@layer size-strategy{:host([size-strategy=container-inline]) .surface{width:100%}:host([size-strategy=container-block]) .surface{height:100%}}@layer preset{:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-preset-sheet-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-preset-sheet-exit-animation-duration)}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{-webkit-animation-name:slide-in;animation-name:slide-in}:host([visible]:not([animation-type=none]):is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface.exiting{-webkit-animation-name:slide-out;animation-name:slide-out}:host(:is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) .surface{--_dialog-max-width:var(--forge-dialog-max-width, none);--_dialog-max-height:var(--forge-dialog-max-height, none);inset:auto}:host([preset=left-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, -100% 0)}:host([preset=left-sheet]) .surface{left:0;bottom:0;top:0;height:100%;border-top-left-radius:0;border-bottom-left-radius:0}:host([preset=right-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 100% 0)}:host([preset=right-sheet]) .surface{right:0;bottom:0;top:0;height:100%;border-top-right-radius:0;border-bottom-right-radius:0}:host([preset=top-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 -100%)}:host([preset=top-sheet]) .surface{top:0;left:0;right:0;border-top-left-radius:0;border-top-right-radius:0}:host([preset=bottom-sheet]) .forge-dialog{--_dialog-slide-translate:var(--forge-dialog-slide-translate, 0 100%)}:host([preset=bottom-sheet]) .surface{bottom:0;left:0;right:0;border-bottom-left-radius:0;border-bottom-right-radius:0}}@layer fullscreen{:host([fullscreen]) .forge-dialog{--_dialog-enter-animation-duration:var(--_dialog-fullscreen-enter-animation-duration);--_dialog-exit-animation-duration:var(--_dialog-fullscreen-exit-animation-duration)}:host([fullscreen]) .surface{height:100%;width:100%;max-width:none;max-height:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none}:host([fullscreen]) forge-backdrop{display:none}}@layer position-strategy{:host([position-strategy=viewport]) .forge-dialog{position:fixed}:host([position-strategy=container]) .forge-dialog{position:absolute}:host([position-strategy=container][preset$=-sheet]) .forge-dialog{contain:content}}@layer media{@media (prefers-reduced-motion:reduce){.surface{-webkit-animation-name:fade-in;animation-name:fade-in}.surface.exiting{-webkit-animation-name:fade-out;animation-name:fade-out}}}';
+const BaseClass = WithDefaultAria(WithElementInternals(BaseComponent));
 /**
- * The web component class behind the `<forge-dialog>` custom element.
- *
  * @tag forge-dialog
+ *
+ * @summary Dialogs are temporary UI elements that are used to display information, ask for input, or confirm actions.
+ *
+ * @property {boolean} open - Indicates whether the dialog is open.
+ * @property {DialogMode} mode - The mode of the dialog. Default is 'modal'.
+ * @property {DialogType} type - The type of the dialog. Default is 'dialog'.
+ * @property {DialogAnimationType} animationType - The animation type of the dialog.
+ * @property {DialogPreset} preset - The preset design that the dialog will apply.
+ * @property {boolean} persistent - Indicates whether the dialog is dismissible via escape and backdrop click or not.
+ * @property {boolean} fullscreen - Indicates whether the dialog is fullscreen or not.
+ * @property {string} trigger - The selector of the element that triggers the dialog.
+ * @property {HTMLElement | null} triggerElement - The element that triggers the dialog.
+ * @property {boolean} moveable - Indicates whether the dialog is moveable or not.
+ * @property {DialogPositionStrategy} positionStrategy - Controls whether the dialog is rendered relative to the viewport its nearest containing block.
+ * @property {DialogSizeStrategy} sizeStrategy - Controls the block and/or inline size of the dialog. Defaults to the size of the content it contains.
+ * @property {DialogPlacement} placement - The placement of the dialog. Defaults to center.
+ *
+ * @attribute {boolean} open - Indicates whether the dialog is open.
+ * @attribute {DialogMode} mode - The mode of the dialog. Default is 'modal'.
+ * @attribute {DialogType} type - The type of the dialog. Default is 'dialog'.
+ * @attribute {DialogAnimationType} animationType - The animation type of the dialog.
+ * @attribute {DialogPreset} preset - The preset design that the dialog will apply.
+ * @attribute {boolean} persistent - Indicates whether the dialog is dismissible via escape and backdrop click or not.
+ * @attribute {boolean} fullscreen - Indicates whether the dialog is fullscreen or not.
+ * @attribute {string} trigger - The selector of the element that triggers the dialog.
+ * @attribute {boolean} moveable - Indicates whether the dialog is moveable or not.
+ * @attribute {DialogPositionStrategy} positionStrategy - Controls whether the dialog is rendered relative to the viewport its nearest containing block.
+ * @attribute {DialogSizeStrategy} sizeStrategy - Controls the block and/or inline size of the dialog. Defaults to the size of the content it contains.
+ * @attribute {DialogPlacement} placement - The placement of the dialog. Defaults to center.
+ *
+ * @event {CustomEvent<void>} forge-dialog-open - Dispatched when the dialog is opened.
+ * @event {CustomEvent<void>} forge-dialog-close - Dispatched when the dialog is closed.
+ * @event {CustomEvent<void>} forge-dialog-before-close - Dispatched before the dialog is closed. This event is cancelable.
+ * @event {CustomEvent<IDialogMoveStartEventData>} forge-dialog-move-start - Dispatched when the dialog is first moved.
+ * @event {CustomEvent<IDialogMoveEventData>} forge-dialog-move - Dispatched when the dialog is being moved.
+ * @event {CustomEvent<void>} forge-dialog-move-end - Dispatched when the dialog is done being moved.
+ *
+ * @cssproperty --forge-dialog-background - The background color of the dialog.
+ * @cssproperty --forge-dialog-shape - The shape of the dialog.
+ * @cssproperty --forge-dialog-elevation - The elevation of the dialog.
+ * @cssproperty --forge-dialog-spacing - The spacing between elements inside the dialog.
+ * @cssproperty --forge-dialog-block-start-spacing - The spacing at the start of the dialog block.
+ * @cssproperty --forge-dialog-block-end-spacing - The spacing at the end of the dialog block.
+ * @cssproperty --forge-dialog-inline-start-spacing - The spacing at the start of the dialog inline.
+ * @cssproperty --forge-dialog-inline-end-spacing - The spacing at the end of the dialog inline.
+ * @cssproperty --forge-dialog-padding - The padding of the dialog.
+ * @cssproperty --forge-dialog-width - The width of the dialog.
+ * @cssproperty --forge-dialog-height - The height of the dialog.
+ * @cssproperty --forge-dialog-min-width - The minimum width of the dialog.
+ * @cssproperty --forge-dialog-max-width - The maximum width of the dialog.
+ * @cssproperty --forge-dialog-min-height - The minimum height of the dialog.
+ * @cssproperty --forge-dialog-max-height - The maximum height of the dialog.
+ * @cssproperty --forge-dialog-z-index - The z-index of the dialog.
+ * @cssproperty --forge-dialog-move-handle-color - The color of the move handle.
+ * @cssproperty --forge-dialog-move-handle-size - The size of the move handle.
+ * @cssproperty --forge-dialog-move-handle-hover-cursor - The cursor style when hovering over the move handle.
+ * @cssproperty --forge-dialog-move-handle-active-cursor - The cursor style when the move handle is active.
+ * @cssproperty --forge-dialog-move-handle-spacing - The spacing around the move handle.
+ * @cssproperty --forge-dialog-move-transition-duration - The duration of the move transition.
+ * @cssproperty --forge-dialog-move-transition-easing - The easing function of the move transition.
+ * @cssproperty --forge-dialog-moving-opacity - The opacity of the dialog when it is being moved.
+ * @cssproperty --forge-dialog-enter-animation-duration - The duration of the enter animation.
+ * @cssproperty --forge-dialog-enter-animation-easing - The easing function of the enter animation.
+ * @cssproperty --forge-dialog-exit-animation-duration - The duration of the exit animation.
+ * @cssproperty --forge-dialog-exit-animation-easing - The easing function of the exit animation.
+ * @cssproperty --forge-dialog-zoom-opacity - The opacity of the dialog during zoom animation.
+ * @cssproperty --forge-dialog-zoom-scale - The scale of the dialog during zoom animation.
+ * @cssproperty --forge-dialog-fade-opacity - The opacity of the dialog during fade animation.
+ * @cssproperty --forge-dialog-slide-opacity - The opacity of the dialog during slide animation.
+ * @cssproperty --forge-dialog-slide-translate - The translation distance of the dialog during slide animation.
+ * @cssproperty --forge-dialog-backdrop-opacity - The opacity of the dialog backdrop.
+ * @cssproperty --forge-dialog-nonmodal-elevation - The elevation of non-modal dialogs.
+ * @cssproperty --forge-dialog-fullscreen-enter-animation-duration - The duration of the enter animation for fullscreen dialogs.
+ * @cssproperty --forge-dialog-fullscreen-exit-animation-duration - The duration of the exit animation for fullscreen dialogs.
+ * @cssproperty --forge-dialog-position-x - The x-axis position of the dialog.
+ * @cssproperty --forge-dialog-position-y - The y-axis position of the dialog.
+ * @cssproperty --forge-dialog-preset-sheet-enter-animation-duration - The duration of the enter animation for preset sheet dialogs.
+ * @cssproperty --forge-dialog-preset-sheet-exit-animation-duration - The duration of the exit animation for preset sheet dialogs.
+ *
+ * @csspart root - The dialog container element.
+ * @csspart backdrop - The backdrop element.
+ * @csspart surface - The dialog surface element.
+ * @csspart move-handle-container - The alignment container for the move handle.
+ * @csspart move-handle - The move handle element.
+ * @csspart move-handle-icon - The move handle icon element.
+ *
+ * @slot - The content of the dialog.
+ * @slot move-handle - The move handle content.
  */
-let DialogComponent = class DialogComponent extends BaseComponent {
+let DialogComponent = class DialogComponent extends BaseClass {
     static get observedAttributes() {
-        return [
-            DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE,
-            DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE,
-            DIALOG_CONSTANTS.attributes.OPEN,
-            DIALOG_CONSTANTS.attributes.FULLSCREEN,
-            DIALOG_CONSTANTS.attributes.POSITION_TYPE,
-            DIALOG_CONSTANTS.attributes.POSITION_X,
-            DIALOG_CONSTANTS.attributes.POSITION_Y,
-            DIALOG_CONSTANTS.attributes.MOVEABLE,
-            DIALOG_CONSTANTS.attributes.MOVE_TARGET
-        ];
+        return Object.values(DIALOG_CONSTANTS.observedAttributes);
+    }
+    [(_a = dialogStack, hideBackdrop)]() {
+        this._foundation.hideBackdrop();
+    }
+    [showBackdrop]() {
+        this._foundation.showBackdrop();
+    }
+    [tryDismiss](_state) {
+        return this._foundation.dispatchBeforeCloseEvent();
     }
     constructor() {
         super();
@@ -43,89 +133,100 @@ let DialogComponent = class DialogComponent extends BaseComponent {
         this._foundation.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
+        var _b, _c, _d, _e, _f, _g, _h;
         switch (name) {
-            case DIALOG_CONSTANTS.attributes.BACKDROP_CLOSE:
-                this.backdropClose = newValue === 'true';
+            case DIALOG_CONSTANTS.observedAttributes.OPEN:
+                this.open = coerceBoolean(newValue);
                 break;
-            case DIALOG_CONSTANTS.attributes.ESCAPE_CLOSE:
-                this.escapeClose = newValue === 'true';
+            case DIALOG_CONSTANTS.observedAttributes.MODE:
+                this.mode = (_b = newValue) !== null && _b !== void 0 ? _b : DIALOG_CONSTANTS.defaults.MODE;
                 break;
-            case DIALOG_CONSTANTS.attributes.OPEN:
-                this.open = coerceBoolean(newValue);
+            case DIALOG_CONSTANTS.observedAttributes.TYPE:
+                this.type = (_c = newValue) !== null && _c !== void 0 ? _c : DIALOG_CONSTANTS.defaults.TYPE;
                 break;
-            case DIALOG_CONSTANTS.attributes.FULLSCREEN:
-                this.fullscreen = coerceBoolean(newValue);
+            case DIALOG_CONSTANTS.observedAttributes.ANIMATION_TYPE:
+                this.animationType = (_d = newValue) !== null && _d !== void 0 ? _d : DIALOG_CONSTANTS.defaults.ANIMATION_TYPE;
                 break;
-            case DIALOG_CONSTANTS.attributes.POSITION_TYPE:
-                this.positionType = newValue;
+            case DIALOG_CONSTANTS.observedAttributes.PRESET:
+                this.preset = (_e = newValue) !== null && _e !== void 0 ? _e : DIALOG_CONSTANTS.defaults.PRESET;
                 break;
-            case DIALOG_CONSTANTS.attributes.POSITION_X:
-                this.positionX = newValue;
+            case DIALOG_CONSTANTS.observedAttributes.PERSISTENT:
+                this.persistent = coerceBoolean(newValue);
+                break;
+            case DIALOG_CONSTANTS.observedAttributes.FULLSCREEN:
+                this.fullscreen = coerceBoolean(newValue);
                 break;
-            case DIALOG_CONSTANTS.attributes.POSITION_Y:
-                this.positionY = newValue;
+            case DIALOG_CONSTANTS.observedAttributes.TRIGGER:
+                this.trigger = newValue;
                 break;
-            case DIALOG_CONSTANTS.attributes.MOVEABLE:
+            case DIALOG_CONSTANTS.observedAttributes.MOVEABLE:
                 this.moveable = coerceBoolean(newValue);
                 break;
-            case DIALOG_CONSTANTS.attributes.MOVE_TARGET:
-                this.moveTarget = newValue;
+            case DIALOG_CONSTANTS.observedAttributes.POSITION_STRATEGY:
+                this.positionStrategy = (_f = newValue) !== null && _f !== void 0 ? _f : DIALOG_CONSTANTS.defaults.POSITION_STRATEGY;
+                break;
+            case DIALOG_CONSTANTS.observedAttributes.SIZE_STRATEGY:
+                this.sizeStrategy = (_g = newValue) !== null && _g !== void 0 ? _g : DIALOG_CONSTANTS.defaults.SIZE_STRATEGY;
+                break;
+            case DIALOG_CONSTANTS.observedAttributes.PLACEMENT:
+                this.placement = (_h = newValue) !== null && _h !== void 0 ? _h : DIALOG_CONSTANTS.defaults.PLACEMENT;
                 break;
         }
     }
-    initializeMoveTarget() {
-        this._foundation.initializeMoveTarget();
-    }
-    resetPosition() {
-        this._foundation.resetPosition();
-    }
-    show(parent) {
-        return this._foundation.show(parent);
+    show() {
+        this.open = true;
     }
-    hide(remove) {
-        return this._foundation.hide(remove);
+    hide() {
+        this.open = false;
     }
 };
+/** Contains all the dialogs that are currently open. */
+DialogComponent[_a] = new Set();
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "backdropClose", void 0);
+], DialogComponent.prototype, "open", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "escapeClose", void 0);
+], DialogComponent.prototype, "mode", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "open", void 0);
+], DialogComponent.prototype, "type", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "fullscreen", void 0);
+], DialogComponent.prototype, "animationType", void 0);
+__decorate([
+    FoundationProperty()
+], DialogComponent.prototype, "preset", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "openCallback", void 0);
+], DialogComponent.prototype, "persistent", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "closeCallback", void 0);
+], DialogComponent.prototype, "fullscreen", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "beforeCloseCallback", void 0);
+], DialogComponent.prototype, "trigger", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "positionType", void 0);
+], DialogComponent.prototype, "triggerElement", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "positionX", void 0);
+], DialogComponent.prototype, "moveable", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "positionY", void 0);
+], DialogComponent.prototype, "positionStrategy", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "moveable", void 0);
+], DialogComponent.prototype, "sizeStrategy", void 0);
 __decorate([
     FoundationProperty()
-], DialogComponent.prototype, "moveTarget", void 0);
+], DialogComponent.prototype, "placement", void 0);
 DialogComponent = __decorate([
     CustomElement({
         name: DIALOG_CONSTANTS.elementName,
-        dependencies: [BackdropComponent]
+        dependencies: [
+            BackdropComponent
+        ]
     })
 ], DialogComponent);
 export { DialogComponent };

package/esm/drawer/modal-drawer/modal-drawer-adapter.js

@@ -13,7 +13,7 @@ export class ModalDrawerAdapter extends BaseDrawerAdapter {
         this._backdropElement = getShadowElement(this._component, BACKDROP_CONSTANTS.elementName);
     }
     setBackdropCloseListener(listener) {
-        this._backdropElement.addEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, listener);
+        this._backdropElement.addEventListener('click', listener);
     }
     setBackdropVisibility(visible) {
         if (this._backdropElement.hasAttribute('hidden')) {

package/esm/drawer/modal-drawer/modal-drawer-foundation.js

@@ -36,17 +36,16 @@ export class ModalDrawerFoundation extends BaseDrawerFoundation {
             this.open = false;
         }
     }
-    _setBackdrop(open) {
+    async _setBackdrop(open) {
         if (open) {
             this._adapter.toggleBackdropClass(false, MODAL_DRAWER_CONSTANTS.classes.SCRIM_CLOSED);
             this._adapter.setBackdropVisibility(true);
         }
         else if (this._isInitialized) {
-            this._adapter.setBackdropVisibility(false).then(() => {
-                if (!this._open) {
-                    this._adapter.toggleBackdropClass(true, MODAL_DRAWER_CONSTANTS.classes.SCRIM_CLOSED);
-                }
-            });
+            await this._adapter.setBackdropVisibility(false);
+            if (!this._open) {
+                this._adapter.toggleBackdropClass(true, MODAL_DRAWER_CONSTANTS.classes.SCRIM_CLOSED);
+            }
         }
     }
 }