@fluentui/web-components 3.0.0-rc.15 → 3.0.0-rc.16

package/dist/esm/menu-list/menu-list.base.d.ts

@@ -1,6 +1,7 @@
 import { FASTElement } from '@microsoft/fast-element';
+import type { MenuItem } from '../menu-item/menu-item.js';
 /**
- * A Base Menu List Custom HTML Element.
+ * A Base MenuList Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
  *
  * @public
@@ -17,12 +18,8 @@ export declare class BaseMenuList extends FASTElement {
      */
     items: HTMLElement[];
     protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
-    protected menuItems: Element[] | undefined;
-    /**
-     * The index of the focusable element in the items array
-     * defaults to -1
-     */
-    private focusIndex;
+    protected menuChildren: HTMLElement[] | undefined;
+    protected menuItems: MenuItem[] | undefined;
     private static focusableElementRoles;
     constructor();
     /**
@@ -43,17 +40,6 @@ export declare class BaseMenuList extends FASTElement {
      * @public
      */
     focus(): void;
-    /**
-     * @internal
-     */
-    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
-    /**
-     * if focus is moving out of the menu, reset to a stable initial state
-     * @internal
-     */
-    handleFocusOut: (e: FocusEvent) => void;
-    private handleItemFocus;
-    private removeItemListeners;
     private static elementIndent;
     protected setItems(): void;
     /**
@@ -67,10 +53,5 @@ export declare class BaseMenuList extends FASTElement {
     /**
      * check if the item is a menu item
      */
-    protected isMenuItemElement: (el: Element) => el is HTMLElement;
-    /**
-     * check if the item is focusable
-     */
-    private isFocusableElement;
-    private setFocus;
+    protected isMenuItemElement(el: Element): el is MenuItem;
 }

