@ni/nimble-components 12.0.2 → 14.0.0

package/dist/all-components-bundle.js

@@ -4422,6 +4422,7 @@
      * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
      * and should include all non-deprecated and non-experimental Standard events
      */
+    const eventAnimationEnd = "animationend";
     const eventChange = "change";
     const eventResize = "resize";
     const eventScroll = "scroll";
@@ -9259,73 +9260,13 @@
     }
     /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
-    /**
-     * The template for the {@link @microsoft/fast-foundation#Dialog} component.
-     * @public
-     */
-    const dialogTemplate = (context, definition) => html `
-    <div class="positioning-region" part="positioning-region">
-        ${when(x => x.modal, html `
-                <div
-                    class="overlay"
-                    part="overlay"
-                    role="presentation"
-                    @click="${x => x.dismiss()}"
-                ></div>
-            `)}
-        <div
-            role="dialog"
-            tabindex="-1"
-            class="control"
-            part="control"
-            aria-modal="${x => x.modal}"
-            aria-describedby="${x => x.ariaDescribedby}"
-            aria-labelledby="${x => x.ariaLabelledby}"
-            aria-label="${x => x.ariaLabel}"
-            ${ref("dialog")}
-        >
-            <slot></slot>
-        </div>
-    </div>
-`;
-
     /*!
     * tabbable 5.2.1
     * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
     */
     var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
-    var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
     var matches = typeof Element === 'undefined' ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
 
-    var isContentEditable = function isContentEditable(node) {
-      return node.contentEditable === 'true';
-    };
-
-    var getTabindex = function getTabindex(node) {
-      var tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
-
-      if (!isNaN(tabindexAttr)) {
-        return tabindexAttr;
-      } // Browsers do not return `tabIndex` correctly for contentEditable nodes;
-      // so if they don't have a tabindex attribute specifically set, assume it's 0.
-
-
-      if (isContentEditable(node)) {
-        return 0;
-      } // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
-      //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
-      //  yet they are still part of the regular tab order; in FF, they get a default
-      //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
-      //  order, consider their tab index to be 0.
-
-
-      if ((node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
-        return 0;
-      }
-
-      return node.tabIndex;
-    };
-
     var isInput = function isInput(node) {
       return node.tagName === 'INPUT';
     };
@@ -9341,51 +9282,6 @@
       return r;
     };
 
-    var getCheckedRadio = function getCheckedRadio(nodes, form) {
-      for (var i = 0; i < nodes.length; i++) {
-        if (nodes[i].checked && nodes[i].form === form) {
-          return nodes[i];
-        }
-      }
-    };
-
-    var isTabbableRadio = function isTabbableRadio(node) {
-      if (!node.name) {
-        return true;
-      }
-
-      var radioScope = node.form || node.ownerDocument;
-
-      var queryRadios = function queryRadios(name) {
-        return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
-      };
-
-      var radioSet;
-
-      if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
-        radioSet = queryRadios(window.CSS.escape(node.name));
-      } else {
-        try {
-          radioSet = queryRadios(node.name);
-        } catch (err) {
-          // eslint-disable-next-line no-console
-          console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
-          return false;
-        }
-      }
-
-      var checked = getCheckedRadio(radioSet, node.form);
-      return !checked || checked === node;
-    };
-
-    var isRadio = function isRadio(node) {
-      return isInput(node) && node.type === 'radio';
-    };
-
-    var isNonTabbableRadio = function isNonTabbableRadio(node) {
-      return isRadio(node) && !isTabbableRadio(node);
-    };
-
     var isHidden = function isHidden(node, displayCheck) {
       if (getComputedStyle(node).visibility === 'hidden') {
         return true;
@@ -9467,28 +9363,6 @@
       return true;
     };
 
-    var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
-      if (!isNodeMatchingSelectorFocusable(options, node) || isNonTabbableRadio(node) || getTabindex(node) < 0) {
-        return false;
-      }
-
-      return true;
-    };
-
-    var isTabbable = function isTabbable(node, options) {
-      options = options || {};
-
-      if (!node) {
-        throw new Error('No node provided');
-      }
-
-      if (matches.call(node, candidateSelector) === false) {
-        return false;
-      }
-
-      return isNodeMatchingSelectorTabbable(options, node);
-    };
-
     var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
 
     var isFocusable = function isFocusable(node, options) {
@@ -9505,280 +9379,6 @@
       return isNodeMatchingSelectorFocusable(options, node);
     };
 
