@ni/nimble-components 12.0.2 → 14.0.0

package/dist/esm/dialog/index.d.ts

@@ -1,15 +1,11 @@
 import { ARIAGlobalStatesAndProperties, FoundationElement } from '@microsoft/fast-foundation';
+import { UserDismissed } from '../patterns/dialog/types';
+export { UserDismissed };
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-dialog': Dialog;
     }
 }
-/**
- * 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).
- */
-export declare const USER_DISMISSED: unique symbol;
-export declare type UserDismissed = typeof USER_DISMISSED;
 /**
  * This is a workaround for an incomplete definition of the native dialog element:
  * https://github.com/microsoft/TypeScript/issues/48267
@@ -23,19 +19,35 @@ export interface ExtendedDialog extends HTMLDialogElement {
  * A nimble-styled dialog.
  */
 export declare class Dialog<CloseReason = void> extends FoundationElement {
-    static readonly USER_DISMISSED: symbol;
+    static readonly UserDismissed: symbol;
     /**
      * @public
      * @description
      * Prevents dismissing the dialog via the Escape key
      */
     preventDismiss: boolean;
+    /**
+     * @public
+     * @description
+     * Hides the header of the dialog.
+     */
+    headerHidden: boolean;
+    /**
+     * @public
+     * @description
+     * Hides the footer of the dialog.
+     */
+    footerHidden: boolean;
     /**
      * The ref to the internal dialog element.
      *
      * @internal
      */
     readonly dialogElement: ExtendedDialog;
+    /** @internal */
+    footerIsEmpty: boolean;
+    /** @internal */
+    readonly slottedFooterElements?: HTMLElement[];
     /**
      * True if the dialog is open/showing, false otherwise
      */
@@ -43,7 +55,7 @@ export declare class Dialog<CloseReason = void> extends FoundationElement {
     private resolveShow?;
     /**
      * 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.
+     * @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.
      */
     show(): Promise<CloseReason | UserDismissed>;
     /**
@@ -51,6 +63,7 @@ export declare class Dialog<CloseReason = void> extends FoundationElement {
      * @param reason An optional value indicating how/why the dialog was closed.
      */
     close(reason: CloseReason): void;
+    slottedFooterElementsChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[] | undefined): void;
     /**
      * @internal
      */

package/dist/esm/dialog/index.js

@@ -1,13 +1,10 @@
 import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 import { applyMixins, ARIAGlobalStatesAndProperties, DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { UserDismissed } from '../patterns/dialog/types';
 import { styles } from './styles';
 import { template } from './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).
- */
-export const USER_DISMISSED = Symbol('user dismissed');
+export { UserDismissed };
 /**
  * A nimble-styled dialog.
  */
@@ -21,6 +18,20 @@ export class Dialog extends FoundationElement {
          * Prevents dismissing the dialog via the Escape key
          */
         this.preventDismiss = false;
+        /**
+         * @public
+         * @description
+         * Hides the header of the dialog.
+         */
+        this.headerHidden = false;
+        /**
+         * @public
+         * @description
+         * Hides the footer of the dialog.
+         */
+        this.footerHidden = false;
+        /** @internal */
+        this.footerIsEmpty = true;
     }
     /**
      * True if the dialog is open/showing, false otherwise
@@ -30,7 +41,7 @@ export class Dialog extends FoundationElement {
     }
     /**
      * 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.
+     * @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.
      */
     async show() {
         if (this.open) {
@@ -53,6 +64,9 @@ export class Dialog extends FoundationElement {
         this.resolveShow(reason);
         this.resolveShow = undefined;
     }
+    slottedFooterElementsChanged(_prev, next) {
+        this.footerIsEmpty = !next?.length;
+    }
     /**
      * @internal
      */
@@ -61,7 +75,7 @@ export class Dialog extends FoundationElement {
             event.preventDefault();
         }
         else {
-            this.resolveShow(USER_DISMISSED);
+            this.resolveShow(UserDismissed);
             this.resolveShow = undefined;
         }
         return true;
@@ -69,10 +83,22 @@ export class Dialog extends FoundationElement {
 }
 // We want the member to match the name of the constant
 // eslint-disable-next-line @typescript-eslint/naming-convention
-Dialog.USER_DISMISSED = USER_DISMISSED;
+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',

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EACX,6BAA6B,EAC7B,YAAY,EACZ,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkB,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAatE;;GAEG;AACH,mEAAmE;AACnE,MAAM,OAAO,MAA2B,SAAQ,iBAAiB;IAAjE;;QAKI;;;;WAIG;QAEI,mBAAc,GAAG,KAAK,CAAC;IAyDlC,CAAC;IAhDG;;OAEG;IACH,IAAW,IAAI;QACX,OAAO,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC;IAC1C,CAAC;IAID;;;OAGG;IACI,KAAK,CAAC,IAAI;QACb,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;SAC7C;QACD,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;QAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE;YACpC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;QAC/B,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,MAAmB;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;SACzC;QACD,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QAC3B,IAAI,CAAC,WAAY,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;IACjC,CAAC;IAED;;OAEG;IACI,aAAa,CAAC,KAAY;QAC7B,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;aAAM;YACH,IAAI,CAAC,WAAY,CAAC,cAAc,CAAC,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;SAChC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;;AAlED,uDAAuD;AACvD,gEAAgE;AACzC,qBAAc,GAAG,cAAc,CAAC;AAQvD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAC1B;AA6DlC,WAAW,CAAC,MAAM,EAAE,6BAA6B,CAAC,CAAC;AAEnD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;IAChC,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,MAAM;CACpB,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/dialog/styles.js

@@ -1,17 +1,105 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, borderWidth, popupBoxShadowColor, popupBorderColor } from '../theme-provider/design-tokens';
-import { modalBackdropColorThemeColor, modalBackdropColorThemeDark, modalBackdropColorThemeLight } from '../theme-provider/design-tokens-static';
+import { applicationBackgroundColor, standardPadding, actionRgbPartialColor, bodyFont, bodyFontColor, titlePlus1Font, titlePlus1FontColor, smallPadding, subtitleFont, subtitleFontColor } from '../theme-provider/design-tokens';
+import { modalBackdropColorThemeColorStatic, modalBackdropColorThemeDarkStatic, modalBackdropColorThemeLightStatic } from '../theme-provider/design-tokens-static';
 import { Theme } from '../theme-provider/types';
 import { themeBehavior } from '../utilities/style/theme';
 export const styles = 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;
+    }
+
+    dialog[open] {
+        display: flex;
+    }
+
+    header {
+        min-height: 48px;
+        padding: 24px 24px 0px 24px;
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        gap: ${smallPadding};
+    }
+
+    :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;
+    }
+
+    .title {
+        font: ${titlePlus1Font};
+        color: ${titlePlus1FontColor};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .subtitle {
+        font: ${subtitleFont};
+        color: ${subtitleFontColor};
+    }
+
+    section {
+        flex: auto;
+        overflow-y: auto;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        display: flex;
+        flex-direction: column;
+        gap: ${standardPadding};
+
+        ${
+/**
+ * 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;
+    }
+
+    footer {
+        border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);
+        padding: 24px;
+        flex: none;
+        display: flex;
+        justify-content: flex-end;
+        gap: ${standardPadding};
+    }
+
+    footer.empty {
+        padding: 0px;
+        height: 72px;
+        border-top: none;
+    }
+
+    :host([footer-hidden]) footer {
+        display: none;
     }
 `.withBehaviors(
 /*
@@ -20,15 +108,15 @@ export const styles = css `
  */
 themeBehavior(Theme.light, css `
             dialog::backdrop {
-                background: ${modalBackdropColorThemeLight};
+                background: ${modalBackdropColorThemeLightStatic};
             }
         `), themeBehavior(Theme.dark, css `
             dialog::backdrop {
-                background: ${modalBackdropColorThemeDark};
+                background: ${modalBackdropColorThemeDarkStatic};
             }
         `), themeBehavior(Theme.color, css `
             dialog::backdrop {
-                background: ${modalBackdropColorThemeColor};
+                background: ${modalBackdropColorThemeColorStatic};
             }
         `));
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/dialog/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,mBAAmB,EACnB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACH,4BAA4B,EAC5B,2BAA2B,EAC3B,4BAA4B,EAC/B,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,MAAM,CAAC;;;4BAGO,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;kCACrB,mBAAmB;;;CAGpD,CAAC,aAAa;AACX;;;GAGG;AACH,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,4BAA4B;;SAEjD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,2BAA2B;;SAEhD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,4BAA4B;;SAEjD,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/dialog/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,eAAe,EACf,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACpB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACH,kCAAkC,EAClC,iCAAiC,EACjC,kCAAkC,EACrC,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,MAAM,CAAC;;;;4BAIO,0BAA0B;;;;;;;;;;;;;;;;;;eAkBvC,YAAY;;;;UAIjB;AACE;;;;GAIG;AACH,EACJ;;;;;;;;;;;;;gBAaQ,cAAc;iBACb,mBAAmB;;;;;;;gBAOpB,YAAY;iBACX,iBAAiB;;;;;;gBAMlB,QAAQ;iBACP,aAAa;;;eAGf,eAAe;;UAEpB;AACE;;;;;GAKG;AACH,EACJ;;;;;;qCAM6B,qBAAqB;;;;;eAK3C,eAAe;;;;;;;;;;;;CAY7B,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/dialog/template.js

@@ -1,13 +1,29 @@
-import { html, ref } from '@microsoft/fast-element';
+import { html, ref, slotted } from '@microsoft/fast-element';
 export const template = html `
     <template>
         <dialog
             ${ref('dialogElement')}
-            role="alertdialog"
-            aria-label="${x => x.ariaLabel}"
+            role="dialog"
             @cancel="${(x, c) => x.cancelHandler(c.event)}"
+            aria-labelledby="header"
         >
-            <slot></slot>
+            <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>
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/dialog/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAQ;;;cAGtB,GAAG,CAAC,eAAe,CAAC;;0BAER,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;CAKxD,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/dialog/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAG7D,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAQ;;;cAGtB,GAAG,CAAC,eAAe,CAAC;;uBAEX,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;;;;;;;;;;6BAc5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;;;sBAG5C,OAAO,CAAC,EAAE,QAAQ,EAAE,uBAAuB,EAAE,CAAC;;;;;CAKnE,CAAC"}

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

@@ -1,48 +1,49 @@
-import { Dialog as FoundationDialog } from '@microsoft/fast-foundation';
-import { DrawerLocation, DrawerState } from './types';
+import { ARIAGlobalStatesAndProperties, FoundationElement } from '@microsoft/fast-foundation';
+import { UserDismissed } from '../patterns/dialog/types';
+import { DrawerLocation } from './types';
+export { UserDismissed };
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-drawer': Drawer;
     }
 }
 /**
- * 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 declare class Drawer extends FoundationDialog {
+export declare class Drawer<CloseReason = void> extends FoundationElement {
+    static readonly UserDismissed: symbol;
     location: DrawerLocation;
-    state: DrawerState;
+    preventDismiss: boolean;
+    dialog: HTMLDialogElement;
+    private closing;
+    private resolveShow?;
+    private closeReason;
     /**
-     * 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
+     * True if the drawer is open, opening, or closing. Otherwise, false.
      */
-    preventDismiss: boolean;
-    private readonly propertiesToWatch;
-    private propertyChangeNotifier?;
-    private animationDurationMilliseconds;
-    private animationGroup?;
-    private animationsEnabledChangedHandler?;
-    private propertyChangeSubscriber?;
-    /** @internal */
-    connectedCallback(): void;
-    /** @internal */
-    disconnectedCallback(): void;
-    show(): void;
-    hide(): void;
+    get open(): boolean;
+    /**
+     * 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.
+     */
+    show(): Promise<CloseReason | UserDismissed>;
+    /**
+     * Closes the drawer
+     * @param reason An optional value indicating how/why the drawer was closed.
+     */
+    close(reason: CloseReason): void;
     /**
-     * Handler for overlay clicks (user-initiated dismiss requests) only.
      * @internal
      */
-    dismiss(): void;
-    private onPropertyChange;
-    private onHiddenChanged;
-    private onLocationChanged;
-    private onStateChanged;
-    private updateAnimationDuration;
-    private animateOpening;
-    private animateClosing;
-    private animateOpenClose;
-    private cancelCurrentAnimation;
+    cancelHandler(event: Event): boolean;
+    private readonly animationEndHandlerFunction;
+    private openDialog;
+    private closeDialog;
+    private triggerAnimation;
+    private animationEndHandler;
+}
+export interface Drawer extends ARIAGlobalStatesAndProperties {
 }