package/dist/esm/menu-list/menu-list.base.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
-import { FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
-import { isHTMLElement, keyArrowDown, keyArrowUp, keyEnd, keyHome } from '@microsoft/fast-web-utilities';
+import { FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { isHTMLElement } from '@microsoft/fast-web-utilities';
 import { isMenuItem, MenuItemRole } from '../menu-item/menu-item.options.js';
 /**
- * A Base Menu List Custom HTML Element.
+ * A Base MenuList Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
  *
  * @public
@@ -13,7 +13,7 @@ export class BaseMenuList extends FASTElement {
         // only update children after the component is connected and
         // the setItems has run on connectedCallback
         // (menuItems is undefined until then)
-        if (this.$fastController.isConnected && this.menuItems !== undefined) {
+        if (this.$fastController.isConnected && this.menuChildren !== undefined) {
             this.setItems();
         }
     }
@@ -26,11 +26,6 @@ export class BaseMenuList extends FASTElement {
          * @internal
          */
         this.elementInternals = this.attachInternals();
-        /**
-         * The index of the focusable element in the items array
-         * defaults to -1
-         */
-        this.focusIndex = -1;
         /**
          * @internal
          */
@@ -39,45 +34,21 @@ export class BaseMenuList extends FASTElement {
                 isHTMLElement(this.parentElement) &&
                 this.parentElement.getAttribute('role') === 'menuitem');
         };
-        /**
-         * if focus is moving out of the menu, reset to a stable initial state
-         * @internal
-         */
-        this.handleFocusOut = (e) => {
-            if (!this.contains(e.relatedTarget) && this.menuItems !== undefined) {
-                // find our first focusable element
-                const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
-                // set the current focus index's tabindex to -1
-                this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
-                // set the first focusable element tabindex to 0
-                this.menuItems[focusIndex].setAttribute('tabindex', '0');
-                // set the focus index
-                this.focusIndex = focusIndex;
-            }
-        };
-        this.handleItemFocus = (e) => {
-            const targetItem = e.target;
-            if (this.menuItems !== undefined && targetItem !== this.menuItems[this.focusIndex]) {
-                this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
-                this.focusIndex = this.menuItems.indexOf(targetItem);
-                targetItem.setAttribute('tabindex', '0');
-            }
-        };
         /**
          * Handle change from child MenuItem element and set radio group behavior
          */
         this.changedMenuItemHandler = (e) => {
-            if (this.menuItems === undefined) {
+            if (this.menuChildren === undefined) {
                 return;
             }
             const changedMenuItem = e.target;
-            const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+            const changeItemIndex = this.menuChildren.indexOf(changedMenuItem);
             if (changeItemIndex === -1) {
                 return;
             }
             if (changedMenuItem.role === 'menuitemradio' && changedMenuItem.checked === true) {
                 for (let i = changeItemIndex - 1; i >= 0; --i) {
-                    const item = this.menuItems[i];
+                    const item = this.menuChildren[i];
                     const role = item.role;
                     if (role === MenuItemRole.menuitemradio) {
                         item.checked = false;
@@ -86,9 +57,9 @@ export class BaseMenuList extends FASTElement {
                         break;
                     }
                 }
-                const maxIndex = this.menuItems.length - 1;
+                const maxIndex = this.menuChildren.length - 1;
                 for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
-                    const item = this.menuItems[i];
+                    const item = this.menuChildren[i];
                     const role = item.role;
                     if (role === MenuItemRole.menuitemradio) {
                         item.checked = false;
@@ -99,18 +70,6 @@ export class BaseMenuList extends FASTElement {
                 }
             }
         };
-        /**
-         * check if the item is a menu item
-         */
-        this.isMenuItemElement = (el) => {
-            return isMenuItem(el) || (isHTMLElement(el) && !!el.role && el.role in BaseMenuList.focusableElementRoles);
-        };
-        /**
-         * check if the item is focusable
-         */
-        this.isFocusableElement = (el) => {
-            return this.isMenuItemElement(el);
-        };
         this.elementInternals.role = 'menu';
     }
     /**
@@ -130,8 +89,7 @@ export class BaseMenuList extends FASTElement {
      */
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeItemListeners();
-        this.menuItems = undefined;
+        this.menuChildren = undefined;
         this.removeEventListener('change', this.changedMenuItemHandler);
     }
     /**
@@ -140,42 +98,7 @@ export class BaseMenuList extends FASTElement {
      * @public
      */
     focus() {
-        this.setFocus(0, 1);
-    }
-    /**
-     * @internal
-     */
-    handleMenuKeyDown(e) {
-        if (e.defaultPrevented || this.menuItems === undefined) {
-            return;
-        }
-        switch (e.key) {
-            case keyArrowDown:
-                // go forward one index
-                this.setFocus(this.focusIndex + 1, 1);
-                return;
-            case keyArrowUp:
-                // go back one index
-                this.setFocus(this.focusIndex - 1, -1);
-                return;
-            case keyEnd:
-                // set focus on last item
-                this.setFocus(this.menuItems.length - 1, -1);
-                return;
-            case keyHome:
-                // set focus on first item
-                this.setFocus(0, 1);
-                return;
-            default:
-                // if we are not handling the event, do not prevent default
-                return true;
-        }
-    }
-    removeItemListeners(items = this.items) {
-        items.forEach(item => {
-            item.removeEventListener('focus', this.handleItemFocus);
-            Observable.getNotifier(item).unsubscribe(this, 'hidden');
-        });
+        this.menuItems?.find(item => !item.disabled)?.focus();
     }
     static elementIndent(el) {
         const role = el.role;
@@ -187,30 +110,18 @@ export class BaseMenuList extends FASTElement {
     }
     setItems() {
         const children = Array.from(this.children);
-        this.removeItemListeners(children);
-        children.forEach((child) => Observable.getNotifier(child).subscribe(this, 'hidden'));
-        const newItems = children.filter(child => !child.hasAttribute('hidden'));
-        this.menuItems = newItems;
-        const menuItems = this.menuItems.filter(this.isMenuItemElement);
-        // if our focus index is not -1 we have items
-        if (menuItems.length) {
-            this.focusIndex = 0;
-        }
-        menuItems.forEach((item, index) => {
-            item.setAttribute('tabindex', index === 0 ? '0' : '-1');
-            item.addEventListener('focus', this.handleItemFocus);
-        });
+        this.menuChildren = children.filter(child => !child.hasAttribute('hidden'));
         /**
          * Set the indent attribute on MenuItem elements based on their
          * position in the MenuList. Each MenuItem element has a data-indent attribute that is
          * used to set the indent of the element's start slot content.
          */
-        const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
-        const indent = filteredMenuListItems?.reduce((accum, current) => {
+        this.menuItems = this.menuChildren?.filter(this.isMenuItemElement);
+        const indent = this.menuItems?.reduce((accum, current) => {
             const elementValue = BaseMenuList.elementIndent(current);
             return Math.max(accum, elementValue);
         }, 0);
-        filteredMenuListItems?.forEach((item) => {
+        this.menuItems?.forEach((item) => {
             item.dataset.indent = `${indent}`;
         });
     }
@@ -222,27 +133,11 @@ export class BaseMenuList extends FASTElement {
             this.setItems();
         }
     }
-    setFocus(focusIndex, adjustment) {
-        if (this.menuItems === undefined) {
-            return;
-        }
-        while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
-            const child = this.menuItems[focusIndex];
-            if (this.isFocusableElement(child)) {
-                // change the previous index to -1
-                if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
-                    this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
-                }
-                // update the focus index
-                this.focusIndex = focusIndex;
-                // update the tabindex of next focusable element
-                child.setAttribute('tabindex', '0');
-                // focus the element
-                child.focus();
-                break;
-            }
-            focusIndex += adjustment;
-        }
+    /**
+     * check if the item is a menu item
+     */
+    isMenuItemElement(el) {
+        return isMenuItem(el) || (isHTMLElement(el) && !!el.role && el.role in BaseMenuList.focusableElementRoles);
     }
 }
 __decorate([

package/dist/esm/menu-list/menu-list.base.js.map

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

package/dist/esm/menu-list/menu-list.d.ts

@@ -1,6 +1,6 @@
 import { BaseMenuList } from './menu-list.base.js';
 /**
- * A Menu List Custom HTML Element.
+ * A MenuList Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
  *
  * @tag fluent-menu-list
@@ -10,4 +10,8 @@ import { BaseMenuList } from './menu-list.base.js';
  * @public
  */
 export declare class MenuList extends BaseMenuList {
+    private fg?;
+    private fgItems?;
+    disconnectedCallback(): void;
+    setItems(): void;
 }

package/dist/esm/menu-list/menu-list.definition.js

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

package/dist/esm/menu-list/menu-list.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.definition.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,YAAY;IAC9C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"menu-list.definition.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,OAAO;IACb,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/menu-list/menu-list.js

@@ -1,6 +1,8 @@
+import { FocusGroup } from '@microsoft/focusgroup-polyfill/shadowless';
+import { ArrayItemCollection } from '../utils/focusgroup.js';
 import { BaseMenuList } from './menu-list.base.js';
 /**
- * A Menu List Custom HTML Element.
+ * A MenuList Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
  *
  * @tag fluent-menu-list
@@ -10,5 +12,25 @@ import { BaseMenuList } from './menu-list.base.js';
  * @public
  */
 export class MenuList extends BaseMenuList {
+    disconnectedCallback() {
+        this.fg?.disconnect();
+        super.disconnectedCallback();
+    }
+    setItems() {
+        super.setItems();
+        this.fgItems ??= new ArrayItemCollection(() => this.menuItems?.filter(i => !i.hidden) ?? []);
+        if (!this.fg) {
+            this.fg = new FocusGroup(this, this.fgItems, {
+                definition: {
+                    behavior: 'menu',
+                    axis: 'block',
+                    wrap: true,
+                },
+            });
+        }
+        else {
+            this.fg.update();
+        }
+    }
 }
 //# sourceMappingURL=menu-list.js.map

package/dist/esm/menu-list/menu-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;CAAG"}
+{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IAKxC,oBAAoB;QAClB,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC;QACtB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAEQ,QAAQ;QACf,KAAK,CAAC,QAAQ,EAAE,CAAC;QAEjB,IAAI,CAAC,OAAO,KAAK,IAAI,mBAAmB,CAAW,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QACvG,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACb,IAAI,CAAC,EAAE,GAAG,IAAI,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE;gBAC3C,UAAU,EAAE;oBACV,QAAQ,EAAE,MAAM;oBAChB,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE,IAAI;iBACX;aACF,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;CACF"}

package/dist/esm/menu-list/menu-list.options.d.ts

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

package/dist/esm/menu-list/menu-list.options.js

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

package/dist/esm/menu-list/menu-list.options.js.map

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

package/dist/esm/menu-list/menu-list.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 { borderRadiusMedium, colorNeutralBackground1, colorTransparentStroke, shadow16, } from '../theme/design-tokens.js';
 /** MenuList styles
  * @public

package/dist/esm/menu-list/menu-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.styles.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,GACT,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;wBAQK,uBAAuB;wBACvB,sBAAsB;qBACzB,kBAAkB;kBACrB,QAAQ;;;;CAIzB,CAAC"}
+{"version":3,"file":"menu-list.styles.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,GACT,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;wBAQK,uBAAuB;wBACvB,sBAAsB;qBACzB,kBAAkB;kBACrB,QAAQ;;;;CAIzB,CAAC"}

package/dist/esm/menu-list/menu-list.template.js

@@ -1,11 +1,7 @@
 import { html, slotted } from '@microsoft/fast-element';
 export function menuTemplate() {
     return html `
-    <template
-      slot="${x => (x.slot ? x.slot : x.isNestedMenu() ? 'submenu' : void 0)}"
-      @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
-      @focusout="${(x, c) => x.handleFocusOut(c.event)}"
-    >
+    <template focusgroup="menu" slot="${x => (x.slot ? x.slot : x.isNestedMenu() ? 'submenu' : void 0)}">
       <slot ${slotted('items')}></slot>
     </template>
   `;

package/dist/esm/menu-list/menu-list.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.template.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlF,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;;cAEF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;kBAC1D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAsB,CAAC;mBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;;cAEtD,OAAO,CAAC,OAAO,CAAC;;GAE3B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,YAAY,EAAE,CAAC"}
+{"version":3,"file":"menu-list.template.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlF,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;wCACwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;cACxF,OAAO,CAAC,OAAO,CAAC;;GAE3B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,YAAY,EAAE,CAAC"}

package/dist/esm/message-bar/index.d.ts

@@ -3,3 +3,4 @@ export { MessageBar } from './message-bar.js';
 export { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
 export { styles as MessageBarStyles } from './message-bar.styles.js';
 export { template as MessageBarTemplate } from './message-bar.template.js';
+export { tagName as MessageBarTagName } from './message-bar.options.js';

package/dist/esm/message-bar/index.js

@@ -3,4 +3,5 @@ export { MessageBar } from './message-bar.js';
 export { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
 export { styles as MessageBarStyles } from './message-bar.styles.js';
 export { template as MessageBarTemplate } from './message-bar.template.js';
+export { tagName as MessageBarTagName } from './message-bar.options.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/message-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/message-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC/F,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/message-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC/F,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/message-bar/message-bar.definition.js

@@ -1,4 +1,5 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './message-bar.options.js';
 import { MessageBar } from './message-bar.js';
 import { styles } from './message-bar.styles.js';
 import { template } from './message-bar.template.js';
@@ -10,7 +11,7 @@ import { template } from './message-bar.template.js';
  * HTML Element: `<fluent-message-bar>`
  */
 export const definition = MessageBar.compose({
-    name: `${FluentDesignSystem.prefix}-message-bar`,
+    name: tagName,
     template,
     styles,
     shadowOptions: {

package/dist/esm/message-bar/message-bar.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-bar.definition.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.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;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,cAAc;IAChD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,kBAAkB,CAAC,cAAc;KACxC;CACF,CAAC,CAAC"}
+{"version":3,"file":"message-bar.definition.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,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;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,OAAO;IACb,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,kBAAkB,CAAC,cAAc;KACxC;CACF,CAAC,CAAC"}

package/dist/esm/message-bar/message-bar.options.d.ts

@@ -31,3 +31,9 @@ export declare const MessageBarIntent: {
     readonly info: "info";
 };
 export type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;
+/**
+ * The tag name for the message bar element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-message-bar";

package/dist/esm/message-bar/message-bar.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * The `layout` variations for the MessageBar component.
  *
@@ -27,4 +28,10 @@ export const MessageBarIntent = {
     error: 'error',
     info: 'info',
 };
+/**
+ * The tag name for the message bar element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-message-bar`;
 //# sourceMappingURL=message-bar.options.js.map

package/dist/esm/message-bar/message-bar.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-bar.options.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.options.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,YAAY;CAChB,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC"}
+{"version":3,"file":"message-bar.options.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,YAAY;CAChB,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,cAAuB,CAAC"}

package/dist/esm/message-bar/message-bar.template.d.ts

@@ -3,12 +3,12 @@ import type { MessageBar } from './message-bar.js';
 /**
  * Generates a template for the MessageBar component.
  * @public
- * @param {MessageBar} T - The type of the MessageBar.
- * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
+ * @param T - The type of the MessageBar.
+ * @returns The template for the MessageBar component.
  */
 export declare function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<T>;
 /**
  * The template for the MessageBar component.
- * @type {ElementViewTemplate<MessageBar>}
+ * @type ElementViewTemplate
  */
 export declare const template: ElementViewTemplate<MessageBar>;

package/dist/esm/message-bar/message-bar.template.js

@@ -2,8 +2,8 @@ import { html } from '@microsoft/fast-element';
 /**
  * Generates a template for the MessageBar component.
  * @public
- * @param {MessageBar} T - The type of the MessageBar.
- * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
+ * @param T - The type of the MessageBar.
+ * @returns The template for the MessageBar component.
  */
 export function messageBarTemplate() {
     return html `
@@ -19,7 +19,7 @@ export function messageBarTemplate() {
 }
 /**
  * The template for the MessageBar component.
- * @type {ElementViewTemplate<MessageBar>}
+ * @type ElementViewTemplate
  */
 export const template = messageBarTemplate();
 //# sourceMappingURL=message-bar.template.js.map

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

@@ -3,3 +3,4 @@ export { DropdownOption } from './option.js';
 export { isDropdownOption, type DropdownOptionOptions } from './option.options.js';
 export { styles as DropdownOptionStyles } from './option.styles.js';
 export { template as DropdownOptionTemplate } from './option.template.js';
+export { tagName as OptionTagName } from './option.options.js';

package/dist/esm/option/index.js

@@ -3,4 +3,5 @@ export { DropdownOption } from './option.js';
 export { isDropdownOption } from './option.options.js';
 export { styles as DropdownOptionStyles } from './option.styles.js';
 export { template as DropdownOptionTemplate } from './option.template.js';
+export { tagName as OptionTagName } from './option.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/option/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAA8B,MAAM,qBAAqB,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/option/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAA8B,MAAM,qBAAqB,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/option/option.definition.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"option.definition.js","sourceRoot":"","sources":["../../../src/option/option.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IAC/C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"option.definition.js","sourceRoot":"","sources":["../../../src/option/option.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IAC/C,IAAI,EAAE,OAAO;IACb,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

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

@@ -18,3 +18,9 @@ export declare function isDropdownOption(value: Node | null, tagName?: string):
 export type DropdownOptionOptions = StartOptions<DropdownOption> & {
     checkedIndicator?: StaticallyComposableHTML<DropdownOption>;
 };
+/**
+ * The tag name for the option element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-option";

package/dist/esm/option/option.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * Predicate function that determines if the element should be considered an option.
  *
@@ -12,4 +13,10 @@ export function isDropdownOption(value, tagName = '-option') {
     }
     return value.tagName.toLowerCase().endsWith(tagName);
 }
+/**
+ * The tag name for the option element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-option`;
 //# sourceMappingURL=option.options.js.map