@fluentui/web-components 3.0.0-beta.119 → 3.0.0-beta.120

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

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

package/dist/esm/utils/request-idle-callback.d.ts

@@ -0,0 +1,43 @@
+/**
+ * A ponyfill for requestIdleCallback that falls back to setTimeout.
+ * Uses the native requestIdleCallback when available.
+ *
+ * @param callback - The function to call when the browser is idle.
+ * @param options - Options object that may contain a timeout property.
+ * @returns An ID that can be used to cancel the callback.
+ * @public
+ */
+export declare function requestIdleCallback(callback: (args: {
+    didTimeout: boolean;
+}) => void, options?: {
+    timeout: number;
+}): ReturnType<typeof globalThis.requestIdleCallback | typeof setTimeout>;
+/**
+ * A ponyfill for cancelIdleCallback that falls back to clearTimeout.
+ * Uses the native cancelIdleCallback when available.
+ *
+ * @param id - The ID of the callback to cancel.
+ * @public
+ */
+export declare function cancelIdleCallback(id: ReturnType<typeof globalThis.requestIdleCallback | typeof setTimeout>): void;
+/**
+ * Waits for all custom element descendants of a target element to be connected.
+ *
+ * @param target - The target element to observe.
+ * @param callback - The function to call when all custom element descendants are connected.
+ * @param options - Options object that may contain a timeout property for the idle callback.
+ *
+ * @remarks
+ * This function uses requestIdleCallback to periodically check if all custom element
+ * descendants (elements with a hyphen in their tag name) are connected to the DOM.
+ * Once all such elements are connected, the provided callback is invoked.
+ *
+ * The `timeout` option specifies the maximum time to wait for each idle callback before
+ * rechecking, defaulting to 50 milliseconds.
+ *
+ * @public
+ */
+export declare function waitForConnectedDescendants(target: HTMLElement, callback: () => void, options?: {
+    shallow: boolean;
+    timeout: number;
+}): void;

package/dist/esm/utils/request-idle-callback.js

@@ -0,0 +1,73 @@
+/**
+ * A ponyfill for requestIdleCallback that falls back to setTimeout.
+ * Uses the native requestIdleCallback when available.
+ *
+ * @param callback - The function to call when the browser is idle.
+ * @param options - Options object that may contain a timeout property.
+ * @returns An ID that can be used to cancel the callback.
+ * @public
+ */
+export function requestIdleCallback(callback, options) {
+    if ('requestIdleCallback' in globalThis) {
+        return globalThis.requestIdleCallback(callback, options);
+    }
+    const start = Date.now();
+    return setTimeout(() => {
+        callback({
+            didTimeout: options?.timeout ? Date.now() - start >= options.timeout : false,
+        });
+    }, 1);
+}
+/**
+ * A ponyfill for cancelIdleCallback that falls back to clearTimeout.
+ * Uses the native cancelIdleCallback when available.
+ *
+ * @param id - The ID of the callback to cancel.
+ * @public
+ */
+export function cancelIdleCallback(id) {
+    if ('cancelIdleCallback' in globalThis) {
+        globalThis.cancelIdleCallback(id);
+    }
+    else {
+        clearTimeout(id);
+    }
+}
+/**
+ * Waits for all custom element descendants of a target element to be connected.
+ *
+ * @param target - The target element to observe.
+ * @param callback - The function to call when all custom element descendants are connected.
+ * @param options - Options object that may contain a timeout property for the idle callback.
+ *
+ * @remarks
+ * This function uses requestIdleCallback to periodically check if all custom element
+ * descendants (elements with a hyphen in their tag name) are connected to the DOM.
+ * Once all such elements are connected, the provided callback is invoked.
+ *
+ * The `timeout` option specifies the maximum time to wait for each idle callback before
+ * rechecking, defaulting to 50 milliseconds.
+ *
+ * @public
+ */
+export function waitForConnectedDescendants(target, callback, options = { shallow: false, timeout: 50 }) {
+    let idleCallbackId;
+    const query = options.shallow ? ':scope > *' : '*';
+    if (!target.isConnected) {
+        return;
+    }
+    const scheduleCheck = () => {
+        if (idleCallbackId) {
+            idleCallbackId = cancelIdleCallback(idleCallbackId);
+        }
+        if (Array.from(target.querySelectorAll(query))
+            .filter(el => el.tagName.includes('-'))
+            .every(el => el.isConnected)) {
+            callback();
+            return;
+        }
+        idleCallbackId = requestIdleCallback(scheduleCheck, { timeout: options.timeout });
+    };
+    scheduleCheck();
+}
+//# sourceMappingURL=request-idle-callback.js.map

