@fluentui/web-components 3.0.0-beta.99 → 3.0.0-rc.10

package/dist/esm/compound-button/compound-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;iBASC,eAAe;mBACb,iBAAiB;;;;;;;;;;aAUvB,uBAAuB;;iBAEnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;aAWvB,4BAA4B;;;;aAI5B,8BAA8B;;;;aAI9B,6BAA6B;;;;;aAK7B,uBAAuB;;;;aAIvB,iCAAiC;;;;aAIjC,mCAAmC;;;;;aAKnC,8BAA8B;;;;;;;;;;;eAW5B,uBAAuB;;;;;;eAMvB,mBAAmB;;;;;;eAMnB,kBAAkB;;;;;;;iBAOhB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;;CAE/B,CAAC"}
+{"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;iBASC,eAAe;mBACb,iBAAiB;;;;;;;;;;aAUvB,uBAAuB;;iBAEnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;aAWvB,4BAA4B;;;;aAI5B,8BAA8B;;;;aAI9B,6BAA6B;;;;;aAK7B,uBAAuB;;;;aAIvB,iCAAiC;;;;aAIjC,mCAAmC;;;;;aAKnC,8BAA8B;;;;;;;;;;;eAW5B,uBAAuB;;;;;;eAMvB,mBAAmB;;;;;;eAMnB,kBAAkB;;;;;;;iBAOhB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;;CAE/B,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;GAKjC,CAAC,CACH,CAAC"}

package/dist/{dts → esm}/counter-badge/counter-badge.d.ts

@@ -82,10 +82,11 @@ export declare class CounterBadge extends FASTElement {
      */
     dot: boolean;
     /**
-     * @internal
      * Function to set the count
      * This is the default slotted content for the counter badge
      * If children are slotted, that will override the value returned
+     *
+     * @internal
      */
     setCount(): string | void;
 }

package/dist/esm/counter-badge/counter-badge.js

@@ -58,10 +58,11 @@ export class CounterBadge extends FASTElement {
         this.setCount();
     }
     /**
-     * @internal
      * Function to set the count
      * This is the default slotted content for the counter badge
      * If children are slotted, that will override the value returned
+     *
+     * @internal
      */
     setCount() {
         const count = this.count ?? 0;

package/dist/esm/counter-badge/counter-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAQhD;;;;;;GAMG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QA0CnE;;;;;;WAMG;QAEI,UAAK,GAAW,CAAC,CAAC;QAKzB;;;;;;WAMG;QAEI,kBAAa,GAAW,EAAE,CAAC;QAKlC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,QAAG,GAAY,KAAK,CAAC;IAiB9B,CAAC;IApDW,YAAY;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAWS,oBAAoB;QAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAsBD;;;;;OAKG;IACI,QAAQ;QACb,MAAM,KAAK,GAAkB,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YAChD,OAAO,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC;QAC5E,CAAC;QAED,OAAO;IACT,CAAC;CACF;AA7FQ;IADN,IAAI;gDACsC;AAUpC;IADN,IAAI;2CAC4B;AAU1B;IADN,IAAI;2CAC4B;AAU1B;IADN,IAAI;0CAC0B;AAUxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;2CACpB;AAalB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mDACxC;AAa3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAU1B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yCACE;AA2B9B,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAQhD;;;;;;GAMG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QA0CnE;;;;;;WAMG;QAEI,UAAK,GAAW,CAAC,CAAC;QAKzB;;;;;;WAMG;QAEI,kBAAa,GAAW,EAAE,CAAC;QAKlC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,QAAG,GAAY,KAAK,CAAC;IAkB9B,CAAC;IArDW,YAAY;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAWS,oBAAoB;QAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAsBD;;;;;;OAMG;IACI,QAAQ;QACb,MAAM,KAAK,GAAkB,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YAChD,OAAO,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC;QAC5E,CAAC;QAED,OAAO;IACT,CAAC;CACF;AA9FQ;IADN,IAAI;gDACsC;AAUpC;IADN,IAAI;2CAC4B;AAU1B;IADN,IAAI;2CAC4B;AAU1B;IADN,IAAI;0CAC0B;AAUxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;2CACpB;AAalB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mDACxC;AAa3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAU1B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yCACE;AA4B9B,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}

