@fluentui/web-components 3.0.0-beta.71 → 3.0.0-beta.73

package/dist/web-components.js

@@ -4094,70 +4094,70 @@ function uniqueId(prefix = "") {
   return `${prefix}${uniqueIdCounter++}`;
 }
 
-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$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$w(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
 class ARIAGlobalStatesAndProperties {}
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-atomic"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-busy"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-controls"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-current"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-describedby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-details"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-disabled"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-errormessage"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-flowto"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-haspopup"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-hidden"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-invalid"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-keyshortcuts"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-label"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-labelledby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-live"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-owns"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-relevant"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$w([attr({
+__decorateClass$x([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
@@ -4343,6 +4343,9 @@ function stateSelector(state) {
   return statesMap.get(state) ?? statesMap.set(state, CustomStatesSetSupported ? `:state(${state})` : `[state--${state}]`).get(state);
 }
 function toggleState(elementInternals, state, force) {
+  if (!state) {
+    return;
+  }
   if (!CustomStatesSetSupported) {
     elementInternals.shadowRoot.host.toggleAttribute(`state--${state}`, force);
     return;
@@ -4353,13 +4356,42 @@ function toggleState(elementInternals, state, force) {
   }
   elementInternals.states.delete(state);
 }
+const matchingStateMap = /* @__PURE__ */new WeakMap();
+function hasMatchingState(States, state) {
+  if (!States || !state) {
+    return false;
+  }
+  if (matchingStateMap.has(States)) {
+    return matchingStateMap.get(States).has(state);
+  }
+  const stateSet = new Set(Object.values(States));
+  matchingStateMap.set(States, stateSet);
+  return stateSet.has(state);
+}
+function swapStates(elementInternals, prev = "", next = "", States, prefix = "") {
+  toggleState(elementInternals, `${prefix}${prev}`, false);
+  if (!States || hasMatchingState(States, next)) {
+    toggleState(elementInternals, `${prefix}${next}`, true);
+  }
+}
 
-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;
+const AccordionItemSize = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  extraLarge: "extra-large"
+};
+const AccordionItemMarkerPosition = {
+  start: "start",
+  end: "end"
+};
+
+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$v(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
 class BaseAccordionItem extends FASTElement {
@@ -4393,18 +4425,18 @@ class BaseAccordionItem extends FASTElement {
     toggleState(this.elementInternals, "disabled", next);
   }
 }
-__decorateClass$v([attr({
+__decorateClass$w([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseAccordionItem.prototype, "headinglevel", 2);
-__decorateClass$v([attr({
+__decorateClass$w([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "expanded", 2);
-__decorateClass$v([attr({
+__decorateClass$w([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "disabled", 2);
-__decorateClass$v([attr], BaseAccordionItem.prototype, "id", 2);
+__decorateClass$w([attr], BaseAccordionItem.prototype, "id", 2);
 class AccordionItem extends BaseAccordionItem {
   constructor() {
     super(...arguments);
@@ -4416,12 +4448,7 @@ class AccordionItem extends BaseAccordionItem {
    * @param next - next value
    */
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, AccordionItemSize);
   }
   /**
    * Handles changes to marker-position attribute
@@ -4429,12 +4456,7 @@ class AccordionItem extends BaseAccordionItem {
    * @param next - next value
    */
   markerPositionChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `align-${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `align-${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, AccordionItemMarkerPosition, "align-");
   }
   /**
    * Handles changes to block attribute
@@ -4445,11 +4467,11 @@ class AccordionItem extends BaseAccordionItem {
     toggleState(this.elementInternals, "block", next);
   }
 }
-__decorateClass$v([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$v([attr({
+__decorateClass$w([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$w([attr({
   attribute: "marker-position"
 })], AccordionItem.prototype, "markerPosition", 2);
-__decorateClass$v([attr({
+__decorateClass$w([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
@@ -4653,6 +4675,8 @@ const colorTransparentStroke = "var(--colorTransparentStroke)";
 const colorTransparentStrokeInteractive = "var(--colorTransparentStrokeInteractive)";
 const colorStrokeFocus1 = "var(--colorStrokeFocus1)";
 const colorStrokeFocus2 = "var(--colorStrokeFocus2)";
+const colorNeutralShadowAmbient = "var(--colorNeutralShadowAmbient)";
+const colorNeutralShadowKey = "var(--colorNeutralShadowKey)";
 const colorPaletteRedBackground1 = "var(--colorPaletteRedBackground1)";
 const colorPaletteRedBackground2 = "var(--colorPaletteRedBackground2)";
 const colorPaletteRedBackground3 = "var(--colorPaletteRedBackground3)";
@@ -4813,7 +4837,7 @@ const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 const curveEasyEase = "var(--curveEasyEase)";
 const curveLinear = "var(--curveLinear)";
 
-const styles$A = css`
+const styles$B = css`
   ${display("block")}
 
   :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer;font:inherit;grid-column:auto / span 2;grid-row:1;height:44px;outline:none;padding:0;text-align:start}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot='marker-collapsed'],[slot='marker-expanded'])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-inline-end:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.content{margin:0 ${spacingHorizontalM}}::slotted([slot='start']){display:flex;justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host(${disabledState}) .button{color:${colorNeutralForegroundDisabled}}:host(${disabledState}) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host(${expandedState}) .content{display:block}:host(${expandedState}) .default-marker-collapsed,:host(${expandedState}) ::slotted([slot='marker-collapsed']),:host(:not(${expandedState})) :is(.default-marker-expanded,.content),:host(:not(${expandedState})) ::slotted([slot='marker-expanded']){display:none}:host(${expandedState}) ::slotted([slot='marker-expanded']),:host(:not(${expandedState})) ::slotted([slot='marker-collapsed']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host(${smallState}) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${largeState}) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${extraLargeState}) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host(${alignEndState}) :slotted([slot='start']){grid-column:1 / span 1}:host(${alignEndState}) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:4 / span 1;padding-inline-start:${spacingHorizontalS};padding-inline-end:0}:host(${alignEndState}) .button{grid-column:2 / span 3}:host([block]){max-width:100%}:host(${alignEndState}) .heading{grid-template-columns:auto auto 28px;padding-inline:${spacingHorizontalM}}:host(${alignEndState}:has([slot='start'])) .heading{padding-inline:${spacingHorizontalMNudge} ${spacingHorizontalM}}:host(${blockState}${alignEndState}) .heading{grid-template-columns:auto 1fr}:host(${alignEndState}) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:5 / span 1}`;
@@ -4849,30 +4873,30 @@ const chevronDown20Filled = html.partial(`<svg
 function accordionItemTemplate(options = {}) {
   return html`<div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} ?disabled="${x => x.disabled ? "true" : void 0}" aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}"><slot name="heading"></slot></button>${startSlotTemplate(options)}<slot name="marker-expanded">${staticallyCompose(options.expandedIcon)}</slot><slot name="marker-collapsed">${staticallyCompose(options.collapsedIcon)}</slot></div><div class="content" part="content" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
 }
-const template$B = accordionItemTemplate({
+const template$C = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
 
-const definition$B = AccordionItem.compose({
+const definition$C = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$B,
-  styles: styles$A
+  template: template$C,
+  styles: styles$B
 });
 
-definition$B.define(FluentDesignSystem.registry);
+definition$C.define(FluentDesignSystem.registry);
 
 const AccordionExpandMode = {
   single: "single",
   multi: "multi"
 };
 
-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$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$u(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -5011,12 +5035,12 @@ class Accordion extends FASTElement {
     });
   }
 }
-__decorateClass$u([attr({
+__decorateClass$v([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$u([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$v([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
-const styles$z = css`
+const styles$A = css`
   ${display("flex")}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -5027,22 +5051,41 @@ function accordionTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$A = accordionTemplate();
+const template$B = accordionTemplate();
 
-const definition$A = Accordion.compose({
+const definition$B = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$A,
-  styles: styles$z
+  template: template$B,
+  styles: styles$A
 });
 
-definition$A.define(FluentDesignSystem.registry);
+definition$B.define(FluentDesignSystem.registry);
 
+const ButtonAppearance = {
+  primary: "primary",
+  outline: "outline",
+  subtle: "subtle",
+  transparent: "transparent"
+};
+const ButtonShape = {
+  circular: "circular",
+  rounded: "rounded",
+  square: "square"
+};
+const ButtonSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
 const ButtonType = {
   submit: "submit",
   reset: "reset",
   button: "button"
 };
 
+const AnchorButtonAppearance = ButtonAppearance;
+const AnchorButtonShape = ButtonShape;
+const AnchorButtonSize = ButtonSize;
 const AnchorAttributes = {
   download: "download",
   href: "href",
@@ -5054,12 +5097,12 @@ const AnchorAttributes = {
   type: "type"
 };
 
-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$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$t(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 class BaseAnchor extends FASTElement {
@@ -5167,14 +5210,14 @@ class BaseAnchor extends FASTElement {
     return proxy;
   }
 }
-__decorateClass$t([attr], BaseAnchor.prototype, "download", 2);
-__decorateClass$t([attr], BaseAnchor.prototype, "href", 2);
-__decorateClass$t([attr], BaseAnchor.prototype, "hreflang", 2);
-__decorateClass$t([attr], BaseAnchor.prototype, "ping", 2);
-__decorateClass$t([attr], BaseAnchor.prototype, "referrerpolicy", 2);
-__decorateClass$t([attr], BaseAnchor.prototype, "rel", 2);
-__decorateClass$t([attr], BaseAnchor.prototype, "target", 2);
-__decorateClass$t([attr], BaseAnchor.prototype, "type", 2);
+__decorateClass$u([attr], BaseAnchor.prototype, "download", 2);
+__decorateClass$u([attr], BaseAnchor.prototype, "href", 2);
+__decorateClass$u([attr], BaseAnchor.prototype, "hreflang", 2);
+__decorateClass$u([attr], BaseAnchor.prototype, "ping", 2);
+__decorateClass$u([attr], BaseAnchor.prototype, "referrerpolicy", 2);
+__decorateClass$u([attr], BaseAnchor.prototype, "rel", 2);
+__decorateClass$u([attr], BaseAnchor.prototype, "target", 2);
+__decorateClass$u([attr], BaseAnchor.prototype, "type", 2);
 class AnchorButton extends BaseAnchor {
   constructor() {
     super(...arguments);
@@ -5186,12 +5229,7 @@ class AnchorButton extends BaseAnchor {
    * @param next - the next state
    */
   appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, AnchorButtonAppearance);
   }
   /**
    * Handles changes to shape attribute custom states
@@ -5199,12 +5237,7 @@ class AnchorButton extends BaseAnchor {
    * @param next - the next state
    */
   shapeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, AnchorButtonShape);
   }
   /**
    * Handles changes to size attribute custom states
@@ -5212,12 +5245,7 @@ class AnchorButton extends BaseAnchor {
    * @param next - the next state
    */
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, AnchorButtonSize);
   }
   /**
    * Handles changes to icon only custom states
@@ -5228,10 +5256,10 @@ class AnchorButton extends BaseAnchor {
     toggleState(this.elementInternals, "icon", !!next);
   }
 }
-__decorateClass$t([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$t([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$t([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$t([attr({
+__decorateClass$u([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$u([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$u([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$u([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
@@ -5241,13 +5269,13 @@ const baseButtonStyles = css`
   ${display("inline-flex")}
 
   :host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){:host{transition-duration:0.01ms}}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}:is([slot='start'],::slotted([slot='start'])){margin-inline-end:var(--icon-spacing)}:is([slot='end'],::slotted([slot='end'])){flex-shrink:0}:host(:not(${iconOnlyState})) :is([slot='end'],:host(:not(${iconOnlyState}))::slotted([slot='end'])){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$y = css`
+const styles$z = css`
   ${baseButtonStyles}
 
   :host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host(${primaryState}:is(:disabled,[disabled-focusable])),:host(${primaryState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host(${outlineState}:is(:disabled,[disabled-focusable])),:host(${outlineState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host(${subtleState}:is(:disabled,[disabled-focusable])),:host(${subtleState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host(${transparentState}:is(:disabled,[disabled-focusable])),:host(${transparentState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{background-color:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight !important}:host(${primaryState}:not(:is(:hover,:focus-visible))){background-color:Highlight;color:HighlightText;forced-color-adjust:none}:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])){background-color:ButtonFace;color:GrayText;border-color:ButtonText}`));
 
-const styles$x = css`
+const styles$y = css`
   ${baseButtonStyles}
 
   ::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -5256,15 +5284,15 @@ const styles$x = css`
 function anchorTemplate$1(options = {}) {
   return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$z = anchorTemplate$1();
+const template$A = anchorTemplate$1();
 
-const definition$z = AnchorButton.compose({
+const definition$A = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$z,
-  styles: styles$x
+  template: template$A,
+  styles: styles$y
 });
 
-definition$z.define(FluentDesignSystem.registry);
+definition$A.define(FluentDesignSystem.registry);
 
 const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
 const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
@@ -5346,12 +5374,12 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-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$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$s(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 class BaseAvatar extends FASTElement {
@@ -5366,9 +5394,9 @@ class BaseAvatar extends FASTElement {
     this.elementInternals.role = "img";
   }
 }
-__decorateClass$s([attr], BaseAvatar.prototype, "name", 2);
-__decorateClass$s([attr], BaseAvatar.prototype, "initials", 2);
-__decorateClass$s([attr], BaseAvatar.prototype, "active", 2);
+__decorateClass$t([attr], BaseAvatar.prototype, "name", 2);
+__decorateClass$t([attr], BaseAvatar.prototype, "initials", 2);
+__decorateClass$t([attr], BaseAvatar.prototype, "active", 2);
 const _Avatar = class _Avatar extends BaseAvatar {
   /**
    * Handles changes to observable properties
@@ -5404,9 +5432,8 @@ const _Avatar = class _Avatar extends BaseAvatar {
   generateColor() {
     const colorful = this.color === AvatarColor.colorful;
     const prev = this.currentColor;
-    toggleState(this.elementInternals, `${prev}`, false);
     this.currentColor = colorful && this.colorId ? this.colorId : colorful ? _Avatar.colors[getHashCode(this.name ?? "") % _Avatar.colors.length] : this.color ?? AvatarColor.neutral;
-    toggleState(this.elementInternals, `${this.currentColor}`, true);
+    swapStates(this.elementInternals, prev, this.currentColor);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -5422,13 +5449,13 @@ const _Avatar = class _Avatar extends BaseAvatar {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$s([attr], _Avatar.prototype, "shape", 2);
-__decorateClass$s([attr], _Avatar.prototype, "appearance", 2);
-__decorateClass$s([attr({
+__decorateClass$t([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$t([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$t([attr({
   converter: nullableNumberConverter
 })], _Avatar.prototype, "size", 2);
-__decorateClass$s([attr], _Avatar.prototype, "color", 2);
-__decorateClass$s([attr({
+__decorateClass$t([attr], _Avatar.prototype, "color", 2);
+__decorateClass$t([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -5453,22 +5480,22 @@ const animations = {
   normalEase: curveEasyEase,
   nullEasing: curveLinear
 };
-const styles$w = css`
+const styles$x = css`
   ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host(${brandState}){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host(${darkRedState}){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host(${cranberryState}){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host(${redState}){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host(${pumpkinState}){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host(${peachState}){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host(${marigoldState}){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host(${goldState}){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host(${brassState}){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host(${brownState}){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host(${forestState}){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host(${seafoamState}){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host(${darkGreenState}){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host(${lightTealState}){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host(${tealState}){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host(${steelState}){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host(${blueState}){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host(${royalBlueState}){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host(${cornflowerState}){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host(${navyState}){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host(${lavenderState}){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host(${purpleState}){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host(${grapeState}){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host(${lilacState}){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host(${pinkState}){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host(${magentaState}){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host(${plumState}){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host(${beigeState}){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host(${minkState}){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host(${platinumState}){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host(${anchorState}){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow}),${durationSlower};transition-delay:${animations.fastEase}),${animations.nullEasing})}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
 
 const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
 function avatarTemplate() {
   return html`<slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot>`;
 }
-const template$y = avatarTemplate();
+const template$z = avatarTemplate();
 
-const definition$y = Avatar.compose({
+const definition$z = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$y,
-  styles: styles$w
+  template: template$z,
+  styles: styles$x
 });
 
-definition$y.define(FluentDesignSystem.registry);
+definition$z.define(FluentDesignSystem.registry);
 
 const BadgeAppearance = {
   filled: "filled",
@@ -5486,13 +5513,26 @@ const BadgeColor = {
   success: "success",
   warning: "warning"
 };
+const BadgeShape = {
+  circular: "circular",
+  rounded: "rounded",
+  square: "square"
+};
+const BadgeSize = {
+  tiny: "tiny",
+  extraSmall: "extra-small",
+  small: "small",
+  medium: "medium",
+  large: "large",
+  extraLarge: "extra-large"
+};
 
-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$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$r(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 class Badge extends FASTElement {
@@ -5513,12 +5553,7 @@ class Badge extends FASTElement {
    * @param next - the next state
    */
   appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, BadgeAppearance);
   }
   /**
    * Handles changes to color attribute custom states
@@ -5526,12 +5561,7 @@ class Badge extends FASTElement {
    * @param next - the next state
    */
   colorChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, BadgeColor);
   }
   /**
    * Handles changes to shape attribute custom states
@@ -5539,12 +5569,7 @@ class Badge extends FASTElement {
    * @param next - the next state
    */
   shapeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, BadgeShape);
   }
   /**
    * Handles changes to size attribute custom states
@@ -5552,18 +5577,13 @@ class Badge extends FASTElement {
    * @param next - the next state
    */
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, BadgeSize);
   }
 }
-__decorateClass$r([attr], Badge.prototype, "appearance", 2);
-__decorateClass$r([attr], Badge.prototype, "color", 2);
-__decorateClass$r([attr], Badge.prototype, "shape", 2);
-__decorateClass$r([attr], Badge.prototype, "size", 2);
+__decorateClass$s([attr], Badge.prototype, "appearance", 2);
+__decorateClass$s([attr], Badge.prototype, "color", 2);
+__decorateClass$s([attr], Badge.prototype, "shape", 2);
+__decorateClass$s([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
 const badgeBaseStyles = css.partial`
@@ -5917,7 +5937,7 @@ css.partial`
   font-weight: ${fontWeightSemibold};
 `;
 
-const styles$v = css`
+const styles$w = css`
   :host(${squareState}){border-radius:${borderRadiusNone}}:host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -5930,22 +5950,22 @@ const styles$v = css`
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$x = badgeTemplate();
+const template$y = badgeTemplate();
 
-const definition$x = Badge.compose({
+const definition$y = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$x,
-  styles: styles$v
+  template: template$y,
+  styles: styles$w
 });
 
-definition$x.define(FluentDesignSystem.registry);
+definition$y.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$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$q(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 class BaseButton extends FASTElement {
@@ -6149,44 +6169,44 @@ class BaseButton extends FASTElement {
  * @public
  */
 BaseButton.formAssociated = true;
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   mode: "boolean"
 })], BaseButton.prototype, "autofocus", 2);
-__decorateClass$q([observable], BaseButton.prototype, "defaultSlottedContent", 2);
-__decorateClass$q([attr({
+__decorateClass$r([observable], BaseButton.prototype, "defaultSlottedContent", 2);
+__decorateClass$r([attr({
   mode: "boolean"
 })], BaseButton.prototype, "disabled", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], BaseButton.prototype, "disabledFocusable", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   attribute: "tabindex",
   mode: "fromView",
   converter: nullableNumberConverter
 })], BaseButton.prototype, "tabIndex", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   attribute: "formaction"
 })], BaseButton.prototype, "formAction", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   attribute: "form"
 })], BaseButton.prototype, "formAttribute", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   attribute: "formenctype"
 })], BaseButton.prototype, "formEnctype", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   attribute: "formmethod"
 })], BaseButton.prototype, "formMethod", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], BaseButton.prototype, "formNoValidate", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr({
   attribute: "formtarget"
 })], BaseButton.prototype, "formTarget", 2);
