@fluentui/web-components 3.0.0-beta.89 → 3.0.0-beta.90

package/dist/web-components.js

@@ -4341,43 +4341,6 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-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 || !elementInternals) {
-    return;
-  }
-  if (!CustomStatesSetSupported) {
-    elementInternals.shadowRoot.host.toggleAttribute(`state--${state}`, force);
-    return;
-  }
-  if (force ?? !elementInternals.states.has(state)) {
-    elementInternals.states.add(state);
-    return;
-  }
-  elementInternals.states.delete(state);
-}
-const matchingStateMap = /* @__PURE__ */new WeakMap();
-function hasMatchingState(States, state) {
-  if (!States || !state) {
-    return false;
-  }
-  if (matchingStateMap.has(States)) {
-    return matchingStateMap.get(States).has(state);
-  }
-  const stateSet = new Set(Object.values(States));
-  matchingStateMap.set(States, stateSet);
-  return stateSet.has(state);
-}
-function swapStates(elementInternals, prev = "", next = "", States, prefix = "") {
-  toggleState(elementInternals, `${prefix}${prev}`, false);
-  if (!States || hasMatchingState(States, next)) {
-    toggleState(elementInternals, `${prefix}${next}`, true);
-  }
-}
-
 var __defProp$R = Object.defineProperty;
 var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
 var __decorateClass$R = (decorators, target, key, kind) => {
@@ -4400,22 +4363,6 @@ class BaseAccordionItem extends FASTElement {
     this.disabled = false;
     this.id = uniqueId$1("accordion-");
   }
-  /**
-   * Handles expanded changes
-   * @param prev - previous value
-   * @param next - next value
-   */
-  expandedChanged(prev, next) {
-    toggleState(this.elementInternals, "expanded", next);
-  }
-  /**
-   * Handles disabled changes
-   * @param prev - previous value
-   * @param next - next value
-   */
-  disabledChanged(prev, next) {
-    toggleState(this.elementInternals, "disabled", next);
-  }
 }
 __decorateClass$R([attr({
   attribute: "heading-level",
@@ -4430,17 +4377,6 @@ __decorateClass$R([attr({
 })], BaseAccordionItem.prototype, "disabled", 2);
 __decorateClass$R([attr], BaseAccordionItem.prototype, "id", 2);
 
-const AccordionItemSize = {
-  small: "small",
-  medium: "medium",
-  large: "large",
-  extraLarge: "extra-large"
-};
-const AccordionItemMarkerPosition = {
-  start: "start",
-  end: "end"
-};
-
 var __defProp$Q = Object.defineProperty;
 var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
 var __decorateClass$Q = (decorators, target, key, kind) => {
@@ -4454,30 +4390,6 @@ class AccordionItem extends BaseAccordionItem {
     super(...arguments);
     this.block = false;
   }
-  /**
-   * Handles changes to size attribute
-   * @param prev - previous value
-   * @param next - next value
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, AccordionItemSize);
-  }
-  /**
-   * Handles changes to marker-position attribute
-   * @param prev - previous value
-   * @param next - next value
-   */
-  markerPositionChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, AccordionItemMarkerPosition, "align-");
-  }
-  /**
-   * Handles changes to block attribute
-   * @param prev - previous value
-   * @param next - next value
-   */
-  blockChanged(prev, next) {
-    toggleState(this.elementInternals, "block", next);
-  }
 }
 __decorateClass$Q([attr], AccordionItem.prototype, "size", 2);
 __decorateClass$Q([attr({
@@ -4488,134 +4400,6 @@ __decorateClass$Q([attr({
 })], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
 
-const activeState = stateSelector("active");
-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 descriptionState = stateSelector("description");
-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 flipBlockState = stateSelector("flip-block");
-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 multipleState = stateSelector("multiple");
-const navyState = stateSelector("navy");
-const neutralState = stateSelector("neutral");
-const nowrapState = stateSelector("nowrap");
-const numericState = stateSelector("numeric");
-const openState = stateSelector("open");
-const outlineState = stateSelector("outline");
-const patternMismatchState = stateSelector("pattern-mismatch");
-const peachState = stateSelector("peach");
-const pinkState = stateSelector("pink");
-const placeholderShownState = stateSelector("placeholder-shown");
-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 selectedState = stateSelector("selected");
-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)";
 const colorNeutralForeground1Pressed = "var(--colorNeutralForeground1Pressed)";
@@ -4865,7 +4649,7 @@ const curveLinear = "var(--curveLinear)";
 const styles$G = css`
   ${display("block")}
 
-  :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer;font:inherit;grid-column:auto / span 2;grid-row:1;height:44px;outline:none;padding:0;text-align:start}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot='marker-collapsed'],[slot='marker-expanded'])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-inline-end:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.content{margin:0 ${spacingHorizontalM}}::slotted([slot='start']){display:flex;justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host(${disabledState}) .button{color:${colorNeutralForegroundDisabled}}:host(${disabledState}) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host(${expandedState}) .content{display:block}:host(${expandedState}) .default-marker-collapsed,:host(${expandedState}) ::slotted([slot='marker-collapsed']),:host(:not(${expandedState})) :is(.default-marker-expanded,.content),:host(:not(${expandedState})) ::slotted([slot='marker-expanded']){display:none}:host(${expandedState}) ::slotted([slot='marker-expanded']),:host(:not(${expandedState})) ::slotted([slot='marker-collapsed']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host(${smallState}) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${largeState}) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${extraLargeState}) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host(${alignEndState}) :slotted([slot='start']){grid-column:1 / span 1}:host(${alignEndState}) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:4 / span 1;padding-inline-start:${spacingHorizontalS};padding-inline-end:0}:host(${alignEndState}) .button{grid-column:2 / span 3}:host([block]){max-width:100%}:host(${alignEndState}) .heading{grid-template-columns:auto auto 28px;padding-inline:${spacingHorizontalM}}:host(${alignEndState}:has([slot='start'])) .heading{padding-inline:${spacingHorizontalMNudge} ${spacingHorizontalM}}:host(${blockState}${alignEndState}) .heading{grid-template-columns:auto 1fr}:host(${alignEndState}) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:5 / span 1}`;
+  :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer;font:inherit;grid-column:auto / span 2;grid-row:1;height:44px;outline:none;padding:0;text-align:start}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot='marker-collapsed'],[slot='marker-expanded'])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-inline-end:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.content{margin:0 ${spacingHorizontalM}}::slotted([slot='start']){display:flex;justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .content{display:block}:host([expanded]) .default-marker-collapsed,:host([expanded]) ::slotted([slot='marker-collapsed']),:host(:not([expanded])) :is(.default-marker-expanded,.content),:host(:not([expanded])) ::slotted([slot='marker-expanded']){display:none}:host([expanded]) ::slotted([slot='marker-expanded']),:host(:not([expanded])) ::slotted([slot='marker-collapsed']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([marker-position='end']) ::slotted([slot='start']){grid-column:1 / span 1}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:4 / span 1;padding-inline-start:${spacingHorizontalS};padding-inline-end:0}:host([marker-position='end']) .button{grid-column:2 / span 3}:host([block]){max-width:100%}:host([marker-position='end']) .heading{grid-template-columns:auto auto 28px;padding-inline:${spacingHorizontalM}}:host([marker-position='end']:has([slot='start'])) .heading{padding-inline:${spacingHorizontalMNudge} ${spacingHorizontalM}}:host([block][marker-position='end']) .heading{grid-template-columns:auto 1fr}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:5 / span 1}`;
 
 const chevronRight20Filled = html.partial(`<svg
   width="20"
@@ -5086,6 +4870,43 @@ const definition$G = Accordion.compose({
 
 definition$G.define(FluentDesignSystem.registry);
 
+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 || !elementInternals) {
+    return;
+  }
+  if (!CustomStatesSetSupported) {
+    elementInternals.shadowRoot.host.toggleAttribute(`state--${state}`, force);
+    return;
+  }
+  if (force ?? !elementInternals.states.has(state)) {
+    elementInternals.states.add(state);
+    return;
+  }
+  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 ButtonAppearance = {
   primary: "primary",
   outline: "outline",
@@ -5302,12 +5123,12 @@ applyMixins(AnchorButton, StartEnd);
 const baseButtonStyles = css`
   ${display("inline-flex")}
 
-  :host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){:host{transition-duration:0.01ms}}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}::slotted([slot='end']),[slot='end']{flex-shrink:0;margin-inline-start:var(--icon-spacing)}:host(${iconOnlyState}){min-width:32px;max-width:32px}:host(${smallState}){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host(${smallState}${iconOnlyState}){min-width:24px;max-width:24px}:host(${largeState}){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:40px;max-width:40px}:host(${largeState}) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host(${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${primaryState}:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:hover:active){background-color:${colorBrandBackgroundPressed}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}`;
+  :host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){:host{transition-duration:0.01ms}}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}::slotted([slot='end']),[slot='end']{flex-shrink:0;margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is([shape='circular'],[shape='circular']:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is([shape='square'],[shape='square']:focus-visible)){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is([appearance='transparent'],[appearance='transparent']:is(:hover,:active))){border-color:transparent}`;
 const styles$E = css`
   ${baseButtonStyles}
 
-  :host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host(${primaryState}:is(:disabled,[disabled-focusable])),:host(${primaryState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host(${outlineState}:is(:disabled,[disabled-focusable])),:host(${outlineState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host(${subtleState}:is(:disabled,[disabled-focusable])),:host(${subtleState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host(${transparentState}:is(:disabled,[disabled-focusable])),:host(${transparentState}:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{background-color:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight !important}:host(${primaryState}:not(:is(:hover,:focus-visible))){background-color:Highlight;color:HighlightText;forced-color-adjust:none}:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])){background-color:ButtonFace;color:GrayText;border-color:ButtonText}`));
+  :host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host([appearance='primary']:is(:disabled,[disabled-focusable])),:host([appearance='primary']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host([appearance='outline']:is(:disabled,[disabled-focusable])),:host([appearance='outline']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host([appearance='subtle']:is(:disabled,[disabled-focusable])),:host([appearance='subtle']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='transparent']:is(:disabled,[disabled-focusable])),:host([appearance='transparent']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{background-color:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight !important}:host([appearance='primary']:not(:is(:hover,:focus-visible))){background-color:Highlight;color:HighlightText;forced-color-adjust:none}:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])){background-color:ButtonFace;color:GrayText;border-color:ButtonText}`));
 
 const styles$D = css`
   ${baseButtonStyles}
@@ -5391,7 +5212,6 @@ class BaseAvatar extends FASTElement {
 }
 __decorateClass$M([attr], BaseAvatar.prototype, "name", 2);
 __decorateClass$M([attr], BaseAvatar.prototype, "initials", 2);
-__decorateClass$M([attr], BaseAvatar.prototype, "active", 2);
 
 const AvatarNamedColor = {
   darkRed: "dark-red",
@@ -5474,9 +5294,9 @@ const _Avatar = class _Avatar extends BaseAvatar {
    */
   generateColor() {
     const colorful = this.color === AvatarColor.colorful;
-    const prev = this.currentColor;
+    this.currentColor;
     this.currentColor = colorful && this.colorId ? this.colorId : colorful ? _Avatar.colors[getHashCode(this.name ?? "") % _Avatar.colors.length] : this.color ?? AvatarColor.neutral;
-    swapStates(this.elementInternals, prev, this.currentColor);
+    this.setAttribute("data-color", this.currentColor);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -5492,6 +5312,7 @@ const _Avatar = class _Avatar extends BaseAvatar {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
+__decorateClass$L([attr], _Avatar.prototype, "active", 2);
 __decorateClass$L([attr], _Avatar.prototype, "shape", 2);
 __decorateClass$L([attr], _Avatar.prototype, "appearance", 2);
 __decorateClass$L([attr({
@@ -5524,7 +5345,7 @@ const animations = {
   nullEasing: curveLinear
 };
 const styles$C = css`
-  ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host(${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}}`;
+  ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow}),${durationSlower};transition-delay:${animations.fastEase}),${animations.nullEasing})}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
 
 const 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() {
@@ -5556,19 +5377,6 @@ 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$K = Object.defineProperty;
 var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
@@ -5581,47 +5389,9 @@ var __decorateClass$K = (decorators, target, key, kind) => {
 class Badge extends FASTElement {
   constructor() {
     super(...arguments);
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    this.elementInternals = this.attachInternals();
     this.appearance = BadgeAppearance.filled;
     this.color = BadgeColor.brand;
   }
-  /**
-   * Handles changes to appearance attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  appearanceChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, BadgeAppearance);
-  }
-  /**
-   * Handles changes to color attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  colorChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, BadgeColor);
-  }
-  /**
-   * Handles changes to shape attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  shapeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, BadgeShape);
-  }
-  /**
-   * Handles changes to size attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, BadgeSize);
-  }
 }
 __decorateClass$K([attr], Badge.prototype, "appearance", 2);
 __decorateClass$K([attr], Badge.prototype, "color", 2);
@@ -5653,7 +5423,7 @@ const badgeBaseStyles = css.partial`
     font-size: 12px;
   }
 
-  :host(:not(${ghostState}))::after {
+  :host(:not([appearance='ghost']))::after {
     position: absolute;
     content: '';
     top: 0;
@@ -5667,7 +5437,7 @@ const badgeBaseStyles = css.partial`
   }
 `;
 const badgeSizeStyles = css.partial`
-  :host(${tinyState}) {
+  :host([size='tiny']) {
     width: 6px;
     height: 6px;
     font-size: 4px;
@@ -5675,10 +5445,10 @@ const badgeSizeStyles = css.partial`
     padding-inline: 0;
     min-width: unset;
   }
-  :host(${tinyState}) ::slotted(svg) {
+  :host([size='tiny']) ::slotted(svg) {
     font-size: 6px;
   }
-  :host(${extraSmallState}) {
+  :host([size='extra-small']) {
     width: 10px;
     height: 10px;
     font-size: 6px;
@@ -5686,191 +5456,191 @@ const badgeSizeStyles = css.partial`
     padding-inline: 0;
     min-width: unset;
   }
-  :host(${extraSmallState}) ::slotted(svg) {
+  :host([size='extra-small']) ::slotted(svg) {
     font-size: 10px;
   }
-  :host(${smallState}) {
+  :host([size='small']) {
     min-width: 16px;
     height: 16px;
     font-size: ${fontSizeBase100};
     line-height: ${lineHeightBase100};
     padding-inline: calc(${spacingHorizontalXXS} + ${spacingHorizontalXXS});
   }
-  :host(${smallState}) ::slotted(svg) {
+  :host([size='small']) ::slotted(svg) {
     font-size: 12px;
   }
-  :host(${largeState}) {
+  :host([size='large']) {
     min-width: 24px;
     height: 24px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
     padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
   }
-  :host(${largeState}) ::slotted(svg) {
+  :host([size='large']) ::slotted(svg) {
     font-size: 16px;
   }
-  :host(${extraLargeState}) {
+  :host([size='extra-large']) {
     min-width: 32px;
     height: 32px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
     padding-inline: calc(${spacingHorizontalSNudge} + ${spacingHorizontalXXS});
   }
-  :host(${extraLargeState}) ::slotted(svg) {
+  :host([size='extra-large']) ::slotted(svg) {
     font-size: 20px;
   }
 `;
 const badgeFilledStyles = css.partial`
-  :host(${dangerState}) {
+  :host([color='danger']) {
     background-color: ${colorPaletteRedBackground3};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host(${importantState}) {
+  :host([color='important']) {
     background-color: ${colorNeutralForeground1};
     color: ${colorNeutralBackground1};
   }
 
-  :host(${informativeState}) {
+  :host([color='informative']) {
     background-color: ${colorNeutralBackground5};
     color: ${colorNeutralForeground3};
   }
 
-  :host(${severeState}) {
+  :host([color='severe']) {
     background-color: ${colorPaletteDarkOrangeBackground3};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host(${subtleState}) {
+  :host([color='subtle']) {
     background-color: ${colorNeutralBackground1};
     color: ${colorNeutralForeground1};
   }
 
-  :host(${successState}) {
+  :host([color='success']) {
     background-color: ${colorPaletteGreenBackground3};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host(${warningState}) {
+  :host([color='warning']) {
     background-color: ${colorPaletteYellowBackground3};
     color: ${colorNeutralForeground1Static};
   }
 `;
 const badgeGhostStyles = css.partial`
-  :host(${ghostState}) {
+  :host([appearance='ghost']) {
     color: ${colorBrandForeground1};
     background-color: initial;
   }
 
-  :host(${ghostState}${dangerState}) {
+  :host([appearance='ghost'][color='danger']) {
     color: ${colorPaletteRedForeground3};
   }
 
-  :host(${ghostState}${importantState}) {
+  :host([appearance='ghost'][color='important']) {
     color: ${colorNeutralForeground1};
   }
 
-  :host(${ghostState}${informativeState}) {
+  :host([appearance='ghost'][color='informative']) {
     color: ${colorNeutralForeground3};
   }
 
-  :host(${ghostState}${severeState}) {
+  :host([appearance='ghost'][color='severe']) {
     color: ${colorPaletteDarkOrangeForeground3};
   }
 
-  :host(${ghostState}${subtleState}) {
+  :host([appearance='ghost'][color='subtle']) {
     color: ${colorNeutralForegroundInverted};
   }
 
-  :host(${ghostState}${successState}) {
+  :host([appearance='ghost'][color='success']) {
     color: ${colorPaletteGreenForeground3};
   }
 
-  :host(${ghostState}${warningState}) {
+  :host([appearance='ghost'][color='warning']) {
     color: ${colorPaletteYellowForeground2};
   }
 `;
 const badgeOutlineStyles = css.partial`
-  :host(${outlineState}) {
+  :host([appearance='outline']) {
     border-color: currentColor;
     color: ${colorBrandForeground1};
     background-color: initial;
   }
 
-  :host(${outlineState}${dangerState}) {
+  :host([appearance='outline'][color='danger']) {
     color: ${colorPaletteRedForeground3};
   }
 
-  :host(${outlineState}${importantState}) {
+  :host([appearance='outline'][color='important']) {
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStrokeAccessible};
   }
 
-  :host(${outlineState}${informativeState}) {
+  :host([appearance='outline'][color='informative']) {
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStroke2};
   }
 
-  :host(${outlineState}${severeState}) {
+  :host([appearance='outline'][color='severe']) {
     color: ${colorPaletteDarkOrangeForeground3};
   }
 
-  :host(${outlineState}${subtleState}) {
+  :host([appearance='outline'][color='subtle']) {
     color: ${colorNeutralForegroundStaticInverted};
   }
 
-  :host(${outlineState}${successState}) {
+  :host([appearance='outline'][color='success']) {
     color: ${colorPaletteGreenForeground2};
   }
 
-  :host(${outlineState}${warningState}) {
+  :host([appearance='outline'][color='warning']) {
     color: ${colorPaletteYellowForeground2};
   }
 `;
 const badgeTintStyles = css.partial`
-  :host(${tintState}) {
+  :host([appearance='tint']) {
     background-color: ${colorBrandBackground2};
     color: ${colorBrandForeground2};
     border-color: ${colorBrandStroke2};
   }
 
-  :host(${tintState}${dangerState}) {
+  :host([appearance='tint'][color='danger']) {
     background-color: ${colorPaletteRedBackground1};
     color: ${colorPaletteRedForeground1};
     border-color: ${colorPaletteRedBorder1};
   }
 
-  :host(${tintState}${importantState}) {
+  :host([appearance='tint'][color='important']) {
     background-color: ${colorNeutralForeground3};
     color: ${colorNeutralBackground1};
     border-color: ${colorTransparentStroke};
   }
 
-  :host(${tintState}${informativeState}) {
+  :host([appearance='tint'][color='informative']) {
     background-color: ${colorNeutralBackground4};
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStroke2};
   }
 
-  :host(${tintState}${severeState}) {
+  :host([appearance='tint'][color='severe']) {
     background-color: ${colorPaletteDarkOrangeBackground1};
     color: ${colorPaletteDarkOrangeForeground1};
     border-color: ${colorPaletteDarkOrangeBorder1};
   }
 
-  :host(${tintState}${subtleState}) {
+  :host([appearance='tint'][color='subtle']) {
     background-color: ${colorNeutralBackground1};
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStroke2};
   }
 
-  :host(${tintState}${successState}) {
+  :host([appearance='tint'][color='success']) {
     background-color: ${colorPaletteGreenBackground1};
     color: ${colorPaletteGreenForeground1};
     border-color: ${colorPaletteGreenBorder2};
   }
 
-  :host(${tintState}${warningState}) {
+  :host([appearance='tint'][color='warning']) {
     background-color: ${colorPaletteYellowBackground1};
     color: ${colorPaletteYellowForeground2};
     border-color: ${colorPaletteYellowBorder1};
@@ -5981,11 +5751,11 @@ css.partial`
 `;
 
 const styles$B = css`
-  :host(${squareState}){border-radius:${borderRadiusNone}}:host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
-  ${badgeFilledStyles}
-  ${badgeGhostStyles}
+  :host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeTintStyles}
   ${badgeOutlineStyles}
-  ${badgeTintStyles}
+  ${badgeGhostStyles}
+  ${badgeFilledStyles}
+  ${badgeSizeStyles}
   ${badgeBaseStyles}
 `.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}`));
@@ -6264,38 +6034,6 @@ class Button extends BaseButton {
     super(...arguments);
     this.iconOnly = false;
   }
-  /**
-   * Handles changes to appearance attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  appearanceChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, ButtonAppearance);
-  }
-  /**
-   * Handles changes to shape attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  shapeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, ButtonShape);
-  }
-  /**
-   * Handles changes to size attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, ButtonSize);
-  }
-  /**
-   * Handles changes to icon only custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  iconOnlyChanged(prev, next) {
-    toggleState(this.elementInternals, "icon", next);
-  }
 }
 __decorateClass$I([attr], Button.prototype, "appearance", 2);
 __decorateClass$I([attr], Button.prototype, "shape", 2);
@@ -6682,15 +6420,6 @@ __decorateClass$H([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
 
-const CheckboxShape = {
-  circular: "circular",
-  square: "square"
-};
-const CheckboxSize = {
-  medium: "medium",
-  large: "large"
-};
-
 var __defProp$G = Object.defineProperty;
 var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
 var __decorateClass$G = (decorators, target, key, kind) => {
@@ -6711,26 +6440,6 @@ class Checkbox extends BaseCheckbox {
     this.setAriaChecked();
     toggleState(this.elementInternals, "indeterminate", next);
   }
-  /**
-   * Applies shape states when the `shape` property changes.
-   *
-   * @param prev - the previous shape value
-   * @param next - the next shape value
-   * @internal
-   */
-  shapeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, CheckboxShape);
-  }
-  /**
-   * Applies size states when the `size` property changes.
-   *
-   * @param prev - the previous state
-   * @param next - the next state
-   * @internal
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, CheckboxSize);
-  }
   constructor() {
     super();
     this.elementInternals.role = "checkbox";
@@ -6763,10 +6472,38 @@ __decorateClass$G([observable], Checkbox.prototype, "indeterminate", 2);
 __decorateClass$G([attr], Checkbox.prototype, "shape", 2);
 __decorateClass$G([attr], Checkbox.prototype, "size", 2);
 
+const activeState = stateSelector("active");
+const badInputState = stateSelector("bad-input");
+const checkedState = stateSelector("checked");
+const customErrorState = stateSelector("custom-error");
+const descriptionState = stateSelector("description");
+const disabledState = stateSelector("disabled");
+stateSelector("error");
+const flipBlockState = stateSelector("flip-block");
+const focusVisibleState = stateSelector("focus-visible");
+const hasMessageState = stateSelector("has-message");
+const indeterminateState = stateSelector("indeterminate");
+const multipleState = stateSelector("multiple");
+const openState = stateSelector("open");
+const patternMismatchState = stateSelector("pattern-mismatch");
+const placeholderShownState = stateSelector("placeholder-shown");
+const pressedState = stateSelector("pressed");
+const rangeOverflowState = stateSelector("range-overflow");
+const rangeUnderflowState = stateSelector("range-underflow");
+const selectedState = stateSelector("selected");
+const stepMismatchState = stateSelector("step-mismatch");
+const submenuState = stateSelector("submenu");
+const tooLongState = stateSelector("too-long");
+const tooShortState = stateSelector("too-short");
+const typeMismatchState = stateSelector("type-mismatch");
+const userInvalidState = stateSelector("user-invalid");
+const validState = stateSelector("valid");
+const valueMissingState = stateSelector("value-missing");
+
 const styles$A = css`
   ${display("inline-flex")}
 
-  :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host(${largeState}){--size:20px}:host(${largeState}) ::slotted([slot='checked-indicator']),:host(${largeState}) .checked-indicator{width:16px}:host(${circularState}),:host(${circularState}) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not([disabled]):hover),:host(${checkedState}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState}:not([disabled]):hover),:host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator{background-color:Highlight}:host([disabled]){border-color:GrayText}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:GrayText}:host([disabled]),:host([disabled]${checkedState}) .checked-indicator{color:GrayText}`));
 
 const checkedIndicator$2 = html.partial( /* html */
@@ -6807,8 +6544,9 @@ class CompoundButton extends Button {}
 const styles$z = css`
   ${styles$E}
 
-  :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host(${largeState}) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is(${primaryState},${primaryState}:hover,${primaryState}:active)) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is(${subtleState},${subtleState}:hover,${subtleState}:active)) ::slotted([slot='description']),:host(${transparentState}) ::slotted([slot='description']){color:${colorNeutralForeground2}}:host(${transparentState}:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance]))
-    ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host(${smallState}){padding:8px;padding-bottom:10px}:host(${iconOnlyState}){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host(${iconOnlyState}${smallState}){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host(${iconOnlyState}${largeState}){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host(${largeState}){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
+  :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='transparent'],[appearance='subtle'],[appearance='subtle']:is(:hover,:active)))
+    ::slotted([slot='description']){color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance]))
+    ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']){padding:8px;padding-bottom:10px}:host([icon-only]){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
 
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? null : x.tabIndex ?? 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
@@ -6823,33 +6561,6 @@ const definition$A = CompoundButton.compose({
 
 definition$A.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$F = Object.defineProperty;
 var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
 var __decorateClass$F = (decorators, target, key, kind) => {
@@ -6872,52 +6583,12 @@ class CounterBadge extends FASTElement {
     this.showZero = false;
     this.dot = false;
   }
-  /**
-   * Handles changes to appearance attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  appearanceChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, CounterBadgeAppearance);
-  }
-  /**
-   * Handles changes to color attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  colorChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, CounterBadgeColor);
-  }
-  /**
-   * Handles changes to shape attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  shapeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, CounterBadgeShape);
-  }
-  /**
-   * Handles changes to size attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, CounterBadgeSize);
-  }
   countChanged() {
     this.setCount();
   }
   overflowCountChanged() {
     this.setCount();
   }
-  /**
-   * Handles changes to dot attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  dotChanged(prev, next) {
-    toggleState(this.elementInternals, "dot", !!next);
-  }
   /**
    * @internal
    * Function to set the count
@@ -6953,12 +6624,12 @@ __decorateClass$F([attr({
 applyMixins(CounterBadge, StartEnd);
 
 const styles$y = css`
-  :host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
+  :host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
   ${badgeBaseStyles}
 
-  :host(${dotState}),:host(${dotState}[appearance][size]){min-width:auto;width:6px;height:6px;padding:0}`;
+  :host(:is([dot],[dot][appearance][size])){min-width:auto;width:6px;height:6px;padding:0}`;
 
 function composeTemplate(options = {}) {
   return badgeTemplate({
@@ -7136,16 +6807,6 @@ 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$C = Object.defineProperty;
 var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
@@ -7210,32 +6871,7 @@ var __decorateClass$B = (decorators, target, key, kind) => {
   if (kind && result) __defProp$B(target, key, result);
   return result;
 };
-class Divider extends BaseDivider {
-  /**
-   * Handles changes to align-content attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  alignContentChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, DividerAlignContent, "align-");
-  }
-  /**
-   * Handles changes to appearance attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  appearanceChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, DividerAppearance);
-  }
-  /**
-   * Handles changes to inset custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  insetChanged(prev, next) {
-    toggleState(this.elementInternals, "inset", next);
-  }
-}
+class Divider extends BaseDivider {}
 __decorateClass$B([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
@@ -7252,8 +6888,8 @@ const template$w = dividerTemplate();
 const styles$v = css`
   ${display("flex")}
 
-  :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host(${insetState}){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host(${alignStartState})::before,:host(${alignEndState})::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host(${verticalState}){height:100%;min-height:84px}:host(${verticalState}):empty{min-height:20px}:host(${verticalState}){flex-direction:column;align-items:center}:host(${verticalState}${insetState})::before{margin-top:12px}:host(${verticalState}${insetState})::after{margin-bottom:12px}:host(${verticalState}):empty::before,:host(${verticalState}):empty::after{height:10px;min-height:10px;flex-grow:0}:host(${verticalState})::before,:host(${verticalState})::after{width:${strokeWidthThin};min-height:20px;height:100%}:host(${verticalState}) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host(${verticalState}${alignStartState})::before{min-height:8px}:host(${verticalState}${alignEndState})::after{min-height:8px}:host(${strongState})::before,:host(${strongState})::after{background:${colorNeutralStroke1}}:host(${strongState}) ::slotted(*){color:${colorNeutralForeground1}}:host(${brandState})::before,:host(${brandState})::after{background:${colorBrandStroke1}}:host(${brandState}) ::slotted(*){color:${colorBrandForeground1}}:host(${subtleState})::before,:host(${subtleState})::after{background:${colorNeutralStroke3}}:host(${subtleState}) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host(${strongState})::before,:host(${strongState})::after,:host(${brandState})::before,:host(${brandState})::after,:host(${subtleState})::before,:host(${subtleState})::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
+  :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){align-items:center;flex-direction:column;height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
 
 const definition$w = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
@@ -7434,11 +7070,6 @@ const DropdownAppearance = {
   outline: "outline",
   transparent: "transparent"
 };
-const DropdownSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
 const DropdownType = {
   combobox: "combobox",
   dropdown: "dropdown",
@@ -8122,26 +7753,6 @@ class Dropdown extends BaseDropdown {
     super(...arguments);
     this.appearance = DropdownAppearance.outline;
   }
-  /**
-   * Swaps appearance states when the appearance property changes.
-   *
-   * @param prev - the previous appearance state
-   * @param next - the current appearance state
-   * @internal
-   */
-  appearanceChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, DropdownAppearance);
-  }
-  /**
-   * Swaps size states when the size property changes.
-   *
-   * @param prev - the previous size state
-   * @param next - the current size state
-   * @internal
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, DropdownSize);
-  }
 }
 __decorateClass$y([attr], Dropdown.prototype, "appearance", 2);
 __decorateClass$y([attr], Dropdown.prototype, "size", 2);
@@ -8149,7 +7760,7 @@ __decorateClass$y([attr], Dropdown.prototype, "size", 2);
 const styles$s = css`
   ${display("inline-flex")}
 
-  :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:none;box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host(${smallState}) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host(${largeState}) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host(${smallState}) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host(${largeState}) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where(${outlineState},${transparentState})) .control::before{background-color:${colorNeutralStrokeAccessible}}:host(${transparentState}) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host(${outlineState}) .control{--control-border-color:${colorNeutralStroke1}}:host(${outlineState}) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where(${outlineState},${transparentState})) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host(${outlineState}) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host(${outlineState}) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where(${outlineState},${transparentState})) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where(${outlineState},${transparentState})) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host(${filledDarkerState}) .control{background-color:${colorNeutralBackground3}}:host(:where(${filledLighterState},${filledDarkerState})) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted([popover]){inset:unset;position:absolute;position-anchor:--dropdown-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,block-start;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);overflow:auto}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){::slotted([popover]){margin-block-start:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin});max-height:50vh}:host(${smallState}) ::slotted([popover]){margin-block-start:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host(${largeState}) ::slotted([popover]){margin-block-start:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}:host(${flipBlockState}) ::slotted([popover]){margin-block-start:revert;transform:translate(0,-100%)}}`;
+  :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:none;box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted([popover]){inset:unset;position:absolute;position-anchor:--dropdown-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,block-start;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);overflow:auto}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){::slotted([popover]){margin-block-start:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin});max-height:50vh}:host([size='small']) ::slotted([popover]){margin-block-start:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']) ::slotted([popover]){margin-block-start:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}:host(${flipBlockState}) ::slotted([popover]){margin-block-start:revert;transform:translate(0,-100%)}}`;
 
 const definition$t = Dropdown.compose({
   name: `${FluentDesignSystem.prefix}-dropdown`,
@@ -8389,93 +8000,31 @@ const template$s = html`<template @click="${(x, c) => x.clickHandler(c.event)}"
   subtree: true,
   selector: '[slot="input"]',
   filter: elements()
-})}><slot name="label" part="label" ${slotted("labelSlot")}></slot><slot name="input" part="input"></slot><slot name="message" part="message" ${slotted({
-  property: "messageSlot",
-  filter: elements("[flag]")
-})}></slot></template>`;
-
-const definition$s = Field.compose({
-  name: `${FluentDesignSystem.prefix}-field`,
-  template: template$s,
-  styles: styles$r,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-
-definition$s.define(FluentDesignSystem.registry);
-
-const ImageFit = {
-  none: "none",
-  center: "center",
-  contain: "contain",
-  cover: "cover"
-};
-const ImageShape = {
-  circular: "circular",
-  rounded: "rounded",
-  square: "square"
-};
-
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$v(target, key, result);
-  return result;
-};
-class Image extends FASTElement {
-  constructor() {
-    super(...arguments);
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    this.elementInternals = this.attachInternals();
-  }
-  /**
-   * Handles changes to block custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  blockChanged(prev, next) {
-    toggleState(this.elementInternals, "block", next);
-  }
-  /**
-   * Handles changes to bordered custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  borderedChanged(prev, next) {
-    toggleState(this.elementInternals, "bordered", next);
-  }
-  /**
-   * Handles changes to shadow custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  shadowChanged(prev, next) {
-    toggleState(this.elementInternals, "shadow", next);
-  }
-  /**
-   * Handles changes to fit attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  fitChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, ImageFit, "fit-");
-  }
-  /**
-   * Handles changes to shape attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  shapeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, ImageShape);
+})}><slot name="label" part="label" ${slotted("labelSlot")}></slot><slot name="input" part="input"></slot><slot name="message" part="message" ${slotted({
+  property: "messageSlot",
+  filter: elements("[flag]")
+})}></slot></template>`;
+
+const definition$s = Field.compose({
+  name: `${FluentDesignSystem.prefix}-field`,
+  template: template$s,
+  styles: styles$r,
+  shadowOptions: {
+    delegatesFocus: true
   }
-}
+});
+
+definition$s.define(FluentDesignSystem.registry);
+
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$v(target, key, result);
+  return result;
+};
+class Image extends FASTElement {}
 __decorateClass$v([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
@@ -8491,7 +8040,7 @@ __decorateClass$v([attr], Image.prototype, "shape", 2);
 const template$r = html`<slot></slot>`;
 
 const styles$q = css`
-  :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host(${blockState}) ::slotted(img){width:100%;height:auto}:host(${borderedState}) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host(${fitNoneState}) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host(${fitCenterState}) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host(${fitContainState}) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host(${fitCoverState}) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host(${shadowState}) ::slotted(img){box-shadow:${shadow4}}:host(${circularState}) ::slotted(img){border-radius:${borderRadiusCircular}}:host(${roundedState}) ::slotted(img){border-radius:${borderRadiusMedium}}`;
+  :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
 
 const definition$r = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
@@ -8501,16 +8050,6 @@ const definition$r = Image.compose({
 
 definition$r.define(FluentDesignSystem.registry);
 
-const LabelSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
-const LabelWeight = {
-  regular: "regular",
-  semibold: "semibold"
-};
-
 var __defProp$u = Object.defineProperty;
 var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
 var __decorateClass$u = (decorators, target, key, kind) => {
@@ -8522,39 +8061,9 @@ var __decorateClass$u = (decorators, target, key, kind) => {
 class Label extends FASTElement {
   constructor() {
     super(...arguments);
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    this.elementInternals = this.attachInternals();
     this.disabled = false;
     this.required = false;
   }
-  /**
-   * Handles changes to size attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, LabelSize);
-  }
-  /**
-   * Handles changes to weight attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  weightChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, LabelWeight);
-  }
-  /**
-   * Handles changes to disabled attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  disabledChanged(prev, next) {
-    toggleState(this.elementInternals, "disabled", next);
-  }
 }
 __decorateClass$u([attr], Label.prototype, "size", 2);
 __decorateClass$u([attr], Label.prototype, "weight", 2);
@@ -8568,7 +8077,7 @@ __decorateClass$u([attr({
 const styles$p = css`
   ${display("inline-flex")}
 
-  :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host(${smallState}){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${largeState}){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is(${largeState},${semiboldState})){font-weight:${fontWeightSemibold}}:host(${disabledState}),:host(${disabledState}) .asterisk{color:${colorNeutralForegroundDisabled}}`;
+  :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is([size='large'],[weight='semibold'])){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
 
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
@@ -8583,10 +8092,6 @@ const definition$q = Label.compose({
 
 definition$q.define(FluentDesignSystem.registry);
 
-const LinkAppearance = {
-  subtle: "subtle"
-};
-
 var __defProp$t = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
 var __decorateClass$t = (decorators, target, key, kind) => {
@@ -8600,22 +8105,6 @@ class Link extends BaseAnchor {
     super(...arguments);
     this.inline = false;
   }
-  /**
-   * Handles changes to appearance attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  appearanceChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, LinkAppearance);
-  }
-  /**
-   * Handles changes to inline attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  inlineChanged(prev, next) {
-    toggleState(this.elementInternals, "inline", next);
-  }
 }
 __decorateClass$t([attr], Link.prototype, "appearance", 2);
 __decorateClass$t([attr({
@@ -8625,7 +8114,7 @@ __decorateClass$t([attr({
 const styles$o = css`
   ${display("inline")}
 
-  :host{position:relative;box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};overflow:inherit;text-align:start;text-decoration:none;text-decoration-thickness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host(${subtleState}:hover){color:${colorNeutralForeground2LinkHover}}:host(${subtleState}:active){color:${colorNeutralForeground2LinkPressed}}}:host(${subtleState}){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host(${inlineState}){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{position:relative;box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};overflow:inherit;text-align:start;text-decoration:none;text-decoration-thickness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host([appearance='subtle']:hover){color:${colorNeutralForeground2LinkHover}}:host([appearance='subtle']:active){color:${colorNeutralForeground2LinkPressed}}}:host([appearance='subtle']){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host([inline]){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{color:LinkText}`));
 
 function anchorTemplate() {
@@ -9661,21 +9150,6 @@ const definition$k = Menu.compose({
 
 definition$k.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$o = Object.defineProperty;
 var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
 var __decorateClass$o = (decorators, target, key, kind) => {
@@ -9702,38 +9176,14 @@ class MessageBar extends FASTElement {
     };
     this.elementInternals.role = "status";
   }
-  /**
-   * Handles changes to shape attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  shapeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, MessageBarShape);
-  }
-  /**
-   * Handles changes to the layout attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  layoutChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, MessageBarLayout);
-  }
-  /**
-   * Handles changes to the intent attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  intentChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, MessageBarIntent);
-  }
 }
 __decorateClass$o([attr], MessageBar.prototype, "shape", 2);
 __decorateClass$o([attr], MessageBar.prototype, "layout", 2);
 __decorateClass$o([attr], MessageBar.prototype, "intent", 2);
 
 const styles$j = css`
-  :host{display:grid;box-sizing:border-box;font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};width:100%;background:${colorNeutralBackground3};border:1px solid ${colorNeutralStroke1};padding-inline:${spacingHorizontalM};border-radius:${borderRadiusMedium};min-height:36px;align-items:center;grid-template:'icon body actions dismiss' / auto 1fr auto auto;contain:layout style paint}:host(${squareState}){border-radius:0}:host(${successState}){background-color:${colorPaletteGreenBackground1};border-color:${colorPaletteGreenBorder1}}:host(${warningState}){background-color:${colorPaletteDarkOrangeBackground1};border-color:${colorPaletteDarkOrangeBorder1}}:host(${errorState}){background-color:${colorPaletteRedBackground1};border-color:${colorPaletteRedBorder1}}:host(${multiLineState}){grid-template-areas:'icon body dismiss'
-      'actions actions actions';grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr;padding-block:${spacingVerticalMNudge};padding-inline:${spacingHorizontalM}}.content{grid-area:body;max-width:520px;padding-block:${spacingVerticalMNudge};padding-inline:0}:host(${multiLineState}) .content{padding:0}::slotted([slot='icon']){display:flex;grid-area:icon;flex-direction:column;align-items:center;color:${colorNeutralForeground3};margin-inline-end:${spacingHorizontalS}}:host(${multiLineState}) ::slotted([slot='icon']){align-items:start;height:100%}::slotted([slot='dismiss']){grid-area:dismiss}.actions{grid-area:actions;display:flex;justify-self:end;margin-inline-end:${spacingHorizontalS};gap:${spacingHorizontalS}}:host(${multiLineState}) .actions{margin-block-start:${spacingVerticalMNudge};margin-inline-end:0}:host(${multiLineState}) ::slotted([slot='dismiss']){align-items:start;height:100%;padding-block-start:${spacingVerticalS}}::slotted(*){font-size:inherit}`;
+  :host{display:grid;box-sizing:border-box;font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};width:100%;background:${colorNeutralBackground3};border:1px solid ${colorNeutralStroke1};padding-inline:${spacingHorizontalM};border-radius:${borderRadiusMedium};min-height:36px;align-items:center;grid-template:'icon body actions dismiss' / auto 1fr auto auto;contain:layout style paint}:host([shape='square']){border-radius:0}:host([intent='success']){background-color:${colorPaletteGreenBackground1};border-color:${colorPaletteGreenBorder1}}:host([intent='warning']){background-color:${colorPaletteDarkOrangeBackground1};border-color:${colorPaletteDarkOrangeBorder1}}:host([intent='error']){background-color:${colorPaletteRedBackground1};border-color:${colorPaletteRedBorder1}}:host([layout='multiline']){grid-template-areas:'icon body dismiss'
+      'actions actions actions';grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr;padding-block:${spacingVerticalMNudge};padding-inline:${spacingHorizontalM}}.content{grid-area:body;max-width:520px;padding-block:${spacingVerticalMNudge};padding-inline:0}:host([layout='multiline']) .content{padding:0}::slotted([slot='icon']){display:flex;grid-area:icon;flex-direction:column;align-items:center;color:${colorNeutralForeground3};margin-inline-end:${spacingHorizontalS}}:host([layout='multiline']) ::slotted([slot='icon']){align-items:start;height:100%}::slotted([slot='dismiss']){grid-area:dismiss}.actions{grid-area:actions;display:flex;justify-self:end;margin-inline-end:${spacingHorizontalS};gap:${spacingHorizontalS}}:host([layout='multiline']) .actions{margin-block-start:${spacingVerticalMNudge};margin-inline-end:0}:host([layout='multiline']) ::slotted([slot='dismiss']){align-items:start;height:100%;padding-block-start:${spacingVerticalS}}::slotted(*){font-size:inherit}`;
 
 function messageBarTemplate() {
   return html`<slot name="icon"></slot><div class="content"><slot></slot></div><div class="actions"><slot name="actions"></slot></div><slot name="dismiss"></slot>`;
@@ -10040,14 +9490,6 @@ const definition$i = DropdownOption.compose({
 
 definition$i.define(FluentDesignSystem.registry);
 
-const ProgressBarThickness = {
-  medium: "medium",
-  large: "large"
-};
-const ProgressBarShape = {
-  rounded: "rounded",
-  square: "square"
-};
 const ProgressBarValidationState = {
   success: "success",
   warning: "warning",
@@ -10139,34 +9581,17 @@ var __decorateClass$l = (decorators, target, key, kind) => {
   if (kind && result) __defProp$l(target, key, result);
   return result;
 };
-class ProgressBar extends BaseProgressBar {
-  /**
-   * Handles changes to thickness attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  thicknessChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, ProgressBarThickness);
-  }
-  /**
-   * Handles changes to shape attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  shapeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, ProgressBarShape);
-  }
-}
+class ProgressBar extends BaseProgressBar {}
 __decorateClass$l([attr], ProgressBar.prototype, "thickness", 2);
 __decorateClass$l([attr], ProgressBar.prototype, "shape", 2);
 
 const styles$h = css`
   ${display("block")}
 
-  :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content}:host(${largeState}){height:4px}:host(${squareState}){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
+  :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content}:host([thickness='large']){height:4px}:host([shape='square']){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
       to right,${colorNeutralBackground6} 0%,${colorTransparentBackground} 50%,${colorNeutralBackground6} 100%
-    );animation-name:indeterminate;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite}:host(${errorState}) .indicator{background-color:${colorPaletteRedBackground3}}:host(${warningState}) .indicator{background-color:${colorPaletteDarkOrangeBackground3}}:host(${successState}) .indicator{background-color:${colorPaletteGreenBackground3}}@layer animations{@media (prefers-reduced-motion:no-preference){:host([value]){transition:none}:host(:not([value])) .indicator{animation-duration:0.01ms;animation-iteration-count:1}}}@keyframes indeterminate{0%{inset-inline-start:-33%}100%{inset-inline-start:100%}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{background-color:CanvasText}.indicator,:host(:is(${successState},${warningState},${errorState})) .indicator{background-color:Highlight}`));
+    );animation-name:indeterminate;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite}:host([validation-state='error']) .indicator{background-color:${colorPaletteRedBackground3}}:host([validation-state='warning']) .indicator{background-color:${colorPaletteDarkOrangeBackground3}}:host([validation-state='success']) .indicator{background-color:${colorPaletteGreenBackground3}}@layer animations{@media (prefers-reduced-motion:no-preference){:host([value]){transition:none}:host(:not([value])) .indicator{animation-duration:0.01ms;animation-iteration-count:1}}}@keyframes indeterminate{0%{inset-inline-start:-33%}100%{inset-inline-start:100%}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{background-color:CanvasText}.indicator,:host(:is([validation-state='success'],[validation-state='warning'],[validation-state='error'])) .indicator{background-color:Highlight}`));
 
 function progressTemplate() {
   return html`<div class="indicator" part="indicator" style="${x => typeof x.value === "number" ? `width: ${x.percentComplete}%` : void 0}"></div>`;
@@ -10717,7 +10142,7 @@ __decorateClass$k([attr({
 const styles$g = css`
   ${display("flex")}
 
-  :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host(${disabledState}),:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}`;
+  :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}`;
 
 function radioGroupTemplate() {
   return html`<template @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
@@ -10843,17 +10268,6 @@ __decorateClass$j([attr({
 __decorateClass$j([observable], BaseRatingDisplay.prototype, "slottedIcon", 2);
 __decorateClass$j([observable], BaseRatingDisplay.prototype, "customIcon", 2);
 
-const RatingDisplayColor = {
-  neutral: "neutral",
-  brand: "brand",
-  marigold: "marigold"
-};
-const RatingDisplaySize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
-
 var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
 var __decorateClass$i = (decorators, target, key, kind) => {
@@ -10867,24 +10281,6 @@ class RatingDisplay extends BaseRatingDisplay {
     super(...arguments);
     this.compact = false;
   }
-  /**
-   * Handles changes to the color attribute.
-   *
-   * @param prev - The previous state
-   * @param next - The next state
-   */
-  colorChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, RatingDisplayColor);
-  }
-  /**
-   * Handles changes to the size attribute.
-   *
-   * @param prev - The previous state
-   * @param next - The next state
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, RatingDisplaySize);
-  }
   /**
    * Overrides the selected value and returns 1 if compact is true.
    *
@@ -10911,7 +10307,7 @@ __decorateClass$i([attr({
 const styles$e = css`
   ${display("inline-flex")}
 
-  :host{--icon-size:16px;--icon-color-filled:${colorPaletteMarigoldBackground3};--icon-color-empty:${colorPaletteMarigoldBackground2};align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host(${smallState}){--icon-size:12px}:host(${largeState}){--icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}::slotted([slot='icon']){display:none}svg{width:var(--icon-size);height:var(--icon-size);fill:var(--icon-color-filled);margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(odd){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host(${neutralState}) svg{--icon-color-filled:${colorNeutralForeground1}}:host(${brandState}) svg{--icon-color-filled:${colorBrandBackground}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:var(--icon-color-empty)}:host(${neutralState}:is([value^='-'],[value='0'])) svg,:host(${neutralState}:not([value])) svg,:host(${neutralState}) svg[selected] ~ svg{--icon-color-empty:${colorNeutralBackground1Pressed}}:host(${brandState}:is([value^='-'],[value='0'])) svg,:host(${brandState}:not([value])) svg,:host(${brandState}) svg[selected] ~ svg{--icon-color-empty:${colorBrandStroke2}}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host(${smallState}) .value-label,:host(${smallState}) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host(${largeState}) .value-label,:host(${largeState}) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host(${smallState}) .count-label::before,:host(${smallState}) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host(${largeState}) .count-label::before,:host(${largeState}) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{--icon-size:16px;--icon-color-filled:${colorPaletteMarigoldBackground3};--icon-color-empty:${colorPaletteMarigoldBackground2};align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host([size='small']){--icon-size:12px}:host([size='large']){--icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}::slotted([slot='icon']){display:none}svg{width:var(--icon-size);height:var(--icon-size);fill:var(--icon-color-filled);margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(odd){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host([color='neutral']) svg{--icon-color-filled:${colorNeutralForeground1}}:host([color='brand']) svg{--icon-color-filled:${colorBrandBackground}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:var(--icon-color-empty)}:host([color='neutral']:is([value^='-'],[value='0'],:not([value]))) svg,:host([color='neutral']) svg[selected] ~ svg{--icon-color-empty:${colorNeutralBackground1Pressed}}:host([color='brand']:is([value^='-'],[value='0'],:not([value]))) svg,:host([color='brand']) svg[selected] ~ svg{--icon-color-empty:${colorBrandStroke2}}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host([size='small']) .value-label,:host([size='small']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host([size='large']) .value-label,:host([size='large']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host([size='small']) .count-label::before,:host([size='small']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host([size='large']) .count-label::before,:host([size='large']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([color]) svg{fill:CanvasText}:host([color]:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,:host([color]) svg[selected] ~ svg{fill:Canvas;stroke:CanvasText}`));
 
 const star = html`<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><symbol id="star"><path d="M9.10433 2.89874C9.47114 2.15549 10.531 2.1555 10.8978 2.89874L12.8282 6.81024L17.1448 7.43748C17.9651 7.55666 18.2926 8.56464 17.699 9.14317L14.5755 12.1878L15.3129 16.487C15.453 17.3039 14.5956 17.9269 13.8619 17.5412L10.0011 15.5114L6.14018 17.5412C5.40655 17.9269 4.54913 17.3039 4.68924 16.487L5.4266 12.1878L2.30308 9.14317C1.70956 8.56463 2.03708 7.55666 2.8573 7.43748L7.17389 6.81024L9.10433 2.89874Z" /></symbol></svg>`;
@@ -10931,10 +10327,6 @@ const definition$e = RatingDisplay.compose({
 
 definition$e.define(FluentDesignSystem.registry);
 
-const SliderSize = {
-  small: "small",
-  medium: "medium"
-};
 const SliderOrientation = Orientation;
 const SliderMode = {
   singleValue: "single-value"
@@ -11060,9 +10452,6 @@ class Slider extends FASTElement {
   get labels() {
     return Object.freeze(Array.from(this.elementInternals.labels));
   }
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, SliderSize);
-  }
   handleChange(_, propertyName) {
     switch (propertyName) {
       case "min":
@@ -11325,7 +10714,6 @@ class Slider extends FASTElement {
   }
   orientationChanged(prev, next) {
     this.elementInternals.ariaOrientation = next ?? Orientation.horizontal;
-    swapStates(this.elementInternals, prev, next, Orientation);
     if (this.$fastController.isConnected) {
       this.setSliderPosition();
     }
@@ -11510,11 +10898,11 @@ __decorateClass$h([attr], Slider.prototype, "mode", 2);
 const styles$d = css`
   ${display("inline-grid")}
 
-  :host{--thumb-size:20px;--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--rail-color:${colorCompoundBrandBackground};--track-color:${colorNeutralStrokeAccessible};--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;position:relative;align-items:center;justify-content:center;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:120px;min-height:32px;grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr var(--track-margin-inline)}:host(:hover){--rail-color:${colorCompoundBrandBackgroundHover}}:host(:active){--rail-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled){--rail-color:${colorNeutralForegroundDisabled};--track-color:${colorNeutralBackgroundDisabled}}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host(${smallState}){--thumb-size:16px;--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall}}:host(${verticalState}){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);min-height:120px;grid-template-rows:var(--track-margin-inline) 1fr var(--track-margin-inline);grid-template-columns:1fr var(--thumb-size) 1fr;width:unset;min-width:32px;justify-items:center}:host(:not([slot='input']):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host:after,.track{height:var(--track-size);width:100%}:host:after{background-image:linear-gradient(
+  :host{--thumb-size:20px;--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--rail-color:${colorCompoundBrandBackground};--track-color:${colorNeutralStrokeAccessible};--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;position:relative;align-items:center;justify-content:center;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:120px;min-height:32px;grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr var(--track-margin-inline)}:host(:hover){--rail-color:${colorCompoundBrandBackgroundHover}}:host(:active){--rail-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled){--rail-color:${colorNeutralForegroundDisabled};--track-color:${colorNeutralBackgroundDisabled}}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host([size='small']){--thumb-size:16px;--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall}}:host([orientation='vertical']){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);min-height:120px;grid-template-rows:var(--track-margin-inline) 1fr var(--track-margin-inline);grid-template-columns:1fr var(--thumb-size) 1fr;width:unset;min-width:32px;justify-items:center}:host(:not([slot='input']):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host:after,.track{height:var(--track-size);width:100%}:host:after{background-image:linear-gradient(
       var(--slider-direction),var(--rail-color) 0%,var(--rail-color) 50%,var(--track-color) 50.1%,var(--track-color) 100%
-    );border-radius:var(--border-radius);content:'';grid-row:1 / -1;grid-column:1 / -1}.track{position:relative;background-color:var(--track-color);grid-row:2 / 2;grid-column:2 / 2;forced-color-adjust:none;overflow:hidden}:host(${verticalState})::after,:host(${verticalState}) .track{height:100%;width:var(--track-size)}.track::before{content:'';position:absolute;height:100%;border-radius:inherit;inset-inline-start:0;width:var(--slider-progress)}:host(:dir(rtl)) .track::before{width:calc(100% - var(--slider-progress))}:host(${verticalState}) .track::before{width:100%;bottom:0;height:var(--slider-progress)}:host([step]) .track::after{content:'';position:absolute;border-radius:inherit;inset:var(--step-marker-inset);background-image:repeating-linear-gradient(
+    );border-radius:var(--border-radius);content:'';grid-row:1 / -1;grid-column:1 / -1}.track{position:relative;background-color:var(--track-color);grid-row:2 / 2;grid-column:2 / 2;forced-color-adjust:none;overflow:hidden}:host([orientation='vertical'])::after,:host([orientation='vertical']) .track{height:100%;width:var(--track-size)}.track::before{content:'';position:absolute;height:100%;border-radius:inherit;inset-inline-start:0;width:var(--slider-progress)}:host(:dir(rtl)) .track::before{width:calc(100% - var(--slider-progress))}:host([orientation='vertical']) .track::before{width:100%;bottom:0;height:var(--slider-progress)}:host([step]) .track::after{content:'';position:absolute;border-radius:inherit;inset:var(--step-marker-inset);background-image:repeating-linear-gradient(
       var(--slider-direction),#0000 0%,#0000 calc(var(--step-rate) - 1px),${colorNeutralBackground1} calc(var(--step-rate) - 1px),${colorNeutralBackground1} var(--step-rate)
-    )}.thumb-container{position:absolute;grid-row:2 / 2;grid-column:2 / 2;transform:translateX(-50%);left:var(--slider-thumb)}:host(${verticalState}) .thumb-container{transform:translateY(50%);left:unset;bottom:var(--slider-thumb)}:host(:not(:active)) :is(.thumb-container,.track::before){transition:all 0.2s ease}.thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:${borderRadiusCircular};box-shadow:0 0 0 calc(var(--thumb-size) * 0.2) ${colorNeutralBackground1} inset;border:calc(var(--thumb-size) * 0.05) solid ${colorNeutralStroke1};box-sizing:border-box}.thumb,.track::before{background-color:var(--rail-color)}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    )}.thumb-container{position:absolute;grid-row:2 / 2;grid-column:2 / 2;transform:translateX(-50%);left:var(--slider-thumb)}:host([orientation='vertical']) .thumb-container{transform:translateY(50%);left:unset;bottom:var(--slider-thumb)}:host(:not(:active)) :is(.thumb-container,.track::before){transition:all 0.2s ease}.thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:${borderRadiusCircular};box-shadow:0 0 0 calc(var(--thumb-size) * 0.2) ${colorNeutralBackground1} inset;border:calc(var(--thumb-size) * 0.05) solid ${colorNeutralStroke1};box-sizing:border-box}.thumb,.track::before{background-color:var(--rail-color)}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .track:hover,.track:active,.track{background:WindowText}.thumb:hover,.thumb:active,.thumb{background:ButtonText}:host(:hover) .track::before,:host(:active) .track::before,.track::before{background:Highlight}`));
 
 function sliderTemplate(options = {}) {
@@ -11545,20 +10933,6 @@ class BaseSpinner extends FASTElement {
   }
 }
 
-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$g = Object.defineProperty;
 var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
 var __decorateClass$g = (decorators, target, key, kind) => {
@@ -11567,31 +10941,14 @@ var __decorateClass$g = (decorators, target, key, kind) => {
   if (kind && result) __defProp$g(target, key, result);
   return result;
 };
-class Spinner extends BaseSpinner {
-  /**
-   * Handles changes to size attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, SpinnerSize);
-  }
-  /**
-   * Handles changes to appearance attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  appearanceChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, SpinnerAppearance);
-  }
-}
+class Spinner extends BaseSpinner {}
 __decorateClass$g([attr], Spinner.prototype, "size", 2);
 __decorateClass$g([attr], Spinner.prototype, "appearance", 2);
 
 const styles$c = css`
   ${display("inline-flex")}
 
-  :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host(${tinyState}){--indicatorSize:${strokeWidthThick};--size:20px}:host(${extraSmallState}){--indicatorSize:${strokeWidthThick};--size:24px}:host(${smallState}){--indicatorSize:${strokeWidthThick};--size:28px}:host(${largeState}){--indicatorSize:${strokeWidthThicker};--size:36px}:host(${extraLargeState}){--indicatorSize:${strokeWidthThicker};--size:40px}:host(${hugeState}){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host(${invertedState}) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;right:50%}.end{overflow:hidden;left:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-right-color:currentcolor}:host(${invertedState}) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host([size='tiny']){--indicatorSize:${strokeWidthThick};--size:20px}:host([size='extra-small']){--indicatorSize:${strokeWidthThick};--size:24px}:host([size='small']){--indicatorSize:${strokeWidthThick};--size:28px}:host([size='large']){--indicatorSize:${strokeWidthThicker};--size:36px}:host([size='extra-large']){--indicatorSize:${strokeWidthThicker};--size:40px}:host([size='huge']){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host([appearance='inverted']) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;right:50%}.end{overflow:hidden;left:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-right-color:currentcolor}:host([appearance='inverted']) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-right-color:Highlight}`));
 
 const template$c = html`<slot name="indicator"><div class="background"></div><div class="progress"><div class="spinner"><div class="start"><div class="indicator"></div></div><div class="end"><div class="indicator"></div></div></div></div></slot>`;
@@ -12133,11 +11490,6 @@ const TablistAppearance = {
   subtle: "subtle",
   transparent: "transparent"
 };
-const TablistSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
 const TablistOrientation = Orientation;
 
 var __defProp$c = Object.defineProperty;
@@ -12409,18 +11761,6 @@ class Tablist extends BaseTablist {
     this.activeTabScale = 1;
     this.appearance = TablistAppearance.transparent;
   }
-  /**
-   * @internal
-   */
-  appearanceChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, TablistAppearance);
-  }
-  /**
-   * @internal
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, TablistSize);
-  }
   /**
    * calculateAnimationProperties
    *
@@ -12533,7 +11873,7 @@ const template$7 = html`<template role="tablist"><slot name="tab" ${slotted("tab
 const styles$7 = css`
   ${display("flex")}
 
-  :host{--tabPaddingInline:inherit;--tabPaddingBlock:inherit;--tabIndicatorInsetInline:0;--tabIndicatorInsetBlock:0;box-sizing:border-box;color:${colorNeutralForeground2};flex-direction:row}:host(${verticalState}){flex-direction:column}:host ::slotted([role='tab']){align-items:flex-start}:host ::slotted([slot='tab'][data-animate='true'])::after{transition-property:transform;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax}}:host ::slotted([slot='tab'])::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host(${verticalState}) ::slotted([slot='tab'])::after{width:${strokeWidthThicker};height:unset;margin-block-start:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted([slot='tab'])::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock);position:absolute;margin-top:auto}:host ::slotted([slot='tab'])::before{inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock)}:host ::slotted([slot='tab'][aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}:host ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left}:host(${verticalState}) ::slotted([slot='tab'])::before,:host(${verticalState}) ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host(:where(${smallState},${largeState})) ::slotted([slot='tab']){padding-inline:var(--tabPaddingInline);padding-block:var(--tabPaddingBlock)}:host(${smallState}) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalSNudge};--tabPaddingInline:${spacingHorizontalSNudge};font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host(${largeState}) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalL};--tabPaddingInline:${spacingHorizontalMNudge};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host ::slotted([slot='tab'])::after,:host ::slotted([slot='tab'])::before,:host ::slotted([slot='tab']:hover)::after{inset-inline:var(--tabIndicatorInsetInline)}:host ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host(${smallState}) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalSNudge}}:host(${largeState}) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host(${verticalState}) ::slotted([slot='tab']){padding-block:var(--tabPaddingBlock)}:host(${verticalState}) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host(${verticalState}${smallState}) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalXXS}}:host(${verticalState}${largeState}) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host(${verticalState}) ::slotted([slot='tab'])::after,:host(${verticalState}) ::slotted([slot='tab'])::before,:host(${verticalState}) ::slotted([slot='tab']:hover)::after{inset-inline:0;inset-block:var(--tabIndicatorInsetBlock)}:host(${verticalState}){--tabIndicatorInsetBlock:${spacingVerticalS}}:host(${verticalState}${smallState}){--tabIndicatorInsetBlock:${spacingVerticalSNudge}}:host(${verticalState}${largeState}){--tabIndicatorInsetBlock:${spacingVerticalMNudge}}:host(${disabledState}){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='tab']){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='tab']:after){background-color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='tab'][aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='tab']:hover):before{content:unset}:host(${subtleState}) ::slotted([slot='tab']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host(${subtleState}) ::slotted([slot='tab']:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}`;
+  :host{--tabPaddingInline:inherit;--tabPaddingBlock:inherit;--tabIndicatorInsetInline:0;--tabIndicatorInsetBlock:0;box-sizing:border-box;color:${colorNeutralForeground2};flex-direction:row}:host([orientation='vertical']){flex-direction:column}:host ::slotted([role='tab']){align-items:flex-start}:host ::slotted([slot='tab'][data-animate='true'])::after{transition-property:transform;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax}}:host ::slotted([slot='tab'])::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted([slot='tab'])::after{width:${strokeWidthThicker};height:unset;margin-block-start:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted([slot='tab'])::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock);position:absolute;margin-top:auto}:host ::slotted([slot='tab'])::before{inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock)}:host ::slotted([slot='tab'][aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}:host ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left}:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host(:where([size='small'],[size='large'])) ::slotted([slot='tab']){padding-inline:var(--tabPaddingInline);padding-block:var(--tabPaddingBlock)}:host([size='small']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalSNudge};--tabPaddingInline:${spacingHorizontalSNudge};font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='large']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalL};--tabPaddingInline:${spacingHorizontalMNudge};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host ::slotted([slot='tab'])::after,:host ::slotted([slot='tab'])::before,:host ::slotted([slot='tab']:hover)::after{inset-inline:var(--tabIndicatorInsetInline)}:host ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host([size='small']) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalSNudge}}:host([size='large']) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host([orientation='vertical']) ::slotted([slot='tab']){padding-block:var(--tabPaddingBlock)}:host([orientation='vertical']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host([orientation='vertical'][size='small']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalXXS}}:host([orientation='vertical'][size='large']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host([orientation='vertical']) ::slotted([slot='tab'])::after,:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab']:hover)::after{inset-inline:0;inset-block:var(--tabIndicatorInsetBlock)}:host([orientation='vertical']){--tabIndicatorInsetBlock:${spacingVerticalS}}:host([orientation='vertical'][size='small']){--tabIndicatorInsetBlock:${spacingVerticalSNudge}}:host([orientation='vertical'][size='large']){--tabIndicatorInsetBlock:${spacingVerticalMNudge}}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:hover):before{content:unset}:host([appearance='subtle']) ::slotted([slot='tab']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted([slot='tab']:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}`;
 
 const definition$7 = Tablist.compose({
   name: `${FluentDesignSystem.prefix}-tablist`,
@@ -12543,17 +11883,11 @@ const definition$7 = Tablist.compose({
 
 definition$7.define(FluentDesignSystem.registry);
 
-const TextAreaSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
 const TextAreaAppearance = {
   outline: "outline",
   filledLighter: "filled-lighter",
   filledDarker: "filled-darker"
 };
-const TextAreaAppearancesForDisplayShadow = [TextAreaAppearance.filledLighter, TextAreaAppearance.filledDarker];
 const TextAreaResize = {
   none: "none",
   both: "both",
@@ -12999,20 +12333,6 @@ class TextArea extends BaseTextArea {
       node.size = this.size;
     });
   }
-  appearanceChanged(prev, next) {
-    toggleState(this.elementInternals, prev, false);
-    if (hasMatchingState(TextAreaAppearance, next)) {
-      toggleState(this.elementInternals, next, true);
-    } else {
-      this.appearance = TextAreaAppearance.outline;
-    }
-  }
-  blockChanged() {
-    toggleState(this.elementInternals, "block", this.block);
-  }
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, TextAreaSize);
-  }
   /**
    * @internal
    */
@@ -13023,10 +12343,6 @@ class TextArea extends BaseTextArea {
           node.size = this.size;
         });
         break;
-      case "appearance":
-      case "displayShadow":
-        this.maybeDisplayShadow();
-        break;
     }
   }
   /**
@@ -13034,9 +12350,6 @@ class TextArea extends BaseTextArea {
    */
   connectedCallback() {
     super.connectedCallback();
-    this.maybeDisplayShadow();
-    Observable.getNotifier(this).subscribe(this, "appearance");
-    Observable.getNotifier(this).subscribe(this, "displayShadow");
     Observable.getNotifier(this).subscribe(this, "size");
   }
   /**
@@ -13044,13 +12357,8 @@ class TextArea extends BaseTextArea {
    */
   disconnectedCallback() {
     super.disconnectedCallback();
-    Observable.getNotifier(this).unsubscribe(this, "appearance");
-    Observable.getNotifier(this).unsubscribe(this, "displayShadow");
     Observable.getNotifier(this).unsubscribe(this, "size");
   }
