@fluentui/web-components 3.0.0-beta.70 → 3.0.0-beta.72

package/dist/web-components.js

@@ -4338,7 +4338,14 @@ function applyMixins(derivedCtor, ...baseCtors) {
 }
 
 const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
+const statesMap = /* @__PURE__ */new Map();
+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;
@@ -4349,6 +4356,35 @@ 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);
+  }
+}
+
+const AccordionItemSize = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+  extraLarge: "extra-large"
+};
+const AccordionItemMarkerPosition = {
+  start: "start",
+  end: "end"
+};
 
 var __defProp$v = Object.defineProperty;
 var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
@@ -4412,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
@@ -4425,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
@@ -4450,58 +4476,126 @@ __decorateClass$v([attr({
 })], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
 
-const checkedState = css.partial`:is([state--checked], :state(checked))`;
-const disabledState = css.partial`:is([state--disabled], :state(disabled))`;
-const filledLighterState = css.partial`:is([state--filled-lighter], :state(filled-lighter))`;
-const filledDarkerState = css.partial`:is([state--filled-darker], :state(filled-darker))`;
-const ghostState = css.partial`:is([state--ghost], :state(ghost))`;
-const invertedState = css.partial`:is([state--inverted], :state(inverted))`;
-const primaryState = css.partial`:is([state--primary], :state(primary))`;
-const outlineState = css.partial`:is([state--outline], :state(outline))`;
-const strongState = css.partial`:is([state--strong], :state(strong))`;
-const subtleState = css.partial`:is([state--subtle], :state(subtle))`;
-const tintState = css.partial`:is([state--tint], :state(tint))`;
-const underlineState$1 = css.partial`:is([state--underline], :state(underline))`;
-const transparentState = css.partial`:is([state--transparent], :state(transparent))`;
-const circularState = css.partial`:is([state--circular], :state(circular))`;
-const roundedState = css.partial`:is([state--rounded], :state(rounded))`;
-const squareState = css.partial`:is([state--square], :state(square))`;
-const tinyState = css.partial`:is([state--tiny], :state(tiny))`;
-const extraSmallState = css.partial`:is([state--extra-small], :state(extra-small))`;
-const smallState = css.partial`:is([state--small], :state(small))`;
-css.partial`:is([state--medium], :state(medium))`;
-const largeState = css.partial`:is([state--large], :state(large))`;
-const extraLargeState = css.partial`:is([state--extra-large], :state(extra-large))`;
-const hugeState = css.partial`:is([state--huge], :state(huge))`;
-const alignStartState = css.partial`:is([state--align-start], :state(align-start))`;
-const alignEndState = css.partial`:is([state--align-end], :state(align-end))`;
-const insetState = css.partial`:is([state--inset], :state(inset))`;
-const iconOnlyState = css.partial`:is([state--icon], :state(icon))`;
-const pressedState = css.partial`:is([state--pressed], :state(pressed))`;
-const brandState = css.partial`:is([state--brand], :state(brand))`;
-const errorState = css.partial`:is([state--error], :state(error))`;
-const dangerState = css.partial`:is([state--danger], :state(danger))`;
-const importantState = css.partial`:is([state--important], :state(important))`;
-const informativeState = css.partial`:is([state--informative], :state(informative))`;
-css.partial`:is([state--marigold], :state(marigold))`;
-const neutralState = css.partial`:is([state--neutral], :state(neutral))`;
-const severeState = css.partial`:is([state--severe], :state(severe))`;
-const successState = css.partial`:is([state--success], :state(success))`;
-const warningState = css.partial`:is([state--warning], :state(warning))`;
-const verticalState = css.partial`:is([state--vertical], :state(vertical))`;
-css.partial`:is([state--horizontal], :state(horizontal))`;
-css.partial`:is([state--singleline], :state(singleline))`;
-const multiLineState = css.partial`:is([state--multiline], :state(multiline))`;
-const expandedState = css.partial`:is([state--expanded], :state(expanded))`;
-const blockState = css.partial`:is([state--block], :state(block))`;
-css.partial`:is([state--resize], :state(resize))`;
-const resizeHorizontalState = css.partial`:is([state--resize-horizontal], :state(resize-horizontal))`;
-const resizeVerticalState = css.partial`:is([state--resize-vertical], :state(resize-vertical))`;
-const resizeBothState = css.partial`:is([state--resize-both], :state(resize-both))`;
-const autoResizeState = css.partial`:is([state--auto-resize], :state(auto-resize))`;
-const displayShadowState = css.partial`:is([state--display-shadow], :state(display-shadow))`;
-const userInvalidState = css.partial`:is([state--user-invalid], :state(user-invalid))`;
-css.partial`:is([state--user-valid], :state(user-valid))`;
+const alignEndState = stateSelector("align-end");
+const alignStartState = stateSelector("align-start");
+const anchorState = stateSelector("anchor");
+const autoResizeState = stateSelector("auto-resize");
+const badInputState = stateSelector("bad-input");
+const beigeState = stateSelector("beige");
+const blockState = stateSelector("block");
+const blueState = stateSelector("blue");
+const boldState = stateSelector("bold");
+const borderedState = stateSelector("bordered");
+const brandState = stateSelector("brand");
+const brassState = stateSelector("brass");
+const brownState = stateSelector("brown");
+const centerState = stateSelector("center");
+const checkedState = stateSelector("checked");
+const circularState = stateSelector("circular");
+const cornflowerState = stateSelector("cornflower");
+const cranberryState = stateSelector("cranberry");
+const customErrorState = stateSelector("custom-error");
+const dangerState = stateSelector("danger");
+const darkGreenState = stateSelector("dark-green");
+const darkRedState = stateSelector("dark-red");
+const disabledState = stateSelector("disabled");
+const displayShadowState = stateSelector("display-shadow");
+const dotState = stateSelector("dot");
+const endState = stateSelector("end");
+const errorState = stateSelector("error");
+const expandedState = stateSelector("expanded");
+const extraLargeState = stateSelector("extra-large");
+const extraSmallState = stateSelector("extra-small");
+const filledDarkerState = stateSelector("filled-darker");
+const filledLighterState = stateSelector("filled-lighter");
+const fitCenterState = stateSelector("fit-center");
+const fitContainState = stateSelector("fit-contain");
+const fitCoverState = stateSelector("fit-cover");
+const fitNoneState = stateSelector("fit-none");
+const focusVisibleState = stateSelector("focus-visible");
+const forestState = stateSelector("forest");
+const ghostState = stateSelector("ghost");
+const goldState = stateSelector("gold");
+const grapeState = stateSelector("grape");
+const hasMessageState = stateSelector("has-message");
+const hugeState = stateSelector("huge");
+const iconOnlyState = stateSelector("icon");
+const importantState = stateSelector("important");
+const indeterminateState = stateSelector("indeterminate");
+const informativeState = stateSelector("informative");
+const inlineState = stateSelector("inline");
+const insetState = stateSelector("inset");
+const invertedState = stateSelector("inverted");
+const italicState = stateSelector("italic");
+const justifyState = stateSelector("justify");
+const largeState = stateSelector("large");
+const lavenderState = stateSelector("lavender");
+const lightTealState = stateSelector("light-teal");
+const lilacState = stateSelector("lilac");
+const magentaState = stateSelector("magenta");
+const marigoldState = stateSelector("marigold");
+const mediumState = stateSelector("medium");
+const minkState = stateSelector("mink");
+const monospaceState = stateSelector("monospace");
+const multiLineState = stateSelector("multiline");
+const navyState = stateSelector("navy");
+const neutralState = stateSelector("neutral");
+const nowrapState = stateSelector("nowrap");
+const numericState = stateSelector("numeric");
+const outlineState = stateSelector("outline");
+const patternMismatchState = stateSelector("pattern-mismatch");
+const peachState = stateSelector("peach");
+const pinkState = stateSelector("pink");
+const platinumState = stateSelector("platinum");
+const plumState = stateSelector("plum");
+const pressedState = stateSelector("pressed");
+const primaryState = stateSelector("primary");
+const pumpkinState = stateSelector("pumpkin");
+const purpleState = stateSelector("purple");
+const rangeOverflowState = stateSelector("range-overflow");
+const rangeUnderflowState = stateSelector("range-underflow");
+const redState = stateSelector("red");
+const resizeBothState = stateSelector("resize-both");
+const resizeHorizontalState = stateSelector("resize-horizontal");
+const resizeVerticalState = stateSelector("resize-vertical");
+const roundedState = stateSelector("rounded");
+const royalBlueState = stateSelector("royal-blue");
+const seafoamState = stateSelector("seafoam");
+const semiboldState = stateSelector("semibold");
+const severeState = stateSelector("severe");
+const shadowState = stateSelector("shadow");
+const size1000State = stateSelector("size-1000");
+const size100State = stateSelector("size-100");
+const size200State = stateSelector("size-200");
+const size400State = stateSelector("size-400");
+const size500State = stateSelector("size-500");
+const size600State = stateSelector("size-600");
+const size700State = stateSelector("size-700");
+const size800State = stateSelector("size-800");
+const size900State = stateSelector("size-900");
+const smallState = stateSelector("small");
+const squareState = stateSelector("square");
+const steelState = stateSelector("steel");
+const stepMismatchState = stateSelector("step-mismatch");
+const strikethroughState = stateSelector("strikethrough");
+const strongState = stateSelector("strong");
+const submenuState = stateSelector("submenu");
+const subtleState = stateSelector("subtle");
+const successState = stateSelector("success");
+const tealState = stateSelector("teal");
+const tintState = stateSelector("tint");
+const tinyState = stateSelector("tiny");
+const tooLongState = stateSelector("too-long");
+const tooShortState = stateSelector("too-short");
+const transparentState = stateSelector("transparent");
+const truncateState = stateSelector("truncate");
+const typeMismatchState = stateSelector("type-mismatch");
+const underlineState = stateSelector("underline");
+const userInvalidState = stateSelector("user-invalid");
+const validState = stateSelector("valid");
+const valueMissingState = stateSelector("value-missing");
+const verticalState = stateSelector("vertical");
+const warningState = stateSelector("warning");
 
 const colorNeutralForeground1 = "var(--colorNeutralForeground1)";
 const colorNeutralForeground1Hover = "var(--colorNeutralForeground1Hover)";
@@ -4965,12 +5059,31 @@ const definition$A = Accordion.compose({
 
 definition$A.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",
@@ -5114,12 +5227,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
@@ -5127,12 +5235,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
@@ -5140,12 +5243,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
@@ -5332,9 +5430,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();
@@ -5382,7 +5479,7 @@ const animations = {
   nullEasing: curveLinear
 };
 const styles$w = 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(:is([state--brand],:state(brand))){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host(:is([state--dark-red],:state(dark-red))){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host(:is([state--cranberry],:state(cranberry))){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host(:is([state--red],:state(red))){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host(:is([state--pumpkin],:state(pumpkin))){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host(:is([state--peach],:state(peach))){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host(:is([state--marigold],:state(marigold))){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host(:is([state--gold],:state(gold))){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host(:is([state--brass],:state(brass))){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host(:is([state--brown],:state(brown))){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host(:is([state--forest],:state(forest))){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host(:is([state--seafoam],:state(seafoam))){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host(:is([state--dark-green],:state(dark-green))){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host(:is([state--light-teal],:state(light-teal))){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host(:is([state--teal],:state(teal))){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host(:is([state--steel],:state(steel))){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host(:is([state--blue],:state(blue))){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host(:is([state--royal-blue],:state(royal-blue))){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host(:is([state--cornflower],:state(cornflower))){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host(:is([state--navy],:state(navy))){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host(:is([state--lavender],:state(lavender))){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host(:is([state--purple],:state(purple))){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host(:is([state--grape],:state(grape))){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host(:is([state--lilac],:state(lilac))){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host(:is([state--pink],:state(pink))){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host(:is([state--magenta],:state(magenta))){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host(:is([state--plum],:state(plum))){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host(:is([state--beige],:state(beige))){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host(:is([state--mink],:state(mink))){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host(:is([state--platinum],:state(platinum))){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host(:is([state--anchor],:state(anchor))){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow}),${durationSlower};transition-delay:${animations.fastEase}),${animations.nullEasing})}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
+  ${display("inline-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() {
@@ -5414,6 +5511,19 @@ 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;
@@ -5441,12 +5551,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
@@ -5454,12 +5559,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
@@ -5467,12 +5567,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
@@ -5480,12 +5575,7 @@ 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);
@@ -6126,12 +6216,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
@@ -6139,12 +6224,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
@@ -6152,12 +6232,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
@@ -6190,6 +6265,15 @@ const definition$w = Button.compose({
 
 definition$w.define(FluentDesignSystem.registry);
 
+const CheckboxShape = {
+  circular: "circular",
+  square: "square"
+};
+const CheckboxSize = {
+  medium: "medium",
+  large: "large"
+};
+
 var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
 var __decorateClass$p = (decorators, target, key, kind) => {
@@ -6572,12 +6656,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.
@@ -6587,12 +6666,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();
@@ -6626,7 +6700,6 @@ __decorateClass$p([observable], Checkbox.prototype, "indeterminate", 2);
 __decorateClass$p([attr], Checkbox.prototype, "shape", 2);
 __decorateClass$p([attr], Checkbox.prototype, "size", 2);
 
-const indeterminateState = css.partial`:is([state--indeterminate], :state(indeterminate))`;
 const styles$u = css`
   ${display("inline-flex")}
 
@@ -6687,6 +6760,33 @@ const definition$u = CompoundButton.compose({
 
 definition$u.define(FluentDesignSystem.registry);
 
+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$o = Object.defineProperty;
 var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
 var __decorateClass$o = (decorators, target, key, kind) => {
@@ -6715,12 +6815,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
@@ -6728,12 +6823,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
@@ -6741,12 +6831,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
@@ -6754,12 +6839,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();
@@ -6809,7 +6889,6 @@ __decorateClass$o([attr({
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
-const dotState = css.partial`:is([state--dot], :state(dot))`;
 const styles$s = css`
   :host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
@@ -6994,6 +7073,16 @@ 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;
@@ -7043,13 +7132,8 @@ 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);
@@ -7061,12 +7145,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
@@ -7074,12 +7153,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
@@ -7464,19 +7538,6 @@ __decorateClass$j([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
 
-const focusVisibleState = css.partial`:is([state--focus-visible], :state(focus-visible))`;
-const badInputState = css.partial`:is([state--${ValidationFlags.badInput}], :state(${ValidationFlags.badInput}))`;
-const customErrorState = css.partial`:is([state--${ValidationFlags.customError}], :state(${ValidationFlags.customError}))`;
-const patternMismatchState = css.partial`:is([state--${ValidationFlags.patternMismatch}], :state(${ValidationFlags.patternMismatch}))`;
-const rangeOverflowState = css.partial`:is([state--${ValidationFlags.rangeOverflow}], :state(${ValidationFlags.rangeOverflow}))`;
-const rangeUnderflowState = css.partial`:is([state--${ValidationFlags.rangeUnderflow}], :state(${ValidationFlags.rangeUnderflow}))`;
-const stepMismatchState = css.partial`:is([state--${ValidationFlags.stepMismatch}], :state(${ValidationFlags.stepMismatch}))`;
-const tooLongState = css.partial`:is([state--${ValidationFlags.tooLong}], :state(${ValidationFlags.tooLong}))`;
-const tooShortState = css.partial`:is([state--${ValidationFlags.tooShort}], :state(${ValidationFlags.tooShort}))`;
-const typeMismatchState = css.partial`:is([state--${ValidationFlags.typeMismatch}], :state(${ValidationFlags.typeMismatch}))`;
-const validState = css.partial`:is([state-${ValidationFlags.valid}], :state(${ValidationFlags.valid}))`;
-const valueMissingState = css.partial`:is([state--${ValidationFlags.valueMissing}], :state(${ValidationFlags.valueMissing}))`;
-const hasMessageState = css.partial`:is([state--has-message], :state(has-message))`;
 const styles$m = css`
   ${display("inline-grid")}
 
@@ -7505,6 +7566,18 @@ const definition$n = Field.compose({
 
 definition$n.define(FluentDesignSystem.registry);
 
+const ImageFit = {
+  none: "none",
+  center: "center",
+  contain: "contain",
+  cover: "cover"
+};
+const ImageShape = {
+  circular: "circular",
+  rounded: "rounded",
+  square: "square"
+};
+
 var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
 var __decorateClass$i = (decorators, target, key, kind) => {
@@ -7553,12 +7626,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
@@ -7566,12 +7634,7 @@ 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({
@@ -7589,7 +7652,7 @@ __decorateClass$i([attr], Image.prototype, "shape", 2);
 const template$m = html`<slot></slot>`;
 
 const styles$l = css`
-  :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host(:is([state--block],:state(block))) ::slotted(img){width:100%;height:auto}:host(:is([state--bordered],:state(bordered))) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host(:is([state--fit-none],:state(fit-none))) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host(:is([state--fit-center],:state(fit-center))) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host(:is([state--fit-contain],:state(fit-contain))) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host(:is([state--fit-cover],:state(fit-cover))) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host(:is([state--shadowed],:state(shadowed))) ::slotted(img){box-shadow:${shadow4}}:host(${circularState}) ::slotted(img){border-radius:${borderRadiusCircular}}:host(${roundedState}) ::slotted(img){border-radius:${borderRadiusMedium}}`;
+  :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({
   name: `${FluentDesignSystem.prefix}-image`,
@@ -7599,6 +7662,16 @@ const definition$m = Image.compose({
 
 definition$m.define(FluentDesignSystem.registry);
 
+const LabelSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+const LabelWeight = {
+  regular: "regular",
+  semibold: "semibold"
+};
+
 var __defProp$h = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
 var __decorateClass$h = (decorators, target, key, kind) => {
@@ -7625,12 +7698,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
@@ -7638,12 +7706,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
@@ -7666,7 +7729,7 @@ __decorateClass$h([attr({
 const styles$k = 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(${largeState}),:host(:is([state--semibold],:state(semibold))){font-weight:${fontWeightSemibold}}:host(:is([state--disabled],:state(disabled))),:host(:is([state--disabled],:state(disabled))) .asterisk{color:${colorNeutralForegroundDisabled}}`;
+  :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}}`;
 
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
@@ -7681,6 +7744,10 @@ const definition$l = Label.compose({
 
 definition$l.define(FluentDesignSystem.registry);
 
+const LinkAppearance = {
+  subtle: "subtle"
+};
+
 var __defProp$g = Object.defineProperty;
 var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
 var __decorateClass$g = (decorators, target, key, kind) => {
@@ -7700,12 +7767,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
@@ -7724,7 +7786,7 @@ __decorateClass$g([attr({
 const styles$j = 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-thinkness:${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(:is([state--inline],:state(inline))){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :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`
     :host{color:LinkText}`));
 
 function anchorTemplate() {
@@ -7988,7 +8050,6 @@ __decorateClass$f([observable], MenuItem.prototype, "slottedSubmenu", 2);
 __decorateClass$f([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
-const submenuState = css.partial`:is([state--submenu], :state(submenu))`;
 const styles$i = css`
   ${display("grid")}
 
@@ -8592,6 +8653,21 @@ const definition$g = Menu.compose({
 
 definition$g.define(FluentDesignSystem.registry);
 
+const MessageBarLayout = {
+  multiline: "multiline",
+  singleline: "singleline"
+};
+const MessageBarShape = {
+  rounded: "rounded",
+  square: "square"
+};
+const MessageBarIntent = {
+  success: "success",
+  warning: "warning",
+  error: "error",
+  info: "info"
+};
+
 var __defProp$c = Object.defineProperty;
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
 var __decorateClass$c = (decorators, target, key, kind) => {
@@ -8624,12 +8700,7 @@ 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
@@ -8637,12 +8708,7 @@ class MessageBar extends FASTElement {
    * @param next - the next state
    */
   layoutChanged(prev, next) {
-    if (prev) {
-      toggleState(this.elementInternals, prev, false);
-    }
-    if (next) {
-      toggleState(this.elementInternals, next, true);
-    }
+    swapStates(this.elementInternals, prev, next, MessageBarLayout);
   }
   /**
    * Handles changes to the intent attribute custom states
@@ -8650,12 +8716,7 @@ 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);
@@ -8682,6 +8743,20 @@ const definition$f = MessageBar.compose({
 
 definition$f.define(FluentDesignSystem.registry);
 
+const ProgressBarThickness = {
+  medium: "medium",
+  large: "large"
+};
+const ProgressBarShape = {
+  rounded: "rounded",
+  square: "square"
+};
+const ProgressBarValidationState = {
+  success: "success",
+  warning: "warning",
+  error: "error"
+};
+
 var __defProp$b = Object.defineProperty;
 var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
 var __decorateClass$b = (decorators, target, key, kind) => {
@@ -8708,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.
@@ -8770,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
@@ -8783,12 +8848,7 @@ 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);
@@ -9386,6 +9446,17 @@ const definition$c = Radio.compose({
 
 definition$c.define(FluentDesignSystem.registry);
 
+const RatingDisplayColor = {
+  neutral: "neutral",
+  brand: "brand",
+  marigold: "marigold"
+};
+const RatingDisplaySize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+
 var __defProp$9 = Object.defineProperty;
 var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
 var __decorateClass$9 = (decorators, target, key, kind) => {
@@ -9483,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.
@@ -9493,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.
@@ -9542,6 +9611,10 @@ const definition$b = RatingDisplay.compose({
 
 definition$b.define(FluentDesignSystem.registry);
 
+const SliderSize = {
+  small: "small",
+  medium: "medium"
+};
 const SliderOrientation = Orientation;
 const SliderMode = {
   singleValue: "single-value"
@@ -9699,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) {
@@ -9965,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);
     }
@@ -10153,6 +10216,20 @@ const definition$a = Slider.compose({
 
 definition$a.define(FluentDesignSystem.registry);
 
+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$7 = Object.defineProperty;
 var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
 var __decorateClass$7 = (decorators, target, key, kind) => {
@@ -10180,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
@@ -10193,12 +10265,7 @@ 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);
@@ -10740,6 +10807,11 @@ const TablistAppearance = {
   subtle: "subtle",
   transparent: "transparent"
 };
+const TablistSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
 const TablistOrientation = Orientation;
 
 var __defProp$4 = Object.defineProperty;
@@ -10831,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();
     }
@@ -10986,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
@@ -11126,6 +11183,11 @@ const definition$4 = Tablist.compose({
 
 definition$4.define(FluentDesignSystem.registry);
 
+const TextAreaSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
 const TextAreaAppearance = {
   outline: "outline",
   filledLighter: "filled-lighter",
@@ -11214,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,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
@@ -11669,6 +11719,17 @@ const definition$3 = TextArea.compose({
 
 definition$3.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",
@@ -12053,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
@@ -12066,12 +12122,7 @@ 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);
@@ -12083,7 +12134,7 @@ applyMixins(TextInput, StartEnd);
 const styles$2 = 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$1}) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host(${underlineState$1}:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(${underlineState$1}:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState$1}:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState$1}[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}}`;
+  :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}}`;
 
 function textInputTemplate(options = {}) {
   return html`<template @beforeinput="${(x, c) => x.beforeinputHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><label part="label" for="control" class="label" ${ref("controlLabel")}><slot ${slotted({
@@ -12104,6 +12155,36 @@ const definition$2 = TextInput.compose({
 
 definition$2.define(FluentDesignSystem.registry);
 
+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$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -12134,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
@@ -12147,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
@@ -12160,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
@@ -12173,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();
@@ -12233,14 +12294,10 @@ __decorateClass$1([attr], Text.prototype, "font", 2);
 __decorateClass$1([attr], Text.prototype, "weight", 2);
 __decorateClass$1([attr], Text.prototype, "align", 2);
 
-const nowrapState = css.partial`:is([state--nowrap], :state(nowrap))`;
-const truncateState = css.partial`:is([state--truncate], :state(truncate))`;
-const underlineState = css.partial`:is([state--underline], :state(underline))`;
-const strikethroughState = css.partial`:is([state--strikethrough], :state(strikethrough))`;
 const styles$1 = 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(:is([state--block],:state(block))){display:block}:host(:is([state--italic],:state(italic))){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(:is([state--size-100],:state(size-100))){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host(:is([state--size-200],:state(size-200))){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(:is([state--size-400],:state(size-400))){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is([state--size-500],:state(size-500))){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host(:is([state--size-600],:state(size-600))){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host(:is([state--size-700],:state(size-700))){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host(:is([state--size-800],:state(size-800))){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host(:is([state--size-900],:state(size-900))){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host(:is([state--size-1000],:state(size-1000))){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host(:is([state--monospace],:state(monospace))){font-family:${fontFamilyMonospace}}:host(:is([state--numeric],:state(numeric))){font-family:${fontFamilyNumeric}}:host(:is([state--medium],:state(medium))){font-weight:${fontWeightMedium}}:host(:is([state--semibold],:state(semibold))){font-weight:${fontWeightSemibold}}:host(:is([state--bold],:state(bold))){font-weight:${fontWeightBold}}:host(:is([state--center],:state(center))){text-align:center}:host(:is([state--end],:state(end))){text-align:end}:host(:is([state--justify],:state(justify))){text-align:justify}::slotted(*){font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
+  :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>`;