@fluentui/web-components 3.0.0-beta.82 → 3.0.0-beta.84

package/dist/web-components.js

@@ -4011,6 +4011,84 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
   compose
 });
 
+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$O(target, key, result);
+  return result;
+};
+class ARIAGlobalStatesAndProperties {}
+__decorateClass$O([attr({
+  attribute: "aria-atomic"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
+__decorateClass$O([attr({
+  attribute: "aria-busy"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
+__decorateClass$O([attr({
+  attribute: "aria-controls"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
+__decorateClass$O([attr({
+  attribute: "aria-current"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
+__decorateClass$O([attr({
+  attribute: "aria-describedby"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
+__decorateClass$O([attr({
+  attribute: "aria-details"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
+__decorateClass$O([attr({
+  attribute: "aria-disabled"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
+__decorateClass$O([attr({
+  attribute: "aria-errormessage"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
+__decorateClass$O([attr({
+  attribute: "aria-flowto"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
+__decorateClass$O([attr({
+  attribute: "aria-haspopup"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
+__decorateClass$O([attr({
+  attribute: "aria-hidden"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
+__decorateClass$O([attr({
+  attribute: "aria-invalid"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
+__decorateClass$O([attr({
+  attribute: "aria-keyshortcuts"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
+__decorateClass$O([attr({
+  attribute: "aria-label"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
+__decorateClass$O([attr({
+  attribute: "aria-labelledby"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
+__decorateClass$O([attr({
+  attribute: "aria-live"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
+__decorateClass$O([attr({
+  attribute: "aria-owns"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
+__decorateClass$O([attr({
+  attribute: "aria-relevant"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
+__decorateClass$O([attr({
+  attribute: "aria-roledescription"
+})], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
+
+const numberLikeStringConverter = {
+  fromView(value) {
+    const valueAsNumber = parseFloat(value);
+    return Number.isNaN(valueAsNumber) ? "" : valueAsNumber.toString();
+  },
+  toView(value) {
+    const valueAsNumber = parseFloat(value);
+    return Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber.toString();
+  }
+};
+
 /**
  * Standard orientation values
  */
@@ -4094,84 +4172,6 @@ function uniqueId$1(prefix = "") {
   return `${prefix}${uniqueIdCounter$1++}`;
 }
 
-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$A(target, key, result);
-  return result;
-};
-class ARIAGlobalStatesAndProperties {}
-__decorateClass$A([attr({
-  attribute: "aria-atomic"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$A([attr({
-  attribute: "aria-busy"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$A([attr({
-  attribute: "aria-controls"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$A([attr({
-  attribute: "aria-current"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$A([attr({
-  attribute: "aria-describedby"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$A([attr({
-  attribute: "aria-details"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$A([attr({
-  attribute: "aria-disabled"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$A([attr({
-  attribute: "aria-errormessage"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$A([attr({
-  attribute: "aria-flowto"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$A([attr({
-  attribute: "aria-haspopup"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$A([attr({
-  attribute: "aria-hidden"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$A([attr({
-  attribute: "aria-invalid"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$A([attr({
-  attribute: "aria-keyshortcuts"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$A([attr({
-  attribute: "aria-label"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$A([attr({
-  attribute: "aria-labelledby"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$A([attr({
-  attribute: "aria-live"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$A([attr({
-  attribute: "aria-owns"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$A([attr({
-  attribute: "aria-relevant"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$A([attr({
-  attribute: "aria-roledescription"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
-
-const numberLikeStringConverter = {
-  fromView(value) {
-    const valueAsNumber = parseFloat(value);
-    return Number.isNaN(valueAsNumber) ? "" : valueAsNumber.toString();
-  },
-  toView(value) {
-    const valueAsNumber = parseFloat(value);
-    return Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber.toString();
-  }
-};
-
 const getDirection = rootNode => {
   return rootNode.closest("[dir]")?.dir === "rtl" ? Direction.rtl : Direction.ltr;
 };
@@ -4378,23 +4378,12 @@ function swapStates(elementInternals, prev = "", next = "", States, prefix = "")
   }
 }
 
-const AccordionItemSize = {
-  small: "small",
-  medium: "medium",
-  large: "large",
-  extraLarge: "extra-large"
-};
-const AccordionItemMarkerPosition = {
-  start: "start",
-  end: "end"
-};
-
-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$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$z(target, key, result);
+  if (kind && result) __defProp$N(target, key, result);
   return result;
 };
 class BaseAccordionItem extends FASTElement {
@@ -4428,18 +4417,38 @@ class BaseAccordionItem extends FASTElement {
     toggleState(this.elementInternals, "disabled", next);
   }
 }
-__decorateClass$z([attr({
+__decorateClass$N([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseAccordionItem.prototype, "headinglevel", 2);
-__decorateClass$z([attr({
+__decorateClass$N([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "expanded", 2);
-__decorateClass$z([attr({
+__decorateClass$N([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "disabled", 2);
-__decorateClass$z([attr], BaseAccordionItem.prototype, "id", 2);
+__decorateClass$N([attr], BaseAccordionItem.prototype, "id", 2);
+
+const AccordionItemSize = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  extraLarge: "extra-large"
+};
+const AccordionItemMarkerPosition = {
+  start: "start",
+  end: "end"
+};
+
+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$M(target, key, result);
+  return result;
+};
 class AccordionItem extends BaseAccordionItem {
   constructor() {
     super(...arguments);
@@ -4470,11 +4479,11 @@ class AccordionItem extends BaseAccordionItem {
     toggleState(this.elementInternals, "block", next);
   }
 }
-__decorateClass$z([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$z([attr({
+__decorateClass$M([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$M([attr({
   attribute: "marker-position"
 })], AccordionItem.prototype, "markerPosition", 2);
-__decorateClass$z([attr({
+__decorateClass$M([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
@@ -4901,12 +4910,12 @@ const AccordionExpandMode = {
   multi: "multi"
 };
 
-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$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$y(target, key, result);
+  if (kind && result) __defProp$L(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -5045,10 +5054,10 @@ class Accordion extends FASTElement {
     });
   }
 }
-__decorateClass$y([attr({
+__decorateClass$L([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$y([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$L([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
 const styles$D = css`
   ${display("flex")}
@@ -5107,12 +5116,12 @@ const AnchorAttributes = {
   type: "type"
 };
 
-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$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$x(target, key, result);
+  if (kind && result) __defProp$K(target, key, result);
   return result;
 };
 class BaseAnchor extends FASTElement {
@@ -5220,14 +5229,23 @@ class BaseAnchor extends FASTElement {
     return proxy;
   }
 }
-__decorateClass$x([attr], BaseAnchor.prototype, "download", 2);
-__decorateClass$x([attr], BaseAnchor.prototype, "href", 2);
-__decorateClass$x([attr], BaseAnchor.prototype, "hreflang", 2);
-__decorateClass$x([attr], BaseAnchor.prototype, "ping", 2);
-__decorateClass$x([attr], BaseAnchor.prototype, "referrerpolicy", 2);
-__decorateClass$x([attr], BaseAnchor.prototype, "rel", 2);
-__decorateClass$x([attr], BaseAnchor.prototype, "target", 2);
-__decorateClass$x([attr], BaseAnchor.prototype, "type", 2);
+__decorateClass$K([attr], BaseAnchor.prototype, "download", 2);
+__decorateClass$K([attr], BaseAnchor.prototype, "href", 2);
+__decorateClass$K([attr], BaseAnchor.prototype, "hreflang", 2);
+__decorateClass$K([attr], BaseAnchor.prototype, "ping", 2);
+__decorateClass$K([attr], BaseAnchor.prototype, "referrerpolicy", 2);
+__decorateClass$K([attr], BaseAnchor.prototype, "rel", 2);
+__decorateClass$K([attr], BaseAnchor.prototype, "target", 2);
+__decorateClass$K([attr], BaseAnchor.prototype, "type", 2);
+
+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;
+};
 class AnchorButton extends BaseAnchor {
   constructor() {
     super(...arguments);
@@ -5266,10 +5284,10 @@ class AnchorButton extends BaseAnchor {
     toggleState(this.elementInternals, "icon", !!next);
   }
 }
-__decorateClass$x([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$x([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$x([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$x([attr({
+__decorateClass$J([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$J([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$J([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$J([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
@@ -5278,7 +5296,7 @@ applyMixins(AnchorButton, StartEnd);
 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']){flex-shrink:0;margin-inline-start:var(--icon-spacing)}:host(${iconOnlyState}){min-width:32px;max-width:32px}:host(${smallState}){--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(${smallState}${iconOnlyState}){min-width:24px;max-width:24px}:host(${largeState}){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:40px;max-width:40px}:host(${largeState}) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host(${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${primaryState}:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:hover:active){background-color:${colorBrandBackgroundPressed}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}`;
+  :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(${iconOnlyState}){min-width:32px;max-width:32px}:host(${smallState}){--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(${smallState}${iconOnlyState}){min-width:24px;max-width:24px}:host(${largeState}){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:40px;max-width:40px}:host(${largeState}) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host(${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${primaryState}:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:hover:active){background-color:${colorBrandBackgroundPressed}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}`;
 const styles$C = css`
   ${baseButtonStyles}
 
@@ -5345,6 +5363,30 @@ function getInitials(displayName, isRtl, options) {
   return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);
 }
 
+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$I(target, key, result);
+  return result;
+};
+class BaseAvatar extends FASTElement {
+  constructor() {
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.role = "img";
+  }
+}
+__decorateClass$I([attr], BaseAvatar.prototype, "name", 2);
+__decorateClass$I([attr], BaseAvatar.prototype, "initials", 2);
+__decorateClass$I([attr], BaseAvatar.prototype, "active", 2);
+
 const AvatarNamedColor = {
   darkRed: "dark-red",
   cranberry: "cranberry",
@@ -5384,29 +5426,14 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-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$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$w(target, key, result);
+  if (kind && result) __defProp$H(target, key, result);
   return result;
 };
-class BaseAvatar extends FASTElement {
-  constructor() {
-    super();
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    this.elementInternals = this.attachInternals();
-    this.elementInternals.role = "img";
-  }
-}
-__decorateClass$w([attr], BaseAvatar.prototype, "name", 2);
-__decorateClass$w([attr], BaseAvatar.prototype, "initials", 2);
-__decorateClass$w([attr], BaseAvatar.prototype, "active", 2);
 const _Avatar = class _Avatar extends BaseAvatar {
   /**
    * Handles changes to observable properties
@@ -5459,13 +5486,13 @@ const _Avatar = class _Avatar extends BaseAvatar {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$w([attr], _Avatar.prototype, "shape", 2);
-__decorateClass$w([attr], _Avatar.prototype, "appearance", 2);
-__decorateClass$w([attr({
+__decorateClass$H([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$H([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$H([attr({
   converter: nullableNumberConverter
 })], _Avatar.prototype, "size", 2);
-__decorateClass$w([attr], _Avatar.prototype, "color", 2);
-__decorateClass$w([attr({
+__decorateClass$H([attr], _Avatar.prototype, "color", 2);
+__decorateClass$H([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -5537,12 +5564,12 @@ const BadgeSize = {
   extraLarge: "extra-large"
 };
 
-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$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$v(target, key, result);
+  if (kind && result) __defProp$G(target, key, result);
   return result;
 };
 class Badge extends FASTElement {
@@ -5590,10 +5617,10 @@ class Badge extends FASTElement {
     swapStates(this.elementInternals, prev, next, BadgeSize);
   }
 }
-__decorateClass$v([attr], Badge.prototype, "appearance", 2);
-__decorateClass$v([attr], Badge.prototype, "color", 2);
-__decorateClass$v([attr], Badge.prototype, "shape", 2);
-__decorateClass$v([attr], Badge.prototype, "size", 2);
+__decorateClass$G([attr], Badge.prototype, "appearance", 2);
+__decorateClass$G([attr], Badge.prototype, "color", 2);
+__decorateClass$G([attr], Badge.prototype, "shape", 2);
+__decorateClass$G([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
 const badgeBaseStyles = css.partial`
@@ -5970,12 +5997,12 @@ const definition$B = Badge.compose({
 
 definition$B.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$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$u(target, key, result);
+  if (kind && result) __defProp$F(target, key, result);
   return result;
 };
 class BaseButton extends FASTElement {
@@ -6179,44 +6206,53 @@ class BaseButton extends FASTElement {
  * @public
  */
 BaseButton.formAssociated = true;
-__decorateClass$u([attr({
+__decorateClass$F([attr({
   mode: "boolean"
 })], BaseButton.prototype, "autofocus", 2);
-__decorateClass$u([observable], BaseButton.prototype, "defaultSlottedContent", 2);
-__decorateClass$u([attr({
+__decorateClass$F([observable], BaseButton.prototype, "defaultSlottedContent", 2);
+__decorateClass$F([attr({
   mode: "boolean"
 })], BaseButton.prototype, "disabled", 2);
-__decorateClass$u([attr({
+__decorateClass$F([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], BaseButton.prototype, "disabledFocusable", 2);
-__decorateClass$u([attr({
+__decorateClass$F([attr({
   attribute: "tabindex",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseButton.prototype, "tabIndex", 2);
-__decorateClass$u([attr({
+__decorateClass$F([attr({
   attribute: "formaction"
 })], BaseButton.prototype, "formAction", 2);
-__decorateClass$u([attr({
+__decorateClass$F([attr({
   attribute: "form"
 })], BaseButton.prototype, "formAttribute", 2);
-__decorateClass$u([attr({
+__decorateClass$F([attr({
   attribute: "formenctype"
 })], BaseButton.prototype, "formEnctype", 2);
-__decorateClass$u([attr({
+__decorateClass$F([attr({
   attribute: "formmethod"
 })], BaseButton.prototype, "formMethod", 2);
-__decorateClass$u([attr({
+__decorateClass$F([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], BaseButton.prototype, "formNoValidate", 2);
-__decorateClass$u([attr({
+__decorateClass$F([attr({
   attribute: "formtarget"
 })], BaseButton.prototype, "formTarget", 2);
-__decorateClass$u([attr], BaseButton.prototype, "name", 2);
-__decorateClass$u([attr], BaseButton.prototype, "type", 2);
-__decorateClass$u([attr], BaseButton.prototype, "value", 2);
+__decorateClass$F([attr], BaseButton.prototype, "name", 2);
+__decorateClass$F([attr], BaseButton.prototype, "type", 2);
+__decorateClass$F([attr], BaseButton.prototype, "value", 2);
+
+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 Button extends BaseButton {
   constructor() {
     super(...arguments);
@@ -6255,10 +6291,10 @@ class Button extends BaseButton {
     toggleState(this.elementInternals, "icon", next);
   }
 }
-__decorateClass$u([attr], Button.prototype, "appearance", 2);
-__decorateClass$u([attr], Button.prototype, "shape", 2);
-__decorateClass$u([attr], Button.prototype, "size", 2);
-__decorateClass$u([attr({
+__decorateClass$E([attr], Button.prototype, "appearance", 2);
+__decorateClass$E([attr], Button.prototype, "shape", 2);
+__decorateClass$E([attr], Button.prototype, "size", 2);
+__decorateClass$E([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
@@ -6277,21 +6313,12 @@ const definition$A = Button.compose({
 
 definition$A.define(FluentDesignSystem.registry);
 
-const CheckboxShape = {
-  circular: "circular",
-  square: "square"
-};
-const CheckboxSize = {
-  medium: "medium",
-  large: "large"
-};
-
-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$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$t(target, key, result);
+  if (kind && result) __defProp$D(target, key, result);
   return result;
 };
 class BaseCheckbox extends FASTElement {
@@ -6625,29 +6652,47 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$t([attr({
+__decorateClass$D([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$t([observable], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$t([attr({
+__decorateClass$D([observable], BaseCheckbox.prototype, "disabled", 2);
+__decorateClass$D([attr({
   attribute: "disabled",
   mode: "boolean"
 })], BaseCheckbox.prototype, "disabledAttribute", 2);
-__decorateClass$t([attr({
+__decorateClass$D([attr({
   attribute: "form"
 })], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$t([attr({
+__decorateClass$D([attr({
   attribute: "checked",
   mode: "boolean"
 })], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$t([attr({
+__decorateClass$D([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$t([attr], BaseCheckbox.prototype, "name", 2);
-__decorateClass$t([attr({
+__decorateClass$D([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$D([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
+
+const CheckboxShape = {
+  circular: "circular",
+  square: "square"
+};
+const CheckboxSize = {
+  medium: "medium",
+  large: "large"
+};
+
+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$C(target, key, result);
+  return result;
+};
 class Checkbox extends BaseCheckbox {
   /**
    * Updates the indeterminate state when the `indeterminate` property changes.
@@ -6708,9 +6753,9 @@ class Checkbox extends BaseCheckbox {
     super.toggleChecked(force);
   }
 }
-__decorateClass$t([observable], Checkbox.prototype, "indeterminate", 2);
-__decorateClass$t([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$t([attr], Checkbox.prototype, "size", 2);
+__decorateClass$C([observable], Checkbox.prototype, "indeterminate", 2);
+__decorateClass$C([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$C([attr], Checkbox.prototype, "size", 2);
 
 const styles$y = css`
   ${display("inline-flex")}
@@ -6799,12 +6844,12 @@ const CounterBadgeSize = {
   extraLarge: "extra-large"
 };
 
-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$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$s(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 class CounterBadge extends FASTElement {
@@ -6881,22 +6926,22 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$s([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$s([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$s([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$s([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$s([attr({
+__decorateClass$B([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$B([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$B([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$B([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$B([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$s([attr({
+__decorateClass$B([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$s([attr({
+__decorateClass$B([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$s([attr({
+__decorateClass$B([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
@@ -6930,12 +6975,12 @@ const DialogType = {
   alert: "alert"
 };
 
-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$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$r(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 class Dialog extends FASTElement {
@@ -7003,14 +7048,14 @@ class Dialog extends FASTElement {
     return true;
   }
 }
-__decorateClass$r([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$r([attr({
+__decorateClass$A([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$A([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$r([attr({
+__decorateClass$A([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$r([attr], Dialog.prototype, "type", 2);
+__decorateClass$A([attr], Dialog.prototype, "type", 2);
 
 const template$w = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.type === DialogType.alert ? c.event.preventDefault() : x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
@@ -7026,12 +7071,12 @@ const definition$w = Dialog.compose({
 
 definition$w.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$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$q(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
 class DialogBody extends FASTElement {
@@ -7040,7 +7085,7 @@ class DialogBody extends FASTElement {
     this.noTitleAction = false;
   }
 }
-__decorateClass$q([attr({
+__decorateClass$z([attr({
   mode: "boolean",
   attribute: "no-title-action"
 })], DialogBody.prototype, "noTitleAction", 2);
@@ -7096,12 +7141,12 @@ const DividerAppearance = {
   subtle: "subtle"
 };
 
-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$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$p(target, key, result);
+  if (kind && result) __defProp$y(target, key, result);
   return result;
 };
 class BaseDivider extends FASTElement {
@@ -7148,8 +7193,17 @@ class BaseDivider extends FASTElement {
     swapStates(this.elementInternals, previous, next, DividerOrientation);
   }
 }
-__decorateClass$p([attr], BaseDivider.prototype, "role", 2);
-__decorateClass$p([attr], BaseDivider.prototype, "orientation", 2);
+__decorateClass$y([attr], BaseDivider.prototype, "role", 2);
+__decorateClass$y([attr], BaseDivider.prototype, "orientation", 2);
+
+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$x(target, key, result);
+  return result;
+};
 class Divider extends BaseDivider {
   /**
    * Handles changes to align-content attribute custom states
@@ -7176,11 +7230,11 @@ class Divider extends BaseDivider {
     toggleState(this.elementInternals, "inset", next);
   }
 }
-__decorateClass$p([attr({
+__decorateClass$x([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
-__decorateClass$p([attr], Divider.prototype, "appearance", 2);
-__decorateClass$p([attr({
+__decorateClass$x([attr], Divider.prototype, "appearance", 2);
+__decorateClass$x([attr({
   mode: "boolean"
 })], Divider.prototype, "inset", 2);
 
@@ -7219,12 +7273,12 @@ const DrawerType = {
   inline: "inline"
 };
 
-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$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$o(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 class Drawer extends FASTElement {
@@ -7294,18 +7348,18 @@ class Drawer extends FASTElement {
     return true;
   }
 }
-__decorateClass$o([attr], Drawer.prototype, "type", 2);
-__decorateClass$o([attr({
+__decorateClass$w([attr], Drawer.prototype, "type", 2);
+__decorateClass$w([attr({
   attribute: "aria-labelledby"
 })], Drawer.prototype, "ariaLabelledby", 2);
-__decorateClass$o([attr({
+__decorateClass$w([attr({
   attribute: "aria-describedby"
 })], Drawer.prototype, "ariaDescribedby", 2);
-__decorateClass$o([attr], Drawer.prototype, "position", 2);
-__decorateClass$o([attr({
+__decorateClass$w([attr], Drawer.prototype, "position", 2);
+__decorateClass$w([attr({
   attribute: "size"
 })], Drawer.prototype, "size", 2);
-__decorateClass$o([observable], Drawer.prototype, "dialog", 2);
+__decorateClass$w([observable], Drawer.prototype, "dialog", 2);
 
 const styles$s = css`
   ${display("block")}
@@ -7395,12 +7449,12 @@ const template$r = dropdownTemplate({
   indicator: dropdownIndicatorTemplate
 });
 
-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$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$n(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 class BaseDropdown extends FASTElement {
@@ -7959,41 +8013,50 @@ class BaseDropdown extends FASTElement {
  * @public
  */
 BaseDropdown.formAssociated = true;
-__decorateClass$n([volatile], BaseDropdown.prototype, "activeDescendant", 1);
-__decorateClass$n([observable], BaseDropdown.prototype, "activeIndex", 2);
-__decorateClass$n([attr({
+__decorateClass$v([volatile], BaseDropdown.prototype, "activeDescendant", 1);
+__decorateClass$v([observable], BaseDropdown.prototype, "activeIndex", 2);
+__decorateClass$v([attr({
   attribute: "aria-labelledby",
   mode: "fromView"
 })], BaseDropdown.prototype, "ariaLabelledBy", 2);
-__decorateClass$n([observable], BaseDropdown.prototype, "control", 2);
-__decorateClass$n([attr({
+__decorateClass$v([observable], BaseDropdown.prototype, "control", 2);
+__decorateClass$v([attr({
   mode: "boolean"
 })], BaseDropdown.prototype, "disabled", 2);
-__decorateClass$n([volatile], BaseDropdown.prototype, "displayValue", 1);
-__decorateClass$n([attr({
+__decorateClass$v([volatile], BaseDropdown.prototype, "displayValue", 1);
+__decorateClass$v([attr({
   attribute: "id"
 })], BaseDropdown.prototype, "id", 2);
-__decorateClass$n([observable], BaseDropdown.prototype, "indicator", 2);
-__decorateClass$n([observable], BaseDropdown.prototype, "indicatorSlot", 2);
-__decorateClass$n([attr({
+__decorateClass$v([observable], BaseDropdown.prototype, "indicator", 2);
+__decorateClass$v([observable], BaseDropdown.prototype, "indicatorSlot", 2);
+__decorateClass$v([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseDropdown.prototype, "initialValue", 2);
-__decorateClass$n([observable], BaseDropdown.prototype, "listbox", 2);
-__decorateClass$n([observable], BaseDropdown.prototype, "listboxSlot", 2);
-__decorateClass$n([attr({
+__decorateClass$v([observable], BaseDropdown.prototype, "listbox", 2);
+__decorateClass$v([observable], BaseDropdown.prototype, "listboxSlot", 2);
+__decorateClass$v([attr({
   mode: "boolean"
 })], BaseDropdown.prototype, "multiple", 2);
-__decorateClass$n([attr], BaseDropdown.prototype, "name", 2);
-__decorateClass$n([observable], BaseDropdown.prototype, "open", 2);
-__decorateClass$n([attr], BaseDropdown.prototype, "placeholder", 2);
-__decorateClass$n([attr({
+__decorateClass$v([attr], BaseDropdown.prototype, "name", 2);
+__decorateClass$v([observable], BaseDropdown.prototype, "open", 2);
+__decorateClass$v([attr], BaseDropdown.prototype, "placeholder", 2);
+__decorateClass$v([attr({
   mode: "boolean"
 })], BaseDropdown.prototype, "required", 2);
-__decorateClass$n([attr], BaseDropdown.prototype, "type", 2);
-__decorateClass$n([attr({
+__decorateClass$v([attr], BaseDropdown.prototype, "type", 2);
+__decorateClass$v([attr({
   attribute: "value"
 })], BaseDropdown.prototype, "valueAttribute", 2);
+
+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$u(target, key, result);
+  return result;
+};
 const _Dropdown = class _Dropdown extends BaseDropdown {
   constructor() {
     super();
@@ -8083,8 +8146,8 @@ const _Dropdown = class _Dropdown extends BaseDropdown {
     });
   }
 };
-__decorateClass$n([attr], _Dropdown.prototype, "appearance", 2);
-__decorateClass$n([attr], _Dropdown.prototype, "size", 2);
+__decorateClass$u([attr], _Dropdown.prototype, "appearance", 2);
+__decorateClass$u([attr], _Dropdown.prototype, "size", 2);
 let Dropdown = _Dropdown;
 
 const styles$q = css`
@@ -8122,12 +8185,12 @@ const ValidationFlags = {
   valid: "valid"
 };
 
-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$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$m(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 class BaseField extends FASTElement {
@@ -8295,17 +8358,26 @@ class BaseField extends FASTElement {
     }
   }
 }
-__decorateClass$m([observable], BaseField.prototype, "labelSlot", 2);
-__decorateClass$m([observable], BaseField.prototype, "messageSlot", 2);
-__decorateClass$m([observable], BaseField.prototype, "slottedInputs", 2);
-__decorateClass$m([observable], BaseField.prototype, "input", 2);
+__decorateClass$t([observable], BaseField.prototype, "labelSlot", 2);
+__decorateClass$t([observable], BaseField.prototype, "messageSlot", 2);
+__decorateClass$t([observable], BaseField.prototype, "slottedInputs", 2);
+__decorateClass$t([observable], BaseField.prototype, "input", 2);
+
+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$s(target, key, result);
+  return result;
+};
 class Field extends BaseField {
   constructor() {
     super(...arguments);
     this.labelPosition = LabelPosition.above;
   }
 }
-__decorateClass$m([attr({
+__decorateClass$s([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
 
@@ -8349,12 +8421,12 @@ const ImageShape = {
   square: "square"
 };
 
-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$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$l(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 class Image extends FASTElement {
@@ -8408,17 +8480,17 @@ class Image extends FASTElement {
     swapStates(this.elementInternals, prev, next, ImageShape);
   }
 }
-__decorateClass$l([attr({
+__decorateClass$r([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
-__decorateClass$l([attr({
+__decorateClass$r([attr({
   mode: "boolean"
 })], Image.prototype, "bordered", 2);
-__decorateClass$l([attr({
+__decorateClass$r([attr({
   mode: "boolean"
 })], Image.prototype, "shadow", 2);
-__decorateClass$l([attr], Image.prototype, "fit", 2);
-__decorateClass$l([attr], Image.prototype, "shape", 2);
+__decorateClass$r([attr], Image.prototype, "fit", 2);
+__decorateClass$r([attr], Image.prototype, "shape", 2);
 
 const template$p = html`<slot></slot>`;
 
@@ -8443,12 +8515,12 @@ const LabelWeight = {
   semibold: "semibold"
 };
 
-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$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$k(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 class Label extends FASTElement {
@@ -8488,12 +8560,12 @@ class Label extends FASTElement {
     toggleState(this.elementInternals, "disabled", next);
   }
 }
-__decorateClass$k([attr], Label.prototype, "size", 2);
-__decorateClass$k([attr], Label.prototype, "weight", 2);
-__decorateClass$k([attr({
+__decorateClass$q([attr], Label.prototype, "size", 2);
+__decorateClass$q([attr], Label.prototype, "weight", 2);
+__decorateClass$q([attr({
   mode: "boolean"
 })], Label.prototype, "disabled", 2);
-__decorateClass$k([attr({
+__decorateClass$q([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
@@ -8519,12 +8591,12 @@ const LinkAppearance = {
   subtle: "subtle"
 };
 
-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$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$j(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 class Link extends BaseAnchor {
@@ -8549,8 +8621,8 @@ class Link extends BaseAnchor {
     toggleState(this.elementInternals, "inline", next);
   }
 }
-__decorateClass$j([attr], Link.prototype, "appearance", 2);
-__decorateClass$j([attr({
+__decorateClass$p([attr], Link.prototype, "appearance", 2);
+__decorateClass$p([attr({
   mode: "boolean"
 })], Link.prototype, "inline", 2);
 
@@ -8573,12 +8645,12 @@ const definition$n = Link.compose({
 
 definition$n.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$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$i(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 class Listbox extends FASTElement {
@@ -8716,14 +8788,14 @@ class Listbox extends FASTElement {
     this.selectedIndex = selectedIndex;
   }
 }
-__decorateClass$i([attr({
+__decorateClass$o([attr({
   attribute: "id",
   mode: "fromView"
 })], Listbox.prototype, "id", 2);
-__decorateClass$i([observable], Listbox.prototype, "multiple", 2);
-__decorateClass$i([observable], Listbox.prototype, "options", 2);
-__decorateClass$i([observable], Listbox.prototype, "selectedIndex", 2);
-__decorateClass$i([observable], Listbox.prototype, "dropdown", 2);
+__decorateClass$o([observable], Listbox.prototype, "multiple", 2);
+__decorateClass$o([observable], Listbox.prototype, "options", 2);
+__decorateClass$o([observable], Listbox.prototype, "selectedIndex", 2);
+__decorateClass$o([observable], Listbox.prototype, "dropdown", 2);
 
 const styles$l = css`
   ${display("inline-flex")}
@@ -8785,12 +8857,12 @@ const MenuItemRole = {
   [MenuItemRole.menuitemradio]: "menuitemradio"
 });
 
-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$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$h(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 class MenuItem extends FASTElement {
@@ -8979,18 +9051,18 @@ class MenuItem extends FASTElement {
     this.elementInternals.ariaChecked = this.role !== MenuItemRole.menuitem ? `${!!this.checked}` : null;
   }
 }
-__decorateClass$h([attr({
+__decorateClass$n([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$h([attr], MenuItem.prototype, "role", 2);
-__decorateClass$h([attr({
+__decorateClass$n([attr], MenuItem.prototype, "role", 2);
+__decorateClass$n([attr({
   mode: "boolean"
 })], MenuItem.prototype, "checked", 2);
-__decorateClass$h([attr({
+__decorateClass$n([attr({
   mode: "boolean"
 })], MenuItem.prototype, "hidden", 2);
-__decorateClass$h([observable], MenuItem.prototype, "slottedSubmenu", 2);
-__decorateClass$h([observable], MenuItem.prototype, "submenu", 2);
+__decorateClass$n([observable], MenuItem.prototype, "slottedSubmenu", 2);
+__decorateClass$n([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
 const styles$k = css`
@@ -9019,12 +9091,12 @@ const definition$k = MenuItem.compose({
 
 definition$k.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$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$g(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 const _MenuList = class _MenuList extends FASTElement {
@@ -9240,7 +9312,7 @@ const _MenuList = class _MenuList extends FASTElement {
   }
 };
 _MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$g([observable], _MenuList.prototype, "items", 2);
+__decorateClass$m([observable], _MenuList.prototype, "items", 2);
 let MenuList = _MenuList;
 
 const styles$j = css`
@@ -9261,12 +9333,12 @@ const definition$j = MenuList.compose({
 
 definition$j.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;
+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$f(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 class Menu extends FASTElement {
@@ -9546,28 +9618,28 @@ class Menu extends FASTElement {
     }
   }
 }
-__decorateClass$f([attr({
+__decorateClass$l([attr({
   attribute: "open-on-hover",
   mode: "boolean"
 })], Menu.prototype, "openOnHover", 2);
-__decorateClass$f([attr({
+__decorateClass$l([attr({
   attribute: "open-on-context",
   mode: "boolean"
 })], Menu.prototype, "openOnContext", 2);
-__decorateClass$f([attr({
+__decorateClass$l([attr({
   attribute: "close-on-scroll",
   mode: "boolean"
 })], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$f([attr({
+__decorateClass$l([attr({
   attribute: "persist-on-item-click",
   mode: "boolean"
 })], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$f([attr({
+__decorateClass$l([attr({
   mode: "boolean"
 })], Menu.prototype, "split", 2);
-__decorateClass$f([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$f([observable], Menu.prototype, "slottedTriggers", 2);
-__decorateClass$f([observable], Menu.prototype, "primaryAction", 2);
+__decorateClass$l([observable], Menu.prototype, "slottedMenuList", 2);
+__decorateClass$l([observable], Menu.prototype, "slottedTriggers", 2);
+__decorateClass$l([observable], Menu.prototype, "primaryAction", 2);
 
 const styles$i = css`
   ${display("inline-block")}
@@ -9608,12 +9680,12 @@ const MessageBarIntent = {
   info: "info"
 };
 
-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$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$e(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 class MessageBar extends FASTElement {
@@ -9659,9 +9731,9 @@ class MessageBar extends FASTElement {
     swapStates(this.elementInternals, prev, next, MessageBarIntent);
   }
 }
-__decorateClass$e([attr], MessageBar.prototype, "shape", 2);
-__decorateClass$e([attr], MessageBar.prototype, "layout", 2);
-__decorateClass$e([attr], MessageBar.prototype, "intent", 2);
+__decorateClass$k([attr], MessageBar.prototype, "shape", 2);
+__decorateClass$k([attr], MessageBar.prototype, "layout", 2);
+__decorateClass$k([attr], MessageBar.prototype, "intent", 2);
 
 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(${squareState}){border-radius:0}:host(${successState}){background-color:${colorPaletteGreenBackground1};border-color:${colorPaletteGreenBorder1}}:host(${warningState}){background-color:${colorPaletteDarkOrangeBackground1};border-color:${colorPaletteDarkOrangeBorder1}}:host(${errorState}){background-color:${colorPaletteRedBackground1};border-color:${colorPaletteRedBorder1}}:host(${multiLineState}){grid-template-areas:'icon body dismiss'
@@ -9683,12 +9755,12 @@ const definition$h = MessageBar.compose({
 
 definition$h.define(FluentDesignSystem.registry);
 
-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$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$d(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 class DropdownOption extends FASTElement {
@@ -9898,38 +9970,38 @@ class DropdownOption extends FASTElement {
  * @public
  */
 DropdownOption.formAssociated = true;
-__decorateClass$d([observable], DropdownOption.prototype, "active", 2);
-__decorateClass$d([attr({
+__decorateClass$j([observable], DropdownOption.prototype, "active", 2);
+__decorateClass$j([attr({
   attribute: "current-selected",
   mode: "boolean"
 })], DropdownOption.prototype, "currentSelected", 2);
-__decorateClass$d([attr({
+__decorateClass$j([attr({
   attribute: "selected",
   mode: "boolean"
 })], DropdownOption.prototype, "defaultSelected", 2);
-__decorateClass$d([observable], DropdownOption.prototype, "descriptionSlot", 2);
-__decorateClass$d([observable], DropdownOption.prototype, "disabled", 2);
-__decorateClass$d([attr({
+__decorateClass$j([observable], DropdownOption.prototype, "descriptionSlot", 2);
+__decorateClass$j([observable], DropdownOption.prototype, "disabled", 2);
+__decorateClass$j([attr({
   attribute: "disabled",
   mode: "boolean"
 })], DropdownOption.prototype, "disabledAttribute", 2);
-__decorateClass$d([attr({
+__decorateClass$j([attr({
   attribute: "form"
 })], DropdownOption.prototype, "formAttribute", 2);
-__decorateClass$d([attr({
+__decorateClass$j([attr({
   mode: "boolean"
 })], DropdownOption.prototype, "freeform", 2);
-__decorateClass$d([attr({
+__decorateClass$j([attr({
   attribute: "id"
 })], DropdownOption.prototype, "id", 2);
-__decorateClass$d([attr({
+__decorateClass$j([attr({
   attribute: "value",
   mode: "fromView"
 })], DropdownOption.prototype, "initialValue", 2);
-__decorateClass$d([observable], DropdownOption.prototype, "multiple", 2);
-__decorateClass$d([attr], DropdownOption.prototype, "name", 2);
-__decorateClass$d([observable], DropdownOption.prototype, "start", 2);
-__decorateClass$d([attr({
+__decorateClass$j([observable], DropdownOption.prototype, "multiple", 2);
+__decorateClass$j([attr], DropdownOption.prototype, "name", 2);
+__decorateClass$j([observable], DropdownOption.prototype, "start", 2);
+__decorateClass$j([attr({
   attribute: "text",
   mode: "fromView"
 })], DropdownOption.prototype, "textAttribute", 2);
@@ -9986,12 +10058,12 @@ const ProgressBarValidationState = {
   error: "error"
 };
 
-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$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$c(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 class BaseProgressBar extends FASTElement {
@@ -10049,19 +10121,28 @@ class BaseProgressBar extends FASTElement {
     return range === 0 ? 0 : Math.fround((value - min) / range * 100);
   }
 }
-__decorateClass$c([attr({
+__decorateClass$i([attr({
   attribute: "validation-state"
 })], BaseProgressBar.prototype, "validationState", 2);
-__decorateClass$c([attr({
+__decorateClass$i([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "value", 2);
-__decorateClass$c([attr({
+__decorateClass$i([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "min", 2);
-__decorateClass$c([attr({
+__decorateClass$i([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "max", 2);
-__decorateClass$c([volatile], BaseProgressBar.prototype, "percentComplete", 1);
+__decorateClass$i([volatile], BaseProgressBar.prototype, "percentComplete", 1);
+
+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;
+};
 class ProgressBar extends BaseProgressBar {
   /**
    * Handles changes to thickness attribute custom states
@@ -10080,8 +10161,8 @@ class ProgressBar extends BaseProgressBar {
     swapStates(this.elementInternals, prev, next, ProgressBarShape);
   }
 }
-__decorateClass$c([attr], ProgressBar.prototype, "thickness", 2);
-__decorateClass$c([attr], ProgressBar.prototype, "shape", 2);
+__decorateClass$h([attr], ProgressBar.prototype, "thickness", 2);
+__decorateClass$h([attr], ProgressBar.prototype, "shape", 2);
 
 const styles$f = css`
   ${display("block")}
@@ -10186,13 +10267,13 @@ function getRootActiveElement(element) {
 }
 
 const RadioGroupOrientation = Orientation;
-
-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$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$b(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 class RadioGroup extends FASTElement {
@@ -10621,19 +10702,19 @@ class RadioGroup extends FASTElement {
  * @public
  */
 RadioGroup.formAssociated = true;
-__decorateClass$b([observable], RadioGroup.prototype, "checkedIndex", 2);
-__decorateClass$b([attr({
+__decorateClass$g([observable], RadioGroup.prototype, "checkedIndex", 2);
+__decorateClass$g([attr({
   attribute: "disabled",
   mode: "boolean"
 })], RadioGroup.prototype, "disabled", 2);
-__decorateClass$b([attr({
+__decorateClass$g([attr({
   attribute: "value",
   mode: "fromView"
 })], RadioGroup.prototype, "initialValue", 2);
-__decorateClass$b([attr], RadioGroup.prototype, "name", 2);
-__decorateClass$b([attr], RadioGroup.prototype, "orientation", 2);
-__decorateClass$b([observable], RadioGroup.prototype, "radios", 2);
-__decorateClass$b([attr({
+__decorateClass$g([attr], RadioGroup.prototype, "name", 2);
+__decorateClass$g([attr], RadioGroup.prototype, "orientation", 2);
+__decorateClass$g([observable], RadioGroup.prototype, "radios", 2);
+__decorateClass$g([attr({
   mode: "boolean"
 })], RadioGroup.prototype, "required", 2);
 
@@ -10680,23 +10761,12 @@ const definition$d = Radio.compose({
 
 definition$d.define(FluentDesignSystem.registry);
 
-const RatingDisplayColor = {
-  neutral: "neutral",
-  brand: "brand",
-  marigold: "marigold"
-};
-const RatingDisplaySize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
-
-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$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$a(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 class BaseRatingDisplay extends FASTElement {
@@ -10762,20 +10832,40 @@ class BaseRatingDisplay extends FASTElement {
     return htmlString;
   }
 }
-__decorateClass$a([attr({
+__decorateClass$f([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "count", 2);
-__decorateClass$a([attr({
+__decorateClass$f([attr({
   attribute: "icon-view-box"
 })], BaseRatingDisplay.prototype, "iconViewBox", 2);
-__decorateClass$a([attr({
+__decorateClass$f([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "max", 2);
-__decorateClass$a([attr({
+__decorateClass$f([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "value", 2);
-__decorateClass$a([observable], BaseRatingDisplay.prototype, "slottedIcon", 2);
-__decorateClass$a([observable], BaseRatingDisplay.prototype, "customIcon", 2);
+__decorateClass$f([observable], BaseRatingDisplay.prototype, "slottedIcon", 2);
+__decorateClass$f([observable], BaseRatingDisplay.prototype, "customIcon", 2);
+
+const RatingDisplayColor = {
+  neutral: "neutral",
+  brand: "brand",
+  marigold: "marigold"
+};
+const RatingDisplaySize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+
+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 RatingDisplay extends BaseRatingDisplay {
   constructor() {
     super(...arguments);
@@ -10816,9 +10906,9 @@ class RatingDisplay extends BaseRatingDisplay {
     return (this.compact ? 1 : this.max ?? 5) * 2;
   }
 }
-__decorateClass$a([attr], RatingDisplay.prototype, "color", 2);
-__decorateClass$a([attr], RatingDisplay.prototype, "size", 2);
-__decorateClass$a([attr({
+__decorateClass$e([attr], RatingDisplay.prototype, "color", 2);
+__decorateClass$e([attr], RatingDisplay.prototype, "size", 2);
+__decorateClass$e([attr({
   mode: "boolean"
 })], RatingDisplay.prototype, "compact", 2);
 
@@ -10862,12 +10952,12 @@ function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   return pct;
 }
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(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$9(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 class Slider extends FASTElement {
@@ -11392,34 +11482,34 @@ class Slider extends FASTElement {
  * @public
  */
 Slider.formAssociated = true;
-__decorateClass$9([attr], Slider.prototype, "size", 2);
-__decorateClass$9([attr({
+__decorateClass$d([attr], Slider.prototype, "size", 2);
+__decorateClass$d([attr({
   attribute: "value",
   mode: "fromView"
 })], Slider.prototype, "initialValue", 2);
-__decorateClass$9([observable], Slider.prototype, "direction", 2);
-__decorateClass$9([observable], Slider.prototype, "isDragging", 2);
-__decorateClass$9([observable], Slider.prototype, "position", 2);
-__decorateClass$9([observable], Slider.prototype, "trackWidth", 2);
-__decorateClass$9([observable], Slider.prototype, "trackMinWidth", 2);
-__decorateClass$9([observable], Slider.prototype, "trackHeight", 2);
-__decorateClass$9([observable], Slider.prototype, "trackLeft", 2);
-__decorateClass$9([observable], Slider.prototype, "trackMinHeight", 2);
-__decorateClass$9([observable], Slider.prototype, "valueTextFormatter", 2);
-__decorateClass$9([attr({
+__decorateClass$d([observable], Slider.prototype, "direction", 2);
+__decorateClass$d([observable], Slider.prototype, "isDragging", 2);
+__decorateClass$d([observable], Slider.prototype, "position", 2);
+__decorateClass$d([observable], Slider.prototype, "trackWidth", 2);
+__decorateClass$d([observable], Slider.prototype, "trackMinWidth", 2);
+__decorateClass$d([observable], Slider.prototype, "trackHeight", 2);
+__decorateClass$d([observable], Slider.prototype, "trackLeft", 2);
+__decorateClass$d([observable], Slider.prototype, "trackMinHeight", 2);
+__decorateClass$d([observable], Slider.prototype, "valueTextFormatter", 2);
+__decorateClass$d([attr({
   mode: "boolean"
 })], Slider.prototype, "disabled", 2);
-__decorateClass$9([attr({
+__decorateClass$d([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "min", 2);
-__decorateClass$9([attr({
+__decorateClass$d([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "max", 2);
-__decorateClass$9([attr({
+__decorateClass$d([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "step", 2);
-__decorateClass$9([attr], Slider.prototype, "orientation", 2);
-__decorateClass$9([attr], Slider.prototype, "mode", 2);
+__decorateClass$d([attr], Slider.prototype, "orientation", 2);
+__decorateClass$d([attr], Slider.prototype, "mode", 2);
 
 const styles$b = css`
   ${display("inline-grid")}
@@ -11446,6 +11536,19 @@ const definition$b = Slider.compose({
 
 definition$b.define(FluentDesignSystem.registry);
 
+class BaseSpinner extends FASTElement {
+  constructor() {
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.role = "progressbar";
+  }
+}
+
 const SpinnerAppearance = {
   primary: "primary",
   inverted: "inverted"
@@ -11460,26 +11563,14 @@ const SpinnerSize = {
   huge: "huge"
 };
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(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$8(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
-class BaseSpinner extends FASTElement {
-  constructor() {
-    super();
-    /**
-     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    this.elementInternals = this.attachInternals();
-    this.elementInternals.role = "progressbar";
-  }
-}
 class Spinner extends BaseSpinner {
   /**
    * Handles changes to size attribute custom states
@@ -11498,8 +11589,8 @@ class Spinner extends BaseSpinner {
     swapStates(this.elementInternals, prev, next, SpinnerAppearance);
   }
 }
-__decorateClass$8([attr], Spinner.prototype, "size", 2);
-__decorateClass$8([attr], Spinner.prototype, "appearance", 2);
+__decorateClass$c([attr], Spinner.prototype, "size", 2);
+__decorateClass$c([attr], Spinner.prototype, "appearance", 2);
 
 const styles$a = css`
   ${display("inline-flex")}
@@ -11565,12 +11656,12 @@ const definition$8 = TabPanel.compose({
 
 definition$8.define(FluentDesignSystem.registry);
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(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$7(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 class Tab extends FASTElement {
@@ -11584,7 +11675,7 @@ class Tab extends FASTElement {
     this.$fastController.addStyles(this.styles);
   }
 }
-__decorateClass$7([attr({
+__decorateClass$b([attr({
   mode: "boolean"
 })], Tab.prototype, "disabled", 2);
 applyMixins(Tab, StartEnd);
@@ -11614,12 +11705,12 @@ const TabsAppearance = {
 };
 const TabsOrientation = Orientation;
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(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$6(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 class BaseTabs extends FASTElement {
@@ -11863,10 +11954,19 @@ class BaseTabs extends FASTElement {
     this.activeTabIndex = this.getActiveIndex();
   }
 }
-__decorateClass$6([attr], BaseTabs.prototype, "orientation", 2);
-__decorateClass$6([attr], BaseTabs.prototype, "activeid", 2);
-__decorateClass$6([observable], BaseTabs.prototype, "tabs", 2);
-__decorateClass$6([observable], BaseTabs.prototype, "tabpanels", 2);
+__decorateClass$a([attr], BaseTabs.prototype, "orientation", 2);
+__decorateClass$a([attr], BaseTabs.prototype, "activeid", 2);
+__decorateClass$a([observable], BaseTabs.prototype, "tabs", 2);
+__decorateClass$a([observable], BaseTabs.prototype, "tabpanels", 2);
+
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(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$9(target, key, result);
+  return result;
+};
 class Tabs extends BaseTabs {
   constructor() {
     super(...arguments);
@@ -11998,11 +12098,11 @@ class Tabs extends BaseTabs {
     this.setTabData();
   }
 }
-__decorateClass$6([attr], Tabs.prototype, "appearance", 2);
-__decorateClass$6([attr({
+__decorateClass$9([attr], Tabs.prototype, "appearance", 2);
+__decorateClass$9([attr({
   mode: "boolean"
 })], Tabs.prototype, "disabled", 2);
-__decorateClass$6([attr], Tabs.prototype, "size", 2);
+__decorateClass$9([attr], Tabs.prototype, "size", 2);
 applyMixins(Tabs, StartEnd);
 
 function tabsTemplate(options = {}) {
@@ -12044,12 +12144,12 @@ const TablistSize = {
 };
 const TablistOrientation = Orientation;
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(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$5(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 class BaseTablist extends FASTElement {
@@ -12065,6 +12165,7 @@ class BaseTablist extends FASTElement {
     this.orientation = TablistOrientation.horizontal;
     this.prevActiveTabIndex = 0;
     this.activeTabIndex = 0;
+    this.tabPanelMap = /* @__PURE__ */new WeakMap();
     this.change = () => {
       this.$emit("change", this.activetab);
     };
@@ -12145,6 +12246,19 @@ class BaseTablist extends FASTElement {
     if (this.$fastController.isConnected && this.tabs.length > 0) {
       this.prevActiveTabIndex = this.tabs.findIndex(item => item.id === oldValue);
       this.setTabs();
+      if (oldValue) {
+        const prevActiveTab = this.tabs[this.prevActiveTabIndex];
+        const prevActivePanel = this.tabPanelMap.get(prevActiveTab);
+        if (prevActivePanel) {
+          prevActivePanel.hidden = true;
+        }
+      }
+      if (newValue && this.activetab) {
+        const activePanel = this.tabPanelMap.get(this.activetab);
+        if (activePanel) {
+          activePanel.hidden = false;
+        }
+      }
     }
   }
   /**
@@ -12154,6 +12268,16 @@ class BaseTablist extends FASTElement {
     if (this.$fastController.isConnected && this.tabs.length > 0) {
       this.tabIds = this.getTabIds();
       this.setTabs();
+      for (const tab of this.tabs) {
+        const ariaControls = tab.getAttribute("aria-controls") ?? "";
+        const rootNode = this.getRootNode();
+        const panel = rootNode.getElementById(ariaControls);
+        if (ariaControls && panel) {
+          panel.role ?? (panel.role = "tabpanel");
+          panel.hidden = this.activeid !== tab.id;
+          this.tabPanelMap.set(tab, panel);
+        }
+      }
     }
   }
   getActiveIndex() {
@@ -12238,12 +12362,21 @@ class BaseTablist extends FASTElement {
     this.activeTabIndex = this.getActiveIndex();
   }
 }
-__decorateClass$5([attr({
+__decorateClass$8([attr({
   mode: "boolean"
 })], BaseTablist.prototype, "disabled", 2);
-__decorateClass$5([attr], BaseTablist.prototype, "orientation", 2);
-__decorateClass$5([attr], BaseTablist.prototype, "activeid", 2);
-__decorateClass$5([observable], BaseTablist.prototype, "tabs", 2);
+__decorateClass$8([attr], BaseTablist.prototype, "orientation", 2);
+__decorateClass$8([attr], BaseTablist.prototype, "activeid", 2);
+__decorateClass$8([observable], BaseTablist.prototype, "tabs", 2);
+
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(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$7(target, key, result);
+  return result;
+};
 class Tablist extends BaseTablist {
   constructor() {
     super(...arguments);
@@ -12395,8 +12528,8 @@ class Tablist extends BaseTablist {
     }
   }
 }
-__decorateClass$5([attr], Tablist.prototype, "appearance", 2);
-__decorateClass$5([attr], Tablist.prototype, "size", 2);
+__decorateClass$7([attr], Tablist.prototype, "appearance", 2);
+__decorateClass$7([attr], Tablist.prototype, "size", 2);
 
 const template$5 = html`<template role="tablist"><slot name="tab" ${slotted("tabs")}></slot></template>`;
 
@@ -12431,12 +12564,12 @@ const TextAreaResize = {
   vertical: "vertical"
 };
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(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$4(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 class BaseTextArea extends FASTElement {
@@ -12805,49 +12938,58 @@ class BaseTextArea extends FASTElement {
  * @public
  */
 BaseTextArea.formAssociated = true;
-__decorateClass$4([observable], BaseTextArea.prototype, "defaultSlottedNodes", 2);
-__decorateClass$4([observable], BaseTextArea.prototype, "labelSlottedNodes", 2);
-__decorateClass$4([attr], BaseTextArea.prototype, "autocomplete", 2);
-__decorateClass$4([attr({
+__decorateClass$6([observable], BaseTextArea.prototype, "defaultSlottedNodes", 2);
+__decorateClass$6([observable], BaseTextArea.prototype, "labelSlottedNodes", 2);
+__decorateClass$6([attr], BaseTextArea.prototype, "autocomplete", 2);
+__decorateClass$6([attr({
   attribute: "auto-resize",
   mode: "boolean"
 })], BaseTextArea.prototype, "autoResize", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   attribute: "dirname"
 })], BaseTextArea.prototype, "dirName", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   mode: "boolean"
 })], BaseTextArea.prototype, "disabled", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   attribute: "display-shadow",
   mode: "boolean"
 })], BaseTextArea.prototype, "displayShadow", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   attribute: "form"
 })], BaseTextArea.prototype, "initialForm", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   attribute: "maxlength",
   converter: nullableNumberConverter
 })], BaseTextArea.prototype, "maxLength", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   attribute: "minlength",
   converter: nullableNumberConverter
 })], BaseTextArea.prototype, "minLength", 2);
-__decorateClass$4([attr], BaseTextArea.prototype, "name", 2);
-__decorateClass$4([attr], BaseTextArea.prototype, "placeholder", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr], BaseTextArea.prototype, "name", 2);
+__decorateClass$6([attr], BaseTextArea.prototype, "placeholder", 2);
+__decorateClass$6([attr({
   attribute: "readonly",
   mode: "boolean"
 })], BaseTextArea.prototype, "readOnly", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   mode: "boolean"
 })], BaseTextArea.prototype, "required", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   mode: "fromView"
 })], BaseTextArea.prototype, "resize", 2);
-__decorateClass$4([attr({
+__decorateClass$6([attr({
   mode: "boolean"
 })], BaseTextArea.prototype, "spellcheck", 2);
+
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$5(target, key, result);
+  return result;
+};
 class TextArea extends BaseTextArea {
   constructor() {
     super(...arguments);
@@ -12913,13 +13055,13 @@ class TextArea extends BaseTextArea {
     toggleState(this.elementInternals, "display-shadow", this.displayShadow && TextAreaAppearancesForDisplayShadow.includes(this.appearance));
   }
 }
-__decorateClass$4([attr({
+__decorateClass$5([attr({
   mode: "fromView"
 })], TextArea.prototype, "appearance", 2);
-__decorateClass$4([attr({
+__decorateClass$5([attr({
   mode: "boolean"
 })], TextArea.prototype, "block", 2);
-__decorateClass$4([attr], TextArea.prototype, "size", 2);
+__decorateClass$5([attr], TextArea.prototype, "size", 2);
 
 const styles$4 = css`
   ${display("inline-block")}
@@ -12969,12 +13111,12 @@ const TextInputType = {
 };
 const ImplicitSubmissionBlockingTypes = ["date", "datetime-local", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week"];
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$3(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 class BaseTextInput extends FASTElement {
@@ -13295,56 +13437,65 @@ class BaseTextInput extends FASTElement {
  * @public
  */
 BaseTextInput.formAssociated = true;
-__decorateClass$3([attr], BaseTextInput.prototype, "autocomplete", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr], BaseTextInput.prototype, "autocomplete", 2);
+__decorateClass$4([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "autofocus", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   attribute: "current-value"
 })], BaseTextInput.prototype, "currentValue", 2);
-__decorateClass$3([observable], BaseTextInput.prototype, "defaultSlottedNodes", 2);
-__decorateClass$3([attr], BaseTextInput.prototype, "dirname", 2);
-__decorateClass$3([attr({
+__decorateClass$4([observable], BaseTextInput.prototype, "defaultSlottedNodes", 2);
+__decorateClass$4([attr], BaseTextInput.prototype, "dirname", 2);
+__decorateClass$4([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "disabled", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   attribute: "form"
 })], BaseTextInput.prototype, "formAttribute", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseTextInput.prototype, "initialValue", 2);
-__decorateClass$3([attr], BaseTextInput.prototype, "list", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr], BaseTextInput.prototype, "list", 2);
+__decorateClass$4([attr({
   converter: nullableNumberConverter
 })], BaseTextInput.prototype, "maxlength", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   converter: nullableNumberConverter
 })], BaseTextInput.prototype, "minlength", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "multiple", 2);
-__decorateClass$3([attr], BaseTextInput.prototype, "name", 2);
-__decorateClass$3([attr], BaseTextInput.prototype, "pattern", 2);
-__decorateClass$3([attr], BaseTextInput.prototype, "placeholder", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr], BaseTextInput.prototype, "name", 2);
+__decorateClass$4([attr], BaseTextInput.prototype, "pattern", 2);
+__decorateClass$4([attr], BaseTextInput.prototype, "placeholder", 2);
+__decorateClass$4([attr({
   attribute: "readonly",
   mode: "boolean"
 })], BaseTextInput.prototype, "readOnly", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "required", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   converter: nullableNumberConverter
 })], BaseTextInput.prototype, "size", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   converter: {
     fromView: value => typeof value === "string" ? ["true", ""].includes(value.trim().toLowerCase()) : null,
     toView: value => value.toString()
   }
 })], BaseTextInput.prototype, "spellcheck", 2);
-__decorateClass$3([attr], BaseTextInput.prototype, "type", 2);
-__decorateClass$3([observable], BaseTextInput.prototype, "controlLabel", 2);
+__decorateClass$4([attr], BaseTextInput.prototype, "type", 2);
+__decorateClass$4([observable], BaseTextInput.prototype, "controlLabel", 2);
+
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(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$3(target, key, result);
+  return result;
+};
 class TextInput extends BaseTextInput {
   /**
    * Handles changes to appearance attribute custom states