-__decorateClass$q([attr], BaseButton.prototype, "name", 2);
-__decorateClass$q([attr], BaseButton.prototype, "type", 2);
-__decorateClass$q([attr], BaseButton.prototype, "value", 2);
+__decorateClass$r([attr], BaseButton.prototype, "name", 2);
+__decorateClass$r([attr], BaseButton.prototype, "type", 2);
+__decorateClass$r([attr], BaseButton.prototype, "value", 2);
 class Button extends BaseButton {
   constructor() {
     super(...arguments);
@@ -6198,12 +6218,7 @@ class Button extends BaseButton {
    * @param next - the next state
    */
   appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ButtonAppearance);
   }
   /**
    * Handles changes to shape attribute custom states
@@ -6211,12 +6226,7 @@ class Button extends BaseButton {
    * @param next - the next state
    */
   shapeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ButtonShape);
   }
   /**
    * Handles changes to size attribute custom states
@@ -6224,12 +6234,7 @@ class Button extends BaseButton {
    * @param next - the next state
    */
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ButtonSize);
   }
   /**
    * Handles changes to icon only custom states
@@ -6240,10 +6245,10 @@ class Button extends BaseButton {
     toggleState(this.elementInternals, "icon", next);
   }
 }
-__decorateClass$q([attr], Button.prototype, "appearance", 2);
-__decorateClass$q([attr], Button.prototype, "shape", 2);
-__decorateClass$q([attr], Button.prototype, "size", 2);
-__decorateClass$q([attr({
+__decorateClass$r([attr], Button.prototype, "appearance", 2);
+__decorateClass$r([attr], Button.prototype, "shape", 2);
+__decorateClass$r([attr], Button.prototype, "size", 2);
+__decorateClass$r([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
@@ -6252,22 +6257,31 @@ applyMixins(Button, StartEnd);
 function buttonTemplate$1(options = {}) {
   return html`<template tabindex="${x => x.disabled ? null : x.tabIndex ?? 0}" @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$w = buttonTemplate$1();
+const template$x = buttonTemplate$1();
 
-const definition$w = Button.compose({
+const definition$x = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$w,
-  styles: styles$y
+  template: template$x,
+  styles: styles$z
 });
 
-definition$w.define(FluentDesignSystem.registry);
+definition$x.define(FluentDesignSystem.registry);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+const CheckboxShape = {
+  circular: "circular",
+  square: "square"
+};
+const CheckboxSize = {
+  medium: "medium",
+  large: "large"
+};
+
+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$p(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 class BaseCheckbox extends FASTElement {
@@ -6601,27 +6615,27 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$p([attr({
+__decorateClass$q([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$p([observable], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$p([attr({
+__decorateClass$q([observable], BaseCheckbox.prototype, "disabled", 2);
+__decorateClass$q([attr({
   attribute: "disabled",
   mode: "boolean"
 })], BaseCheckbox.prototype, "disabledAttribute", 2);
-__decorateClass$p([attr({
+__decorateClass$q([attr({
   attribute: "form"
 })], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$p([attr({
+__decorateClass$q([attr({
   attribute: "checked",
   mode: "boolean"
 })], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$p([attr({
+__decorateClass$q([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$p([attr], BaseCheckbox.prototype, "name", 2);
-__decorateClass$p([attr({
+__decorateClass$q([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$q([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
 class Checkbox extends BaseCheckbox {
@@ -6644,12 +6658,7 @@ class Checkbox extends BaseCheckbox {
    * @internal
    */
   shapeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, CheckboxShape);
   }
   /**
    * Applies size states when the `size` property changes.
@@ -6659,12 +6668,7 @@ class Checkbox extends BaseCheckbox {
    * @internal
    */
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, CheckboxSize);
   }
   constructor() {
     super();
@@ -6694,11 +6698,11 @@ class Checkbox extends BaseCheckbox {
     super.toggleChecked(force);
   }
 }
