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

package/dist/esm/dialog/dialog.js

@@ -1,36 +1,25 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { attr, FASTElement, observable, Updates, volatile } from '@microsoft/fast-element';
 import { DialogType } from './dialog.options.js';
 /**
  * A Dialog Custom HTML Element.
  *
  * @tag fluent-dialog
  *
+ * @fires { ToggleEvent } toggle - Event emitted after the dialog's open state changes.
+ * @fires { ToggleEvent } beforetoggle - Event emitted before the dialog's open state changes.
+ * @slot - The default slot. {@link (DialogBody:class)} element recommended.
+ *
  * @public
  */
 export class Dialog extends FASTElement {
     constructor() {
         super(...arguments);
         /**
-         * @public
-         * The type of the dialog modal
-         */
-        this.type = DialogType.modal;
-        /**
-         * @public
-         * Method to emit an event before the dialog's open state changes
-         * HTML spec proposal: https://github.com/whatwg/html/issues/9733
-         */
-        this.emitBeforeToggle = () => {
-            this.$emit('beforetoggle', {
-                oldState: this.dialog.open ? 'open' : 'closed',
-                newState: this.dialog.open ? 'closed' : 'open',
-            });
-        };
-        /**
-         * @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', {
@@ -39,31 +28,83 @@ export class Dialog extends FASTElement {
             });
         };
     }
-    typeChanged(prev, next) {
-        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;
         }
-        if (next === DialogType.alert) {
-            this.dialog.setAttribute('role', 'alertdialog');
+    }
+    /**
+     * 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;
         }
-        else {
-            this.dialog.removeAttribute('role');
+    }
+    /**
+     * 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;
         }
-        if (next !== DialogType.nonModal) {
-            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 !== DialogType.nonModal) {
+            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 === DialogType.alert) {
+            return 'alertdialog';
         }
     }
-    /** @internal */
     connectedCallback() {
         super.connectedCallback();
-        this.typeChanged(undefined, this.type);
+        Updates.enqueue(() => {
+            this.type = this.type ?? DialogType.modal;
+        });
     }
     /**
+     * Method to emit an event before the dialog's open state changes
+     * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
      * @public
+     */
+    emitBeforeToggle() {
+        this.$emit('beforetoggle', {
+            oldState: this.dialog.open ? 'open' : 'closed',
+            newState: this.dialog.open ? 'closed' : 'open',
+        });
+    }
+    /**
      * Method to show the dialog
+     *
+     * @public
      */
     show() {
         Updates.enqueue(() => {
@@ -74,12 +115,17 @@ export class Dialog extends FASTElement {
             else if (this.type === DialogType.nonModal) {
                 this.dialog.show();
             }
+            // Using `autofocus` inside a `<dialog>` is implemented inconsistently
+            // across browsers, so artificially focusing here. See details:
+            // https://codepen.io/marchbox/pen/PwbRmXE
+            this.querySelector('[autofocus]')?.focus?.();
             this.emitToggle();
         });
     }
     /**
-     * @public
      * Method to hide the dialog
+     *
+     * @public
      */
     hide() {
         this.emitBeforeToggle();
@@ -87,8 +133,9 @@ export class Dialog extends FASTElement {
         this.emitToggle();
     }
     /**
-     * @public
      * Handles click events on the dialog overlay for light-dismiss
+     *
+     * @public
      * @param event - The click event
      * @returns boolean
      */
@@ -108,7 +155,25 @@ __decorate([
 __decorate([
     attr({ attribute: 'aria-labelledby' })
 ], Dialog.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: 'aria-label' })
+], Dialog.prototype, "ariaLabel", void 0);
 __decorate([
     attr
 ], Dialog.prototype, "type", void 0);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogDescribedby", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogLabel", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogLabelledby", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogModal", null);
+__decorate([
+    volatile
+], Dialog.prototype, "dialogRole", null);
 //# sourceMappingURL=dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAAvC;;QA+HE;;;;;WAKG;QACI,eAAU,GAAG,GAAS,EAAE;YAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACnB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;gBAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;aAC/C,CAAC,CAAC;QACL,CAAC,CAAC;IAgDJ,CAAC;IAjJC;;;;;OAKG;IAEH,IAAW,iBAAiB;QAC1B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,eAAe,CAAC;QAC9B,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,IAAW,WAAW;QACpB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,SAAS,CAAC;QACxB,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,IAAW,gBAAgB;QACzB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,cAAc,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,IAAW,WAAW;QACpB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,QAAQ,EAAE,CAAC;YACrD,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,IAAW,UAAU;QACnB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YAClD,OAAO,aAAa,CAAC;QACvB,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACI,gBAAgB;QACrB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;YACzB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;YAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;SAC/C,CAAC,CAAC;IACL,CAAC;IAeD;;;;OAIG;IACI,IAAI;QACT,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;gBACrE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;YAC1B,CAAC;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,QAAQ,EAAE,CAAC;gBAC7C,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACrB,CAAC;YACD,sEAAsE;YACtE,+DAA+D;YAC/D,0CAA0C;YACzC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC;YAC9D,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACI,IAAI;QACT,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACpB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;;;;;OAMG;IACI,YAAY,CAAC,KAAY;QAC9B,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;YACvF,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AAnLQ;IADN,UAAU;sCACuB;AAQ3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;+CACR;AAQzB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;8CACR;AAQxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;yCACD;AAQ1B;IADN,IAAI;oCACoB;AASzB;IADC,QAAQ;+CAKR;AASD;IADC,QAAQ;yCAKR;AASD;IADC,QAAQ;8CAKR;AASD;IADC,QAAQ;yCAKR;AASD;IADC,QAAQ;wCAKR"}

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

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '../utils/index.js';
+import type { ValuesOf } from '../utils/typings.js';
 import { Dialog } from './dialog.js';
 /**
  * Dialog modal type
@@ -19,3 +19,9 @@ export type DialogType = ValuesOf<typeof DialogType>;
  * @public
  */
 export declare function isDialog(element?: Node | null, tagName?: string): element is Dialog;
+/**
+ * The tag name for the dialog element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-dialog";

package/dist/esm/dialog/dialog.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * Dialog modal type
  * @public
@@ -21,4 +22,10 @@ export function isDialog(element, tagName = '-dialog') {
     }
     return element.tagName.toLowerCase().endsWith(tagName);
 }
+/**
+ * The tag name for the dialog element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-dialog`;
 //# sourceMappingURL=dialog.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.options.js","sourceRoot":"","sources":["../../../src/dialog/dialog.options.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,OAAO;CACN,CAAC;AAIX;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAC,OAAqB,EAAE,UAAkB,SAAS;IACzE,IAAI,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,OAAmB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACtE,CAAC"}
+{"version":3,"file":"dialog.options.js","sourceRoot":"","sources":["../../../src/dialog/dialog.options.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,OAAO;CACN,CAAC;AAIX;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAC,OAAqB,EAAE,UAAkB,SAAS;IACzE,IAAI,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,OAAmB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACtE,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,SAAkB,CAAC"}

package/dist/esm/dialog/dialog.styles.css

@@ -0,0 +1,84 @@
+@layer base {
+  :host {
+    --dialog-backdrop: var(--colorBackgroundOverlay);
+    --dialog-starting-scale: 0.85;
+  }
+
+  ::backdrop {
+    background: var(--dialog-backdrop, rgba(0, 0, 0, 0.4));
+  }
+
+  dialog {
+    background: var(--colorNeutralBackground1);
+    border-radius: var(--borderRadiusXLarge);
+    border: none;
+    box-shadow: var(--shadow64);
+    color: var(--colorNeutralForeground1);
+    max-height: 100vh;
+    padding: 0;
+    width: 100%;
+    max-width: 600px;
+  }
+
+  :host([type='non-modal']) dialog {
+    inset: 0;
+    z-index: 2;
+    overflow: auto;
+  }
+
+  @supports (max-height: 1dvh) {
+    dialog {
+      max-height: 100dvh;
+    }
+  }
+}
+
+@layer animations {
+  /* Disable animations for reduced motion */
+  @media (prefers-reduced-motion: no-preference) {
+    dialog,
+    ::backdrop {
+      transition: display allow-discrete, opacity, overlay allow-discrete, scale;
+      transition-duration: var(--durationGentle);
+      transition-timing-function: var(--curveDecelerateMid);
+      /* Set opacity to 0 when closed */
+      opacity: 0;
+    }
+    ::backdrop {
+      transition-timing-function: var(--curveLinear);
+    }
+
+    /* Set opacity to 1 when open */
+    [open],
+    [open]::backdrop {
+      opacity: 1;
+    }
+
+    /* Exit styles for dialog */
+    dialog:not([open]) {
+      /* Make small when leaving */
+      scale: var(--dialog-starting-scale);
+      /* Faster leaving the stage then entering */
+      transition-timing-function: var(--curveAccelerateMid);
+    }
+  }
+
+  @starting-style {
+    [open],
+    [open]::backdrop {
+      opacity: 0;
+    }
+
+    dialog {
+      scale: var(--dialog-starting-scale);
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  @layer base {
+    dialog {
+      border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+    }
+  }
+}

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

@@ -1,6 +1,5 @@
 import { css } from '@microsoft/fast-element';
 import { borderRadiusXLarge, colorBackgroundOverlay, colorNeutralBackground1, colorNeutralForeground1, colorTransparentStroke, curveAccelerateMid, curveDecelerateMid, curveLinear, durationGentle, shadow64, strokeWidthThin, } from '../theme/design-tokens.js';
-import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
 /** Dialog styles
  * @public
  */
@@ -29,7 +28,6 @@ export const styles = css `
 
     :host([type='non-modal']) dialog {
       inset: 0;
-      position: fixed;
       z-index: 2;
       overflow: auto;
     }
@@ -82,11 +80,13 @@ export const styles = css `
       }
     }
   }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