package/dist/esm/utils/request-idle-callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"request-idle-callback.js","sourceRoot":"","sources":["../../../src/utils/request-idle-callback.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,UAAU,mBAAmB,CACjC,QAAiD,EACjD,OAA6B;IAE7B,IAAI,qBAAqB,IAAI,UAAU,EAAE,CAAC;QACxC,OAAO,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACzB,OAAO,UAAU,CAAC,GAAG,EAAE;QACrB,QAAQ,CAAC;YACP,UAAU,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;SAC7E,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,CAAC,CAAC;AACR,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAyE;IAC1G,IAAI,oBAAoB,IAAI,UAAU,EAAE,CAAC;QACtC,UAAgC,CAAC,kBAAkB,CAAC,EAAY,CAAC,CAAC;IACrE,CAAC;SAAM,CAAC;QACN,YAAY,CAAC,EAAE,CAAC,CAAC;IACnB,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,2BAA2B,CACzC,MAAmB,EACnB,QAAoB,EACpB,OAAO,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAEzC,IAAI,cAA6D,CAAC;IAClE,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC;IAEnD,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;QACxB,OAAO;IACT,CAAC;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;QACtD,CAAC;QAED,IACE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;aACvC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aACtC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,EAC9B,CAAC;YACD,QAAQ,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QAED,cAAc,GAAG,mBAAmB,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;IACpF,CAAC,CAAC;IAEF,aAAa,EAAE,CAAC;AAClB,CAAC"}

package/dist/web-components.d.ts