-__decorateClass$p([observable], Checkbox.prototype, "indeterminate", 2);
-__decorateClass$p([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$p([attr], Checkbox.prototype, "size", 2);
+__decorateClass$q([observable], Checkbox.prototype, "indeterminate", 2);
+__decorateClass$q([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$q([attr], Checkbox.prototype, "size", 2);
 
-const styles$u = css`
+const styles$v = css`
   ${display("inline-flex")}
 
   :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host(${largeState}){--size:20px}:host(${largeState}) ::slotted([slot='checked-indicator']),:host(${largeState}) .checked-indicator{width:16px}:host(${circularState}),:host(${circularState}) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -6724,23 +6728,23 @@ const indeterminateIndicator = html.partial( /* html */
 function checkboxTemplate(options = {}) {
   return html`<template tabindex="${x => !x.disabled ? 0 : void 0}" @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot><slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot></template>`;
 }
-const template$v = checkboxTemplate({
+const template$w = checkboxTemplate({
   checkedIndicator: checkedIndicator$1,
   indeterminateIndicator
 });
 
-const definition$v = Checkbox.compose({
+const definition$w = Checkbox.compose({
   name: `${FluentDesignSystem.prefix}-checkbox`,
-  template: template$v,
-  styles: styles$u
+  template: template$w,
+  styles: styles$v
 });
 
-definition$v.define(FluentDesignSystem.registry);
+definition$w.define(FluentDesignSystem.registry);
 
 class CompoundButton extends Button {}
 
-const styles$t = css`
-  ${styles$y}
+const styles$u = css`
+  ${styles$z}
 
   :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host(${largeState}) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is(${primaryState},${primaryState}:hover,${primaryState}:active)) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is(${subtleState},${subtleState}:hover,${subtleState}:active)) ::slotted([slot='description']),:host(${transparentState}) ::slotted([slot='description']){color:${colorNeutralForeground2}}:host(${transparentState}:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance]))
     ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host(${smallState}){padding:8px;padding-bottom:10px}:host(${iconOnlyState}){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host(${iconOnlyState}${smallState}){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host(${iconOnlyState}${largeState}){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host(${largeState}){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
@@ -6748,22 +6752,49 @@ const styles$t = css`
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? null : x.tabIndex ?? 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$u = buttonTemplate();
+const template$v = buttonTemplate();
 
-const definition$u = CompoundButton.compose({
+const definition$v = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$u,
-  styles: styles$t
+  template: template$v,
+  styles: styles$u
 });
 
-definition$u.define(FluentDesignSystem.registry);
+definition$v.define(FluentDesignSystem.registry);
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+const CounterBadgeAppearance = {
+  filled: "filled",
+  ghost: "ghost"
+};
+const CounterBadgeColor = {
+  brand: "brand",
+  danger: "danger",
+  important: "important",
+  informative: "informative",
+  severe: "severe",
+  subtle: "subtle",
+  success: "success",
+  warning: "warning"
+};
+const CounterBadgeShape = {
+  circular: "circular",
+  rounded: "rounded"
+};
+const CounterBadgeSize = {
+  tiny: "tiny",
+  extraSmall: "extra-small",
+  small: "small",
+  medium: "medium",
+  large: "large",
+  extraLarge: "extra-large"
+};
+
+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$o(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 class CounterBadge extends FASTElement {
@@ -6786,12 +6817,7 @@ class CounterBadge extends FASTElement {
    * @param next - the next state
    */
   appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, CounterBadgeAppearance);
   }
   /**
    * Handles changes to color attribute custom states
@@ -6799,12 +6825,7 @@ class CounterBadge extends FASTElement {
    * @param next - the next state
    */
   colorChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, CounterBadgeColor);
   }
   /**
    * Handles changes to shape attribute custom states
@@ -6812,12 +6833,7 @@ class CounterBadge extends FASTElement {
    * @param next - the next state
    */
   shapeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, CounterBadgeShape);
   }
   /**
    * Handles changes to size attribute custom states
@@ -6825,12 +6841,7 @@ class CounterBadge extends FASTElement {
    * @param next - the next state
    */
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, CounterBadgeSize);
   }
   countChanged() {
     this.setCount();
@@ -6860,27 +6871,27 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$o([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$o([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$o([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$o([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$o([attr({
+__decorateClass$p([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$p([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$p([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$p([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$p([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$o([attr({
+__decorateClass$p([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$o([attr({
+__decorateClass$p([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$o([attr({
+__decorateClass$p([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
-const styles$s = css`
+const styles$t = css`
   :host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -6893,15 +6904,15 @@ function composeTemplate(options = {}) {
     defaultContent: html`${x => x.setCount()}`
   });
 }
-const template$t = composeTemplate();
+const template$u = composeTemplate();
 
-const definition$t = CounterBadge.compose({
+const definition$u = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$t,
-  styles: styles$s
+  template: template$u,
+  styles: styles$t
 });
 
-definition$t.define(FluentDesignSystem.registry);
+definition$u.define(FluentDesignSystem.registry);
 
 const DialogType = {
   modal: "modal",
@@ -6909,12 +6920,12 @@ const DialogType = {
   alert: "alert"
 };
 
-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$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$n(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 class Dialog extends FASTElement {
@@ -6982,35 +6993,35 @@ class Dialog extends FASTElement {
     return true;
   }
 }
-__decorateClass$n([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$n([attr({
+__decorateClass$o([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$o([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$n([attr({
+__decorateClass$o([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$n([attr], Dialog.prototype, "type", 2);
+__decorateClass$o([attr], Dialog.prototype, "type", 2);
 
-const template$s = 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>`;
+const template$t = 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>`;
 
-const styles$r = css`
+const styles$s = css`
   @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:calc(-48px + 100vh);padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     @layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}`));
 
-const definition$s = Dialog.compose({
+const definition$t = Dialog.compose({
   name: `${FluentDesignSystem.prefix}-dialog`,
-  template: template$s,
-  styles: styles$r
+  template: template$t,
+  styles: styles$s
 });
 
-definition$s.define(FluentDesignSystem.registry);
+definition$t.define(FluentDesignSystem.registry);
 
-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$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$m(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 class DialogBody extends FASTElement {
@@ -7019,7 +7030,7 @@ class DialogBody extends FASTElement {
     this.noTitleAction = false;
   }
 }
-__decorateClass$m([attr({
+__decorateClass$n([attr({
   mode: "boolean",
   attribute: "no-title-action"
 })], DialogBody.prototype, "noTitleAction", 2);
@@ -7038,20 +7049,20 @@ const dismissed16Regular = html.partial(`
       fill="currentColor"
     ></path>
   </svg>`);
-const template$r = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert} tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.parentNode?.hide()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div>`;
+const template$s = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert} tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.parentNode?.hide()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div>`;
 
-const styles$q = css`
+const styles$r = css`
   ${display("grid")}
 
   :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL};position:sticky;z-index:1}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL};position:sticky;z-index:2}:not(:has(:is([slot='title'],[slot='title-action']))) .title:not(:has(.title-action)),:not(:has([slot='action'])) .actions{display:none}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}`;
 
-const definition$r = DialogBody.compose({
+const definition$s = DialogBody.compose({
   name: `${FluentDesignSystem.prefix}-dialog-body`,
-  template: template$r,
-  styles: styles$q
+  template: template$s,
+  styles: styles$r
 });
 
-definition$r.define(FluentDesignSystem.registry);
+definition$s.define(FluentDesignSystem.registry);
 
 const DividerRole = {
   /**
@@ -7064,13 +7075,23 @@ const DividerRole = {
   presentation: "presentation"
 };
 const DividerOrientation = Orientation;
+const DividerAlignContent = {
+  center: "center",
+  start: "start",
+  end: "end"
+};
+const DividerAppearance = {
+  strong: "strong",
+  brand: "brand",
+  subtle: "subtle"
+};
 
-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$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$l(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 class BaseDivider extends FASTElement {
@@ -7113,17 +7134,12 @@ class BaseDivider extends FASTElement {
    * @internal
    */
   orientationChanged(previous, next) {
-    this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
-    if (previous) {
-      toggleState(this.elementInternals, `${previous}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next ?? null : null;
+    swapStates(this.elementInternals, previous, next, DividerOrientation);
   }
 }
-__decorateClass$l([attr], BaseDivider.prototype, "role", 2);
-__decorateClass$l([attr], BaseDivider.prototype, "orientation", 2);
+__decorateClass$m([attr], BaseDivider.prototype, "role", 2);
+__decorateClass$m([attr], BaseDivider.prototype, "orientation", 2);
 class Divider extends BaseDivider {
   /**
    * Handles changes to align-content attribute custom states
@@ -7131,12 +7147,7 @@ class Divider extends BaseDivider {
    * @param next - the next state
    */
   alignContentChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `align-${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `align-${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, DividerAlignContent, "align-");
   }
   /**
    * Handles changes to appearance attribute custom states
@@ -7144,12 +7155,7 @@ class Divider extends BaseDivider {
    * @param next - the next state
    */
   appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, DividerAppearance);
   }
   /**
    * Handles changes to inset custom states
@@ -7160,32 +7166,32 @@ class Divider extends BaseDivider {
     toggleState(this.elementInternals, "inset", next);
   }
 }
-__decorateClass$l([attr({
+__decorateClass$m([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
-__decorateClass$l([attr], Divider.prototype, "appearance", 2);
-__decorateClass$l([attr({
+__decorateClass$m([attr], Divider.prototype, "appearance", 2);
+__decorateClass$m([attr({
   mode: "boolean"
 })], Divider.prototype, "inset", 2);
 
 function dividerTemplate() {
   return html`<slot></slot>`;
 }
-const template$q = dividerTemplate();
+const template$r = dividerTemplate();
 
-const styles$p = css`
+const styles$q = css`
   ${display("flex")}
 
   :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host(${insetState}){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host(${alignStartState})::before,:host(${alignEndState})::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host(${verticalState}){height:100%;min-height:84px}:host(${verticalState}):empty{min-height:20px}:host(${verticalState}){flex-direction:column;align-items:center}:host(${verticalState}${insetState})::before{margin-top:12px}:host(${verticalState}${insetState})::after{margin-bottom:12px}:host(${verticalState}):empty::before,:host(${verticalState}):empty::after{height:10px;min-height:10px;flex-grow:0}:host(${verticalState})::before,:host(${verticalState})::after{width:${strokeWidthThin};min-height:20px;height:100%}:host(${verticalState}) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host(${verticalState}${alignStartState})::before{min-height:8px}:host(${verticalState}${alignEndState})::after{min-height:8px}:host(${strongState})::before,:host(${strongState})::after{background:${colorNeutralStroke1}}:host(${strongState}) ::slotted(*){color:${colorNeutralForeground1}}:host(${brandState})::before,:host(${brandState})::after{background:${colorBrandStroke1}}:host(${brandState}) ::slotted(*){color:${colorBrandForeground1}}:host(${subtleState})::before,:host(${subtleState})::after{background:${colorNeutralStroke3}}:host(${subtleState}) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(${strongState})::before,:host(${strongState})::after,:host(${brandState})::before,:host(${brandState})::after,:host(${subtleState})::before,:host(${subtleState})::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
 
-const definition$q = Divider.compose({
+const definition$r = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$q,
-  styles: styles$p
+  template: template$r,
+  styles: styles$q
 });
 
-definition$q.define(FluentDesignSystem.registry);
+definition$r.define(FluentDesignSystem.registry);
 
 const DrawerPosition = {
   start: "start",
@@ -7203,12 +7209,12 @@ const DrawerType = {
   inline: "inline"
 };
 
-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$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$k(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 class Drawer extends FASTElement {
@@ -7278,20 +7284,20 @@ class Drawer extends FASTElement {
     return true;
   }
 }
-__decorateClass$k([attr], Drawer.prototype, "type", 2);
-__decorateClass$k([attr({
+__decorateClass$l([attr], Drawer.prototype, "type", 2);
+__decorateClass$l([attr({
   attribute: "aria-labelledby"
 })], Drawer.prototype, "ariaLabelledby", 2);
-__decorateClass$k([attr({
+__decorateClass$l([attr({
   attribute: "aria-describedby"
 })], Drawer.prototype, "ariaDescribedby", 2);
-__decorateClass$k([attr], Drawer.prototype, "position", 2);
-__decorateClass$k([attr({
+__decorateClass$l([attr], Drawer.prototype, "position", 2);
+__decorateClass$l([attr({
   attribute: "size"
 })], Drawer.prototype, "size", 2);
-__decorateClass$k([observable], Drawer.prototype, "dialog", 2);
+__decorateClass$l([observable], Drawer.prototype, "dialog", 2);
 
-const styles$o = css`
+const styles$p = css`
   ${display("block")}
 
   :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
@@ -7299,34 +7305,34 @@ const styles$o = css`
 function drawerTemplate() {
   return html`<dialog class="dialog" part="dialog" role="${x => x.type === "modal" ? "dialog" : x.role}" aria-modal="${x => x.type === "modal" ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" size="${x => x.size}" position="${x => x.position}" type="${x => x.type}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 }
-const template$p = drawerTemplate();
+const template$q = drawerTemplate();
 
-const definition$p = Drawer.compose({
+const definition$q = Drawer.compose({
   name: `${FluentDesignSystem.prefix}-drawer`,
-  template: template$p,
-  styles: styles$o
+  template: template$q,
+  styles: styles$p
 });
 
-definition$p.define(FluentDesignSystem.registry);
+definition$q.define(FluentDesignSystem.registry);
 
 class DrawerBody extends FASTElement {}
 
-const styles$n = css`
+const styles$o = css`
   ${display("grid")}
   :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}`;
 
 function drawerBodyTemplate() {
   return html`<div class="header" part="header"><slot name="title"></slot><slot name="close"></slot></div><div class="content" part="content"><slot></slot></div><div class="footer" part="footer"><slot name="footer"></slot></div>`;
 }
-const template$o = drawerBodyTemplate();
+const template$p = drawerBodyTemplate();
 
-const definition$o = DrawerBody.compose({
+const definition$p = DrawerBody.compose({
   name: `${FluentDesignSystem.prefix}-drawer-body`,
-  template: template$o,
-  styles: styles$n
+  template: template$p,
+  styles: styles$o
 });
 
-definition$o.define(FluentDesignSystem.registry);
+definition$p.define(FluentDesignSystem.registry);
 
 const LabelPosition = {
   above: "above",
@@ -7347,12 +7353,12 @@ const ValidationFlags = {
   valid: "valid"
 };
 
-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$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$j(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 class BaseField extends FASTElement {
@@ -7520,26 +7526,26 @@ class BaseField extends FASTElement {
     }
   }
 }
-__decorateClass$j([observable], BaseField.prototype, "labelSlot", 2);
-__decorateClass$j([observable], BaseField.prototype, "messageSlot", 2);
-__decorateClass$j([observable], BaseField.prototype, "slottedInputs", 2);
-__decorateClass$j([observable], BaseField.prototype, "input", 2);
+__decorateClass$k([observable], BaseField.prototype, "labelSlot", 2);
+__decorateClass$k([observable], BaseField.prototype, "messageSlot", 2);
+__decorateClass$k([observable], BaseField.prototype, "slottedInputs", 2);
+__decorateClass$k([observable], BaseField.prototype, "input", 2);
 class Field extends BaseField {
   constructor() {
     super(...arguments);
     this.labelPosition = LabelPosition.above;
   }
 }
-__decorateClass$j([attr({
+__decorateClass$k([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
 
-const styles$m = css`
+const styles$n = css`
   ${display("inline-grid")}
 
   :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;position:relative}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host([label-position='below']:not(${hasMessageState})){grid-template-areas:'input' 'label'}::slotted([slot='label'])::after{content:'';display:block;position:absolute;inset:0}::slotted([slot='input']){grid-area:input;position:relative;z-index:1}::slotted([slot='message']){margin-block-start:${spacingVerticalXXS};grid-area:message}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
 
-const template$n = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
+const template$o = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
   property: "slottedInputs",
   attributes: true,
   attributeFilter: ["disabled", "required", "readonly"],
@@ -7551,23 +7557,35 @@ const template$n = html`<template @click="${(x, c) => x.clickHandler(c.event)}"
   filter: elements("[flag]")
 })}></slot></template>`;
 
-const definition$n = Field.compose({
+const definition$o = Field.compose({
   name: `${FluentDesignSystem.prefix}-field`,
-  template: template$n,
-  styles: styles$m,
+  template: template$o,
+  styles: styles$n,
   shadowOptions: {
     delegatesFocus: true
   }
 });
 
-definition$n.define(FluentDesignSystem.registry);
+definition$o.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;
+const ImageFit = {
+  none: "none",
+  center: "center",
+  contain: "contain",
+  cover: "cover"
+};
+const ImageShape = {
+  circular: "circular",
+  rounded: "rounded",
+  square: "square"
+};
+
+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$i(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 class Image extends FASTElement {
@@ -7610,12 +7628,7 @@ class Image extends FASTElement {
    * @param next - the next state
    */
   fitChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `fit-${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `fit-${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ImageFit, "fit-");
   }
   /**
    * Handles changes to shape attribute custom states
@@ -7623,45 +7636,50 @@ class Image extends FASTElement {
    * @param next - the next state
    */
   shapeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ImageShape);
   }
 }