+
+  @media (forced-colors: active) {
     @layer base {
       dialog {
         border: ${strokeWidthThin} solid ${colorTransparentStroke};
       }
     }
-  `));
+  }
+`;
 //# sourceMappingURL=dialog.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AAEvG;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;2BAGE,sBAAsB;;;;;;;;;oBAS7B,uBAAuB;uBACpB,kBAAkB;;oBAErB,QAAQ;eACb,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;+BA2BP,cAAc;sCACP,kBAAkB;;;;;sCAKlB,WAAW;;;;;;;;;;;;;;sCAcX,kBAAkB;;;;;;;;;;;;;;;CAevD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;kBAGlB,eAAe,UAAU,sBAAsB;;;GAG9D,CAAC,CACH,CAAC"}
+{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;2BAGE,sBAAsB;;;;;;;;;oBAS7B,uBAAuB;uBACpB,kBAAkB;;oBAErB,QAAQ;eACb,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;+BA0BP,cAAc;sCACP,kBAAkB;;;;;sCAKlB,WAAW;;;;;;;;;;;;;;sCAcX,kBAAkB;;;;;;;;;;;;;;;;;;;kBAmBtC,eAAe,UAAU,sBAAsB;;;;CAIhE,CAAC"}

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

@@ -2,6 +2,11 @@ import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { Dialog } from './dialog.js';
 /**
  * Template for the Dialog component
+ *
+ * Note: The empty `<div tabindex="-1">` element above the `<slot>` element is
+ * for working around a dialog focus issue, learn more at
+ * https://github.com/microsoft/fluentui/pull/36278
+ *
  * @public
  */
 export declare const template: ElementViewTemplate<Dialog>;

package/dist/esm/dialog/dialog.template.html

@@ -0,0 +1,20 @@
+<f-template name="fluent-dialog" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <dialog
+      class="dialog"
+      part="dialog"
+      aria-modal="{{dialogModal}}"
+      aria-describedby="{{dialogDescribedby}}"
+      aria-labelledby="{{dialogLabelledby}}"
+      aria-label="{{dialogLabel}}"
+      role="{{dialogRole}}"
+      @click="{clickHandler($e)}"
+      @cancel="{hide()}"
+      f-ref="{dialog}"
+    >
+      <div tabindex="-1"></div>
+      <slot></slot>
+    </dialog>
+  </template>
+</f-template>

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

@@ -1,19 +1,27 @@
 import { html, ref } from '@microsoft/fast-element';
 /**
  * Template for the Dialog component
+ *
+ * Note: The empty `<div tabindex="-1">` element above the `<slot>` element is
+ * for working around a dialog focus issue, learn more at
+ * https://github.com/microsoft/fluentui/pull/36278
+ *
  * @public
  */
 export const template = html `
   <dialog
     class="dialog"
     part="dialog"
-    aria-describedby="${x => x.ariaDescribedby}"
-    aria-labelledby="${x => x.ariaLabelledby}"
-    aria-label="${x => x.ariaLabel}"
+    aria-modal="${x => x.dialogModal}"
+    aria-describedby="${x => x.dialogDescribedby}"
+    aria-labelledby="${x => x.dialogLabelledby}"
+    aria-label="${x => x.dialogLabel}"
+    role="${x => x.dialogRole}"
     @click="${(x, c) => x.clickHandler(c.event)}"
     @cancel="${x => x.hide()}"
     ${ref('dialog')}
   >
+    <div tabindex="-1"></div>
     <slot></slot>
   </dialog>
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAI9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;wBAIjC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;uBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;kBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;cACpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;CAIlB,CAAC"}
+{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;kBAIvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;wBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;uBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;kBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;YACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;;CAKlB,CAAC"}

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

@@ -3,3 +3,4 @@ export { DialogType, isDialog } from './dialog.options.js';
 export { definition as DialogDefinition } from './dialog.definition.js';
 export { template as DialogTemplate } from './dialog.template.js';
 export { styles as DialogStyles } from './dialog.styles.js';
+export { tagName as DialogTagName } from './dialog.options.js';

package/dist/esm/dialog/index.js

@@ -3,4 +3,5 @@ export { DialogType, isDialog } from './dialog.options.js';
 export { definition as DialogDefinition } from './dialog.definition.js';
 export { template as DialogTemplate } from './dialog.template.js';
 export { styles as DialogStyles } from './dialog.styles.js';
+export { tagName as DialogTagName } from './dialog.options.js';
 //# sourceMappingURL=index.js.map

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,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/dialog-body/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/dialog-body/define-async.js

@@ -0,0 +1,4 @@
+import { declarativeDefinition } from './dialog-body.definition-async.js';
+import { DialogBody } from './dialog-body.js';
+DialogBody.define(declarativeDefinition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/dialog-body/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/dialog-body/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,UAAU,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/dialog-body/define.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './dialog-body.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { DialogBody } from './dialog-body.js';
+DialogBody.define(definition);
 //# sourceMappingURL=define.js.map

package/dist/esm/dialog-body/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/dialog-body/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/dialog-body/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/dialog-body/dialog-body.bench.d.ts

@@ -1,3 +1,4 @@
+import './define.js';
 declare const itemRenderer: () => HTMLElement;
 export default itemRenderer;
 export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/dialog-body/dialog-body.bench.js

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './dialog-body.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const dialogBody = document.createElement('fluent-dialog-body');
     dialogBody.appendChild(document.createTextNode('DialogBody'));

package/dist/esm/dialog-body/dialog-body.bench.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-body.bench.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAChE,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;IAE9D,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"dialog-body.bench.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAChE,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;IAE9D,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/dialog-body/dialog-body.d.ts

@@ -4,6 +4,15 @@ import { FASTElement } from '@microsoft/fast-element';
  *
  * @tag fluent-dialog-body
  *
+ * @slot title - Content for the dialog title.
+ * @slot title-action - Content for actions shown near the title.
+ * @slot close - Content for the close action.
+ * @slot action - Content for footer actions.
+ * @slot - Default dialog body content.
+ * @csspart title - The title container.
+ * @csspart content - The content container.
+ * @csspart actions - The actions container.
+ *
  * @public
  * @extends FASTElement
  */

package/dist/esm/dialog-body/dialog-body.definition-async.d.ts

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-dialog-body>` 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 declarativeDefinition: PartialFASTElementDefinition;

package/dist/esm/dialog-body/dialog-body.definition-async.js

@@ -0,0 +1,17 @@
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './dialog-body.options.js';
+/**
+ * The async definition configuration for the `<fluent-dialog-body>` 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 declarativeDefinition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    template: declarativeTemplate(),
+};
+//# sourceMappingURL=dialog-body.definition-async.js.map

package/dist/esm/dialog-body/dialog-body.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-body.definition-async.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.definition-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAqC,MAAM,wCAAwC,CAAC;AAChH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiC;IACjE,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,QAAQ,EAAE,mBAAmB,EAAE;CAChC,CAAC"}

package/dist/esm/dialog-body/dialog-body.definition.d.ts

@@ -1,9 +1,7 @@
-import { DialogBody } from './dialog-body.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
- * The Fluent Dialog Body Element
+ * The definition for the `<fluent-dialog-body>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-dialog-body\>
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof DialogBody>;
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/dialog-body/dialog-body.definition.js

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

package/dist/esm/dialog-body/dialog-body.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-body.definition.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,cAAc;IAChD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"dialog-body.definition.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;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/dialog-body/dialog-body.js

@@ -5,6 +5,15 @@ import { isDialog } from '../dialog/dialog.options.js';
  *
  * @tag fluent-dialog-body
  *
+ * @slot title - Content for the dialog title.
+ * @slot title-action - Content for actions shown near the title.
+ * @slot close - Content for the close action.
+ * @slot action - Content for footer actions.
+ * @slot - Default dialog body content.
+ * @csspart title - The title container.
+ * @csspart content - The content container.
+ * @csspart actions - The actions container.
+ *
  * @public
  * @extends FASTElement
  */

package/dist/esm/dialog-body/dialog-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-body.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD;;;;;;;GAOG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IACzC;;;;;OAKG;IACI,YAAY,CAAC,KAAmB;QACrC,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;YAElC,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBACrB,MAAM,CAAC,IAAI,EAAE,CAAC;YAChB,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}
+{"version":3,"file":"dialog-body.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IACzC;;;;;OAKG;IACI,YAAY,CAAC,KAAmB;QACrC,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;YAElC,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBACrB,MAAM,CAAC,IAAI,EAAE,CAAC;YAChB,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

package/dist/esm/dialog-body/dialog-body.options.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The tag name for the dialog body element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-dialog-body";