package/dist/{dts → esm}/dialog/dialog.d.ts

@@ -9,50 +9,68 @@ import { DialogType } from './dialog.options.js';
  */
 export declare class Dialog extends FASTElement {
     /**
-     * @public
      * The dialog element
+     *
+     * @public
      */
     dialog: HTMLDialogElement;
     /**
-     * @public
      * The ID of the element that describes the dialog
+     *
+     * @public
      */
     ariaDescribedby?: string;
     /**
-     * @public
      * The ID of the element that labels the dialog
+     *
+     * @public
      */
     ariaLabelledby?: string;
     /**
+     * The label of the dialog
+     *
      * @public
+     */
+    ariaLabel: string | null;
+    /**
      * The type of the dialog modal
+     *
+     * @public
      */
     type: DialogType;
+    protected typeChanged(prev: DialogType | undefined, next: DialogType | undefined): void;
+    /** @internal */
+    connectedCallback(): 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 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 show the dialog
+     *
+     * @public
      */
     show(): void;
     /**
-     * @public
      * Method to hide the dialog
+     *
+     * @public
      */
     hide(): void;
     /**
-     * @public
      * Handles click events on the dialog overlay for light-dismiss
+     *
+     * @public
      * @param event - The click event
      * @returns boolean
      */

package/dist/esm/dialog/dialog.js

@@ -12,14 +12,16 @@ export class Dialog extends FASTElement {
     constructor() {
         super(...arguments);
         /**
-         * @public
          * The type of the dialog modal
+         *
+         * @public
          */
         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
+         *
+         * @public
          */
         this.emitBeforeToggle = () => {
             this.$emit('beforetoggle', {
@@ -28,9 +30,10 @@ export class Dialog extends FASTElement {
             });
         };
         /**
-         * @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,9 +42,32 @@ export class Dialog extends FASTElement {
             });
         };
     }
+    typeChanged(prev, next) {
+        if (!this.dialog) {
+            return;
+        }
+        if (next === DialogType.alert) {
+            this.dialog.setAttribute('role', 'alertdialog');
+        }
+        else {
+            this.dialog.removeAttribute('role');
+        }
+        if (next !== DialogType.nonModal) {
+            this.dialog.setAttribute('aria-modal', 'true');
+        }
+        else {
+            this.dialog.removeAttribute('aria-modal');
+        }
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this.typeChanged(undefined, this.type);
+    }
     /**
-     * @public
      * Method to show the dialog
+     *
+     * @public
      */
     show() {
         Updates.enqueue(() => {
@@ -56,8 +82,9 @@ export class Dialog extends FASTElement {
         });
     }
     /**
-     * @public
      * Method to hide the dialog
+     *
+     * @public
      */
     hide() {
         this.emitBeforeToggle();
@@ -65,13 +92,13 @@ 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
      */
     clickHandler(event) {
-        event.preventDefault();
         if (this.dialog.open && this.type !== DialogType.alert && event.target === this.dialog) {
             this.hide();
         }
@@ -87,6 +114,9 @@ __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);

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAAvC;;QAsBE;;;WAGG;QAEI,SAAI,GAAe,UAAU,CAAC,KAAK,CAAC;QAE3C;;;;WAIG;QACI,qBAAgB,GAAG,GAAS,EAAE;YACnC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;gBACzB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;gBAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;aAC/C,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;;WAIG;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;IAyCJ,CAAC;IAvCC;;;OAGG;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,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;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;;;;;OAKG;IACI,YAAY,CAAC,KAAY;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,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;QACD,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AAtFQ;IADN,UAAU;sCACuB;AAO3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;+CACR;AAOzB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;8CACR;AAOxB;IADN,IAAI;oCACsC"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAAvC;;QAiCE;;;;WAIG;QAEI,SAAI,GAAe,UAAU,CAAC,KAAK,CAAC;QAyB3C;;;;;WAKG;QACI,qBAAgB,GAAG,GAAS,EAAE;YACnC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;gBACzB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;gBAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;aAC/C,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;;;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;IA4CJ,CAAC;IA5FW,WAAW,CAAC,IAA4B,EAAE,IAA4B;QAC9E,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QAClD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,IAAI,KAAK,UAAU,CAAC,QAAQ,EAAE,CAAC;YACjC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAED,gBAAgB;IAChB,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IA4BD;;;;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,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;AA7HQ;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;oCACsC"}

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

@@ -0,0 +1,21 @@
+import type { ValuesOf } from '../utils/index.js';
+import { Dialog } from './dialog.js';
+/**
+ * Dialog modal type
+ * @public
+ */
+export declare const DialogType: {
+    readonly modal: "modal";
+    readonly nonModal: "non-modal";
+    readonly alert: "alert";
+};
+export type DialogType = ValuesOf<typeof DialogType>;
+/**
+ * Predicate function that determines if the element should be considered a dialog.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is a dialog.
+ * @public
+ */
+export declare function isDialog(element?: Node | null, tagName?: string): element is Dialog;

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

@@ -7,4 +7,18 @@ export const DialogType = {
     nonModal: 'non-modal',
     alert: 'alert',
 };
+/**
+ * Predicate function that determines if the element should be considered a dialog.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is a dialog.
+ * @public
+ */
+export function isDialog(element, tagName = '-dialog') {
+    if (element?.nodeType !== Node.ELEMENT_NODE) {
+        return false;
+    }
+    return element.tagName.toLowerCase().endsWith(tagName);
+}
 //# 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":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,OAAO;CACN,CAAC"}
+{"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"}

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

@@ -21,7 +21,7 @@ export const styles = css `
       border: none;
       box-shadow: ${shadow64};
       color: ${colorNeutralForeground1};
-      max-height: calc(-48px + 100vh);
+      max-height: 100vh;
       padding: 0;
       width: 100%;
       max-width: 600px;
@@ -33,6 +33,12 @@ export const styles = css `
       z-index: 2;
       overflow: auto;
     }
+
+    @supports (max-height: 1dvh) {
+      dialog {
+        max-height: 100dvh;
+      }
+    }
   }
 
   @layer animations {

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;;;;;;;;;;;;;;;;;;;;;+BAqBP,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;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"}

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

@@ -1,16 +1,12 @@
 import { html, ref } from '@microsoft/fast-element';
-import { DialogType } from './dialog.options.js';
 /**
  * Template for the Dialog component
  * @public
  */
 export const template = html `
   <dialog
-    role="${x => (x.type === DialogType.alert ? 'alertdialog' : 'dialog')}"
-    type="${x => x.type}"
     class="dialog"
     part="dialog"
-    aria-modal="${x => (x.type === DialogType.modal || x.type === DialogType.alert ? 'true' : void 0)}"
     aria-describedby="${x => x.ariaDescribedby}"
     aria-labelledby="${x => x.ariaLabelledby}"
     aria-label="${x => x.ariaLabel}"

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;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;YAE7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC7D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;;kBAGL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;wBAC7E,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;;;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"}

package/dist/{dts → esm}/dialog/index.d.ts

@@ -1,5 +1,5 @@
 export { Dialog } from './dialog.js';
-export { DialogType } from './dialog.options.js';
+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';

package/dist/esm/dialog/index.js

@@ -1,5 +1,5 @@
 export { Dialog } from './dialog.js';
-export { DialogType } from './dialog.options.js';
+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';

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,MAAM,qBAAqB,CAAC;AACjD,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"}

package/dist/{dts → esm}/dialog-body/dialog-body.d.ts

@@ -9,8 +9,10 @@ import { FASTElement } from '@microsoft/fast-element';
  */
 export declare class DialogBody extends FASTElement {
     /**
-     * @public
-     * Indicates whether the dialog has a title action
+     * Handles click event for the close slot
+     *
+     * @param e - the click event
+     * @internal
      */
-    noTitleAction: boolean;
+    clickHandler(event: PointerEvent): boolean | void;
 }

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

@@ -1,5 +1,5 @@
-import { __decorate } from "tslib";
-import { attr, FASTElement } from '@microsoft/fast-element';
+import { FASTElement } from '@microsoft/fast-element';
+import { isDialog } from '../dialog/dialog.options.js';
 /**
  * Dialog Body component that extends the FASTElement class.
  *
@@ -9,16 +9,20 @@ import { attr, FASTElement } from '@microsoft/fast-element';
  * @extends FASTElement
  */
 export class DialogBody extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * @public
-         * Indicates whether the dialog has a title action
-         */
-        this.noTitleAction = false;
+    /**
+     * Handles click event for the close slot
+     *
+     * @param e - the click event
+     * @internal
+     */
+    clickHandler(event) {
+        if (!event.defaultPrevented) {
+            const dialog = this.parentElement;
+            if (isDialog(dialog)) {
+                dialog.hide();
+            }
+        }
+        return true;
     }
 }
-__decorate([
-    attr({ mode: 'boolean', attribute: 'no-title-action' })
-], DialogBody.prototype, "noTitleAction", void 0);
 //# sourceMappingURL=dialog-body.js.map

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,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D;;;;;;;GAOG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAA3C;;QACE;;;WAGG;QAEI,kBAAa,GAAY,KAAK,CAAC;IACxC,CAAC;CAAA;AADQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;iDAClB"}
+{"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"}

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

@@ -32,8 +32,6 @@ export const styles = css `
     margin-block-start: calc(${spacingVerticalXXL} * -1);
     padding-block-end: ${spacingVerticalS};
     padding-block-start: ${spacingVerticalXXL};
-    position: sticky;
-    z-index: 1;
   }
 
   .content {
@@ -56,14 +54,21 @@ export const styles = css `
     margin-block-end: calc(${spacingVerticalXXL} * -1);
     padding-block-end: ${spacingVerticalXXL};
     padding-block-start: ${spacingVerticalL};
-    position: sticky;
-    z-index: 2;
   }
 
-  /* Hide slots if nothing is slotted to remove grid gap */
-  :not(:has(:is([slot='title'], [slot='title-action']))) .title:not(:has(.title-action)),
-  :not(:has([slot='action'])) .actions {
-    display: none;
+  ::slotted([slot='title-action']) {
+    margin-inline-start: auto;
+  }
+
+  ::slotted([slot='title']) {
+    font: inherit;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* align  title content to the end when there is no title*/
+  :not(:has(:is([slot='title'], [slot='title-action']))) .title {
+    justify-content: end;
   }
 
   @container (min-width: 480px) {
@@ -75,5 +80,16 @@ export const styles = css `
       padding-block-start: ${spacingVerticalS};
     }
   }
+
+  /* For a11y, set sticky position for title and actions when the viewport is tall enough */
+  @media (min-height: 480px) {
+    .title {
+      position: sticky;
+      z-index: 1;
+    }
+    .actions {
+      position: sticky;
+      z-index: 2;
+    }
 `;
 //# sourceMappingURL=dialog-body.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-body.styles.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;kBAGD,uBAAuB;;WAE9B,gBAAgB;eACZ,kBAAkB,IAAI,oBAAoB;;;;;;;kBAOvC,uBAAuB;aAC5B,uBAAuB;;;mBAGjB,cAAc;iBAChB,eAAe;mBACb,kBAAkB;;;mBAGlB,iBAAiB;6BACP,gBAAgB;+BACd,kBAAkB;yBACxB,gBAAgB;2BACd,kBAAkB;;;;;;;aAOhC,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;kBAMlB,uBAAuB;;;WAG9B,gBAAgB;;6BAEE,kBAAkB;yBACtB,kBAAkB;2BAChB,gBAAgB;;;;;;;;;;;;;;;;iCAgBV,gBAAgB;6BACpB,gBAAgB;;;CAG5C,CAAC"}
+{"version":3,"file":"dialog-body.styles.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;kBAGD,uBAAuB;;WAE9B,gBAAgB;eACZ,kBAAkB,IAAI,oBAAoB;;;;;;;kBAOvC,uBAAuB;aAC5B,uBAAuB;;;mBAGjB,cAAc;iBAChB,eAAe;mBACb,kBAAkB;;;mBAGlB,iBAAiB;6BACP,gBAAgB;+BACd,kBAAkB;yBACxB,gBAAgB;2BACd,kBAAkB;;;;;aAKhC,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;kBAMlB,uBAAuB;;;WAG9B,gBAAgB;;6BAEE,kBAAkB;yBACtB,kBAAkB;2BAChB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;iCAuBV,gBAAgB;6BACpB,gBAAgB;;;;;;;;;;;;;;CAc5C,CAAC"}

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

@@ -1,42 +1,17 @@
-import { html, ref } from '@microsoft/fast-element';
-import { DialogType } from '../dialog/dialog.options.js';
-const dismissed16Regular = html.partial(`
-  <svg
-    fill="currentColor"
-    aria-hidden="true"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
-      fill="currentColor"
-    ></path>
-  </svg>`);
+import { html } from '@microsoft/fast-element';
 /**
  * Template for the dialog form
  * @public
  */
 export const template = html `
-  <div class="title" part="title">
-    <slot name="title"></slot>
-    <slot name="title-action">
-      <fluent-button
-        ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert}
-        tabindex="0"
-        part="title-action"
-        class="title-action"
-        appearance="transparent"
-        icon-only
-        @click=${x => x.parentNode?.hide()}
-        ${ref('defaultTitleAction')}
-      >
-        ${dismissed16Regular}
-      </fluent-button>
-    </slot>
-  </div>
-  <div class="content" part="content"><slot></slot></div>
-  <div class="actions" part="actions"><slot name="action"></slot></div>
+  <template>
+    <div class="title" part="title">
+      <slot name="title"></slot>
+      <slot name="title-action"></slot>
+      <slot name="close" @click="${(x, c) => x.clickHandler(c.event)}"></slot>
+    </div>
+    <div class="content" part="content"><slot></slot></div>
+    <div class="actions" part="actions"><slot name="action"></slot></div>
+  </template>
 `;
 //# sourceMappingURL=dialog-body.template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-body.template.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,kBAAkB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;;SAa/B,CAAC,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwB,IAAI,CAAA;;;;;kBAK/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,UAAU,EAAE,IAAI,KAAK,UAAU,CAAC,KAAK;;;;;;iBAMhE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE;UAChC,GAAG,CAAC,oBAAoB,CAAC;;UAEzB,kBAAkB;;;;;;CAM3B,CAAC"}
+{"version":3,"file":"dialog-body.template.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAO,MAAM,yBAAyB,CAAC;AAE9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwB,IAAI,CAAA;;;;;mCAKd,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;;;;;CAKnF,CAAC"}

package/dist/{dts → esm}/divider/divider.options.d.ts

@@ -23,10 +23,7 @@ export type DividerRole = ValuesOf<typeof DividerRole>;
  * @public
  */
 export declare const DividerOrientation: {
-    readonly horizontal: "horizontal"; /**
-     * Divider roles
-     * @public
-     */
+    readonly horizontal: "horizontal";
     readonly vertical: "vertical";
 };
 /**

package/dist/{dts → esm}/drawer/drawer.d.ts

@@ -23,6 +23,7 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @method show - Method to show the drawer.
  * @method hide - Method to hide the drawer.
  * @method clickHandler - Handles click events on the drawer.
+ * @method cancelHandler - Handles cancel events on the drawer.
  * @method emitToggle - Emits an event after the dialog's open state changes.
  * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
  *
@@ -31,20 +32,25 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @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;
     /**""
@@ -60,30 +66,39 @@ export declare class Drawer extends FASTElement {
      */
     size: DrawerSize;
     /**
-     * @public
      * The dialog element.
+     *
+     * @public
      */
     dialog: HTMLDialogElement;
+    /** @internal */
+    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;
     /**
@@ -93,4 +108,12 @@ export declare class Drawer extends FASTElement {
      * Handles click events on the drawer.
      */
     clickHandler(event: Event): boolean;
+    /**
+     * Handles cancel events on the drawer.
+     *
+     * @public
+     */
+    cancelHandler(): void;
+    protected observeRoleAttr(): void;
+    protected updateDialogRole(): void;
 }