@fluentui/web-components 3.0.0-beta.93 → 3.0.0-beta.95

package/dist/web-components.d.ts

@@ -16,6 +16,8 @@ import { ViewTemplate } from '@microsoft/fast-element';
  * An Accordion Custom HTML Element
  * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
  *
+ * @tag fluent-accordion
+ *
  * @slot - The default slot for the accordion items
  * @fires change - Fires a custom 'change' event when the active item changes
  *
@@ -173,6 +175,9 @@ export declare type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemM
 
 /**
  * Accordion Item configuration options
+ *
+ * @tag fluent-accordion-item
+ *
  * @public
  */
 export declare type AccordionItemOptions = StartEndOptions<AccordionItem> & {
@@ -367,6 +372,8 @@ export declare type AnchorTarget = ValuesOf<typeof AnchorTarget>;
  * An Avatar Custom HTML Element.
  * Based on BaseAvatar and includes style and layout specific attributes
  *
+ * @tag fluent-avatar
+ *
  * @public
  */
 export declare class Avatar extends BaseAvatar {
@@ -635,6 +642,8 @@ export declare class Badge extends FASTElement {
     /**
      * The appearance the badge should have.
      *
+     * @tag fluent-badge
+     *
      * @public
      * @remarks
      * HTML Attribute: appearance
@@ -3383,6 +3392,8 @@ export declare const borderRadiusXLarge = "var(--borderRadiusXLarge)";
  * A Button Custom HTML Element.
  * Based on BaseButton and includes style and layout specific attributes
  *
+ * @tag fluent-button
+ *
  * @public
  */
 export declare class Button extends BaseButton {
@@ -3542,6 +3553,8 @@ export declare type ButtonType = ValuesOf<typeof ButtonType>;
  * A Checkbox Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#checkbox | ARIA checkbox }.
  *
+ * @tag fluent-checkbox
+ *
  * @slot checked-indicator - The checked indicator
  * @slot indeterminate-indicator - The indeterminate indicator
  * @fires change - Emits a custom change event when the checked state changes
@@ -5741,6 +5754,9 @@ export declare const colorTransparentStrokeInteractive = "var(--colorTransparent
 
 /**
  * The base class used for constructing a fluent-compound-button custom element
+ *
+ * @tag fluent-compound-button
+ *
  * @public
  */
 export declare class CompoundButton extends Button {
@@ -5812,6 +5828,9 @@ export declare const CompoundButtonTemplate: ElementViewTemplate<CompoundButton>
 
 /**
  * The base class used for constructing a fluent-badge custom element
+ *
+ * @tag fluent-counter-badge
+ *
  * @public
  */
 export declare class CounterBadge extends FASTElement {
@@ -6062,6 +6081,8 @@ export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => Matc
 /**
  * A Dialog Custom HTML Element.
  *
+ * @tag fluent-dialog
+ *
  * @public
  */
 export declare class Dialog extends FASTElement {
@@ -6119,6 +6140,8 @@ export declare class Dialog extends FASTElement {
 /**
  * Dialog Body component that extends the FASTElement class.
  *
+ * @tag fluent-dialog-body
+ *
  * @public
  * @extends FASTElement
  */
@@ -6194,6 +6217,8 @@ export declare function display(displayValue: CSSDisplayPropertyValue): string;
  * A Divider Custom HTML Element.
  * Based on BaseDivider and includes style and layout specific attributes
  *
+ * @tag fluent-divider
+ *
  * @public
  */
 export declare class Divider extends BaseDivider {
@@ -6310,6 +6335,9 @@ export declare const DividerTemplate: ElementViewTemplate<Divider>;
 
 /**
  * A Drawer component that allows content to be displayed in a side panel. It can be rendered as modal or non-modal.
+ *
+ * @tag fluent-drawer
+ *
  * @extends FASTElement
  *
  * @attr {DrawerType} type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
@@ -6402,6 +6430,9 @@ export declare class Drawer extends FASTElement {
 
 /**
  * A DrawerBody component to layout drawer content
+ *
+ * @tag fluent-drawer-body
+ *
  * @extends FASTElement
  *
  * @slot title - The title slot
@@ -6498,6 +6529,8 @@ export declare type DrawerType = ValuesOf<typeof DrawerType>;
 /**
  * The Fluent Dropdown Element. Implements {@link @microsoft/fast-foundation#BaseDropdown}.
  *
+ * @tag fluent-dropdown
+ *
  * @slot - The default slot. Accepts a {@link (Listbox:class)} element.
  * @slot indicator - The indicator slot.
  * @slot control - The control slot. This slot is automatically populated and should not be manually manipulated.
@@ -6571,6 +6604,8 @@ export declare const dropdownInputTemplate: ViewTemplate<BaseDropdown, any>;
  * A DropdownOption Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#option | ARIA option } role.
  *
+ * @tag fluent-dropdown-option
+ *
  * @slot - The default slot for the option's content.
  * @slot checked-indicator - The checked indicator.
  * @slot description - Optional description content.
@@ -6981,6 +7016,8 @@ export declare function endSlotTemplate<TSource extends StartEnd = StartEnd, TPa
  * A Field Custom HTML Element.
  * Based on BaseField and includes style and layout specific attributes
  *
+ * @tag fluent-field
+ *
  * @public
  */
 export declare class Field extends BaseField {
@@ -7155,6 +7192,9 @@ export declare const getDirection: (rootNode: HTMLElement) => Direction;
 
 /**
  * The base class used for constucting a fluent image custom element
+ *
+ * @tag fluent-image
+ *
  * @public
  */
 declare class Image_2 extends FASTElement {
@@ -7293,6 +7333,9 @@ export declare function isTreeItem(element?: Node | null, tagName?: string): ele
 
 /**
  * The base class used for constructing a fluent-label custom element
+ *
+ * @tag fluent-label
+ *
  * @public
  */
 export declare class Label extends FASTElement {
@@ -7446,6 +7489,8 @@ export declare const lineHeightHero900 = "var(--lineHeightHero900)";
  * An Anchor Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
  *
+ * @tag fluent-link
+ *
  * @slot start - Content which can be provided before the link content
  * @slot end - Content which can be provided after the link content
  * @slot - The default slot for link content
@@ -7526,6 +7571,8 @@ export declare const LinkTemplate: ElementViewTemplate<Link>;
  * A Listbox Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox } role.
  *
+ * @tag fluent-listbox
+ *
  * @slot - The default slot for the options.
  * @emits connected - Dispatched when the element is connected to the DOM.
  *
@@ -7782,6 +7829,9 @@ export declare type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQu
 
 /**
  * A Menu component that provides a customizable menu element.
+ *
+ * @tag fluent-menu
+ *
  * @class Menu
  * @extends FASTElement
  *
@@ -8004,6 +8054,9 @@ export declare class Menu extends FASTElement {
 
 /**
  * The base class used for constructing a fluent-menu-button custom element
+ *
+ * @tag fluent-menu-button
+ *
  * @public
  */
 export declare class MenuButton extends Button {
@@ -8084,6 +8137,8 @@ export declare const MenuDefinition: FASTElementDefinition<typeof Menu>;
  * A Switch Custom HTML Element.
  * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
  *
+ * @tag fluent-menu-item
+ *
  * @slot indicator - The checkbox or radio indicator
  * @slot start - Content which can be provided before the menu item content
  * @slot - The default slot for menu item content
@@ -8264,6 +8319,8 @@ export declare const MenuItemTemplate: ElementViewTemplate<MenuItem>;
  * A Menu Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
  *
+ * @tag fluent-menu-list
+ *
  * @slot - The default slot for the menu items
  *
  * @public
@@ -8362,6 +8419,8 @@ export declare const MenuTemplate: ElementViewTemplate<Menu>;
 /**
  * A Message Bar Custom HTML Element.
  *
+ * @tag fluent-message-bar
+ *
  * @slot actions - Content that can be provided for the actions
  * @slot dismiss - Content that can be provided for the dismiss button
  * @slot - The default slot for the content
@@ -8467,6 +8526,8 @@ export declare const MessageBarTemplate: ElementViewTemplate<MessageBar>;
  * A Progress HTML Element.
  * Based on BaseProgressBar and includes style and layout specific attributes
  *
+ * @tag fluent-progress-bar
+ *
  * @public
  */
 declare class ProgressBar_2 extends BaseProgressBar {
@@ -8553,6 +8614,8 @@ export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarVali
  * A Radio Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
  *
+ * @tag fluent-radio
+ *
  * @slot checked-indicator - The checked indicator slot
  * @fires change - Emits a custom change event when the checked state changes
  * @fires input - Emits a custom input event when the checked state changes
@@ -8629,6 +8692,8 @@ export declare const RadioDefinition: FASTElementDefinition<typeof Radio>;
  * A Radio Group Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
  *
+ * @tag fluent-radio-group
+ *
  * @public
  *
  * @slot - The default slot for the radio group
@@ -8950,6 +9015,8 @@ export declare const RadioTemplate: ElementViewTemplate<Radio>;
  * A Rating Display Custom HTML Element.
  * Based on BaseRatingDisplay and includes style and layout specific attributes
  *
+ * @tag fluent-rating-display
+ *
  * @public
  */
 export declare class RatingDisplay extends BaseRatingDisplay {
@@ -9155,6 +9222,8 @@ export declare const shadow8Brand = "var(--shadow8Brand)";
 /**
  * The base class used for constructing a fluent-slider custom element
  *
+ * @tag fluent-slider
+ *
  * @slot thumb - The slot for a custom thumb element.
  * @csspart thumb-container - The container element of the thumb.
  * @csspart track-container - The container element of the track.
@@ -9733,6 +9802,8 @@ export declare const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
  * A Spinner Custom HTML Element.
  * Based on BaseSpinner and includes style and layout specific attributes
  *
+ * @tag fluent-spinner
+ *
  * @public
  */
 export declare class Spinner extends BaseSpinner {
@@ -9882,6 +9953,13 @@ declare const styles: ElementStyles;
 export { styles as ButtonStyles }
 export { styles as MenuButtonStyles }
 
+/**
+ * A Switch Custom HTML Element.
+ * Based on BaseCheckbox and includes style and layout specific attributes
+ *
+ * @tag fluent-switch
+ *
+ */
 export declare class Switch extends BaseCheckbox {
     constructor();
 }
@@ -9921,6 +9999,8 @@ export declare const SwitchTemplate: ElementViewTemplate<Switch>;
 
 /**
  * Tab extends the FASTTab and is a child of the TabList
+ *
+ * @tag fluent-tab
  */
 export declare class Tab extends FASTElement {
     /**
@@ -9941,6 +10021,9 @@ export declare const TabDefinition: FASTElementDefinition<typeof Tab>;
 
 /**
  * A BaseTablist component with extra logic for handling the styled active tab indicator.
+ *
+ * @tag fluent-tablist
+ *
  * @public
  */
 export declare class Tablist extends BaseTablist {
@@ -10103,6 +10186,8 @@ export declare type TabOptions = StartEndOptions<Tab>;
 
 /**
  * @deprecated - Use tablist instead
+ *
+ * @tag fluent-tab-panel
  */
 export declare class TabPanel extends FASTElement {
 }
@@ -10118,6 +10203,8 @@ export declare const TabPanelTemplate: ElementViewTemplate<TabPanel, any>;
 
 /**
  * @deprecated - Use tablist instead
+ *
+ * @tag fluent-tabs
  */
 export declare class Tabs extends BaseTabs {
     /**
@@ -10264,6 +10351,9 @@ export declare const TabTemplate: ElementViewTemplate<Tab, any>;
 
 /**
  * The base class used for constructing a fluent-text custom element
+ *
+ * @tag fluent-text
+ *
  * @public
  */
 declare class Text_2 extends FASTElement {
@@ -10376,6 +10466,12 @@ export declare const TextAlign: {
  */
 export declare type TextAlign = ValuesOf<typeof TextAlign>;
 
+/**
+ * The Fluent TextArea Element.
+ *
+ * @tag fluent-text-area
+ *
+ */
 export declare class TextArea extends BaseTextArea {
     protected labelSlottedNodesChanged(): void;
     /**
@@ -10524,6 +10620,8 @@ export declare type TextFont = ValuesOf<typeof TextFont>;
  * A Text Input Custom HTML Element.
  * Based on BaseTextInput and includes style and layout specific attributes
  *
+ * @tag fluent-text-input
+ *
  * @public
  */
 export declare class TextInput extends BaseTextInput {
@@ -10686,6 +10784,8 @@ export declare type Theme = Record<string, string | number>;
 /**
  * The base class used for constructing a `<fluent-toggle-button>` custom element.
  *
+ * @tag fluent-toggle-button
+ *
  * @public
  */
 export declare class ToggleButton extends Button {
@@ -10809,6 +10909,9 @@ export declare const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
 /**
  * A Tooltip Custom HTML Element.
  * Based on ARIA APG Tooltip Pattern {@link https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ }
+ *
+ * @tag fluent-tooltip
+ *
  * @public
  */
 export declare class Tooltip extends FASTElement {
@@ -10937,6 +11040,12 @@ export declare const TooltipStyles: ElementStyles;
  */
 export declare const TooltipTemplate: ViewTemplate<Tooltip, any>;
 
+/**
+ * The Fluent Tree Item Element. Implements {@link @microsoft/fast-foundation#BaseTreeItem}.
+ *
+ * @tag fluent-tree-item
+ *
+ */
 export declare class TreeItem extends BaseTreeItem {
     /**
      * The size of the tree item element

package/dist/web-components.js

@@ -13563,6 +13563,10 @@ class BaseTreeItem extends FASTElement {
    * @public
    */
   expandedChanged(prev, next) {
+    this.$emit("toggle", {
+      oldState: prev ? "open" : "closed",
+      newState: next ? "open" : "closed"
+    });
     toggleState(this.elementInternals, "expanded", next);
     if (this.childTreeItems && this.childTreeItems.length > 0) {
       this.elementInternals.ariaExpanded = next ? "true" : "false";

package/dist/web-components.min.js

@@ -564,7 +564,7 @@ const p=Object.freeze({prefix:"fluent",shadowRootMode:"open",registry:customElem
 
   :host(:not(:popover-open)){display:none}:host{--position-area:block-start;--position-try-options:flip-block;--block-offset:${qt};--inline-offset:${pe};background:${I};border-radius:${C};border:1px solid ${J};box-sizing:border-box;color:${P};display:inline-flex;filter:drop-shadow(0 0 2px ${Zl}) drop-shadow(0 4px 8px ${Jl});font-family:${v};font-size:${F};inset:unset;line-height:${X};margin:unset;max-width:240px;overflow:visible;padding:4px ${ne} 6px;position:absolute;position-area:var(--position-area);position-try-options:var(--position-try-options);width:auto;z-index:1}@supports (inset-area:block-start){:host{inset-area:var(--position-area);position-try-fallbacks:var(--position-try-options)}}:host(:is([positioning^='above'],[positioning^='below'],:not([positioning]))){margin-block:var(--block-offset)}:host(:is([positioning^='before'],[positioning^='after'])){margin-inline:var(--inline-offset);--position-try-options:flip-inline}:host([positioning='above-start']){--position-area:${Te["above-start"]}}:host([positioning='above']){--position-area:${Te.above}}:host([positioning='above-end']){--position-area:${Te["above-end"]}}:host([positioning='below-start']){--position-area:${Te["below-start"]}}:host([positioning='below']){--position-area:${Te.below}}:host([positioning='below-end']){--position-area:${Te["below-end"]}}:host([positioning='before-top']){--position-area:${Te["before-top"]}}:host([positioning='before']){--position-area:${Te.before}}:host([positioning='before-bottom']){--position-area:${Te["before-bottom"]}}:host([positioning='after-top']){--position-area:${Te["after-top"]}}:host([positioning='after']){--position-area:${Te.after}}:host([positioning='after-bottom']){--position-area:${Te["after-bottom"]}}`,Nf=b`<template popover aria-hidden="true"><slot></slot></template>`,Ff=_o.compose({name:`${p.prefix}-tooltip`,template:Nf,styles:Ef});Ff.define(p.registry);const Ca={subtle:"subtle",subtleAlpha:"subtle-alpha",transparent:"transparent"},Sa={small:"small",medium:"medium"};function Ee(o,e="-tree-item"){return o?.nodeType!==Node.ELEMENT_NODE?!1:o.tagName.toLowerCase().endsWith(e)}var Mf=Object.defineProperty,Df=Object.getOwnPropertyDescriptor,Ia=(o,e,t,r)=>{for(var i=r>1?void 0:r?Df(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Mf(e,t,i),i};class Zi extends ${constructor(){super(),this.currentSelected=null,this.currentFocused=null,this.elementInternals=this.attachInternals(),this.childTreeItems=[],this.elementInternals.role="tree"}childTreeItemsChanged(){this.updateCurrentSelected()}updateCurrentSelected(){const e=this.querySelector("[selected]");this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem())}keydownHandler(e){if(e.defaultPrevented)return;const t=e.target;if(!Ee(t)||this.childTreeItems.length<1)return!0;const r=this.getVisibleNodes();switch(e.key){case go:{r.length&&r[0].focus();return}case po:{r.length&&r[r.length-1].focus();return}case co:{t?.childTreeItems?.length&&t.expanded?t.expanded=!1:Ee(t.parentElement)&&t.parentElement.focus();return}case ho:{t?.childTreeItems?.length&&(t.expanded?this.focusNextNode(1,t):t.expanded=!0);return}case lo:{this.focusNextNode(1,t);return}case uo:{this.focusNextNode(-1,t);return}case bo:{this.clickHandler(e);return}case Yo:{t.selected=!0;return}}return!0}focusHandler(e){if(!(this.childTreeItems.length<1)){if(e.target===this){this.currentFocused=this.getValidFocusableItem(),this.currentFocused?.focus();return}this.contains(e.target)&&(this.setAttribute("tabindex","-1"),this.currentFocused=e.target)}}blurHandler(e){e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute("tabindex","0")}clickHandler(e){if(e.defaultPrevented)return;if(!Ee(e.target))return!0;const t=e.target;t.toggleExpansion(),t.selected=!0}changeHandler(e){if(e.defaultPrevented)return;if(!Ee(e.target))return!0;const t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&Ee(this.currentSelected)&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null)}getValidFocusableItem(){const e=this.getVisibleNodes();let t=e.findIndex(r=>r.selected);return t===-1&&(t=e.findIndex(r=>Ee(r))),t!==-1?e[t]:null}getVisibleNodes(){return Array.from(this.querySelectorAll("*")).filter(e=>Ee(e)&&e.offsetParent!==null)}focusNextNode(e,t){const r=this.getVisibleNodes();if(!r.length)return;const i=r[r.indexOf(t)+e];si(i)&&i.focus()}}Ia([g],Zi.prototype,"currentSelected",2),Ia([g],Zi.prototype,"childTreeItems",2);var Vf=Object.defineProperty,Hf=Object.getOwnPropertyDescriptor,Pa=(o,e,t,r)=>{for(var i=r>1?void 0:r?Hf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Vf(e,t,i),i};class Ji extends Zi{constructor(){super(...arguments),this.size=Sa.small,this.appearance=Ca.subtle}sizeChanged(){this.updateSizeAndAppearance()}appearanceChanged(){this.updateSizeAndAppearance()}childTreeItemsChanged(){super.childTreeItemsChanged(),this.updateSizeAndAppearance()}updateSizeAndAppearance(){this.childTreeItems?.length&&this.childTreeItems.forEach(e=>{e.size=this.size,e.appearance=this.appearance})}}Pa([a],Ji.prototype,"size",2),Pa([a],Ji.prototype,"appearance",2);const Lf=u`
   ${k("block")}
-  :host{outline:none}`,jf=b`<template tabindex="0" @click="${(o,e)=>o.clickHandler(e.event)}" @focusin="${(o,e)=>o.focusHandler(e.event)}" @focusout="${(o,e)=>o.blurHandler(e.event)}" @keydown="${(o,e)=>o.keydownHandler(e.event)}" @change="${(o,e)=>o.changeHandler(e.event)}" ${ri({property:"childTreeItems",filter:o=>Ee(o)})}><slot></slot></template>`,Rf=Ji.compose({name:`${p.prefix}-tree`,template:jf,styles:Lf});Rf.define(p.registry);var qf=Object.defineProperty,Gf=Object.getOwnPropertyDescriptor,Eo=(o,e,t,r)=>{for(var i=r>1?void 0:r?Gf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&qf(e,t,i),i};class ro extends ${constructor(){super(),this.elementInternals=this.attachInternals(),this.expanded=!1,this.selected=!1,this.empty=!1,this.childTreeItems=[],this.elementInternals.role="treeitem"}expandedChanged(e,t){y(this.elementInternals,"expanded",t),this.childTreeItems&&this.childTreeItems.length>0&&(this.elementInternals.ariaExpanded=t?"true":"false")}selectedChanged(e,t){this.$emit("change"),y(this.elementInternals,"selected",t),this.elementInternals.ariaSelected=t?"true":"false"}dataIndentChanged(e,t){this.styles!==void 0&&this.$fastController.removeStyles(this.styles),this.styles=u`
+  :host{outline:none}`,jf=b`<template tabindex="0" @click="${(o,e)=>o.clickHandler(e.event)}" @focusin="${(o,e)=>o.focusHandler(e.event)}" @focusout="${(o,e)=>o.blurHandler(e.event)}" @keydown="${(o,e)=>o.keydownHandler(e.event)}" @change="${(o,e)=>o.changeHandler(e.event)}" ${ri({property:"childTreeItems",filter:o=>Ee(o)})}><slot></slot></template>`,Rf=Ji.compose({name:`${p.prefix}-tree`,template:jf,styles:Lf});Rf.define(p.registry);var qf=Object.defineProperty,Gf=Object.getOwnPropertyDescriptor,Eo=(o,e,t,r)=>{for(var i=r>1?void 0:r?Gf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&qf(e,t,i),i};class ro extends ${constructor(){super(),this.elementInternals=this.attachInternals(),this.expanded=!1,this.selected=!1,this.empty=!1,this.childTreeItems=[],this.elementInternals.role="treeitem"}expandedChanged(e,t){this.$emit("toggle",{oldState:e?"open":"closed",newState:t?"open":"closed"}),y(this.elementInternals,"expanded",t),this.childTreeItems&&this.childTreeItems.length>0&&(this.elementInternals.ariaExpanded=t?"true":"false")}selectedChanged(e,t){this.$emit("change"),y(this.elementInternals,"selected",t),this.elementInternals.ariaSelected=t?"true":"false"}dataIndentChanged(e,t){this.styles!==void 0&&this.$fastController.removeStyles(this.styles),this.styles=u`
       :host{--indent:${t}}`,this.$fastController.addStyles(this.styles)}childTreeItemsChanged(){this.empty=this.childTreeItems?.length===0,this.updateChildTreeItems()}updateChildTreeItems(){this.childTreeItems?.length&&(this.expanded||(this.expanded=Array.from(this.querySelectorAll("[selected]")).some(e=>Ee(e))),this.childTreeItems.forEach(e=>{this.setIndent(e)}))}setIndent(e){const t=this.dataIndent??0;e.dataIndent=t+1}toggleExpansion(){this.childTreeItems?.length&&(this.expanded=!this.expanded)}get isNestedItem(){return Ee(this.parentElement)}}Eo([a({mode:"boolean"})],ro.prototype,"expanded",2),Eo([a({mode:"boolean"})],ro.prototype,"selected",2),Eo([a({mode:"boolean"})],ro.prototype,"empty",2),Eo([a({attribute:"data-indent"})],ro.prototype,"dataIndent",2),Eo([g],ro.prototype,"childTreeItems",2);var Wf=Object.defineProperty,Xf=Object.getOwnPropertyDescriptor,za=(o,e,t,r)=>{for(var i=r>1?void 0:r?Xf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Wf(e,t,i),i};class es extends ro{constructor(){super(...arguments),this.size=Sa.small,this.appearance=Ca.subtle}sizeChanged(){this.updateSizeAndAppearance()}appearanceChanged(){this.updateSizeAndAppearance()}childTreeItemsChanged(){super.childTreeItemsChanged(),this.updateSizeAndAppearance()}updateSizeAndAppearance(){this.childTreeItems?.length&&this.childTreeItems.forEach(e=>{e.size=this.size,e.appearance=this.appearance})}}za([a],es.prototype,"size",2),za([a],es.prototype,"appearance",2);const Uf=u`
   ${k("block")}
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-beta.93",
+  "version": "3.0.0-beta.95",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -23,7 +23,8 @@
     "dist/dts/",
     "dist/esm/",
     "dist/*.js",
-    "dist/*.d.ts"
+    "dist/*.d.ts",
+    "custom-elements.json"
   ],
   "exports": {
     ".": {
@@ -76,6 +77,7 @@
     "./dist/web-components.min.js"
   ],
   "scripts": {
+    "analyze": "cem analyze",
     "verify-packaging": "node ./scripts/verify-packaging",
     "type-check": "node ./scripts/type-check",
     "benchmark": "yarn clean && yarn compile:benchmark && yarn compile && node ./scripts/run-benchmarks",
@@ -83,7 +85,7 @@
     "compile:benchmark": "rollup -c rollup.bench.js",
     "clean": "node ./scripts/clean dist",
     "generate-api": "api-extractor run --local",
-    "build": "yarn compile && yarn rollup -c && yarn generate-api",
+    "build": "yarn compile && yarn rollup -c && yarn generate-api && yarn analyze",
     "lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
     "format": "prettier -w src/**/*.{ts,html} --ignore-path ../../.prettierignore",
@@ -96,11 +98,16 @@
     "e2e:local": "node ./scripts/e2e.js --ui"
   },
   "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.10.4",
     "@fluentui/scripts-api-extractor": "*",
     "@microsoft/fast-element": "2.0.0",
     "@tensile-perf/web-components": "~0.2.0",
     "@storybook/html": "7.6.20",
     "@storybook/html-webpack5": "7.6.20",
+    "@wc-toolkit/cem-validator": "1.0.3",
+    "@wc-toolkit/cem-inheritance": "1.0.4",
+    "@wc-toolkit/module-path-resolver": "1.0.0",
+    "@wc-toolkit/type-parser": "1.0.3",
     "chromedriver": "^125.0.0"
   },
   "dependencies": {
@@ -119,5 +126,6 @@
       "patch"
     ],
     "tag": "beta"
-  }
+  },
+  "customElements": "./custom-elements.json"
 }