-  maybeDisplayShadow() {
-    toggleState(this.elementInternals, "display-shadow", this.displayShadow && TextAreaAppearancesForDisplayShadow.includes(this.appearance));
-  }
 }
 __decorateClass$9([attr({
   mode: "fromView"
@@ -13063,7 +12371,7 @@ __decorateClass$9([attr], TextArea.prototype, "size", 2);
 const styles$6 = css`
   ${display("inline-block")}
 
-  :host{--font-size:${fontSizeBase300};--line-height:${lineHeightBase300};--padding-inline:${spacingHorizontalMNudge};--padding-block:${spacingVerticalSNudge};--min-block-size:52px;--block-size:var(--min-block-size);--inline-size:18rem;--border-width:${strokeWidthThin};--control-padding-inline:${spacingHorizontalXXS};--color:${colorNeutralForeground1};--background-color:${colorNeutralBackground1};--border-color:${colorNeutralStroke1};--border-block-end-color:${colorNeutralStrokeAccessible};--placeholder-color:${colorNeutralForeground4};--focus-indicator-color:${colorCompoundBrandStroke};--box-shadow:none;--contain-size:size;--resize:none;color:var(--color);font-family:${fontFamilyBase};font-size:var(--font-size);font-weight:${fontWeightRegular};line-height:var(--line-height);position:relative}:host(:hover){--border-color:${colorNeutralStroke1Hover};--border-block-end-color:${colorNeutralStrokeAccessibleHover}}:host(:active){--border-color:${colorNeutralStroke1Pressed};--border-block-end-color:${colorNeutralStrokeAccessiblePressed}}:host(:focus-within){outline:none}:host(${blockState}:not([hidden])){display:block}:host(${smallState}){--font-size:${fontSizeBase200};--line-height:${lineHeightBase200};--min-block-size:40px;--padding-block:${spacingVerticalXS};--padding-inline:${spacingHorizontalSNudge};--control-padding-inline:${spacingHorizontalXXS}}:host(${largeState}){--font-size:${fontSizeBase400};--line-height:${lineHeightBase400};--min-block-size:64px;--padding-block:${spacingVerticalS};--padding-inline:${spacingHorizontalM};--control-padding-inline:${spacingHorizontalSNudge}}:host(${resizeBothState}:not(:disabled)){--resize:both}:host(${resizeHorizontalState}:not(:disabled)){--resize:horizontal}:host(${resizeVerticalState}:not(:disabled)){--resize:vertical}:host(${autoResizeState}){--block-size:auto;--contain-size:inline-size}:host(${filledDarkerState}){--background-color:${colorNeutralBackground3};--border-color:var(--background-color);--border-block-end-color:var(--border-color)}:host(${filledLighterState}){--border-color:var(--background-color);--border-block-end-color:var(--border-color)}:host(${filledDarkerState}${displayShadowState}),:host(${filledLighterState}${displayShadowState}){--box-shadow:${shadow2}}:host(${userInvalidState}){--border-color:${colorPaletteRedBorder2};--border-block-end-color:${colorPaletteRedBorder2}}:host(:disabled){--color:${colorNeutralForegroundDisabled};--background-color:${colorTransparentBackground};--border-color:${colorNeutralStrokeDisabled};--border-block-end-color:var(--border-color);--box-shadow:none;--placeholder-color:${colorNeutralForegroundDisabled};cursor:no-drop;user-select:none}.root{background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-block-end-color:var(--border-block-end-color);border-radius:${borderRadiusMedium};box-sizing:border-box;box-shadow:var(--box-shadow);contain:paint layout style var(--contain-size);display:grid;grid-template:1fr / 1fr;inline-size:var(--inline-size);min-block-size:var(--min-block-size);block-size:var(--block-size);overflow:hidden;padding:var(--padding-block) var(--padding-inline);position:relative;resize:var(--resize)}:host(${blockState}) .root{inline-size:auto}.root::after{border-bottom:2px solid var(--focus-indicator-color);border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};box-sizing:border-box;clip-path:inset(calc(100% - 2px) 1px 0px);content:'';height:max(2px,${borderRadiusMedium});inset:auto -1px 0;position:absolute;transform:scaleX(0);transition-delay:${curveAccelerateMid};transition-duration:${durationUltraFast};transition-property:transform}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host([readonly]) .root::after,:host(:disabled) .root::after{content:none}label{color:var(--color);display:flex;inline-size:fit-content;padding-block-end:${spacingVerticalXS};padding-inline-end:${spacingHorizontalXS}}:host(:empty) label,label[hidden]{display:none}.auto-sizer,.control{box-sizing:border-box;font:inherit;grid-column:1 / -1;grid-row:1 / -1;letter-space:inherit;padding:0 var(--control-padding-inline)}.auto-sizer{display:none;padding-block-end:2px;pointer-events:none;visibility:hidden;white-space:pre-wrap}:host(${autoResizeState}) .auto-sizer{display:block}.control{appearance:none;background-color:transparent;border:0;color:inherit;field-sizing:content;max-block-size:100%;outline:0;resize:none;text-align:inherit}.control:disabled{cursor:inherit}.control::placeholder{color:var(--placeholder-color)}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{--font-size:${fontSizeBase300};--line-height:${lineHeightBase300};--padding-inline:${spacingHorizontalMNudge};--padding-block:${spacingVerticalSNudge};--min-block-size:52px;--block-size:var(--min-block-size);--inline-size:18rem;--border-width:${strokeWidthThin};--control-padding-inline:${spacingHorizontalXXS};--color:${colorNeutralForeground1};--background-color:${colorNeutralBackground1};--border-color:${colorNeutralStroke1};--border-block-end-color:${colorNeutralStrokeAccessible};--placeholder-color:${colorNeutralForeground4};--focus-indicator-color:${colorCompoundBrandStroke};--box-shadow:none;--contain-size:size;--resize:none;color:var(--color);font-family:${fontFamilyBase};font-size:var(--font-size);font-weight:${fontWeightRegular};line-height:var(--line-height);position:relative}:host(:hover){--border-color:${colorNeutralStroke1Hover};--border-block-end-color:${colorNeutralStrokeAccessibleHover}}:host(:active){--border-color:${colorNeutralStroke1Pressed};--border-block-end-color:${colorNeutralStrokeAccessiblePressed}}:host(:focus-within){outline:none}:host([block]:not([hidden])){display:block}:host([size='small']){--font-size:${fontSizeBase200};--line-height:${lineHeightBase200};--min-block-size:40px;--padding-block:${spacingVerticalXS};--padding-inline:${spacingHorizontalSNudge};--control-padding-inline:${spacingHorizontalXXS}}:host([size='large']){--font-size:${fontSizeBase400};--line-height:${lineHeightBase400};--min-block-size:64px;--padding-block:${spacingVerticalS};--padding-inline:${spacingHorizontalM};--control-padding-inline:${spacingHorizontalSNudge}}:host([resize='both']:not(:disabled)){--resize:both}:host([resize='horizontal']:not(:disabled)){--resize:horizontal}:host([resize='vertical']:not(:disabled)){--resize:vertical}:host([auto-resize]){--block-size:auto;--contain-size:inline-size}:host([appearance='filled-darker']){--background-color:${colorNeutralBackground3};--border-color:var(--background-color);--border-block-end-color:var(--border-color)}:host([appearance='filled-lighter']){--border-color:var(--background-color);--border-block-end-color:var(--border-color)}:host([appearance='filled-darker'][display-shadow]),:host([appearance='filled-lighter'][display-shadow]){--box-shadow:${shadow2}}:host(${userInvalidState}){--border-color:${colorPaletteRedBorder2};--border-block-end-color:${colorPaletteRedBorder2}}:host(:disabled){--color:${colorNeutralForegroundDisabled};--background-color:${colorTransparentBackground};--border-color:${colorNeutralStrokeDisabled};--border-block-end-color:var(--border-color);--box-shadow:none;--placeholder-color:${colorNeutralForegroundDisabled};cursor:no-drop;user-select:none}.root{background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-block-end-color:var(--border-block-end-color);border-radius:${borderRadiusMedium};box-sizing:border-box;box-shadow:var(--box-shadow);contain:paint layout style var(--contain-size);display:grid;grid-template:1fr / 1fr;inline-size:var(--inline-size);min-block-size:var(--min-block-size);block-size:var(--block-size);overflow:hidden;padding:var(--padding-block) var(--padding-inline);position:relative;resize:var(--resize)}:host([block]) .root{inline-size:auto}.root::after{border-bottom:2px solid var(--focus-indicator-color);border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};box-sizing:border-box;clip-path:inset(calc(100% - 2px) 1px 0px);content:'';height:max(2px,${borderRadiusMedium});inset:auto -1px 0;position:absolute;transform:scaleX(0);transition-delay:${curveAccelerateMid};transition-duration:${durationUltraFast};transition-property:transform}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host([readonly]) .root::after,:host(:disabled) .root::after{content:none}label{color:var(--color);display:flex;inline-size:fit-content;padding-block-end:${spacingVerticalXS};padding-inline-end:${spacingHorizontalXS}}:host(:empty) label,label[hidden]{display:none}.auto-sizer,.control{box-sizing:border-box;font:inherit;grid-column:1 / -1;grid-row:1 / -1;letter-space:inherit;padding:0 var(--control-padding-inline)}.auto-sizer{display:none;padding-block-end:2px;pointer-events:none;visibility:hidden;white-space:pre-wrap}:host([auto-resize]) .auto-sizer{display:block}.control{appearance:none;background-color:transparent;border:0;color:inherit;field-sizing:content;max-block-size:100%;outline:0;resize:none;text-align:inherit}.control:disabled{cursor:inherit}.control::placeholder{color:var(--placeholder-color)}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{--border-color:FieldText;--border-block-end-color:FieldText;--focus-indicator-color:Highlight;--placeholder-color:FieldText}:host(:hover),:host(:active),:host(:focus-within){--border-color:Highlight;--border-block-end-color:Highlight}:host(:disabled){--color:GrayText;--border-color:GrayText;--border-block-end-color:GrayText;--placeholder-color:GrayText}`));
 
 function textAreaTemplate() {
@@ -13088,17 +12396,6 @@ const definition$6 = TextArea.compose({
 
 definition$6.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",
@@ -13493,24 +12790,7 @@ var __decorateClass$7 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$7(target, key, result);
   return result;
 };
-class TextInput extends BaseTextInput {
-  /**
-   * Handles changes to appearance attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  appearanceChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, TextInputAppearance);
-  }
-  /**
-   * Handles changes to `control-size` attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  controlSizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, TextInputControlSize);
-  }
-}
+class TextInput extends BaseTextInput {}
 __decorateClass$7([attr], TextInput.prototype, "appearance", 2);
 __decorateClass$7([attr({
   attribute: "control-size"
@@ -13520,7 +12800,7 @@ applyMixins(TextInput, StartEnd);
 const styles$5 = css`
   ${display("block")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(${outlineState}:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host(${smallState}) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host(${smallState}) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host(${smallState}) ::slotted([slot='start']),:host(${smallState}) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host(${largeState}) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host(${largeState}) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host(${largeState}) ::slotted([slot='start']),:host(${largeState}) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host(${underlineState}) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host(${underlineState}:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(${underlineState}:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState}:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState}[disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host(${filledLighterState}) .root,:host(${filledDarkerState}) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host(${filledLighterState}) .root{background:${colorNeutralBackground1}}:host(${filledDarkerState}) .root{background:${colorNeutralBackground3}}:host(${filledLighterState}:hover) .root,:host(${filledDarkerState}:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host(${filledLighterState}:active) .root,:host(${filledDarkerState}:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
 
 function textInputTemplate(options = {}) {
   return html`<template @beforeinput="${(x, c) => x.beforeinputHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><label part="label" for="control" class="label" ${ref("controlLabel")}><slot ${slotted({
@@ -13541,36 +12821,6 @@ const definition$5 = TextInput.compose({
 
 definition$5.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$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
 var __decorateClass$6 = (decorators, target, key, kind) => {
@@ -13595,67 +12845,6 @@ class Text extends FASTElement {
     this.strikethrough = false;
     this.block = false;
   }
-  /**
-   * Handles changes to size attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  sizeChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, TextSize, "size-");
-  }
-  /**
-   * Handles changes to font attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  fontChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, TextFont);
-  }
-  /**
-   * Handles changes to weight attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  weightChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, TextWeight);
-  }
-  /**
-   * Handles changes to align attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
-   */
-  alignChanged(prev, next) {
-    swapStates(this.elementInternals, prev, next, TextAlign);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    Observable.getNotifier(this).subscribe(this);
-    Object.keys(this.$fastController.definition.attributeLookup).forEach(key => {
-      this.handleChange(this, key);
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    Observable.getNotifier(this).unsubscribe(this);
-  }
-  /**
-   * Handles changes to observable properties
-   * @internal
-   * @param source - the source of the change
-   * @param propertyName - the property name being changed
-   */
-  handleChange(source, propertyName) {
-    switch (propertyName) {
-      case "nowrap":
-      case "truncate":
-      case "italic":
-      case "underline":
-      case "strikethrough":
-      case "block":
-        toggleState(this.elementInternals, propertyName, !!this[propertyName]);
-        break;
-    }
-  }
 }
 __decorateClass$6([attr({
   mode: "boolean"
@@ -13683,7 +12872,7 @@ __decorateClass$6([attr], Text.prototype, "align", 2);
 const styles$4 = css`
   ${display("inline")}
 
-  :host{contain:content;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start}:host(${nowrapState}),:host(${nowrapState}) ::slotted(*){white-space:nowrap;overflow:hidden}:host(${truncateState}),:host(${truncateState}) ::slotted(*){text-overflow:ellipsis}:host(${blockState}){display:block}:host(${italicState}){font-style:italic}:host(${underlineState}){text-decoration-line:underline}:host(${strikethroughState}){text-decoration-line:line-through}:host(${underlineState}${strikethroughState}){text-decoration-line:line-through underline}:host(${size100State}){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host(${size200State}){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${size400State}){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${size500State}){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host(${size600State}){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host(${size700State}){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host(${size800State}){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host(${size900State}){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host(${size1000State}){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host(${monospaceState}){font-family:${fontFamilyMonospace}}:host(${numericState}){font-family:${fontFamilyNumeric}}:host(${mediumState}){font-weight:${fontWeightMedium}}:host(${semiboldState}){font-weight:${fontWeightSemibold}}:host(${boldState}){font-weight:${fontWeightBold}}:host(${centerState}){text-align:center}:host(${endState}){text-align:end}:host(${justifyState}){text-align:justify}::slotted(*){font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
+  :host{contain:content;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start}:host([nowrap]),:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]),:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]){display:block}:host([italic]){font-style:italic}:host([underline]){text-decoration-line:underline}:host([strikethrough]){text-decoration-line:line-through}:host([underline][strikethrough]){text-decoration-line:line-through underline}:host([size='100']){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']){font-family:${fontFamilyMonospace}}:host([font='numeric']){font-family:${fontFamilyNumeric}}:host([weight='medium']){font-weight:${fontWeightMedium}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([weight='bold']){font-weight:${fontWeightBold}}:host([align='center']){text-align:center}:host([align='end']){text-align:end}:host([align='justify']){text-align:justify}::slotted(*){font:inherit;line-height:inherit;text-decoration-line:inherit;text-align:inherit;text-decoration-line:inherit;margin:0}`;
 
 const template$4 = html`<slot></slot>`;
 
@@ -13757,8 +12946,10 @@ __decorateClass$5([attr({
 const styles$3 = css`
   ${styles$E}
 
-  :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}${primaryState}){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}${primaryState}:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}${subtleState}){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}${subtleState}:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}${outlineState}:hover),:host(${pressedState}${transparentState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}${outlineState}:active),:host(${pressedState}${transparentState}:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}${transparentState}){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}${transparentState}:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}${transparentState}:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host(${pressedState}),:host(${pressedState}${primaryState}),:host(${pressedState}${subtleState}),:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background:SelectedItem;color:SelectedItemText}`));
+  :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}[appearance='primary']){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}[appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}[appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}[appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}[appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}[appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}[appearance='outline']),:host(${pressedState}[appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}[appearance='outline']:hover),:host(${pressedState}[appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}[appearance='outline']:active),:host(${pressedState}[appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}[appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}[appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}[appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host(${pressedState}),:host(
+        ${pressedState}:is([appearance='primary'],[appearance='subtle'],[appearance='outline'],[appearance='transparent'])
+      ){background:SelectedItem;color:SelectedItemText}`));
 
 const template$3 = buttonTemplate$1();