@@ -1711,12 +1711,6 @@ export declare class BaseDropdown extends FASTElement {
      * The listbox element is assigned to the dropdown via the default slot with manual slot assignment.
      */
     listboxChanged(prev: Listbox | undefined, next: Listbox | undefined): void;
-    /**
-     * Reference to the listbox slot element.
-     *
-     * @internal
-     */
-    listboxSlot: HTMLSlotElement;
     /**
      * Indicates whether the dropdown allows multiple options to be selected.
      *
@@ -2055,20 +2049,21 @@ export declare class BaseDropdown extends FASTElement {
      */
     setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
     /**
-     * Updates the freeform option with the provided value.
+     * Handles the `slotchange` event for the dropdown.
+     * Sets the `listbox` property when a valid listbox is assigned to the default slot.
      *
-     * @param value - the value to update the freeform option with
+     * @param e - the slot change event
      * @internal
      */
-    protected updateFreeformOption(value?: string): void;
-    disconnectedCallback(): void;
+    slotchangeHandler(e: Event): boolean | void;
     /**
-     * Handles the connected event for the listbox.
+     * Updates the freeform option with the provided value.
      *
-     * @param e - the event object
+     * @param value - the value to update the freeform option with
      * @internal
      */
-    private listboxConnectedHandler;
+    protected updateFreeformOption(value?: string): void;
+    disconnectedCallback(): void;
     /**
      * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
      * viewport bounds. One static observer is used for all dropdowns.
@@ -7729,7 +7724,6 @@ export declare const LinkTemplate: ElementViewTemplate<Link>;
  * @tag fluent-listbox
  *
  * @slot - The default slot for the options.
- * @emits connected - Dispatched when the element is connected to the DOM.
  *
  * @remarks
  * The listbox component represents a list of options that can be selected.
@@ -7819,7 +7813,6 @@ export declare class Listbox extends FASTElement {
      */
     clickHandler(e: PointerEvent): boolean | void;
     constructor();
-    connectedCallback(): void;
     /**
      * Handles observable subscriptions for the listbox.
      *
@@ -7836,6 +7829,14 @@ export declare class Listbox extends FASTElement {
      * @public
      */
     selectOption(index?: number): void;
+    /**
+     * Handles the `slotchange` event for the default slot.
+     * Sets the `options` property to the list of slotted options.
+     *
+     * @param e - The slotchange event
+     * @public
+     */
+    slotchangeHandler(e: Event): void;
 }
 
 /**
@@ -7864,7 +7865,6 @@ export declare const ListboxTemplate: ElementViewTemplate<Listbox>;
 /**
  * Generates a template for the {@link (Dropdown:class)} component.
  *
- * @param options - The {@link (DropdownOptions:interface)} to use for generating the template.
  * @returns The template object.
  *
  * @public

package/dist/web-components.js

@@ -7094,6 +7094,48 @@ function uniqueId(prefix = "id-") {
   return document.getElementById(str) ? uniqueId(prefix) : str;
 }
 
+function requestIdleCallback(callback, options) {
+  if ("requestIdleCallback" in globalThis) {
+    return globalThis.requestIdleCallback(callback, options);
+  }
+  const start = Date.now();
+  return setTimeout(() => {
+    callback({
+      didTimeout: options?.timeout ? Date.now() - start >= options.timeout : false
+    });
+  }, 1);
+}
+function cancelIdleCallback(id) {
+  if ("cancelIdleCallback" in globalThis) {
+    globalThis.cancelIdleCallback(id);
+  } else {
+    clearTimeout(id);
+  }
+}
+function waitForConnectedDescendants(target, callback, options = {
+  shallow: false,
+  timeout: 50
+}) {
+  let idleCallbackId;
+  const query = options.shallow ? ":scope > *" : "*";
+  if (!target.isConnected) {
+    return;
+  }
+  const scheduleCheck = () => {
+    if (idleCallbackId) {
+      idleCallbackId = cancelIdleCallback(idleCallbackId);
+    }
+    if (Array.from(target.querySelectorAll(query)).filter(el => el.tagName.includes("-")).every(el => el.isConnected)) {
+      callback();
+      return;
+    }
+    idleCallbackId = requestIdleCallback(scheduleCheck, {
+      timeout: options.timeout
+    });
+  };
+  scheduleCheck();
+}
+
 const DropdownAppearance = {
   filledDarker: "filled-darker",
   filledLighter: "filled-lighter",
@@ -7107,10 +7149,10 @@ const DropdownType = {
 };
 
 const dropdownIndicatorTemplate = html`<svg class="chevron-down-20-regular" role="button" slot="indicator" viewBox="0 0 20 20" ${ref("indicator")}><path d="M15.85 7.65a.5.5 0 0 1 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16a.5.5 0 0 1 .7 0" fill="currentColor" /></svg>`;
-const dropdownInputTemplate = html`<input @input="${(x, c) => x.inputHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-labelledby="${x => x.ariaLabelledBy}" aria-expanded="${x => x.open}" aria-haspopup="listbox" placeholder="${x => x.placeholder}" role="combobox" ?disabled="${x => x.disabled}" type="${x => x.type}" value="${x => x.valueAttribute}" ${ref("control")} />`;
-const dropdownButtonTemplate = html`<button aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-expanded="${x => x.open}" aria-haspopup="listbox" role="combobox" ?disabled="${x => x.disabled}" type="button" ${ref("control")}>${x => x.displayValue}</button>`;
+const dropdownInputTemplate = html`<input @input="${(x, c) => x.inputHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-labelledby="${x => x.ariaLabelledBy}" aria-expanded="${x => x.open}" aria-haspopup="listbox" placeholder="${x => x.placeholder}" role="combobox" ?disabled="${x => x.disabled}" type="${x => x.type}" value="${x => x.valueAttribute}" slot="control" ${ref("control")} />`;
+const dropdownButtonTemplate = html`<button aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-expanded="${x => x.open}" aria-haspopup="listbox" role="combobox" ?disabled="${x => x.disabled}" type="button" slot="control" ${ref("control")}>${x => x.displayValue}</button>`;
 function dropdownTemplate(options = {}) {
-  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><div class="control"><slot name="control" ${ref("controlSlot")}></slot><slot name="indicator" ${ref("indicatorSlot")}>${staticallyCompose(options.indicator)}</slot></div><slot ${ref("listboxSlot")}></slot></template>`;
+  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @mousedown="${(x, c) => x.mousedownHandler(c.event)}"><div class="control"><slot name="control" ${ref("controlSlot")}></slot><slot name="indicator" ${ref("indicatorSlot")}>${staticallyCompose(options.indicator)}</slot></div><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
 }
 const template$t = dropdownTemplate({
   indicator: dropdownIndicatorTemplate
@@ -7164,7 +7206,6 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
      */
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "presentation";
-    this.addEventListener("connected", this.listboxConnectedHandler);
     Updates.enqueue(() => {
       this.insertControl();
     });
