@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.30

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

@@ -7,18 +7,19 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  *
  * @extends FASTElement
  *
- * @attr {DrawerType} type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
- * @attr {DrawerPosition} position - Sets the position of the drawer (start/end).
- * @attr {DrawerSize} size - Sets the size of the drawer (small/medium/large).
- * @attr {string} ariaDescribedby - The ID of the element that describes the drawer.
- * @attr {string} ariaLabelledby - The ID of the element that labels the drawer.
+ * @attr type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
+ * @attr position - Sets the position of the drawer (start/end).
+ * @attr size - Sets the size of the drawer (small/medium/large).
+ * @attr ariaDescribedby - The ID of the element that describes the drawer.
+ * @attr ariaLabelledby - The ID of the element that labels the drawer.
  *
  * @csspart dialog - The dialog element of the drawer.
+ * @cssprop --drawer-width - Sets the width of the drawer to a custom value (e.g., 300px).
  *
  * @slot - Default slot for the content of the drawer.
  *
- * @fires toggle - Event emitted after the dialog's open state changes.
- * @fires beforetoggle - Event emitted before the dialog's open state changes.
+ * @fires { ToggleEvent } toggle - Event emitted after the dialog's open state changes.
+ * @fires { ToggleEvent } beforetoggle - Event emitted before the dialog's open state changes.
  *
  * @method show - Method to show the drawer.
  * @method hide - Method to hide the drawer.
@@ -28,34 +29,35 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
  *
  * @summary A component that provides a drawer for displaying content in a side panel.
- *
- * @tag fluent-drawer
  */
 export declare class Drawer extends FASTElement {
-    protected roleAttrObserver: MutationObserver;
     /**
-     * @public
      * Determines whether the drawer should be displayed as modal or non-modal
      * When rendered as a modal, an overlay is applied over the rest of the view.
+     *
+     * @public
      */
     type: DrawerType;
-    protected typeChanged(): void;
     /**
-     * @public
      * The ID of the element that labels the drawer.
+     *
+     * @public
      */
     ariaLabelledby?: string;
     /**
-     * @public
      * The ID of the element that describes the drawer.
+     *
+     * @public
      */
     ariaDescribedby?: string;
-    /**""
+    /**
+     * Sets the position of the drawer (start/end).
+     *
      * @public
      * @defaultValue start
-     * Sets the position of the drawer (start/end).
      */
     position: DrawerPosition;
+    role: string | null;
     /**
      * @public
      * @defaultValue medium
@@ -63,34 +65,71 @@ export declare class Drawer extends FASTElement {
      */
     size: DrawerSize;
     /**
-     * @public
      * The dialog element.
+     *
+     * @public
      */
     dialog: HTMLDialogElement;
-    /** @internal */
+    /**
+     * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
+     * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogDescribedby(): string | undefined;
+    /**
+     * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
+     * ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabel(): string | null | undefined;
+    /**
+     * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
+     * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabelledby(): string | undefined;
+    /**
+     * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
+     * the modal state will be true, otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogModal(): boolean | undefined;
+    /**
+     * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
+     * be 'alertdialog', otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogRole(): string | null;
     connectedCallback(): void;
-    /** @internal */
-    disconnectedCallback(): void;
     /**
-     * @public
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     emitToggle: () => void;
     /**
-     * @public
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     emitBeforeToggle: () => void;
     /**
-     * @public
      * Method to show the drawer
+     *
+     * @public
      */
     show(): void;
     /**
-     * @public
      * Method to hide the drawer
+     *
+     * @public
      */
     hide(): void;
     /**
@@ -101,10 +140,9 @@ export declare class Drawer extends FASTElement {
      */
     clickHandler(event: Event): boolean;
     /**
-     * @public
      * Handles cancel events on the drawer.
+     *
+     * @public
      */
     cancelHandler(): void;
-    protected observeRoleAttr(): void;
-    protected updateDialogRole(): void;
 }

