@fluentui/web-components 3.0.0-rc.2 → 3.0.0-rc.20

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,11 +8,11 @@ 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.
  *
@@ -36,15 +36,10 @@ 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 +49,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 +61,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 +73,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;
         }
-        this.updateDialogRole();
-        if (this.type === DrawerType.modal) {
-            this.dialog.setAttribute('aria-modal', 'true');
+    }
+    /**
+     * 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;
         }
-        else {
-            this.dialog.removeAttribute('aria-modal');
+    }
+    /**
+     * 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;
+        }
+    }
+    /**
+     * 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 +153,9 @@ export class Drawer extends FASTElement {
         });
     }
     /**
-     * @public
      * Method to hide the drawer
+     *
+     * @public
      */
     hide() {
         this.emitBeforeToggle();
@@ -131,38 +169,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 +195,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.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.js';
+import { display } from '../utils/display.js';
 import { colorBackgroundOverlay, colorNeutralBackground1, colorNeutralForeground1, colorTransparentStroke, curveAccelerateMid, curveDecelerateMid, curveLinear, durationGentle, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, shadow64, strokeWidthThin, } from '../theme/design-tokens.js';
 /** Drawer styles
  * @public

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.styles.js","sourceRoot":"","sources":["../../../src/drawer/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;yBAGK,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8C9B,eAAe;mBACb,iBAAiB;mBACjB,cAAc;mBACd,iBAAiB;aACvB,uBAAuB;;;;;;+BAML,sBAAsB;yDACI,sBAAsB;;;;;;;;kBAQ7D,QAAQ;cACZ,eAAe,UAAU,sBAAsB;kBAC3C,uBAAuB;;;;;;;;;;;;+BAYV,cAAc;sCACP,kBAAkB;;;;;;sCAMlB,kBAAkB;;;;sCAIlB,kBAAkB;;;;;;;;;+BASzB,cAAc;sCACP,kBAAkB;6CACX,sBAAsB;;;;;;;;;sCAS7B,WAAW;;;;;;;;;;;;;;;;CAgBhD,CAAC"}
+{"version":3,"file":"drawer.styles.js","sourceRoot":"","sources":["../../../src/drawer/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;yBAGK,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8C9B,eAAe;mBACb,iBAAiB;mBACjB,cAAc;mBACd,iBAAiB;aACvB,uBAAuB;;;;;;+BAML,sBAAsB;yDACI,sBAAsB;;;;;;;;kBAQ7D,QAAQ;cACZ,eAAe,UAAU,sBAAsB;kBAC3C,uBAAuB;;;;;;;;;;;;+BAYV,cAAc;sCACP,kBAAkB;;;;;;sCAMlB,kBAAkB;;;;sCAIlB,kBAAkB;;;;;;;;;+BASzB,cAAc;sCACP,kBAAkB;6CACX,sBAAsB;;;;;;;;;sCAS7B,WAAW;;;;;;;;;;;;;;;;CAgBhD,CAAC"}

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

@@ -8,9 +8,11 @@ export function drawerTemplate() {
     <dialog
       class="dialog"
       part="dialog"
-      aria-describedby="${x => x.ariaDescribedby}"
-      aria-labelledby="${x => x.ariaLabelledby}"
-      aria-label="${x => x.ariaLabel}"
+      aria-describedby="${x => x.dialogDescribedby}"
+      aria-labelledby="${x => x.dialogLabelledby}"
+      aria-label="${x => x.dialogLabel}"
+      aria-modal="${x => x.dialogModal}"
+      role="${x => x.dialogRole}"
       size="${x => x.size}"
       position="${x => x.position}"
       @click="${(x, c) => x.clickHandler(c.event)}"

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.template.js","sourceRoot":"","sources":["../../../src/drawer/drawer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;;;;0BAIU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;yBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;oBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;cACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;kBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE;QAC/B,GAAG,CAAC,QAAQ,CAAC;;;;GAIlB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}
+{"version":3,"file":"drawer.template.js","sourceRoot":"","sources":["../../../src/drawer/drawer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;;;;0BAIU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;yBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;oBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;oBAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;cACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;kBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE;QAC/B,GAAG,CAAC,QAAQ,CAAC;;;;GAIlB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}

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

@@ -3,3 +3,4 @@ export * from './drawer.options.js';
 export { definition as DrawerDefinition } from './drawer.definition.js';
 export { styles as DrawerStyles } from './drawer.styles.js';
 export { template as DrawerTemplate } from './drawer.template.js';
+export { tagName as DrawerTagName } from './drawer.options.js';

package/dist/esm/drawer/index.js

@@ -3,4 +3,5 @@ export * from './drawer.options.js';
 export { definition as DrawerDefinition } from './drawer.definition.js';
 export { styles as DrawerStyles } from './drawer.styles.js';
 export { template as DrawerTemplate } from './drawer.template.js';
+export { tagName as DrawerTagName } from './drawer.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './drawer-body.options.js';
 import { DrawerBody } from './drawer-body.js';
 import { styles } from './drawer-body.styles.js';
 import { template } from './drawer-body.template.js';
@@ -9,7 +9,7 @@ import { template } from './drawer-body.template.js';
  * HTML Element: <fluent-drawer>
  */
 export const definition = DrawerBody.compose({
-    name: `${FluentDesignSystem.prefix}-drawer-body`,
+    name: tagName,
     template,
     styles,
 });

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

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

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

@@ -1,5 +1,5 @@
 import { FASTElement } from '@microsoft/fast-element';
-import { isDialog } from '../dialog/dialog.options';
+import { isDialog } from '../dialog/dialog.options.js';
 /**
  * A DrawerBody component to layout drawer content
  *

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

@@ -1 +1 @@
-{"version":3,"file":"drawer-body.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;GAmBG;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,EAAE,SAAS,CAAC,EAAE,CAAC;gBAChC,MAAM,CAAC,IAAI,EAAE,CAAC;YAChB,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}
+{"version":3,"file":"drawer-body.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;GAmBG;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,EAAE,SAAS,CAAC,EAAE,CAAC;gBAChC,MAAM,CAAC,IAAI,EAAE,CAAC;YAChB,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

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

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

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

@@ -0,0 +1,8 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+/**
+ * The tag name for the drawer body element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-drawer-body`;
+//# sourceMappingURL=drawer-body.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-body.options.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,cAAuB,CAAC"}

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.js';
+import { display } from '../utils/display.js';
 import { spacingHorizontalM, spacingHorizontalXL } from '../theme/design-tokens.js';
 import { typographySubtitle1Styles } from '../styles/partials/typography.partials.js';
 /** Drawer styles

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

@@ -1 +1 @@
-{"version":3,"file":"drawer-body.styles.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACpF,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;eAMJ,mBAAmB;;;;;;;MAO5B,yBAAyB;;;;;;WAMpB,kBAAkB;;;;;;;;CAQ5B,CAAC"}
+{"version":3,"file":"drawer-body.styles.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACpF,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;eAMJ,mBAAmB;;;;;;;MAO5B,yBAAyB;;;;;;WAMpB,kBAAkB;;;;;;;;CAQ5B,CAAC"}

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

@@ -2,3 +2,4 @@ export * from './drawer-body.js';
 export { definition as DrawerBodyDefinition } from './drawer-body.definition.js';
 export { styles as DrawerBodyStyles } from './drawer-body.styles.js';
 export { template as DrawerBodyTemplate } from './drawer-body.template.js';
+export { tagName as DrawerBodyTagName } from './drawer-body.options.js';

package/dist/esm/drawer-body/index.js

@@ -2,4 +2,5 @@ export * from './drawer-body.js';
 export { definition as DrawerBodyDefinition } from './drawer-body.definition.js';
 export { styles as DrawerBodyStyles } from './drawer-body.styles.js';
 export { template as DrawerBodyTemplate } from './drawer-body.template.js';
+export { tagName as DrawerBodyTagName } from './drawer-body.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer-body/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer-body/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/esm/dropdown/dropdown.base.d.ts

@@ -418,6 +418,11 @@ export declare class BaseDropdown extends FASTElement {
      * @public
      */
     inputHandler(e: InputEvent): boolean | void;
+    /**
+     * Guard flag to prevent reentrant calls to `insertControl`.
+     * @internal
+     */
+    private _insertingControl;
     /**
      * Inserts the control element based on the dropdown type.
      *
@@ -482,6 +487,7 @@ export declare class BaseDropdown extends FASTElement {
      * @internal
      */
     protected updateFreeformOption(value?: string): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the

package/dist/esm/dropdown/dropdown.base.js

@@ -5,9 +5,9 @@ import { isDropdownOption } from '../option/option.options.js';
 import { getDirection } from '../utils/direction.js';
 import { toggleState } from '../utils/element-internals.js';
 import { getLanguage } from '../utils/language.js';
+import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
 import { AnchorPositioningCSSSupported } from '../utils/support.js';
 import { uniqueId } from '../utils/unique-id.js';
-import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
 import { DropdownType } from './dropdown.options.js';
 import { dropdownButtonTemplate, dropdownInputTemplate } from './dropdown.template.js';
 /**
@@ -76,11 +76,13 @@ export class BaseDropdown extends FASTElement {
      * @param next - the current disabled state
      */
     disabledChanged(prev, next) {
-        Updates.enqueue(() => {
-            this.options.forEach(option => {
-                option.disabled = option.disabledAttribute || this.disabled;
+        if (this.listbox) {
+            Updates.enqueue(() => {
+                this.options.forEach(option => {
+                    option.disabled = option.disabledAttribute || this.disabled;
+                });
             });
-        });
+        }
     }
     /**
      * The display value for the control.
@@ -126,17 +128,19 @@ export class BaseDropdown extends FASTElement {
             next.tabIndex = -1;
             const notifier = Observable.getNotifier(this);
             notifier.subscribe(next);
-            for (const key of ['disabled', 'multiple']) {
-                notifier.notify(key);
-            }
-            Updates.enqueue(() => {
+            notifier.notify('multiple');
+            waitForConnectedDescendants(next, () => {
+                this.options.forEach(option => {
+                    option.disabled = option.disabledAttribute || this.disabled;
+                    option.name = this.name;
+                });
                 this.enabledOptions
                     .filter(x => x.defaultSelected)
                     .forEach((x, i) => {
                     x.selected = this.multiple || i === 0;
                 });
                 this.setValidity();
-            });
+            }, { idleCallback: true });
             if (AnchorPositioningCSSSupported) {
                 // The `anchor-name` property seems to not be isolated between instances in Safari Technology Preview 220 (18.4).
                 // It's unclear if the spec requires the `anchor-name` to be unique when styled on the `:host`.
@@ -165,11 +169,13 @@ export class BaseDropdown extends FASTElement {
      * @param next - the current name
      */
     nameChanged(prev, next) {
-        Updates.enqueue(() => {
-            this.options.forEach(option => {
-                option.name = next;
+        if (this.listbox) {
+            Updates.enqueue(() => {
+                this.options.forEach(option => {
+                    option.name = next;
+                });
             });
-        });
+        }
     }
     /**
      * Handles the open state of the dropdown.
@@ -462,10 +468,12 @@ export class BaseDropdown extends FASTElement {
          * @internal
          */
         this.elementInternals = this.attachInternals();
+        /**
+         * Guard flag to prevent reentrant calls to `insertControl`.
+         * @internal
+         */
+        this._insertingControl = false;
         this.elementInternals.role = 'presentation';
-        Updates.enqueue(() => {
-            this.insertControl();
-        });
     }
     /**
      * Filters the options based on the input value.
@@ -565,12 +573,17 @@ export class BaseDropdown extends FASTElement {
      * This method can be overridden in derived classes to provide custom control elements, though this is not recommended.
      */
     insertControl() {
+        if (this._insertingControl) {
+            return;
+        }
+        this._insertingControl = true;
         this.controlSlot?.assignedNodes().forEach(x => this.removeChild(x));
         if (this.type === DropdownType.combobox) {
             dropdownInputTemplate.render(this, this);
             return;
         }
         dropdownButtonTemplate.render(this, this);
+        this._insertingControl = false;
     }
     /**
      * Handles the keydown events for the dropdown.
@@ -664,7 +677,9 @@ export class BaseDropdown extends FASTElement {
      */
     selectOption(index = this.selectedIndex, shouldEmit = false) {
         this.listbox.selectOption(index);
-        this.control.value = this.displayValue;
+        if (this.control) {
+            this.control.value = this.displayValue;
+        }
         this.setValidity();
         this.updateFreeformOption();
         if (shouldEmit) {
@@ -681,14 +696,15 @@ export class BaseDropdown extends FASTElement {
      * @internal
      */
     setValidity(flags, message, anchor) {
-        if (this.$fastController.isConnected) {
-            if (this.disabled || !this.required) {
-                this.elementInternals.setValidity({});
-                return;
-            }
-            const valueMissing = this.required && this.listbox.selectedOptions.length === 0;
-            this.elementInternals.setValidity({ valueMissing, ...flags }, message ?? this.validationMessage, anchor ?? this.control);
+        if (!this.elementInternals) {
+            return;
+        }
+        if (this.disabled || !this.required) {
+            this.elementInternals.setValidity({});
+            return;
         }
+        const valueMissing = this.required && this.listbox.selectedOptions.length === 0;
+        this.elementInternals.setValidity({ valueMissing, ...flags }, message ?? this.validationMessage, anchor ?? this.control);
     }
     /**
      * Handles the `slotchange` event for the dropdown.
@@ -726,6 +742,12 @@ export class BaseDropdown extends FASTElement {
         this.freeformOption.value = value;
         this.freeformOption.hidden = false;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        Updates.enqueue(() => {
+            this.insertControl();
+        });
+    }
     disconnectedCallback() {
         BaseDropdown.AnchorPositionFallbackObserver?.disconnect();
         this.debounceController?.abort();