@@ -7207,7 +7248,6 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
   controlChanged(prev, next) {
     if (next) {
       next.id = next.id || uniqueId("input-");
-      this.controlSlot?.assign(next);
     }
   }
   /**
@@ -7257,7 +7297,6 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
       next.dropdown = this;
       next.popover = "manual";
       next.tabIndex = -1;
-      this.listboxSlot.assign(next);
       const notifier = Observable.getNotifier(this);
       notifier.subscribe(next);
       for (const key of ["disabled", "multiple"]) {
@@ -7742,6 +7781,22 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
       }, message ?? this.validationMessage, anchor ?? this.control);
     }
   }
+  /**
+   * Handles the `slotchange` event for the dropdown.
+   * Sets the `listbox` property when a valid listbox is assigned to the default slot.
+   *
+   * @param e - the slot change event
+   * @internal
+   */
+  slotchangeHandler(e) {
+    const target = e.target;
+    waitForConnectedDescendants(this, () => {
+      const listbox = target.assignedElements().find(el => isListbox(el));
+      if (listbox) {
+        this.listbox = listbox;
+      }
+    });
+  }
   /**
    * Updates the freeform option with the provided value.
    *
@@ -7766,18 +7821,6 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     this.debounceController?.abort();
     super.disconnectedCallback();
   }
-  /**
-   * Handles the connected event for the listbox.
-   *
-   * @param e - the event object
-   * @internal
-   */
-  listboxConnectedHandler(e) {
-    const target = e.target;
-    if (isListbox(target)) {
-      this.listbox = target;
-    }
-  }
   /**
    * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
    * viewport bounds. One static observer is used for all dropdowns.
@@ -7857,7 +7900,6 @@ __decorateClass$z([attr({
   mode: "fromView"
 })], _BaseDropdown.prototype, "initialValue", 2);
 __decorateClass$z([observable], _BaseDropdown.prototype, "listbox", 2);
-__decorateClass$z([observable], _BaseDropdown.prototype, "listboxSlot", 2);
 __decorateClass$z([attr({
   mode: "boolean"
 })], _BaseDropdown.prototype, "multiple", 2);
@@ -7893,15 +7935,12 @@ __decorateClass$y([attr], Dropdown.prototype, "size", 2);
 const styles$s = css`
   ${display("inline-flex")}
 
-  :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:none;box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}`;
+  :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:none;box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}`;
 
 const definition$t = Dropdown.compose({
   name: `${FluentDesignSystem.prefix}-dropdown`,
   template: template$t,
-  styles: styles$s,
-  shadowOptions: {
-    slotAssignment: "manual"
-  }
+  styles: styles$s
 });
 
 definition$t.define(FluentDesignSystem.registry);
@@ -8367,10 +8406,6 @@ class Listbox extends FASTElement {
     }
     return true;
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.$emit("connected");
-  }
   /**
    * Handles observable subscriptions for the listbox.
    *
@@ -8410,6 +8445,19 @@ class Listbox extends FASTElement {
     }
     this.selectedIndex = selectedIndex;
   }
+  /**
+   * Handles the `slotchange` event for the default slot.
+   * Sets the `options` property to the list of slotted options.
+   *
+   * @param e - The slotchange event
+   * @public
+   */
+  slotchangeHandler(e) {
+    waitForConnectedDescendants(this, () => {
+      const options = e.target.assignedElements().filter(option => isDropdownOption(option));
+      this.options = options;
+    });
+  }
 }
 __decorateClass$s([attr({
   attribute: "id",
@@ -8426,10 +8474,7 @@ const styles$n = css`
   :host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:none;box-shadow:${shadow16};box-sizing:border-box;flex-direction:column;margin:0;min-width:160px;padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS};width:auto}:host([popover]){inset:unset;overflow:auto}@supports (anchor-name:--anchor){:host([popover]){position:absolute;margin-block-start:0;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);position-anchor:--dropdown;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,--flip-block,block-start}@position-try --flip-block{bottom:anchor(top);top:unset}}@supports not (anchor-name:--anchor){:host([popover]){margin-block-start:var(--margin-offset,0);max-height:var(--listbox-max-height,50vh);position:fixed}:host([popover]${flipBlockState}){margin-block-start:revert;translate:0 -100%}}`;
 
 function listboxTemplate() {
-  return html`<template id="${x => x.id}" @beforetoggle="${(x, c) => x.beforetoggleHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><slot ${slotted({
-    property: "options",
-    filter: node => isDropdownOption(node)
-  })}></slot></template>`;
+  return html`<template id="${x => x.id}" @beforetoggle="${(x, c) => x.beforetoggleHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
 }
 const template$o = listboxTemplate();
 
@@ -9422,6 +9467,7 @@ class DropdownOption extends FASTElement {
   disabledChanged(prev, next) {
     this.elementInternals.ariaDisabled = this.disabled ? "true" : "false";
     toggleState(this.elementInternals, "disabled", this.disabled);
+    this.setFormValue(!this.disabled && this.selected ? this.value : null);
   }
   /**
    * Sets the disabled state when the `disabled` attribute changes.