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

package/dist/web-components.js

@@ -3943,70 +3943,70 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
   compose
 });
 
-var __defProp$R = Object.defineProperty;
-var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
-var __decorateClass$R = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
+var __defProp$P = Object.defineProperty;
+var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
+var __decorateClass$P = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$R(target, key, result);
+  if (kind && result) __defProp$P(target, key, result);
   return result;
 };
 class ARIAGlobalStatesAndProperties {}
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-atomic"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-busy"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-controls"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-current"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-describedby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-details"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-disabled"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-errormessage"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-flowto"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-haspopup"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-hidden"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-invalid"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-keyshortcuts"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-label"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-labelledby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-live"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-owns"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-relevant"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$R([attr({
+__decorateClass$P([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
@@ -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;
@@ -4273,12 +4282,12 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-var __defProp$Q = Object.defineProperty;
-var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
-var __decorateClass$Q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(target, key) : target;
+var __defProp$O = Object.defineProperty;
+var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
+var __decorateClass$O = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$Q(target, key, result);
+  if (kind && result) __defProp$O(target, key, result);
   return result;
 };
 class BaseAccordionItem extends FASTElement {
@@ -4296,25 +4305,25 @@ class BaseAccordionItem extends FASTElement {
     this.id = uniqueId$1("accordion-");
   }
 }
-__decorateClass$Q([attr({
+__decorateClass$O([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseAccordionItem.prototype, "headinglevel", 2);
-__decorateClass$Q([attr({
+__decorateClass$O([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "expanded", 2);
-__decorateClass$Q([attr({
+__decorateClass$O([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "disabled", 2);
-__decorateClass$Q([attr], BaseAccordionItem.prototype, "id", 2);
+__decorateClass$O([attr], BaseAccordionItem.prototype, "id", 2);
 
-var __defProp$P = Object.defineProperty;
-var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
+var __defProp$N = Object.defineProperty;
+var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
+var __decorateClass$N = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$P(target, key, result);
+  if (kind && result) __defProp$N(target, key, result);
   return result;
 };
 class AccordionItem extends BaseAccordionItem {
@@ -4323,11 +4332,11 @@ class AccordionItem extends BaseAccordionItem {
     this.block = false;
   }
 }
-__decorateClass$P([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$P([attr({
+__decorateClass$N([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$N([attr({
   attribute: "marker-position"
 })], AccordionItem.prototype, "markerPosition", 2);
-__decorateClass$P([attr({
+__decorateClass$N([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
@@ -4578,7 +4587,7 @@ const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 const curveEasyEase = "var(--curveEasyEase)";
 const curveLinear = "var(--curveLinear)";
 
-const styles$G = css`
+const styles$E = css`
   ${display("block")}
 
   :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer;font:inherit;grid-column:auto / span 2;grid-row:1;height:44px;outline:none;padding:0;text-align:start}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot='marker-collapsed'],[slot='marker-expanded'])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-inline-end:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.content{margin:0 ${spacingHorizontalM}}::slotted([slot='start']){display:flex;justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .content{display:block}:host([expanded]) .default-marker-collapsed,:host([expanded]) ::slotted([slot='marker-collapsed']),:host(:not([expanded])) :is(.default-marker-expanded,.content),:host(:not([expanded])) ::slotted([slot='marker-expanded']){display:none}:host([expanded]) ::slotted([slot='marker-expanded']),:host(:not([expanded])) ::slotted([slot='marker-collapsed']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([marker-position='end']) ::slotted([slot='start']){grid-column:1 / span 1}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:4 / span 1;padding-inline-start:${spacingHorizontalS};padding-inline-end:0}:host([marker-position='end']) .button{grid-column:2 / span 3}:host([block]){max-width:100%}:host([marker-position='end']) .heading{grid-template-columns:auto auto 28px;padding-inline:${spacingHorizontalM}}:host([marker-position='end']:has([slot='start'])) .heading{padding-inline:${spacingHorizontalMNudge} ${spacingHorizontalM}}:host([block][marker-position='end']) .heading{grid-template-columns:auto 1fr}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:5 / span 1}`;
@@ -4614,30 +4623,30 @@ const chevronDown20Filled = html.partial(`<svg
 function accordionItemTemplate(options = {}) {
   return html`<div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} ?disabled="${x => x.disabled ? "true" : void 0}" aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}"><slot name="heading"></slot></button>${startSlotTemplate(options)}<slot name="marker-expanded">${staticallyCompose(options.expandedIcon)}</slot><slot name="marker-collapsed">${staticallyCompose(options.collapsedIcon)}</slot></div><div class="content" part="content" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
 }
-const template$H = accordionItemTemplate({
+const template$F = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
 
-const definition$H = AccordionItem.compose({
+const definition$F = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$H,
-  styles: styles$G
+  template: template$F,
+  styles: styles$E
 });
 
-definition$H.define(FluentDesignSystem.registry);
+definition$F.define(FluentDesignSystem.registry);
 
 const AccordionExpandMode = {
   single: "single",
   multi: "multi"
 };
 
-var __defProp$O = Object.defineProperty;
-var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
+var __defProp$M = Object.defineProperty;
+var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
+var __decorateClass$M = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$O(target, key, result);
+  if (kind && result) __defProp$M(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -4774,12 +4783,12 @@ class Accordion extends FASTElement {
     });
   }
 }
-__decorateClass$O([attr({
+__decorateClass$M([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$O([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$M([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
-const styles$F = css`
+const styles$D = css`
   ${display("flex")}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -4790,15 +4799,15 @@ function accordionTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$G = accordionTemplate();
+const template$E = accordionTemplate();
 
-const definition$G = Accordion.compose({
+const definition$E = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$G,
-  styles: styles$F
+  template: template$E,
+  styles: styles$D
 });
 
-definition$G.define(FluentDesignSystem.registry);
+definition$E.define(FluentDesignSystem.registry);
 
 const statesMap = /* @__PURE__ */new Map();
 function stateSelector(state) {
@@ -4873,12 +4882,12 @@ const AnchorAttributes = {
   type: "type"
 };
 
-var __defProp$N = Object.defineProperty;
-var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
-var __decorateClass$N = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
+var __defProp$L = Object.defineProperty;
+var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
+var __decorateClass$L = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$N(target, key, result);
+  if (kind && result) __defProp$L(target, key, result);
   return result;
 };
 class BaseAnchor extends FASTElement {
@@ -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);
@@ -4937,6 +4947,9 @@ class BaseAnchor extends FASTElement {
   clickHandler(e) {
     if (this.href) {
       const newTab = !this.isMac ? e.ctrlKey : e.metaKey;
+      if (newTab) {
+        e.preventDefault();
+      }
       this.handleNavigation(newTab);
     }
     return true;
@@ -4986,21 +4999,21 @@ class BaseAnchor extends FASTElement {
     return proxy;
   }
 }
-__decorateClass$N([attr], BaseAnchor.prototype, "download", 2);
-__decorateClass$N([attr], BaseAnchor.prototype, "href", 2);
-__decorateClass$N([attr], BaseAnchor.prototype, "hreflang", 2);
-__decorateClass$N([attr], BaseAnchor.prototype, "ping", 2);
-__decorateClass$N([attr], BaseAnchor.prototype, "referrerpolicy", 2);
-__decorateClass$N([attr], BaseAnchor.prototype, "rel", 2);
-__decorateClass$N([attr], BaseAnchor.prototype, "target", 2);
-__decorateClass$N([attr], BaseAnchor.prototype, "type", 2);
+__decorateClass$L([attr], BaseAnchor.prototype, "download", 2);
+__decorateClass$L([attr], BaseAnchor.prototype, "href", 2);
+__decorateClass$L([attr], BaseAnchor.prototype, "hreflang", 2);
+__decorateClass$L([attr], BaseAnchor.prototype, "ping", 2);
+__decorateClass$L([attr], BaseAnchor.prototype, "referrerpolicy", 2);
+__decorateClass$L([attr], BaseAnchor.prototype, "rel", 2);
+__decorateClass$L([attr], BaseAnchor.prototype, "target", 2);
+__decorateClass$L([attr], BaseAnchor.prototype, "type", 2);
 
-var __defProp$M = Object.defineProperty;
-var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
-var __decorateClass$M = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
+var __defProp$K = Object.defineProperty;
+var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
+var __decorateClass$K = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$M(target, key, result);
+  if (kind && result) __defProp$K(target, key, result);
   return result;
 };
 class AnchorButton extends BaseAnchor {
@@ -5041,10 +5054,10 @@ class AnchorButton extends BaseAnchor {
     toggleState(this.elementInternals, "icon", !!next);
   }
 }
-__decorateClass$M([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$M([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$M([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$M([attr({
+__decorateClass$K([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$K([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$K([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$K([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
@@ -5054,13 +5067,13 @@ const baseButtonStyles = css`
   ${display("inline-flex")}
 
   :host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){:host{transition-duration:0.01ms}}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}::slotted([slot='end']),[slot='end']{flex-shrink:0;margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is([shape='circular'],[shape='circular']:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is([shape='square'],[shape='square']:focus-visible)){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:is(:hover,:hover:active):not(:focus-visible)){border-color:transparent}:host([appearance='primary']:is(:hover,:hover:active)){color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is([appearance='transparent'],[appearance='transparent']:is(:hover,:active))){border-color:transparent}`;
-const styles$E = css`
+const styles$C = css`
   ${baseButtonStyles}
 
   :host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host([appearance='primary']:is(:disabled,[disabled-focusable])),:host([appearance='primary']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host([appearance='outline']:is(:disabled,[disabled-focusable])),:host([appearance='outline']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host([appearance='subtle']:is(:disabled,[disabled-focusable])),:host([appearance='subtle']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='transparent']:is(:disabled,[disabled-focusable])),:host([appearance='transparent']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{background-color:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight !important}:host([appearance='primary']:not(:is(:hover,:focus-visible))){background-color:Highlight;color:HighlightText;forced-color-adjust:none}:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])){background-color:ButtonFace;color:GrayText;border-color:ButtonText}`));
 
-const styles$D = css`
+const styles$B = css`
   ${baseButtonStyles}
 
   ::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -5069,15 +5082,15 @@ const styles$D = css`
 function anchorTemplate$1(options = {}) {
   return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$F = anchorTemplate$1();
+const template$D = anchorTemplate$1();
 
-const definition$F = AnchorButton.compose({
+const definition$D = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$F,
-  styles: styles$D
+  template: template$D,
+  styles: styles$B
 });
 
-definition$F.define(FluentDesignSystem.registry);
+definition$D.define(FluentDesignSystem.registry);
 
 const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
 const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
@@ -5120,17 +5133,18 @@ function getInitials(displayName, isRtl, options) {
   return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);
 }
 
-var __defProp$L = Object.defineProperty;
-var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
-var __decorateClass$L = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
+var __defProp$J = Object.defineProperty;
+var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
+var __decorateClass$J = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$L(target, key, result);
+  if (kind && result) __defProp$J(target, key, result);
   return result;
 };
 class BaseAvatar extends FASTElement {
   constructor() {
     super();
+    this.slottedDefaults = [];
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -5139,9 +5153,105 @@ class BaseAvatar extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "img";
   }
+  /**
+   * 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();
+    });
+  }
+  /**
+   * Updates the monogram text content when the ref is captured.
+   *
+   * @internal
+   */
+  monogramChanged() {
+    this.updateMonogram();
+  }
+  /**
+   * 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.
+   *
+   * @internal
+   */
+  cleanupSlottedContent() {
+    this.normalize();
+    if (!CSS.supports("selector(:has-slotted)")) {
+      this.defaultSlot.classList.toggle("has-slotted", !!this.slottedDefaults.length);
+    }
+    if (!this.innerText.trim()) {
+      this.slottedDefaults.forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          node.remove();
+        }
+      });
+    }
+  }
 }
-__decorateClass$L([attr], BaseAvatar.prototype, "name", 2);
-__decorateClass$L([attr], BaseAvatar.prototype, "initials", 2);
+__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);
 
 const AvatarNamedColor = {
   darkRed: "dark-red",
@@ -5182,12 +5292,12 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-var __defProp$K = Object.defineProperty;
-var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
-var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
+var __defProp$I = Object.defineProperty;
+var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
+var __decorateClass$I = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$K(target, key, result);
+  if (kind && result) __defProp$I(target, key, result);
   return result;
 };
 const _Avatar = class _Avatar extends BaseAvatar {
@@ -5214,7 +5324,7 @@ const _Avatar = class _Avatar extends BaseAvatar {
       return;
     }
     const size = this.size ?? 32;
-    return this.initials ?? getInitials(this.name, window.getComputedStyle(this).direction === "rtl", {
+    return this.initials || getInitials(this.name, window.getComputedStyle(this).direction === "rtl", {
       firstInitialOnly: size <= 16
     });
   }
@@ -5242,14 +5352,14 @@ const _Avatar = class _Avatar extends BaseAvatar {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$K([attr], _Avatar.prototype, "active", 2);
-__decorateClass$K([attr], _Avatar.prototype, "shape", 2);
-__decorateClass$K([attr], _Avatar.prototype, "appearance", 2);
-__decorateClass$K([attr({
+__decorateClass$I([attr], _Avatar.prototype, "active", 2);
+__decorateClass$I([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$I([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$I([attr({
   converter: nullableNumberConverter
 })], _Avatar.prototype, "size", 2);
-__decorateClass$K([attr], _Avatar.prototype, "color", 2);
-__decorateClass$K([attr({
+__decorateClass$I([attr], _Avatar.prototype, "color", 2);
+__decorateClass$I([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -5274,22 +5384,22 @@ const animations = {
   normalEase: curveEasyEase,
   nullEasing: curveLinear
 };
-const styles$C = 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}}`;
+const styles$A = css`
+  ${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>${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$E = avatarTemplate();
+const template$C = avatarTemplate();
 
-const definition$E = Avatar.compose({
+const definition$C = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$E,
-  styles: styles$C
+  template: template$C,
+  styles: styles$A
 });
 
-definition$E.define(FluentDesignSystem.registry);
+definition$C.define(FluentDesignSystem.registry);
 
 const BadgeAppearance = {
   filled: "filled",
@@ -5308,12 +5418,12 @@ const BadgeColor = {
   warning: "warning"
 };
 
-var __defProp$J = Object.defineProperty;
-var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
-var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
+var __defProp$H = Object.defineProperty;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$H = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$J(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
 class Badge extends FASTElement {
@@ -5323,10 +5433,10 @@ class Badge extends FASTElement {
     this.color = BadgeColor.brand;
   }
 }
-__decorateClass$J([attr], Badge.prototype, "appearance", 2);
-__decorateClass$J([attr], Badge.prototype, "color", 2);
-__decorateClass$J([attr], Badge.prototype, "shape", 2);
-__decorateClass$J([attr], Badge.prototype, "size", 2);
+__decorateClass$H([attr], Badge.prototype, "appearance", 2);
+__decorateClass$H([attr], Badge.prototype, "color", 2);
+__decorateClass$H([attr], Badge.prototype, "shape", 2);
+__decorateClass$H([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
 const badgeBaseStyles = css.partial`
@@ -5680,7 +5790,7 @@ css.partial`
   font-weight: ${fontWeightSemibold};
 `;
 
-const styles$B = css`
+const styles$z = css`
   :host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeTintStyles}
   ${badgeOutlineStyles}
   ${badgeGhostStyles}
@@ -5693,28 +5803,27 @@ const styles$B = css`
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$D = badgeTemplate();
+const template$B = badgeTemplate();
 
-const definition$D = Badge.compose({
+const definition$B = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$D,
-  styles: styles$B
+  template: template$B,
+  styles: styles$z
 });
 
-definition$D.define(FluentDesignSystem.registry);
+definition$B.define(FluentDesignSystem.registry);
 
-var __defProp$I = Object.defineProperty;
-var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __decorateClass$G = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$I(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 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.
@@ -5724,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.
@@ -5742,7 +5852,7 @@ class BaseButton extends FASTElement {
    * @internal
    */
   disabledFocusableChanged(previous, next) {
-    if (this.$fastController.isConnected) {
+    if (this.elementInternals) {
       this.elementInternals.ariaDisabled = `${!!next}`;
     }
   }
@@ -5792,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
@@ -5893,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.
    *
@@ -5923,46 +6045,46 @@ class BaseButton extends FASTElement {
  * @public
  */
 BaseButton.formAssociated = true;
-__decorateClass$I([attr({
+__decorateClass$G([attr({
   mode: "boolean"
 })], BaseButton.prototype, "autofocus", 2);
-__decorateClass$I([observable], BaseButton.prototype, "defaultSlottedContent", 2);
-__decorateClass$I([attr({
+__decorateClass$G([observable], BaseButton.prototype, "defaultSlottedContent", 2);
+__decorateClass$G([attr({
   mode: "boolean"
 })], BaseButton.prototype, "disabled", 2);
-__decorateClass$I([attr({
+__decorateClass$G([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], BaseButton.prototype, "disabledFocusable", 2);
-__decorateClass$I([attr({
+__decorateClass$G([attr({
   attribute: "formaction"
 })], BaseButton.prototype, "formAction", 2);
-__decorateClass$I([attr({
+__decorateClass$G([attr({
   attribute: "form"
 })], BaseButton.prototype, "formAttribute", 2);
-__decorateClass$I([attr({
+__decorateClass$G([attr({
   attribute: "formenctype"
 })], BaseButton.prototype, "formEnctype", 2);
-__decorateClass$I([attr({
+__decorateClass$G([attr({
   attribute: "formmethod"
 })], BaseButton.prototype, "formMethod", 2);
-__decorateClass$I([attr({
+__decorateClass$G([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], BaseButton.prototype, "formNoValidate", 2);
-__decorateClass$I([attr({
+__decorateClass$G([attr({
   attribute: "formtarget"
 })], BaseButton.prototype, "formTarget", 2);
-__decorateClass$I([attr], BaseButton.prototype, "name", 2);
-__decorateClass$I([attr], BaseButton.prototype, "type", 2);
-__decorateClass$I([attr], BaseButton.prototype, "value", 2);
+__decorateClass$G([attr], BaseButton.prototype, "name", 2);
+__decorateClass$G([attr], BaseButton.prototype, "type", 2);
+__decorateClass$G([attr], BaseButton.prototype, "value", 2);
 
-var __defProp$H = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __decorateClass$F = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$H(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 class Button extends BaseButton {
@@ -5971,10 +6093,10 @@ class Button extends BaseButton {
     this.iconOnly = false;
   }
 }
-__decorateClass$H([attr], Button.prototype, "appearance", 2);
-__decorateClass$H([attr], Button.prototype, "shape", 2);
-__decorateClass$H([attr], Button.prototype, "size", 2);
-__decorateClass$H([attr({
+__decorateClass$F([attr], Button.prototype, "appearance", 2);
+__decorateClass$F([attr], Button.prototype, "shape", 2);
+__decorateClass$F([attr], Button.prototype, "size", 2);
+__decorateClass$F([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
@@ -5983,22 +6105,22 @@ applyMixins(Button, StartEnd);
 function buttonTemplate$1(options = {}) {
   return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$C = buttonTemplate$1();
+const template$A = buttonTemplate$1();
 
-const definition$C = Button.compose({
+const definition$A = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$C,
-  styles: styles$E
+  template: template$A,
+  styles: styles$C
 });
 
-definition$C.define(FluentDesignSystem.registry);
+definition$A.define(FluentDesignSystem.registry);
 
-var __defProp$G = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$G(target, key, result);
+  if (kind && result) __defProp$E(target, key, result);
   return result;
 };
 class BaseCheckbox extends FASTElement {
@@ -6349,36 +6471,36 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$G([attr({
+__decorateClass$E([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$G([observable], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$G([attr({
+__decorateClass$E([observable], BaseCheckbox.prototype, "disabled", 2);
+__decorateClass$E([attr({
   attribute: "disabled",
   mode: "boolean"
 })], BaseCheckbox.prototype, "disabledAttribute", 2);
-__decorateClass$G([attr({
+__decorateClass$E([attr({
   attribute: "form"
 })], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$G([attr({
+__decorateClass$E([attr({
   attribute: "checked",
   mode: "boolean"
 })], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$G([attr({
+__decorateClass$E([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$G([attr], BaseCheckbox.prototype, "name", 2);
-__decorateClass$G([attr({
+__decorateClass$E([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$E([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
 
-var __defProp$F = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$F(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 class Checkbox extends BaseCheckbox {
@@ -6421,9 +6543,9 @@ class Checkbox extends BaseCheckbox {
     super.toggleChecked(force);
   }
 }
-__decorateClass$F([observable], Checkbox.prototype, "indeterminate", 2);
-__decorateClass$F([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$F([attr], Checkbox.prototype, "size", 2);
+__decorateClass$D([observable], Checkbox.prototype, "indeterminate", 2);
+__decorateClass$D([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$D([attr], Checkbox.prototype, "size", 2);
 
 const activeState = stateSelector("active");
 const badInputState = stateSelector("bad-input");
@@ -6454,7 +6576,7 @@ const userInvalidState = stateSelector("user-invalid");
 const validState = stateSelector("valid");
 const valueMissingState = stateSelector("value-missing");
 
-const styles$A = css`
+const styles$y = css`
   ${display("inline-flex")}
 
   :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -6480,23 +6602,23 @@ const indeterminateIndicator = html.partial(/* html */
 function checkboxTemplate(options = {}) {
   return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot><slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot></template>`;
 }
-const template$B = checkboxTemplate({
+const template$z = checkboxTemplate({
   checkedIndicator: checkedIndicator$2,
   indeterminateIndicator
 });
 
-const definition$B = Checkbox.compose({
+const definition$z = Checkbox.compose({
   name: `${FluentDesignSystem.prefix}-checkbox`,
-  template: template$B,
-  styles: styles$A
+  template: template$z,
+  styles: styles$y
 });
 
-definition$B.define(FluentDesignSystem.registry);
+definition$z.define(FluentDesignSystem.registry);
 
 class CompoundButton extends Button {}
 
-const styles$z = css`
-  ${styles$E}
+const styles$x = css`
+  ${styles$C}
 
   :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='transparent'],[appearance='subtle'],[appearance='subtle']:is(:hover,:active)))
     ::slotted([slot='description']){color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance]))
@@ -6507,22 +6629,22 @@ const styles$z = css`
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? null : x.tabIndex ?? 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$A = buttonTemplate();
+const template$y = buttonTemplate();
 
-const definition$A = CompoundButton.compose({
+const definition$y = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$A,
-  styles: styles$z
+  template: template$y,
+  styles: styles$x
 });
 
-definition$A.define(FluentDesignSystem.registry);
+definition$y.define(FluentDesignSystem.registry);
 
-var __defProp$E = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __defProp$C = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$E(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
 class CounterBadge extends FASTElement {
@@ -6546,10 +6668,11 @@ class CounterBadge extends FASTElement {
     this.setCount();
   }
   /**
-   * @internal
    * Function to set the count
    * This is the default slotted content for the counter badge
    * If children are slotted, that will override the value returned
+   *
+   * @internal
    */
   setCount() {
     const count = this.count ?? 0;
@@ -6559,27 +6682,27 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$E([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$E([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$E([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$E([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$E([attr({
+__decorateClass$C([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$C([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$C([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$C([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$C([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$E([attr({
+__decorateClass$C([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$E([attr({
+__decorateClass$C([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$E([attr({
+__decorateClass$C([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
-const styles$y = css`
+const styles$w = css`
   :host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -6592,15 +6715,15 @@ function composeTemplate(options = {}) {
     defaultContent: html`${x => x.setCount()}`
   });
 }
-const template$z = composeTemplate();
+const template$x = composeTemplate();
 
-const definition$z = CounterBadge.compose({
+const definition$x = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$z,
-  styles: styles$y
+  template: template$x,
+  styles: styles$w
 });
 
-definition$z.define(FluentDesignSystem.registry);
+definition$x.define(FluentDesignSystem.registry);
 
 const DialogType = {
   modal: "modal",
@@ -6614,12 +6737,12 @@ function isDialog(element, tagName = "-dialog") {
   return element.tagName.toLowerCase().endsWith(tagName);
 }
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$D(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 class Dialog extends FASTElement {
@@ -6627,9 +6750,10 @@ class Dialog extends FASTElement {
     super(...arguments);
     this.type = DialogType.modal;
     /**
-     * @public
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     this.emitBeforeToggle = () => {
       this.$emit("beforetoggle", {
@@ -6638,9 +6762,10 @@ class Dialog extends FASTElement {
       });
     };
     /**
-     * @public
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     this.emitToggle = () => {
       this.$emit("toggle", {
@@ -6649,29 +6774,16 @@ 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();
   }
   /**
-   * @public
    * Method to show the dialog
+   *
+   * @public
    */
   show() {
     Updates.enqueue(() => {
@@ -6685,8 +6797,9 @@ class Dialog extends FASTElement {
     });
   }
   /**
-   * @public
    * Method to hide the dialog
+   *
+   * @public
    */
   hide() {
     this.emitBeforeToggle();
@@ -6694,8 +6807,9 @@ class Dialog extends FASTElement {
     this.emitToggle();
   }
   /**
-   * @public
    * Handles click events on the dialog overlay for light-dismiss
+   *
+   * @public
    * @param event - The click event
    * @returns boolean
    */
@@ -6705,29 +6819,52 @@ 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$D([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$D([attr({
+__decorateClass$B([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$B([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$D([attr({
+__decorateClass$B([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$D([attr], Dialog.prototype, "type", 2);
+__decorateClass$B([attr({
+  attribute: "aria-label"
+})], Dialog.prototype, "ariaLabel", 2);
+__decorateClass$B([attr], Dialog.prototype, "type", 2);
 
-const template$y = html`<dialog class="dialog" part="dialog" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
+const template$w = html`<dialog class="dialog" part="dialog" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
-const styles$x = css`
+const styles$v = css`
   @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     @layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}`));
 
-const definition$y = Dialog.compose({
+const definition$w = Dialog.compose({
   name: `${FluentDesignSystem.prefix}-dialog`,
-  template: template$y,
-  styles: styles$x
+  template: template$w,
+  styles: styles$v
 });
 
-definition$y.define(FluentDesignSystem.registry);
+definition$w.define(FluentDesignSystem.registry);
 
 class DialogBody extends FASTElement {
   /**
@@ -6747,20 +6884,20 @@ class DialogBody extends FASTElement {
   }
 }
 
-const template$x = html`<template><div class="title" part="title"><slot name="title"></slot><slot name="title-action"></slot><slot name="close" @click="${(x, c) => x.clickHandler(c.event)}"></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div></template>`;
+const template$v = html`<template><div class="title" part="title"><slot name="title"></slot><slot name="title-action"></slot><slot name="close" @click="${(x, c) => x.clickHandler(c.event)}"></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div></template>`;
 
-const styles$w = css`
+const styles$u = css`
   ${display("grid")}
 
   :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL}}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL}}::slotted([slot='title-action']){margin-inline-start:auto}::slotted([slot='title']){font:inherit;padding:0;margin:0}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}@media (min-height:480px){.title{position:sticky;z-index:1}.actions{position:sticky;z-index:2}`;
 
-const definition$x = DialogBody.compose({
+const definition$v = DialogBody.compose({
   name: `${FluentDesignSystem.prefix}-dialog-body`,
-  template: template$x,
-  styles: styles$w
+  template: template$v,
+  styles: styles$u
 });
 
-definition$x.define(FluentDesignSystem.registry);
+definition$v.define(FluentDesignSystem.registry);
 
 const DividerRole = {
   /**
@@ -6774,12 +6911,12 @@ const DividerRole = {
 };
 const DividerOrientation = Orientation;
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+var __defProp$A = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __decorateClass$A = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$C(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 class BaseDivider extends FASTElement {
@@ -6826,44 +6963,44 @@ class BaseDivider extends FASTElement {
     swapStates(this.elementInternals, previous, next, DividerOrientation);
   }
 }
-__decorateClass$C([attr], BaseDivider.prototype, "role", 2);
-__decorateClass$C([attr], BaseDivider.prototype, "orientation", 2);
+__decorateClass$A([attr], BaseDivider.prototype, "role", 2);
+__decorateClass$A([attr], BaseDivider.prototype, "orientation", 2);
 
-var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$B(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
 class Divider extends BaseDivider {}
-__decorateClass$B([attr({
+__decorateClass$z([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
-__decorateClass$B([attr], Divider.prototype, "appearance", 2);
-__decorateClass$B([attr({
+__decorateClass$z([attr], Divider.prototype, "appearance", 2);
+__decorateClass$z([attr({
   mode: "boolean"
 })], Divider.prototype, "inset", 2);
 
 function dividerTemplate() {
   return html`<slot></slot>`;
 }
-const template$w = dividerTemplate();
+const template$u = dividerTemplate();
 
-const styles$v = css`
+const styles$t = css`
   ${display("flex")}
 
   :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){align-items:center;flex-direction:column;height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
 
-const definition$w = Divider.compose({
+const definition$u = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$w,
-  styles: styles$v
+  template: template$u,
+  styles: styles$t
 });
 
-definition$w.define(FluentDesignSystem.registry);
+definition$u.define(FluentDesignSystem.registry);
 
 const DrawerPosition = {
   start: "start",
@@ -6881,12 +7018,12 @@ const DrawerType = {
   inline: "inline"
 };
 
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+var __defProp$y = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$A(target, key, result);
+  if (kind && result) __defProp$y(target, key, result);
   return result;
 };
 class Drawer extends FASTElement {
@@ -6896,9 +7033,10 @@ class Drawer extends FASTElement {
     this.position = DrawerPosition.start;
     this.size = DrawerSize.medium;
     /**
-     * @public
      * Method to emit an event after the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     this.emitToggle = () => {
       this.$emit("toggle", {
@@ -6907,9 +7045,10 @@ class Drawer extends FASTElement {
       });
     };
     /**
-     * @public
      * Method to emit an event before the dialog's open state changes
      * HTML spec proposal: https://github.com/whatwg/html/issues/9733
+     *
+     * @public
      */
     this.emitBeforeToggle = () => {
       this.$emit("beforetoggle", {
@@ -6941,8 +7080,9 @@ class Drawer extends FASTElement {
     this.roleAttrObserver.disconnect();
   }
   /**
-   * @public
    * Method to show the drawer
+   *
+   * @public
    */
   show() {
     Updates.enqueue(() => {
@@ -6956,8 +7096,9 @@ class Drawer extends FASTElement {
     });
   }
   /**
-   * @public
    * Method to hide the drawer
+   *
+   * @public
    */
   hide() {
     this.emitBeforeToggle();
@@ -6978,8 +7119,9 @@ class Drawer extends FASTElement {
     return true;
   }
   /**
-   * @public
    * Handles cancel events on the drawer.
+   *
+   * @public
    */
   cancelHandler() {
     this.hide();
@@ -6997,27 +7139,26 @@ class Drawer extends FASTElement {
     });
   }
   updateDialogRole() {
-    console.log(this.role);
     if (!this.dialog) {
       return;
     }
     this.dialog.role = this.type === DrawerType.modal ? "dialog" : this.role;
   }
 }
-__decorateClass$A([attr], Drawer.prototype, "type", 2);
-__decorateClass$A([attr({
+__decorateClass$y([attr], Drawer.prototype, "type", 2);
+__decorateClass$y([attr({
   attribute: "aria-labelledby"
 })], Drawer.prototype, "ariaLabelledby", 2);
-__decorateClass$A([attr({
+__decorateClass$y([attr({
   attribute: "aria-describedby"
 })], Drawer.prototype, "ariaDescribedby", 2);
-__decorateClass$A([attr], Drawer.prototype, "position", 2);
-__decorateClass$A([attr({
+__decorateClass$y([attr], Drawer.prototype, "position", 2);
+__decorateClass$y([attr({
   attribute: "size"
 })], Drawer.prototype, "size", 2);
-__decorateClass$A([observable], Drawer.prototype, "dialog", 2);
+__decorateClass$y([observable], Drawer.prototype, "dialog", 2);
 
-const styles$u = css`
+const styles$s = css`
   ${display("block")}
 
   :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
@@ -7025,15 +7166,15 @@ const styles$u = css`
 function drawerTemplate() {
   return html`<dialog class="dialog" part="dialog" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" size="${x => x.size}" position="${x => x.position}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.cancelHandler()}" ${ref("dialog")}><slot></slot></dialog>`;
 }
-const template$v = drawerTemplate();
+const template$t = drawerTemplate();
 
-const definition$v = Drawer.compose({
+const definition$t = Drawer.compose({
   name: `${FluentDesignSystem.prefix}-drawer`,
-  template: template$v,
-  styles: styles$u
+  template: template$t,
+  styles: styles$s
 });
 
-definition$v.define(FluentDesignSystem.registry);
+definition$t.define(FluentDesignSystem.registry);
 
 class DrawerBody extends FASTElement {
   /**
@@ -7053,22 +7194,22 @@ class DrawerBody extends FASTElement {
   }
 }
 
-const styles$t = css`
+const styles$r = css`
   ${display("grid")}
   :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}::slotted([slot='title']){font:inherit;padding:0;margin:0}`;
 
 function drawerBodyTemplate() {
   return html`<div class="header" part="header"><slot name="title"></slot><slot name="close" @click="${(x, c) => x.clickHandler(c.event)}"></slot></div><div class="content" part="content"><slot></slot></div><div class="footer" part="footer"><slot name="footer"></slot></div>`;
 }
-const template$u = drawerBodyTemplate();
+const template$s = drawerBodyTemplate();
 
-const definition$u = DrawerBody.compose({
+const definition$s = DrawerBody.compose({
   name: `${FluentDesignSystem.prefix}-drawer-body`,
-  template: template$u,
-  styles: styles$t
+  template: template$s,
+  styles: styles$r
 });
 
-definition$u.define(FluentDesignSystem.registry);
+definition$s.define(FluentDesignSystem.registry);
 
 function isListbox(element, tagName = "-listbox") {
   if (element?.nodeType !== Node.ELEMENT_NODE) {
@@ -7088,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);
@@ -7106,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",
@@ -7152,16 +7281,16 @@ const dropdownButtonTemplate = html`<button aria-activedescendant="${x => x.acti
 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 @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
 }
-const template$t = dropdownTemplate({
+const template$r = dropdownTemplate({
   indicator: dropdownIndicatorTemplate
 });
 
-var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$z(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 const _BaseDropdown = class _BaseDropdown extends FASTElement {
@@ -7204,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) {
@@ -7255,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) {
@@ -7297,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;
         });
@@ -7332,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.
@@ -7814,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();
@@ -7877,48 +8015,48 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
  * @public
  */
 _BaseDropdown.formAssociated = true;
-__decorateClass$z([volatile], _BaseDropdown.prototype, "activeDescendant", 1);
-__decorateClass$z([observable], _BaseDropdown.prototype, "activeIndex", 2);
-__decorateClass$z([attr({
+__decorateClass$x([volatile], _BaseDropdown.prototype, "activeDescendant", 1);
+__decorateClass$x([observable], _BaseDropdown.prototype, "activeIndex", 2);
+__decorateClass$x([attr({
   attribute: "aria-labelledby",
   mode: "fromView"
 })], _BaseDropdown.prototype, "ariaLabelledBy", 2);
-__decorateClass$z([observable], _BaseDropdown.prototype, "control", 2);
-__decorateClass$z([attr({
+__decorateClass$x([observable], _BaseDropdown.prototype, "control", 2);
+__decorateClass$x([attr({
   mode: "boolean"
 })], _BaseDropdown.prototype, "disabled", 2);
-__decorateClass$z([volatile], _BaseDropdown.prototype, "displayValue", 1);
-__decorateClass$z([attr({
+__decorateClass$x([volatile], _BaseDropdown.prototype, "displayValue", 1);
+__decorateClass$x([attr({
   attribute: "id"
 })], _BaseDropdown.prototype, "id", 2);
-__decorateClass$z([observable], _BaseDropdown.prototype, "indicator", 2);
-__decorateClass$z([observable], _BaseDropdown.prototype, "indicatorSlot", 2);
-__decorateClass$z([attr({
+__decorateClass$x([observable], _BaseDropdown.prototype, "indicator", 2);
+__decorateClass$x([observable], _BaseDropdown.prototype, "indicatorSlot", 2);
+__decorateClass$x([attr({
   attribute: "value",
   mode: "fromView"
 })], _BaseDropdown.prototype, "initialValue", 2);
-__decorateClass$z([observable], _BaseDropdown.prototype, "listbox", 2);
-__decorateClass$z([attr({
+__decorateClass$x([observable], _BaseDropdown.prototype, "listbox", 2);
+__decorateClass$x([attr({
   mode: "boolean"
 })], _BaseDropdown.prototype, "multiple", 2);
-__decorateClass$z([attr], _BaseDropdown.prototype, "name", 2);
-__decorateClass$z([observable], _BaseDropdown.prototype, "open", 2);
-__decorateClass$z([attr], _BaseDropdown.prototype, "placeholder", 2);
-__decorateClass$z([attr({
+__decorateClass$x([attr], _BaseDropdown.prototype, "name", 2);
+__decorateClass$x([observable], _BaseDropdown.prototype, "open", 2);
+__decorateClass$x([attr], _BaseDropdown.prototype, "placeholder", 2);
+__decorateClass$x([attr({
   mode: "boolean"
 })], _BaseDropdown.prototype, "required", 2);
-__decorateClass$z([attr], _BaseDropdown.prototype, "type", 2);
-__decorateClass$z([attr({
+__decorateClass$x([attr], _BaseDropdown.prototype, "type", 2);
+__decorateClass$x([attr({
   attribute: "value"
 })], _BaseDropdown.prototype, "valueAttribute", 2);
 let BaseDropdown = _BaseDropdown;
 
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$y(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 class Dropdown extends BaseDropdown {
@@ -7927,21 +8065,21 @@ class Dropdown extends BaseDropdown {
     this.appearance = DropdownAppearance.outline;
   }
 }
-__decorateClass$y([attr], Dropdown.prototype, "appearance", 2);
-__decorateClass$y([attr], Dropdown.prototype, "size", 2);
+__decorateClass$w([attr], Dropdown.prototype, "appearance", 2);
+__decorateClass$w([attr], Dropdown.prototype, "size", 2);
 
-const styles$s = css`
+const styles$q = 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:${strokeWidthThin} solid ${colorTransparentStroke};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})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){color:GrayText}`;
 
-const definition$t = Dropdown.compose({
+const definition$r = Dropdown.compose({
   name: `${FluentDesignSystem.prefix}-dropdown`,
-  template: template$t,
-  styles: styles$s
+  template: template$r,
+  styles: styles$q
 });
 
-definition$t.define(FluentDesignSystem.registry);
+definition$r.define(FluentDesignSystem.registry);
 
 const LabelPosition = {
   above: "above",
@@ -7962,12 +8100,12 @@ const ValidationFlags = {
   valid: "valid"
 };
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$x(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 class BaseField extends FASTElement {
@@ -8146,17 +8284,17 @@ class BaseField extends FASTElement {
     }
   }
 }
-__decorateClass$x([observable], BaseField.prototype, "labelSlot", 2);
-__decorateClass$x([observable], BaseField.prototype, "messageSlot", 2);
-__decorateClass$x([observable], BaseField.prototype, "slottedInputs", 2);
-__decorateClass$x([observable], BaseField.prototype, "input", 2);
+__decorateClass$v([observable], BaseField.prototype, "labelSlot", 2);
+__decorateClass$v([observable], BaseField.prototype, "messageSlot", 2);
+__decorateClass$v([observable], BaseField.prototype, "slottedInputs", 2);
+__decorateClass$v([observable], BaseField.prototype, "input", 2);
 
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
+var __defProp$u = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$w(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 class Field extends BaseField {
@@ -8165,71 +8303,71 @@ class Field extends BaseField {
     this.labelPosition = LabelPosition.above;
   }
 }
-__decorateClass$w([attr({
+__decorateClass$u([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
 
-const styles$r = css`
+const styles$p = css`
   ${display("inline-grid")}
 
   :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host(${requiredState}) ::slotted([slot='label'])::after{content:'*' / '';color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){color:${colorNeutralForeground3};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};grid-area:message;line-height:${lineHeightBase200};margin-block-start:${spacingVerticalXXS}}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};justify-self:stretch;user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
 
-const template$s = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}"><slot name="label" part="label" ${slotted("labelSlot")}></slot><slot name="input" part="input" ${slotted("slottedInputs")}></slot><slot name="message" part="message" ${slotted({
+const template$q = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}"><slot name="label" part="label" ${slotted("labelSlot")}></slot><slot name="input" part="input" ${slotted("slottedInputs")}></slot><slot name="message" part="message" ${slotted({
   property: "messageSlot",
   filter: elements("[flag]")
 })}></slot></template>`;
 
-const definition$s = Field.compose({
+const definition$q = Field.compose({
   name: `${FluentDesignSystem.prefix}-field`,
-  template: template$s,
-  styles: styles$r,
+  template: template$q,
+  styles: styles$p,
   shadowOptions: {
     delegatesFocus: true
   }
 });
 
-definition$s.define(FluentDesignSystem.registry);
+definition$q.define(FluentDesignSystem.registry);
 
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$v(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 class Image extends FASTElement {}
-__decorateClass$v([attr({
+__decorateClass$t([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
-__decorateClass$v([attr({
+__decorateClass$t([attr({
   mode: "boolean"
 })], Image.prototype, "bordered", 2);
-__decorateClass$v([attr({
+__decorateClass$t([attr({
   mode: "boolean"
 })], Image.prototype, "shadow", 2);
-__decorateClass$v([attr], Image.prototype, "fit", 2);
-__decorateClass$v([attr], Image.prototype, "shape", 2);
+__decorateClass$t([attr], Image.prototype, "fit", 2);
+__decorateClass$t([attr], Image.prototype, "shape", 2);
 
-const template$r = html`<slot></slot>`;
+const template$p = html`<slot></slot>`;
 
-const styles$q = css`
+const styles$o = css`
   :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
 
-const definition$r = Image.compose({
+const definition$p = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
-  template: template$r,
-  styles: styles$q
+  template: template$p,
+  styles: styles$o
 });
 
-definition$r.define(FluentDesignSystem.registry);
+definition$p.define(FluentDesignSystem.registry);
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __decorateClass$s = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$u(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 class Label extends FASTElement {
@@ -8239,16 +8377,16 @@ class Label extends FASTElement {
     this.required = false;
   }
 }
-__decorateClass$u([attr], Label.prototype, "size", 2);
-__decorateClass$u([attr], Label.prototype, "weight", 2);
-__decorateClass$u([attr({
+__decorateClass$s([attr], Label.prototype, "size", 2);
+__decorateClass$s([attr], Label.prototype, "weight", 2);
+__decorateClass$s([attr({
   mode: "boolean"
 })], Label.prototype, "disabled", 2);
-__decorateClass$u([attr({
+__decorateClass$s([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
-const styles$p = css`
+const styles$n = css`
   ${display("inline-flex")}
 
   :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is([size='large'],[weight='semibold'])){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
@@ -8256,22 +8394,22 @@ const styles$p = css`
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" aria-hidden="true" ?hidden="${x => !x.required}">*</span>`;
 }
-const template$q = labelTemplate();
+const template$o = labelTemplate();
 
-const definition$q = Label.compose({
+const definition$o = Label.compose({
   name: `${FluentDesignSystem.prefix}-label`,
-  template: template$q,
-  styles: styles$p
+  template: template$o,
+  styles: styles$n
 });
 
-definition$q.define(FluentDesignSystem.registry);
+definition$o.define(FluentDesignSystem.registry);
 
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$r = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$t(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 class Link extends BaseAnchor {
@@ -8280,12 +8418,12 @@ class Link extends BaseAnchor {
     this.inline = false;
   }
 }
-__decorateClass$t([attr], Link.prototype, "appearance", 2);
-__decorateClass$t([attr({
+__decorateClass$r([attr], Link.prototype, "appearance", 2);
+__decorateClass$r([attr({
   mode: "boolean"
 })], Link.prototype, "inline", 2);
 
-const styles$o = css`
+const styles$m = css`
   ${display("inline")}
 
   :host{position:relative;box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};overflow:inherit;text-align:start;text-decoration:none;text-decoration-thickness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host([appearance='subtle']:hover){color:${colorNeutralForeground2LinkHover}}:host([appearance='subtle']:active){color:${colorNeutralForeground2LinkPressed}}}:host([appearance='subtle']){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host([inline]){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -8294,28 +8432,27 @@ const styles$o = css`
 function anchorTemplate() {
   return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot></slot></template>`;
 }
-const template$p = anchorTemplate();
+const template$n = anchorTemplate();
 
-const definition$p = Link.compose({
+const definition$n = Link.compose({
   name: `${FluentDesignSystem.prefix}-link`,
-  template: template$p,
-  styles: styles$o
+  template: template$n,
+  styles: styles$m
 });
 
-definition$p.define(FluentDesignSystem.registry);
+definition$n.define(FluentDesignSystem.registry);
 
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$s(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 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.
      *
@@ -8324,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.
    *
@@ -8403,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.
    *
@@ -8450,43 +8604,41 @@ 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$s([attr({
-  attribute: "id",
-  mode: "fromView"
-})], Listbox.prototype, "id", 2);
-__decorateClass$s([observable], Listbox.prototype, "multiple", 2);
-__decorateClass$s([observable], Listbox.prototype, "options", 2);
-__decorateClass$s([observable], Listbox.prototype, "selectedIndex", 2);
-__decorateClass$s([observable], Listbox.prototype, "dropdown", 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);
+__decorateClass$q([observable], Listbox.prototype, "dropdown", 2);
 
-const styles$n = css`
+const styles$l = css`
   ${display("inline-flex")}
 
   :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$o = listboxTemplate();
+const template$m = listboxTemplate();
 
-const definition$o = Listbox.compose({
+const definition$m = Listbox.compose({
   name: `${FluentDesignSystem.prefix}-listbox`,
-  template: template$o,
-  styles: styles$n
+  template: template$m,
+  styles: styles$l
 });
 
-definition$o.define(FluentDesignSystem.registry);
+definition$m.define(FluentDesignSystem.registry);
 
 class MenuButton extends Button {}
 
-const template$n = buttonTemplate$1({
+const template$l = buttonTemplate$1({
   end: html.partial(/* html */
   `
     <svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -8495,13 +8647,13 @@ const template$n = buttonTemplate$1({
   `)
 });
 
-const definition$n = MenuButton.compose({
+const definition$l = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
-  template: template$n,
-  styles: styles$E
+  template: template$l,
+  styles: styles$C
 });
 
-definition$n.define(FluentDesignSystem.registry);
+definition$l.define(FluentDesignSystem.registry);
 
 const MenuItemRole = {
   /**
@@ -8529,12 +8681,12 @@ function isMenuItem(element, tagName = "-menu-item") {
   return element.tagName.toLowerCase().endsWith(tagName);
 }
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 class MenuItem extends FASTElement {
@@ -8723,21 +8875,21 @@ class MenuItem extends FASTElement {
     this.elementInternals.ariaChecked = this.role !== MenuItemRole.menuitem ? `${!!this.checked}` : null;
   }
 }
-__decorateClass$r([attr({
+__decorateClass$p([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$r([attr], MenuItem.prototype, "role", 2);
-__decorateClass$r([attr({
+__decorateClass$p([attr], MenuItem.prototype, "role", 2);
+__decorateClass$p([attr({
   mode: "boolean"
 })], MenuItem.prototype, "checked", 2);
-__decorateClass$r([attr({
+__decorateClass$p([attr({
   mode: "boolean"
 })], MenuItem.prototype, "hidden", 2);
-__decorateClass$r([observable], MenuItem.prototype, "slottedSubmenu", 2);
-__decorateClass$r([observable], MenuItem.prototype, "submenu", 2);
+__decorateClass$p([observable], MenuItem.prototype, "slottedSubmenu", 2);
+__decorateClass$p([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
-const styles$m = css`
+const styles$k = css`
   ${display("grid")}
 
   :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline,block-start,block-end;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -8750,25 +8902,25 @@ function menuItemTemplate(options = {}) {
     property: "slottedSubmenu"
   })}></slot></template>`;
 }
-const template$m = menuItemTemplate({
+const template$k = menuItemTemplate({
   indicator: Checkmark16Filled,
   submenuGlyph: chevronRight16Filled
 });
 
-const definition$m = MenuItem.compose({
+const definition$k = MenuItem.compose({
   name: `${FluentDesignSystem.prefix}-menu-item`,
-  template: template$m,
-  styles: styles$m
+  template: template$k,
+  styles: styles$k
 });
 
-definition$m.define(FluentDesignSystem.registry);
+definition$k.define(FluentDesignSystem.registry);
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 const _MenuList = class _MenuList extends FASTElement {
@@ -8826,7 +8978,7 @@ const _MenuList = class _MenuList extends FASTElement {
       if (changedMenuItem.role === "menuitemradio" && changedMenuItem.checked === true) {
         for (let i = changeItemIndex - 1; i >= 0; --i) {
           const item = this.menuItems[i];
-          const role = item.getAttribute("role");
+          const role = item.role;
           if (role === MenuItemRole.menuitemradio) {
             item.checked = false;
           }
@@ -8837,7 +8989,7 @@ const _MenuList = class _MenuList extends FASTElement {
         const maxIndex = this.menuItems.length - 1;
         for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
           const item = this.menuItems[i];
-          const role = item.getAttribute("role");
+          const role = item.role;
           if (role === MenuItemRole.menuitemradio) {
             item.checked = false;
           }
@@ -8851,7 +9003,7 @@ const _MenuList = class _MenuList extends FASTElement {
      * check if the item is a menu item
      */
     this.isMenuItemElement = el => {
-      return isMenuItem(el) || isHTMLElement(el) && el.getAttribute("role") in _MenuList.focusableElementRoles;
+      return isMenuItem(el) || isHTMLElement(el) && !!el.role && el.role in _MenuList.focusableElementRoles;
     };
     /**
      * check if the item is focusable
@@ -8924,7 +9076,7 @@ const _MenuList = class _MenuList extends FASTElement {
     });
   }
   static elementIndent(el) {
-    const role = el.getAttribute("role");
+    const role = el.role;
     const startSlot = el.querySelector("[slot=start]");
     if (role && role !== MenuItemRole.menuitem) {
       return startSlot ? 2 : 1;
@@ -8982,10 +9134,10 @@ const _MenuList = class _MenuList extends FASTElement {
   }
 };
 _MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$q([observable], _MenuList.prototype, "items", 2);
+__decorateClass$o([observable], _MenuList.prototype, "items", 2);
 let MenuList = _MenuList;
 
-const styles$l = css`
+const styles$j = css`
   ${display("flex")}
 
   :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:4px;row-gap:2px}`;
@@ -8993,29 +9145,27 @@ const styles$l = css`
 function menuTemplate$1() {
   return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot ${slotted("items")}></slot></template>`;
 }
-const template$l = menuTemplate$1();
+const template$j = menuTemplate$1();
 
-const definition$l = MenuList.compose({
+const definition$j = MenuList.compose({
   name: `${FluentDesignSystem.prefix}-menu-list`,
-  template: template$l,
-  styles: styles$l
+  template: template$j,
+  styles: styles$j
 });
 
-definition$l.define(FluentDesignSystem.registry);
+definition$j.define(FluentDesignSystem.registry);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 class Menu extends FASTElement {
   constructor() {
     super(...arguments);
-    this.slottedMenuList = [];
-    this.slottedTriggers = [];
     /**
      * Defines whether the menu is open or not.
      * @internal
@@ -9103,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.
@@ -9110,9 +9269,7 @@ class Menu extends FASTElement {
    */
   connectedCallback() {
     super.connectedCallback();
-    queueMicrotask(() => {
-      this.setComponent();
-    });
+    this.setComponent();
   }
   /**
    * Called when the element is disconnected from the DOM.
@@ -9129,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.
@@ -9292,30 +9458,30 @@ class Menu extends FASTElement {
     }
   }
 }
-__decorateClass$p([attr({
+__decorateClass$n([attr({
   attribute: "open-on-hover",
   mode: "boolean"
 })], Menu.prototype, "openOnHover", 2);
-__decorateClass$p([attr({
+__decorateClass$n([attr({
   attribute: "open-on-context",
   mode: "boolean"
 })], Menu.prototype, "openOnContext", 2);
-__decorateClass$p([attr({
+__decorateClass$n([attr({
   attribute: "close-on-scroll",
   mode: "boolean"
 })], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$p([attr({
+__decorateClass$n([attr({
   attribute: "persist-on-item-click",
   mode: "boolean"
 })], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$p([attr({
+__decorateClass$n([attr({
   mode: "boolean"
 })], Menu.prototype, "split", 2);
-__decorateClass$p([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$p([observable], Menu.prototype, "slottedTriggers", 2);
-__decorateClass$p([observable], Menu.prototype, "primaryAction", 2);
+__decorateClass$n([observable], Menu.prototype, "slottedMenuList", 2);
+__decorateClass$n([observable], Menu.prototype, "slottedTriggers", 2);
+__decorateClass$n([observable], Menu.prototype, "primaryAction", 2);
 
-const styles$k = css`
+const styles$i = css`
   ${display("inline-block")}
 
   ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-block;position:absolute;z-index:1}:host([split]) ::slotted([popover]){position-area:block-end span-inline-start}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}:host([split]){display:inline-flex}:host([split]) ::slotted([slot='primary-action']){border-inline-end:${strokeWidthThin} solid ${colorNeutralStroke1};border-start-end-radius:0;border-end-end-radius:0}:host([split]) ::slotted([slot='primary-action']:focus-visible){z-index:1}:host([split]) ::slotted([slot='primary-action'][appearance='primary']){border-inline-end:${strokeWidthThin} solid white}:host([split]) ::slotted([slot='trigger']){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;
@@ -9329,22 +9495,22 @@ function menuTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$k = menuTemplate();
+const template$i = menuTemplate();
 
-const definition$k = Menu.compose({
+const definition$i = Menu.compose({
   name: `${FluentDesignSystem.prefix}-menu`,
-  template: template$k,
-  styles: styles$k
+  template: template$i,
+  styles: styles$i
 });
 
-definition$k.define(FluentDesignSystem.registry);
+definition$i.define(FluentDesignSystem.registry);
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 class MessageBar extends FASTElement {
@@ -9357,8 +9523,9 @@ class MessageBar extends FASTElement {
      */
     this.elementInternals = this.attachInternals();
     /**
-     * @public
      * Method to emit a `dismiss` event when the message bar is dismissed
+     *
+     * @public
      */
     this.dismissMessageBar = () => {
       this.$emit("dismiss", {});
@@ -9366,36 +9533,36 @@ class MessageBar extends FASTElement {
     this.elementInternals.role = "status";
   }
 }
-__decorateClass$o([attr], MessageBar.prototype, "shape", 2);
-__decorateClass$o([attr], MessageBar.prototype, "layout", 2);
-__decorateClass$o([attr], MessageBar.prototype, "intent", 2);
+__decorateClass$m([attr], MessageBar.prototype, "shape", 2);
+__decorateClass$m([attr], MessageBar.prototype, "layout", 2);
+__decorateClass$m([attr], MessageBar.prototype, "intent", 2);
 
-const styles$j = css`
+const styles$h = css`
   :host{display:grid;box-sizing:border-box;font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};width:100%;background:${colorNeutralBackground3};border:1px solid ${colorNeutralStroke1};padding-inline:${spacingHorizontalM};border-radius:${borderRadiusMedium};min-height:36px;align-items:center;grid-template:'icon body actions dismiss' / auto 1fr auto auto;contain:layout style paint}:host([shape='square']){border-radius:0}:host([intent='success']){background-color:${colorPaletteGreenBackground1};border-color:${colorPaletteGreenBorder1}}:host([intent='warning']){background-color:${colorPaletteDarkOrangeBackground1};border-color:${colorPaletteDarkOrangeBorder1}}:host([intent='error']){background-color:${colorPaletteRedBackground1};border-color:${colorPaletteRedBorder1}}:host([layout='multiline']){grid-template-areas:'icon body dismiss'
       'actions actions actions';grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr;padding-block:${spacingVerticalMNudge};padding-inline:${spacingHorizontalM}}.content{grid-area:body;max-width:520px;padding-block:${spacingVerticalMNudge};padding-inline:0}:host([layout='multiline']) .content{padding:0}::slotted([slot='icon']){display:flex;grid-area:icon;flex-direction:column;align-items:center;color:${colorNeutralForeground3};margin-inline-end:${spacingHorizontalS}}:host([layout='multiline']) ::slotted([slot='icon']){align-items:start;height:100%}::slotted([slot='dismiss']){grid-area:dismiss}.actions{grid-area:actions;display:flex;justify-self:end;margin-inline-end:${spacingHorizontalS};gap:${spacingHorizontalS}}:host([layout='multiline']) .actions{margin-block-start:${spacingVerticalMNudge};margin-inline-end:0}:host([layout='multiline']) ::slotted([slot='dismiss']){align-items:start;height:100%;padding-block-start:${spacingVerticalS}}::slotted(*){font-size:inherit}`;
 
 function messageBarTemplate() {
   return html`<slot name="icon"></slot><div class="content"><slot></slot></div><div class="actions"><slot name="actions"></slot></div><slot name="dismiss"></slot>`;
 }
-const template$j = messageBarTemplate();
+const template$h = messageBarTemplate();
 
-const definition$j = MessageBar.compose({
+const definition$h = MessageBar.compose({
   name: `${FluentDesignSystem.prefix}-message-bar`,
-  template: template$j,
-  styles: styles$j,
+  template: template$h,
+  styles: styles$h,
   shadowOptions: {
     mode: FluentDesignSystem.shadowRootMode
   }
 });
 
-definition$j.define(FluentDesignSystem.registry);
+definition$h.define(FluentDesignSystem.registry);
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 class DropdownOption extends FASTElement {
@@ -9529,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);
@@ -9606,43 +9773,43 @@ class DropdownOption extends FASTElement {
  * @public
  */
 DropdownOption.formAssociated = true;
-__decorateClass$n([observable], DropdownOption.prototype, "active", 2);
-__decorateClass$n([attr({
+__decorateClass$l([observable], DropdownOption.prototype, "active", 2);
+__decorateClass$l([attr({
   attribute: "current-selected",
   mode: "boolean"
 })], DropdownOption.prototype, "currentSelected", 2);
-__decorateClass$n([attr({
+__decorateClass$l([attr({
   attribute: "selected",
   mode: "boolean"
 })], DropdownOption.prototype, "defaultSelected", 2);
-__decorateClass$n([observable], DropdownOption.prototype, "descriptionSlot", 2);
-__decorateClass$n([observable], DropdownOption.prototype, "disabled", 2);
-__decorateClass$n([attr({
+__decorateClass$l([observable], DropdownOption.prototype, "descriptionSlot", 2);
+__decorateClass$l([observable], DropdownOption.prototype, "disabled", 2);
+__decorateClass$l([attr({
   attribute: "disabled",
   mode: "boolean"
 })], DropdownOption.prototype, "disabledAttribute", 2);
-__decorateClass$n([attr({
+__decorateClass$l([attr({
   attribute: "form"
 })], DropdownOption.prototype, "formAttribute", 2);
-__decorateClass$n([attr({
+__decorateClass$l([attr({
   mode: "boolean"
 })], DropdownOption.prototype, "freeform", 2);
-__decorateClass$n([attr({
+__decorateClass$l([attr({
   attribute: "id"
 })], DropdownOption.prototype, "id", 2);
-__decorateClass$n([attr({
+__decorateClass$l([attr({
   attribute: "value",
   mode: "fromView"
 })], DropdownOption.prototype, "initialValue", 2);
-__decorateClass$n([observable], DropdownOption.prototype, "multiple", 2);
-__decorateClass$n([attr], DropdownOption.prototype, "name", 2);
-__decorateClass$n([observable], DropdownOption.prototype, "start", 2);
-__decorateClass$n([attr({
+__decorateClass$l([observable], DropdownOption.prototype, "multiple", 2);
+__decorateClass$l([attr], DropdownOption.prototype, "name", 2);
+__decorateClass$l([observable], DropdownOption.prototype, "start", 2);
+__decorateClass$l([attr({
   attribute: "text",
   mode: "fromView"
 })], DropdownOption.prototype, "textAttribute", 2);
 
-const styles$i = css`
+const styles$g = css`
   ${display("inline-grid")}
 
   :host{-webkit-tap-highlight-color:transparent;${typographyBody1Styles}
@@ -9668,17 +9835,17 @@ function dropdownOptionTemplate(options = {}) {
     filter: elements("output")
   })}></slot></div><div class="description" part="description"><slot name="description" ${slotted("descriptionSlot")}></slot></div>`;
 }
-const template$i = dropdownOptionTemplate({
+const template$g = dropdownOptionTemplate({
   checkedIndicator: checkedIndicator$1
 });
 
-const definition$i = DropdownOption.compose({
+const definition$g = DropdownOption.compose({
   name: `${FluentDesignSystem.prefix}-option`,
-  template: template$i,
-  styles: styles$i
+  template: template$g,
+  styles: styles$g
 });
 
-definition$i.define(FluentDesignSystem.registry);
+definition$g.define(FluentDesignSystem.registry);
 
 const ProgressBarValidationState = {
   success: "success",
@@ -9686,12 +9853,12 @@ const ProgressBarValidationState = {
   error: "error"
 };
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$m(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 class BaseProgressBar extends FASTElement {
@@ -9706,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
@@ -9720,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();
   }
   /**
@@ -9730,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();
   }
   /**
@@ -9741,56 +9919,63 @@ 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>))")) {
-      return;
-    }
-    if (typeof this.value !== "number") {
-      this.indicator.style.removeProperty("width");
+    if (CSS.supports("width: attr(value type(<number>))")) {
       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$m([observable], BaseProgressBar.prototype, "indicator", 2);
-__decorateClass$m([attr({
+__decorateClass$k([observable], BaseProgressBar.prototype, "indicator", 2);
+__decorateClass$k([attr({
   attribute: "validation-state"
 })], BaseProgressBar.prototype, "validationState", 2);
-__decorateClass$m([attr({
+__decorateClass$k([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "value", 2);
-__decorateClass$m([attr({
+__decorateClass$k([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "min", 2);
-__decorateClass$m([attr({
+__decorateClass$k([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "max", 2);
 
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$l(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 class ProgressBar extends BaseProgressBar {}
-__decorateClass$l([attr], ProgressBar.prototype, "thickness", 2);
-__decorateClass$l([attr], ProgressBar.prototype, "shape", 2);
+__decorateClass$j([attr], ProgressBar.prototype, "thickness", 2);
+__decorateClass$j([attr], ProgressBar.prototype, "shape", 2);
 
-const styles$h = css`
+const styles$f = css`
   ${display("block")}
 
   :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content;@supports (width:attr(value type(<number>))){--max:attr(max type(<number>),100);--min:attr(min type(<number>),0);--value:attr(value type(<number>),0);--indicator-width:clamp(0%,calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%),100%)}}:host([thickness='large']){height:4px}:host([shape='square']){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out;@supports (width:attr(value type(<number>))){width:var(--indicator-width)}}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
@@ -9801,80 +9986,18 @@ const styles$h = css`
 function progressTemplate() {
   return html`<div class="indicator" part="indicator" ${ref("indicator")}></div>`;
 }
-const template$h = progressTemplate();
+const template$f = progressTemplate();
 
-const definition$h = ProgressBar.compose({
+const definition$f = ProgressBar.compose({
   name: `${FluentDesignSystem.prefix}-progress-bar`,
-  template: template$h,
-  styles: styles$h
+  template: template$f,
+  styles: styles$f
 });
 
-definition$h.define(FluentDesignSystem.registry);
+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) {
@@ -9887,12 +10010,12 @@ function getRootActiveElement(element) {
 
 const RadioGroupOrientation = Orientation;
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$k(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 class RadioGroup extends FASTElement {
@@ -9902,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.
      *
@@ -9933,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;
@@ -10029,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.
    *
@@ -10336,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.
@@ -10355,92 +10475,159 @@ class RadioGroup extends FASTElement {
  * @public
  */
 RadioGroup.formAssociated = true;
-__decorateClass$k([observable], RadioGroup.prototype, "checkedIndex", 2);
-__decorateClass$k([attr({
+__decorateClass$i([observable], RadioGroup.prototype, "checkedIndex", 2);
+__decorateClass$i([attr({
   attribute: "disabled",
   mode: "boolean"
 })], RadioGroup.prototype, "disabled", 2);
-__decorateClass$k([attr({
+__decorateClass$i([attr({
   attribute: "value",
   mode: "fromView"
 })], RadioGroup.prototype, "initialValue", 2);
-__decorateClass$k([attr], RadioGroup.prototype, "name", 2);
-__decorateClass$k([attr], RadioGroup.prototype, "orientation", 2);
-__decorateClass$k([observable], RadioGroup.prototype, "radios", 2);
-__decorateClass$k([attr({
+__decorateClass$i([attr], RadioGroup.prototype, "name", 2);
+__decorateClass$i([attr], RadioGroup.prototype, "orientation", 2);
+__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$g = css`
+const styles$e = css`
   ${display("flex")}
 
   :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$g = radioGroupTemplate();
+const template$e = radioGroupTemplate();
 
-const definition$g = RadioGroup.compose({
+const definition$e = RadioGroup.compose({
   name: `${FluentDesignSystem.prefix}-radio-group`,
-  template: template$g,
-  styles: styles$g
-});
-
-definition$g.define(FluentDesignSystem.registry);
-
-const styles$f = css`
-  ${display("inline-flex")}
-
-  :host{--size:16px;aspect-ratio:1;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};box-sizing:border-box;position:relative;width:var(--size)}:host([size='large']){--size:20px}.checked-indicator{aspect-ratio:1;border-radius:${borderRadiusCircular};color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute;width:calc(var(--size) * 0.625)}:host(:not([slot='input']))::after{content:'' / '';position:absolute;display:block;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(${checkedState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}) .checked-indicator{background-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover) .checked-indicator{background-color:${colorCompoundBrandBackgroundHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:active) .checked-indicator{background-color:${colorCompoundBrandBackgroundPressed}}:host(:focus-visible){outline:none}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host(${checkedState}${disabledState}) .checked-indicator{background-color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not(${disabledState}):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.checked-indicator{color:HighlightText}:host(${checkedState}) .checked-indicator{background-color:FieldText}:host(${checkedState}:not(${disabledState}):hover) .checked-indicator{background-color:Highlight}:host(${disabledState}){border-color:GrayText;color:GrayText}:host(${disabledState}${checkedState}) .checked-indicator{background-color:GrayText}`));
-
-const checkedIndicator = html.partial(/* html */
-`
-    <span part="checked-indicator" class="checked-indicator" role="presentation"></span>
-`);
-function radioTemplate(options = {}) {
-  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot></template>`;
-}
-const template$f = radioTemplate({
-  checkedIndicator
-});
-
-const definition$f = Radio.compose({
-  name: `${FluentDesignSystem.prefix}-radio`,
-  template: template$f,
-  styles: styles$f
+  template: template$e,
+  styles: styles$e
 });
 
-definition$f.define(FluentDesignSystem.registry);
+definition$e.define(FluentDesignSystem.registry);
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$j(target, key, result);
-  return result;
-};
-const SUPPORTS_ATTR_TYPE = CSS.supports("width: attr(value type(<number>))");
-const CUSTOM_PROPERTY_NAME = {
-  max: "--_attr-max",
-  value: "--_attr-value",
-  maskImageFilled: "--_mask-image-filled",
-  maskImageOutlined: "--_mask-image-outlined"
-};
-function svgToDataURI(svg) {
-  if (!svg) {
-    return "";
-  }
-  return ["data:image/svg+xml", encodeURIComponent(svg.replace(/\n/g, "").replace(/\s+/g, " "))].join(",");
-}
-class BaseRatingDisplay extends FASTElement {
+class Radio extends BaseCheckbox {
   constructor() {
     super();
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
+    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")}
+
+  :host{--size:16px;aspect-ratio:1;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};box-sizing:border-box;position:relative;width:var(--size)}:host([size='large']){--size:20px}.checked-indicator{aspect-ratio:1;border-radius:${borderRadiusCircular};color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute;width:calc(var(--size) * 0.625)}:host(:not([slot='input']))::after{content:'' / '';position:absolute;display:block;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(${checkedState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}) .checked-indicator{background-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover) .checked-indicator{background-color:${colorCompoundBrandBackgroundHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:active) .checked-indicator{background-color:${colorCompoundBrandBackgroundPressed}}:host(:focus-visible){outline:none}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host(${checkedState}${disabledState}) .checked-indicator{background-color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not(${disabledState}):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.checked-indicator{color:HighlightText}:host(${checkedState}) .checked-indicator{background-color:FieldText}:host(${checkedState}:not(${disabledState}):hover) .checked-indicator{background-color:Highlight}:host(${disabledState}){border-color:GrayText;color:GrayText}:host(${disabledState}${checkedState}) .checked-indicator{background-color:GrayText}`));
+
+const checkedIndicator = html.partial(/* html */
+`
+    <span part="checked-indicator" class="checked-indicator" role="presentation"></span>
+`);
+function radioTemplate(options = {}) {
+  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot></template>`;
+}
+const template$d = radioTemplate({
+  checkedIndicator
+});
+
+const definition$d = Radio.compose({
+  name: `${FluentDesignSystem.prefix}-radio`,
+  template: template$d,
+  styles: styles$d
+});
+
+definition$d.define(FluentDesignSystem.registry);
+
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$h(target, key, result);
+  return result;
+};
+const SUPPORTS_ATTR_TYPE = CSS.supports("width: attr(value type(<number>))");
+const CUSTOM_PROPERTY_NAME = {
+  max: "--_attr-max",
+  value: "--_attr-value",
+  maskImageFilled: "--_mask-image-filled",
+  maskImageOutlined: "--_mask-image-outlined"
+};
+function svgToDataURI(svg) {
+  if (!svg) {
+    return "";
+  }
+  return ["data:image/svg+xml", encodeURIComponent(svg.replace(/\n/g, "").replace(/\s+/g, " "))].join(",");
+}
+class BaseRatingDisplay 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();
@@ -10448,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");
   }
@@ -10497,36 +10692,39 @@ 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$j([attr({
+__decorateClass$h([observable], BaseRatingDisplay.prototype, "iconSlot", 2);
+__decorateClass$h([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "count", 2);
-__decorateClass$j([attr({
+__decorateClass$h([attr({
   attribute: "icon-view-box"
 })], BaseRatingDisplay.prototype, "iconViewBox", 2);
-__decorateClass$j([attr({
+__decorateClass$h([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "max", 2);
-__decorateClass$j([attr({
+__decorateClass$h([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "value", 2);
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 class RatingDisplay extends BaseRatingDisplay {
@@ -10535,9 +10733,9 @@ class RatingDisplay extends BaseRatingDisplay {
     this.compact = false;
   }
 }
-__decorateClass$i([attr], RatingDisplay.prototype, "color", 2);
-__decorateClass$i([attr], RatingDisplay.prototype, "size", 2);
-__decorateClass$i([attr({
+__decorateClass$g([attr], RatingDisplay.prototype, "color", 2);
+__decorateClass$g([attr], RatingDisplay.prototype, "size", 2);
+__decorateClass$g([attr({
   mode: "boolean"
 })], RatingDisplay.prototype, "compact", 2);
 
@@ -10553,9 +10751,9 @@ const defaultIconOutlined = `
 function ratingDisplayTemplate() {
   return html`<div ${ref("display")} class="display" aria-hidden="true"></div><slot name="icon" ${ref("iconSlot")} @slotchange="${x => x.handleSlotChange()}"></slot><slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
 }
-const template$e = ratingDisplayTemplate();
+const template$c = ratingDisplayTemplate();
 
-const styles$e = css`
+const styles$c = css`
   ${display("inline-flex")}
 
   :host{--_icon-size:16px;--_icon-gradient-degree:90deg;--_icon-color-value:${colorPaletteMarigoldBorderActive};--_icon-color-empty:${colorPaletteMarigoldBackground2};--_default-value:0;--_default-max:5;--_mask-image-filled:url(${svgToDataURI(defaultIconFilled)});--_mask-image-outlined:url(${svgToDataURI(defaultIconOutlined)});--_mask-position-x:left;align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host(:dir(rtl)){--_icon-gradient-degree:-90deg;--_mask-position-x:right}:host([size='small']){--_icon-size:12px}:host([size='large']){--_icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}::slotted([slot='icon']){display:none}:host([color='neutral']){--_icon-color-value:${colorNeutralForeground1};--_icon-color-empty:${colorNeutralBackground6}}:host([color='brand']){--_icon-color-value:${colorBrandForeground1};--_icon-color-empty:${colorBrandBackground2}}@supports (width:attr(value type(<number>))){:host{--_attr-value:attr(value type(<number>));--_attr-max:attr(max type(<number>))}}:host([compact]) .display{--_max:1}.display{--_value:max(0,round(var(--_attr-value,var(--_default-value)) * 2) / 2);--_max:max(1,var(--_attr-max,var(--_default-max)));--_mask-inline-size:calc(var(--_icon-size) + ${spacingHorizontalXXS});--_icon-gradient-stop-visual-adjustment:0px;--_icon-gradient-stop:calc(
@@ -10565,18 +10763,13 @@ const styles$e = css`
     );block-size:var(--_icon-size);display:grid;inline-size:calc(var(--_max) * var(--_mask-inline-size) - ${spacingHorizontalXXS} / 2);mask-image:var(--_mask-image-filled);mask-repeat:repeat no-repeat;mask-size:var(--_mask-inline-size) var(--_icon-size);mask-position:var(--_mask-position-x) center}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host([size='small']) .value-label,:host([size='small']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host([size='large']) .value-label,:host([size='large']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host([size='small']) .count-label::before,:host([size='small']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host([size='large']) .count-label::before,:host([size='large']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .display{--_icon-color-value:CanvasText;--_icon-color-empty:Canvas;--_icon-gradient-stop-visual-adjustment:0.5px;forced-color-adjust:none}.display::before{background-color:var(--_icon-color-value);content:'';grid-area:1 / 1 / -1 / -1;mask:inherit;mask-image:var(--_mask-image-outlined)}`));
 
-const definition$e = RatingDisplay.compose({
+const definition$c = RatingDisplay.compose({
   name: `${FluentDesignSystem.prefix}-rating-display`,
-  template: template$e,
-  styles: styles$e
+  template: template$c,
+  styles: styles$c
 });
 
-definition$e.define(FluentDesignSystem.registry);
-
-const SliderOrientation = Orientation;
-const SliderMode = {
-  singleValue: "single-value"
-};
+definition$c.define(FluentDesignSystem.registry);
 
 function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   let pct = limit(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
@@ -10586,12 +10779,17 @@ function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   return pct;
 }
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+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) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 class Slider extends FASTElement {
@@ -10632,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, {
@@ -10648,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;
@@ -10672,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);
@@ -10807,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;
       }
@@ -10898,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) {
@@ -10964,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
@@ -11012,7 +11226,7 @@ class Slider extends FASTElement {
     this.value = decrementedValString;
   }
   handleKeydown(event) {
-    if (this.disabled) {
+    if (this.isDisabled) {
       return true;
     }
     switch (event.key) {
@@ -11097,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;
+    });
   }
 }
 /**
@@ -11112,36 +11325,36 @@ class Slider extends FASTElement {
  * @public
  */
 Slider.formAssociated = true;
-__decorateClass$h([attr], Slider.prototype, "size", 2);
-__decorateClass$h([attr({
+__decorateClass$f([attr], Slider.prototype, "size", 2);
+__decorateClass$f([attr({
   attribute: "value",
   mode: "fromView"
 })], Slider.prototype, "initialValue", 2);
-__decorateClass$h([observable], Slider.prototype, "direction", 2);
-__decorateClass$h([observable], Slider.prototype, "isDragging", 2);
-__decorateClass$h([observable], Slider.prototype, "position", 2);
-__decorateClass$h([observable], Slider.prototype, "trackWidth", 2);
-__decorateClass$h([observable], Slider.prototype, "trackMinWidth", 2);
-__decorateClass$h([observable], Slider.prototype, "trackHeight", 2);
-__decorateClass$h([observable], Slider.prototype, "trackLeft", 2);
-__decorateClass$h([observable], Slider.prototype, "trackMinHeight", 2);
-__decorateClass$h([observable], Slider.prototype, "valueTextFormatter", 2);
-__decorateClass$h([attr({
+__decorateClass$f([observable], Slider.prototype, "direction", 2);
+__decorateClass$f([observable], Slider.prototype, "isDragging", 2);
+__decorateClass$f([observable], Slider.prototype, "position", 2);
+__decorateClass$f([observable], Slider.prototype, "trackWidth", 2);
+__decorateClass$f([observable], Slider.prototype, "trackMinWidth", 2);
+__decorateClass$f([observable], Slider.prototype, "trackHeight", 2);
+__decorateClass$f([observable], Slider.prototype, "trackLeft", 2);
+__decorateClass$f([observable], Slider.prototype, "trackMinHeight", 2);
+__decorateClass$f([observable], Slider.prototype, "valueTextFormatter", 2);
+__decorateClass$f([attr({
   mode: "boolean"
 })], Slider.prototype, "disabled", 2);
-__decorateClass$h([attr({
+__decorateClass$f([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "min", 2);
-__decorateClass$h([attr({
+__decorateClass$f([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "max", 2);
-__decorateClass$h([attr({
+__decorateClass$f([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "step", 2);
-__decorateClass$h([attr], Slider.prototype, "orientation", 2);
-__decorateClass$h([attr], Slider.prototype, "mode", 2);
+__decorateClass$f([attr], Slider.prototype, "orientation", 2);
+__decorateClass$f([attr], Slider.prototype, "mode", 2);
 
-const styles$d = css`
+const styles$b = css`
   ${display("inline-grid")}
 
   :host{--thumb-size:20px;--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--rail-color:${colorCompoundBrandBackground};--track-color:${colorNeutralStrokeAccessible};--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;position:relative;align-items:center;justify-content:center;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:120px;min-height:32px;grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr var(--track-margin-inline)}:host(:hover){--rail-color:${colorCompoundBrandBackgroundHover}}:host(:active){--rail-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled){--rail-color:${colorNeutralForegroundDisabled};--track-color:${colorNeutralBackgroundDisabled}}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host([size='small']){--thumb-size:16px;--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall}}:host([orientation='vertical']){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);min-height:120px;grid-template-rows:var(--track-margin-inline) 1fr var(--track-margin-inline);grid-template-columns:1fr var(--thumb-size) 1fr;width:unset;min-width:32px;justify-items:center}:host(:not([slot='input']):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host:after,.track{height:var(--track-size);width:100%}:host:after{background-image:linear-gradient(
@@ -11154,17 +11367,17 @@ const styles$d = css`
 function sliderTemplate(options = {}) {
   return html`<template @pointerdown="${(x, c) => x.handlePointerDown(c.event)}" @keydown="${(x, c) => x.handleKeydown(c.event)}"><div ${ref("track")} part="track-container" class="track" style="${x => x.position}"></div><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event)}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></template>`;
 }
-const template$d = sliderTemplate({
+const template$b = sliderTemplate({
   thumb: `<div class="thumb"></div>`
 });
 
-const definition$d = Slider.compose({
+const definition$b = Slider.compose({
   name: `${FluentDesignSystem.prefix}-slider`,
-  template: template$d,
-  styles: styles$d
+  template: template$b,
+  styles: styles$b
 });
 
-definition$d.define(FluentDesignSystem.registry);
+definition$b.define(FluentDesignSystem.registry);
 
 class BaseSpinner extends FASTElement {
   constructor() {
@@ -11179,33 +11392,33 @@ class BaseSpinner extends FASTElement {
   }
 }
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 class Spinner extends BaseSpinner {}
-__decorateClass$g([attr], Spinner.prototype, "size", 2);
-__decorateClass$g([attr], Spinner.prototype, "appearance", 2);
+__decorateClass$e([attr], Spinner.prototype, "size", 2);
+__decorateClass$e([attr], Spinner.prototype, "appearance", 2);
 
-const styles$c = css`
+const styles$a = css`
   ${display("inline-flex")}
 
   :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host([size='tiny']){--indicatorSize:${strokeWidthThick};--size:20px}:host([size='extra-small']){--indicatorSize:${strokeWidthThick};--size:24px}:host([size='small']){--indicatorSize:${strokeWidthThick};--size:28px}:host([size='large']){--indicatorSize:${strokeWidthThicker};--size:36px}:host([size='extra-large']){--indicatorSize:${strokeWidthThicker};--size:40px}:host([size='huge']){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host([appearance='inverted']) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;right:50%}.end{overflow:hidden;left:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-right-color:currentcolor}:host([appearance='inverted']) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-right-color:Highlight}`));
 
-const template$c = html`<slot name="indicator"><div class="background"></div><div class="progress"><div class="spinner"><div class="start"><div class="indicator"></div></div><div class="end"><div class="indicator"></div></div></div></div></slot>`;
+const template$a = html`<slot name="indicator"><div class="background"></div><div class="progress"><div class="spinner"><div class="start"><div class="indicator"></div></div><div class="end"><div class="indicator"></div></div></div></div></slot>`;
 
-const definition$c = Spinner.compose({
+const definition$a = Spinner.compose({
   name: `${FluentDesignSystem.prefix}-spinner`,
-  template: template$c,
-  styles: styles$c
+  template: template$a,
+  styles: styles$a
 });
 
-definition$c.define(FluentDesignSystem.registry);
+definition$a.define(FluentDesignSystem.registry);
 
 class Switch extends BaseCheckbox {
   constructor() {
@@ -11217,530 +11430,90 @@ class Switch extends BaseCheckbox {
 function switchTemplate(options = {}) {
   return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="switch">${staticallyCompose(options.switch)}</slot></template>`;
 }
-const template$b = switchTemplate({
+const template$9 = switchTemplate({
   switch: `<span class="checked-indicator" part="checked-indicator"></span>`
 });
 
-const styles$b = css`
+const styles$9 = css`
   ${display("inline-flex")}
 
   :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${spacingHorizontalXXS};width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular}}:host(:enabled){cursor:pointer}:host(:hover){background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(:disabled),:host([readonly]){border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host(${checkedState}){background:${colorCompoundBrandBackground};border-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover){background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host(${checkedState}:active){background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host(${checkedState}:disabled){background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host(${checkedState}) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}:host(${checkedState}:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host(${checkedState}:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(${checkedState}:disabled) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};outline-offset:1px;box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{border-color:InactiveBorder}:host(${checkedState}),:host(${checkedState}:active),:host(${checkedState}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${checkedState}) .checked-indicator,:host(${checkedState}:hover) .checked-indicator,:host(${checkedState}:active) .checked-indicator{background-color:ButtonFace}:host(:disabled) .checked-indicator,:host(${checkedState}:disabled) .checked-indicator{background-color:GrayText}`));
 
-const definition$b = Switch.compose({
+const definition$9 = Switch.compose({
   name: `${FluentDesignSystem.prefix}-switch`,
-  template: template$b,
-  styles: styles$b
-});
-
-definition$b.define(FluentDesignSystem.registry);
-
-class TabPanel extends FASTElement {}
-
-function tabPanelTemplate() {
-  return html`<template slot="tabpanel" role="tabpanel"><slot></slot></template>`;
-}
-const template$a = tabPanelTemplate();
-
-const styles$a = css`
-  ${display("block")}
-
-  :host{box-sizing:border-box;padding:${spacingHorizontalM} ${spacingHorizontalMNudge}}`;
-
-const definition$a = TabPanel.compose({
-  name: `${FluentDesignSystem.prefix}-tab-panel`,
-  template: template$a,
-  styles: styles$a
-});
-
-definition$a.define(FluentDesignSystem.registry);
-
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
-  return result;
-};
-class Tab extends FASTElement {
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.styles !== void 0) {
-      this.$fastController.removeStyles(this.styles);
-    }
-    this.styles = css`
-      :host{--textContent:'${this.textContent}'}`;
-    this.$fastController.addStyles(this.styles);
-  }
-}
-__decorateClass$f([attr({
-  mode: "boolean"
-})], Tab.prototype, "disabled", 2);
-applyMixins(Tab, StartEnd);
-
-function tabTemplate(options = {}) {
-  return html`<template slot="tab" role="tab" aria-disabled="${x => x.disabled}">${startSlotTemplate(options)}<span class="tab-content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
-}
-const template$9 = tabTemplate({});
-
-const styles$9 = css`
-  ${display("inline-flex")}
-
-  :host{position:relative;flex-direction:row;align-items:center;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-size:${fontSizeBase300};color:${colorNeutralForeground2};fill:currentcolor;grid-row:1;padding:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};gap:4px}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:${colorNeutralForeground1};font-weight:${fontWeightSemibold}}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:${lineHeightBase300};font-weight:${fontWeightSemibold}}:host([aria-selected='true'])::after{background-color:${colorCompoundBrandStroke};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:${colorNeutralStroke1Hover};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:${colorNeutralForegroundDisabled}}::slotted([slot='start']),::slotted([slot='end']){display:flex}:host([disabled]){cursor:not-allowed;fill:${colorNeutralForegroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host([data-hasIndent]){display:grid;grid-template-columns:20px 1fr auto}:host([data-hasIndent]) .tab-content{grid-column:2}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([aria-selected='true'])::after{background-color:Highlight}`));
-
-const definition$9 = Tab.compose({
-  name: `${FluentDesignSystem.prefix}-tab`,
   template: template$9,
   styles: styles$9
 });
 
 definition$9.define(FluentDesignSystem.registry);
 
-const TabsAppearance = {
-  subtle: "subtle",
-  transparent: "transparent"
-};
-const TabsOrientation = Orientation;
-
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
-  return result;
-};
-class BaseTabs extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.orientation = TabsOrientation.horizontal;
-    this.prevActiveTabIndex = 0;
-    this.activeTabIndex = 0;
-    this.change = () => {
-      this.$emit("change", this.activetab);
-    };
-    this.isDisabledElement = el => {
-      return el.getAttribute("aria-disabled") === "true";
-    };
-    this.isHiddenElement = el => {
-      return el.hasAttribute("hidden");
-    };
-    this.isFocusableElement = el => {
-      return !this.isDisabledElement(el) && !this.isHiddenElement(el);
-    };
-    this.handleTabClick = event => {
-      const selectedTab = event.currentTarget;
-      if (selectedTab.nodeType === 1 && this.isFocusableElement(selectedTab)) {
-        this.prevActiveTabIndex = this.activeTabIndex;
-        this.activeTabIndex = this.tabs.indexOf(selectedTab);
-        this.setComponent();
-      }
-    };
-    this.handleTabKeyDown = event => {
-      if (this.isHorizontal()) {
-        switch (event.key) {
-          case keyArrowLeft:
-            event.preventDefault();
-            this.adjustBackward(event);
-            break;
-          case keyArrowRight:
-            event.preventDefault();
-            this.adjustForward(event);
-            break;
-        }
-      } else {
-        switch (event.key) {
-          case keyArrowUp:
-            event.preventDefault();
-            this.adjustBackward(event);
-            break;
-          case keyArrowDown:
-            event.preventDefault();
-            this.adjustForward(event);
-            break;
-        }
-      }
-      switch (event.key) {
-        case keyHome:
-          event.preventDefault();
-          this.adjust(-this.activeTabIndex);
-          break;
-        case keyEnd:
-          event.preventDefault();
-          this.adjust(this.tabs.length - this.activeTabIndex - 1);
-          break;
-      }
-    };
-  }
-  /**
-   * @internal
-   */
-  orientationChanged() {
-    if (this.$fastController.isConnected) {
-      this.setTabs();
-    }
-  }
-  /**
-   * @internal
-   */
-  activeidChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
-      this.prevActiveTabIndex = this.tabs.findIndex(item => item.id === oldValue);
-      this.setTabs();
-    }
-  }
-  /**
-   * @internal
-   */
-  tabsChanged() {
-    if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
-      this.tabIds = this.getTabIds();
-      this.tabpanelIds = this.getTabPanelIds();
-      this.setTabs();
-    }
-  }
-  /**
-   * @internal
-   */
-  tabpanelsChanged() {
-    if (this.$fastController.isConnected && this.tabpanels.length <= this.tabs.length) {
-      this.tabIds = this.getTabIds();
-      this.tabpanelIds = this.getTabPanelIds();
-      this.setTabs();
-    }
-  }
-  getActiveIndex() {
-    const id = this.activeid;
-    if (id !== void 0) {
-      return this.tabIds.indexOf(this.activeid) === -1 ? 0 : this.tabIds.indexOf(this.activeid);
-    } else {
-      return 0;
-    }
-  }
-  /**
-   * Function that is invoked whenever the selected tab or the tab collection changes.
-   *
-   * @public
-   */
-  setTabs() {
-    const gridHorizontalProperty = "gridColumn";
-    const gridVerticalProperty = "gridRow";
-    const gridProperty = this.isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
-    this.activeTabIndex = this.getActiveIndex();
-    this.tabs.forEach((tab, index) => {
-      if (tab.slot === "tab") {
-        const isActiveTab = this.activeTabIndex === index && this.isFocusableElement(tab);
-        const tabId = this.tabIds[index];
-        const tabpanelId = this.tabpanelIds[index];
-        tab.setAttribute("id", tabId);
-        tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
-        tab.setAttribute("aria-controls", tabpanelId);
-        tab.addEventListener("click", this.handleTabClick);
-        tab.addEventListener("keydown", this.handleTabKeyDown);
-        tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
-        if (isActiveTab) {
-          this.activetab = tab;
-          this.activeid = tabId;
-        }
-      }
-      tab.style[gridHorizontalProperty] = "";
-      tab.style[gridVerticalProperty] = "";
-      tab.style[gridProperty] = `${index + 1}`;
-      !this.isHorizontal() ? tab.classList.add("vertical") : tab.classList.remove("vertical");
-    });
-    this.setTabPanels();
-  }
-  setTabPanels() {
-    this.tabpanels.forEach((tabpanel, index) => {
-      const tabId = this.tabIds[index];
-      const tabpanelId = this.tabpanelIds[index];
-      tabpanel.setAttribute("id", tabpanelId);
-      tabpanel.setAttribute("aria-labelledby", tabId);
-      this.activeTabIndex !== index ? tabpanel.setAttribute("hidden", "") : tabpanel.removeAttribute("hidden");
-    });
-  }
-  getTabIds() {
-    return this.tabs.map(tab => {
-      return tab.getAttribute("id") ?? `tab-${uniqueId$1()}`;
-    });
-  }
-  getTabPanelIds() {
-    return this.tabpanels.map(tabPanel => {
-      return tabPanel.getAttribute("id") ?? `panel-${uniqueId$1()}`;
-    });
-  }
-  setComponent() {
-    if (this.activeTabIndex !== this.prevActiveTabIndex) {
-      this.activeid = this.tabIds[this.activeTabIndex];
-      this.focusTab();
-      this.change();
-    }
-  }
-  isHorizontal() {
-    return this.orientation === TabsOrientation.horizontal;
-  }
-  /**
-   * The adjust method for FASTTabs
-   * @public
-   * @remarks
-   * This method allows the active index to be adjusted by numerical increments
-   */
-  adjust(adjustment) {
-    const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
-    const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-    const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
-    const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
-    if (nextIndex > -1) {
-      this.moveToTabByIndex(this.tabs, nextIndex);
-    }
-  }
-  adjustForward(e) {
-    const group = this.tabs;
-    let index = 0;
-    index = this.activetab ? group.indexOf(this.activetab) + 1 : 1;
-    if (index === group.length) {
-      index = 0;
-    }
-    while (index < group.length && group.length > 1) {
-      if (this.isFocusableElement(group[index])) {
-        this.moveToTabByIndex(group, index);
-        break;
-      } else if (this.activetab && index === group.indexOf(this.activetab)) {
-        break;
-      } else if (index + 1 >= group.length) {
-        index = 0;
-      } else {
-        index += 1;
-      }
-    }
-  }
-  adjustBackward(e) {
-    const group = this.tabs;
-    let index = 0;
-    index = this.activetab ? group.indexOf(this.activetab) - 1 : 0;
-    index = index < 0 ? group.length - 1 : index;
-    while (index >= 0 && group.length > 1) {
-      if (this.isFocusableElement(group[index])) {
-        this.moveToTabByIndex(group, index);
-        break;
-      } else if (index - 1 < 0) {
-        index = group.length - 1;
-      } else {
-        index -= 1;
-      }
-    }
-  }
-  moveToTabByIndex(group, index) {
-    const tab = group[index];
-    this.activetab = tab;
-    this.prevActiveTabIndex = this.activeTabIndex;
-    this.activeTabIndex = index;
-    tab.focus();
-    this.setComponent();
-  }
-  focusTab() {
-    this.tabs[this.activeTabIndex].focus();
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.tabIds = this.getTabIds();
-    this.tabpanelIds = this.getTabPanelIds();
-    this.activeTabIndex = this.getActiveIndex();
-  }
-}
-__decorateClass$e([attr], BaseTabs.prototype, "orientation", 2);
-__decorateClass$e([attr], BaseTabs.prototype, "activeid", 2);
-__decorateClass$e([observable], BaseTabs.prototype, "tabs", 2);
-__decorateClass$e([observable], BaseTabs.prototype, "tabpanels", 2);
-
 var __defProp$d = Object.defineProperty;
 var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
 var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
-  return result;
-};
-class Tabs extends BaseTabs {
-  constructor() {
-    super(...arguments);
-    /**
-     * activeTabData
-     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-     */
-    this.activeTabData = {
-      x: 0,
-      y: 0,
-      height: 0,
-      width: 0
-    };
-    /**
-     * previousActiveTabData
-     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-     */
-    this.previousActiveTabData = {
-      x: 0,
-      y: 0,
-      height: 0,
-      width: 0
-    };
-    /**
-     * activeTabOffset
-     * Used to position the active indicator for animations of the active indicator on active tab changes.
-     */
-    this.activeTabOffset = 0;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$d(target, key, result);
+  return result;
+};
+class Tab extends FASTElement {
+  constructor() {
+    super();
     /**
-     * activeTabScale
-     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
      */
-    this.activeTabScale = 1;
-    this.appearance = TabsAppearance.transparent;
-  }
-  /**
-   * calculateAnimationProperties
-   *
-   * Recalculates the active tab offset and scale.
-   * These values will be applied to css variables that control the tab active indicator position animations
-   */
-  calculateAnimationProperties(tab) {
-    this.activeTabOffset = this.getTabPosition(tab);
-    this.activeTabScale = this.getTabScale(tab);
-  }
-  /**
-   * getSelectedTabPosition - gets the x or y coordinates of the tab
-   */
-  getTabPosition(tab) {
-    if (this.orientation === TabsOrientation.horizontal) {
-      return this.previousActiveTabData.x - (tab.getBoundingClientRect().x - this.getBoundingClientRect().x);
-    } else return this.previousActiveTabData.y - (tab.getBoundingClientRect().y - this.getBoundingClientRect().y);
-  }
-  /**
-   * getSelectedTabScale - gets the scale of the tab
-   */
-  getTabScale(tab) {
-    if (this.orientation === TabsOrientation.horizontal) {
-      return this.previousActiveTabData.width / tab.getBoundingClientRect().width;
-    } else return this.previousActiveTabData.height / tab.getBoundingClientRect().height;
-  }
-  /**
-   * Calculates and applies updated values to CSS variables.
-   *
-   * @param tab - the tab element to apply the updated values to
-   * @internal
-   */
-  applyUpdatedCSSValues(tab) {
-    this.calculateAnimationProperties(tab);
-    this.setTabScaleCSSVar();
-    this.setTabOffsetCSSVar();
-  }
-  /**
-   * Runs through all the operations required for setting the tab active indicator to its starting location, ending
-   * location, and applying the animated css class to the tab.
-   *
-   * @param tab - the tab element to apply the updated values to
-   * @internal
-   */
-  animationLoop(tab) {
-    tab.setAttribute("data-animate", "false");
-    this.applyUpdatedCSSValues(tab);
-    this.previousActiveTabData = this.activeTabData;
-    this.applyUpdatedCSSValues(tab);
-    tab.setAttribute("data-animate", "true");
-  }
-  /**
-   * Gets the position data for a tab element relative to its parent
-   * @param tab - The tab element to get position data for
-   * @returns The position data for the tab
-   */
-  getTabPositionData(tab) {
-    const rect = tab.getBoundingClientRect();
-    const parentRect = this.getBoundingClientRect();
-    return {
-      x: rect.x - parentRect.x,
-      y: rect.y - parentRect.y,
-      height: rect.height,
-      width: rect.width
-    };
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.role = "tab";
   }
-  /**
-   * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
-   * tab indicator.
-   *
-   * @internal
-   */
-  setTabData() {
-    if (this.tabs && this.tabs.length > 0) {
-      const tabs = this.tabs;
-      const activeTab = this.activetab || tabs[0];
-      this.activeTabData = this.getTabPositionData(activeTab);
-      if (this.previousActiveTabData?.x !== this.activeTabData?.x && this.previousActiveTabData?.y !== this.activeTabData?.y) {
-        this.previousActiveTabData = this.activeTabData;
-      }
+  connectedCallback() {
+    super.connectedCallback();
+    this.slot || (this.slot = "tab");
+    if (this.disabled) {
+      this.setAttribute("aria-disabled", "true");
+    }
+    if (this.styles) {
+      this.$fastController.removeStyles(this.styles);
     }
-  }
-  setTabOffsetCSSVar() {
-    this.styles = css`
-      :host{--tabIndicatorOffset:${this.activeTabOffset.toString()}px}`;
-    this.$fastController.addStyles(this.styles);
-  }
-  setTabScaleCSSVar() {
     this.styles = css`
-      :host{--tabIndicatorScale:${this.activeTabScale.toString()}}`;
+      :host{--textContent:'${this.textContent}'}`;
     this.$fastController.addStyles(this.styles);
   }
-  activeidChanged(oldValue, newValue) {
-    if (oldValue && this.tabs) {
-      const oldTab = this.tabs.find(tab => tab.id === oldValue);
-      if (oldTab) {
-        this.previousActiveTabData = this.getTabPositionData(oldTab);
-      }
-    }
-    super.activeidChanged(oldValue, newValue);
-    this.setTabData();
-    if (this.activetab) {
-      this.animationLoop(this.activetab);
-    }
-  }
-  tabsChanged() {
-    super.tabsChanged();
-    this.setTabData();
-    if (this.activetab) {
-      this.animationLoop(this.activetab);
-    }
-  }
 }
-__decorateClass$d([attr], Tabs.prototype, "appearance", 2);
 __decorateClass$d([attr({
   mode: "boolean"
-})], Tabs.prototype, "disabled", 2);
-__decorateClass$d([attr], Tabs.prototype, "size", 2);
-applyMixins(Tabs, StartEnd);
+})], Tab.prototype, "disabled", 2);
+applyMixins(Tab, StartEnd);
 
-function tabsTemplate(options = {}) {
-  return html` ${startSlotTemplate(options)}<div class="tablist" part="tablist" role="tablist"><slot name="tab" ${slotted("tabs")}></slot></div>${endSlotTemplate(options)}<div class="tabpanel" part="tabpanel"><slot name="tabpanel" ${slotted("tabpanels")}></slot></div>`;
+function tabTemplate(options = {}) {
+  return html`<template slot="tab" role="tab" aria-disabled="${x => x.disabled}">${startSlotTemplate(options)}<span class="tab-content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$8 = tabsTemplate({});
+const template$8 = tabTemplate({});
 
 const styles$8 = css`
-  ${display("grid")}
+  ${display("inline-flex")}
 
-  :host{box-sizing:border-box;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};color:${colorNeutralForeground2};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab:hover):before{content:unset}:host ::slotted(fluent-tab){border-radius:${borderRadiusMedium}}:host ::slotted(fluent-tab[aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}.tablist{display:grid;grid-template-rows:auto auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end;box-sizing:border-box}::slotted([slot='start']),::slotted([slot='end']){display:flex;align-self:center}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host([orientation='vertical']){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host([orientation='vertical']) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host([orientation='vertical']) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host([orientation='vertical']) ::slotted([slot='end']){grid-row:3}:host([appearance='subtle']) ::slotted(fluent-tab:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted(fluent-tab:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}:host([size='small']) ::slotted(fluent-tab){font-size:${fontSizeBase300};line-height:${lineHeightBase300};padding:${spacingVerticalSNudge} ${spacingHorizontalSNudge}}:host([size='large']) ::slotted(fluent-tab){font-size:${fontSizeBase400};line-height:${lineHeightBase400};padding:${spacingVerticalL} ${spacingHorizontalMNudge}}:host ::slotted(fluent-tab[data-animate='true'])::after{transition-property:transform;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax}}:host ::slotted(fluent-tab)::after{height:${strokeWidthThicker};margin-top:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted(fluent-tab)::after{width:${strokeWidthThicker};height:unset;margin-top:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted(fluent-tab)::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;margin-top:auto}:host([orientation='vertical']) ::slotted(fluent-tab)::before{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-top:auto;transform-origin:left}:host([orientation='vertical']) ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:unset;margin-inline-end:auto;transform-origin:top;width:${strokeWidthThicker}}:host([orientation='vertical']) ::slotted(fluent-tab){align-items:flex-start;grid-column:2;padding-top:${spacingVerticalSNudge};padding-bottom:${spacingVerticalSNudge}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab){padding-top:${spacingVerticalXXS};padding-bottom:${spacingVerticalXXS}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab){padding-top:${spacingVerticalS};padding-bottom:${spacingVerticalS}}:host([size='small']) ::slotted(fluent-tab)::after,:host([size='small']) ::slotted(fluent-tab)::before,:host([size='small']) ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalSNudge};left:${spacingHorizontalSNudge}}:host ::slotted(fluent-tab)::after,:host ::slotted(fluent-tab)::before,:host ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalMNudge};left:${spacingHorizontalMNudge}}:host([size='large']) ::slotted(fluent-tab)::after,:host([size='large']) ::slotted(fluent-tab)::before,:host([size='large']) ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalMNudge};left:${spacingHorizontalMNudge}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalSNudge};bottom:${spacingVerticalSNudge}}:host([orientation='vertical']) ::slotted(fluent-tab)::after,:host([orientation='vertical']) ::slotted(fluent-tab)::before,:host([orientation='vertical']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalS};bottom:${spacingVerticalS}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalMNudge};bottom:${spacingVerticalMNudge}}`;
+  :host{position:relative;flex-direction:row;align-items:center;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-size:${fontSizeBase300};color:${colorNeutralForeground2};fill:currentcolor;grid-row:1;padding:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};gap:4px}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:${colorNeutralForeground1};font-weight:${fontWeightSemibold}}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:${lineHeightBase300};font-weight:${fontWeightSemibold}}:host([aria-selected='true'])::after{background-color:${colorCompoundBrandStroke};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:${colorNeutralStroke1Hover};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:${colorNeutralForegroundDisabled}}::slotted([slot='start']),::slotted([slot='end']){display:flex}:host([disabled]){cursor:not-allowed;fill:${colorNeutralForegroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host([data-hasIndent]){display:grid;grid-template-columns:20px 1fr auto}:host([data-hasIndent]) .tab-content{grid-column:2}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([aria-selected='true'])::after{background-color:Highlight}`));
 
-const definition$8 = Tabs.compose({
-  name: `${FluentDesignSystem.prefix}-tabs`,
+const definition$8 = Tab.compose({
+  name: `${FluentDesignSystem.prefix}-tab`,
   template: template$8,
   styles: styles$8
 });
 
 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");
@@ -11749,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"
@@ -11772,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.
      *
@@ -11789,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);
@@ -11796,6 +11565,9 @@ class BaseTablist extends FASTElement {
       }
     };
     this.handleTabKeyDown = event => {
+      if (this.disabled) {
+        return;
+      }
       const dir = getDirection(this);
       switch (event.key) {
         case keyArrowLeft:
@@ -11836,6 +11608,8 @@ class BaseTablist extends FASTElement {
           break;
       }
     };
+    this.elementInternals.role = "tablist";
+    this.elementInternals.ariaOrientation = this.orientation ?? TablistOrientation.horizontal;
   }
   /**
    * Handles disabled changes
@@ -11846,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) {
@@ -11895,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) {
@@ -11926,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");
         }
@@ -11995,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({
@@ -12146,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);
@@ -12213,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;
@@ -12254,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}`;
@@ -12354,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
@@ -12452,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.
    */
@@ -12479,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) {
@@ -12518,7 +12306,7 @@ class BaseTextArea extends FASTElement {
       this.autoSizerEl.classList.add("auto-sizer");
       this.autoSizerEl.ariaHidden = "true";
     }
-    this.shadowRoot.prepend(this.autoSizerEl);
+    this.rootEl?.prepend(this.autoSizerEl);
     if (!this.autoSizerObserver) {
       this.autoSizerObserver = new ResizeObserver((_, observer) => {
         const blockSizePropName = window.getComputedStyle(this).writingMode.startsWith("horizontal") ? "height" : "width";
@@ -12561,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);
@@ -12667,7 +12456,7 @@ const styles$6 = css`
     :host{--border-color:FieldText;--border-block-end-color:FieldText;--focus-indicator-color:Highlight;--placeholder-color:FieldText}:host(:hover),:host(:active),:host(:focus-within){--border-color:Highlight;--border-block-end-color:Highlight}:host(:disabled){--color:GrayText;--border-color:GrayText;--border-block-end-color:GrayText;--placeholder-color:GrayText}`));
 
 function textAreaTemplate() {
-  return html`<template><label ${ref("labelEl")} for="control" part="label"><slot name="label" ${slotted("labelSlottedNodes")}></slot></label><div class="root" part="root"><textarea ${ref("controlEl")} id="control" class="control" part="control" ?required="${x => x.required}" ?disabled="${x => x.disabled}" ?readonly="${x => x.readOnly}" ?spellcheck="${x => x.spellcheck}" autocomplete="${x => x.autocomplete}" maxlength="${x => x.maxLength}" minlength="${x => x.minLength}" placeholder="${x => x.placeholder}" @change="${x => x.handleControlChange()}" @select="${x => x.handleControlSelect()}" @input="${x => x.handleControlInput()}"></textarea></div><div hidden><slot ${slotted("defaultSlottedNodes")}></slot></div></template>`;
+  return html`<template><label ${ref("labelEl")} for="control" part="label"><slot name="label" ${slotted("labelSlottedNodes")}></slot></label><div class="root" part="root" ${ref("rootEl")}><textarea ${ref("controlEl")} id="control" class="control" part="control" ?required="${x => x.required}" ?disabled="${x => x.disabled}" ?readonly="${x => x.readOnly}" ?spellcheck="${x => x.spellcheck}" autocomplete="${x => x.autocomplete}" maxlength="${x => x.maxLength}" minlength="${x => x.minLength}" placeholder="${x => x.placeholder}" @change="${x => x.handleControlChange()}" @select="${x => x.handleControlSelect()}" @input="${x => x.handleControlInput()}"></textarea></div><div hidden><slot ${slotted("defaultSlottedNodes")}></slot></div></template>`;
 }
 const template$6 = textAreaTemplate();
 
@@ -12733,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.
@@ -12779,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.
@@ -12888,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();
   }
@@ -13101,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();
 
@@ -13242,7 +13035,7 @@ __decorateClass$5([attr({
 })], ToggleButton.prototype, "mixed", 2);
 
 const styles$3 = css`
-  ${styles$E}
+  ${styles$C}
 
   :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}[appearance='primary']:not(:focus-visible)){border-color:transparent}:host(${pressedState}[appearance='primary']){background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}[appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}[appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}[appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}[appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}[appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}[appearance='outline']),:host(${pressedState}[appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}[appearance='outline']:hover),:host(${pressedState}[appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}[appearance='outline']:active),:host(${pressedState}[appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}[appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}[appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}[appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(${pressedState}),:host(
@@ -13507,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();
@@ -13703,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;
@@ -13783,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
@@ -13837,7 +13651,9 @@ class BaseTreeItem extends FASTElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.updateTabindexBySelected();
+    Updates.enqueue(() => {
+      this.updateTabindexBySelected();
+    });
   }
   /**
    * Updates the childrens indent
@@ -13880,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() {
@@ -13977,3 +13791,136 @@ const definition = TreeItem.compose({
 });
 
 definition.define(FluentDesignSystem.registry);
+
+const SUPPORTS_ADOPTED_STYLE_SHEETS = "adoptedStyleSheets" in document;
+const SUPPORTS_CSS_SCOPE = "CSSScopeRule" in window;
+const themeStyleTextMap = /* @__PURE__ */new Map();
+const scopedThemeKeyMap = /* @__PURE__ */new Map();
+const shadowAdoptedStyleSheetMap = /* @__PURE__ */new Map();
+const elementThemeMap = /* @__PURE__ */new Map();
+const globalThemeStyleSheet = new CSSStyleSheet();
+function setTheme(theme, node = document) {
+  if (!node || !isThemeableNode(node)) {
+    return;
+  }
+  if (!SUPPORTS_ADOPTED_STYLE_SHEETS || node instanceof HTMLElement && !node.shadowRoot && !SUPPORTS_CSS_SCOPE) {
+    const target = node === document ? document.documentElement : node;
+    setThemePropertiesOnElement(theme, target);
+    return;
+  }
+  if ([document, document.documentElement, document.body].includes(node)) {
+    setGlobalTheme(theme);
+  } else {
+    setLocalTheme(theme, node);
+  }
+}
+function getThemeStyleText(theme) {
+  if (!themeStyleTextMap.has(theme)) {
+    const tokenDeclarations = [];
+    for (const [tokenName, tokenValue] of Object.entries(theme)) {
+      tokenDeclarations.push(`--${tokenName}:${tokenValue.toString()};`);
+    }
+    themeStyleTextMap.set(theme, tokenDeclarations.join(""));
+  }
+  return themeStyleTextMap.get(theme);
+}
+function isThemeableNode(node) {
+  return [document, document.documentElement].includes(node) || node instanceof HTMLElement && !!node.closest("body");
+}
+function setGlobalTheme(theme) {
+  if (theme === null) {
+    if (document.adoptedStyleSheets.includes(globalThemeStyleSheet)) {
+      globalThemeStyleSheet.replaceSync("");
+    }
+    return;
+  }
+  globalThemeStyleSheet.replaceSync(`
+    html {
+      ${getThemeStyleText(theme)}
+    }
+  `);
+  if (!document.adoptedStyleSheets.includes(globalThemeStyleSheet)) {
+    document.adoptedStyleSheets.push(globalThemeStyleSheet);
+  }
+}
+function setLocalTheme(theme, element) {
+  if (theme === null) {
+    if (element.shadowRoot && shadowAdoptedStyleSheetMap.has(element)) {
+      shadowAdoptedStyleSheetMap.get(element).replaceSync("");
+    } else {
+      delete element.dataset.fluentTheme;
+      forceRepaint(element);
+    }
+    return;
+  }
+  if (element.shadowRoot) {
+    getShadowAdoptedStyleSheet(element).replaceSync(`
+      :host {
+        ${getThemeStyleText(theme)}
+      }
+    `);
+  } else {
+    element.dataset.fluentTheme = getScopedThemeKey(theme);
+    forceRepaint(element);
+  }
+}
+function getShadowAdoptedStyleSheet(element) {
+  if (!shadowAdoptedStyleSheetMap.has(element)) {
+    const shadowAdoptedStyleSheet = new CSSStyleSheet();
+    shadowAdoptedStyleSheetMap.set(element, shadowAdoptedStyleSheet);
+    element.shadowRoot?.adoptedStyleSheets.push(shadowAdoptedStyleSheet);
+  }
+  return shadowAdoptedStyleSheetMap.get(element);
+}
+function getScopedThemeKey(theme) {
+  if (!scopedThemeKeyMap.has(theme)) {
+    const themeKey = uniqueId$1("fluent-theme-");
+    const scopedThemeStyleSheet = new CSSStyleSheet();
+    scopedThemeKeyMap.set(theme, themeKey);
+    scopedThemeStyleSheet.replaceSync(`
+      @scope ([data-fluent-theme="${themeKey}"]) {
+        :scope {
+          ${getThemeStyleText(theme)}
+        }
+      }
+    `);
+    document.adoptedStyleSheets.push(scopedThemeStyleSheet);
+  }
+  return scopedThemeKeyMap.get(theme);
+}
+function setThemePropertiesOnElement(theme, element) {
+  let tokens;
+  if (theme === null) {
+    if (!elementThemeMap.has(element)) {
+      return;
+    }
+    tokens = elementThemeMap.get(element);
+  } else {
+    elementThemeMap.set(element, theme);
+    tokens = theme;
+  }
+  for (const [tokenName, tokenValue] of Object.entries(tokens)) {
+    if (theme === null) {
+      element.style.removeProperty(`--${tokenName}`);
+    } else {
+      element.style.setProperty(`--${tokenName}`, tokenValue.toString());
+    }
+  }
+}
+const {
+  userAgent: UA
+} = navigator;
+const isWebkit = /\bAppleWebKit\/[\d+\.]+\b/.test(UA);
+function forceRepaint(element) {
+  if (!isWebkit) {
+    return;
+  }
+  const name = "visibility";
+  const tempValue = "hidden";
+  const currentValue = element.style.getPropertyValue(name);
+  element.style.setProperty(name, tempValue);
+  Updates.process();
+  element.style.setProperty(name, currentValue);
+}
+
+export { setTheme };