-    /**
-     * A Switch Custom HTML Element.
-     * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#dialog | ARIA dialog }.
-     *
-     * @slot - The default slot for the dialog content
-     * @csspart positioning-region - A wrapping element used to center the dialog and position the modal overlay
-     * @csspart overlay - The modal dialog overlay
-     * @csspart control - The dialog element
-     * @fires cancel - Fires a custom 'cancel' event when the modal overlay is clicked
-     * @fires close - Fires a custom 'close' event when the dialog is hidden
-     *
-     * @public
-     */
-    class Dialog$1 extends FoundationElement {
-        constructor() {
-            super(...arguments);
-            /**
-             * Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal
-             * overlay.  Clicks on the overlay will cause the dialog to emit a "dismiss" event.
-             * @public
-             * @defaultValue - true
-             * @remarks
-             * HTML Attribute: modal
-             */
-            this.modal = true;
-            /**
-             * The hidden state of the element.
-             *
-             * @public
-             * @defaultValue - false
-             * @remarks
-             * HTML Attribute: hidden
-             */
-            this.hidden = false;
-            /**
-             * Indicates that the dialog should trap focus.
-             *
-             * @public
-             * @defaultValue - true
-             * @remarks
-             * HTML Attribute: trap-focus
-             */
-            this.trapFocus = true;
-            this.trapFocusChanged = () => {
-                if (this.$fastController.isConnected) {
-                    this.updateTrapFocus();
-                }
-            };
-            /**
-             * @internal
-             */
-            this.isTrappingFocus = false;
-            this.handleDocumentKeydown = (e) => {
-                if (!e.defaultPrevented && !this.hidden) {
-                    switch (e.key) {
-                        case keyEscape:
-                            this.dismiss();
-                            e.preventDefault();
-                            break;
-                        case keyTab:
-                            this.handleTabKeyDown(e);
-                            break;
-                    }
-                }
-            };
-            this.handleDocumentFocus = (e) => {
-                if (!e.defaultPrevented && this.shouldForceFocus(e.target)) {
-                    this.focusFirstElement();
-                    e.preventDefault();
-                }
-            };
-            this.handleTabKeyDown = (e) => {
-                if (!this.trapFocus || this.hidden) {
-                    return;
-                }
-                const bounds = this.getTabQueueBounds();
-                if (bounds.length === 0) {
-                    return;
-                }
-                if (bounds.length === 1) {
-                    // keep focus on single element
-                    bounds[0].focus();
-                    e.preventDefault();
-                    return;
-                }
-                if (e.shiftKey && e.target === bounds[0]) {
-                    bounds[bounds.length - 1].focus();
-                    e.preventDefault();
-                }
-                else if (!e.shiftKey && e.target === bounds[bounds.length - 1]) {
-                    bounds[0].focus();
-                    e.preventDefault();
-                }
-                return;
-            };
-            this.getTabQueueBounds = () => {
-                const bounds = [];
-                return Dialog$1.reduceTabbableItems(bounds, this);
-            };
-            /**
-             * focus on first element of tab queue
-             */
-            this.focusFirstElement = () => {
-                const bounds = this.getTabQueueBounds();
-                if (bounds.length > 0) {
-                    bounds[0].focus();
-                }
-                else {
-                    if (this.dialog instanceof HTMLElement) {
-                        this.dialog.focus();
-                    }
-                }
-            };
-            /**
-             * we should only focus if focus has not already been brought to the dialog
-             */
-            this.shouldForceFocus = (currentFocusElement) => {
-                return this.isTrappingFocus && !this.contains(currentFocusElement);
-            };
-            /**
-             * we should we be active trapping focus
-             */
-            this.shouldTrapFocus = () => {
-                return this.trapFocus && !this.hidden;
-            };
-            /**
-             *
-             *
-             * @internal
-             */
-            this.updateTrapFocus = (shouldTrapFocusOverride) => {
-                const shouldTrapFocus = shouldTrapFocusOverride === undefined
-                    ? this.shouldTrapFocus()
-                    : shouldTrapFocusOverride;
-                if (shouldTrapFocus && !this.isTrappingFocus) {
-                    this.isTrappingFocus = true;
-                    // Add an event listener for focusin events if we are trapping focus
-                    document.addEventListener("focusin", this.handleDocumentFocus);
-                    DOM.queueUpdate(() => {
-                        if (this.shouldForceFocus(document.activeElement)) {
-                            this.focusFirstElement();
-                        }
-                    });
-                }
-                else if (!shouldTrapFocus && this.isTrappingFocus) {
-                    this.isTrappingFocus = false;
-                    // remove event listener if we are not trapping focus
-                    document.removeEventListener("focusin", this.handleDocumentFocus);
-                }
-            };
-        }
-        /**
-         * @internal
-         */
-        dismiss() {
-            this.$emit("dismiss");
-            // implement `<dialog>` interface
-            this.$emit("cancel");
-        }
-        /**
-         * The method to show the dialog.
-         *
-         * @public
-         */
-        show() {
-            this.hidden = false;
-        }
-        /**
-         * The method to hide the dialog.
-         *
-         * @public
-         */
-        hide() {
-            this.hidden = true;
-            // implement `<dialog>` interface
-            this.$emit("close");
-        }
-        /**
-         * @internal
-         */
-        connectedCallback() {
-            super.connectedCallback();
-            document.addEventListener("keydown", this.handleDocumentKeydown);
-            this.notifier = Observable.getNotifier(this);
-            this.notifier.subscribe(this, "hidden");
-            this.updateTrapFocus();
-        }
-        /**
-         * @internal
-         */
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            // remove keydown event listener
-            document.removeEventListener("keydown", this.handleDocumentKeydown);
-            // if we are trapping focus remove the focusin listener
-            this.updateTrapFocus(false);
-            this.notifier.unsubscribe(this, "hidden");
-        }
-        /**
-         * @internal
-         */
-        handleChange(source, propertyName) {
-            switch (propertyName) {
-                case "hidden":
-                    this.updateTrapFocus();
-                    break;
-            }
-        }
-        /**
-         * Reduce a collection to only its focusable elements.
-         *
-         * @param elements - Collection of elements to reduce
-         * @param element - The current element
-         *
-         * @internal
-         */
-        static reduceTabbableItems(elements, element) {
-            if (element.getAttribute("tabindex") === "-1") {
-                return elements;
-            }
-            if (isTabbable(element) ||
-                (Dialog$1.isFocusableFastElement(element) && Dialog$1.hasTabbableShadow(element))) {
-                elements.push(element);
-                return elements;
-            }
-            if (element.childElementCount) {
-                return elements.concat(Array.from(element.children).reduce(Dialog$1.reduceTabbableItems, []));
-            }
-            return elements;
-        }
-        /**
-         * Test if element is focusable fast element
-         *
-         * @param element - The element to check
-         *
-         * @internal
-         */
-        static isFocusableFastElement(element) {
-            var _a, _b;
-            return !!((_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus);
-        }
-        /**
-         * Test if the element has a focusable shadow
-         *
-         * @param element - The element to check
-         *
-         * @internal
-         */
-        static hasTabbableShadow(element) {
-            var _a, _b;
-            return Array.from((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("*")) !== null && _b !== void 0 ? _b : []).some(x => {
-                return isTabbable(x);
-            });
-        }
-    }
-    __decorate$1([
-        attr({ mode: "boolean" })
-    ], Dialog$1.prototype, "modal", void 0);
-    __decorate$1([
-        attr({ mode: "boolean" })
-    ], Dialog$1.prototype, "hidden", void 0);
-    __decorate$1([
-        attr({ attribute: "trap-focus", mode: "boolean" })
-    ], Dialog$1.prototype, "trapFocus", void 0);
-    __decorate$1([
-        attr({ attribute: "aria-describedby" })
-    ], Dialog$1.prototype, "ariaDescribedby", void 0);
-    __decorate$1([
-        attr({ attribute: "aria-labelledby" })
-    ], Dialog$1.prototype, "ariaLabelledby", void 0);
-    __decorate$1([
-        attr({ attribute: "aria-label" })
-    ], Dialog$1.prototype, "ariaLabel", void 0);
-
     /**
      * The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.
      * @public
@@ -15017,9 +14617,16 @@
         return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
     }
 
-    const modalBackdropColorThemeLight = hexToRgbaCssColor(Black, 0.3);
-    const modalBackdropColorThemeDark = hexToRgbaCssColor(Black, 0.6);
-    const modalBackdropColorThemeColor = hexToRgbaCssColor(Black, 0.6);
+    /**
+     * Static tokens to use for styling the `::backdrop` pseduo-element of an HTML dialog, which
+     * does not have access to CSS custom properties.
+     *
+     * See https://github.com/whatwg/fullscreen/issues/124
+     */
+    const modalBackdropColorThemeLightStatic = hexToRgbaCssColor(Black, 0.3);
+    const modalBackdropColorThemeDarkStatic = hexToRgbaCssColor(Black, 0.6);
+    const modalBackdropColorThemeColorStatic = hexToRgbaCssColor(Black, 0.6);
+    const largeDelayStatic = LargeDelay;
 
     const Theme = {
         light: 'light',
@@ -15197,7 +14804,7 @@
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-    const template$7 = html `<slot></slot>`;
+    const template$8 = html `<slot></slot>`;
 
     const styles$w = css `
     :host {
@@ -15256,7 +14863,7 @@
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
         styles: styles$w,
-        template: template$7
+        template: template$8
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -15282,7 +14889,7 @@
     const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, White));
     // Component Color Tokens
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
-    const modalBackdropColor = DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
+    DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
     const popupBoxShadowColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBoxShadowColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black75, Black85, Black85), 0.3));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
@@ -15301,7 +14908,7 @@
     const [titlePlus1Font, titlePlus1FontColor, titlePlus1DisabledFontColor, titlePlus1FontFamily, titlePlus1FontWeight, titlePlus1FontSize, titlePlus1FontLineHeight, titlePlus1FallbackFontFamily] = createFontTokens(tokenNames.titlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title2Family, Title2Weight, Title2Size, Title2LineHeight, 'sans-serif');
     createFontTokens(tokenNames.titleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight, 'sans-serif');
     createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight, 'sans-serif');
-    createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight, 'sans-serif');
+    const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight, subtitleFallbackFontFamily] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight, 'sans-serif');
     createFontTokens(tokenNames.linkStandardFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
     const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight, placeholderFallbackFontFamily] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight, 'sans-serif');
     const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight, bodyEmphasizedFallbackFontFamily] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight, 'sans-serif');
@@ -15397,13 +15004,13 @@
     function getModalBackdropForTheme(element) {
         switch (theme.getValueFor(element)) {
             case Theme.light:
-                return modalBackdropColorThemeLight;
+                return modalBackdropColorThemeLightStatic;
             case Theme.dark:
-                return modalBackdropColorThemeDark;
+                return modalBackdropColorThemeDarkStatic;
             case Theme.color:
-                return modalBackdropColorThemeColor;
+                return modalBackdropColorThemeColorStatic;
             default:
-                return modalBackdropColorThemeLight;
+                return modalBackdropColorThemeLightStatic;
         }
     }
 
@@ -16962,7 +16569,7 @@
     }
 `;
 
-    const template$6 = (context, definition) => html `
+    const template$7 = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -17037,7 +16644,7 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$6,
+        template: template$7,
         styles: styles$p,
         shadowOptions: {
             delegatesFocus: true
@@ -17051,7 +16658,7 @@
     </div>
 `;
 
-    const template$5 = html `
+    const template$6 = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
@@ -17110,7 +16717,7 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$5,
+            template: template$6,
             styles: styles$o,
             baseClass: iconClass
         });
@@ -17690,1293 +17297,369 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());
 
+    /**
+     * Symbol that is returned as the close reason (from the Promise returned by show()) when
+     * the dialog or drawer was closed by pressing the ESC key (vs. calling the close() function).
+     */
+    const UserDismissed = Symbol('user dismissed');
+
     const styles$k = css `
     ${display('grid')}
 
     dialog {
+        flex-direction: column;
         background-color: ${applicationBackgroundColor};
-        border: ${borderWidth} solid ${popupBorderColor};
-        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
-        max-width: 50%;
+        border: none;
+        box-shadow: 0px 4px 8px #0000004d;
+        padding: 0px;
+        width: 400px;
+        max-height: 600px;
     }
-`.withBehaviors(
-    /*
-     * We cannot use the modalBackdropColor token directly because the backdrop
-     * element is not a descendant of the nimble-theme-provider element.
-     */
-    themeBehavior(Theme.light, css `
-            dialog::backdrop {
-                background: ${modalBackdropColorThemeLight};
-            }
-        `), themeBehavior(Theme.dark, css `
-            dialog::backdrop {
-                background: ${modalBackdropColorThemeDark};
-            }
-        `), themeBehavior(Theme.color, css `
-            dialog::backdrop {
-                background: ${modalBackdropColorThemeColor};
-            }
-        `));
 
-    const template$4 = html `
-    <template>
-        <dialog
-            ${ref('dialogElement')}
-            role="alertdialog"
-            aria-label="${x => x.ariaLabel}"
-            @cancel="${(x, c) => x.cancelHandler(c.event)}"
-        >
-            <slot></slot>
-        </dialog>
-    </template>
-`;
-
-    /**
-     * Symbol that is returned as the dialog close reason (from the Promise returned by show()) when
-     * the dialog was closed by pressing the ESC key (vs. calling the close() function).
-     */
-    const USER_DISMISSED = Symbol('user dismissed');
-    /**
-     * A nimble-styled dialog.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-    class Dialog extends FoundationElement {
-        constructor() {
-            super(...arguments);
-            /**
-             * @public
-             * @description
-             * Prevents dismissing the dialog via the Escape key
-             */
-            this.preventDismiss = false;
-        }
-        /**
-         * True if the dialog is open/showing, false otherwise
-         */
-        get open() {
-            return this.resolveShow !== undefined;
-        }
-        /**
-         * Opens the dialog
-         * @returns Promise that is resolved when the dialog is closed. The value of the resolved Promise is the reason value passed to the close() method, or USER_DISMISSED if the dialog was closed via the ESC key.
-         */
-        async show() {
-            if (this.open) {
-                throw new Error('Dialog is already open');
-            }
-            this.dialogElement.showModal();
-            return new Promise((resolve, _reject) => {
-                this.resolveShow = resolve;
-            });
-        }
-        /**
-         * Closes the dialog
-         * @param reason An optional value indicating how/why the dialog was closed.
-         */
-        close(reason) {
-            if (!this.open) {
-                throw new Error('Dialog is not open');
-            }
-            this.dialogElement.close();
-            this.resolveShow(reason);
-            this.resolveShow = undefined;
-        }
-        /**
-         * @internal
-         */
-        cancelHandler(event) {
-            if (this.preventDismiss) {
-                event.preventDefault();
-            }
-            else {
-                this.resolveShow(USER_DISMISSED);
-                this.resolveShow = undefined;
-            }
-            return true;
-        }
+    dialog[open] {
+        display: flex;
     }
-    // We want the member to match the name of the constant
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    Dialog.USER_DISMISSED = USER_DISMISSED;
-    __decorate([
-        attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
-    ], Dialog.prototype, "preventDismiss", void 0);
-    applyMixins(Dialog, ARIAGlobalStatesAndProperties);
-    const nimbleDialog = Dialog.compose({
-        baseName: 'dialog',
-        template: template$4,
-        styles: styles$k,
-        baseClass: Dialog
-    });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-    var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+    header {
+        min-height: 48px;
+        padding: 24px 24px 0px 24px;
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        gap: ${smallPadding};
+    }
 
-    var dist = {};
+    :host([header-hidden]) header {
+        ${
+/**
+ * Hide content visually while keeping it screen reader-accessible.
+ * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
+ * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
+ */
+''}
+        display: inline-block;
+        height: 1px;
+        width: 1px;
+        position: absolute;
+        margin: -1px;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(50%);
+        overflow: hidden;
+        padding: 0;
+    }
 
-    var animateTo = {};
+    .title {
+        font: ${titlePlus1Font};
+        color: ${titlePlus1FontColor};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 
-    var animate = {};
+    .subtitle {
+        font: ${subtitleFont};
+        color: ${subtitleFontColor};
+    }
 
-    (function (exports) {
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.AnimationMode = void 0;
-    /**
-     * Animation mode describes if an animation should animate toward an elements natural position or away from it
-     *
-     * @internal
-     */
-    var AnimationMode;
-    (function (AnimationMode) {
-        AnimationMode[AnimationMode["animateTo"] = 0] = "animateTo";
-        AnimationMode[AnimationMode["animateFrom"] = 1] = "animateFrom";
-    })(AnimationMode = exports.AnimationMode || (exports.AnimationMode = {}));
-    /**
-     * Base animate type. This is extended by {@link @microsoft/fast-animation#AnimateTo} and {@link @microsoft/fast-animation#AnimateFrom}.
-     *
-     * @public
-     */
-    var Animate = /** @class */ (function () {
-        function Animate(element, options, effectTiming) {
-            var _this = this;
-            /**
-             * Stores animation timing functions
-             */
-            this.effectTiming = {
-                fill: "forwards",
-                iterations: 1,
-                duration: 500,
-            };
-            /**
-             * Stores animation keyframe sets and is accessed by a getter
-             */
-            this._keyframes = [];
-            /**
-             * plays the animation
-             */
-            this.play = function () {
-                _this.ensureAnimationObjectExists();
-                _this.animation.play();
-            };
-            /**
-             * pauses the animation
-             */
-            this.pause = function () {
-                _this.ensureAnimationObjectExists();
-                _this.animation.pause();
-            };
-            /**
-             * finishes the animation
-             */
-            this.finish = function () {
-                _this.ensureAnimationObjectExists();
-                _this.animation.finish();
-            };
-            /**
-             * cancels the animation
-             */
-            this.cancel = function () {
-                _this.ensureAnimationObjectExists();
-                _this.animation.cancel();
-            };
-            /**
-             * reverses an animation
-             */
-            this.reverse = function () {
-                _this.ensureAnimationObjectExists();
-                _this.animation.reverse();
-            };
-            /**
-             * adds a set of keyframes to set of animation keyframes the animation should execute
-             */
-            this.addKeyframes = function (keyframes) {
-                _this._keyframes.push(keyframes);
-            };
-            this.animationTarget = element;
-            if (effectTiming) {
-                this.effectTiming = Object.assign({}, this.effectTiming, effectTiming);
-            }
-            if (options) {
-                if (options.transformOrigin) {
-                    element.style.transformOrigin = options.transformOrigin;
-                }
-                if (options.transformStyle) {
-                    element.style.transformStyle = options.transformStyle;
-                }
-            }
-            this.options = options || {};
-        }
-        Object.defineProperty(Animate.prototype, "onFinish", {
-            get: function () {
-                return this._onFinish;
-            },
-            set: function (callback) {
-                this._onFinish = callback;
-                if (this.animation) {
-                    this.animation.onfinish = callback;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Ensure animation object
-         */
-        Animate.prototype.ensureAnimationObjectExists = function () {
-            if (typeof this.animation === "undefined") {
-                this.createAnimationObject();
-            }
-        };
-        /**
-         * Creates the animation object
-         */
-        Animate.prototype.createAnimationObject = function () {
-            this.animation = new Animation(this.keyframeEffect, document.timeline);
-            if (typeof this.onFinish !== "undefined") {
-                this.animation.onfinish = this.onFinish;
-            }
-            if (typeof this.onCancel !== "undefined") {
-                this.animation.oncancel = this.onCancel;
-            }
-        };
-        /**
-         * Returns a list of properties that will be animated based options
-         */
-        Animate.prototype.getPropertiesToAnimate = function () {
-            var _this = this;
-            return Object.keys(Animate.propertyMap).filter(function (property) {
-                // Filter out all properties that don't need to be set based on our options
-                return Animate.propertyMap[property].reduce(function (hasProperty, animationProp) {
-                    return (typeof _this.options[animationProp] !== "undefined" || hasProperty);
-                }, false);
-            });
-        };
-        /**
-         * Current implmentations of web animations seem to have trouble animating both scale and opacity
-         * from a starting value of 0. This method detects when those values are 0 and alters them slightly
-         * to known-working starting values
-         */
-        Animate.prototype.normalizeInitialValue = function (property, value) {
-            if (value === undefined) {
-                return;
-            }
-            var coercedReturn = "0.01";
-            switch (property) {
-                case "transform":
-                    /* eslint-disable */
-                    var matrixValuesRegex = /matrix\((.+)\)/;
-                    var matrixValues = value.match(matrixValuesRegex);
-                    /* eslint-enable */
-                    if (Array.isArray(matrixValues)) {
-                        var normalizedValues = matrixValues[1]
-                            .split(",")
-                            .map(function (matchedValue, index) {
-                            var parsedValueIsZero = parseFloat(value) === 0;
-                            if (!parsedValueIsZero) {
-                                return matchedValue;
-                            }
-                            // If this is the scaleX index or the scaleY index, return the coerced value
-                            return index === 0 || index === 3
-                                ? coercedReturn
-                                : matchedValue;
-                        });
-                        return "matrix(".concat(normalizedValues.join(","), ")");
-                    }
-                    break;
-                case "opacity":
-                    return parseFloat(value) === 0 ? coercedReturn : value;
-            }
-            return value;
-        };
-        /**
-         * Returns the initial values for all properties being animated
-         */
-        Animate.prototype.getInitialKeyframeValues = function () {
-            var _this = this;
-            if (!(this.animationTarget instanceof HTMLElement) ||
-                typeof window === "undefined") {
-                return {};
-            }
-            var animatedProperties = this.getPropertiesToAnimate();
-            var computedStyle = window.getComputedStyle(this.animationTarget);
-            var initialKeyframeValues = {};
-            animatedProperties.forEach(function (property) {
-                initialKeyframeValues[property] = _this.normalizeInitialValue(property, computedStyle[property]);
-            });
-            return initialKeyframeValues;
-        };
-        /**
-         * Formats a config option into a transform function
-         */
-        Animate.prototype.formatTransformFunction = function (functionType, value) {
-            // If `functionType` can't be converted into a transform function, just return empty string
-            if (Animate.propertyMap.transform.indexOf(functionType) === -1) {
-                return "";
-            }
-            switch (functionType) {
-                case "x":
-                case "y":
-                    functionType = "translate".concat(functionType.toUpperCase());
-                    value =
-                        typeof value === "number" ? (value = this.pixelify(value)) : value;
-                    break;
-                case "rotate":
-                    value = "".concat(value.toString(), "deg");
-                    break;
-                case "scale":
-                    if (value === 0) {
-                        // There is a strange bug where you can't animate from a scale 0
-                        value = 0.01;
-                    }
-            }
-            if (typeof value !== "string") {
-                value = value.toString();
-            }
-            return "".concat(functionType, "(").concat(value, ")");
-        };
-        /**
-         * Converts a number to a pixel string
-         */
-        Animate.prototype.pixelify = function (num) {
-            return "".concat(num, "px");
-        };
-        /**
-         * Returns keyframe values based on option configuration
-         */
-        Animate.prototype.getOptionKeyframeValues = function () {
-            var _this = this;
-            var animateProperties = this.getPropertiesToAnimate();
-            var keyframeValues = {};
-            animateProperties.forEach(function (property) {
-                keyframeValues[property] = Animate.propertyMap[property]
-                    .map(function (option) {
-                    var value = _this.options[option];
-                    if (typeof value === "undefined") {
-                        return null;
-                    }
-                    switch (option) {
-                        case "opacity":
-                            return value.toString();
-                        case "top":
-                        case "right":
-                        case "bottom":
-                        case "left":
-                            return typeof value === "number"
-                                ? _this.pixelify(value)
-                                : value;
-                        default:
-                            return _this.formatTransformFunction(option, value);
-                    }
-                })
-                    .filter(function (option) { return Boolean(option); })
-                    .join(" ");
-            });
-            return keyframeValues;
-        };
-        /**
-         * Gets all keyframes configured by options
-         */
-        Animate.prototype.getOptionKeyframes = function () {
-            var keyframes = [
-                this.getInitialKeyframeValues(),
-                this.getOptionKeyframeValues(),
-            ];
-            return this.mode === AnimationMode.animateFrom ? keyframes.reverse() : keyframes;
-        };
-        /**
-         * Sorts an array of offset keys in ascending order
-         */
-        Animate.prototype.sortOffsets = function (offsets) {
-            return offsets.sort(function (a, b) {
-                var A = parseFloat(a);
-                var B = parseFloat(b);
-                if (A < B) {
-                    return -1;
-                }
-                else if (A > B) {
-                    return 1;
-                }
-                else {
-                    return 0;
-                }
-            });
-        };
-        /**
-         * Consolidates all keyframe arrays into a single keyframe array
-         */
-        Animate.prototype.consolidateKeyframes = function (keyframeSets) {
-            var frames = [];
-            // Merge all keyframes into a single frames object where each key is a keyframe offset
-            keyframeSets.forEach(function (keyframeSet) {
-                keyframeSet.forEach(function (keyframe, index) {
-                    var offset = keyframe.offset;
-                    if (typeof offset === "undefined") {
-                        offset = index === 0 ? 0 : 1;
-                        keyframe.offset = offset;
-                    }
-                    var offsetKey = offset.toString();
-                    frames[offsetKey] =
-                        typeof frames[offsetKey] === "undefined"
-                            ? keyframe
-                            : Object.assign(frames[offsetKey], keyframe);
-                });
-            });
-            return this.sortOffsets(Object.keys(frames)).map(function (offset) {
-                return frames[offset];
-            });
-        };
-        Object.defineProperty(Animate.prototype, "keyframes", {
-            /**
-             * Returns the animation's keyframes
-             */
-            get: function () {
-                return this.consolidateKeyframes(this._keyframes.concat([this.getOptionKeyframes()]));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(Animate.prototype, "keyframeEffect", {
-            /**
-             * Returns the key frame effect object
-             */
-            get: function () {
-                return new KeyframeEffect(this.animationTarget, this.keyframes, this.effectTiming);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * A mapping between animation options and the css property names they apply to
-         */
-        Animate.propertyMap = {
-            opacity: ["opacity"],
-            transform: ["x", "y", "rotate", "scale"],
-            top: ["top"],
-            left: ["left"],
-            bottom: ["bottom"],
-            right: ["right"],
-        };
-        return Animate;
-    }());
-    exports.default = Animate;
-    }(animate));
-
-    var __extends$4 = (commonjsGlobal && commonjsGlobal.__extends) || (function () {
-        var extendStatics = function (d, b) {
-            extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-            return extendStatics(d, b);
-        };
-        return function (d, b) {
-            if (typeof b !== "function" && b !== null)
-                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-            extendStatics(d, b);
-            function __() { this.constructor = d; }
-            d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-        };
-    })();
-    Object.defineProperty(animateTo, "__esModule", { value: true });
-    var animate_1$1 = animate;
-    /**
-     * An animation to provided property values from the element's current values.
-     * Extends {@link @microsoft/fast-animation#Animate}.
-     * @public
-     */
-    var AnimateTo = /** @class */ (function (_super) {
-        __extends$4(AnimateTo, _super);
-        function AnimateTo() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.mode = animate_1$1.AnimationMode.animateTo;
-            return _this;
-        }
-        return AnimateTo;
-    }(animate_1$1.default));
-    animateTo.default = AnimateTo;
-
-    var animateFrom = {};
-
-    var __extends$3 = (commonjsGlobal && commonjsGlobal.__extends) || (function () {
-        var extendStatics = function (d, b) {
-            extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-            return extendStatics(d, b);
-        };
-        return function (d, b) {
-            if (typeof b !== "function" && b !== null)
-                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-            extendStatics(d, b);
-            function __() { this.constructor = d; }
-            d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-        };
-    })();
-    Object.defineProperty(animateFrom, "__esModule", { value: true });
-    var animate_1 = animate;
-    /**
-     * An animation from provided property values to the element's current values.
-     * Extends {@link @microsoft/fast-animation#Animate}.
-     *
-     * @public
-     */
-    var AnimateFrom = /** @class */ (function (_super) {
-        __extends$3(AnimateFrom, _super);
-        function AnimateFrom() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.mode = animate_1.AnimationMode.animateFrom;
-            return _this;
-        }
-        return AnimateFrom;
-    }(animate_1.default));
-    animateFrom.default = AnimateFrom;
+    section {
+        flex: auto;
+        overflow-y: auto;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        display: flex;
+        flex-direction: column;
+        gap: ${standardPadding};
 
-    var animateGroup = {};
+        ${
+/**
+ * Use padding on all sides except the top because the padding is within
+ * the scrollable area. The whole scrollable area, including the top of
+ * the scrollbar, should be 24px away from the header, so use a margin
+ * instead of padding for the top.
+ */
+''}
+        padding: 0px 24px 24px 24px;
+        margin-top: 24px;
+    }
 
-    var invokeFunctionForEach$1 = {};
+    footer {
+        border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);
+        padding: 24px;
+        flex: none;
+        display: flex;
+        justify-content: flex-end;
+        gap: ${standardPadding};
+    }
 
-    Object.defineProperty(invokeFunctionForEach$1, "__esModule", { value: true });
-    invokeFunctionForEach$1.invokeFunctionForEach = void 0;
-    /**
-     * For each item in an array, invoke a function
-     */
-    function invokeFunctionForEach(arr, name) {
-        arr.forEach(function (arrItem) { return arrItem[name](); });
+    footer.empty {
+        padding: 0px;
+        height: 72px;
+        border-top: none;
     }
-    invokeFunctionForEach$1.invokeFunctionForEach = invokeFunctionForEach;
 
-    Object.defineProperty(animateGroup, "__esModule", { value: true });
-    var invokeFunctionForEach_1$1 = invokeFunctionForEach$1;
-    /**
-     * Groups {@link @microsoft/fast-animation#AnimateTo} and {@link @microsoft/fast-animation#AnimateFrom} instances, providing a single API to operate on all of them.
-     * @public
+    :host([footer-hidden]) footer {
+        display: none;
+    }
+`.withBehaviors(
+    /*
+     * We cannot use the modalBackdropColor token directly because the backdrop
+     * element is not a descendant of the nimble-theme-provider element.
      */
-    var AnimateGroup = /** @class */ (function () {
-        function AnimateGroup(animations) {
-            var _this = this;
-            /**
-             * Pauses all animations in the group
-             */
-            this.pause = function () {
-                (0, invokeFunctionForEach_1$1.invokeFunctionForEach)(_this.animations, "pause");
-            };
-            /**
-             * Finishes all animations in the group
-             */
-            this.finish = function () {
-                (0, invokeFunctionForEach_1$1.invokeFunctionForEach)(_this.animations, "finish");
-            };
-            /**
-             * Cancels all animations in the group
-             */
-            this.cancel = function () {
-                (0, invokeFunctionForEach_1$1.invokeFunctionForEach)(_this.animations, "cancel");
-            };
-            this.animations = animations;
-        }
-        Object.defineProperty(AnimateGroup.prototype, "onFinish", {
-            /**
-             * The onFinish callback.
-             */
-            get: function () {
-                return this._onFinish;
-            },
-            set: function (callback) {
-                var _this = this;
-                this._onFinish = callback;
-                var longestRunning = this.getLongestAnimation();
-                if (typeof longestRunning.onFinish === "function") {
-                    var fn_1 = longestRunning.onFinish;
-                    longestRunning.onFinish = function () {
-                        fn_1();
-                        _this._onFinish();
-                    };
-                }
-                else {
-                    longestRunning.onFinish = this._onFinish;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Play the group of animations
-         */
-        AnimateGroup.prototype.play = function () {
-            (0, invokeFunctionForEach_1$1.invokeFunctionForEach)(this.animations, "play");
-        };
-        /**
-         * Reverses all animations in the group
-         */
-        AnimateGroup.prototype.reverse = function () {
-            (0, invokeFunctionForEach_1$1.invokeFunctionForEach)(this.animations, "reverse");
-        };
-        /**
-         * Returns the longest running animation in the group
-         */
-        AnimateGroup.prototype.getLongestAnimation = function () {
-            var _this = this;
-            return this.animations.reduce(function (previousValue, currentValue) {
-                var previousDuration = _this.getAnimationDuration(previousValue.effectTiming);
-                var currentDuration = _this.getAnimationDuration(currentValue.effectTiming);
-                // If two durations in the group are equal, consider the higher index the
-                // longest animation - this helps ensure the group onFinish callback
-                // is fired after all individual animation onFinish callbacks have fired.
-                return currentDuration >= previousDuration ? currentValue : previousValue;
-            });
-        };
-        /**
-         * Returns the cumulative time it will take to complete an animation
-         */
-        AnimateGroup.prototype.getAnimationDuration = function (effectTiming) {
-            var duration = effectTiming.duration;
-            var sanitizedDuration = typeof duration === "string" ? parseFloat(duration) : duration;
-            return (effectTiming.delay || 0) + (sanitizedDuration || 0);
-        };
-        return AnimateGroup;
-    }());
-    animateGroup.default = AnimateGroup;
+    themeBehavior(Theme.light, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeLightStatic};
+            }
+        `), themeBehavior(Theme.dark, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeDarkStatic};
+            }
+        `), themeBehavior(Theme.color, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeColorStatic};
+            }
+        `));
 
-    var animateSequence = {};
+    const template$5 = html `
+    <template>
+        <dialog
+            ${ref('dialogElement')}
+            role="dialog"
+            @cancel="${(x, c) => x.cancelHandler(c.event)}"
+            aria-labelledby="header"
+        >
+            <header id="header">
+                <div class="title">
+                    <slot name="title"></slot>
+                </div>
+                <div class="subtitle">
+                    <slot name="subtitle"></slot>
+                </div>
+            </header>
+            <section>
+                <slot></slot>
+            </section>
+            <footer class="${x => (x.footerIsEmpty ? 'empty' : '')}">
+                <slot
+                    name="footer"
+                    ${slotted({ property: 'slottedFooterElements' })}
+                ></slot>
+            </footer>
+        </dialog>
+    </template>
+`;
 
-    Object.defineProperty(animateSequence, "__esModule", { value: true });
-    var invokeFunctionForEach_1 = invokeFunctionForEach$1;
     /**
-     * Animate a collection of {@link @microsoft/fast-animation#AnimateTo} and {@link @microsoft/fast-animation#AnimateFrom} in sequence.
-     * @public
+     * A nimble-styled dialog.
      */
-    var AnimateSequence = /** @class */ (function () {
-        function AnimateSequence(animations) {
-            var _this = this;
-            /**
-             * Play the sequence of animations
-             */
-            this.play = function () {
-                _this.applySequencedCallback(_this.animations, "play");
-            };
-            /**
-             * Play the sequence in reverse
-             */
-            this.reverse = function () {
-                _this.applySequencedCallback(_this.animations.reverse(), "reverse");
-            };
-            /**
-             * Pauses all animations in the sequence
-             */
-            this.pause = function () {
-                (0, invokeFunctionForEach_1.invokeFunctionForEach)(_this.animations, "pause");
-            };
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    class Dialog extends FoundationElement {
+        constructor() {
+            super(...arguments);
             /**
-             * Finishes all animations in the sequence
+             * @public
+             * @description
+             * Prevents dismissing the dialog via the Escape key
              */
-            this.finish = function () {
-                (0, invokeFunctionForEach_1.invokeFunctionForEach)(_this.animations, "finish");
-            };
+            this.preventDismiss = false;
             /**
-             * Cancels all animations in the sequence
+             * @public
+             * @description
+             * Hides the header of the dialog.
              */
-            this.cancel = function () {
-                (0, invokeFunctionForEach_1.invokeFunctionForEach)(_this.animations, "cancel");
-            };
-            this.animations = animations;
-        }
-        /**
-         * Sequences a set of animations and calls the specified method
-         */
-        AnimateSequence.prototype.applySequencedCallback = function (animations, method) {
-            var _this = this;
-            var animationCount = animations.length;
-            if (animationCount <= 0) {
-                return;
-            }
-            animations.forEach(function (animation, index) {
-                // If this is not the last animation, format animation sequence chain
-                if (index < animationCount - 1) {
-                    animation.onFinish = _this.animations[index + 1][method];
-                }
-                else {
-                    // Else attach onFinish or nullify any existing onFinish on the animation
-                    animation.onFinish = _this.onFinish || void 0;
-                }
-            });
-            animations[0][method]();
-        };
-        return AnimateSequence;
-    }());
-    animateSequence.default = AnimateSequence;
-
-    var fade = {};
-
-    (function (exports) {
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.fadeOut = exports.fadeIn = exports.applyFade = exports.fadeEffectTiming = exports.fadeOutKeyframes = exports.fadeInKeyframes = void 0;
-    var animateTo_1 = animateTo;
-    /**
-     * Key frame object for fade-in animations
-     */
-    exports.fadeInKeyframes = [
-        { opacity: "0.01" },
-        { opacity: "1" },
-    ];
-    /**
-     * Key frame object for fade-out animations
-     */
-    exports.fadeOutKeyframes = [
-        { opacity: "1" },
-        { opacity: "0" },
-    ];
-    /**
-     * EffectTiming defaults for fade animations
-     */
-    exports.fadeEffectTiming = {
-        easing: "linear",
-        duration: 500,
-    };
-    function applyFade(element, keyframes, timing) {
-        if (timing === void 0) { timing = {}; }
-        var fadeAnimationTiming = Object.assign({}, exports.fadeEffectTiming, timing);
-        var fadeAnimation = new animateTo_1.default(element, null, fadeAnimationTiming);
-        fadeAnimation.addKeyframes(keyframes);
-        return fadeAnimation;
-    }
-    exports.applyFade = applyFade;
-    /**
-     * Creates an animation to fade an element into view
-     *
-     * @public
-     */
-    function fadeIn(element, effectTiming) {
-        if (effectTiming === void 0) { effectTiming = {}; }
-        return applyFade(element, exports.fadeInKeyframes, effectTiming);
-    }
-    exports.fadeIn = fadeIn;
-    /**
-     * Creates an animation to fade an element out of view
-     *
-     * @public
-     */
-    function fadeOut(element, effectTiming) {
-        if (effectTiming === void 0) { effectTiming = {}; }
-        return applyFade(element, exports.fadeOutKeyframes, effectTiming);
-    }
-    exports.fadeOut = fadeOut;
-    }(fade));
-
-    var curves = {};
-
-    var config = {};
-
-    Object.defineProperty(config, "__esModule", { value: true });
-    config.navPane = config.exponentialReversed = config.fastInFortySevenPercent = config.exponential = config.fastInOut = config.fastOut = config.fastIn = config.appToApp = config.backToApp = config.drillIn = config.easeIn = config.easeOutSmooth = config.easeOut = config.linear = void 0;
-    config.linear = [
-        [0, 0],
-        [1, 1],
-    ];
-    config.easeOut = [
-        [0, 0],
-        [0.58, 1],
-    ];
-    config.easeOutSmooth = [
-        [0, 0.35],
-        [0.15, 1],
-    ];
-    config.easeIn = [
-        [0.25, 0.1],
-        [0.25, 1],
-    ];
-    config.drillIn = [
-        [0.17, 0.17],
-        [0, 1],
-    ];
-    config.backToApp = [
-        [0.5, 0],
-        [0.6, 1],
-    ];
-    config.appToApp = [
-        [0.5, 0],
-        [1, 0.9],
-    ];
-    config.fastIn = [
-        [0.1, 0.9],
-        [0.2, 1],
-    ];
-    config.fastOut = [
-        [0.9, 0.1],
-        [1, 0.2],
-    ];
-    config.fastInOut = [
-        [0.8, 0],
-        [0.2, 1],
-    ];
-    config.exponential = [
-        [0.1, 0.25],
-        [0.75, 0.9],
-    ];
-    config.fastInFortySevenPercent = [
-        [0.11, 0.5],
-        [0.24, 0.96],
-    ];
-    config.exponentialReversed = [
-        [0.25, 0.1],
-        [0.9, 0.75],
-    ];
-    config.navPane = [
-        [0.1, 0.7],
-        [0.1, 1],
-    ];
-
-    Object.defineProperty(curves, "__esModule", { value: true });
-    curves.cubicBezier = curves.formatCubicBezier = void 0;
-    var bezierCurves = config;
-    /**
-     * Formats a cubic bezier config into a cubic bezier string
-     *
-     * @public
-     */
-    function formatCubicBezier(points) {
-        if (!Array.isArray(points) ||
-            !Array.isArray(points[0]) ||
-            !Array.isArray(points[1])) {
-            return "";
-        }
-        var p0 = points[0];
-        var p1 = points[1];
-        return "cubic-bezier(".concat(p0[0], ", ").concat(p0[1], ", ").concat(p1[0], ", ").concat(p1[1], ")");
-    }
-    curves.formatCubicBezier = formatCubicBezier;
-    /**
-     * Get a cubic bezier curve, formatted as a string, by name.
-     * @param name - the name of the bezier curve to use.
-     *
-     * @public
-     */
-    function cubicBezier(name) {
-        return name in bezierCurves ? formatCubicBezier(bezierCurves[name]) : "";
-    }
-    curves.cubicBezier = cubicBezier;
-
-    var ScrollTrigger$2 = {};
-
-    var isElementInView$1 = {};
-
-    Object.defineProperty(isElementInView$1, "__esModule", { value: true });
-    /**
-     * Checks to see if any part of an element is within the viewport
-     */
-    function isElementInView(el) {
-        var rect = el.getBoundingClientRect();
-        return (rect.bottom >= 0 &&
-            rect.right >= 0 &&
-            rect.top <= window.innerHeight &&
-            rect.left <= window.innerWidth);
-    }
-    isElementInView$1.default = isElementInView;
-
-    var ScrollBase = {};
-
-    var scrollY$1 = {};
-
-    Object.defineProperty(scrollY$1, "__esModule", { value: true });
-    /**
-     * Gets the document's scrollY
-     */
-    function scrollY() {
-        if (typeof window === "undefined") {
-            return NaN;
-        }
-        return typeof window.scrollY !== "undefined" ? window.scrollY : window.pageYOffset;
-    }
-    scrollY$1.default = scrollY;
-
-    Object.defineProperty(ScrollBase, "__esModule", { value: true });
-    var isElementInView_1$3 = isElementInView$1;
-    var scrollY_1 = scrollY$1;
-    /**
-     * Scroll trigger base-class that handles event binding and element/callback registration.
-     */
-    var ScrollTrigger$1 = /** @class */ (function () {
-        function ScrollTrigger() {
-            var _this = this;
-            this.subscriptions = [];
-            this.scrollDistance = 0;
+            this.headerHidden = false;
             /**
-             * Request's an animation frame if there are currently no open animation frame requests
-             */
-            this.requestFrame = function () {
-                if (_this.requestedFrame) {
-                    cancelAnimationFrame(_this.requestedFrame);
-                }
-                _this.requestedFrame = requestAnimationFrame(_this.update);
-            };
-            this.lastScrollY = (0, scrollY_1.default)();
-            // We need to use .bind instead of lambda (fat-arrow) syntax here because
-            // protected methods declared as lambda functions cannot be invoked by
-            // extending classes via the `super` object
-            this.update = this.update.bind(this);
+             * @public
+             * @description
+             * Hides the footer of the dialog.
+             */
+            this.footerHidden = false;
+            /** @internal */
+            this.footerIsEmpty = true;
         }
         /**
-         * Subscribe an element and callback for scroll triggers
-         */
-        ScrollTrigger.prototype.subscribe = function (element, callback) {
-            if (!(element instanceof HTMLElement) ||
-                typeof callback !== "function" ||
-                this.isSubscribed(element, callback)) {
-                return;
-            }
-            if (this.subscriptions.length === 0) {
-                window.addEventListener("scroll", this.requestFrame);
-            }
-            this.subscriptions.push({
-                element: element,
-                callback: callback,
-                inView: (0, isElementInView_1$3.default)(element),
-            });
-        };
-        /**
-         * Unsubscribe an element and callback for scroll triggers
-         */
-        ScrollTrigger.prototype.unsubscribe = function (element, callback) {
-            this.subscriptions = this.subscriptions.filter(function (subscription) {
-                return !(element === subscription.element && callback === subscription.callback);
-            });
-            if (this.subscriptions.length === 0) {
-                window.removeEventListener("scroll", this.requestFrame);
-            }
-        };
-        /**
-         * Make any arbitrary updates to UI
-         */
-        ScrollTrigger.prototype.update = function () {
-            var yOffset = (0, scrollY_1.default)();
-            this.scrollDistance = yOffset - this.lastScrollY;
-            this.lastScrollY = yOffset;
-        };
-        /**
-         * Checks to see if element/callback pairs have been registered so we don't duplicate registration.
+         * True if the dialog is open/showing, false otherwise
          */
-        ScrollTrigger.prototype.isSubscribed = function (element, callback) {
-            return !!this.subscriptions.filter(function (subscription) {
-                return (element === subscription.element && callback === subscription.callback);
-            }).length;
-        };
-        return ScrollTrigger;
-    }());
-    ScrollBase.default = ScrollTrigger$1;
-
-    var __extends$2 = (commonjsGlobal && commonjsGlobal.__extends) || (function () {
-        var extendStatics = function (d, b) {
-            extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-            return extendStatics(d, b);
-        };
-        return function (d, b) {
-            if (typeof b !== "function" && b !== null)
-                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-            extendStatics(d, b);
-            function __() { this.constructor = d; }
-            d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-        };
-    })();
-    Object.defineProperty(ScrollTrigger$2, "__esModule", { value: true });
-    var isElementInView_1$2 = isElementInView$1;
-    var ScrollBase_1$2 = ScrollBase;
-    /**
-     * Utility for registering element/callback pairs where the callback will be called on scroll while the element is in view.
-     *
-     * @public
-     */
-    var ScrollTrigger = /** @class */ (function (_super) {
-        __extends$2(ScrollTrigger, _super);
-        function ScrollTrigger() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        get open() {
+            return this.resolveShow !== undefined;
         }
         /**
-         * Check if elements are in view-port and apply scroll method if they are
+         * Opens the dialog
+         * @returns Promise that is resolved when the dialog is closed. The value of the resolved Promise is the reason value passed to the close() method, or UserDismissed if the dialog was closed via the ESC key.
          */
-        ScrollTrigger.prototype.update = function () {
-            var _this = this;
-            _super.prototype.update.call(this);
-            this.subscriptions.forEach(function (subscription) {
-                var inView = (0, isElementInView_1$2.default)(subscription.element);
-                if (inView) {
-                    subscription.callback(_this.scrollDistance);
-                }
-                if (inView !== subscription.inView) {
-                    subscription.inView = inView;
-                }
+        async show() {
+            if (this.open) {
+                throw new Error('Dialog is already open');
+            }
+            this.dialogElement.showModal();
+            return new Promise((resolve, _reject) => {
+                this.resolveShow = resolve;
             });
-        };
-        return ScrollTrigger;
-    }(ScrollBase_1$2.default));
-    ScrollTrigger$2.default = ScrollTrigger;
-
-    var ViewEnterTrigger$1 = {};
-
-    var __extends$1 = (commonjsGlobal && commonjsGlobal.__extends) || (function () {
-        var extendStatics = function (d, b) {
-            extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-            return extendStatics(d, b);
-        };
-        return function (d, b) {
-            if (typeof b !== "function" && b !== null)
-                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-            extendStatics(d, b);
-            function __() { this.constructor = d; }
-            d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-        };
-    })();
-    Object.defineProperty(ViewEnterTrigger$1, "__esModule", { value: true });
-    var isElementInView_1$1 = isElementInView$1;
-    var ScrollBase_1$1 = ScrollBase;
-    /**
-     * Utility for registering element/callback pairs where the callback will be called when the element enters the view-port
-     *
-     * @public
-     */
-    var ViewEnterTrigger = /** @class */ (function (_super) {
-        __extends$1(ViewEnterTrigger, _super);
-        function ViewEnterTrigger() {
-            return _super !== null && _super.apply(this, arguments) || this;
         }
         /**
-         * Check if elements are in view-port and apply scroll method if they are
+         * Closes the dialog
+         * @param reason An optional value indicating how/why the dialog was closed.
          */
-        ViewEnterTrigger.prototype.update = function () {
-            var _this = this;
-            _super.prototype.update.call(this);
-            this.subscriptions.forEach(
-            /* eslint-disable-next-line */
-            function (subscription, index) {
-                var inView = (0, isElementInView_1$1.default)(subscription.element);
-                // If the element is in view but previously wasn't
-                if (inView && !subscription.inView) {
-                    subscription.callback(_this.scrollDistance);
-                }
-                if (inView !== subscription.inView) {
-                    subscription.inView = inView;
-                }
-            });
-        };
-        return ViewEnterTrigger;
-    }(ScrollBase_1$1.default));
-    ViewEnterTrigger$1.default = ViewEnterTrigger;
-
-    var ViewExitTrigger$1 = {};
-
-    var __extends = (commonjsGlobal && commonjsGlobal.__extends) || (function () {
-        var extendStatics = function (d, b) {
-            extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-            return extendStatics(d, b);
-        };
-        return function (d, b) {
-            if (typeof b !== "function" && b !== null)
-                throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-            extendStatics(d, b);
-            function __() { this.constructor = d; }
-            d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-        };
-    })();
-    Object.defineProperty(ViewExitTrigger$1, "__esModule", { value: true });
-    var isElementInView_1 = isElementInView$1;
-    var ScrollBase_1 = ScrollBase;
-    /**
-     * Utility for registering element/callback pairs where the callback will be invoked when the element exits the view-port
-     *
-     * @public
-     */
-    var ViewExitTrigger = /** @class */ (function (_super) {
-        __extends(ViewExitTrigger, _super);
-        function ViewExitTrigger() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        close(reason) {
+            if (!this.open) {
+                throw new Error('Dialog is not open');
+            }
+            this.dialogElement.close();
+            this.resolveShow(reason);
+            this.resolveShow = undefined;
+        }
+        slottedFooterElementsChanged(_prev, next) {
+            this.footerIsEmpty = !next?.length;
         }
         /**
-         * Check if elements are in view-port and apply scroll method if they are
+         * @internal
          */
-        ViewExitTrigger.prototype.update = function () {
-            var _this = this;
-            _super.prototype.update.call(this);
-            this.subscriptions.forEach(
-            /* eslint-disable-next-line */
-            function (subscription, index) {
-                var inView = (0, isElementInView_1.default)(subscription.element);
-                // If the element is out of view but previously was in view
-                if (!inView && subscription.inView) {
-                    subscription.callback(_this.scrollDistance);
-                }
-                if (inView !== subscription.inView) {
-                    subscription.inView = inView;
-                }
-            });
-        };
-        return ViewExitTrigger;
-    }(ScrollBase_1.default));
-    ViewExitTrigger$1.default = ViewExitTrigger;
-
-    (function (exports) {
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.ViewExitTrigger = exports.ViewEnterTrigger = exports.ScrollTrigger = exports.fadeOut = exports.fadeIn = exports.cubicBezier = exports.AnimateTo = exports.AnimateSequence = exports.AnimateGroup = exports.AnimateFrom = exports.Animate = void 0;
-    var animateTo_1 = animateTo;
-    exports.AnimateTo = animateTo_1.default;
-    var animateFrom_1 = animateFrom;
-    exports.AnimateFrom = animateFrom_1.default;
-    var animateGroup_1 = animateGroup;
-    exports.AnimateGroup = animateGroup_1.default;
-    var animateSequence_1 = animateSequence;
-    exports.AnimateSequence = animateSequence_1.default;
-    var animate_1 = animate;
-    exports.Animate = animate_1.default;
-    var fade_1 = fade;
-    Object.defineProperty(exports, "fadeIn", { enumerable: true, get: function () { return fade_1.fadeIn; } });
-    Object.defineProperty(exports, "fadeOut", { enumerable: true, get: function () { return fade_1.fadeOut; } });
-    var curves_1 = curves;
-    Object.defineProperty(exports, "cubicBezier", { enumerable: true, get: function () { return curves_1.cubicBezier; } });
-    var ScrollTrigger_1 = ScrollTrigger$2;
-    exports.ScrollTrigger = ScrollTrigger_1.default;
-    var ViewEnterTrigger_1 = ViewEnterTrigger$1;
-    exports.ViewEnterTrigger = ViewEnterTrigger_1.default;
-    var ViewExitTrigger_1 = ViewExitTrigger$1;
-    exports.ViewExitTrigger = ViewExitTrigger_1.default;
-    }(dist));
-
-    /**
-     * Singleton utility to watch the prefers-reduced-motion media value
-     */
-    const prefersReducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-
-    const slideLeftKeyframes = [
-        {
-            transform: 'translateX(-100%)',
-            visibility: 'hidden',
-            offset: 0
-        },
-        {
-            transform: 'translateX(-100%)',
-            visibility: 'visible',
-            offset: 0.01
-        },
-        {
-            transform: 'translateX(0%)',
-            visibility: 'visible',
-            offset: 1
-        }
-    ];
-    const slideRightKeyframes = [
-        {
-            transform: 'translateX(100%)',
-            visibility: 'hidden',
-            offset: 0
-        },
-        {
-            transform: 'translateX(100%)',
-            visibility: 'visible',
-            offset: 0.01
-        },
-        {
-            transform: 'translateX(0%)',
-            visibility: 'visible',
-            offset: 1
-        }
-    ];
-    const fadeOverlayKeyframes = [{ opacity: 0 }, { opacity: 1 }];
-    const slideInOptions = {
-        duration: 1,
-        easing: 'ease-out'
-    };
-    const slideOutOptions = {
-        duration: 1,
-        easing: 'ease-in',
-        direction: 'reverse'
-    };
-    const animationConfig = {
-        slideLeftKeyframes,
-        slideRightKeyframes,
-        fadeOverlayKeyframes,
-        slideInOptions,
-        slideOutOptions
-    };
+        cancelHandler(event) {
+            if (this.preventDismiss) {
+                event.preventDefault();
+            }
+            else {
+                this.resolveShow(UserDismissed);
+                this.resolveShow = undefined;
+            }
+            return true;
+        }
+    }
+    // We want the member to match the name of the constant
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    Dialog.UserDismissed = UserDismissed;
+    __decorate([
+        attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
+    ], Dialog.prototype, "preventDismiss", void 0);
+    __decorate([
+        attr({ attribute: 'header-hidden', mode: 'boolean' })
+    ], Dialog.prototype, "headerHidden", void 0);
+    __decorate([
+        attr({ attribute: 'footer-hidden', mode: 'boolean' })
+    ], Dialog.prototype, "footerHidden", void 0);
+    __decorate([
+        observable
+    ], Dialog.prototype, "footerIsEmpty", void 0);
+    __decorate([
+        observable
+    ], Dialog.prototype, "slottedFooterElements", void 0);
+    applyMixins(Dialog, ARIAGlobalStatesAndProperties);
+    const nimbleDialog = Dialog.compose({
+        baseName: 'dialog',
+        template: template$5,
+        styles: styles$k,
+        baseClass: Dialog
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
     const styles$j = css `
     ${display('block')}
 
     :host {
-        position: relative;
-        top: 0;
-        bottom: 0;
-        width: fit-content;
+        position: absolute;
+        width: auto;
         height: 100%;
         outline: none;
         font: ${bodyFont};
         color: ${bodyFontColor};
     }
 
-    :host([modal]) {
-        position: absolute;
-    }
-
-    :host([location='left']) {
-        left: 0px;
-    }
-
-    :host([location='right']) {
-        right: 0px;
-    }
-
-    .positioning-region {
-        display: block;
-        position: relative;
-        justify-content: center;
-        width: fit-content;
+    dialog {
+        color: inherit;
+        font: inherit;
+        background-color: transparent;
+        width: auto;
+        top: 0px;
+        bottom: 0px;
+        border-radius: 0px;
+        border-width: 0px;
         height: 100%;
-        inset: 0px;
+        margin: 0px;
+        padding: 0px;
+        max-width: none;
+        max-height: none;
         overflow: hidden;
-        z-index: 999;
     }
 
-    :host([modal]) .positioning-region {
-        width: 100%;
-        position: fixed;
-        display: flex;
+    @keyframes ni-private-drawer-fade-in-keyframes {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
     }
 
-    ${ /* Note: overlay is only present in the DOM when modal=true */''}
-    .overlay {
-        position: fixed;
-        inset: 0px;
-        background: ${modalBackdropColor};
-        touch-action: none;
+    dialog.animating::backdrop {
+        animation: ni-private-drawer-fade-in-keyframes ${largeDelayStatic}
+            ease-in;
     }
 
-    .control {
-        position: relative;
-        top: 0px;
-        bottom: 0px;
+    dialog.closing::backdrop {
+        animation-direction: reverse;
+    }
+
+    .dialog-contents {
+        box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        box-sizing: border-box;
-        border-radius: 0px;
-        border-width: 0px;
+        position: absolute;
         width: ${drawerWidth};
         height: 100%;
         background-color: ${applicationBackgroundColor};
     }
 
-    :host([modal]) .control {
-        position: absolute;
-        height: 100%;
+    @keyframes ni-private-drawer-slide-in-left-keyframes {
+        0% {
+            transform: translate(-100%);
+        }
+        100% {
+            transform: translate(0%);
+        }
     }
 
-    :host([location='left']) .control {
-        left: 0px;
+    :host([location='left']) .dialog-contents {
         border-right: ${borderWidth} solid ${popupBoxShadowColor};
+        box-shadow: 3px 0px 8px ${popupBoxShadowColor};
+    }
+
+    :host([location='left']) dialog.animating .dialog-contents {
+        animation: ni-private-drawer-slide-in-left-keyframes ${largeDelay}
+            ease-in;
+    }
+
+    :host([location='left']) dialog.closing .dialog-contents {
+        animation-direction: reverse;
+    }
+
+    @keyframes ni-private-drawer-slide-in-right-keyframes {
+        0% {
+            transform: translate(100%);
+        }
+        100% {
+            transform: translate(0%);
+        }
     }
 
-    :host([location='right']) .control {
+    :host([location='right']) .dialog-contents {
         right: 0px;
         border-left: ${borderWidth} solid ${popupBoxShadowColor};
+        box-shadow: -3px 0px 8px ${popupBoxShadowColor};
+    }
+
+    :host([location='right']) dialog.animating .dialog-contents {
+        animation: ni-private-drawer-slide-in-right-keyframes ${largeDelay}
+            ease-in;
+    }
+
+    :host([location='right']) dialog.closing .dialog-contents {
+        animation-direction: reverse;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host([location='left']) dialog.animating .dialog-contents,
+        :host([location='right']) dialog.animating .dialog-contents {
+            animation-duration: 1ms;
+        }
     }
 
     ${
@@ -19004,209 +17687,140 @@
         justify-content: flex-end;
         border-top: ${borderWidth} solid ${popupBorderColor};
     }
+`.withBehaviors(
+    /*
+     * We cannot use the modalBackdropColor token directly because the backdrop
+     * element is not a descendant of the nimble-theme-provider element.
+     */
+    themeBehavior(Theme.light, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeLightStatic};
+            }
+        `), themeBehavior(Theme.dark, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeDarkStatic};
+            }
+        `), themeBehavior(Theme.color, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeColorStatic};
+            }
+        `));
+
+    const template$4 = html `
+    <dialog
+        ${ref('dialog')}
+        aria-label="${x => x.ariaLabel}"
+        @cancel="${(x, c) => x.cancelHandler(c.event)}"
+    >
+        <div class="dialog-contents">
+            <slot></slot>
+        </div>
+    </dialog>
 `;
 
     const DrawerLocation = {
         left: 'left',
         right: 'right'
     };
-    const DrawerState = {
-        opening: 'opening',
-        opened: 'opened',
-        closing: 'closing',
-        closed: 'closed'
-    };
 
-    const animationDurationWhenDisabledMilliseconds = 0.001;
     /**
-     * Drawer/Sidenav control. Shows content in a panel on the left / right side of the screen,
+     * Drawer control. Shows content in a panel on the left / right side of the screen,
      * which animates to be visible with a slide-in / slide-out animation.
-     * Configured via 'location', 'state', 'modal', 'preventDismiss' properties.
      */
-    class Drawer extends Dialog$1 {
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    class Drawer extends FoundationElement {
         constructor() {
             super(...arguments);
-            this.location = DrawerLocation.left;
-            this.state = DrawerState.closed;
-            /**
-             * True to prevent dismissing the drawer when the overlay outside the drawer is clicked.
-             * Only applicable when 'modal' is set to true (i.e. when the overlay is used).
-             * HTML Attribute: prevent-dismiss
-             */
+            this.location = DrawerLocation.right;
             this.preventDismiss = false;
-            this.propertiesToWatch = ['hidden', 'location', 'state'];
-            this.animationDurationMilliseconds = animationDurationWhenDisabledMilliseconds;
-        }
-        /** @internal */
-        connectedCallback() {
-            // disable trapFocus before super.connectedCallback as FAST Dialog will immediately queue work to
-            // change focus if it's true before connectedCallback
-            this.trapFocus = false;
-            super.connectedCallback();
-            this.updateAnimationDuration();
-            this.animationsEnabledChangedHandler = () => this.updateAnimationDuration();
-            prefersReducedMotionMediaQuery.addEventListener('change', this.animationsEnabledChangedHandler);
-            this.onStateChanged();
-            const notifier = Observable.getNotifier(this);
-            const subscriber = {
-                handleChange: (_source, propertyName) => this.onPropertyChange(propertyName)
-            };
-            this.propertiesToWatch.forEach(propertyName => notifier.subscribe(subscriber, propertyName));
-            this.propertyChangeSubscriber = subscriber;
-            this.propertyChangeNotifier = notifier;
-        }
-        /** @internal */
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            this.cancelCurrentAnimation();
-            if (this.propertyChangeNotifier && this.propertyChangeSubscriber) {
-                this.propertiesToWatch.forEach(propertyName => this.propertyChangeNotifier.unsubscribe(this.propertyChangeSubscriber, propertyName));
-                this.propertyChangeNotifier = undefined;
-                this.propertyChangeSubscriber = undefined;
-            }
-            if (this.animationsEnabledChangedHandler) {
-                prefersReducedMotionMediaQuery.removeEventListener('change', this.animationsEnabledChangedHandler);
-                this.animationsEnabledChangedHandler = undefined;
-            }
-        }
-        show() {
-            // Not calling super.show() as that will immediately show the drawer, whereas 'Opening' state will animate
-            this.state = DrawerState.opening;
-        }
-        hide() {
-            // Not calling super.hide() as that will immediately hide the drawer, whereas 'Closing' state will animate
-            this.state = DrawerState.closing;
+            this.closing = false;
+            this.animationEndHandlerFunction = () => this.animationEndHandler();
         }
         /**
-         * Handler for overlay clicks (user-initiated dismiss requests) only.
-         * @internal
+         * True if the drawer is open, opening, or closing. Otherwise, false.
          */
-        dismiss() {
-            // Note: intentionally not calling super() in this function in order to implement custom preventDismiss behavior
-            const shouldDismiss = this.$emit('cancel', {}, 
-            // Aligned with the configuration of HTMLDialogElement cancel event:
-            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event
-            { bubbles: false, cancelable: true, composed: false });
-            if (shouldDismiss && !this.preventDismiss) {
-                this.$emit('dismiss');
-                this.hide();
-            }
-        }
-        onPropertyChange(propertyName) {
-            switch (propertyName) {
-                case 'hidden':
-                    this.onHiddenChanged();
-                    break;
-                case 'location':
-                    this.onLocationChanged();
-                    break;
-                case 'state':
-                    this.onStateChanged();
-                    break;
-            }
+        get open() {
+            return this.resolveShow !== undefined;
         }
-        onHiddenChanged() {
-            if (this.hidden && this.state !== DrawerState.closed) {
-                this.state = DrawerState.closed;
-            }
-            else if (!this.hidden && this.state === DrawerState.closed) {
-                this.state = DrawerState.opened;
+        /**
+         * Opens the drawer
+         * @returns Promise that is resolved when the drawer finishes closing. The value of the resolved
+         * Promise is the reason value passed to the close() method, or UserDismissed if the drawer was
+         * closed via the ESC key.
+         */
+        async show() {
+            if (this.open) {
+                throw new Error('Drawer is already open');
             }
+            this.openDialog();
+            return new Promise((resolve, _reject) => {
+                this.resolveShow = resolve;
+            });
         }
-        onLocationChanged() {
-            this.cancelCurrentAnimation();
-        }
-        onStateChanged() {
-            if (this.isConnected) {
-                this.cancelCurrentAnimation();
-                switch (this.state) {
-                    case DrawerState.opening:
-                        this.animateOpening();
-                        this.hidden = false;
-                        break;
-                    case DrawerState.opened:
-                        this.hidden = false;
-                        break;
-                    case DrawerState.closing:
-                        this.hidden = false;
-                        this.animateClosing();
-                        break;
-                    case DrawerState.closed:
-                        this.hidden = true;
-                        break;
-                    default:
-                        throw new Error('Unsupported state value. Expected: opening/opened/closing/closed');
-                }
-                this.$emit('state-change');
+        /**
+         * Closes the drawer
+         * @param reason An optional value indicating how/why the drawer was closed.
+         */
+        close(reason) {
+            if (!this.open || this.closing) {
+                throw new Error('Drawer is not open or already closing');
             }
+            this.closeReason = reason;
+            this.closeDialog();
         }
-        updateAnimationDuration() {
-            const disableAnimations = prefersReducedMotionMediaQuery.matches;
-            if (disableAnimations) {
-                this.animationDurationMilliseconds = animationDurationWhenDisabledMilliseconds;
-            }
-            else {
-                // string ends in 's' unit specifier
-                const secondsString = largeDelay.getValueFor(this);
-                const secondsNumber = parseFloat(secondsString);
-                this.animationDurationMilliseconds = 1000 * secondsNumber;
+        /**
+         * @internal
+         */
+        cancelHandler(event) {
+            // Allowing the dialog to close itself bypasses the drawer's animation logic, so we
+            // should close the drawer ourselves when preventDismiss is false.
+            event.preventDefault();
+            if (!this.preventDismiss) {
+                this.closeReason = UserDismissed;
+                this.closeDialog();
             }
+            return true;
         }
-        animateOpening() {
-            this.animateOpenClose(true);
-        }
-        animateClosing() {
-            if (!this.hidden) {
-                this.animateOpenClose(false);
-            }
-            else {
-                this.state = DrawerState.closed;
+        openDialog() {
+            this.dialog.showModal();
+            this.triggerAnimation();
+        }
+        closeDialog() {
+            this.closing = true;
+            this.triggerAnimation();
+        }
+        triggerAnimation() {
+            this.dialog.classList.add('animating');
+            if (this.closing) {
+                this.dialog.classList.add('closing');
+            }
+            this.dialog.addEventListener(eventAnimationEnd, this.animationEndHandlerFunction);
+        }
+        animationEndHandler() {
+            this.dialog.removeEventListener(eventAnimationEnd, this.animationEndHandlerFunction);
+            this.dialog.classList.remove('animating');
+            if (this.closing) {
+                this.dialog.classList.remove('closing');
+                this.dialog.close();
+                this.closing = false;
+                this.resolveShow(this.closeReason);
+                this.resolveShow = undefined;
             }
         }
-        animateOpenClose(drawerOpening) {
-            const options = {
-                ...(drawerOpening
-                    ? animationConfig.slideInOptions
-                    : animationConfig.slideOutOptions),
-                duration: this.animationDurationMilliseconds
-            };
-            const drawerKeyframes = this.location === DrawerLocation.right
-                ? animationConfig.slideRightKeyframes
-                : animationConfig.slideLeftKeyframes;
-            const dialogAnimation = new dist.AnimateTo(this.dialog, undefined, options);
-            dialogAnimation.addKeyframes(drawerKeyframes);
-            const animations = [dialogAnimation];
-            const overlay = this.shadowRoot?.querySelector('.overlay');
-            if (overlay) {
-                const overlayAnimation = new dist.AnimateTo(overlay, undefined, options);
-                overlayAnimation.addKeyframes(animationConfig.fadeOverlayKeyframes);
-                animations.push(overlayAnimation);
-            }
-            const animationGroup = new dist.AnimateGroup(animations);
-            animationGroup.onFinish = () => {
-                this.state = drawerOpening
-                    ? DrawerState.opened
-                    : DrawerState.closed;
-            };
-            this.animationGroup = animationGroup;
-            animationGroup.play();
-        }
-        cancelCurrentAnimation() {
-            this.animationGroup?.cancel();
-        }
     }
+    // We want the member to match the name of the constant
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    Drawer.UserDismissed = UserDismissed;
     __decorate([
         attr
     ], Drawer.prototype, "location", void 0);
-    __decorate([
-        attr
-    ], Drawer.prototype, "state", void 0);
     __decorate([
         attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
     ], Drawer.prototype, "preventDismiss", void 0);
+    applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: dialogTemplate,
+        template: template$4,
         styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());