package/dist/esm/drawer/drawer.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-drawer element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/drawer/drawer.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './drawer.options.js';
+/**
+ * The async definition configuration for the fluent-drawer element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=drawer.definition-async.js.map

package/dist/esm/drawer/drawer.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.definition-async.js","sourceRoot":"","sources":["../../../src/drawer/drawer.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

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

@@ -1,8 +1,7 @@
-import { Drawer } from './drawer.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
+ * The definition for the `<fluent-drawer>` element.
  *
  * @public
- * @remarks
- * HTML Element: <fluent-drawer>
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Drawer>;
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/drawer/drawer.definition.js

@@ -1,16 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { Drawer } from './drawer.js';
+import { tagName } from './drawer.options.js';
 import { styles } from './drawer.styles.js';
 import { template } from './drawer.template.js';
 /**
+ * The definition for the `<fluent-drawer>` element.
  *
  * @public
- * @remarks
- * HTML Element: <fluent-drawer>
  */
-export const definition = Drawer.compose({
-    name: `${FluentDesignSystem.prefix}-drawer`,
-    template,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-});
+    template,
+};
 //# sourceMappingURL=drawer.definition.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.definition.js","sourceRoot":"","sources":["../../../src/drawer/drawer.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"drawer.definition.js","sourceRoot":"","sources":["../../../src/drawer/drawer.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}

