@fluentui/web-components 3.0.0-beta.30 → 3.0.0-beta.32

package/dist/web-components.js

@@ -4177,6 +4177,20 @@ const definition$u = Accordion.compose({
 
 definition$u.define(FluentDesignSystem.registry);
 
+const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
+function toggleState(elementInternals, state, force) {
+  if (!CustomStatesSetSupported) {
+    elementInternals.shadowRoot.host.toggleAttribute(`state--${state}`, force);
+    return;
+  }
+  force = force ?? !elementInternals.states.has(state);
+  if (force) {
+    elementInternals.states.add(state);
+    return;
+  }
+  elementInternals.states.delete(state);
+}
+
 const ButtonType = {
   submit: "submit",
   reset: "reset",
@@ -4205,6 +4219,11 @@ var __decorateClass$p = (decorators, target, key, kind) => {
 class BaseAnchor extends FASTElement {
   constructor() {
     super();
+    /**
+     * Holds a reference to the platform to manage ctrl+click on Windows and cmd+click on Mac
+     * @internal
+     */
+    this.isMac = navigator.userAgent.includes("Mac");
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -4250,24 +4269,38 @@ class BaseAnchor extends FASTElement {
    * @param e - The event object
    * @internal
    */
-  clickHandler() {
-    this.internalProxyAnchor.click();
+  clickHandler(e) {
+    if (this.href) {
+      const newTab = !this.isMac ? e.ctrlKey : e.metaKey;
+      this.handleNavigation(newTab);
+    }
     return true;
   }
   /**
-   * Handles keypress events for the anchor.
+   * Handles keydown events for the anchor.
    *
    * @param e - the keyboard event
    * @returns - the return value of the click handler
    * @public
    */
-  keypressHandler(e) {
-    if (e.key === keyEnter) {
-      this.internalProxyAnchor.click();
-      return;
+  keydownHandler(e) {
+    if (this.href) {
+      if (e.key === keyEnter) {
+        const newTab = !this.isMac ? e.ctrlKey : e.metaKey || e.ctrlKey;
+        this.handleNavigation(newTab);
+        return;
+      }
     }
     return true;
   }
+  /**
+   * Handles navigation based on input
+   * If the metaKey is pressed, opens the href in a new window, if false, uses the click on the proxy
+   * @internal
+   */
+  handleNavigation(newTab) {
+    newTab ? window.open(this.href, "_blank") : this.internalProxyAnchor.click();
+  }
   /**
    * A method for updating proxy attributes when attributes have changed
    * @internal
@@ -4283,7 +4316,8 @@ class BaseAnchor extends FASTElement {
   }
   createProxyElement() {
     const proxy = this.internalProxyAnchor ?? document.createElement("a");
-    proxy.hidden = true;
+    proxy.ariaHidden = "true";
+    proxy.tabIndex = -1;
     return proxy;
   }
 }
@@ -4300,6 +4334,53 @@ class AnchorButton extends BaseAnchor {
     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) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  shapeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  sizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * 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$p([attr], AnchorButton.prototype, "appearance", 2);
 __decorateClass$p([attr], AnchorButton.prototype, "shape", 2);
@@ -4310,21 +4391,60 @@ __decorateClass$p([attr({
 })], AnchorButton.prototype, "iconOnly", 2);
 applyMixins(AnchorButton, StartEnd);
 
+const filledLighterState = css.partial`:is([state--filled-lighter], :state(filled-lighter))`;
+const filledDarkerState = css.partial`:is([state--filled-darker], :state(filled-darker))`;
+const ghostState = css.partial`:is([state--ghost], :state(ghost))`;
+const invertedState = css.partial`:is([state--inverted], :state(inverted))`;
+const primaryState = css.partial`:is([state--primary], :state(primary))`;
+const outlineState = css.partial`:is([state--outline], :state(outline))`;
+const strongState = css.partial`:is([state--strong], :state(strong))`;
+const subtleState = css.partial`:is([state--subtle], :state(subtle))`;
+const tintState = css.partial`:is([state--tint], :state(tint))`;
+const underlineState = css.partial`:is([state--underline], :state(underline))`;
+const transparentState = css.partial`:is([state--transparent], :state(transparent))`;
+const circularState = css.partial`:is([state--circular], :state(circular))`;
+const roundedState = css.partial`:is([state--rounded], :state(rounded))`;
+const squareState = css.partial`:is([state--square], :state(square))`;
+const tinyState = css.partial`:is([state--tiny], :state(tiny))`;
+const extraSmallState = css.partial`:is([state--extra-small], :state(extra-small))`;
+const smallState = css.partial`:is([state--small], :state(small))`;
+const largeState = css.partial`:is([state--large], :state(large))`;
+const extraLargeState = css.partial`:is([state--extra-large], :state(extra-large))`;
+const hugeState = css.partial`:is([state--huge], :state(huge))`;
+const alignStartState = css.partial`:is([state--align-start], :state(align-start))`;
+const alignEndState = css.partial`:is([state--align-end], :state(align-end))`;
+const insetState = css.partial`:is([state--inset], :state(inset))`;
+const iconOnlyState = css.partial`:is([state--icon], :state(icon))`;
+const pressedState = css.partial`:is([state--pressed], :state(pressed))`;
+const brandState = css.partial`:is([state--brand], :state(brand))`;
+const errorState = css.partial`:is([state--error], :state(error))`;
+const dangerState = css.partial`:is([state--danger], :state(danger))`;
+const importantState = css.partial`:is([state--important], :state(important))`;
+const informativeState = css.partial`:is([state--informative], :state(informative))`;
+const severeState = css.partial`:is([state--severe], :state(severe))`;
+const successState = css.partial`:is([state--success], :state(success))`;
+const warningState = css.partial`:is([state--warning], :state(warning))`;
+const verticalState = css.partial`:is([state--vertical], :state(vertical))`;
+css.partial`:is([state--horizontal], :state(horizontal))`;
+
 const baseButtonStyles = css`
   ${display("inline-flex")}
 
-  :host{--icon-spacing:${spacingHorizontalSNudge};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){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){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([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${borderRadiusCircular}}:host([shape='square']),:host([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']:hover),:host([appearance='primary']: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([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']: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){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}:is([slot='start'],::slotted([slot='start'])){margin-inline-end:var(--icon-spacing)}:is([slot='end'],::slotted([slot='end'])){margin-inline-start:var(--icon-spacing)}:host(${iconOnlyState}){min-width:32px;max-width:32px}:host(${smallState}){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host(${smallState}${iconOnlyState}){min-width:24px;max-width:24px}:host(${largeState}){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}${iconOnlyState}){min-width:40px;max-width:40px}:host(${largeState}) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is(${circularState},${circularState}:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is(${squareState},${squareState}:focus-visible)){border-radius:${borderRadiusNone}}:host(${primaryState}){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host(${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${primaryState}:is(:hover,:hover:active)){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host(${primaryState}:hover:active){background-color:${colorBrandBackgroundPressed}}:host(${primaryState}:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(${outlineState}){background-color:${colorTransparentBackground}}:host(${outlineState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${outlineState}:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(${subtleState}){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host(${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host(${subtleState}:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(${subtleState}:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host(${subtleState}:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host(${transparentState}){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host(${transparentState}:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host(${transparentState}:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is(${transparentState},${transparentState}:is(:hover,:active))){border-color:transparent}`;
 const styles$s = 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(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary'])),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover:active){border-color:transparent}:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline'])),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover:active){background-color:${colorTransparentBackground}}:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle'])),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover:active){background-color:${colorTransparentBackground};border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent'])),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover:active){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :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:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight}`));
 
-const styles$r = baseButtonStyles.withBehaviors(forcedColorsStylesheetBehavior(css`
+const styles$r = css`
+  ${baseButtonStyles}
+
+  ::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{border-color:LinkText;color:LinkText}`));
 
 function anchorTemplate$1(options = {}) {
-  return html`<template tabindex="0" @click="${x => x.clickHandler()}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
+  return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
 const template$t = anchorTemplate$1();
 
@@ -4377,20 +4497,6 @@ function getInitials(displayName, isRtl, options) {
   return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);
 }
 
-const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
-function toggleState(elementInternals, state, force) {
-  if (!CustomStatesSetSupported) {
-    elementInternals.shadowRoot.host.toggleAttribute(`state--${state}`, force);
-    return;
-  }
-  force = force ?? !elementInternals.states.has(state);
-  if (force) {
-    elementInternals.states.add(state);
-    return;
-  }
-  elementInternals.states.delete(state);
-}
-
 const AvatarNamedColor = {
   darkRed: "dark-red",
   cranberry: "cranberry",
@@ -4580,9 +4686,67 @@ var __decorateClass$n = (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) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to color attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  colorChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  shapeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  sizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
 }
 __decorateClass$n([attr], Badge.prototype, "appearance", 2);
 __decorateClass$n([attr], Badge.prototype, "color", 2);
@@ -4615,7 +4779,7 @@ const badgeBaseStyles = css.partial`
     font-size: 12px;
   }
 
-  :host(:not([appearance='ghost']))::after {
+  :host(:not(${ghostState}))::after {
     position: absolute;
     content: '';
     top: 0;
@@ -4629,7 +4793,7 @@ const badgeBaseStyles = css.partial`
   }
 `;
 const badgeSizeStyles = css.partial`
-  :host([size='tiny']) {
+  :host(${tinyState}) {
     width: 6px;
     height: 6px;
     font-size: 4px;
@@ -4637,10 +4801,10 @@ const badgeSizeStyles = css.partial`
     padding-inline: 0;
     min-width: unset;
   }
-  :host([size='tiny']) ::slotted(svg) {
+  :host(${tinyState}) ::slotted(svg) {
     font-size: 6px;
   }
-  :host([size='extra-small']) {
+  :host(${extraSmallState}) {
     width: 10px;
     height: 10px;
     font-size: 6px;
@@ -4648,191 +4812,191 @@ const badgeSizeStyles = css.partial`
     padding-inline: 0;
     min-width: unset;
   }
-  :host([size='extra-small']) ::slotted(svg) {
+  :host(${extraSmallState}) ::slotted(svg) {
     font-size: 10px;
   }
-  :host([size='small']) {
+  :host(${smallState}) {
     min-width: 16px;
     height: 16px;
     font-size: ${fontSizeBase100};
     line-height: ${lineHeightBase100};
     padding-inline: calc(${spacingHorizontalXXS} + ${textPadding});
   }
-  :host([size='small']) ::slotted(svg) {
+  :host(${smallState}) ::slotted(svg) {
     font-size: 12px;
   }
-  :host([size='large']) {
+  :host(${largeState}) {
     min-width: 24px;
     height: 24px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
     padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
   }
-  :host([size='large']) ::slotted(svg) {
+  :host(${largeState}) ::slotted(svg) {
     font-size: 16px;
   }
-  :host([size='extra-large']) {
+  :host(${extraLargeState}) {
     min-width: 32px;
     height: 32px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
     padding-inline: calc(${spacingHorizontalSNudge} + ${textPadding});
   }
-  :host([size='extra-large']) ::slotted(svg) {
+  :host(${extraLargeState}) ::slotted(svg) {
     font-size: 20px;
   }
 `;
 const badgeFilledStyles = css.partial`
-  :host([color='danger']) {
+  :host(${dangerState}) {
     background-color: ${colorPaletteRedBackground3};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='important']) {
+  :host(${importantState}) {
     background-color: ${colorNeutralForeground1};
     color: ${colorNeutralBackground1};
   }
 
-  :host([color='informative']) {
+  :host(${informativeState}) {
     background-color: ${colorNeutralBackground5};
     color: ${colorNeutralForeground3};
   }
 
-  :host([color='severe']) {
+  :host(${severeState}) {
     background-color: ${colorPaletteDarkOrangeBackground3};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='subtle']) {
+  :host(${subtleState}) {
     background-color: ${colorNeutralBackground1};
     color: ${colorNeutralForeground1};
   }
 
-  :host([color='success']) {
+  :host(${successState}) {
     background-color: ${colorPaletteGreenBackground3};
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='warning']) {
+  :host(${warningState}) {
     background-color: ${colorPaletteYellowBackground3};
     color: ${colorNeutralForeground1Static};
   }
 `;
 const badgeGhostStyles = css.partial`
-  :host([appearance='ghost']) {
+  :host(${ghostState}) {
     color: ${colorBrandForeground1};
     background-color: initial;
   }
 
-  :host([appearance='ghost'][color='danger']) {
+  :host(${ghostState}${dangerState}) {
     color: ${colorPaletteRedForeground3};
   }
 
-  :host([appearance='ghost'][color='important']) {
+  :host(${ghostState}${importantState}) {
     color: ${colorNeutralForeground1};
   }
 
-  :host([appearance='ghost'][color='informative']) {
+  :host(${ghostState}${informativeState}) {
     color: ${colorNeutralForeground3};
   }
 
-  :host([appearance='ghost'][color='severe']) {
+  :host(${ghostState}${severeState}) {
     color: ${colorPaletteDarkOrangeForeground3};
   }
 
-  :host([appearance='ghost'][color='subtle']) {
+  :host(${ghostState}${subtleState}) {
     color: ${colorNeutralForegroundInverted};
   }
 
-  :host([appearance='ghost'][color='success']) {
+  :host(${ghostState}${successState}) {
     color: ${colorPaletteGreenForeground3};
   }
 
-  :host([appearance='ghost'][color='warning']) {
+  :host(${ghostState}${warningState}) {
     color: ${colorPaletteYellowForeground2};
   }
 `;
 const badgeOutlineStyles = css.partial`
-  :host([appearance='outline']) {
+  :host(${outlineState}) {
     border-color: currentColor;
     color: ${colorBrandForeground1};
     background-color: initial;
   }
 
-  :host([appearance='outline'][color='danger']) {
+  :host(${outlineState}${dangerState}) {
     color: ${colorPaletteRedForeground3};
   }
 
-  :host([appearance='outline'][color='important']) {
+  :host(${outlineState}${importantState}) {
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStrokeAccessible};
   }
 
-  :host([appearance='outline'][color='informative']) {
+  :host(${outlineState}${informativeState}) {
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='outline'][color='severe']) {
+  :host(${outlineState}${severeState}) {
     color: ${colorPaletteDarkOrangeForeground3};
   }
 
-  :host([appearance='outline'][color='subtle']) {
+  :host(${outlineState}${subtleState}) {
     color: ${colorNeutralForegroundStaticInverted};
   }
 
-  :host([appearance='outline'][color='success']) {
+  :host(${outlineState}${successState}) {
     color: ${colorPaletteGreenForeground2};
   }
 
-  :host([appearance='outline'][color='warning']) {
+  :host(${outlineState}${warningState}) {
     color: ${colorPaletteYellowForeground2};
   }
 `;
 const badgeTintStyles = css.partial`
-  :host([appearance='tint']) {
+  :host(${tintState}) {
     background-color: ${colorBrandBackground2};
     color: ${colorBrandForeground2};
     border-color: ${colorBrandStroke2};
   }
 
-  :host([appearance='tint'][color='danger']) {
+  :host(${tintState}${dangerState}) {
     background-color: ${colorPaletteRedBackground1};
     color: ${colorPaletteRedForeground1};
     border-color: ${colorPaletteRedBorder1};
   }
 
-  :host([appearance='tint'][color='important']) {
+  :host(${tintState}${importantState}) {
     background-color: ${colorNeutralForeground3};
     color: ${colorNeutralBackground1};
     border-color: ${colorTransparentStroke};
   }
 
-  :host([appearance='tint'][color='informative']) {
+  :host(${tintState}${informativeState}) {
     background-color: ${colorNeutralBackground4};
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='tint'][color='severe']) {
+  :host(${tintState}${severeState}) {
     background-color: ${colorPaletteDarkOrangeBackground1};
     color: ${colorPaletteDarkOrangeForeground1};
     border-color: ${colorPaletteDarkOrangeBorder1};
   }
 
-  :host([appearance='tint'][color='subtle']) {
+  :host(${tintState}${subtleState}) {
     background-color: ${colorNeutralBackground1};
     color: ${colorNeutralForeground3};
     border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='tint'][color='success']) {
+  :host(${tintState}${successState}) {
     background-color: ${colorPaletteGreenBackground1};
     color: ${colorPaletteGreenForeground1};
     border-color: ${colorPaletteGreenBorder2};
   }
 
-  :host([appearance='tint'][color='warning']) {
+  :host(${tintState}${warningState}) {
     background-color: ${colorPaletteYellowBackground1};
     color: ${colorPaletteYellowForeground2};
     border-color: ${colorPaletteYellowBorder1};
@@ -4943,7 +5107,7 @@ css.partial`
 `;
 
 const styles$p = css`
-  :host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
+  :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}
   ${badgeOutlineStyles}
@@ -4986,6 +5150,19 @@ class Button extends FASTElement {
     this.iconOnly = false;
     this.elementInternals.role = "button";
   }
+  /**
+   * Handles changes to appearance attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  appearanceChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
   /**
    * Sets the element's internal disabled state when the element is focusable while disabled.
    *
@@ -5006,6 +5183,14 @@ class Button extends FASTElement {
   get form() {
     return this.elementInternals.form;
   }
+  /**
+   * 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);
+  }
   /**
    * A reference to all associated label elements.
    *
@@ -5014,6 +5199,32 @@ class Button extends FASTElement {
   get labels() {
     return Object.freeze(Array.from(this.elementInternals.labels));
   }
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  shapeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  sizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
   /**
    * Removes the form submission fallback control when the type changes.
    *
@@ -5583,7 +5794,34 @@ __decorateClass$l([attr], BaseCheckbox.prototype, "name", 2);
 __decorateClass$l([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
-class Checkbox extends BaseCheckbox {}
+class Checkbox extends BaseCheckbox {
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  shapeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, prev, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, next, true);
+    }
+  }
+  /**
+   * Handles changes to size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  sizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, prev, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, next, true);
+    }
+  }
+}
 __decorateClass$l([attr], Checkbox.prototype, "shape", 2);
 __decorateClass$l([attr], Checkbox.prototype, "size", 2);
 
@@ -5592,7 +5830,7 @@ const indeterminateState = css.partial`:is([state--indeterminate], :state(indete
 const styles$o = 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$1}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState$1}: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$1})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState$1}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState$1}),: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$1}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState$1}) .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$1}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState$1}: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$1})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState$1}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState$1}),: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$1}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState$1}) .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$1}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState$1}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState$1}: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$1}) .checked-indicator{color:GrayText}`));
 
 const checkedIndicator = html.partial( /* html */
@@ -5633,10 +5871,8 @@ class CompoundButton extends Button {}
 const styles$n = css`
   ${styles$s}
 
-  :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']:hover,[appearance='primary']:active))
-    ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='subtle'],[appearance='subtle']:hover,[appearance='subtle']:active))
-    ::slotted([slot='description']),:host([appearance='transparent']) ::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}}`;
+  :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}}`;
 
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? -1 : 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
@@ -5662,17 +5898,83 @@ var __decorateClass$k = (decorators, target, key, kind) => {
 class CounterBadge 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.count = 0;
     this.overflowCount = 99;
     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) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to color attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  colorChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  shapeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  sizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
   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
@@ -5707,13 +6009,14 @@ __decorateClass$k([attr({
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
+const dotState = css.partial`:is([state--dot], :state(dot))`;
 const styles$m = css`
-  :host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
+  :host(${roundedState}){border-radius:${borderRadiusMedium}}:host(${roundedState}${tinyState}),:host(${roundedState}${extraSmallState}),:host(${roundedState}${smallState}){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
   ${badgeBaseStyles}
 
-  :host([dot]),:host([dot][appearance][size]){min-width:auto;width:6px;height:6px;padding:0}`;
+  :host(${dotState}),:host(${dotState}[appearance][size]){min-width:auto;width:6px;height:6px;padding:0}`;
 
 function composeTemplate(options = {}) {
   return badgeTemplate({
@@ -5909,6 +6212,41 @@ class Divider extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
+    this.inset = false;
+  }
+  /**
+   * Handles changes to align-content attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  alignContentChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `align-${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `align-${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to appearance attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  appearanceChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to inset custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  insetChanged(prev, next) {
+    toggleState(this.elementInternals, "inset", next);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -5940,8 +6278,12 @@ class Divider extends FASTElement {
    * @internal
    */
   orientationChanged(previous, next) {
-    if (this.$fastController.isConnected) {
-      this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
+    this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
+    if (previous) {
+      toggleState(this.elementInternals, `${previous}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
     }
   }
 }
@@ -5963,8 +6305,8 @@ const template$k = dividerTemplate();
 const styles$j = 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([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']){height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical']){flex-direction:column;align-items:center}: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}`));
+  :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host(${insetState}){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host(${alignStartState})::before,:host(${alignEndState})::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host(${verticalState}){height:100%;min-height:84px}:host(${verticalState}):empty{min-height:20px}:host(${verticalState}){flex-direction:column;align-items:center}:host(${verticalState}${insetState})::before{margin-top:12px}:host(${verticalState}${insetState})::after{margin-bottom:12px}:host(${verticalState}):empty::before,:host(${verticalState}):empty::after{height:10px;min-height:10px;flex-grow:0}:host(${verticalState})::before,:host(${verticalState})::after{width:${strokeWidthThin};min-height:20px;height:100%}:host(${verticalState}) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host(${verticalState}${alignStartState})::before{min-height:8px}:host(${verticalState}${alignEndState})::after{min-height:8px}:host(${strongState})::before,:host(${strongState})::after{background:${colorNeutralStroke1}}:host(${strongState}) ::slotted(*){color:${colorNeutralForeground1}}:host(${brandState})::before,:host(${brandState})::after{background:${colorBrandStroke1}}:host(${brandState}) ::slotted(*){color:${colorBrandForeground1}}:host(${subtleState})::before,:host(${subtleState})::after{background:${colorNeutralStroke3}}:host(${subtleState}) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host(${strongState})::before,:host(${strongState})::after,:host(${brandState})::before,:host(${brandState})::after,:host(${subtleState})::before,:host(${subtleState})::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
 
 const definition$k = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
@@ -6173,7 +6515,68 @@ var __decorateClass$f = (decorators, target, key, kind) => {
   if (kind && result) __defProp$f(target, key, result);
   return result;
 };
-class Image extends FASTElement {}
+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();
+    this.block = false;
+  }
+  /**
+   * 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) {
+    if (prev) {
+      toggleState(this.elementInternals, `fit-${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `fit-${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  shapeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+}
 __decorateClass$f([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
@@ -6189,7 +6592,7 @@ __decorateClass$f([attr], Image.prototype, "shape", 2);
 const template$i = html`<slot></slot>`;
 
 const styles$h = css`
-  :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}}`;
+  :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host(:is([state--block],:state(block))) ::slotted(img){width:100%;height:auto}:host(:is([state--bordered],:state(bordered))) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host(:is([state--fit-none],:state(fit-none))) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host(:is([state--fit-center],:state(fit-center))) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host(:is([state--fit-contain],:state(fit-contain))) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host(:is([state--fit-cover],:state(fit-cover))) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host(:is([state--shadowed],:state(shadowed))) ::slotted(img){box-shadow:${shadow4}}:host(${circularState}) ::slotted(img){border-radius:${borderRadiusCircular}}:host(${roundedState}) ::slotted(img){border-radius:${borderRadiusMedium}}`;
 
 const definition$i = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
@@ -6210,9 +6613,49 @@ var __decorateClass$e = (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) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to weight attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  weightChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * 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$e([attr], Label.prototype, "size", 2);
 __decorateClass$e([attr], Label.prototype, "weight", 2);
@@ -6226,7 +6669,7 @@ __decorateClass$e([attr({
 const styles$g = 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([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']),:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
+  :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host(${smallState}){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host(${largeState}){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(${largeState}),:host(:is([state--semibold],:state(semibold))){font-weight:${fontWeightSemibold}}:host(:is([state--disabled],:state(disabled))),:host(:is([state--disabled],:state(disabled))) .asterisk{color:${colorNeutralForegroundDisabled}}`;
 
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
@@ -6254,6 +6697,27 @@ 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) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * 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$d([attr], Link.prototype, "appearance", 2);
 __decorateClass$d([attr({
@@ -6263,11 +6727,11 @@ __decorateClass$d([attr({
 const styles$f = css`
   ${display("inline")}
 
-  :host{box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};margin:0;padding:0;overflow:inherit;text-align:left;text-decoration:none;text-decoration-thinkness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host([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}`.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};margin:0;padding:0;overflow:inherit;text-align:left;text-decoration:none;text-decoration-thinkness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host(${subtleState}:hover){color:${colorNeutralForeground2LinkHover}}:host(${subtleState}:active){color:${colorNeutralForeground2LinkPressed}}}:host(${subtleState}){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host(:is([state--inline],:state(inline))){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host{color:LinkText}`));
 
 function anchorTemplate() {
-  return html`<template tabindex="0" @click="${x => x.clickHandler()}" @keypress="${(x, c) => x.keypressHandler(c.event)}"><slot></slot></template>`;
+  return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot></slot></template>`;
 }
 const template$g = anchorTemplate();
 
@@ -8159,6 +8623,45 @@ class ProgressBar extends FASTElement {
     this.validationState = null;
     this.elementInternals.role = "progressbar";
   }
+  /**
+   * Handles changes to thickness attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  thicknessChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  shapeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to validation-state attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  validationStateChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
   /**
    * Updates the percent complete when the `value` property changes.
    *
@@ -8213,10 +8716,10 @@ __decorateClass$9([volatile], ProgressBar.prototype, "percentComplete", 1);
 const styles$b = css`
   ${display("block")}
 
-  :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(
+  :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(
       to right,${colorNeutralBackground6} 0%,${colorTransparentBackground} 50%,${colorNeutralBackground6} 100%
-    );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}`));
+    );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}`));
 
 function progressTemplate() {
   return html`<div class="indicator" part="indicator" style="${x => typeof x.value === "number" ? `width: ${x.percentComplete}%` : void 0}"></div>`;
@@ -9543,6 +10046,32 @@ class Spinner extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "progressbar";
   }
+  /**
+   * Handles changes to size attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  sizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to appearance attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  appearanceChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
 }
 __decorateClass$5([attr], Spinner.prototype, "size", 2);
 __decorateClass$5([attr], Spinner.prototype, "appearance", 2);
@@ -9550,7 +10079,7 @@ __decorateClass$5([attr], Spinner.prototype, "appearance", 2);
 const styles$7 = css`
   ${display("flex")}
 
-  :host{display:flex;align-items:center;height:32px;width:32px;contain:content}:host([size='tiny']){height:20px;width:20px}:host([size='extra-small']){height:24px;width:24px}:host([size='small']){height:28px;width:28px}:host([size='large']){height:36px;width:36px}:host([size='extra-large']){height:40px;width:40px}:host([size='huge']){height:44px;width:44px}.progress{height:100%;width:100%}.background{fill:none;stroke:${colorBrandStroke2};stroke-width:1.5px}:host([appearance='inverted']) .background{stroke:rgba(255,255,255,0.2)}.indicator{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 3s cubic-bezier(0.53,0.21,0.29,0.67) infinite}:host([appearance='inverted']) .indicator{stroke:${colorNeutralStrokeOnBrand2}}@keyframes spin-infinite{0%{stroke-dasharray:0.01px 43.97px;transform:rotate(0deg)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}100%{stroke-dasharray:0.01px 43.97px;transform:rotate(1080deg)}}`;
+  :host{display:flex;align-items:center;height:32px;width:32px;contain:content}:host(${tinyState}){height:20px;width:20px}:host(${extraSmallState}){height:24px;width:24px}:host(${smallState}){height:28px;width:28px}:host(${largeState}){height:36px;width:36px}:host(${extraLargeState}){height:40px;width:40px}:host(${hugeState}){height:44px;width:44px}.progress{height:100%;width:100%}.background{fill:none;stroke:${colorBrandStroke2};stroke-width:1.5px}:host(${invertedState}) .background{stroke:rgba(255,255,255,0.2)}.indicator{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 3s cubic-bezier(0.53,0.21,0.29,0.67) infinite}:host(${invertedState}) .indicator{stroke:${colorNeutralStrokeOnBrand2}}@keyframes spin-infinite{0%{stroke-dasharray:0.01px 43.97px;transform:rotate(0deg)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}100%{stroke-dasharray:0.01px 43.97px;transform:rotate(1080deg)}}`;
 
 const template$7 = html`<slot name="indicator"><svg class="progress" part="progress" viewBox="0 0 16 16"><circle class="background" cx="8px" cy="8px" r="7px"></circle><circle class="indicator" cx="8px" cy="8px" r="7px"></circle></svg></slot>`;
 
@@ -10104,6 +10633,32 @@ class TextInput extends FASTElement {
      */
     this.elementInternals = this.attachInternals();
   }
+  /**
+   * Handles changes to appearance attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  appearanceChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+  /**
+   * Handles changes to `control-size` attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  controlSizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
   /**
    * Updates the control label visibility based on the presence of default slotted content.
    *
@@ -10446,7 +11001,7 @@ applyMixins(TextInput, StartEnd);
 const styles$2 = css`
   ${display("block")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([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}}`;
+  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host(${outlineState}:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host(${smallState}) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host(${smallState}) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host(${smallState}) ::slotted([slot='start']),:host(${smallState}) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host(${largeState}) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host(${largeState}) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host(${largeState}) ::slotted([slot='start']),:host(${largeState}) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host(${underlineState}) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host(${underlineState}:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(${underlineState}:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState}:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host(${underlineState}[disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host(${filledLighterState}) .root,:host(${filledDarkerState}) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host(${filledLighterState}) .root{background:${colorNeutralBackground1}}:host(${filledDarkerState}) .root{background:${colorNeutralBackground3}}:host(${filledLighterState}:hover) .root,:host(${filledDarkerState}:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host(${filledLighterState}:active) .root,:host(${filledDarkerState}:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
 
 function textInputTemplate(options = {}) {
   return html`<template @beforeinput="${(x, c) => x.beforeinputHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><label part="label" for="control" class="label" ${ref("controlLabel")}><slot ${slotted({
@@ -10572,7 +11127,7 @@ class ToggleButton extends Button {
     if (this.$fastController.isConnected) {
       const ariaPressed = `${this.mixed ? "mixed" : !!this.pressed}`;
       this.elementInternals.ariaPressed = ariaPressed;
-      this.setAttribute("aria-pressed", ariaPressed);
+      toggleState(this.elementInternals, "pressed", !!this.pressed || !!this.mixed);
     }
   }
 }
@@ -10586,8 +11141,8 @@ __decorateClass([attr({
 const styles = css`
   ${styles$s}
 
-  :host([aria-pressed='true']){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host([aria-pressed='true']:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host([aria-pressed='true']:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host([aria-pressed='true'][appearance='primary']){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host([aria-pressed='true'][appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([aria-pressed='true'][appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host([aria-pressed='true'][appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([aria-pressed='true'][appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host([aria-pressed='true'][appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host([aria-pressed='true'][appearance='outline']:hover),:host([aria-pressed='true'][appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host([aria-pressed='true'][appearance='outline']:active),:host([aria-pressed='true'][appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host([aria-pressed='true'][appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host([aria-pressed='true'][appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host([aria-pressed='true'][appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([aria-pressed='true']),:host([aria-pressed='true'][appearance='primary']),:host([aria-pressed='true'][appearance='subtle']),:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){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}${primaryState}){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}${primaryState}:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}${primaryState}:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}${subtleState}){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}${subtleState}:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}${subtleState}:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}${outlineState}:hover),:host(${pressedState}${transparentState}:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}${outlineState}:active),:host(${pressedState}${transparentState}:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}${transparentState}){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}${transparentState}:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}${transparentState}:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host(${pressedState}),:host(${pressedState}${primaryState}),:host(${pressedState}${subtleState}),:host(${pressedState}${outlineState}),:host(${pressedState}${transparentState}){background:SelectedItem;color:SelectedItemText}`));
 
 const template = buttonTemplate$1();