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

package/dist/web-components.js

@@ -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,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;
@@ -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
@@ -5037,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",
@@ -5186,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
@@ -5199,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
@@ -5212,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
@@ -5404,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();
@@ -5486,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;
@@ -5513,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
@@ -5526,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
@@ -5539,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
@@ -5552,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);
@@ -6198,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
@@ -6211,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
@@ -6224,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
@@ -6262,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) => {
@@ -6644,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.
@@ -6659,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();
@@ -6758,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) => {
@@ -6786,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
@@ -6799,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
@@ -6812,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
@@ -6825,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();
@@ -7064,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;
@@ -7113,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);
@@ -7131,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
@@ -7144,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
@@ -7562,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) => {
@@ -7610,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
@@ -7623,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({
@@ -7656,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) => {
@@ -7682,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
@@ -7695,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
@@ -7738,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) => {
@@ -7757,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
@@ -8648,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) => {
@@ -8680,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
@@ -8693,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
@@ -8706,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);
@@ -8738,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) => {
@@ -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.
@@ -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,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);
@@ -9442,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) => {
@@ -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.
@@ -9598,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"
@@ -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);
     }
@@ -10209,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) => {
@@ -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,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);
@@ -10796,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;
@@ -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();
     }
@@ -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
@@ -11182,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",
@@ -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.
@@ -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
@@ -11725,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",
@@ -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,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);
@@ -12160,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) => {
@@ -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();