package/dist/esm/drawer/drawer.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { attr, FASTElement, observable, Updates, volatile } from '@microsoft/fast-element';
 import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
 /**
  * A Drawer component that allows content to be displayed in a side panel. It can be rendered as modal or non-modal.
@@ -8,18 +8,19 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  *
  * @extends FASTElement
  *
- * @attr {DrawerType} type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
- * @attr {DrawerPosition} position - Sets the position of the drawer (start/end).
- * @attr {DrawerSize} size - Sets the size of the drawer (small/medium/large).
- * @attr {string} ariaDescribedby - The ID of the element that describes the drawer.
- * @attr {string} ariaLabelledby - The ID of the element that labels the drawer.
+ * @attr type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
+ * @attr position - Sets the position of the drawer (start/end).
+ * @attr size - Sets the size of the drawer (small/medium/large).
+ * @attr ariaDescribedby - The ID of the element that describes the drawer.
+ * @attr ariaLabelledby - The ID of the element that labels the drawer.
  *
  * @csspart dialog - The dialog element of the drawer.
+ * @cssprop --drawer-width - Sets the width of the drawer to a custom value (e.g., 300px).
  *
  * @slot - Default slot for the content of the drawer.
  *
- * @fires toggle - Event emitted after the dialog's open state changes.
- * @fires beforetoggle - Event emitted before the dialog's open state changes.
+ * @fires { ToggleEvent } toggle - Event emitted after the dialog's open state changes.
+ * @fires { ToggleEvent } beforetoggle - Event emitted before the dialog's open state changes.
  *
  * @method show - Method to show the drawer.
  * @method hide - Method to hide the drawer.
@@ -29,22 +30,15 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
  *
  * @summary A component that provides a drawer for displaying content in a side panel.
- *
- * @tag fluent-drawer
  */
 export class Drawer extends FASTElement {
     constructor() {
         super(...arguments);
         /**
-         * @public
-         * Determines whether the drawer should be displayed as modal or non-modal
-         * When rendered as a modal, an overlay is applied over the rest of the view.
-         */
-        this.type = DrawerType.modal;
-        /**""
+         * Sets the position of the drawer (start/end).
+         *
          * @public
          * @defaultValue start
-         * Sets the position of the drawer (start/end).
          */
         this.position = DrawerPosition.start;
         /**
@@ -54,9 +48,10 @@ export class Drawer extends FASTElement {
          */
         this.size = DrawerSize.medium;
         /**
-         * @public
          * Method to emit an event after the dialog's open state changes
          * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+         *
+         * @public
          */
         this.emitToggle = () => {
             this.$emit('toggle', {
@@ -65,9 +60,10 @@ export class Drawer extends FASTElement {
             });
         };
         /**
-         * @public
          * Method to emit an event before the dialog's open state changes
          * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+         *
+         * @public
          */
         this.emitBeforeToggle = () => {
             this.$emit('beforetoggle', {
@@ -76,32 +72,72 @@ export class Drawer extends FASTElement {
             });
         };
     }
-    typeChanged() {
-        if (!this.dialog) {
-            return;
+    /**
+     * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
+     * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogDescribedby() {
+        if (this.dialog) {
+            return this.ariaDescribedby;
+        }
+    }
+    /**
+     * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
+     * ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabel() {
+        if (this.dialog) {
+            return this.ariaLabel;
+        }
+    }
+    /**
+     * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
+     * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
+     *
+     * @internal
+     */
+    get dialogLabelledby() {
+        if (this.dialog) {
+            return this.ariaLabelledby;
         }
-        this.updateDialogRole();
-        if (this.type === DrawerType.modal) {
-            this.dialog.setAttribute('aria-modal', 'true');
+    }
+    /**
+     * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
+     * the modal state will be true, otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogModal() {
+        if (this.dialog && this.type === DrawerType.modal) {
+            return true;
         }
-        else {
-            this.dialog.removeAttribute('aria-modal');
+    }
+    /**
+     * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
+     * be 'alertdialog', otherwise it will be undefined.
+     *
+     * @internal
+     */
+    get dialogRole() {
+        if (this.dialog && this.type === DrawerType.modal) {
+            return 'dialog';
         }
+        return this.role;
     }
-    /** @internal */
     connectedCallback() {
         super.connectedCallback();
-        this.typeChanged();
-        this.observeRoleAttr();
-    }
-    /** @internal */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.roleAttrObserver.disconnect();
+        Updates.enqueue(() => {
+            this.type = this.type ?? DrawerType.modal;
+        });
     }
     /**
-     * @public
      * Method to show the drawer
+     *
+     * @public
      */
     show() {
         Updates.enqueue(() => {
@@ -116,8 +152,9 @@ export class Drawer extends FASTElement {
         });
     }
     /**
-     * @public
      * Method to hide the drawer
+     *
+     * @public
      */
     hide() {
         this.emitBeforeToggle();
@@ -131,38 +168,19 @@ export class Drawer extends FASTElement {
      * Handles click events on the drawer.
      */
     clickHandler(event) {
-        event.preventDefault();
         if (this.dialog.open && event.target === this.dialog) {
             this.hide();
         }
         return true;
     }
     /**
-     * @public
      * Handles cancel events on the drawer.
+     *
+     * @public
      */
     cancelHandler() {
         this.hide();
     }
-    observeRoleAttr() {
-        if (this.roleAttrObserver) {
-            return;
-        }
-        this.roleAttrObserver = new MutationObserver(() => {
-            this.updateDialogRole();
-        });
-        this.roleAttrObserver.observe(this, {
-            attributes: true,
-            attributeFilter: ['role'],
-        });
-    }
-    updateDialogRole() {
-        console.log(this.role);
-        if (!this.dialog) {
-            return;
-        }
-        this.dialog.role = this.type === DrawerType.modal ? 'dialog' : this.role;
-    }
 }
 __decorate([
     attr
@@ -176,10 +194,28 @@ __decorate([
 __decorate([
     attr
 ], Drawer.prototype, "position", void 0);
+__decorate([
+    observable
+], Drawer.prototype, "role", void 0);
 __decorate([
     attr({ attribute: 'size' })
 ], Drawer.prototype, "size", void 0);
 __decorate([
     observable
 ], Drawer.prototype, "dialog", void 0);
+__decorate([
+    volatile
+], Drawer.prototype, "dialogDescribedby", null);
+__decorate([
+    volatile
+], Drawer.prototype, "dialogLabel", null);
+__decorate([
+    volatile
+], Drawer.prototype, "dialogLabelledby", null);
+__decorate([
+    volatile
+], Drawer.prototype, "dialogModal", null);
+__decorate([
+    volatile
+], Drawer.prototype, "dialogRole", null);
 //# sourceMappingURL=drawer.js.map

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

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

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

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '../utils/index.js';
+import type { ValuesOf } from '../utils/typings.js';
 /**
  * A drawer can be positioned on the left or right side of the viewport.
  */
@@ -38,3 +38,9 @@ export declare const DrawerType: {
  * @public
  */
 export type DrawerType = ValuesOf<typeof DrawerType>;
+/**
+ * The tag name for the drawer element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-drawer";

package/dist/esm/drawer/drawer.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * A drawer can be positioned on the left or right side of the viewport.
  */
@@ -22,4 +23,10 @@ export const DrawerType = {
     modal: 'modal',
     inline: 'inline',
 };
+/**
+ * The tag name for the drawer element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-drawer`;
 //# sourceMappingURL=drawer.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.options.js","sourceRoot":"","sources":["../../../src/drawer/drawer.options.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,KAAK;CACF,CAAC;AAQX;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC;AAQX;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC"}
+{"version":3,"file":"drawer.options.js","sourceRoot":"","sources":["../../../src/drawer/drawer.options.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,KAAK;CACF,CAAC;AAQX;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC;AAQX;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,SAAkB,CAAC"}

package/dist/esm/drawer/drawer.styles.css

@@ -0,0 +1,133 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: block;
+}
+
+:host {
+  --dialog-backdrop: var(--colorBackgroundOverlay);
+}
+
+:host([type='non-modal']) dialog[open]::backdrop {
+  display: none;
+}
+
+:host([type='non-modal']) dialog {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+}
+
+:host([type='inline']) {
+  height: 100%;
+  width: fit-content;
+}
+
+:host([type='inline']) dialog[open] {
+  box-shadow: none;
+  position: relative;
+}
+
+:host([size='small']) dialog {
+  width: 320px;
+  max-width: 320px;
+}
+
+:host([size='large']) dialog {
+  width: 940px;
+  max-width: 940px;
+}
+
+:host([size='full']) dialog {
+  width: 100%;
+  max-width: 100%;
+}
+
+:host([position='end']) dialog {
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+}
+
+dialog {
+  background: var(--colorNeutralBackground1);
+  border-radius: 0;
+  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+  border-inline-end-color: var(--colorTransparentStroke);
+  border-inline-start-color: var(--drawer-separator, var(--colorTransparentStroke));
+  box-shadow: var(--shadow64);
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground1);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  height: 100%;
+  line-height: var(--lineHeightBase300);
+  margin-inline-end: auto;
+  margin-inline-start: 0;
+  max-height: 100vh;
+  max-width: calc(100vw - var(--spacingHorizontalXXL));
+  outline: none;
+  padding: 0;
+  bottom: 0;
+  top: 0;
+  width: var(--drawer-width, 592px);
+  z-index: var(--drawer-elevation, 1000);
+}
+
+dialog::backdrop {
+  background: var(--dialog-backdrop);
+}
+
+@layer animations {
+  /* Disable animations for reduced motion */
+  @media (prefers-reduced-motion: no-preference) {
+    dialog {
+      transition: display allow-discrete, opacity, overlay allow-discrete, transform;
+      transition-duration: var(--durationGentle);
+      transition-timing-function: var(--curveDecelerateMid);
+    }
+
+    /* Exit styles for dialog */
+    :host dialog:not([open]) {
+      transform: translateX(-100%);
+      transition-timing-function: var(--curveAccelerateMid);
+    }
+    :host([position='end']) dialog:not([open]) {
+      transform: translateX(100%);
+      transition-timing-function: var(--curveAccelerateMid);
+    }
+
+    dialog[open] {
+      transform: translateX(0);
+    }
+
+    dialog::backdrop {
+      transition: display allow-discrete, opacity, overlay allow-discrete, scale;
+      transition-duration: var(--durationGentle);
+      transition-timing-function: var(--curveDecelerateMid);
+      background: var(--dialog-backdrop, var(--colorBackgroundOverlay));
+      opacity: 0;
+    }
+
+    dialog[open]::backdrop {
+      opacity: 1;
+    }
+
+    dialog::backdrop {
+      transition-timing-function: var(--curveLinear);
+    }
+  }
+
+  @starting-style {
+    dialog[open] {
+      transform: translateX(-100%);
+    }
+    :host([position='end']) dialog[open] {
+      transform: translateX(100%);
+    }
+    dialog[open]::backdrop {
+      opacity: 0;
+    }
+  }
+}