@ni/nimble-components 12.0.2 → 14.0.0

package/dist/esm/drawer/index.js

@@ -1,201 +1,107 @@
 import { __decorate } from "tslib";
-import { AnimateGroup, AnimateTo } from '@microsoft/fast-animation';
-import { attr, Observable } from '@microsoft/fast-element';
-import { DesignSystem, Dialog as FoundationDialog, dialogTemplate as template } from '@microsoft/fast-foundation';
-import { largeDelay } from '../theme-provider/design-tokens';
-import { prefersReducedMotionMediaQuery } from '../utilities/style/prefers-reduced-motion';
-import { animationConfig } from './animations';
+import { attr } from '@microsoft/fast-element';
+import { applyMixins, ARIAGlobalStatesAndProperties, DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { eventAnimationEnd } from '@microsoft/fast-web-utilities';
+import { UserDismissed } from '../patterns/dialog/types';
 import { styles } from './styles';
-import { DrawerLocation, DrawerState } from './types';
-const animationDurationWhenDisabledMilliseconds = 0.001;
+import { template } from './template';
+import { DrawerLocation } from './types';
+export { UserDismissed };
 /**
- * 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.
  */
-export class Drawer extends FoundationDialog {
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+export 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();
-        }
+    get open() {
+        return this.resolveShow !== undefined;
     }
-    onPropertyChange(propertyName) {
-        switch (propertyName) {
-            case 'hidden':
-                this.onHiddenChanged();
-                break;
-            case 'location':
-                this.onLocationChanged();
-                break;
-            case 'state':
-                this.onStateChanged();
-                break;
-            default:
-                break;
+    /**
+     * 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;
+        });
     }
-    onHiddenChanged() {
-        if (this.hidden && this.state !== DrawerState.closed) {
-            this.state = DrawerState.closed;
-        }
-        else if (!this.hidden && this.state === DrawerState.closed) {
-            this.state = DrawerState.opened;
+    /**
+     * 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();
     }
-    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');
+    /**
+     * @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;
     }
-    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;
-        }
+    openDialog() {
+        this.dialog.showModal();
+        this.triggerAnimation();
     }
-    animateOpening() {
-        this.animateOpenClose(true);
+    closeDialog() {
+        this.closing = true;
+        this.triggerAnimation();
     }
-    animateClosing() {
-        if (!this.hidden) {
-            this.animateOpenClose(false);
-        }
-        else {
-            this.state = DrawerState.closed;
+    triggerAnimation() {
+        this.dialog.classList.add('animating');
+        if (this.closing) {
+            this.dialog.classList.add('closing');
         }
+        this.dialog.addEventListener(eventAnimationEnd, this.animationEndHandlerFunction);
     }
-    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 AnimateTo(this.dialog, undefined, options);
-        dialogAnimation.addKeyframes(drawerKeyframes);
-        const animations = [dialogAnimation];
-        const overlay = this.shadowRoot?.querySelector('.overlay');
-        if (overlay) {
-            const overlayAnimation = new AnimateTo(overlay, undefined, options);
-            overlayAnimation.addKeyframes(animationConfig.fadeOverlayKeyframes);
-            animations.push(overlayAnimation);
+    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;
         }
-        const animationGroup = new 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,

package/dist/esm/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/drawer/styles.js

@@ -1,84 +1,118 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, bodyFont, bodyFontColor, borderWidth, popupBorderColor, popupBoxShadowColor, standardPadding, titlePlus1Font, drawerWidth, modalBackdropColor } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, borderWidth, popupBorderColor, popupBoxShadowColor, standardPadding, titlePlus1Font, drawerWidth, largeDelay } from '../theme-provider/design-tokens';
+import { modalBackdropColorThemeColorStatic, modalBackdropColorThemeDarkStatic, modalBackdropColorThemeLightStatic, largeDelayStatic } from '../theme-provider/design-tokens-static';
+import { Theme } from '../theme-provider/types';
+import { themeBehavior } from '../utilities/style/theme';
 export const styles = 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;
     }
 
-    :host([location='right']) .control {
+    @keyframes ni-private-drawer-slide-in-right-keyframes {
+        0% {
+            transform: translate(100%);
+        }
+        100% {
+            transform: translate(0%);
+        }
+    }
+
+    :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;
+        }
     }
 
     ${
@@ -106,5 +140,22 @@ export const styles = css `
         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};
+            }
+        `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/drawer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,WAAW,EACX,kBAAkB,EACrB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;gBASN,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgCxB,CAAA,8DAA+D,EAAE;;;;sBAIjD,kBAAkB;;;;;;;;;;;;;iBAavB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;wBAU9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;;gBAElB,cAAc;;;;mBAIX,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,WAAW,EACX,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACH,kCAAkC,EAClC,iCAAiC,EACjC,kCAAkC,EAClC,gBAAgB,EACnB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;gBAON,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDA8B2B,gBAAgB;;;;;;;;;;;;;iBAaxD,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;wBAa9B,WAAW,UAAU,mBAAmB;kCAC9B,mBAAmB;;;;+DAIU,UAAU;;;;;;;;;;;;;;;;;;;uBAmBlD,WAAW,UAAU,mBAAmB;mCAC5B,mBAAmB;;;;gEAIU,UAAU;;;;;;;;;;;;;;;MAepE;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;;gBAElB,cAAc;;;;mBAIX,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC,aAAa;AACX;;;GAGG;AACH,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,iCAAiC;;SAEtD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,kCAAkC;;SAEvD,CACJ,CACJ,CAAC"}

package/dist/esm/drawer/template.d.ts

@@ -0,0 +1,2 @@
+import type { Drawer } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Drawer<void>, any>;

package/dist/esm/drawer/template.js

@@ -0,0 +1,13 @@
+import { html, ref } from '@microsoft/fast-element';
+export const template = html `
+    <dialog
+        ${ref('dialog')}
+        aria-label="${x => x.ariaLabel}"
+        @cancel="${(x, c) => x.cancelHandler(c.event)}"
+    >
+        <div class="dialog-contents">
+            <slot></slot>
+        </div>
+    </dialog>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/drawer/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/drawer/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAQ;;UAE1B,GAAG,CAAC,QAAQ,CAAC;sBACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;mBACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;;CAMpD,CAAC"}

package/dist/esm/drawer/types.d.ts

@@ -3,10 +3,3 @@ export declare const DrawerLocation: {
     readonly right: "right";
 };
 export declare type DrawerLocation = typeof DrawerLocation[keyof typeof DrawerLocation];
-export declare const DrawerState: {
-    readonly opening: "opening";
-    readonly opened: "opened";
-    readonly closing: "closing";
-    readonly closed: "closed";
-};
-export declare type DrawerState = typeof DrawerState[keyof typeof DrawerState];

package/dist/esm/drawer/types.js

@@ -2,10 +2,4 @@ export const DrawerLocation = {
     left: 'left',
     right: 'right'
 };
-export const DrawerState = {
-    opening: 'opening',
-    opened: 'opened',
-    closing: 'closing',
-    closed: 'closed'
-};
 //# sourceMappingURL=types.js.map

package/dist/esm/drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/drawer/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACR,CAAC;AAGX,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACV,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/drawer/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACR,CAAC"}

package/dist/esm/patterns/dialog/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 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).
+ */
+export declare const UserDismissed: unique symbol;
+export declare type UserDismissed = typeof UserDismissed;

package/dist/esm/patterns/dialog/types.js

@@ -0,0 +1,6 @@
+/**
+ * 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).
+ */
+export const UserDismissed = Symbol('user dismissed');
+//# sourceMappingURL=types.js.map

package/dist/esm/patterns/dialog/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/dialog/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAkB,MAAM,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/esm/theme-provider/design-tokens-static.d.ts

@@ -1,3 +1,10 @@
-export declare const modalBackdropColorThemeLight: string;
-export declare const modalBackdropColorThemeDark: string;
-export declare const modalBackdropColorThemeColor: string;
+/**
+ * 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
+ */
+export declare const modalBackdropColorThemeLightStatic: string;
+export declare const modalBackdropColorThemeDarkStatic: string;
+export declare const modalBackdropColorThemeColorStatic: string;
+export declare const largeDelayStatic: string;

package/dist/esm/theme-provider/design-tokens-static.js

@@ -1,6 +1,13 @@
-import { Black } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { Black, LargeDelay } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { hexToRgbaCssColor } from '../utilities/style/colors';
-export const modalBackdropColorThemeLight = hexToRgbaCssColor(Black, 0.3);
-export const modalBackdropColorThemeDark = hexToRgbaCssColor(Black, 0.6);
-export 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
+ */
+export const modalBackdropColorThemeLightStatic = hexToRgbaCssColor(Black, 0.3);
+export const modalBackdropColorThemeDarkStatic = hexToRgbaCssColor(Black, 0.6);
+export const modalBackdropColorThemeColorStatic = hexToRgbaCssColor(Black, 0.6);
+export const largeDelayStatic = LargeDelay;
 //# sourceMappingURL=design-tokens-static.js.map

package/dist/esm/theme-provider/design-tokens-static.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-tokens-static.js","sourceRoot":"","sources":["../../../src/theme-provider/design-tokens-static.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,4BAA4B,GAAG,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAC1E,MAAM,CAAC,MAAM,2BAA2B,GAAG,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,4BAA4B,GAAG,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC"}
+{"version":3,"file":"design-tokens-static.js","sourceRoot":"","sources":["../../../src/theme-provider/design-tokens-static.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,EACL,UAAU,EACb,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,kCAAkC,GAAG,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,iCAAiC,GAAG,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,kCAAkC,GAAG,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAEhF,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC"}

package/dist/esm/theme-provider/design-tokens.js

@@ -1,7 +1,7 @@
 import { DesignToken } from '@microsoft/fast-foundation';
 import hexRgb from 'hex-rgb';
 import { Black7, Black91, Black85, Black15, Black75, Black80, Black88, White, ForestGreen, DigitalGreenLight, Fail100LightUi, SmallDelay, MediumDelay, LargeDelay, Fail100DarkUi, Warning100LightUi, Warning100DarkUi, Pass100LightUi, Pass100DarkUi, BodyFamily, BodySize, BodyWeight, ControlLabel1Family, ControlLabel1Size, ControlLabel1Weight, GroupLabel1Family, GroupLabel1Size, GroupLabel1Weight, Headline2Size, Headline2Family, Headline2Weight, Headline1Size, Headline1Family, Headline1Weight, Title3Size, Title3Family, Title3Weight, Title2Size, Title2Family, Title2Weight, Title1Size, Title1Family, Title1Weight, Subtitle2Size, Subtitle2Family, Subtitle2Weight, Subtitle1Size, Subtitle1Family, Subtitle1Weight, LinkLightUiSize, LinkLightUiFamily, LinkLightUiWeight, PlaceholderSize, PlaceholderFamily, PlaceholderWeight, BodyEmphasizedSize, BodyEmphasizedFamily, BodyEmphasizedWeight, ButtonLabel1Size, ButtonLabel1Family, ButtonLabel1Weight, TooltipCaptionSize, TooltipCaptionFamily, TooltipCaptionWeight, ErrorLightUiSize, ErrorLightUiFamily, ErrorLightUiWeight, Headline2LineHeight, Headline1LineHeight, Title3LineHeight, Title2LineHeight, Title1LineHeight, Subtitle2LineHeight, Subtitle1LineHeight, LinkLineHeight, PlaceholderLineHeight, BodyEmphasizedLineHeight, BodyLineHeight, GroupLabel1LineHeight, ControlLabel1LineHeight, ButtonLabel1LineHeight, TooltipCaptionLineHeight, Information100LightUi, Information100DarkUi } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
-import { modalBackdropColorThemeColor, modalBackdropColorThemeDark, modalBackdropColorThemeLight } from './design-tokens-static';
+import { modalBackdropColorThemeColorStatic, modalBackdropColorThemeDarkStatic, modalBackdropColorThemeLightStatic } from './design-tokens-static';
 import { Theme } from './types';
 import { tokenNames, styleNameFromTokenName } from './design-token-names';
 import { theme } from '.';
@@ -141,13 +141,13 @@ function getFillDownColorForTheme(element) {
 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;
     }
 }
 //# sourceMappingURL=design-tokens.js.map