@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/esm/components/image/image.options.js

@@ -0,0 +1,12 @@
+import { ImageFit, ImageShape } from '@fluentui/web-components';
+
+/** Fit values for {@link Image}. */
+const ImageFits = {
+  ...ImageFit
+};
+/** Shape values for {@link Image}. */
+const ImageShapes = {
+  ...ImageShape
+};
+
+export { ImageFits, ImageShapes };

package/dist/esm/components/image/image.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.options.js","sourceRoot":"","sources":["../../../../../../../src/components/image/image.options.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,IAAI,cAAc,EAC1B,UAAU,IAAI,gBAAgB,EAC/B,MAAM,0BAA0B,CAAC;AAGlC,oCAAoC;AACpC,MAAM,CAAC,MAAM,SAAS,GAAG,EAAE,GAAG,cAAc,EAAW,CAAC;AAGxD,sCAAsC;AACtC,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,GAAG,gBAAgB,EAAW,CAAC"}

package/dist/esm/components/image/index.js

@@ -1,4 +1,4 @@
-export { Image } from "./image";
-export { ImageFit, ImageShape, ImageStyles, ImageTemplate } from "@fluentui/web-components";
-export { definition as ImageDefinition } from "./image.definition";
+export { Image } from "./image.js";
+export { ImageFits, ImageShapes } from "./image.options.js";
+export { definition as ImageDefinition } from "./image.definition.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EACL,QAAQ,EACR,UAAU,EACV,WAAW,EACX,aAAa,EACd,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/esm/components/label/define.js

@@ -1,4 +1,4 @@
-import { definition } from "./label.definition";
-import { DesignSystem } from "../design-system";
+import { definition } from "./label.definition.js";
+import { DesignSystem } from "../design-system.js";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/label/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/label/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/label/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/label/index.js

@@ -1,4 +1,4 @@
-export { Label } from "./label";
-export { LabelSize, LabelStyles, LabelTemplate, LabelWeight } from "@fluentui/web-components";
-export { definition as LabelDefinition } from "./label.definition";
+export { Label } from "./label.js";
+export { definition as LabelDefinition } from "./label.definition.js";
+export { LabelSizes, LabelWeights } from "./label.options.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EACL,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACZ,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/esm/components/label/label.definition.js

@@ -1,16 +1,19 @@
-import { Label, LabelStyles, LabelTemplate } from "@fluentui/web-components";
-import { DesignSystem } from "../design-system";
+import { Label } from './label.js';
+import { LabelStyles, LabelTemplate } from '@fluentui/web-components';
+import { DesignSystem } from '../design-system.js';
+
 /**
  * The Fabric Label component.
  *
  * @public
  */
