@fluentui/web-components 3.0.0-rc.10 → 3.0.0-rc.11

package/dist/web-components.js

@@ -4108,6 +4108,15 @@ const getDirection = rootNode => {
   return rootNode.closest("[dir]")?.dir === "rtl" ? Direction.rtl : Direction.ltr;
 };
 
+function isCustomElement(tagSuffix) {
+  return element => {
+    if (element?.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    return element.tagName.toLowerCase().endsWith(tagSuffix);
+  };
+}
+
 function staticallyCompose(item) {
   if (!item) {
     return InlineTemplateDirective.empty;
@@ -4904,6 +4913,7 @@ class BaseAnchor extends FASTElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.tabIndex = Number(this.getAttribute("tabindex") ?? 0) < 0 ? -1 : 0;
     Observable.getNotifier(this).subscribe(this);
     Object.keys(this.$fastController.definition.attributeLookup).forEach(key => {
       this.handleChange(this, key);
@@ -5134,6 +5144,7 @@ var __decorateClass$J = (decorators, target, key, kind) => {
 class BaseAvatar extends FASTElement {
   constructor() {
     super();
+    this.slottedDefaults = [];
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -5142,41 +5153,103 @@ class BaseAvatar extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "img";
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.slotchangeHandler();
+  /**
+   * Handles changes to the default slot element reference.
+   *
+   * Toggles the `has-slotted` class on the slot element for browsers that do not
+   * support the `:has-slotted` CSS selector. Defers cleanup using
+   * `Updates.enqueue` to avoid DOM mutations during hydration that could
+   * corrupt binding markers.
+   *
+   * @internal
+   */
+  defaultSlotChanged() {
+    if (!CSS.supports("selector(:has-slotted)")) {
+      const elements = this.defaultSlot.assignedElements();
+      this.defaultSlot.classList.toggle("has-slotted", elements.length > 0);
+    }
+    Updates.enqueue(() => {
+      this.cleanupSlottedContent();
+    });
   }
-  disconnectedCallback() {
-    this.abortSignal?.abort();
-    this.abortSignal = void 0;
-    super.disconnectedCallback();
+  /**
+   * Updates the monogram text content when the ref is captured.
+   *
+   * @internal
+   */
+  monogramChanged() {
+    this.updateMonogram();
   }
   /**
-   * Removes any empty text nodes from the default slot when the slotted content changes.
+   * Handles changes to the slotted default content.
+   *
+   * Normalizes the DOM, toggles the `has-slotted` class on the default slot element
+   * for browsers that do not support the `:has-slotted` CSS selector, and removes
+   * empty text nodes from the default slot to keep the DOM clean.
+   *
+   * @internal
+   */
+  slottedDefaultsChanged() {
+    if (!this.defaultSlot) {
+      return;
+    }
+    this.cleanupSlottedContent();
+  }
+  /**
+   * Handles changes to the name attribute.
+   * @internal
+   */
+  nameChanged() {
+    this.updateMonogram();
+  }
+  /**
+   * Handles changes to the initials attribute.
+   * @internal
+   */
+  initialsChanged() {
+    this.updateMonogram();
+  }
+  /**
+   * Generates and sets the initials for the template.
+   * Subclasses should override this to provide custom initials logic.
+   *
+   * @internal
+   */
+  generateInitials() {
+    return this.initials || getInitials(this.name, window.getComputedStyle(this).direction === "rtl");
+  }
+  /**
+   * Updates the monogram element's text content with the generated initials.
+   *
+   * @internal
+   */
+  updateMonogram() {
+    if (this.monogram) {
+      this.monogram.textContent = this.generateInitials() ?? "";
+    }
+  }
+  /**
+   * Normalizes the DOM and removes empty text nodes from the default slot.
    *
-   * @param e - The event object
    * @internal
    */
-  slotchangeHandler() {
+  cleanupSlottedContent() {
     this.normalize();
-    const elements = this.defaultSlot.assignedElements();
-    if (!elements.length && !this.innerText.trim()) {
-      const nodes = this.defaultSlot.assignedNodes();
-      nodes.filter(node => node.nodeType === Node.TEXT_NODE).forEach(node => {
-        this.removeChild(node);
-      });
+    if (!CSS.supports("selector(:has-slotted)")) {
+      this.defaultSlot.classList.toggle("has-slotted", !!this.slottedDefaults.length);
     }
-    Updates.enqueue(() => {
-      if (!this.abortSignal || this.abortSignal.signal.aborted) {
-        this.abortSignal = new AbortController();
-      }
-      this.defaultSlot.addEventListener("slotchange", () => this.slotchangeHandler(), {
-        once: true,
-        signal: this.abortSignal.signal
+    if (!this.innerText.trim()) {
+      this.slottedDefaults.forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          node.remove();
+        }
       });
-    });
+    }
   }
 }
+__decorateClass$J([observable], BaseAvatar.prototype, "defaultSlot", 2);
+__decorateClass$J([observable], BaseAvatar.prototype, "monogram", 2);
+__decorateClass$J([observable], BaseAvatar.prototype, "slottedDefaults", 2);
 __decorateClass$J([attr], BaseAvatar.prototype, "name", 2);
 __decorateClass$J([attr], BaseAvatar.prototype, "initials", 2);
 
@@ -5312,11 +5385,11 @@ const animations = {
   nullEasing: curveLinear
 };
 const styles$A = css`
-  ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin} ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick} ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
+  ${display("inline-grid")} :host{position:relative;place-items:center;place-content:center;grid-template:1fr / 1fr;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.monogram,.default-icon{grid-area:1 / 1 / -1 / -1}.monogram:empty{display:none}.default-slot:is(.has-slotted,:has-slotted) ~ .default-icon,.default-slot:is(.has-slotted,:has-slotted) ~ .monogram,:host(:is([name]):not([name=''])) .default-icon,:host(:is([initials]):not([initials=''])) .default-icon{display:none}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin} ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick} ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
 
-const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
+const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
 function avatarTemplate() {
-  return html`<slot ${ref("defaultSlot")}>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot>`;
+  return html`<slot class="default-slot" ${slotted("slottedDefaults")} ${ref("defaultSlot")}></slot><span class="monogram" ${ref("monogram")}>${x => x.initials}</span>${defaultIconTemplate}<slot name="badge"></slot>`;
 }
 const template$C = avatarTemplate();
 
@@ -5751,7 +5824,6 @@ var __decorateClass$G = (decorators, target, key, kind) => {
 class BaseButton extends FASTElement {
   constructor() {
     super();
-    this.disabled = false;
     this.disabledFocusable = false;
     /**
      * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
@@ -5761,15 +5833,16 @@ class BaseButton extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "button";
   }
+  /**
+   * Handles changes to the disabled attribute. If the button is disabled, it
+   * should not be focusable.
+   *
+   * @param previous - the previous disabled value
+   * @param next - the new disabled value
+   * @internal
+   */
   disabledChanged() {
-    if (!this.$fastController.isConnected) {
-      return;
-    }
-    if (this.disabled) {
-      this.removeAttribute("tabindex");
-    } else {
-      this.tabIndex = Number(this.getAttribute("tabindex") ?? 0) < 0 ? -1 : 0;
-    }
+    this.setTabIndex();
   }
   /**
    * Sets the element's internal disabled state when the element is focusable while disabled.
@@ -5779,7 +5852,7 @@ class BaseButton extends FASTElement {
    * @internal
    */
   disabledFocusableChanged(previous, next) {
-    if (this.$fastController.isConnected) {
+    if (this.elementInternals) {
       this.elementInternals.ariaDisabled = `${!!next}`;
     }
   }
@@ -5829,7 +5902,7 @@ class BaseButton extends FASTElement {
   connectedCallback() {
     super.connectedCallback();
     this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
-    this.disabledChanged();
+    this.setTabIndex();
   }
   /**
    * This fallback creates a new slot, then creates a submit button to mirror the custom element's
@@ -5930,6 +6003,18 @@ class BaseButton extends FASTElement {
   resetForm() {
     this.elementInternals.form?.reset();
   }
+  /**
+   * Sets the `tabindex` attribute based on the disabled state of the button.
+   *
+   * @internal
+   */
+  setTabIndex() {
+    if (this.disabled) {
+      this.removeAttribute("tabindex");
+      return;
+    }
+    this.tabIndex = Number(this.getAttribute("tabindex") ?? 0) < 0 ? -1 : 0;
+  }
   /**
    * Submits the associated form.
    *
@@ -6689,25 +6774,11 @@ class Dialog extends FASTElement {
       });
     };
   }
-  typeChanged(prev, next) {
-    if (!this.dialog) {
-      return;
-    }
-    if (next === DialogType.alert) {
-      this.dialog.setAttribute("role", "alertdialog");
-    } else {
-      this.dialog.removeAttribute("role");
-    }
-    if (next !== DialogType.nonModal) {
-      this.dialog.setAttribute("aria-modal", "true");
-    } else {
-      this.dialog.removeAttribute("aria-modal");
-    }
+  dialogChanged() {
+    this.updateDialogAttributes();
   }
-  /** @internal */
-  connectedCallback() {
-    super.connectedCallback();
-    this.typeChanged(void 0, this.type);
+  typeChanged(prev, next) {
+    this.updateDialogAttributes();
   }
   /**
    * Method to show the dialog
@@ -6748,6 +6819,26 @@ class Dialog extends FASTElement {
     }
     return true;
   }
+  /**
+   * Updates the internal dialog element's attributes based on its type.
+   *
+   * @internal
+   */
+  updateDialogAttributes() {
+    if (!this.dialog) {
+      return;
+    }
+    if (this.type === DialogType.alert) {
+      this.dialog.setAttribute("role", "alertdialog");
+    } else {
+      this.dialog.removeAttribute("role");
+    }
+    if (this.type !== DialogType.nonModal) {
+      this.dialog.setAttribute("aria-modal", "true");
+    } else {
+      this.dialog.removeAttribute("aria-modal");
+    }
+  }
 }
 __decorateClass$B([observable], Dialog.prototype, "dialog", 2);
 __decorateClass$B([attr({
@@ -7048,7 +7139,6 @@ class Drawer extends FASTElement {
     });
   }
   updateDialogRole() {
-    console.log(this.role);
     if (!this.dialog) {
       return;
     }
@@ -7139,12 +7229,6 @@ function getLanguage(rootNode) {
   return rootNode.closest("[lang]")?.lang ?? "en";
 }
 
-let uniqueIdCounter = 0;
-function uniqueId(prefix = "id-") {
-  const str = `${prefix}${uniqueIdCounter++}`;
-  return document.getElementById(str) ? uniqueId(prefix) : str;
-}
-
 function requestIdleCallback(callback, options) {
   if ("requestIdleCallback" in globalThis) {
     return globalThis.requestIdleCallback(callback, options);
@@ -7157,34 +7241,28 @@ function requestIdleCallback(callback, options) {
     });
   }, 1);
 }
-function cancelIdleCallback(id) {
-  if ("cancelIdleCallback" in globalThis) {
-    globalThis.cancelIdleCallback(id);
-  } else {
-    clearTimeout(id);
-  }
-}
 function waitForConnectedDescendants(target, callback, options) {
-  let idleCallbackId;
   const shallow = options?.shallow ?? false;
-  const query = `${shallow ? ":scope > " : ""}:not(:defined)`;
   const timeout = options?.timeout ?? 50;
+  const selector = `${shallow ? ":scope > " : ""}:not(:defined)`;
   const scheduleCheck = deadline => {
-    if (idleCallbackId) {
-      cancelIdleCallback(idleCallbackId);
-      idleCallbackId = void 0;
-    }
-    if (!target.querySelector(query) || deadline && deadline.timeRemaining() <= 0) {
-      callback();
+    if (target.querySelector(selector) === null || deadline && deadline.timeRemaining() <= 0) {
+      requestAnimationFrame(callback);
       return;
     }
-    idleCallbackId = requestIdleCallback(scheduleCheck, {
+    requestIdleCallback(scheduleCheck, {
       timeout
     });
   };
   scheduleCheck();
 }
 
+let uniqueIdCounter = 0;
+function uniqueId(prefix = "id-") {
+  const str = `${prefix}${uniqueIdCounter++}`;
+  return document.getElementById(str) ? uniqueId(prefix) : str;
+}
+
 const DropdownAppearance = {
   filledDarker: "filled-darker",
   filledLighter: "filled-lighter",
@@ -7255,9 +7333,6 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
      */
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "presentation";
-    Updates.enqueue(() => {
-      this.insertControl();
-    });
   }
   get activeDescendant() {
     if (this.open) {
@@ -7306,11 +7381,13 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
    * @param next - the current disabled state
    */
   disabledChanged(prev, next) {
-    Updates.enqueue(() => {
-      this.options.forEach(option => {
-        option.disabled = option.disabledAttribute || this.disabled;
+    if (this.listbox) {
+      Updates.enqueue(() => {
+        this.options.forEach(option => {
+          option.disabled = option.disabledAttribute || this.disabled;
+        });
       });
-    });
+    }
   }
   get displayValue() {
     if (!this.$fastController.isConnected || !this.control || this.isCombobox && this.multiple) {
@@ -7348,10 +7425,12 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
       next.tabIndex = -1;
       const notifier = Observable.getNotifier(this);
       notifier.subscribe(next);
-      for (const key of ["disabled", "multiple"]) {
-        notifier.notify(key);
-      }
+      notifier.notify("multiple");
       Updates.enqueue(() => {
+        this.options.forEach(option => {
+          option.disabled = option.disabledAttribute || this.disabled;
+          option.name = this.name;
+        });
         this.enabledOptions.filter(x => x.defaultSelected).forEach((x, i) => {
           x.selected = this.multiple || i === 0;
         });
@@ -7383,11 +7462,13 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
    * @param next - the current name
    */
   nameChanged(prev, next) {
-    Updates.enqueue(() => {
-      this.options.forEach(option => {
-        option.name = next;
+    if (this.listbox) {
+      Updates.enqueue(() => {
+        this.options.forEach(option => {
+          option.name = next;
+        });
       });
-    });
+    }
   }
   /**
    * Handles the open state of the dropdown.
@@ -7865,6 +7946,12 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     this.freeformOption.value = value;
     this.freeformOption.hidden = false;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    Updates.enqueue(() => {
+      this.insertControl();
+    });
+  }
   disconnectedCallback() {
     _BaseDropdown.AnchorPositionFallbackObserver?.disconnect();
     this.debounceController?.abort();
@@ -8366,7 +8453,6 @@ var __decorateClass$q = (decorators, target, key, kind) => {
 class Listbox extends FASTElement {
   constructor() {
     super();
-    this.id = uniqueId("listbox-");
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -8375,6 +8461,15 @@ class Listbox extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "listbox";
   }
+  /**
+   * Calls the `slotchangeHandler` when the `defaultSlot` element is assigned
+   * via the `ref` directive in the template.
+   *
+   * @internal
+   */
+  defaultSlotChanged() {
+    this.slotchangeHandler();
+  }
   /**
    * Updates the multiple selection state of the listbox and its options.
    *
@@ -8454,6 +8549,14 @@ class Listbox extends FASTElement {
     }
     return true;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    waitForConnectedDescendants(this, () => {
+      this.id = this.id || uniqueId("listbox-");
+    }, {
+      shallow: true
+    });
+  }
   /**
    * Handles observable subscriptions for the listbox.
    *
@@ -8501,17 +8604,15 @@ class Listbox extends FASTElement {
    * @public
    */
   slotchangeHandler(e) {
-    const target = e.target;
     waitForConnectedDescendants(this, () => {
-      const options = target.assignedElements().filter(option => isDropdownOption(option));
-      this.options = options;
+      if (this.defaultSlot) {
+        const options = this.defaultSlot.assignedElements().filter(option => isDropdownOption(option));
+        this.options = options;
+      }
     });
   }
 }
-__decorateClass$q([attr({
-  attribute: "id",
-  mode: "fromView"
-})], Listbox.prototype, "id", 2);
+__decorateClass$q([observable], Listbox.prototype, "defaultSlot", 2);
 __decorateClass$q([observable], Listbox.prototype, "multiple", 2);
 __decorateClass$q([observable], Listbox.prototype, "options", 2);
 __decorateClass$q([observable], Listbox.prototype, "selectedIndex", 2);
@@ -8523,7 +8624,7 @@ const styles$l = css`
   :host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};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 @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
+  return html`<template @beforetoggle="${(x, c) => x.beforetoggleHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><slot ${ref("defaultSlot")} @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
 }
 const template$m = listboxTemplate();
 
@@ -9065,8 +9166,6 @@ var __decorateClass$n = (decorators, target, key, kind) => {
 class Menu extends FASTElement {
   constructor() {
     super(...arguments);
-    this.slottedMenuList = [];
-    this.slottedTriggers = [];
     /**
      * Defines whether the menu is open or not.
      * @internal
@@ -9154,6 +9253,15 @@ class Menu extends FASTElement {
       }
     };
   }
+  /**
+   * Sets up the component when the slotted menu list changes.
+   * @param prev - The previous items in the slotted menu list.
+   * @param next - The new items in the slotted menu list.
+   * @internal
+   */
+  slottedMenuListChanged(prev, next) {
+    this.setComponent();
+  }
   /**
    * Called when the element is connected to the DOM.
    * Sets up the component.
@@ -9161,9 +9269,7 @@ class Menu extends FASTElement {
    */
   connectedCallback() {
     super.connectedCallback();
-    queueMicrotask(() => {
-      this.setComponent();
-    });
+    this.setComponent();
   }
   /**
    * Called when the element is disconnected from the DOM.
@@ -9180,14 +9286,23 @@ class Menu extends FASTElement {
    * @public
    */
   setComponent() {
-    if (this.$fastController.isConnected && this.slottedMenuList.length && this.slottedTriggers.length) {
-      this._trigger = this.slottedTriggers[0];
-      this._menuList = this.slottedMenuList[0];
+    waitForConnectedDescendants(this, () => {
+      const trigger = this.slottedTriggers?.[0];
+      const menuList = this.slottedMenuList?.[0];
+      if (!trigger || !menuList) {
+        this.removeListeners();
+        return;
+      }
+      this._trigger = trigger;
+      this._menuList = menuList;
       this._trigger.setAttribute("aria-haspopup", "true");
       this._trigger.setAttribute("aria-expanded", `${this._open}`);
       this._menuList.setAttribute("popover", this.openOnContext ? "manual" : "");
+      this.removeListeners();
       this.addListeners();
-    }
+    }, {
+      shallow: true
+    });
   }
   /**
    * Focuses on the menu list.
@@ -9581,7 +9696,7 @@ class DropdownOption extends FASTElement {
   set selected(next) {
     this.currentSelected = next;
     Updates.enqueue(() => {
-      if (this.$fastController.isConnected) {
+      if (this.elementInternals) {
         this.setFormValue(next ? this.value : null);
         this.elementInternals.ariaSelected = next ? "true" : "false";
         toggleState(this.elementInternals, "selected", next);
@@ -9758,6 +9873,13 @@ class BaseProgressBar extends FASTElement {
     this.validationState = null;
     this.elementInternals.role = "progressbar";
   }
+  /**
+   * Updates the indicator width after the element is connected to the DOM via the template.
+   * @internal
+   */
+  indicatorChanged() {
+    this.setIndicatorWidth();
+  }
   /**
    * Handles changes to validation-state attribute custom states
    * @param prev - the previous state
@@ -9772,7 +9894,9 @@ class BaseProgressBar extends FASTElement {
    * @internal
    */
   valueChanged(prev, next) {
-    this.elementInternals.ariaValueNow = typeof next === "number" ? `${next}` : null;
+    if (this.elementInternals) {
+      this.elementInternals.ariaValueNow = typeof next === "number" ? `${next}` : null;
+    }
     this.setIndicatorWidth();
   }
   /**
@@ -9782,7 +9906,9 @@ class BaseProgressBar extends FASTElement {
    * @param next - The current min value
    */
   minChanged(prev, next) {
-    this.elementInternals.ariaValueMin = typeof next === "number" ? `${next}` : null;
+    if (this.elementInternals) {
+      this.elementInternals.ariaValueMin = typeof next === "number" ? `${next}` : null;
+    }
     this.setIndicatorWidth();
   }
   /**
@@ -9793,27 +9919,34 @@ class BaseProgressBar extends FASTElement {
    * @internal
    */
   maxChanged(prev, next) {
-    this.elementInternals.ariaValueMax = typeof next === "number" ? `${next}` : null;
-    this.setIndicatorWidth();
-  }
-  connectedCallback() {
-    super.connectedCallback();
+    if (this.elementInternals) {
+      this.elementInternals.ariaValueMax = typeof next === "number" ? `${next}` : null;
+    }
     this.setIndicatorWidth();
   }
+  /**
+   * Sets the width of the indicator element based on the value, min, and max
+   * properties. If the browser supports `width: attr(value)`, this method does
+   * nothing and allows CSS to handle the width.
+   *
+   * @internal
+   */
   setIndicatorWidth() {
-    if (!this.$fastController.isConnected || CSS.supports("width: attr(value type(<number>))")) {
+    if (CSS.supports("width: attr(value type(<number>))")) {
       return;
     }
-    if (typeof this.value !== "number") {
-      this.indicator.style.removeProperty("width");
-      return;
-    }
-    const min = this.min ?? 0;
-    const max = this.max ?? 100;
-    const value = this.value ?? 0;
-    const range = max - min;
-    const width = range === 0 ? 0 : Math.fround((value - min) / range * 100);
-    this.indicator.style.setProperty("width", `${width}%`);
+    Updates.enqueue(() => {
+      if (typeof this.value !== "number") {
+        this.indicator?.style.removeProperty("width");
+        return;
+      }
+      const min = this.min ?? 0;
+      const max = this.max ?? 100;
+      const value = this.value ?? 0;
+      const range = max - min;
+      const width = range === 0 ? 0 : Math.fround((value - min) / range * 100);
+      this.indicator?.style.setProperty("width", `${width}%`);
+    });
   }
 }
 __decorateClass$k([observable], BaseProgressBar.prototype, "indicator", 2);
@@ -9863,70 +9996,8 @@ const definition$f = ProgressBar.compose({
 
 definition$f.define(FluentDesignSystem.registry);
 
-class Radio extends BaseCheckbox {
-  constructor() {
-    super();
-    this.elementInternals.role = "radio";
-  }
-  /**
-   * Toggles the disabled state when the user changes the `disabled` property.
-   *
-   * @param prev - the previous value of the `disabled` property
-   * @param next - the current value of the `disabled` property
-   * @internal
-   * @override
-   */
-  disabledChanged(prev, next) {
-    super.disabledChanged(prev, next);
-    this.$emit("disabled", next, {
-      bubbles: true
-    });
-  }
-  /**
-   * This method is a no-op for the radio component.
-   *
-   * @internal
-   * @override
-   * @remarks
-   * To make a group of radio controls required, see {@link RadioGroup.required}.
-   */
-  requiredChanged() {
-    return;
-  }
-  /**
-   * This method is a no-op for the radio component.
-   *
-   * @internal
-   * @override
-   * @remarks
-   * The radio form value is controlled by the `RadioGroup` component.
-   */
-  setFormValue() {
-    return;
-  }
-  /**
-   * Sets the validity of the control.
-   *
-   * @internal
-   * @override
-   * @remarks
-   * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
-   */
-  setValidity() {
-    this.elementInternals.setValidity({});
-  }
-  /**
-   * Toggles the checked state of the control.
-   *
-   * @param force - Forces the element to be checked or unchecked
-   * @public
-   * @override
-   * @remarks
-   * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
-   */
-  toggleChecked(force = true) {
-    super.toggleChecked(force);
-  }
+function isRadio(element, tagName = "-radio") {
+  return isCustomElement(tagName)(element);
 }
 
 function getRootActiveElement(element) {
@@ -9954,7 +10025,6 @@ class RadioGroup extends FASTElement {
      * Indicates that the value has been changed by the user.
      */
     this.dirtyState = false;
-    this.disabled = false;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -9985,7 +10055,7 @@ class RadioGroup extends FASTElement {
    * @internal
    */
   disabledChanged(prev, next) {
-    if (this.$fastController.isConnected) {
+    if (this.radios) {
       this.checkedIndex = -1;
       this.radios?.forEach(radio => {
         radio.disabled = !!radio.disabledAttribute || !!this.disabled;
@@ -10081,6 +10151,15 @@ class RadioGroup extends FASTElement {
     this.elementInternals.ariaRequired = next ? "true" : null;
     this.setValidity();
   }
+  /**
+   * Updates the radios collection when the slotted radios change.
+   *
+   * @param prev - the previous slotted radios
+   * @param next - the current slotted radios
+   */
+  slottedRadiosChanged(prev, next) {
+    this.radios = [...this.querySelectorAll("*")].filter(x => isRadio(x));
+  }
   /**
    * A collection of child radios that are not disabled.
    *
@@ -10388,17 +10467,6 @@ class RadioGroup extends FASTElement {
       });
     }
   }
-  /**
-   * Updates the collection of child radios when the slot changes.
-   *
-   * @param e - the slot change event
-   * @internal
-   */
-  slotchangeHandler(e) {
-    Updates.enqueue(() => {
-      this.radios = [...this.querySelectorAll("*")].filter(x => x instanceof Radio);
-    });
-  }
 }
 /**
  * The form-associated flag.
@@ -10422,6 +10490,7 @@ __decorateClass$i([observable], RadioGroup.prototype, "radios", 2);
 __decorateClass$i([attr({
   mode: "boolean"
 })], RadioGroup.prototype, "required", 2);
+__decorateClass$i([observable], RadioGroup.prototype, "slottedRadios", 2);
 
 const styles$e = css`
   ${display("flex")}
@@ -10429,7 +10498,7 @@ const styles$e = css`
   :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}:host([slot='input']){margin:${spacingVerticalS} ${spacingHorizontalS}}`;
 
 function radioGroupTemplate() {
-  return html`<template @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
+  return html`<template @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot ${slotted("slottedRadios")}></slot></template>`;
 }
 const template$e = radioGroupTemplate();
 
@@ -10441,6 +10510,72 @@ const definition$e = RadioGroup.compose({
 
 definition$e.define(FluentDesignSystem.registry);
 
+class Radio extends BaseCheckbox {
+  constructor() {
+    super();
+    this.elementInternals.role = "radio";
+  }
+  /**
+   * Toggles the disabled state when the user changes the `disabled` property.
+   *
+   * @param prev - the previous value of the `disabled` property
+   * @param next - the current value of the `disabled` property
+   * @internal
+   * @override
+   */
+  disabledChanged(prev, next) {
+    super.disabledChanged(prev, next);
+    this.$emit("disabled", next, {
+      bubbles: true
+    });
+  }
+  /**
+   * This method is a no-op for the radio component.
+   *
+   * @internal
+   * @override
+   * @remarks
+   * To make a group of radio controls required, see {@link RadioGroup.required}.
+   */
+  requiredChanged() {
+    return;
+  }
+  /**
+   * This method is a no-op for the radio component.
+   *
+   * @internal
+   * @override
+   * @remarks
+   * The radio form value is controlled by the `RadioGroup` component.
+   */
+  setFormValue() {
+    return;
+  }
+  /**
+   * Sets the validity of the control.
+   *
+   * @internal
+   * @override
+   * @remarks
+   * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
+   */
+  setValidity() {
+    this.elementInternals.setValidity({});
+  }
+  /**
+   * Toggles the checked state of the control.
+   *
+   * @param force - Forces the element to be checked or unchecked
+   * @public
+   * @override
+   * @remarks
+   * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
+   */
+  toggleChecked(force = true) {
+    super.toggleChecked(force);
+  }
+}
+
 const styles$d = css`
   ${display("inline-flex")}
 
@@ -10500,6 +10635,14 @@ class BaseRatingDisplay extends FASTElement {
     this.elementInternals.role = "img";
     this.numberFormatter = new Intl.NumberFormat();
   }
+  /**
+   * Updates the icon when the referenced slot is bound in the template.
+   *
+   * @internal
+   */
+  iconSlotChanged() {
+    this.handleSlotChange();
+  }
   maxChanged() {
     this.setCustomPropertyValue("max");
   }
@@ -10549,17 +10692,20 @@ class BaseRatingDisplay extends FASTElement {
     this.display.style.setProperty(CUSTOM_PROPERTY_NAME.maskImageOutlined, `url(${svgToDataURI(customSvgOutlined)})`);
   }
   setCustomPropertyValue(propertyName) {
-    if (!this.display || SUPPORTS_ATTR_TYPE) {
-      return;
-    }
-    const propertyValue = this[propertyName];
-    if (typeof propertyValue !== "number" || Number.isNaN(propertyValue)) {
-      this.display.style.removeProperty(CUSTOM_PROPERTY_NAME[propertyName]);
-    } else {
-      this.display.style.setProperty(CUSTOM_PROPERTY_NAME[propertyName], `${propertyValue}`);
-    }
+    requestAnimationFrame(() => {
+      if (!this.display || SUPPORTS_ATTR_TYPE) {
+        return;
+      }
+      const propertyValue = this[propertyName];
+      if (typeof propertyValue !== "number" || Number.isNaN(propertyValue)) {
+        this.display.style.removeProperty(CUSTOM_PROPERTY_NAME[propertyName]);
+      } else {
+        this.display.style.setProperty(CUSTOM_PROPERTY_NAME[propertyName], `${propertyValue}`);
+      }
+    });
   }
 }
+__decorateClass$h([observable], BaseRatingDisplay.prototype, "iconSlot", 2);
 __decorateClass$h([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "count", 2);
@@ -10625,11 +10771,6 @@ const definition$c = RatingDisplay.compose({
 
 definition$c.define(FluentDesignSystem.registry);
 
-const SliderOrientation = Orientation;
-const SliderMode = {
-  singleValue: "single-value"
-};
-
 function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   let pct = limit(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
   if (direction === Direction.rtl) {
@@ -10638,6 +10779,11 @@ function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   return pct;
 }
 
+const SliderOrientation = Orientation;
+const SliderMode = {
+  singleValue: "single-value"
+};
+
 var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
 var __decorateClass$f = (decorators, target, key, kind) => {
@@ -10684,6 +10830,9 @@ class Slider extends FASTElement {
      *  If the event handler is null it removes the events
      */
     this.handleThumbPointerDown = event => {
+      if (this.isDisabled) {
+        return true;
+      }
       const windowFn = event !== null ? window.addEventListener : window.removeEventListener;
       windowFn("pointerup", this.handleWindowPointerUp);
       windowFn("pointermove", this.handlePointerMove, {
@@ -10700,7 +10849,7 @@ class Slider extends FASTElement {
      *  Handle mouse moves during a thumb drag operation
      */
     this.handlePointerMove = event => {
-      if (this.disabled || event.defaultPrevented) {
+      if (this.isDisabled || event.defaultPrevented) {
         return;
       }
       const sourceEvent = window.TouchEvent && event instanceof TouchEvent ? event.touches[0] : event;
@@ -10724,7 +10873,7 @@ class Slider extends FASTElement {
      * @param event - PointerEvent or null. If there is no event handler it will remove the events
      */
     this.handlePointerDown = event => {
-      if (event === null || !this.disabled) {
+      if (event === null || !this.isDisabled) {
         const windowFn = event !== null ? window.addEventListener : window.removeEventListener;
         const documentFn = event !== null ? document.addEventListener : document.removeEventListener;
         windowFn("pointerup", this.handleWindowPointerUp);
@@ -10859,7 +11008,7 @@ class Slider extends FASTElement {
    */
   setValidity(flags, message, anchor) {
     if (this.$fastController.isConnected) {
-      if (this.disabled) {
+      if (this.isDisabled) {
         this.elementInternals.setValidity({});
         return;
       }
@@ -10950,6 +11099,15 @@ class Slider extends FASTElement {
   disabledChanged() {
     this.setDisabledSideEffect(this.disabled);
   }
+  /**
+   * Returns true if the component is disabled, taking into account the `disabled`
+   * attribute, `aria-disabled` attribute, and the `:disabled` pseudo-class.
+   *
+   * @internal
+   */
+  get isDisabled() {
+    return this.disabled || this.elementInternals?.ariaDisabled === "true" || this.isConnected && this.matches(":disabled");
+  }
   minChanged() {
     this.elementInternals.ariaValueMin = `${this.minAsNumber}`;
     if (this.$fastController.isConnected && this.minAsNumber > this.valueAsNumber) {
@@ -11016,30 +11174,34 @@ class Slider extends FASTElement {
       this.setSliderPosition();
     }
   }
-  /**
-   * @internal
-   */
   connectedCallback() {
     super.connectedCallback();
-    this.direction = getDirection(this);
-    this.setDisabledSideEffect(this.disabled);
-    this.updateStepMultiplier();
-    this.setupTrackConstraints();
-    this.setupDefaultValue();
-    this.setSliderPosition();
-    Observable.getNotifier(this).subscribe(this, "max");
-    Observable.getNotifier(this).subscribe(this, "min");
-    Observable.getNotifier(this).subscribe(this, "step");
-    this.handleStepStyles();
+    requestAnimationFrame(() => {
+      if (!this.$fastController.isConnected) {
+        return;
+      }
+      this.direction = getDirection(this);
+      this.setDisabledSideEffect(this.disabled);
+      this.updateStepMultiplier();
+      this.setupTrackConstraints();
+      this.setupDefaultValue();
+      this.setSliderPosition();
+      this.handleStepStyles();
+      const notifier = Observable.getNotifier(this);
+      notifier.subscribe(this, "max");
+      notifier.subscribe(this, "min");
+      notifier.subscribe(this, "step");
+    });
   }
   /**
    * @internal
    */
   disconnectedCallback() {
     super.disconnectedCallback();
-    Observable.getNotifier(this).unsubscribe(this, "max");
-    Observable.getNotifier(this).unsubscribe(this, "min");
-    Observable.getNotifier(this).unsubscribe(this, "step");
+    const notifier = Observable.getNotifier(this);
+    notifier.unsubscribe(this, "max");
+    notifier.unsubscribe(this, "min");
+    notifier.unsubscribe(this, "step");
   }
   /**
    * Increment the value by the step
@@ -11064,7 +11226,7 @@ class Slider extends FASTElement {
     this.value = decrementedValString;
   }
   handleKeydown(event) {
-    if (this.disabled) {
+    if (this.isDisabled) {
       return true;
     }
     switch (event.key) {
@@ -11149,12 +11311,11 @@ class Slider extends FASTElement {
   /**
    * Makes sure the side effects of set up when the disabled state changes.
    */
-  setDisabledSideEffect(disabled) {
-    if (!this.$fastController.isConnected) {
-      return;
-    }
-    this.elementInternals.ariaDisabled = disabled.toString();
-    this.tabIndex = disabled ? -1 : 0;
+  setDisabledSideEffect(disabled = this.isDisabled) {
+    Updates.enqueue(() => {
+      this.elementInternals.ariaDisabled = disabled.toString();
+      this.tabIndex = disabled ? -1 : 0;
+    });
   }
 }
 /**
@@ -11296,9 +11457,23 @@ var __decorateClass$d = (decorators, target, key, kind) => {
   return result;
 };
 class Tab extends FASTElement {
+  constructor() {
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.role = "tab";
+  }
   connectedCallback() {
     super.connectedCallback();
-    if (this.styles !== void 0) {
+    this.slot || (this.slot = "tab");
+    if (this.disabled) {
+      this.setAttribute("aria-disabled", "true");
+    }
+    if (this.styles) {
       this.$fastController.removeStyles(this.styles);
     }
     this.styles = css`
@@ -11330,8 +11505,15 @@ const definition$8 = Tab.compose({
 
 definition$8.define(FluentDesignSystem.registry);
 
+function isTab(element, tagName = "-tab") {
+  if (element?.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  return element.tagName.toLowerCase().endsWith(tagName);
+}
+
 const isARIADisabledElement = el => {
-  return el.getAttribute("aria-disabled") === "true";
+  return el.getAttribute("aria-disabled") === "true" || el.elementInternals?.ariaDisabled === "true";
 };
 const isHiddenElement = el => {
   return el.hasAttribute("hidden");
@@ -11340,13 +11522,6 @@ const isFocusableElement = el => {
   return !isARIADisabledElement(el) && !isHiddenElement(el);
 };
 
-function isTab(element, tagName = "-tab") {
-  if (element?.nodeType !== Node.ELEMENT_NODE) {
-    return false;
-  }
-  return element.tagName.toLowerCase().endsWith(tagName);
-}
-
 const TablistAppearance = {
   subtle: "subtle",
   transparent: "transparent"
@@ -11363,7 +11538,7 @@ var __decorateClass$c = (decorators, target, key, kind) => {
 };
 class BaseTablist extends FASTElement {
   constructor() {
-    super(...arguments);
+    super();
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -11380,6 +11555,9 @@ class BaseTablist extends FASTElement {
     };
     this.handleTabClick = event => {
       const selectedTab = event.currentTarget;
+      if (selectedTab.disabled || this.disabled) {
+        return;
+      }
       if (selectedTab.nodeType === Node.ELEMENT_NODE && isFocusableElement(selectedTab)) {
         this.prevActiveTabIndex = this.activeTabIndex;
         this.activeTabIndex = this.tabs.indexOf(selectedTab);
@@ -11387,6 +11565,9 @@ class BaseTablist extends FASTElement {
       }
     };
     this.handleTabKeyDown = event => {
+      if (this.disabled) {
+        return;
+      }
       const dir = getDirection(this);
       switch (event.key) {
         case keyArrowLeft:
@@ -11427,6 +11608,8 @@ class BaseTablist extends FASTElement {
           break;
       }
     };
+    this.elementInternals.role = "tablist";
+    this.elementInternals.ariaOrientation = this.orientation ?? TablistOrientation.horizontal;
   }
   /**
    * Handles disabled changes
@@ -11437,25 +11620,23 @@ class BaseTablist extends FASTElement {
    */
   disabledChanged(prev, next) {
     toggleState(this.elementInternals, "disabled", next);
-    if (this.$fastController.isConnected) {
-      this.setTabs();
-    }
+    this.setTabs();
   }
   /**
    * @internal
    */
   orientationChanged(prev, next) {
-    this.elementInternals.ariaOrientation = next ?? TablistOrientation.horizontal;
-    swapStates(this.elementInternals, prev, next, TablistOrientation);
-    if (this.$fastController.isConnected) {
-      this.setTabs();
+    if (this.elementInternals) {
+      this.elementInternals.ariaOrientation = next ?? TablistOrientation.horizontal;
+      swapStates(this.elementInternals, prev, next, TablistOrientation);
     }
+    this.setTabs();
   }
   /**
    * @internal
    */
   activeidChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected && this.tabs.length > 0) {
+    if (this.tabs?.length > 0) {
       this.prevActiveTabIndex = this.tabs.findIndex(item => item.id === oldValue);
       this.setTabs();
       if (oldValue) {
@@ -11486,8 +11667,14 @@ class BaseTablist extends FASTElement {
   /**
    * @internal
    */
-  tabsChanged() {
-    if (this.$fastController.isConnected && this.tabs.length > 0) {
+  tabsChanged(prev, next) {
+    if (prev?.length) {
+      prev.forEach(tab => {
+        tab.removeEventListener("click", this.handleTabClick);
+        tab.removeEventListener("keydown", this.handleTabKeyDown);
+      });
+    }
+    if (this.tabs.length > 0) {
       this.tabIds = this.getTabIds();
       this.setTabs();
       for (const tab of this.tabs) {
@@ -11517,12 +11704,11 @@ class BaseTablist extends FASTElement {
    */
   setTabs() {
     this.activeTabIndex = this.getActiveIndex();
-    const hasStartSlot = this.tabs.some(tab => !!tab.querySelector("[slot='start']"));
-    this.tabs.forEach((tab, index) => {
+    const hasStartSlot = this.tabs?.some(tab => !!tab.querySelector("[slot='start']"));
+    this.tabs?.forEach((tab, index) => {
       if (tab.slot === "tab") {
         const isActiveTab = this.activeTabIndex === index && isFocusableElement(tab);
         const tabId = this.tabIds[index];
-        console.log("disabled", this.disabled);
         if (!tab.disabled) {
           this.disabled ? tab.setAttribute("aria-disabled", "true") : tab.removeAttribute("aria-disabled");
         }
@@ -11586,8 +11772,10 @@ class BaseTablist extends FASTElement {
    */
   connectedCallback() {
     super.connectedCallback();
-    this.tabIds = this.getTabIds();
-    this.activeTabIndex = this.getActiveIndex();
+    waitForConnectedDescendants(this, () => {
+      this.tabIds = this.getTabIds();
+      this.setTabs();
+    });
   }
 }
 __decorateClass$c([attr({
@@ -11737,8 +11925,8 @@ class Tablist extends BaseTablist {
   /**
    * Initiates the active tab indicator animation loop when tabs change.
    */
-  tabsChanged() {
-    super.tabsChanged();
+  tabsChanged(prev, next) {
+    super.tabsChanged(prev, next);
     this.setTabData();
     if (this.activetab) {
       this.animationLoop(this.activetab);
@@ -11804,6 +11992,24 @@ class BaseTextArea extends FASTElement {
     this.resize = TextAreaResize.none;
     this.spellcheck = false;
   }
+  /**
+   * Sets up a mutation observer to watch for changes to the control element's
+   * attributes that could affect validity, and binds an input event listener to detect user interaction.
+   *
+   * @internal
+   */
+  controlElChanged() {
+    this.controlElAttrObserver = new MutationObserver(() => {
+      this.setValidity();
+    });
+    this.controlElAttrObserver.observe(this.controlEl, {
+      attributes: true,
+      attributeFilter: ["disabled", "required", "readonly", "maxlength", "minlength"]
+    });
+    this.controlEl.addEventListener("input", () => this.userInteracted = true, {
+      once: true
+    });
+  }
   defaultSlottedNodesChanged() {
     const next = this.getContent();
     this.defaultValue = next;
@@ -11845,6 +12051,9 @@ class BaseTextArea extends FASTElement {
   }
   readOnlyChanged() {
     this.elementInternals.ariaReadOnly = `${!!this.readOnly}`;
+    if (this.$fastController.isConnected) {
+      this.setValidity();
+    }
   }
   requiredChanged() {
     this.elementInternals.ariaRequired = `${!!this.required}`;
@@ -11945,10 +12154,19 @@ class BaseTextArea extends FASTElement {
    */
   connectedCallback() {
     super.connectedCallback();
-    this.setDefaultValue();
-    this.maybeCreateAutoSizerEl();
-    this.bindEvents();
-    this.observeControlElAttrs();
+    requestAnimationFrame(() => {
+      if (!this.$fastController.isConnected) {
+        return;
+      }
+      const preConnect = this.preConnectControlEl;
+      const content = this.getContent();
+      this.defaultValue = content || preConnect?.defaultValue || "";
+      this.value = preConnect?.value || this.defaultValue;
+      this.setFormValue(this.value);
+      this.setValidity();
+      this.preConnectControlEl = null;
+      this.maybeCreateAutoSizerEl();
+    });
   }
   /**
    * @internal
@@ -12043,18 +12261,6 @@ class BaseTextArea extends FASTElement {
   select() {
     this.controlEl.select();
   }
-  setDefaultValue() {
-    this.defaultValue = this.innerHTML.trim() || this.preConnectControlEl.defaultValue || "";
-    this.value = this.preConnectControlEl.value || this.defaultValue;
-    this.setFormValue(this.value);
-    this.setValidity();
-    this.preConnectControlEl = null;
-  }
-  bindEvents() {
-    this.controlEl.addEventListener("input", () => this.userInteracted = true, {
-      once: true
-    });
-  }
   /**
    * Gets the content inside the light DOM, if any HTML element is present, use its `outerHTML` value.
    */
@@ -12070,15 +12276,6 @@ class BaseTextArea extends FASTElement {
       }
     }).join("") || "";
   }
-  observeControlElAttrs() {
-    this.controlElAttrObserver = new MutationObserver(() => {
-      this.setValidity();
-    });
-    this.controlElAttrObserver.observe(this.controlEl, {
-      attributes: true,
-      attributeFilter: ["disabled", "required", "readonly", "maxlength", "minlength"]
-    });
-  }
   setDisabledSideEffect(disabled) {
     this.elementInternals.ariaDisabled = `${disabled}`;
     if (this.controlEl) {
@@ -12152,6 +12349,7 @@ class BaseTextArea extends FASTElement {
  * @public
  */
 BaseTextArea.formAssociated = true;
+__decorateClass$a([observable], BaseTextArea.prototype, "controlEl", 2);
 __decorateClass$a([observable], BaseTextArea.prototype, "defaultSlottedNodes", 2);
 __decorateClass$a([observable], BaseTextArea.prototype, "labelSlottedNodes", 2);
 __decorateClass$a([attr], BaseTextArea.prototype, "autocomplete", 2);
@@ -12324,9 +12522,11 @@ class BaseTextInput extends FASTElement {
    * @internal
    */
   defaultSlottedNodesChanged(prev, next) {
-    if (this.$fastController.isConnected) {
-      this.controlLabel.hidden = !next?.length;
-    }
+    Updates.enqueue(() => {
+      if (this.controlLabel) {
+        this.controlLabel.hidden = !next?.some(node => node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim());
+      }
+    });
   }
   /**
    * Sets the value of the element to the initial value.
@@ -12370,7 +12570,11 @@ class BaseTextInput extends FASTElement {
    * @internal
    */
   controlChanged(prev, next) {
-    this.setValidity();
+    Updates.enqueue(() => {
+      if (this.$fastController.isConnected) {
+        this.setValidity();
+      }
+    });
   }
   /**
    * The element's validity state.
@@ -12479,6 +12683,7 @@ class BaseTextInput extends FASTElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.tabIndex = Number(this.getAttribute("tabindex") ?? 0) < 0 ? -1 : 0;
     this.setFormValue(this.value);
     this.setValidity();
   }
@@ -12692,10 +12897,7 @@ const styles$5 = css`
   :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
 
 function textInputTemplate(options = {}) {
-  return html`<template @beforeinput="${(x, c) => x.beforeinputHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><label part="label" for="control" class="label" ${ref("controlLabel")}><slot ${slotted({
-    property: "defaultSlottedNodes",
-    filter: whitespaceFilter
-  })}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @change="${(x, c) => x.changeHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" ?autofocus="${x => x.autofocus}" autocomplete="${x => x.autocomplete}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" ?multiple="${x => x.multiple}" name="${x => x.name}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" spellcheck="${x => x.spellcheck}" type="${x => x.type}" value="${x => x.initialValue}" ${ref("control")} />${endSlotTemplate(options)}</div></template>`;
+  return html`<template @beforeinput="${(x, c) => x.beforeinputHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><label part="label" for="control" class="label" ${ref("controlLabel")}><slot ${slotted("defaultSlottedNodes")}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @change="${(x, c) => x.changeHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" ?autofocus="${x => x.autofocus}" autocomplete="${x => x.autocomplete}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" ?multiple="${x => x.multiple}" name="${x => x.name}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" spellcheck="${x => x.spellcheck}" type="${x => x.type}" value="${x => x.initialValue}" ${ref("control")} />${endSlotTemplate(options)}</div></template>`;
 }
 const template$5 = textInputTemplate();
 
@@ -13098,9 +13300,21 @@ class BaseTree extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
-    this.childTreeItems = [];
     this.elementInternals.role = "tree";
   }
+  /**
+   * Calls the slot change handler when the `defaultSlot` reference is updated
+   * by the template binding.
+   *
+   * @internal
+   */
+  defaultSlotChanged() {
+    this.handleDefaultSlotChange();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.tabIndex = Number(this.getAttribute("tabindex") ?? 0) < 0 ? -1 : 0;
+  }
   /** @internal */
   childTreeItemsChanged() {
     this.updateCurrentSelected();
@@ -13294,6 +13508,7 @@ class BaseTree extends FASTElement {
   }
 }
 __decorateClass$3([observable], BaseTree.prototype, "currentSelected", 2);
+__decorateClass$3([observable], BaseTree.prototype, "defaultSlot", 2);
 __decorateClass$3([observable], BaseTree.prototype, "childTreeItems", 2);
 
 var __defProp$2 = Object.defineProperty;
@@ -13374,11 +13589,19 @@ class BaseTreeItem extends FASTElement {
      */
     this.elementInternals = this.attachInternals();
     this.expanded = false;
-    this.selected = false;
     this.empty = false;
     this.childTreeItems = [];
     this.elementInternals.role = "treeitem";
   }
+  /**
+   * Calls the slot change handler when the `itemSlot` reference is updated
+   * by the template binding.
+   *
+   * @internal
+   */
+  itemSlotChanged() {
+    this.handleItemSlotChange();
+  }
   /**
    * Handles changes to the expanded attribute
    * @param prev - the previous state
@@ -13428,7 +13651,9 @@ class BaseTreeItem extends FASTElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.updateTabindexBySelected();
+    Updates.enqueue(() => {
+      this.updateTabindexBySelected();
+    });
   }
   /**
    * Updates the childrens indent
@@ -13471,9 +13696,7 @@ class BaseTreeItem extends FASTElement {
     return isTreeItem(this.parentElement);
   }
   updateTabindexBySelected() {
-    if (this.$fastController.isConnected) {
-      this.tabIndex = this.selected ? 0 : -1;
-    }
+    this.tabIndex = this.selected ? 0 : -1;
   }
   /** @internal */
   handleItemSlotChange() {