-__decorateClass$i([attr({
+__decorateClass$j([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
-__decorateClass$i([attr({
+__decorateClass$j([attr({
   mode: "boolean"
 })], Image.prototype, "bordered", 2);
-__decorateClass$i([attr({
+__decorateClass$j([attr({
   mode: "boolean"
 })], Image.prototype, "shadow", 2);
-__decorateClass$i([attr], Image.prototype, "fit", 2);
-__decorateClass$i([attr], Image.prototype, "shape", 2);
+__decorateClass$j([attr], Image.prototype, "fit", 2);
+__decorateClass$j([attr], Image.prototype, "shape", 2);
 
-const template$m = html`<slot></slot>`;
+const template$n = html`<slot></slot>`;
 
-const styles$l = css`
+const styles$m = css`
   :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host(${blockState}) ::slotted(img){width:100%;height:auto}:host(${borderedState}) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host(${fitNoneState}) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host(${fitCenterState}) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host(${fitContainState}) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host(${fitCoverState}) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host(${shadowState}) ::slotted(img){box-shadow:${shadow4}}:host(${circularState}) ::slotted(img){border-radius:${borderRadiusCircular}}:host(${roundedState}) ::slotted(img){border-radius:${borderRadiusMedium}}`;
 
-const definition$m = Image.compose({
+const definition$n = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
-  template: template$m,
-  styles: styles$l
+  template: template$n,
+  styles: styles$m
 });
 
-definition$m.define(FluentDesignSystem.registry);
+definition$n.define(FluentDesignSystem.registry);
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+const LabelSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+const LabelWeight = {
+  regular: "regular",
+  semibold: "semibold"
+};
+
+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$h(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 class Label extends FASTElement {
@@ -7682,12 +7700,7 @@ class Label extends FASTElement {
    * @param next - the next state
    */
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, LabelSize);
   }
   /**
    * Handles changes to weight attribute custom states
@@ -7695,12 +7708,7 @@ class Label extends FASTElement {
    * @param next - the next state
    */
   weightChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, LabelWeight);
   }
   /**
    * Handles changes to disabled attribute custom states
@@ -7711,16 +7719,16 @@ class Label extends FASTElement {
     toggleState(this.elementInternals, "disabled", next);
   }
 }
-__decorateClass$h([attr], Label.prototype, "size", 2);
-__decorateClass$h([attr], Label.prototype, "weight", 2);
-__decorateClass$h([attr({
+__decorateClass$i([attr], Label.prototype, "size", 2);
+__decorateClass$i([attr], Label.prototype, "weight", 2);
+__decorateClass$i([attr({
   mode: "boolean"
 })], Label.prototype, "disabled", 2);
-__decorateClass$h([attr({
+__decorateClass$i([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
-const styles$k = css`
+const styles$l = css`
   ${display("inline-flex")}
 
   :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host(${smallState}){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${largeState}){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is(${largeState},${semiboldState})){font-weight:${fontWeightSemibold}}:host(${disabledState}),:host(${disabledState}) .asterisk{color:${colorNeutralForegroundDisabled}}`;
@@ -7728,22 +7736,26 @@ const styles$k = css`
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
 }
-const template$l = labelTemplate();
+const template$m = labelTemplate();
 
-const definition$l = Label.compose({
+const definition$m = Label.compose({
   name: `${FluentDesignSystem.prefix}-label`,
-  template: template$l,
-  styles: styles$k
+  template: template$m,
+  styles: styles$l
 });
 
-definition$l.define(FluentDesignSystem.registry);
+definition$m.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;
+const LinkAppearance = {
+  subtle: "subtle"
+};
+
+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$g(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 class Link extends BaseAnchor {
@@ -7757,12 +7769,7 @@ class Link extends BaseAnchor {
    * @param next - the next state
    */
   appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, LinkAppearance);
   }
   /**
    * Handles changes to inline attribute custom states
@@ -7773,12 +7780,12 @@ class Link extends BaseAnchor {
     toggleState(this.elementInternals, "inline", next);
   }
 }
-__decorateClass$g([attr], Link.prototype, "appearance", 2);
-__decorateClass$g([attr({
+__decorateClass$h([attr], Link.prototype, "appearance", 2);
+__decorateClass$h([attr({
   mode: "boolean"
 })], Link.prototype, "inline", 2);
 
-const styles$j = css`
+const styles$k = css`
   ${display("inline")}
 
   :host{position:relative;box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};overflow:inherit;text-align:start;text-decoration:none;text-decoration-thickness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host(${subtleState}:hover){color:${colorNeutralForeground2LinkHover}}:host(${subtleState}:active){color:${colorNeutralForeground2LinkPressed}}}:host(${subtleState}){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host(${inlineState}){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -7787,19 +7794,19 @@ const styles$j = css`
 function anchorTemplate() {
   return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot></slot></template>`;
 }
-const template$k = anchorTemplate();
+const template$l = anchorTemplate();
 
-const definition$k = Link.compose({
+const definition$l = Link.compose({
   name: `${FluentDesignSystem.prefix}-link`,
-  template: template$k,
-  styles: styles$j
+  template: template$l,
+  styles: styles$k
 });
 
-definition$k.define(FluentDesignSystem.registry);
+definition$l.define(FluentDesignSystem.registry);
 
 class MenuButton extends Button {}
 
-const template$j = buttonTemplate$1({
+const template$k = buttonTemplate$1({
   end: html.partial( /* html */
   `
     <svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -7808,13 +7815,13 @@ const template$j = buttonTemplate$1({
   `)
 });
 
-const definition$j = MenuButton.compose({
+const definition$k = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
-  template: template$j,
-  styles: styles$y
+  template: template$k,
+  styles: styles$z
 });
 
-definition$j.define(FluentDesignSystem.registry);
+definition$k.define(FluentDesignSystem.registry);
 
 const MenuItemRole = {
   /**
@@ -7836,12 +7843,12 @@ const MenuItemRole = {
   [MenuItemRole.menuitemradio]: "menuitemradio"
 });
 
-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$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$f(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 const menuFilter = () => value => value.nodeType === 1 && value.elementInternals.role === "menu";
@@ -8031,21 +8038,21 @@ class MenuItem extends FASTElement {
     this.elementInternals.ariaChecked = this.role !== MenuItemRole.menuitem ? `${!!this.checked}` : null;
   }
 }
-__decorateClass$f([attr({
+__decorateClass$g([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$f([attr], MenuItem.prototype, "role", 2);
-__decorateClass$f([attr({
+__decorateClass$g([attr], MenuItem.prototype, "role", 2);
+__decorateClass$g([attr({
   mode: "boolean"
 })], MenuItem.prototype, "checked", 2);
-__decorateClass$f([attr({
+__decorateClass$g([attr({
   mode: "boolean"
 })], MenuItem.prototype, "hidden", 2);
-__decorateClass$f([observable], MenuItem.prototype, "slottedSubmenu", 2);
-__decorateClass$f([observable], MenuItem.prototype, "submenu", 2);
+__decorateClass$g([observable], MenuItem.prototype, "slottedSubmenu", 2);
+__decorateClass$g([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
-const styles$i = css`
+const styles$j = css`
   ${display("grid")}
 
   :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -8054,32 +8061,30 @@ const styles$i = css`
 const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
 const chevronRight16Filled = html.partial(`<svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
 function menuItemTemplate(options = {}) {
-  return html`<template @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}" @click="${(x, c) => x.handleMenuItemClick(c.event)}" @mouseover="${(x, c) => x.handleMouseOver(c.event)}" @mouseout="${(x, c) => x.handleMouseOut(c.event)}" @toggle="${(x, c) =>
-  // @ts-expect-error - Baseline 2024
-  x.toggleHandler(c.event)}"><slot name="indicator">${staticallyCompose(options.indicator)}</slot>${startSlotTemplate(options)}<div part="content" class="content"><slot></slot></div>${endSlotTemplate(options)}<slot name="submenu-glyph">${staticallyCompose(options.submenuGlyph)}</slot><slot name="submenu" ${slotted({
+  return html`<template @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}" @click="${(x, c) => x.handleMenuItemClick(c.event)}" @mouseover="${(x, c) => x.handleMouseOver(c.event)}" @mouseout="${(x, c) => x.handleMouseOut(c.event)}" @toggle="${(x, c) => x.toggleHandler(c.event)}"><slot name="indicator">${staticallyCompose(options.indicator)}</slot>${startSlotTemplate(options)}<div part="content" class="content"><slot></slot></div>${endSlotTemplate(options)}<slot name="submenu-glyph">${staticallyCompose(options.submenuGlyph)}</slot><slot name="submenu" ${slotted({
     property: "slottedSubmenu",
     filter: menuFilter()
   })}></slot></template>`;
 }
-const template$i = menuItemTemplate({
+const template$j = menuItemTemplate({
   indicator: Checkmark16Filled,
   submenuGlyph: chevronRight16Filled
 });
 
-const definition$i = MenuItem.compose({
+const definition$j = MenuItem.compose({
   name: `${FluentDesignSystem.prefix}-menu-item`,
-  template: template$i,
-  styles: styles$i
+  template: template$j,
+  styles: styles$j
 });
 
-definition$i.define(FluentDesignSystem.registry);
+definition$j.define(FluentDesignSystem.registry);
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$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$e(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 const _MenuList = class _MenuList extends FASTElement {
@@ -8295,10 +8300,10 @@ const _MenuList = class _MenuList extends FASTElement {
   }
 };
 _MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$e([observable], _MenuList.prototype, "items", 2);
+__decorateClass$f([observable], _MenuList.prototype, "items", 2);
 let MenuList = _MenuList;
 
-const styles$h = css`
+const styles$i = css`
   ${display("flex")}
 
   :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:4px;row-gap:2px}`;
@@ -8306,22 +8311,22 @@ const styles$h = css`
 function menuTemplate$1() {
   return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot ${slotted("items")}></slot></template>`;
 }
-const template$h = menuTemplate$1();
+const template$i = menuTemplate$1();
 
-const definition$h = MenuList.compose({
+const definition$i = MenuList.compose({
   name: `${FluentDesignSystem.prefix}-menu-list`,
-  template: template$h,
-  styles: styles$h
+  template: template$i,
+  styles: styles$i
 });
 
-definition$h.define(FluentDesignSystem.registry);
+definition$i.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$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$d(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 class Menu extends FASTElement {
@@ -8601,30 +8606,30 @@ class Menu extends FASTElement {
     }
   }
 }
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   attribute: "open-on-hover",
   mode: "boolean"
 })], Menu.prototype, "openOnHover", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   attribute: "open-on-context",
   mode: "boolean"
 })], Menu.prototype, "openOnContext", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   attribute: "close-on-scroll",
   mode: "boolean"
 })], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   attribute: "persist-on-item-click",
   mode: "boolean"
 })], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   mode: "boolean"
 })], Menu.prototype, "split", 2);
-__decorateClass$d([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$d([observable], Menu.prototype, "slottedTriggers", 2);
-__decorateClass$d([observable], Menu.prototype, "primaryAction", 2);
+__decorateClass$e([observable], Menu.prototype, "slottedMenuList", 2);
+__decorateClass$e([observable], Menu.prototype, "slottedTriggers", 2);
+__decorateClass$e([observable], Menu.prototype, "primaryAction", 2);
 
-const styles$g = css`
+const styles$h = css`
   ${display("inline-block")}
 
   ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-block;position:absolute;z-index:1}:host([split]) ::slotted([popover]){position-area:block-end span-inline-start}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}:host([split]){display:inline-flex}:host([split]) ::slotted([slot='primary-action']){border-inline-end:${strokeWidthThin} solid ${colorNeutralStroke1};border-start-end-radius:0;border-end-end-radius:0}:host([split]) ::slotted([slot='primary-action']:focus-visible){z-index:1}:host([split]) ::slotted([slot='primary-action'][appearance='primary']){border-inline-end:${strokeWidthThin} solid white}:host([split]) ::slotted([slot='trigger']){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;
@@ -8638,22 +8643,37 @@ function menuTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$g = menuTemplate();
+const template$h = menuTemplate();
 
-const definition$g = Menu.compose({
+const definition$h = Menu.compose({
   name: `${FluentDesignSystem.prefix}-menu`,
-  template: template$g,
-  styles: styles$g
+  template: template$h,
+  styles: styles$h
 });
 
-definition$g.define(FluentDesignSystem.registry);
+definition$h.define(FluentDesignSystem.registry);
 
-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;
+const MessageBarLayout = {
+  multiline: "multiline",
+  singleline: "singleline"
+};
+const MessageBarShape = {
+  rounded: "rounded",
+  square: "square"
+};
+const MessageBarIntent = {
+  success: "success",
+  warning: "warning",
+  error: "error",
+  info: "info"
+};
+
+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$c(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 class MessageBar extends FASTElement {
@@ -8680,25 +8700,15 @@ class MessageBar extends FASTElement {
    * @param next - the next state
    */
   shapeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, MessageBarShape);
   }
   /**
    * Handles changes to the layout attribute custom states
    * @param prev - the previous state
    * @param next - the next state
-   */
-  layoutChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+   */
+  layoutChanged(prev, next) {
+    swapStates(this.elementInternals, prev, next, MessageBarLayout);
   }
   /**
    * Handles changes to the intent attribute custom states
@@ -8706,44 +8716,53 @@ class MessageBar extends FASTElement {
    * @param next - the next state
    */
   intentChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, MessageBarIntent);
   }
 }
-__decorateClass$c([attr], MessageBar.prototype, "shape", 2);
-__decorateClass$c([attr], MessageBar.prototype, "layout", 2);
-__decorateClass$c([attr], MessageBar.prototype, "intent", 2);
+__decorateClass$d([attr], MessageBar.prototype, "shape", 2);
+__decorateClass$d([attr], MessageBar.prototype, "layout", 2);
+__decorateClass$d([attr], MessageBar.prototype, "intent", 2);
 
-const styles$f = css`
+const styles$g = 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'
       'actions actions actions';grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr;padding-block:${spacingVerticalMNudge};padding-inline:${spacingHorizontalM}}.content{grid-area:body;max-width:520px;padding-block:${spacingVerticalMNudge};padding-inline:0}:host(${multiLineState}) .content{padding:0}::slotted([slot='icon']){display:flex;grid-area:icon;flex-direction:column;align-items:center;color:${colorNeutralForeground3};margin-inline-end:${spacingHorizontalS}}:host(${multiLineState}) ::slotted([slot='icon']){align-items:start;height:100%}::slotted([slot='dismiss']){grid-area:dismiss}.actions{grid-area:actions;display:flex;justify-self:end;margin-inline-end:${spacingHorizontalS};gap:${spacingHorizontalS}}:host(${multiLineState}) .actions{margin-block-start:${spacingVerticalMNudge};margin-inline-end:0}:host(${multiLineState}) ::slotted([slot='dismiss']){align-items:start;height:100%;padding-block-start:${spacingVerticalS}}::slotted(*){font-size:inherit}`;
 
 function messageBarTemplate() {
   return html`<slot name="icon"></slot><div class="content"><slot></slot></div><div class="actions"><slot name="actions"></slot></div><slot name="dismiss"></slot>`;
 }
-const template$f = messageBarTemplate();
+const template$g = messageBarTemplate();
 
-const definition$f = MessageBar.compose({
+const definition$g = MessageBar.compose({
   name: `${FluentDesignSystem.prefix}-message-bar`,
-  template: template$f,
-  styles: styles$f,
+  template: template$g,
+  styles: styles$g,
   shadowOptions: {
     mode: FluentDesignSystem.shadowRootMode
   }
 });
 
-definition$f.define(FluentDesignSystem.registry);
+definition$g.define(FluentDesignSystem.registry);
 
-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;
+const ProgressBarThickness = {
+  medium: "medium",
+  large: "large"
+};
+const ProgressBarShape = {
+  rounded: "rounded",
+  square: "square"
+};
+const ProgressBarValidationState = {
+  success: "success",
+  warning: "warning",
+  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;
   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$c(target, key, result);
   return result;
 };
 class BaseProgressBar extends FASTElement {
@@ -8764,12 +8783,7 @@ class BaseProgressBar extends FASTElement {
    * @param next - the next state
    */
   validationStateChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ProgressBarValidationState);
   }
   /**
    * Updates the percent complete when the `value` property changes.
@@ -8806,19 +8820,19 @@ class BaseProgressBar extends FASTElement {
     return range === 0 ? 0 : Math.fround((value - min) / range * 100);
   }
 }
-__decorateClass$b([attr({
+__decorateClass$c([attr({
   attribute: "validation-state"
 })], BaseProgressBar.prototype, "validationState", 2);
-__decorateClass$b([attr({
+__decorateClass$c([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "value", 2);
-__decorateClass$b([attr({
+__decorateClass$c([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "min", 2);
-__decorateClass$b([attr({
+__decorateClass$c([attr({
   converter: nullableNumberConverter
 })], BaseProgressBar.prototype, "max", 2);
-__decorateClass$b([volatile], BaseProgressBar.prototype, "percentComplete", 1);
+__decorateClass$c([volatile], BaseProgressBar.prototype, "percentComplete", 1);
 class ProgressBar extends BaseProgressBar {
   /**
    * Handles changes to thickness attribute custom states
@@ -8826,12 +8840,7 @@ class ProgressBar extends BaseProgressBar {
    * @param next - the next state
    */
   thicknessChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ProgressBarThickness);
   }
   /**
    * Handles changes to shape attribute custom states
@@ -8839,18 +8848,13 @@ class ProgressBar extends BaseProgressBar {
    * @param next - the next state
    */
   shapeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, ProgressBarShape);
   }
 }
-__decorateClass$b([attr], ProgressBar.prototype, "thickness", 2);
-__decorateClass$b([attr], ProgressBar.prototype, "shape", 2);
+__decorateClass$c([attr], ProgressBar.prototype, "thickness", 2);
+__decorateClass$c([attr], ProgressBar.prototype, "shape", 2);
 
-const styles$e = css`
+const styles$f = css`
   ${display("block")}
 
   :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content}:host(${largeState}){height:4px}:host(${squareState}){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
@@ -8861,15 +8865,15 @@ const styles$e = css`
 function progressTemplate() {
   return html`<div class="indicator" part="indicator" style="${x => typeof x.value === "number" ? `width: ${x.percentComplete}%` : void 0}"></div>`;
 }
-const template$e = progressTemplate();
+const template$f = progressTemplate();
 
-const definition$e = ProgressBar.compose({
+const definition$f = ProgressBar.compose({
   name: `${FluentDesignSystem.prefix}-progress-bar`,
-  template: template$e,
-  styles: styles$e
+  template: template$f,
+  styles: styles$f
 });
 
-definition$e.define(FluentDesignSystem.registry);
+definition$f.define(FluentDesignSystem.registry);
 
 class Radio extends BaseCheckbox {
   connectedCallback() {
@@ -8955,12 +8959,12 @@ function getRootActiveElement(element) {
 
 const RadioGroupOrientation = Orientation;
 
-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$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$a(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 class RadioGroup extends FASTElement {
@@ -9383,23 +9387,23 @@ class RadioGroup extends FASTElement {
  * @public
  */
 RadioGroup.formAssociated = true;
-__decorateClass$a([observable], RadioGroup.prototype, "checkedIndex", 2);
-__decorateClass$a([attr({
+__decorateClass$b([observable], RadioGroup.prototype, "checkedIndex", 2);
+__decorateClass$b([attr({
   attribute: "disabled",
   mode: "boolean"
 })], RadioGroup.prototype, "disabled", 2);
-__decorateClass$a([attr({
+__decorateClass$b([attr({
   attribute: "value",
   mode: "fromView"
 })], RadioGroup.prototype, "initialValue", 2);
-__decorateClass$a([attr], RadioGroup.prototype, "name", 2);
-__decorateClass$a([attr], RadioGroup.prototype, "orientation", 2);
-__decorateClass$a([observable], RadioGroup.prototype, "radios", 2);
-__decorateClass$a([attr({
+__decorateClass$b([attr], RadioGroup.prototype, "name", 2);
+__decorateClass$b([attr], RadioGroup.prototype, "orientation", 2);
+__decorateClass$b([observable], RadioGroup.prototype, "radios", 2);
+__decorateClass$b([attr({
   mode: "boolean"
 })], RadioGroup.prototype, "required", 2);
 
-const styles$d = css`
+const styles$e = css`
   ${display("flex")}
 
   :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host(${disabledState}),:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}`;
@@ -9407,17 +9411,17 @@ const styles$d = css`
 function radioGroupTemplate() {
   return html`<template @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
 }
-const template$d = radioGroupTemplate();
+const template$e = radioGroupTemplate();
 
-const definition$d = RadioGroup.compose({
+const definition$e = RadioGroup.compose({
   name: `${FluentDesignSystem.prefix}-radio-group`,
-  template: template$d,
-  styles: styles$d
+  template: template$e,
+  styles: styles$e
 });
 
-definition$d.define(FluentDesignSystem.registry);
+definition$e.define(FluentDesignSystem.registry);
 
-const styles$c = css`
+const styles$d = css`
   ${display("inline-flex")}
 
   :host{--size:16px;aspect-ratio:1;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};box-sizing:border-box;position:relative;width:var(--size)}:host([size='large']){--size:20px}.checked-indicator{aspect-ratio:1;border-radius:${borderRadiusCircular};color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute;width:calc(var(--size) * 0.625)}:host(:not([slot='input']))::after{content:'' / '';position:absolute;display:block;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(${checkedState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}) .checked-indicator{background-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover) .checked-indicator{background-color:${colorCompoundBrandBackgroundHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:active) .checked-indicator{background-color:${colorCompoundBrandBackgroundPressed}}:host(:focus-visible){outline:none}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host(${checkedState}${disabledState}) .checked-indicator{background-color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -9430,24 +9434,35 @@ const checkedIndicator = html.partial( /* html */
 function radioTemplate(options = {}) {
   return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot></template>`;
 }
-const template$c = radioTemplate({
+const template$d = radioTemplate({
   checkedIndicator
 });
 
-const definition$c = Radio.compose({
+const definition$d = Radio.compose({
   name: `${FluentDesignSystem.prefix}-radio`,
-  template: template$c,
-  styles: styles$c
+  template: template$d,
+  styles: styles$d
 });
 
-definition$c.define(FluentDesignSystem.registry);
+definition$d.define(FluentDesignSystem.registry);
 
-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;
+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;
   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$a(target, key, result);
   return result;
 };
 class BaseRatingDisplay extends FASTElement {
@@ -9513,20 +9528,20 @@ class BaseRatingDisplay extends FASTElement {
     return htmlString;
   }
 }
-__decorateClass$9([attr({
+__decorateClass$a([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "count", 2);
-__decorateClass$9([attr({
+__decorateClass$a([attr({
   attribute: "icon-view-box"
 })], BaseRatingDisplay.prototype, "iconViewBox", 2);
-__decorateClass$9([attr({
+__decorateClass$a([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "max", 2);
-__decorateClass$9([attr({
+__decorateClass$a([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "value", 2);
-__decorateClass$9([observable], BaseRatingDisplay.prototype, "slottedIcon", 2);
-__decorateClass$9([observable], BaseRatingDisplay.prototype, "customIcon", 2);
+__decorateClass$a([observable], BaseRatingDisplay.prototype, "slottedIcon", 2);
+__decorateClass$a([observable], BaseRatingDisplay.prototype, "customIcon", 2);
 class RatingDisplay extends BaseRatingDisplay {
   constructor() {
     super(...arguments);
@@ -9539,8 +9554,7 @@ class RatingDisplay extends BaseRatingDisplay {
    * @param next - The next state
    */
   colorChanged(prev, next) {
-    if (prev) toggleState(this.elementInternals, prev, false);
-    if (next) toggleState(this.elementInternals, next, true);
+    swapStates(this.elementInternals, prev, next, RatingDisplayColor);
   }
   /**
    * Handles changes to the size attribute.
@@ -9549,8 +9563,7 @@ class RatingDisplay extends BaseRatingDisplay {
    * @param next - The next state
    */
   sizeChanged(prev, next) {
-    if (prev) toggleState(this.elementInternals, prev, false);
-    if (next) toggleState(this.elementInternals, next, true);
+    swapStates(this.elementInternals, prev, next, RatingDisplaySize);
   }
   /**
    * Overrides the selected value and returns 1 if compact is true.
@@ -9569,13 +9582,13 @@ class RatingDisplay extends BaseRatingDisplay {
     return (this.compact ? 1 : this.max ?? 5) * 2;
   }
 }
-__decorateClass$9([attr], RatingDisplay.prototype, "color", 2);
-__decorateClass$9([attr], RatingDisplay.prototype, "size", 2);
-__decorateClass$9([attr({
+__decorateClass$a([attr], RatingDisplay.prototype, "color", 2);
+__decorateClass$a([attr], RatingDisplay.prototype, "size", 2);
+__decorateClass$a([attr({
   mode: "boolean"
 })], RatingDisplay.prototype, "compact", 2);
 
-const styles$b = css`
+const styles$c = css`
   ${display("inline-flex")}
 
   :host{--icon-size:16px;--icon-color-filled:${colorPaletteMarigoldBackground3};--icon-color-empty:${colorPaletteMarigoldBackground2};align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host(${smallState}){--icon-size:12px}:host(${largeState}){--icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}::slotted([slot='icon']){display:none}svg{width:var(--icon-size);height:var(--icon-size);fill:var(--icon-color-filled);margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(odd){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host(${neutralState}) svg{--icon-color-filled:${colorNeutralForeground1}}:host(${brandState}) svg{--icon-color-filled:${colorBrandBackground}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:var(--icon-color-empty)}:host(${neutralState}:is([value^='-'],[value='0'])) svg,:host(${neutralState}:not([value])) svg,:host(${neutralState}) svg[selected] ~ svg{--icon-color-empty:${colorNeutralBackground1Pressed}}:host(${brandState}:is([value^='-'],[value='0'])) svg,:host(${brandState}:not([value])) svg,:host(${brandState}) svg[selected] ~ svg{--icon-color-empty:${colorBrandStroke2}}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host(${smallState}) .value-label,:host(${smallState}) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host(${largeState}) .value-label,:host(${largeState}) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host(${smallState}) .count-label::before,:host(${smallState}) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host(${largeState}) .count-label::before,:host(${largeState}) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -9588,16 +9601,20 @@ function ratingDisplayTemplate() {
     filter: elements("svg")
   })}>${star}</slot><slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
 }
-const template$b = ratingDisplayTemplate();
+const template$c = ratingDisplayTemplate();
 
-const definition$b = RatingDisplay.compose({
+const definition$c = RatingDisplay.compose({
   name: `${FluentDesignSystem.prefix}-rating-display`,
-  template: template$b,
-  styles: styles$b
+  template: template$c,
+  styles: styles$c
 });
 
-definition$b.define(FluentDesignSystem.registry);
+definition$c.define(FluentDesignSystem.registry);
 
+const SliderSize = {
+  small: "small",
+  medium: "medium"
+};
 const SliderOrientation = Orientation;
 const SliderMode = {
   singleValue: "single-value"
@@ -9611,12 +9628,12 @@ function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   return pct;
 }
 
-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$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$8(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 class Slider extends FASTElement {
@@ -9755,12 +9772,7 @@ class Slider extends FASTElement {
     return Object.freeze(Array.from(this.elementInternals.labels));
   }
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, SliderSize);
   }
   handleChange(_, propertyName) {
     switch (propertyName) {
@@ -10021,12 +10033,7 @@ class Slider extends FASTElement {
   }
   orientationChanged(prev, next) {
     this.elementInternals.ariaOrientation = next ?? Orientation.horizontal;
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, Orientation);
     if (this.$fastController.isConnected) {
       this.setSliderPosition(this.direction);
     }
@@ -10155,36 +10162,36 @@ class Slider extends FASTElement {
  * @public
  */
 Slider.formAssociated = true;
-__decorateClass$8([attr], Slider.prototype, "size", 2);
-__decorateClass$8([attr({
+__decorateClass$9([attr], Slider.prototype, "size", 2);
+__decorateClass$9([attr({
   attribute: "value",
   mode: "fromView"
 })], Slider.prototype, "initialValue", 2);
-__decorateClass$8([observable], Slider.prototype, "direction", 2);
-__decorateClass$8([observable], Slider.prototype, "isDragging", 2);
-__decorateClass$8([observable], Slider.prototype, "position", 2);
-__decorateClass$8([observable], Slider.prototype, "trackWidth", 2);
-__decorateClass$8([observable], Slider.prototype, "trackMinWidth", 2);
-__decorateClass$8([observable], Slider.prototype, "trackHeight", 2);
-__decorateClass$8([observable], Slider.prototype, "trackLeft", 2);
-__decorateClass$8([observable], Slider.prototype, "trackMinHeight", 2);
-__decorateClass$8([observable], Slider.prototype, "valueTextFormatter", 2);
-__decorateClass$8([attr({
+__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({
   mode: "boolean"
 })], Slider.prototype, "disabled", 2);
-__decorateClass$8([attr({
+__decorateClass$9([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "min", 2);
-__decorateClass$8([attr({
+__decorateClass$9([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "max", 2);
-__decorateClass$8([attr({
+__decorateClass$9([attr({
   converter: numberLikeStringConverter
 })], Slider.prototype, "step", 2);
-__decorateClass$8([attr], Slider.prototype, "orientation", 2);
-__decorateClass$8([attr], Slider.prototype, "mode", 2);
+__decorateClass$9([attr], Slider.prototype, "orientation", 2);
+__decorateClass$9([attr], Slider.prototype, "mode", 2);
 
-const styles$a = css`
+const styles$b = css`
   ${display("inline-grid")}
 
   :host{--thumb-size:20px;--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--rail-color:${colorCompoundBrandBackground};--track-color:${colorNeutralStrokeAccessible};--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;position:relative;align-items:center;justify-content:center;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:120px;min-height:32px;grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr var(--track-margin-inline)}:host(:hover){--rail-color:${colorCompoundBrandBackgroundHover}}:host(:active){--rail-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled){--rail-color:${colorNeutralForegroundDisabled};--track-color:${colorNeutralBackgroundDisabled}}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host(${smallState}){--thumb-size:16px;--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall}}:host(${verticalState}){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);min-height:120px;grid-template-rows:var(--track-margin-inline) 1fr var(--track-margin-inline);grid-template-columns:1fr var(--thumb-size) 1fr;width:unset;min-width:32px;justify-items:center}:host(:not([slot='input']):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host:after,.track{height:var(--track-size);width:100%}:host:after{background-image:linear-gradient(
@@ -10197,24 +10204,38 @@ const styles$a = css`
 function sliderTemplate(options = {}) {
   return html`<template tabindex="${x => x.disabled ? null : 0}" @pointerdown="${(x, c) => x.handlePointerDown(c.event)}"><div ${ref("track")} part="track-container" class="track" style="${x => x.position}"></div><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event)}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></template>`;
 }
-const template$a = sliderTemplate({
+const template$b = sliderTemplate({
   thumb: `<div class="thumb"></div>`
 });
 
-const definition$a = Slider.compose({
+const definition$b = Slider.compose({
   name: `${FluentDesignSystem.prefix}-slider`,
-  template: template$a,
-  styles: styles$a
+  template: template$b,
+  styles: styles$b
 });
 
-definition$a.define(FluentDesignSystem.registry);
+definition$b.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;
+const SpinnerAppearance = {
+  primary: "primary",
+  inverted: "inverted"
+};
+const SpinnerSize = {
+  tiny: "tiny",
+  extraSmall: "extra-small",
+  small: "small",
+  medium: "medium",
+  large: "large",
+  extraLarge: "extra-large",
+  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;
   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$8(target, key, result);
   return result;
 };
 class BaseSpinner extends FASTElement {
@@ -10236,12 +10257,7 @@ class Spinner extends BaseSpinner {
    * @param next - the next state
    */
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, SpinnerSize);
   }
   /**
    * Handles changes to appearance attribute custom states
@@ -10249,32 +10265,27 @@ class Spinner extends BaseSpinner {
    * @param next - the next state
    */
   appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, SpinnerAppearance);
   }
 }
-__decorateClass$7([attr], Spinner.prototype, "size", 2);
-__decorateClass$7([attr], Spinner.prototype, "appearance", 2);
+__decorateClass$8([attr], Spinner.prototype, "size", 2);
+__decorateClass$8([attr], Spinner.prototype, "appearance", 2);
 
-const styles$9 = css`
+const styles$a = css`
   ${display("inline-flex")}
 
   :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host(${tinyState}){--indicatorSize:${strokeWidthThick};--size:20px}:host(${extraSmallState}){--indicatorSize:${strokeWidthThick};--size:24px}:host(${smallState}){--indicatorSize:${strokeWidthThick};--size:28px}:host(${largeState}){--indicatorSize:${strokeWidthThicker};--size:36px}:host(${extraLargeState}){--indicatorSize:${strokeWidthThicker};--size:40px}:host(${hugeState}){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host(${invertedState}) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;inset-inline-end:50%}.end{overflow:hidden;inset-inline-start:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-inline-end-color:currentcolor}:host(${invertedState}) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-inline-end-color:Highlight}`));
 
-const template$9 = html`<slot name="indicator"><div class="background"></div><div class="progress"><div class="spinner"><div class="start"><div class="indicator"></div></div><div class="end"><div class="indicator"></div></div></div></div></slot>`;
+const template$a = html`<slot name="indicator"><div class="background"></div><div class="progress"><div class="spinner"><div class="start"><div class="indicator"></div></div><div class="end"><div class="indicator"></div></div></div></div></slot>`;
 
-const definition$9 = Spinner.compose({
+const definition$a = Spinner.compose({
   name: `${FluentDesignSystem.prefix}-spinner`,
-  template: template$9,
-  styles: styles$9
+  template: template$a,
+  styles: styles$a
 });
 
-definition$9.define(FluentDesignSystem.registry);
+definition$a.define(FluentDesignSystem.registry);
 
 class Switch extends BaseCheckbox {
   constructor() {
@@ -10286,50 +10297,50 @@ class Switch extends BaseCheckbox {
 function switchTemplate(options = {}) {
   return html`<template tabindex="${x => !x.disabled ? 0 : void 0}" @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="switch">${staticallyCompose(options.switch)}</slot></template>`;
 }
-const template$8 = switchTemplate({
+const template$9 = switchTemplate({
   switch: `<span class="checked-indicator" part="checked-indicator"></span>`
 });
 
-const styles$8 = css`
+const styles$9 = css`
   ${display("inline-flex")}
 
   :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${spacingHorizontalXXS};width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};cursor:pointer}:host(:hover){background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(:disabled),:host([readonly]){border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host(${checkedState}){background:${colorCompoundBrandBackground};border-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover){background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host(${checkedState}:active){background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host(${checkedState}:disabled){background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host(${checkedState}) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}:host(${checkedState}:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host(${checkedState}:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(${checkedState}:disabled) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{border-color:InactiveBorder}:host(${checkedState}),:host(${checkedState}:active),:host(${checkedState}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${checkedState}) .checked-indicator,:host(${checkedState}:hover) .checked-indicator,:host(${checkedState}:active) .checked-indicator{background-color:ButtonFace}`));
 
-const definition$8 = Switch.compose({
+const definition$9 = Switch.compose({
   name: `${FluentDesignSystem.prefix}-switch`,
-  template: template$8,
-  styles: styles$8
+  template: template$9,
+  styles: styles$9
 });
 
-definition$8.define(FluentDesignSystem.registry);
+definition$9.define(FluentDesignSystem.registry);
 
 class TabPanel extends FASTElement {}
 
 function tabPanelTemplate() {
   return html`<template slot="tabpanel" role="tabpanel"><slot></slot></template>`;
 }
-const template$7 = tabPanelTemplate();
+const template$8 = tabPanelTemplate();
 
-const styles$7 = css`
+const styles$8 = css`
   ${display("block")}
 
   :host{box-sizing:border-box;padding:${spacingHorizontalM} ${spacingHorizontalMNudge}}`;
 
-const definition$7 = TabPanel.compose({
+const definition$8 = TabPanel.compose({
   name: `${FluentDesignSystem.prefix}-tab-panel`,
-  template: template$7,
-  styles: styles$7
+  template: template$8,
+  styles: styles$8
 });
 
-definition$7.define(FluentDesignSystem.registry);
+definition$8.define(FluentDesignSystem.registry);
 
-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$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$6(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 class Tab extends FASTElement {
@@ -10343,7 +10354,7 @@ class Tab extends FASTElement {
     this.$fastController.addStyles(this.styles);
   }
 }
-__decorateClass$6([attr({
+__decorateClass$7([attr({
   mode: "boolean"
 })], Tab.prototype, "disabled", 2);
 applyMixins(Tab, StartEnd);
@@ -10351,21 +10362,21 @@ applyMixins(Tab, StartEnd);
 function tabTemplate(options = {}) {
   return html`<template slot="tab" role="tab" aria-disabled="${x => x.disabled}">${startSlotTemplate(options)}<span class="tab-content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$6 = tabTemplate({});
+const template$7 = tabTemplate({});
 
-const styles$6 = css`
+const styles$7 = css`
   ${display("inline-flex")}
 
   :host{position:relative;flex-direction:column;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-size:${fontSizeBase300};color:${colorNeutralForeground2};fill:currentcolor;grid-row:1;padding:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium}}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:${colorNeutralForeground1};font-weight:${fontWeightSemibold}}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:${lineHeightBase300};font-weight:${fontWeightSemibold}}:host([aria-selected='true'])::after{background-color:${colorCompoundBrandStroke};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:${colorNeutralStroke1Hover};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:${colorNeutralForegroundDisabled}}::slotted([slot='start']),::slotted([slot='end']){display:flex}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}:host([disabled]){cursor:not-allowed;fill:${colorNeutralForegroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([aria-selected='true'])::after{background-color:Highlight}`));
 
-const definition$6 = Tab.compose({
+const definition$7 = Tab.compose({
   name: `${FluentDesignSystem.prefix}-tab`,
-  template: template$6,
-  styles: styles$6
+  template: template$7,
+  styles: styles$7
 });
 
-definition$6.define(FluentDesignSystem.registry);
+definition$7.define(FluentDesignSystem.registry);
 
 const TabsAppearance = {
   subtle: "subtle",
@@ -10373,12 +10384,12 @@ const TabsAppearance = {
 };
 const TabsOrientation = 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$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$5(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 class BaseTabs extends FASTElement {
@@ -10622,10 +10633,10 @@ class BaseTabs extends FASTElement {
     this.activeTabIndex = this.getActiveIndex();
   }
 }
-__decorateClass$5([attr], BaseTabs.prototype, "orientation", 2);
-__decorateClass$5([attr], BaseTabs.prototype, "activeid", 2);
-__decorateClass$5([observable], BaseTabs.prototype, "tabs", 2);
-__decorateClass$5([observable], BaseTabs.prototype, "tabpanels", 2);
+__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);
 class Tabs extends BaseTabs {
   constructor() {
     super(...arguments);
@@ -10757,30 +10768,30 @@ class Tabs extends BaseTabs {
     this.setTabData();
   }
 }
-__decorateClass$5([attr], Tabs.prototype, "appearance", 2);
-__decorateClass$5([attr({
+__decorateClass$6([attr], Tabs.prototype, "appearance", 2);
+__decorateClass$6([attr({
   mode: "boolean"
 })], Tabs.prototype, "disabled", 2);
-__decorateClass$5([attr], Tabs.prototype, "size", 2);
+__decorateClass$6([attr], Tabs.prototype, "size", 2);
 applyMixins(Tabs, StartEnd);
 
 function tabsTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<div class="tablist" part="tablist" role="tablist"><slot name="tab" ${slotted("tabs")}></slot></div>${endSlotTemplate(options)}<div class="tabpanel" part="tabpanel"><slot name="tabpanel" ${slotted("tabpanels")}></slot></div>`;
 }
-const template$5 = tabsTemplate({});
+const template$6 = tabsTemplate({});
 
-const styles$5 = css`
+const styles$6 = css`
   ${display("grid")}
 
   :host{box-sizing:border-box;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};color:${colorNeutralForeground2};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab:hover):before{content:unset}:host ::slotted(fluent-tab){border-radius:${borderRadiusMedium}}:host ::slotted(fluent-tab[aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}.tablist{display:grid;grid-template-rows:auto auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end;box-sizing:border-box}::slotted([slot='start']),::slotted([slot='end']){display:flex;align-self:center}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host([orientation='vertical']){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host([orientation='vertical']) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host([orientation='vertical']) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host([orientation='vertical']) ::slotted([slot='end']){grid-row:3}:host([appearance='subtle']) ::slotted(fluent-tab:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted(fluent-tab:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}:host([size='small']) ::slotted(fluent-tab){font-size:${fontSizeBase300};line-height:${lineHeightBase300};padding:${spacingVerticalSNudge} ${spacingHorizontalSNudge}}:host([size='large']) ::slotted(fluent-tab){font-size:${fontSizeBase400};line-height:${lineHeightBase400};padding:${spacingVerticalL} ${spacingHorizontalMNudge}}:host ::slotted(fluent-tab[data-animate='true'])::after{transition-property:transform;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax}}:host ::slotted(fluent-tab)::after{height:${strokeWidthThicker};margin-top:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted(fluent-tab)::after{width:${strokeWidthThicker};height:unset;margin-top:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted(fluent-tab)::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;margin-top:auto}:host([orientation='vertical']) ::slotted(fluent-tab)::before{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-top:auto;transform-origin:left}:host([orientation='vertical']) ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:unset;margin-inline-end:auto;transform-origin:top;width:${strokeWidthThicker}}:host([orientation='vertical']) ::slotted(fluent-tab){align-items:flex-start;grid-column:2;padding-top:${spacingVerticalSNudge};padding-bottom:${spacingVerticalSNudge}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab){padding-top:${spacingVerticalXXS};padding-bottom:${spacingVerticalXXS}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab){padding-top:${spacingVerticalS};padding-bottom:${spacingVerticalS}}:host([size='small']) ::slotted(fluent-tab)::after,:host([size='small']) ::slotted(fluent-tab)::before,:host([size='small']) ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalSNudge};left:${spacingHorizontalSNudge}}:host ::slotted(fluent-tab)::after,:host ::slotted(fluent-tab)::before,:host ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalMNudge};left:${spacingHorizontalMNudge}}:host([size='large']) ::slotted(fluent-tab)::after,:host([size='large']) ::slotted(fluent-tab)::before,:host([size='large']) ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalMNudge};left:${spacingHorizontalMNudge}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalSNudge};bottom:${spacingVerticalSNudge}}:host([orientation='vertical']) ::slotted(fluent-tab)::after,:host([orientation='vertical']) ::slotted(fluent-tab)::before,:host([orientation='vertical']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalS};bottom:${spacingVerticalS}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalMNudge};bottom:${spacingVerticalMNudge}}`;
 
-const definition$5 = Tabs.compose({
+const definition$6 = Tabs.compose({
   name: `${FluentDesignSystem.prefix}-tabs`,
-  template: template$5,
-  styles: styles$5
+  template: template$6,
+  styles: styles$6
 });
 
-definition$5.define(FluentDesignSystem.registry);
+definition$6.define(FluentDesignSystem.registry);
 
 const isARIADisabledElement = el => {
   return el.getAttribute("aria-disabled") === "true";
@@ -10796,14 +10807,19 @@ const TablistAppearance = {
   subtle: "subtle",
   transparent: "transparent"
 };
+const TablistSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
 const TablistOrientation = Orientation;
 
-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$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$4(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 class BaseTablist extends FASTElement {
@@ -10887,12 +10903,7 @@ class BaseTablist extends FASTElement {
    */
   orientationChanged(prev, next) {
     this.elementInternals.ariaOrientation = next ?? TablistOrientation.horizontal;
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, TablistOrientation);
     if (this.$fastController.isConnected) {
       this.setTabs();
     }
@@ -10997,12 +11008,12 @@ class BaseTablist extends FASTElement {
     this.activeTabIndex = this.getActiveIndex();
   }
 }
-__decorateClass$4([attr({
+__decorateClass$5([attr({
   mode: "boolean"
 })], BaseTablist.prototype, "disabled", 2);
-__decorateClass$4([attr], BaseTablist.prototype, "orientation", 2);
-__decorateClass$4([attr], BaseTablist.prototype, "activeid", 2);
-__decorateClass$4([observable], BaseTablist.prototype, "tabs", 2);
+__decorateClass$5([attr], BaseTablist.prototype, "orientation", 2);
+__decorateClass$5([attr], BaseTablist.prototype, "activeid", 2);
+__decorateClass$5([observable], BaseTablist.prototype, "tabs", 2);
 class Tablist extends BaseTablist {
   constructor() {
     super(...arguments);
@@ -11042,23 +11053,13 @@ class Tablist extends BaseTablist {
    * @internal
    */
   appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, TablistAppearance);
   }
   /**
    * @internal
    */
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, TablistSize);
   }
   /**
    * calculateAnimationProperties
@@ -11164,24 +11165,29 @@ class Tablist extends BaseTablist {
     }
   }
 }
-__decorateClass$4([attr], Tablist.prototype, "appearance", 2);
-__decorateClass$4([attr], Tablist.prototype, "size", 2);
+__decorateClass$5([attr], Tablist.prototype, "appearance", 2);
+__decorateClass$5([attr], Tablist.prototype, "size", 2);
 
-const template$4 = html`<template role="tablist"><slot name="tab" ${slotted("tabs")}></slot></template>`;
+const template$5 = html`<template role="tablist"><slot name="tab" ${slotted("tabs")}></slot></template>`;
 
-const styles$4 = css`
+const styles$5 = css`
   ${display("flex")}
 
   :host{--tabPaddingInline:inherit;--tabPaddingBlock:inherit;--tabIndicatorInsetInline:0;--tabIndicatorInsetBlock:0;box-sizing:border-box;color:${colorNeutralForeground2};flex-direction:row}:host(${verticalState}){flex-direction:column}:host ::slotted([role='tab']){align-items:flex-start}:host ::slotted([slot='tab'][data-animate='true'])::after{transition-property:transform;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax}}:host ::slotted([slot='tab'])::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host(${verticalState}) ::slotted([slot='tab'])::after{width:${strokeWidthThicker};height:unset;margin-block-start:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted([slot='tab'])::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock);position:absolute;margin-top:auto}:host ::slotted([slot='tab'])::before{inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock)}:host ::slotted([slot='tab'][aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}:host ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left}:host(${verticalState}) ::slotted([slot='tab'])::before,:host(${verticalState}) ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host(:where(${smallState},${largeState})) ::slotted([slot='tab']){padding-inline:var(--tabPaddingInline);padding-block:var(--tabPaddingBlock)}:host(${smallState}) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalSNudge};--tabPaddingInline:${spacingHorizontalSNudge};font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host(${largeState}) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalL};--tabPaddingInline:${spacingHorizontalMNudge};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host ::slotted([slot='tab'])::after,:host ::slotted([slot='tab'])::before,:host ::slotted([slot='tab']:hover)::after{inset-inline:var(--tabIndicatorInsetInline)}:host ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host(${smallState}) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalSNudge}}:host(${largeState}) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host(${verticalState}) ::slotted([slot='tab']){padding-block:var(--tabPaddingBlock)}:host(${verticalState}) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host(${verticalState}${smallState}) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalXXS}}:host(${verticalState}${largeState}) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host(${verticalState}) ::slotted([slot='tab'])::after,:host(${verticalState}) ::slotted([slot='tab'])::before,:host(${verticalState}) ::slotted([slot='tab']:hover)::after{inset-inline:0;inset-block:var(--tabIndicatorInsetBlock)}:host(${verticalState}){--tabIndicatorInsetBlock:${spacingVerticalS}}:host(${verticalState}${smallState}){--tabIndicatorInsetBlock:${spacingVerticalSNudge}}:host(${verticalState}${largeState}){--tabIndicatorInsetBlock:${spacingVerticalMNudge}}:host(${disabledState}){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='tab']){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='tab']:after){background-color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='tab'][aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='tab']:hover):before{content:unset}:host(${subtleState}) ::slotted([slot='tab']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host(${subtleState}) ::slotted([slot='tab']:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}`;
 
-const definition$4 = Tablist.compose({
+const definition$5 = Tablist.compose({
   name: `${FluentDesignSystem.prefix}-tablist`,
-  template: template$4,
-  styles: styles$4
+  template: template$5,
+  styles: styles$5
 });
 
-definition$4.define(FluentDesignSystem.registry);
+definition$5.define(FluentDesignSystem.registry);
 
+const TextAreaSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
 const TextAreaAppearance = {
   outline: "outline",
   filledLighter: "filled-lighter",
@@ -11195,12 +11201,12 @@ const TextAreaResize = {
   vertical: "vertical"
 };
 
-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 BaseTextArea extends FASTElement {
@@ -11270,13 +11276,8 @@ class BaseTextArea extends FASTElement {
     }
   }
   resizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `resize-${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `resize-${next}`, true);
-    }
-    toggleState(this.elementInternals, `resize`, [TextAreaResize.both, TextAreaResize.horizontal, TextAreaResize.vertical].includes(this.resize));
+    swapStates(this.elementInternals, prev, next, TextAreaResize, "resize-");
+    toggleState(this.elementInternals, "resize", hasMatchingState(TextAreaResize, next) && next !== TextAreaResize.none);
   }
   /**
    * The length of the current value.
@@ -11574,47 +11575,47 @@ class BaseTextArea extends FASTElement {
  * @public
  */
 BaseTextArea.formAssociated = true;
-__decorateClass$3([observable], BaseTextArea.prototype, "defaultSlottedNodes", 2);
-__decorateClass$3([observable], BaseTextArea.prototype, "labelSlottedNodes", 2);
-__decorateClass$3([attr], BaseTextArea.prototype, "autocomplete", 2);
-__decorateClass$3([attr({
+__decorateClass$4([observable], BaseTextArea.prototype, "defaultSlottedNodes", 2);
+__decorateClass$4([observable], BaseTextArea.prototype, "labelSlottedNodes", 2);
+__decorateClass$4([attr], BaseTextArea.prototype, "autocomplete", 2);
+__decorateClass$4([attr({
   attribute: "auto-resize",
   mode: "boolean"
 })], BaseTextArea.prototype, "autoResize", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   attribute: "dirname"
 })], BaseTextArea.prototype, "dirName", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   mode: "boolean"
 })], BaseTextArea.prototype, "disabled", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   attribute: "display-shadow",
   mode: "boolean"
 })], BaseTextArea.prototype, "displayShadow", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   attribute: "form"
 })], BaseTextArea.prototype, "initialForm", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   attribute: "maxlength",
   converter: nullableNumberConverter
 })], BaseTextArea.prototype, "maxLength", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   attribute: "minlength",
   converter: nullableNumberConverter
 })], BaseTextArea.prototype, "minLength", 2);
-__decorateClass$3([attr], BaseTextArea.prototype, "name", 2);
-__decorateClass$3([attr], BaseTextArea.prototype, "placeholder", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr], BaseTextArea.prototype, "name", 2);
+__decorateClass$4([attr], BaseTextArea.prototype, "placeholder", 2);
+__decorateClass$4([attr({
   attribute: "readonly",
   mode: "boolean"
 })], BaseTextArea.prototype, "readOnly", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   mode: "boolean"
 })], BaseTextArea.prototype, "required", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   mode: "fromView"
 })], BaseTextArea.prototype, "resize", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   mode: "boolean"
 })], BaseTextArea.prototype, "spellcheck", 2);
 class TextArea extends BaseTextArea {
@@ -11630,25 +11631,18 @@ class TextArea extends BaseTextArea {
     });
   }
   appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (!next || !Array.from(Object.values(TextAreaAppearance)).includes(next)) {
-      toggleState(this.elementInternals, TextAreaAppearance.outline, true);
+    toggleState(this.elementInternals, prev, false);
+    if (hasMatchingState(TextAreaAppearance, next)) {
+      toggleState(this.elementInternals, next, true);
     } else {
-      toggleState(this.elementInternals, `${next}`, true);
+      this.appearance = TextAreaAppearance.outline;
     }
   }
   blockChanged() {
     toggleState(this.elementInternals, "block", this.block);
   }
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, TextAreaSize);
   }
   /**
    * @internal
@@ -11689,15 +11683,15 @@ class TextArea extends BaseTextArea {
     toggleState(this.elementInternals, "display-shadow", this.displayShadow && TextAreaAppearancesForDisplayShadow.includes(this.appearance));
   }
 }
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   mode: "fromView"
 })], TextArea.prototype, "appearance", 2);
-__decorateClass$3([attr({
+__decorateClass$4([attr({
   mode: "boolean"
 })], TextArea.prototype, "block", 2);
-__decorateClass$3([attr], TextArea.prototype, "size", 2);
+__decorateClass$4([attr], TextArea.prototype, "size", 2);
 
-const styles$3 = css`
+const styles$4 = css`
   ${display("inline-block")}
 
   :host{--font-size:${fontSizeBase300};--line-height:${lineHeightBase300};--padding-inline:${spacingHorizontalMNudge};--padding-block:${spacingVerticalSNudge};--min-block-size:52px;--block-size:var(--min-block-size);--inline-size:18rem;--border-width:${strokeWidthThin};--control-padding-inline:${spacingHorizontalXXS};--color:${colorNeutralForeground1};--background-color:${colorNeutralBackground1};--border-color:${colorNeutralStroke1};--border-block-end-color:${colorNeutralStrokeAccessible};--placeholder-color:${colorNeutralForeground4};--focus-indicator-color:${colorCompoundBrandStroke};--box-shadow:none;--contain-size:size;--resize:none;color:var(--color);font-family:${fontFamilyBase};font-size:var(--font-size);font-weight:${fontWeightRegular};line-height:var(--line-height);position:relative}:host(:hover){--border-color:${colorNeutralStroke1Hover};--border-block-end-color:${colorNeutralStrokeAccessibleHover}}:host(:active){--border-color:${colorNeutralStroke1Pressed};--border-block-end-color:${colorNeutralStrokeAccessiblePressed}}:host(:focus-within){outline:none}:host(${blockState}:not([hidden])){display:block}:host(${smallState}){--font-size:${fontSizeBase200};--line-height:${lineHeightBase200};--min-block-size:40px;--padding-block:${spacingVerticalXS};--padding-inline:${spacingHorizontalSNudge};--control-padding-inline:${spacingHorizontalXXS}}:host(${largeState}){--font-size:${fontSizeBase400};--line-height:${lineHeightBase400};--min-block-size:64px;--padding-block:${spacingVerticalS};--padding-inline:${spacingHorizontalM};--control-padding-inline:${spacingHorizontalSNudge}}:host(${resizeBothState}:not(:disabled)){--resize:both}:host(${resizeHorizontalState}:not(:disabled)){--resize:horizontal}:host(${resizeVerticalState}:not(:disabled)){--resize:vertical}:host(${autoResizeState}){--block-size:auto;--contain-size:inline-size}:host(${filledDarkerState}){--background-color:${colorNeutralBackground3};--border-color:var(--background-color);--border-block-end-color:var(--border-color)}:host(${filledLighterState}){--border-color:var(--background-color);--border-block-end-color:var(--border-color)}:host(${filledDarkerState}${displayShadowState}),:host(${filledLighterState}${displayShadowState}){--box-shadow:${shadow2}}:host(${userInvalidState}){--border-color:${colorPaletteRedBorder2};--border-block-end-color:${colorPaletteRedBorder2}}:host(:disabled){--color:${colorNeutralForegroundDisabled};--background-color:${colorTransparentBackground};--border-color:${colorNeutralStrokeDisabled};--border-block-end-color:var(--border-color);--box-shadow:none;--placeholder-color:${colorNeutralForegroundDisabled};cursor:no-drop;user-select:none}.root{background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-block-end-color:var(--border-block-end-color);border-radius:${borderRadiusMedium};box-sizing:border-box;box-shadow:var(--box-shadow);contain:paint layout style var(--contain-size);display:grid;grid-template:1fr / 1fr;inline-size:var(--inline-size);min-block-size:var(--min-block-size);block-size:var(--block-size);overflow:hidden;padding:var(--padding-block) var(--padding-inline);position:relative;resize:var(--resize)}:host(${blockState}) .root{inline-size:auto}.root::after{border-bottom:2px solid var(--focus-indicator-color);border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};box-sizing:border-box;clip-path:inset(calc(100% - 2px) 1px 0px);content:'';height:max(2px,${borderRadiusMedium});inset:auto -1px 0;position:absolute;transform:scaleX(0);transition-delay:${curveAccelerateMid};transition-duration:${durationUltraFast};transition-property:transform}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host([readonly]) .root::after,:host(:disabled) .root::after{content:none}label{color:var(--color);display:flex;inline-size:fit-content;padding-block-end:${spacingVerticalXS};padding-inline-end:${spacingHorizontalXS}}:host(:empty) label,label[hidden]{display:none}.auto-sizer,.control{box-sizing:border-box;font:inherit;grid-column:1 / -1;grid-row:1 / -1;letter-space:inherit;padding:0 var(--control-padding-inline)}.auto-sizer{display:none;padding-block-end:2px;pointer-events:none;visibility:hidden;white-space:pre-wrap}:host(${autoResizeState}) .auto-sizer{display:block}.control{appearance:none;background-color:transparent;border:0;color:inherit;field-sizing:content;max-block-size:100%;outline:0;resize:none;text-align:inherit}.control:disabled{cursor:inherit}.control::placeholder{color:var(--placeholder-color)}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -11712,19 +11706,30 @@ function textAreaTemplate() {
     filter: whitespaceFilter
   })}></slot></div></template>`;
 }
-const template$3 = textAreaTemplate();
+const template$4 = textAreaTemplate();
 
-const definition$3 = TextArea.compose({
+const definition$4 = TextArea.compose({
   name: `${FluentDesignSystem.prefix}-textarea`,
-  template: template$3,
-  styles: styles$3,
+  template: template$4,
+  styles: styles$4,
   shadowOptions: {
     delegatesFocus: true
   }
 });
 
-definition$3.define(FluentDesignSystem.registry);
+definition$4.define(FluentDesignSystem.registry);
 
+const TextInputControlSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+const TextInputAppearance = {
+  outline: "outline",
+  underline: "underline",
+  filledLighter: "filled-lighter",
+  filledDarker: "filled-darker"
+};
 const TextInputType = {
   email: "email",
   password: "password",
@@ -11734,12 +11739,12 @@ const TextInputType = {
 };
 const ImplicitSubmissionBlockingTypes = ["date", "datetime-local", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week"];
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+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$2(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
 class BaseTextInput extends FASTElement {
@@ -12055,53 +12060,53 @@ class BaseTextInput extends FASTElement {
  * @public
  */
 BaseTextInput.formAssociated = true;
-__decorateClass$2([attr], BaseTextInput.prototype, "autocomplete", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr], BaseTextInput.prototype, "autocomplete", 2);
+__decorateClass$3([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "autofocus", 2);
-__decorateClass$2([observable], BaseTextInput.prototype, "defaultSlottedNodes", 2);
-__decorateClass$2([attr], BaseTextInput.prototype, "dirname", 2);
-__decorateClass$2([attr({
+__decorateClass$3([observable], BaseTextInput.prototype, "defaultSlottedNodes", 2);
+__decorateClass$3([attr], BaseTextInput.prototype, "dirname", 2);
+__decorateClass$3([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "disabled", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr({
   attribute: "form"
 })], BaseTextInput.prototype, "formAttribute", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseTextInput.prototype, "initialValue", 2);
-__decorateClass$2([attr], BaseTextInput.prototype, "list", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr], BaseTextInput.prototype, "list", 2);
+__decorateClass$3([attr({
   converter: nullableNumberConverter
 })], BaseTextInput.prototype, "maxlength", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr({
   converter: nullableNumberConverter
 })], BaseTextInput.prototype, "minlength", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "multiple", 2);
-__decorateClass$2([attr], BaseTextInput.prototype, "name", 2);
-__decorateClass$2([attr], BaseTextInput.prototype, "pattern", 2);
-__decorateClass$2([attr], BaseTextInput.prototype, "placeholder", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr], BaseTextInput.prototype, "name", 2);
+__decorateClass$3([attr], BaseTextInput.prototype, "pattern", 2);
+__decorateClass$3([attr], BaseTextInput.prototype, "placeholder", 2);
+__decorateClass$3([attr({
   attribute: "readonly",
   mode: "boolean"
 })], BaseTextInput.prototype, "readOnly", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr({
   mode: "boolean"
 })], BaseTextInput.prototype, "required", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr({
   converter: nullableNumberConverter
 })], BaseTextInput.prototype, "size", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr({
   converter: {
     fromView: value => typeof value === "string" ? ["true", ""].includes(value.trim().toLowerCase()) : null,
     toView: value => value.toString()
   }
 })], BaseTextInput.prototype, "spellcheck", 2);
-__decorateClass$2([attr], BaseTextInput.prototype, "type", 2);
-__decorateClass$2([observable], BaseTextInput.prototype, "controlLabel", 2);
+__decorateClass$3([attr], BaseTextInput.prototype, "type", 2);
+__decorateClass$3([observable], BaseTextInput.prototype, "controlLabel", 2);
 class TextInput extends BaseTextInput {
   /**
    * Handles changes to appearance attribute custom states
@@ -12109,12 +12114,7 @@ class TextInput extends BaseTextInput {
    * @param next - the next state
    */
   appearanceChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, TextInputAppearance);
   }
   /**
    * Handles changes to `control-size` attribute custom states
@@ -12122,21 +12122,16 @@ class TextInput extends BaseTextInput {
    * @param next - the next state
    */
   controlSizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, TextInputControlSize);
   }
 }
-__decorateClass$2([attr], TextInput.prototype, "appearance", 2);
-__decorateClass$2([attr({
+__decorateClass$3([attr], TextInput.prototype, "appearance", 2);
+__decorateClass$3([attr({
   attribute: "control-size"
 })], TextInput.prototype, "controlSize", 2);
 applyMixins(TextInput, StartEnd);
 
-const styles$2 = css`
+const styles$3 = css`
   ${display("block")}
 
   :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(${outlineState}:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host(${smallState}) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host(${smallState}) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host(${smallState}) ::slotted([slot='start']),:host(${smallState}) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host(${largeState}) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host(${largeState}) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host(${largeState}) ::slotted([slot='start']),:host(${largeState}) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host(${underlineState}) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host(${underlineState}:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(${underlineState}:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState}:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState}[disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host(${filledLighterState}) .root,:host(${filledDarkerState}) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host(${filledLighterState}) .root{background:${colorNeutralBackground1}}:host(${filledDarkerState}) .root{background:${colorNeutralBackground3}}:host(${filledLighterState}:hover) .root,:host(${filledDarkerState}:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host(${filledLighterState}:active) .root,:host(${filledDarkerState}:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
@@ -12147,25 +12142,55 @@ function textInputTemplate(options = {}) {
     filter: whitespaceFilter
   })}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @change="${(x, c) => x.changeHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" ?autofocus="${x => x.autofocus}" autocomplete="${x => x.autocomplete}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" ?multiple="${x => x.multiple}" name="${x => x.name}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" spellcheck="${x => x.spellcheck}" type="${x => x.type}" value="${x => x.initialValue}" ${ref("control")} />${endSlotTemplate(options)}</div></template>`;
 }
-const template$2 = textInputTemplate();
+const template$3 = textInputTemplate();
 
-const definition$2 = TextInput.compose({
+const definition$3 = TextInput.compose({
   name: `${FluentDesignSystem.prefix}-text-input`,
-  template: template$2,
-  styles: styles$2,
+  template: template$3,
+  styles: styles$3,
   shadowOptions: {
     delegatesFocus: true
   }
 });
 
-definition$2.define(FluentDesignSystem.registry);
+definition$3.define(FluentDesignSystem.registry);
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+const TextSize = {
+  _100: "100",
+  _200: "200",
+  _300: "300",
+  _400: "400",
+  _500: "500",
+  _600: "600",
+  _700: "700",
+  _800: "800",
+  _900: "900",
+  _1000: "1000"
+};
+const TextFont = {
+  base: "base",
+  numeric: "numeric",
+  monospace: "monospace"
+};
+const TextWeight = {
+  medium: "medium",
+  regular: "regular",
+  semibold: "semibold",
+  bold: "bold"
+};
+const TextAlign = {
+  start: "start",
+  end: "end",
+  center: "center",
+  justify: "justify"
+};
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(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$1(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
 class Text extends FASTElement {
@@ -12190,12 +12215,7 @@ class Text extends FASTElement {
    * @param next - the next state
    */
   sizeChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, `size-${prev}`, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, `size-${next}`, true);
-    }
+    swapStates(this.elementInternals, prev, next, TextSize, "size-");
   }
   /**
    * Handles changes to font attribute custom states
@@ -12203,12 +12223,7 @@ class Text extends FASTElement {
    * @param next - the next state
    */
   fontChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, TextFont);
   }
   /**
    * Handles changes to weight attribute custom states
@@ -12216,12 +12231,7 @@ class Text extends FASTElement {
    * @param next - the next state
    */
   weightChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, TextWeight);
   }
   /**
    * Handles changes to align attribute custom states
@@ -12229,12 +12239,7 @@ class Text extends FASTElement {
    * @param next - the next state
    */
   alignChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, TextAlign);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -12266,50 +12271,50 @@ class Text extends FASTElement {
     }
   }
 }
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   mode: "boolean"
 })], Text.prototype, "nowrap", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   mode: "boolean"
 })], Text.prototype, "truncate", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   mode: "boolean"
 })], Text.prototype, "italic", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   mode: "boolean"
 })], Text.prototype, "underline", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   mode: "boolean"
 })], Text.prototype, "strikethrough", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   mode: "boolean"
 })], Text.prototype, "block", 2);
-__decorateClass$1([attr], Text.prototype, "size", 2);
-__decorateClass$1([attr], Text.prototype, "font", 2);
-__decorateClass$1([attr], Text.prototype, "weight", 2);
-__decorateClass$1([attr], Text.prototype, "align", 2);
+__decorateClass$2([attr], Text.prototype, "size", 2);
+__decorateClass$2([attr], Text.prototype, "font", 2);
+__decorateClass$2([attr], Text.prototype, "weight", 2);
+__decorateClass$2([attr], Text.prototype, "align", 2);
 
-const styles$1 = css`
+const styles$2 = css`
   ${display("inline")}
 
   :host{contain:content;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start}:host(${nowrapState}),:host(${nowrapState}) ::slotted(*){white-space:nowrap;overflow:hidden}:host(${truncateState}),:host(${truncateState}) ::slotted(*){text-overflow:ellipsis}:host(${blockState}){display:block}:host(${italicState}){font-style:italic}:host(${underlineState}){text-decoration-line:underline}:host(${strikethroughState}){text-decoration-line:line-through}:host(${underlineState}${strikethroughState}){text-decoration-line:line-through underline}:host(${size100State}){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host(${size200State}){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${size400State}){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${size500State}){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host(${size600State}){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host(${size700State}){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host(${size800State}){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host(${size900State}){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host(${size1000State}){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host(${monospaceState}){font-family:${fontFamilyMonospace}}:host(${numericState}){font-family:${fontFamilyNumeric}}:host(${mediumState}){font-weight:${fontWeightMedium}}:host(${semiboldState}){font-weight:${fontWeightSemibold}}:host(${boldState}){font-weight:${fontWeightBold}}:host(${centerState}){text-align:center}:host(${endState}){text-align:end}:host(${justifyState}){text-align:justify}::slotted(*){font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
 
-const template$1 = html`<slot></slot>`;
+const template$2 = html`<slot></slot>`;
 
-const definition$1 = Text.compose({
+const definition$2 = Text.compose({
   name: `${FluentDesignSystem.prefix}-text`,
-  template: template$1,
-  styles: styles$1
+  template: template$2,
+  styles: styles$2
 });
 
-definition$1.define(FluentDesignSystem.registry);
+definition$2.define(FluentDesignSystem.registry);
 
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(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(target, key, result);
+  if (kind && result) __defProp$1(target, key, result);
   return result;
 };
 class ToggleButton extends Button {
@@ -12356,23 +12361,212 @@ class ToggleButton extends Button {
     }
   }
 }
-__decorateClass([attr({
+__decorateClass$1([attr({
   mode: "boolean"
 })], ToggleButton.prototype, "pressed", 2);
-__decorateClass([attr({
+__decorateClass$1([attr({
   mode: "boolean"
 })], ToggleButton.prototype, "mixed", 2);
 
-const styles = css`
-  ${styles$y}
+const styles$1 = css`
+  ${styles$z}
 
   :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}${primaryState}){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}${primaryState}:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}${subtleState}){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}${subtleState}:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}${outlineState}:hover),:host(${pressedState}${transparentState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}${outlineState}:active),:host(${pressedState}${transparentState}:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}${transparentState}){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}${transparentState}:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}${transparentState}:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host(${pressedState}),:host(${pressedState}${primaryState}),:host(${pressedState}${subtleState}),:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background:SelectedItem;color:SelectedItemText}`));
 
-const template = buttonTemplate$1();
+const template$1 = buttonTemplate$1();
 
-const definition = ToggleButton.compose({
+const definition$1 = ToggleButton.compose({
   name: `${FluentDesignSystem.prefix}-toggle-button`,
+  template: template$1,
+  styles: styles$1
+});
+
+definition$1.define(FluentDesignSystem.registry);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
+  return result;
+};
+const SUPPORTS_CSS_ANCHOR_POSITIONING = CSS.supports("anchor-name: --a");
+const SUPPORTS_HTML_ANCHOR_POSITIONING = "anchor" in HTMLElement.prototype;
+class Tooltip extends FASTElement {
+  constructor() {
+    super();
+    /**
+     * The attached element internals
+     */
+    this.elementInternals = this.attachInternals();
+    this.id = uniqueId("tooltip-");
+    /**
+     * The default delay for the tooltip
+     * @internal
+     */
+    this.defaultDelay = 250;
+    this.anchor = "";
+    /**
+     * Reference to the anchor positioning style element
+     * @internal
+     */
+    this.anchorPositioningStyleElement = null;
+    /**
+     * Show the tooltip on mouse enter
+     */
+    this.mouseenterAnchorHandler = () => this.showTooltip(this.delay);
+    /**
+     * Hide the tooltip on mouse leave
+     */
+    this.mouseleaveAnchorHandler = () => this.hideTooltip(this.delay);
+    /**
+     * Show the tooltip on focus
+     */
+    this.focusAnchorHandler = () => this.showTooltip(0);
+    /**
+     * Hide the tooltip on blur
+     */
+    this.blurAnchorHandler = () => this.hideTooltip(0);
+    this.elementInternals.role = "tooltip";
+  }
+  /**
+   * Reference to the anchor element
+   * @internal
+   */
+  get anchorElement() {
+    const rootNode = this.getRootNode();
+    return (rootNode instanceof ShadowRoot ? rootNode : document).getElementById(this.anchor ?? "");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.anchorElement) {
+      return;
+    }
+    const anchorName = this.anchorElement.style.anchorName || `--${this.anchor}`;
+    const describedBy = this.anchorElement.getAttribute("aria-describedby");
+    this.anchorElement.setAttribute("aria-describedby", describedBy ? `${describedBy} ${this.id}` : this.id);
+    if (SUPPORTS_CSS_ANCHOR_POSITIONING) {
+      if (!SUPPORTS_HTML_ANCHOR_POSITIONING) {
+        this.anchorElement.style.anchorName = anchorName;
+        this.style.positionAnchor = anchorName;
+      }
+    } else {
+      if (!this.anchorPositioningStyleElement) {
+        this.anchorPositioningStyleElement = document.createElement("style");
+        document.head.append(this.anchorPositioningStyleElement);
+      }
+      let [direction, alignment] = this.positioning?.split("-") ?? [];
+      if (alignment === void 0 && (direction === "above" || direction === "below")) {
+        alignment = "centerX";
+      }
+      if (alignment === void 0 && (direction === "before" || direction === "after")) {
+        alignment = "centerY";
+      }
+      const directionCSSMap = {
+        above: `bottom: anchor(${anchorName} top);`,
+        below: `top: anchor(${anchorName} bottom);`,
+        before: `right: anchor(${anchorName} left);`,
+        after: `left: anchor(${anchorName} right);`
+      };
+      const directionCSS = directionCSSMap[direction] ?? directionCSSMap.above;
+      const alignmentCSSMap = {
+        start: `left: anchor(${anchorName} left);`,
+        end: `right: anchor(${anchorName} right);`,
+        top: `top: anchor(${anchorName} top);`,
+        bottom: `bottom: anchor(${anchorName} bottom);`,
+        centerX: `left: anchor(${anchorName} center); translate: -50% 0;`,
+        centerY: `top: anchor(${anchorName} center); translate: 0 -50%;`
+      };
+      const alignmentCSS = alignmentCSSMap[alignment] ?? alignmentCSSMap.centerX;
+      this.anchorPositioningStyleElement.textContent = `
+          #${this.anchor} {
+            anchor-name: ${anchorName};
+          }
+          #${this.id} {
+            inset: unset;
+            ${directionCSS}
+            ${alignmentCSS}
+            position: absolute;
+          }
+        `;
+      if (window.CSS_ANCHOR_POLYFILL) {
+        window.CSS_ANCHOR_POLYFILL.call({
+          element: this.anchorPositioningStyleElement
+        });
+      }
+    }
+    this.anchorElement.addEventListener("focus", this.focusAnchorHandler);
+    this.anchorElement.addEventListener("blur", this.blurAnchorHandler);
+    this.anchorElement.addEventListener("mouseenter", this.mouseenterAnchorHandler);
+    this.anchorElement.addEventListener("mouseleave", this.mouseleaveAnchorHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.anchorElement?.removeEventListener("focus", this.focusAnchorHandler);
+    this.anchorElement?.removeEventListener("blur", this.blurAnchorHandler);
+    this.anchorElement?.removeEventListener("mouseenter", this.mouseenterAnchorHandler);
+    this.anchorElement?.removeEventListener("mouseleave", this.mouseleaveAnchorHandler);
+  }
+  /**
+   * Shows the tooltip
+   * @param delay Number of milliseconds to delay showing the tooltip
+   * @internal
+   */
+  showTooltip(delay = this.defaultDelay) {
+    setTimeout(() => {
+      this.setAttribute("aria-hidden", "false");
+      this.showPopover();
+    }, delay);
+  }
+  /**
+   * Hide the tooltip
+   * @param delay Number of milliseconds to delay hiding the tooltip
+   * @internal
+   */
+  hideTooltip(delay = this.defaultDelay) {
+    setTimeout(() => {
+      if (this.matches(":hover") || this.anchorElement?.matches(":hover")) {
+        this.hideTooltip(delay);
+        return;
+      }
+      this.setAttribute("aria-hidden", "true");
+      this.hidePopover();
+    }, delay);
+  }
+}
+__decorateClass([attr], Tooltip.prototype, "id", 2);
+__decorateClass([attr({
+  converter: nullableNumberConverter
+})], Tooltip.prototype, "delay", 2);
+__decorateClass([attr], Tooltip.prototype, "positioning", 2);
+__decorateClass([attr], Tooltip.prototype, "anchor", 2);
+
+const TooltipPositioningOption = {
+  "above-start": "block-start span-inline-end",
+  above: "block-start",
+  "above-end": "block-start span-inline-start",
+  "below-start": "block-end span-inline-end",
+  below: "block-end",
+  "below-end": "block-end span-inline-start",
+  "before-top": "inline-start span-block-end",
+  before: "inline-start",
+  "before-bottom": "inline-start span-block-start",
+  "after-top": "inline-end span-block-end",
+  after: "inline-end",
+  "after-bottom": "inline-end span-block-start"
+};
+
+const styles = css`
+  ${display("inline-flex")}
+
+  :host(:not(:popover-open)){display:none}:host{--position-area:block-start;--position-try-options:flip-block;--block-offset:${spacingVerticalXS};--inline-offset:${spacingHorizontalXS};background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:1px solid ${colorTransparentStroke};box-sizing:border-box;color:${colorNeutralForeground1};display:inline-flex;filter:drop-shadow(0 0 2px ${colorNeutralShadowAmbient}) drop-shadow(0 4px 8px ${colorNeutralShadowKey});font-family:${fontFamilyBase};font-size:${fontSizeBase200};inset:unset;line-height:${lineHeightBase200};margin:unset;max-width:240px;padding:4px ${spacingHorizontalMNudge} 6px;position:absolute;position-area:var(--position-area);position-try-options:var(--position-try-options);width:auto;z-index:1}@supports (inset-area:block-start){:host{inset-area:var(--position-area);position-try-fallbacks:var(--position-try-options)}}:host(:is([positioning^='above'],[positioning^='below'],:not([positioning]))){margin-block:var(--block-offset)}:host(:is([positioning^='before'],[positioning^='after'])){margin-inline:var(--inline-offset);--position-try-options:flip-inline}:host([positioning='above-start']){--position-area:${TooltipPositioningOption["above-start"]}}:host([positioning='above']){--position-area:${TooltipPositioningOption.above}}:host([positioning='above-end']){--position-area:${TooltipPositioningOption["above-end"]}}:host([positioning='below-start']){--position-area:${TooltipPositioningOption["below-start"]}}:host([positioning='below']){--position-area:${TooltipPositioningOption.below}}:host([positioning='below-end']){--position-area:${TooltipPositioningOption.below}}:host([positioning='before-top']){--position-area:${TooltipPositioningOption["before-top"]}}:host([positioning='before']){--position-area:${TooltipPositioningOption.before}}:host([positioning='before-bottom']){--position-area:${TooltipPositioningOption["before-bottom"]}}:host([positioning='after-top']){--position-area:${TooltipPositioningOption["after-top"]}}:host([positioning='after']){--position-area:${TooltipPositioningOption.after}}:host([positioning='after-bottom']){--position-area:${TooltipPositioningOption["after-bottom"]}}`;
+
+const template = html`<template popover aria-hidden="true"><slot></slot></template>`;
+
+const definition = Tooltip.compose({
+  name: `${FluentDesignSystem.prefix}-tooltip`,
   template,
   styles
 });