-export const definition = Label.compose({
-    name: `${DesignSystem.prefix}-label`,
-    template: LabelTemplate,
-    styles: LabelStyles,
-    shadowOptions: {
-        delegatesFocus: true
-    }
+const definition = Label.compose({
+  name: `${DesignSystem.prefix}-label`,
+  template: LabelTemplate,
+  styles: LabelStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=label.definition.js.map
+
+export { definition };

package/dist/esm/components/label/label.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/label/label.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,QAAQ;IACpC,QAAQ,EAAE,aAAa;IACvB,MAAM,EAAE,WAAW;IACnB,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"label.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/label/label.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,QAAQ;IACpC,QAAQ,EAAE,aAAa;IACvB,MAAM,EAAE,WAAW;IACnB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/dist/esm/components/label/label.js

@@ -1,4 +1,5 @@
-import { Label as FluentLabel } from "@fluentui/web-components";
+import { Label as Label$1 } from '@fluentui/web-components';
+
 /**
  * Label
  * @summary A Fabric UI Label component that provides a customizable label element, supporting different sizes, weights, and required state indication.
@@ -30,6 +31,6 @@ import { Label as FluentLabel } from "@fluentui/web-components";
  * @tagname fabric-label
  * @public
  */
-export class Label extends FluentLabel {
-}
-//# sourceMappingURL=label.js.map
+class Label extends Label$1 {}
+
+export { Label };

package/dist/esm/components/label/label.options.js

@@ -0,0 +1,12 @@
+import { LabelSize, LabelWeight } from '@fluentui/web-components';
+
+/** Size values for {@link Label}. */
+const LabelSizes = {
+  ...LabelSize
+};
+/** Weight values for {@link Label}. */
+const LabelWeights = {
+  ...LabelWeight
+};
+
+export { LabelSizes, LabelWeights };

package/dist/esm/components/label/label.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.options.js","sourceRoot":"","sources":["../../../../../../../src/components/label/label.options.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,eAAe,EAC5B,WAAW,IAAI,iBAAiB,EACjC,MAAM,0BAA0B,CAAC;AAGlC,qCAAqC;AACrC,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,GAAG,eAAe,EAAW,CAAC;AAG1D,uCAAuC;AACvC,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,GAAG,iBAAiB,EAAW,CAAC"}

package/dist/esm/components/link/define.js

@@ -1,4 +1,4 @@
-import { definition } from "./link.definition";
-import { DesignSystem } from "../design-system";
+import { definition } from "./link.definition.js";
+import { DesignSystem } from "../design-system.js";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/link/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/link/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/link/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/link/index.js

@@ -1,4 +1,4 @@
-export { Link } from "./link";
-export { LinkAppearance, LinkTarget, LinkTemplate, LinkStyles } from "@fluentui/web-components";
-export { definition as LinkDefinition } from "./link.definition";
+export { Link } from "./link.js";
+export { LinkAppearances, LinkTargets, AnchorTargets } from "./link.options.js";
+export { definition as LinkDefinition } from "./link.definition.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EACL,cAAc,EACd,UAAU,EACV,YAAY,EACZ,UAAU,EACX,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/components/link/link.definition.js

@@ -1,16 +1,19 @@
-import { Link, LinkStyles, LinkTemplate } from "@fluentui/web-components";
-import { DesignSystem } from "../design-system";
+import { Link } from './link.js';
+import { LinkStyles, LinkTemplate } from '@fluentui/web-components';
+import { DesignSystem } from '../design-system.js';
+
 /**
  * The Fabric Link component.
  *
  * @public
  */
-export const definition = Link.compose({
-    name: `${DesignSystem.prefix}-link`,
-    template: LinkTemplate,
-    styles: LinkStyles,
-    shadowOptions: {
-        delegatesFocus: true
-    }
+const definition = Link.compose({
+  name: `${DesignSystem.prefix}-link`,
+  template: LinkTemplate,
+  styles: LinkStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=link.definition.js.map
+
+export { definition };

package/dist/esm/components/link/link.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/link/link.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IACrC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,OAAO;IACnC,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,UAAU;IAClB,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"link.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/link/link.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IACrC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,OAAO;IACnC,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,UAAU;IAClB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/dist/esm/components/link/link.js

@@ -1,4 +1,5 @@
-import { Link as FluentLink } from "@fluentui/web-components";
+import { Link as Link$1 } from '@fluentui/web-components';
+
 /**
  * Link
  * @summary A Link Custom HTML Element based on Fluent UI's Link with custom styling and behavior.
@@ -10,7 +11,7 @@ import { Link as FluentLink } from "@fluentui/web-components";
  * </fabric-link>
  * ```
  *
- * @attr {string | undefined} appearance - The appearance the link should have.
+ * @attr {LinkAppearance} appearance - The appearance the link should have.
  * @attr {boolean | undefined} inline - The link is inline with text. In chromium browsers, if the link is contained within a semantic text element (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`) or `fluent-text`, `:host-context()` ensures inline links are styled appropriately.
  * @attr {string | undefined} download - Prompts the user to save the linked URL.
  * @attr {string | undefined} href - The URL the hyperlink references.
@@ -45,6 +46,6 @@ import { Link as FluentLink } from "@fluentui/web-components";
  * @tagname fabric-link
  * @public
  */
-export class Link extends FluentLink {
-}
-//# sourceMappingURL=link.js.map
+class Link extends Link$1 {}
+
+export { Link };

package/dist/esm/components/link/link.options.js

@@ -0,0 +1,16 @@
+import { LinkAppearance, LinkTarget, AnchorTarget } from '@fluentui/web-components';
+
+/** Appearance values for {@link Link}. */
+const LinkAppearances = {
+  ...LinkAppearance
+};
+/** Target values for {@link Link}. */
+const LinkTargets = {
+  ...LinkTarget
+};
+/** Anchor target values exposed for downstream consumers. */
+const AnchorTargets = {
+  ...AnchorTarget
+};
+
+export { AnchorTargets, LinkAppearances, LinkTargets };

package/dist/esm/components/link/link.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.options.js","sourceRoot":"","sources":["../../../../../../../src/components/link/link.options.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,IAAI,oBAAoB,EACtC,UAAU,IAAI,gBAAgB,EAC9B,YAAY,IAAI,kBAAkB,EACnC,MAAM,0BAA0B,CAAC;AAGlC,0CAA0C;AAC1C,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,GAAG,oBAAoB;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;AAE9C,sCAAsC;AACtC,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,GAAG,gBAAgB,EAAW,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC;AAEtC,6DAA6D;AAC7D,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,GAAG,kBAAkB,EAAW,CAAC;AAEhE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC"}

package/dist/esm/components/listbox/listbox.definition.js

@@ -1,6 +1,7 @@
-import { DesignSystem } from "../design-system";
-import { ListboxStyles, ListboxTemplate } from "@fluentui/web-components";
-import { Listbox } from "./listbox";
+import { DesignSystem } from '../design-system.js';
+import { ListboxStyles, ListboxTemplate } from '@fluentui/web-components';
+import { Listbox } from './listbox.js';
+
 /**
  * The Listbox element definition.
  *
@@ -8,13 +9,14 @@ import { Listbox } from "./listbox";
  * @remarks
  * HTML Element: `<fabric-listbox>`
  */
-export const definition = Listbox.compose({
-    name: `${DesignSystem.prefix}-listbox`,
-    template: ListboxTemplate,
-    styles: ListboxStyles,
-    shadowOptions: {
-        delegatesFocus: true
-        // No slotAssignment needed for listbox based on temp implementation
-    }
+const definition = Listbox.compose({
+  name: `${DesignSystem.prefix}-listbox`,
+  template: ListboxTemplate,
+  styles: ListboxStyles,
+  shadowOptions: {
+    delegatesFocus: true
+    // No slotAssignment needed for listbox based on temp implementation
+  }
 });
-//# sourceMappingURL=listbox.definition.js.map
+
+export { definition };

package/dist/esm/components/listbox/listbox.js

@@ -1,7 +1,14 @@
-import { Listbox as FluentListbox } from "@fluentui/web-components";
+import { Updates } from '@microsoft/fast-element';
+import { Listbox as Listbox$1, isDropdownOption } from '@fluentui/web-components';
+import '../option/option.definition.js';
+import { isOptionGroup } from '../option-group/option-group.options.js';
+import { waitForConnectedDescendants } from '../../util/descendants.js';
+import { toggleState } from '../../util/element-internals.js';
+
 /**
  * Listbox
  * @summary A Listbox Custom HTML Element that allows for single or multiple selection from a list of options.
+ * Extends the Fluent Listbox to support option groups ({@link @fabric-msft/fabric-web#OptionGroup}).
  *
  * @example
  * ```html
@@ -12,6 +19,19 @@ import { Listbox as FluentListbox } from "@fluentui/web-components";
  * </fabric-listbox>
  * ```
  *
+ * @example
+ * ```html
+ * <fabric-listbox>
+ *   <fabric-option-group label="Fruits">
+ *     <fabric-option value="apple">Apple</fabric-option>
+ *     <fabric-option value="banana">Banana</fabric-option>
+ *   </fabric-option-group>
+ *   <fabric-option-group label="Vegetables">
+ *     <fabric-option value="carrot">Carrot</fabric-option>
+ *   </fabric-option-group>
+ * </fabric-listbox>
+ * ```
+ *
  * @attr {string} id - Sets the listbox ID to a unique value if one is not provided.
  * @attr {boolean | undefined} multiple - Indicates whether the listbox allows multiple selection.
  *
@@ -19,7 +39,7 @@ import { Listbox as FluentListbox } from "@fluentui/web-components";
  * @prop {Array<HTMLElement>} selectedOptions - The collection of child options that are selected.
  * @prop {number} selectedIndex - The index of the currently selected option.
  *
- * @slot - The default slot for the options.
+ * @slot - The default slot for the options and option groups.
  *
  * @method multipleChanged - Updates the multiple selection state of the listbox and its options. Parameters: prev (boolean | undefined), next (boolean | undefined).
  * @method clickHandler - Sets the `selected` state on a target option when clicked. Parameters: e (PointerEvent).
@@ -31,6 +51,159 @@ import { Listbox as FluentListbox } from "@fluentui/web-components";
  * @tagname fabric-listbox
  * @public
  */
-export class Listbox extends FluentListbox {
+class Listbox extends Listbox$1 {
+  /**
+   * Checks if an option belongs to a disabled option group.
+   *
+   * @param option - The option to check.
+   * @returns true if the option is inside a disabled option group.
+   * @internal
+   */
+  isOptionInDisabledGroup(option) {
+    return isOptionGroup(option.parentElement) && !!option.parentElement.disabled;
+  }
+  /**
+   * Sets the `selected` state on a target option when clicked.
+   * Overrides the base implementation to prevent selection of options in disabled groups.
+   *
+   * @param e - The pointer event
+   * @override
+   * @public
+   */
+  clickHandler(e) {
+    if (this.dropdown) {
+      return true;
+    }
+    const target = e.target;
+    if (isDropdownOption(target) && this.isOptionInDisabledGroup(target)) {
+      return true;
+    }
+    return super.clickHandler(e);
+  }
+  /**
+   * Selects an option by index.
+   * Overrides the base implementation to prevent selection of options in disabled groups.
+   *
+   * @param index - The index of the option to select.
+   * @override
+   * @public
+   */
+  selectOption(index) {
+    const option = this.enabledOptions[index !== null && index !== void 0 ? index : this.selectedIndex];
+    if (option && this.isOptionInDisabledGroup(option)) {
+      return;
+    }
+    super.selectOption(index);
+  }
+  /**
+   * Handles the slotchange event for the listbox.
+   * Overrides the base implementation to support option groups.
+   * Extracts options from both direct option elements and option group children,
+   * flattening them into a single options array while propagating group disabled states.
+   *
+   * @param e - The slot change event.
+   * @override
+   * @internal
+   */
+  slotchangeHandler(e) {
+    const target = e.target;
+    /**
+     * waitForConnectedDescendants waits for element registration, Updates.enqueue waits for FAST's reactive bindings to complete. Both are needed because slotted directives populate asynchronously.
+     */
+    waitForConnectedDescendants(this, () => {
+      // Defer to allow OptionGroup's slotted directive to populate
+      Updates.enqueue(() => {
+        const assigned = target.assignedElements();
+        const options = [];
+        for (const el of assigned) {
+          if (isOptionGroup(el)) {
+            const group = el;
+            options.push(...group.options);
+          } else if (isDropdownOption(el)) {
+            options.push(el);
+          }
+        }
+        this.options = options;
+      });
+    });
+  }
+  /**
+   * Handles changes to the options collection.
+   * Overrides the base implementation to apply group-aware ARIA positioning.
+   *
+   * @param prev - The previous options collection.
+   * @param next - The new options collection.
+   * @override
+   * @internal
+   */
+  optionsChanged(prev, next) {
+    var _a;
+    // Call the base implementation first
+    (_a = super.optionsChanged) === null || _a === void 0 ? void 0 : _a.call(this, prev, next);
+    // Apply group-scoped ARIA positioning
+    if (next) {
+      this.applyGroupScopedAria(next);
+    }
+  }
+  /**
+   * Build a list of groups and options
+   * @param options
+   * @param groups
+   */
+  setOptionGroups(options, groups) {
+    for (const option of options) {
+      const parent = option.parentElement;
+      const groupKey = isOptionGroup(parent) ? parent : null;
+      if (!groups.has(groupKey)) {
+        groups.set(groupKey, []);
+      }
+      groups.get(groupKey).push(option);
+    }
+  }
+  /**
+   * Applies group-scoped ARIA positioning attributes to options.
+   * Options within the same group share aria-setsize scoped to that group.
+   *
+   * @param options - The flattened options collection.
+   * @internal
+   */
+  applyGroupScopedAria(options) {
+    // Group options by their parent option-group (or null for ungrouped)
+    const groups = new Map();
+    this.setOptionGroups(options, groups);
+    // Apply ARIA attributes scoped to each group
+    for (const [group, groupOptions] of groups) {
+      const setSize = groupOptions.length;
+      groupOptions.forEach((option, index) => {
+        // set the position index
+        option.elementInternals.ariaPosInSet = `${index + 1}`;
+        // set the size of the group
+        option.elementInternals.ariaSetSize = `${setSize}`;
+        // Set aria-description to announce the group name for screen readers
+        if (group && isOptionGroup(group) && group.label) {
+          option.elementInternals.ariaDescription = group.label;
+        } else {
+          option.elementInternals.ariaDescription = null;
+        }
+      });
+    }
+  }
+  /**
+   * Updates the multiple selection state of the listbox and its options.
+   *
+   * @param prev - the previous multiple value
+   * @param next - the current multiple value
+   */
+  multipleChanged(prev, next) {
+    this.elementInternals.ariaMultiSelectable = next ? "true" : "false";
+    toggleState(this.elementInternals, "multiple", next);
+    Updates.enqueue(() => {
+      var _a;
+      (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(x => {
+        x.multiple = !!next;
+      });
+    });
+  }
 }
-//# sourceMappingURL=listbox.js.map
+
+export { Listbox };

package/dist/esm/components/listbox/listbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"listbox.js","sourceRoot":"","sources":["../../../../../../../src/components/listbox/listbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,OAAO,OAAQ,SAAQ,aAAa;CAAG"}
+{"version":3,"file":"listbox.js","sourceRoot":"","sources":["../../../../../../../src/components/listbox/listbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAExE,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,OAAO,OAAQ,SAAQ,aAAa;IACxC;;;;;;OAMG;IACK,uBAAuB,CAAC,MAAsB;QACpD,OAAO,CACL,aAAa,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CACvE,CAAC;IACJ,CAAC;IAED;;;;;;;OAOG;IACa,YAAY,CAAC,CAAe;QAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAC;QAEnC,IAAI,gBAAgB,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,EAAE,CAAC;YACrE,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/B,CAAC;IAED;;;;;;;OAOG;IACa,YAAY,CAAC,KAAc;QACzC,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,aAAa,CAAC,CAAC;QAChE,IAAI,MAAM,IAAI,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;;;;;;;;OASG;IACa,iBAAiB,CAAC,CAAQ;QACxC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAyB,CAAC;QAE3C;;WAEG;QACH,2BAA2B,CAAC,IAAI,EAAE,GAAG,EAAE;YACrC,6DAA6D;YAC7D,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;gBACnB,MAAM,QAAQ,GAAG,MAAM,CAAC,gBAAgB,EAAE,CAAC;gBAC3C,MAAM,OAAO,GAAqB,EAAE,CAAC;gBAErC,KAAK,MAAM,EAAE,IAAI,QAAQ,EAAE,CAAC;oBAC1B,IAAI,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC;wBACtB,MAAM,KAAK,GAAG,EAAiB,CAAC;wBAChC,OAAO,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;oBACjC,CAAC;yBAAM,IAAI,gBAAgB,CAAC,EAAE,CAAC,EAAE,CAAC;wBAChC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBACnB,CAAC;gBACH,CAAC;gBAED,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YACzB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;;;;;OAQG;IACa,cAAc,CAC5B,IAAkC,EAClC,IAAkC;;QAElC,qCAAqC;QACrC,MAAA,KAAK,CAAC,cAAc,qDAAG,IAAI,EAAE,IAAI,CAAC,CAAC;QAEnC,sCAAsC;QACtC,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,eAAe,CACrB,OAAyB,EACzB,MAA6C;QAE7C,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC7B,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;YACpC,MAAM,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;YAEvD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC1B,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YAC3B,CAAC;YACD,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACK,oBAAoB,CAAC,OAAyB;QACpD,qEAAqE;QACrE,MAAM,MAAM,GAAG,IAAI,GAAG,EAAoC,CAAC;QAE3D,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAEtC,6CAA6C;QAC7C,KAAK,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,IAAI,MAAM,EAAE,CAAC;YAC3C,MAAM,OAAO,GAAG,YAAY,CAAC,MAAM,CAAC;YACpC,YAAY,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBACrC,yBAAyB;gBACzB,MAAM,CAAC,gBAAgB,CAAC,YAAY,GAAG,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;gBACtD,4BAA4B;gBAC5B,MAAM,CAAC,gBAAgB,CAAC,WAAW,GAAG,GAAG,OAAO,EAAE,CAAC;gBAEnD,qEAAqE;gBACrE,IAAI,KAAK,IAAI,aAAa,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;oBACjD,MAAM,CAAC,gBAAgB,CAAC,eAAe,GAAG,KAAK,CAAC,KAAK,CAAC;gBACxD,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;gBACjD,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACa,eAAe,CAC7B,IAAyB,EACzB,IAAyB;QAEzB,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;QACrD,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;;YACnB,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC1B,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC;YACtB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;CACF"}

package/dist/esm/components/loading-button/index.js

@@ -1,5 +1,3 @@
-export { LoadingButton } from "./loading-button";
-export { definition as LoadingButtonDefinition } from "./loading-button.definition";
-export { template as LoadingButtonTemplate } from "./loading-button.template";
-export { styles as LoadingButtonStyles } from "./loading-button.styles";
+export { LoadingButton } from "./loading-button.js";
+export { definition as LoadingButtonDefinition } from "./loading-button.definition.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/loading-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/loading-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/loading-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/esm/components/loading-button/loading-button.definition.js

@@ -1,7 +1,8 @@
-import { DesignSystem } from "../design-system";
-import { LoadingButton } from "./loading-button";
-import { styles } from "./loading-button.styles";
-import { template } from "./loading-button.template";
+import { DesignSystem } from '../design-system.js';
+import { LoadingButton } from './loading-button.js';
+import { styles } from './loading-button.styles.js';
+import { template } from './loading-button.template.js';
+
 /**
  * Compose the LoadingButton component definition.
  *
@@ -9,12 +10,13 @@ import { template } from "./loading-button.template";
  * @remarks
  * HTML Element: <fabric-loading-button>
  */
-export const definition = LoadingButton.compose({
-    name: `${DesignSystem.prefix}-loading-button`,
-    template,
-    styles,
-    shadowOptions: {
-        mode: DesignSystem.shadowRootMode
-    }
+const definition = LoadingButton.compose({
+  name: `${DesignSystem.prefix}-loading-button`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=loading-button.definition.js.map
+
+export { definition };

package/dist/esm/components/loading-button/loading-button.js

@@ -1,11 +1,13 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+import { attr } from '@microsoft/fast-element';
+import { Button } from '@fluentui/web-components';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { attr } from "@microsoft/fast-element";
-import { Button as FabricButton } from "@fluentui/web-components";
 /**
  * LoadingButton
  * @summary A custom button component with a loading state that extends Fluent UI's Button class. It provides visual feedback with a spinner when the button is in a loading state and disables interaction.
@@ -41,19 +43,20 @@ import { Button as FabricButton } from "@fluentui/web-components";
  * @tagname fabric-loading-button
  * @public
  */
-export class LoadingButton extends FabricButton {
-    constructor() {
-        super(...arguments);
-        /**
-         * Indicates whether the button is in a loading state.
-         * @public
-         * @type {boolean}
-         * @default false
-         */
-        this.loading = false;
-    }
+class LoadingButton extends Button {
+  constructor() {
+    super(...arguments);
+    /**
+     * Indicates whether the button is in a loading state.
+     * @public
+     * @type {boolean}
+     * @default false
+     */
+    this.loading = false;
+  }
 }
-__decorate([
-    attr({ mode: "boolean" })
-], LoadingButton.prototype, "loading", void 0);
-//# sourceMappingURL=loading-button.js.map
+__decorate([attr({
+  mode: "boolean"
+})], LoadingButton.prototype, "loading", void 0);
+
+export { LoadingButton };

package/dist/esm/components/loading-button/loading-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-button.js","sourceRoot":"","sources":["../../../../../../../src/components/loading-button/loading-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAe,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,OAAO,aAAc,SAAQ,YAAY;IAA/C;;QACE;;;;;WAKG;QACwB,YAAO,GAAY,KAAK,CAAC;IACtD,CAAC;CAAA;AAD4B;IAA1B,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAA0B"}
+{"version":3,"file":"loading-button.js","sourceRoot":"","sources":["../../../../../../../src/components/loading-button/loading-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,OAAO,aAAc,SAAQ,YAAY;IAA/C;;QACE;;;;;WAKG;QACwB,YAAO,GAAY,KAAK,CAAC;IACtD,CAAC;CAAA;AAD4B;IAA1B,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAA0B"}