@fluentui/web-components 3.0.0-beta.39 → 3.0.0-beta.40

package/dist/web-components.js

@@ -3316,6 +3316,22 @@ const Orientation = {
   vertical: "vertical"
 };
 
+/**
+ * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
+ *
+ * @param array - the array to test
+ * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
+ */
+function findLastIndex(array, predicate) {
+  let k = array.length;
+  while (k--) {
+    if (predicate(array[k], k, array)) {
+      return k;
+    }
+  }
+  return -1;
+}
+
 /**
  * A test that ensures that all arguments are HTML Elements
  */
@@ -3336,12 +3352,6 @@ const keyEscape = "Escape";
 const keyHome = "Home";
 const keySpace = " ";
 const keyTab = "Tab";
-const ArrowKeys = {
-  ArrowDown: keyArrowDown,
-  ArrowLeft: keyArrowLeft,
-  ArrowRight: keyArrowRight,
-  ArrowUp: keyArrowUp
-};
 
 /**
  * Expose ltr and rtl strings
@@ -3357,14 +3367,6 @@ var Direction;
  * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
  * the maximum will be returned. Otherwise, the value is returned un-changed.
  */
-function wrapInBounds(min, max, value) {
-  if (value < min) {
-    return max;
-  } else if (value > max) {
-    return min;
-  }
-  return value;
-}
 /**
  * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
  * If value is greater than max, max will be returned.
@@ -3381,70 +3383,70 @@ function uniqueId(prefix = "") {
   return `${prefix}${uniqueIdCounter++}`;
 }
 
-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;
+var __defProp$u = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$v(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
 class ARIAGlobalStatesAndProperties {}
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-atomic"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-busy"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-controls"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-current"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-describedby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-details"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-disabled"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-errormessage"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-flowto"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-haspopup"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-hidden"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-invalid"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-keyshortcuts"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-label"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-labelledby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-live"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-owns"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-relevant"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$v([attr({
+__decorateClass$u([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
@@ -3613,54 +3615,159 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+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);
+}
+
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$u(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
 class AccordionItem 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.headinglevel = 2;
     this.expanded = false;
     this.disabled = false;
     this.id = uniqueId("accordion-");
     this.block = false;
-    /**
-     * @internal
-     */
-    this.clickHandler = e => {
-      if (this.disabled) {
-        return;
-      }
-      this.$emit("click", e);
-    };
+  }
+  /**
+   * 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);
+  }
+  /**
+   * Handles changes to size attribute
+   * @param prev - previous value
+   * @param next - next value
+   */
+  sizeChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, prev, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, next, true);
+    }
+  }
+  /**
+   * Handles changes to block attribute
+   * @param prev - previous value
+   * @param next - next value
+   */
+  blockChanged(prev, next) {
+    toggleState(this.elementInternals, "block", next);
+  }
+  /**
+   * Handles changes to marker-position attribute
+   * @param prev - previous value
+   * @param next - next value
+   */
+  markerPositionChanged(prev, next) {
+    if (prev) {
+      toggleState(this.elementInternals, `align-${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `align-${next}`, true);
+    }
   }
 }
-__decorateClass$u([attr({
+__decorateClass$t([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], AccordionItem.prototype, "headinglevel", 2);
-__decorateClass$u([attr({
+__decorateClass$t([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "expanded", 2);
-__decorateClass$u([attr({
+__decorateClass$t([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "disabled", 2);
-__decorateClass$u([attr], AccordionItem.prototype, "id", 2);
-__decorateClass$u([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$u([attr({
+__decorateClass$t([attr], AccordionItem.prototype, "id", 2);
+__decorateClass$t([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$t([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
-__decorateClass$u([attr({
-  attribute: "expand-icon-position"
-})], AccordionItem.prototype, "expandIconPosition", 2);
+__decorateClass$t([attr({
+  attribute: "marker-position"
+})], AccordionItem.prototype, "markerPosition", 2);
 applyMixins(AccordionItem, StartEnd);
 
+const checkedState = css.partial`:is([state--checked], :state(checked))`;
+const disabledState = css.partial`:is([state--disabled], :state(disabled))`;
+const filledLighterState = css.partial`:is([state--filled-lighter], :state(filled-lighter))`;
+const filledDarkerState = css.partial`:is([state--filled-darker], :state(filled-darker))`;
+const ghostState = css.partial`:is([state--ghost], :state(ghost))`;
+const invertedState = css.partial`:is([state--inverted], :state(inverted))`;
+const primaryState = css.partial`:is([state--primary], :state(primary))`;
+const outlineState = css.partial`:is([state--outline], :state(outline))`;
+const strongState = css.partial`:is([state--strong], :state(strong))`;
+const subtleState = css.partial`:is([state--subtle], :state(subtle))`;
+const tintState = css.partial`:is([state--tint], :state(tint))`;
+const underlineState$1 = css.partial`:is([state--underline], :state(underline))`;
+const transparentState = css.partial`:is([state--transparent], :state(transparent))`;
+const circularState = css.partial`:is([state--circular], :state(circular))`;
+const roundedState = css.partial`:is([state--rounded], :state(rounded))`;
+const squareState = css.partial`:is([state--square], :state(square))`;
+const tinyState = css.partial`:is([state--tiny], :state(tiny))`;
+const extraSmallState = css.partial`:is([state--extra-small], :state(extra-small))`;
+const smallState = css.partial`:is([state--small], :state(small))`;
+const largeState = css.partial`:is([state--large], :state(large))`;
+const extraLargeState = css.partial`:is([state--extra-large], :state(extra-large))`;
+const hugeState = css.partial`:is([state--huge], :state(huge))`;
+const alignStartState = css.partial`:is([state--align-start], :state(align-start))`;
+const alignEndState = css.partial`:is([state--align-end], :state(align-end))`;
+const insetState = css.partial`:is([state--inset], :state(inset))`;
+const iconOnlyState = css.partial`:is([state--icon], :state(icon))`;
+const pressedState = css.partial`:is([state--pressed], :state(pressed))`;
+const brandState = css.partial`:is([state--brand], :state(brand))`;
+const errorState = css.partial`:is([state--error], :state(error))`;
+const dangerState = css.partial`:is([state--danger], :state(danger))`;
+const importantState = css.partial`:is([state--important], :state(important))`;
+const informativeState = css.partial`:is([state--informative], :state(informative))`;
+css.partial`:is([state--marigold], :state(marigold))`;
+const neutralState = css.partial`:is([state--neutral], :state(neutral))`;
+const severeState = css.partial`:is([state--severe], :state(severe))`;
+const successState = css.partial`:is([state--success], :state(success))`;
+const warningState = css.partial`:is([state--warning], :state(warning))`;
+const verticalState = css.partial`:is([state--vertical], :state(vertical))`;
+css.partial`:is([state--horizontal], :state(horizontal))`;
+css.partial`:is([state--singleline], :state(singleline))`;
+const multiLineState = css.partial`:is([state--multiline], :state(multiline))`;
+const expandedState = css.partial`:is([state--expanded], :state(expanded))`;
+const blockState = css.partial`:is([state--block], :state(block))`;
+
 const colorNeutralForeground1 = "var(--colorNeutralForeground1)";
 const colorNeutralForeground1Hover = "var(--colorNeutralForeground1Hover)";
 const colorNeutralForeground1Pressed = "var(--colorNeutralForeground1Pressed)";
@@ -3682,7 +3789,6 @@ const colorBrandForegroundLinkPressed = "var(--colorBrandForegroundLinkPressed)"
 const colorNeutralForeground2Link = "var(--colorNeutralForeground2Link)";
 const colorNeutralForeground2LinkHover = "var(--colorNeutralForeground2LinkHover)";
 const colorNeutralForeground2LinkPressed = "var(--colorNeutralForeground2LinkPressed)";
-const colorCompoundBrandForeground1 = "var(--colorCompoundBrandForeground1)";
 const colorCompoundBrandForeground1Hover = "var(--colorCompoundBrandForeground1Hover)";
 const colorCompoundBrandForeground1Pressed = "var(--colorCompoundBrandForeground1Pressed)";
 const colorNeutralForegroundOnBrand = "var(--colorNeutralForegroundOnBrand)";
@@ -3879,6 +3985,7 @@ const spacingVerticalXS = "var(--spacingVerticalXS)";
 const spacingVerticalSNudge = "var(--spacingVerticalSNudge)";
 const spacingVerticalS = "var(--spacingVerticalS)";
 const spacingVerticalMNudge = "var(--spacingVerticalMNudge)";
+const spacingVerticalM = "var(--spacingVerticalM)";
 const spacingVerticalL = "var(--spacingVerticalL)";
 const spacingVerticalXXL = "var(--spacingVerticalXXL)";
 const durationUltraFast = "var(--durationUltraFast)";
@@ -3901,7 +4008,7 @@ const curveLinear = "var(--curveLinear)";
 const styles$x = css`
   ${display("block")}
 
-  :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;vertical-align:middle;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}.heading-content{height:100%;display:flex;align-items:center}.button{box-sizing:border-box;appearance:none;border:none;outline:none;text-align:start;cursor:pointer;font-family:inherit;height:44px;color:${colorNeutralForeground1};background:${colorTransparentBackground};line-height:${lineHeightBase300};height:auto;padding:0;font-size:inherit;grid-column:auto / span 2;grid-row:1}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}.icon{display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-right:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.region{margin:0 ${spacingHorizontalM}}::slotted([slot='start']),::slotted([slot='end']){justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1 / span 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]) .region{display:block}:host([expanded]) .default-collapsed-icon,:host([expanded]) ::slotted([slot='collapsed-icon']),:host(:not([expanded])) .default-expanded-icon,:host(:not([expanded])) ::slotted([slot='expanded-icon']),:host([expanded]) ::slotted([slot='end']),::slotted([slot='start']),.region{display:none}:host([expanded]) ::slotted([slot='start']),:host([expanded]) ::slotted([slot='expanded-icon']),:host(:not([expanded])) ::slotted([slot='collapsed-icon']),::slotted([slot='end']){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([expand-icon-position='end']) :slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) ::slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) .icon{grid-column:4 / span 1;grid-row:1;display:flex;padding-left:10px;padding-right:0}:host([expand-icon-position='end']) .button{grid-column:2 / span 3;grid-row:1}:host([block]){max-width:100%}:host([expand-icon-position='end']) .heading{grid-template-columns:auto auto 28px}:host([expand-icon-position='end']) .icon{grid-column:5 / span 1}:host([block][expand-icon-position='end']) .heading{grid-template-columns:auto 1fr}:host([block][expand-icon-position='end']) .icon{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(${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}`;
 
 const chevronRight20Filled = html.partial(`<svg
   width="20"
@@ -3909,7 +4016,8 @@ const chevronRight20Filled = html.partial(`<svg
   viewBox="0 0 20 20"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
-  class="default-collapsed-icon"
+  class="default-marker-collapsed"
+  aria-hidden="true"
 >
   <path
     d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z"
@@ -3922,7 +4030,8 @@ const chevronDown20Filled = html.partial(`<svg
   viewBox="0 0 20 20"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
-  class="default-expanded-icon"
+  class="default-marker-expanded"
+  aria-hidden="true"
 >
   <path
     d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z"
@@ -3930,7 +4039,7 @@ const chevronDown20Filled = html.partial(`<svg
   />
 </svg>`);
 function accordionItemTemplate(options = {}) {
-  return html`<div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} ?disabled="${x => x.disabled ? "true" : void 0}" aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}" @click="${(x, c) => x.clickHandler(c.event)}"><span class="heading-content" part="heading-content"><slot name="heading"></slot></span></button>${startSlotTemplate(options)} ${endSlotTemplate(options)}<span class="icon" part="icon" aria-hidden="true"><slot name="expanded-icon">${staticallyCompose(options.expandedIcon)}</slot><slot name="collapsed-icon">${staticallyCompose(options.collapsedIcon)}</slot><span></div><div class="region" part="region" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
+  return html`<div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} ?disabled="${x => x.disabled ? "true" : void 0}" aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}"><slot name="heading"></slot></button>${startSlotTemplate(options)}<slot name="marker-expanded">${staticallyCompose(options.expandedIcon)}</slot><slot name="marker-collapsed">${staticallyCompose(options.collapsedIcon)}</slot></div><div class="content" part="content" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
 }
 const template$y = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
@@ -3950,12 +4059,12 @@ const AccordionExpandMode = {
   multi: "multi"
 };
 
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __decorateClass$s = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$t(target, key, result);
+  if (kind && result) __defProp$s(target, key, result);
   return result;
 };
 class Accordion extends FASTElement {
@@ -3963,9 +4072,11 @@ class Accordion extends FASTElement {
     super(...arguments);
     this.expandmode = AccordionExpandMode.multi;
     this.activeItemIndex = 0;
-    this.change = () => {
-      this.$emit("change", this.activeid);
-    };
+    /**
+     * Resets event listeners and sets the `accordionItems` property
+     * then rebinds event listeners to each non-disabled item
+     * @returns {void}
+     */
     this.setItems = () => {
       if (this.slottedAccordionItems.length === 0) {
         return;
@@ -3974,83 +4085,43 @@ class Accordion extends FASTElement {
       this.removeItemListeners(children);
       children.forEach(child => Observable.getNotifier(child).subscribe(this, "disabled"));
       this.accordionItems = children.filter(child => !child.hasAttribute("disabled"));
-      this.accordionIds = this.getItemIds();
       this.accordionItems.forEach((item, index) => {
         if (item instanceof AccordionItem) {
-          item.addEventListener("click", this.activeItemChange);
-          item.addEventListener("keydown", this.handleItemKeyDown);
-          item.addEventListener("focus", this.handleItemFocus);
+          item.addEventListener("click", this.expandedChangedHandler);
           Observable.getNotifier(item).subscribe(this, "expanded");
         }
-        const itemId = this.accordionIds[index];
-        item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
-        this.activeid = this.accordionIds[this.activeItemIndex];
       });
       if (this.isSingleExpandMode()) {
         const expandedItem = this.findExpandedItem();
         this.setSingleExpandMode(expandedItem);
       }
     };
+    /**
+     * Removes event listeners from the previous accordion items
+     * @param oldValue An array of the previous accordion items
+     */
     this.removeItemListeners = oldValue => {
       oldValue.forEach((item, index) => {
         Observable.getNotifier(item).unsubscribe(this, "disabled");
         Observable.getNotifier(item).unsubscribe(this, "expanded");
-        item.removeEventListener("click", this.activeItemChange);
-        item.removeEventListener("keydown", this.handleItemKeyDown);
-        item.removeEventListener("focus", this.handleItemFocus);
+        item.removeEventListener("click", this.expandedChangedHandler);
       });
     };
-    this.activeItemChange = event => {
-      if (event.defaultPrevented || event.target !== event.currentTarget) {
-        return;
-      }
-      event.preventDefault();
-      this.handleExpandedChange(event.target);
-    };
-    this.handleExpandedChange = item => {
+    /**
+     * Changes the expanded state of the accordion item
+     * @param evt Click event
+     * @returns
+     */
+    this.expandedChangedHandler = evt => {
+      const item = evt.target;
       if (item instanceof AccordionItem) {
-        this.activeid = item.getAttribute("id");
         if (!this.isSingleExpandMode()) {
           item.expanded = !item.expanded;
           this.activeItemIndex = this.accordionItems.indexOf(item);
         } else {
           this.setSingleExpandMode(item);
         }
-        this.change();
-      }
-    };
-    this.handleItemKeyDown = event => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      this.accordionIds = this.getItemIds();
-      switch (event.key) {
-        case keyArrowUp:
-          event.preventDefault();
-          this.adjust(-1);
-          break;
-        case keyArrowDown:
-          event.preventDefault();
-          this.adjust(1);
-          break;
-        case keyHome:
-          this.activeItemIndex = 0;
-          this.focusItem();
-          break;
-        case keyEnd:
-          this.activeItemIndex = this.accordionItems.length - 1;
-          this.focusItem();
-          break;
-      }
-    };
-    this.handleItemFocus = event => {
-      if (event.target === event.currentTarget) {
-        const focusedItem = event.target;
-        const focusedIndex = this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem);
-        if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
-          this.activeItemIndex = focusedIndex;
-          this.activeid = this.accordionIds[this.activeItemIndex];
-        }
+        this.$emit("change");
       }
     };
   }
@@ -4062,11 +4133,11 @@ class Accordion extends FASTElement {
     if (!expandedItem) {
       return;
     }
-    if (next !== AccordionExpandMode.single) {
-      expandedItem?.expandbutton.removeAttribute("aria-disabled");
-    } else {
+    if (next === AccordionExpandMode.single) {
       this.setSingleExpandMode(expandedItem);
+      return;
     }
+    expandedItem?.expandbutton.removeAttribute("aria-disabled");
   }
   /**
    * @internal
@@ -4077,6 +4148,7 @@ class Accordion extends FASTElement {
     }
   }
   /**
+   * Watch for changes to the slotted accordion items `disabled` and `expanded` attributes
    * @internal
    */
   handleChange(source, propertyName) {
@@ -4088,12 +4160,28 @@ class Accordion extends FASTElement {
       }
     }
   }
+  /**
+   * Find the first expanded item in the accordion
+   * @returns {void}
+   */
   findExpandedItem() {
     if (this.accordionItems.length === 0) {
       return null;
     }
     return this.accordionItems.find(item => item instanceof AccordionItem && item.expanded) ?? this.accordionItems[0];
   }
+  /**
+   * Checks if the accordion is in single expand mode
+   * @returns {boolean}
+   */
+  isSingleExpandMode() {
+    return this.expandmode === AccordionExpandMode.single;
+  }
+  /**
+   * Controls the behavior of the accordion in single expand mode
+   * @param expandedItem The item to expand in single expand mode
+   * @returns {void}
+   */
   setSingleExpandMode(expandedItem) {
     if (this.accordionItems.length === 0) {
       return;
@@ -4114,29 +4202,11 @@ class Accordion extends FASTElement {
       }
     });
   }
-  getItemIds() {
-    return this.slottedAccordionItems.map(accordionItem => {
-      return accordionItem.id;
-    });
-  }
-  isSingleExpandMode() {
-    return this.expandmode === AccordionExpandMode.single;
-  }
-  adjust(adjustment) {
-    this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
-    this.focusItem();
-  }
-  focusItem() {
-    const element = this.accordionItems[this.activeItemIndex];
-    if (element instanceof AccordionItem) {
-      element.expandbutton.focus();
-    }
-  }
 }
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$t([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$s([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
 const styles$w = css`
   ${display("flex")}
@@ -4159,20 +4229,6 @@ const definition$x = Accordion.compose({
 
 definition$x.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",
@@ -4190,12 +4246,12 @@ const AnchorAttributes = {
   type: "type"
 };
 
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$r = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$s(target, key, result);
+  if (kind && result) __defProp$r(target, key, result);
   return result;
 };
 class BaseAnchor extends FASTElement {
@@ -4303,14 +4359,14 @@ class BaseAnchor extends FASTElement {
     return proxy;
   }
 }
-__decorateClass$s([attr], BaseAnchor.prototype, "download", 2);
-__decorateClass$s([attr], BaseAnchor.prototype, "href", 2);
-__decorateClass$s([attr], BaseAnchor.prototype, "hreflang", 2);
-__decorateClass$s([attr], BaseAnchor.prototype, "ping", 2);
-__decorateClass$s([attr], BaseAnchor.prototype, "referrerpolicy", 2);
-__decorateClass$s([attr], BaseAnchor.prototype, "rel", 2);
-__decorateClass$s([attr], BaseAnchor.prototype, "target", 2);
-__decorateClass$s([attr], BaseAnchor.prototype, "type", 2);
+__decorateClass$r([attr], BaseAnchor.prototype, "download", 2);
+__decorateClass$r([attr], BaseAnchor.prototype, "href", 2);
+__decorateClass$r([attr], BaseAnchor.prototype, "hreflang", 2);
+__decorateClass$r([attr], BaseAnchor.prototype, "ping", 2);
+__decorateClass$r([attr], BaseAnchor.prototype, "referrerpolicy", 2);
+__decorateClass$r([attr], BaseAnchor.prototype, "rel", 2);
+__decorateClass$r([attr], BaseAnchor.prototype, "target", 2);
+__decorateClass$r([attr], BaseAnchor.prototype, "type", 2);
 class AnchorButton extends BaseAnchor {
   constructor() {
     super(...arguments);
@@ -4364,55 +4420,15 @@ class AnchorButton extends BaseAnchor {
     toggleState(this.elementInternals, "icon", !!next);
   }
 }
-__decorateClass$s([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$s([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$s([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$s([attr({
+__decorateClass$r([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$r([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$r([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$r([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], 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$1 = css.partial`:is([state--underline], :state(underline))`;
-const transparentState = css.partial`:is([state--transparent], :state(transparent))`;
-const circularState = css.partial`:is([state--circular], :state(circular))`;
-const roundedState = css.partial`:is([state--rounded], :state(rounded))`;
-const squareState = css.partial`:is([state--square], :state(square))`;
-const tinyState = css.partial`:is([state--tiny], :state(tiny))`;
-const extraSmallState = css.partial`:is([state--extra-small], :state(extra-small))`;
-const smallState = css.partial`:is([state--small], :state(small))`;
-const largeState = css.partial`:is([state--large], :state(large))`;
-const extraLargeState = css.partial`:is([state--extra-large], :state(extra-large))`;
-const hugeState = css.partial`:is([state--huge], :state(huge))`;
-const alignStartState = css.partial`:is([state--align-start], :state(align-start))`;
-const alignEndState = css.partial`:is([state--align-end], :state(align-end))`;
-const insetState = css.partial`:is([state--inset], :state(inset))`;
-const iconOnlyState = css.partial`:is([state--icon], :state(icon))`;
-const pressedState = css.partial`:is([state--pressed], :state(pressed))`;
-const brandState = css.partial`:is([state--brand], :state(brand))`;
-const errorState = css.partial`:is([state--error], :state(error))`;
-const dangerState = css.partial`:is([state--danger], :state(danger))`;
-const importantState = css.partial`:is([state--important], :state(important))`;
-const informativeState = css.partial`:is([state--informative], :state(informative))`;
-css.partial`:is([state--marigold], :state(marigold))`;
-const neutralState = css.partial`:is([state--neutral], :state(neutral))`;
-const severeState = css.partial`:is([state--severe], :state(severe))`;
-const successState = css.partial`:is([state--success], :state(success))`;
-const warningState = css.partial`:is([state--warning], :state(warning))`;
-const verticalState = css.partial`:is([state--vertical], :state(vertical))`;
-css.partial`:is([state--horizontal], :state(horizontal))`;
-css.partial`:is([state--singleline], :state(singleline))`;
-const multiLineState = css.partial`:is([state--multiline], :state(multiline))`;
-
 const baseButtonStyles = css`
   ${display("inline-flex")}
 
@@ -4522,12 +4538,12 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
+  if (kind && result) __defProp$q(target, key, result);
   return result;
 };
 const _Avatar = class _Avatar extends FASTElement {
@@ -4593,16 +4609,16 @@ const _Avatar = class _Avatar extends FASTElement {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$r([attr], _Avatar.prototype, "name", 2);
-__decorateClass$r([attr], _Avatar.prototype, "initials", 2);
-__decorateClass$r([attr({
+__decorateClass$q([attr], _Avatar.prototype, "name", 2);
+__decorateClass$q([attr], _Avatar.prototype, "initials", 2);
+__decorateClass$q([attr({
   converter: nullableNumberConverter
 })], _Avatar.prototype, "size", 2);
-__decorateClass$r([attr], _Avatar.prototype, "shape", 2);
-__decorateClass$r([attr], _Avatar.prototype, "active", 2);
-__decorateClass$r([attr], _Avatar.prototype, "appearance", 2);
-__decorateClass$r([attr], _Avatar.prototype, "color", 2);
-__decorateClass$r([attr({
+__decorateClass$q([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$q([attr], _Avatar.prototype, "active", 2);
+__decorateClass$q([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$q([attr], _Avatar.prototype, "color", 2);
+__decorateClass$q([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -4661,12 +4677,12 @@ const BadgeColor = {
   warning: "warning"
 };
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
 class Badge extends FASTElement {
@@ -4734,10 +4750,10 @@ class Badge extends FASTElement {
     }
   }
 }
-__decorateClass$q([attr], Badge.prototype, "appearance", 2);
-__decorateClass$q([attr], Badge.prototype, "color", 2);
-__decorateClass$q([attr], Badge.prototype, "shape", 2);
-__decorateClass$q([attr], Badge.prototype, "size", 2);
+__decorateClass$p([attr], Badge.prototype, "appearance", 2);
+__decorateClass$p([attr], Badge.prototype, "color", 2);
+__decorateClass$p([attr], Badge.prototype, "shape", 2);
+__decorateClass$p([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
 const badgeBaseStyles = css.partial`
@@ -5114,12 +5130,12 @@ const definition$u = Badge.compose({
 
 definition$u.define(FluentDesignSystem.registry);
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
 class Button extends FASTElement {
@@ -5370,46 +5386,46 @@ class Button extends FASTElement {
  * @public
  */
 Button.formAssociated = true;
-__decorateClass$p([attr], Button.prototype, "appearance", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr], Button.prototype, "appearance", 2);
+__decorateClass$o([attr({
   mode: "boolean"
 })], Button.prototype, "autofocus", 2);
-__decorateClass$p([observable], Button.prototype, "defaultSlottedContent", 2);
-__decorateClass$p([attr({
+__decorateClass$o([observable], Button.prototype, "defaultSlottedContent", 2);
+__decorateClass$o([attr({
   mode: "boolean"
 })], Button.prototype, "disabled", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], Button.prototype, "disabledFocusable", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr({
   attribute: "formaction"
 })], Button.prototype, "formAction", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr({
   attribute: "form"
 })], Button.prototype, "formAttribute", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr({
   attribute: "formenctype"
 })], Button.prototype, "formEnctype", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr({
   attribute: "formmethod"
 })], Button.prototype, "formMethod", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], Button.prototype, "formNoValidate", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr({
   attribute: "formtarget"
 })], Button.prototype, "formTarget", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
-__decorateClass$p([attr], Button.prototype, "name", 2);
-__decorateClass$p([attr], Button.prototype, "shape", 2);
-__decorateClass$p([attr], Button.prototype, "size", 2);
-__decorateClass$p([attr], Button.prototype, "type", 2);
-__decorateClass$p([attr], Button.prototype, "value", 2);
+__decorateClass$o([attr], Button.prototype, "name", 2);
+__decorateClass$o([attr], Button.prototype, "shape", 2);
+__decorateClass$o([attr], Button.prototype, "size", 2);
+__decorateClass$o([attr], Button.prototype, "type", 2);
+__decorateClass$o([attr], Button.prototype, "value", 2);
 applyMixins(Button, StartEnd);
 
 function buttonTemplate$1(options = {}) {
@@ -5425,25 +5441,18 @@ const definition$t = Button.compose({
 
 definition$t.define(FluentDesignSystem.registry);
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
+var __decorateClass$n = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
+  if (kind && result) __defProp$n(target, key, result);
   return result;
 };
 class BaseCheckbox extends FASTElement {
   constructor() {
-    super();
-    this.disabled = false;
+    super(...arguments);
     this.initialValue = "on";
-    /**
-     * The internal checked state of the control.
-     *
-     * @internal
-     */
-    this._checked = this.initialChecked ?? false;
     /**
      * Indicates that the checked state has been changed by the user.
      *
@@ -5468,7 +5477,6 @@ class BaseCheckbox extends FASTElement {
      * @internal
      */
     this._value = this.initialValue;
-    this.elementInternals.role = "checkbox";
   }
   /**
    * The element's current checked state.
@@ -5477,40 +5485,52 @@ class BaseCheckbox extends FASTElement {
    */
   get checked() {
     Observable.track(this, "checked");
-    return this._checked;
+    return !!this._checked;
   }
-  set checked(state) {
-    this._checked = state;
-    this.setFormValue(state ? this.value : null);
+  set checked(next) {
+    this._checked = next;
+    this.setFormValue(next ? this.value : null);
     this.setValidity();
     this.setAriaChecked();
-    toggleState(this.elementInternals, "checked", state);
+    toggleState(this.elementInternals, "checked", next);
     Observable.notify(this, "checked");
   }
   /**
-   * Synchronizes the element's indeterminate state with the internal ElementInternals state.
+   * Toggles the disabled state when the user changes the `disabled` property.
    *
    * @internal
    */
-  indeterminateChanged(prev, next) {
-    this.setAriaChecked();
-    toggleState(this.elementInternals, "indeterminate", next);
+  disabledChanged(prev, next) {
+    this.elementInternals.ariaDisabled = this.disabled ? "true" : "false";
+    toggleState(this.elementInternals, "disabled", this.disabled);
+  }
+  /**
+   * Sets the disabled state when the `disabled` attribute changes.
+   *
+   * @param prev - the previous value
+   * @param next - the current value
+   * @internal
+   */
+  disabledAttributeChanged(prev, next) {
+    this.disabled = !!next;
   }
   /**
-   * Updates the form value when the checked state changes.
+   * Updates the checked state when the `checked` attribute is changed, unless the checked state has been changed by the user.
    *
+   * @param prev - The previous initial checked state
+   * @param next - The current initial checked state
    * @internal
    */
   initialCheckedChanged(prev, next) {
     if (!this.dirtyChecked) {
-      this.checked = next;
+      this.checked = !!next;
     }
   }
   /**
-   * Sets the value of the input when the value attribute changes.
+   * Sets the value of the input when the `value` attribute changes.
    *
-   * @param prev - The previous value
-   * @param next - The current value
+   * @param prev - The previous initial value
+   * @param next - The current initial value
    * @internal
    */
   initialValueChanged(prev, next) {
@@ -5526,7 +5546,7 @@ class BaseCheckbox extends FASTElement {
   requiredChanged(prev, next) {
     if (this.$fastController.isConnected) {
       this.setValidity();
-      this.elementInternals.ariaRequired = `${!!next}`;
+      this.elementInternals.ariaRequired = this.required ? "true" : "false";
     }
   }
   /**
@@ -5605,14 +5625,6 @@ class BaseCheckbox extends FASTElement {
   get willValidate() {
     return this.elementInternals.willValidate;
   }
-  /**
-   * Sets the `elementInternals.ariaChecked` value based on the checked state.
-   *
-   * @internal
-   */
-  setAriaChecked() {
-    this.elementInternals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`;
-  }
   /**
    * Checks the validity of the element and returns the result.
    *
@@ -5634,14 +5646,16 @@ class BaseCheckbox extends FASTElement {
       return;
     }
     this.dirtyChecked = true;
+    const previousChecked = this.checked;
     this.toggleChecked();
-    this.$emit("change");
-    this.$emit("input");
+    if (previousChecked !== this.checked) {
+      this.$emit("change");
+      this.$emit("input");
+    }
     return true;
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setFormValue(this.checked ? this.value : null);
     this.setAriaChecked();
     this.setValidity();
   }
@@ -5652,7 +5666,7 @@ class BaseCheckbox extends FASTElement {
    * @internal
    */
   inputHandler(e) {
-    this.elementInternals.setFormValue(this.value);
+    this.setFormValue(this.value);
     this.setValidity();
     return true;
   }
@@ -5687,7 +5701,6 @@ class BaseCheckbox extends FASTElement {
   formResetCallback() {
     this.checked = this.initialChecked ?? false;
     this.dirtyChecked = false;
-    this.indeterminate = false;
     this.setValidity();
   }
   /**
@@ -5700,6 +5713,15 @@ class BaseCheckbox extends FASTElement {
   reportValidity() {
     return this.elementInternals.reportValidity();
   }
+  /**
+   * Sets the ARIA checked state.
+   *
+   * @param value - The checked state
+   * @internal
+   */
+  setAriaChecked(value = this.checked) {
+    this.elementInternals.ariaChecked = value ? "true" : "false";
+  }
   /**
    * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
    *
@@ -5729,24 +5751,25 @@ class BaseCheckbox extends FASTElement {
    *
    * @internal
    */
-  setValidity(flags = {
-    valueMissing: !!this.required && !this.checked
-  }, message = this.validationMessage, anchor) {
+  setValidity(flags, message, anchor) {
     if (this.$fastController.isConnected) {
-      if (this.disabled) {
+      if (this.disabled || !this.required) {
         this.elementInternals.setValidity({});
         return;
       }
-      this.elementInternals.setValidity(flags, message, anchor);
+      this.elementInternals.setValidity({
+        valueMissing: !!this.required && !this.checked,
+        ...flags
+      }, message ?? this.validationMessage, anchor);
     }
   }
   /**
    * Toggles the checked state of the control.
    *
+   * @param force - Forces the element to be checked or unchecked
    * @public
    */
   toggleChecked(force = !this.checked) {
-    this.indeterminate = false;
     this.checked = force;
   }
 }
@@ -5757,33 +5780,47 @@ class BaseCheckbox extends FASTElement {
  * @public
  */
 BaseCheckbox.formAssociated = true;
-__decorateClass$o([attr({
+__decorateClass$n([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "autofocus", 2);
-__decorateClass$o([attr({
+__decorateClass$n([observable], BaseCheckbox.prototype, "disabled", 2);
+__decorateClass$n([attr({
+  attribute: "disabled",
   mode: "boolean"
-})], BaseCheckbox.prototype, "disabled", 2);
-__decorateClass$o([attr({
+})], BaseCheckbox.prototype, "disabledAttribute", 2);
+__decorateClass$n([attr({
   attribute: "form"
 })], BaseCheckbox.prototype, "formAttribute", 2);
-__decorateClass$o([observable], BaseCheckbox.prototype, "indeterminate", 2);
-__decorateClass$o([attr({
+__decorateClass$n([attr({
   attribute: "checked",
   mode: "boolean"
 })], BaseCheckbox.prototype, "initialChecked", 2);
-__decorateClass$o([attr({
+__decorateClass$n([attr({
   attribute: "value",
   mode: "fromView"
 })], BaseCheckbox.prototype, "initialValue", 2);
-__decorateClass$o([attr], BaseCheckbox.prototype, "name", 2);
-__decorateClass$o([attr({
+__decorateClass$n([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$n([attr({
   mode: "boolean"
 })], BaseCheckbox.prototype, "required", 2);
 class Checkbox extends BaseCheckbox {
   /**
-   * Handles changes to shape attribute custom states
-   * @param prev - the previous state
-   * @param next - the next state
+   * Updates the indeterminate state when the `indeterminate` property changes.
+   *
+   * @param prev - the indeterminate state
+   * @param next - the current indeterminate state
+   * @internal
+   */
+  indeterminateChanged(prev, next) {
+    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) {
     if (prev) {
@@ -5794,9 +5831,11 @@ class Checkbox extends BaseCheckbox {
     }
   }
   /**
-   * Handles changes to size attribute custom states
+   * Applies size states when the `size` property changes.
+   *
    * @param prev - the previous state
    * @param next - the next state
+   * @internal
    */
   sizeChanged(prev, next) {
     if (prev) {
@@ -5806,19 +5845,46 @@ class Checkbox extends BaseCheckbox {
       toggleState(this.elementInternals, next, true);
     }
   }
+  constructor() {
+    super();
+    this.elementInternals.role = "checkbox";
+  }
+  /**
+   * Sets the ARIA checked state. If the `indeterminate` flag is true, the value will be 'mixed'.
+   *
+   * @internal
+   * @override
+   */
+  setAriaChecked(value = this.checked) {
+    if (this.indeterminate) {
+      this.elementInternals.ariaChecked = "mixed";
+      return;
+    }
+    super.setAriaChecked(value);
+  }
+  /**
+   * Toggles the checked state of the control.
+   *
+   * @param force - Forces the element to be checked or unchecked
+   * @public
+   */
+  toggleChecked(force = !this.checked) {
+    this.indeterminate = false;
+    super.toggleChecked(force);
+  }
 }
-__decorateClass$o([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$o([attr], Checkbox.prototype, "size", 2);
+__decorateClass$n([observable], Checkbox.prototype, "indeterminate", 2);
+__decorateClass$n([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$n([attr], Checkbox.prototype, "size", 2);
 
-const checkedState$1 = css.partial`:is([state--checked], :state(checked))`;
 const indeterminateState = css.partial`:is([state--indeterminate], :state(indeterminate))`;
 const styles$r = 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(${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}`));
+  :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{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 = html.partial( /* html */
+const checkedIndicator$1 = html.partial( /* html */
 `
     <svg
         fill="currentColor"
@@ -5839,7 +5905,7 @@ function checkboxTemplate(options = {}) {
   return html`<template tabindex="${x => !x.disabled ? 0 : void 0}" @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot><slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot></template>`;
 }
 const template$s = checkboxTemplate({
-  checkedIndicator,
+  checkedIndicator: checkedIndicator$1,
   indeterminateIndicator
 });
 
@@ -5872,12 +5938,12 @@ const definition$r = CompoundButton.compose({
 
 definition$r.define(FluentDesignSystem.registry);
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
-var __decorateClass$n = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$n(target, key) : target;
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
+var __decorateClass$m = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
 class CounterBadge extends FASTElement {
@@ -5974,22 +6040,22 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$n([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$n([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$n([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$n([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$m([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$m([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$m([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$m([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
@@ -6024,12 +6090,12 @@ const DialogType = {
   alert: "alert"
 };
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
-var __decorateClass$m = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$m(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
 class Dialog extends FASTElement {
@@ -6097,14 +6163,14 @@ class Dialog extends FASTElement {
     return true;
   }
 }
-__decorateClass$m([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$m([attr({
+__decorateClass$l([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$l([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$m([attr({
+__decorateClass$l([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$m([attr], Dialog.prototype, "type", 2);
+__decorateClass$l([attr], Dialog.prototype, "type", 2);
 
 const template$p = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${(x, c) => x.type === DialogType.alert ? c.event.preventDefault() : x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
@@ -6120,12 +6186,12 @@ const definition$p = Dialog.compose({
 
 definition$p.define(FluentDesignSystem.registry);
 
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$l(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 class DialogBody extends FASTElement {
@@ -6134,7 +6200,7 @@ class DialogBody extends FASTElement {
     this.noTitleAction = false;
   }
 }
-__decorateClass$l([attr({
+__decorateClass$k([attr({
   mode: "boolean",
   attribute: "no-title-action"
 })], DialogBody.prototype, "noTitleAction", 2);
@@ -6180,12 +6246,12 @@ const DividerRole = {
 };
 const DividerOrientation = Orientation;
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
-var __decorateClass$k = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$k(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 class Divider extends FASTElement {
@@ -6272,13 +6338,13 @@ class Divider extends FASTElement {
     }
   }
 }
-__decorateClass$k([attr], Divider.prototype, "role", 2);
-__decorateClass$k([attr], Divider.prototype, "orientation", 2);
-__decorateClass$k([attr({
+__decorateClass$j([attr], Divider.prototype, "role", 2);
+__decorateClass$j([attr], Divider.prototype, "orientation", 2);
+__decorateClass$j([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
-__decorateClass$k([attr], Divider.prototype, "appearance", 2);
-__decorateClass$k([attr({
+__decorateClass$j([attr], Divider.prototype, "appearance", 2);
+__decorateClass$j([attr({
   mode: "boolean"
 })], Divider.prototype, "inset", 2);
 
@@ -6317,12 +6383,12 @@ const DrawerType = {
   inline: "inline"
 };
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$j(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 class Drawer extends FASTElement {
@@ -6392,18 +6458,18 @@ class Drawer extends FASTElement {
     return true;
   }
 }
-__decorateClass$j([attr], Drawer.prototype, "type", 2);
-__decorateClass$j([attr({
+__decorateClass$i([attr], Drawer.prototype, "type", 2);
+__decorateClass$i([attr({
   attribute: "aria-labelledby"
 })], Drawer.prototype, "ariaLabelledby", 2);
-__decorateClass$j([attr({
+__decorateClass$i([attr({
   attribute: "aria-describedby"
 })], Drawer.prototype, "ariaDescribedby", 2);
-__decorateClass$j([attr], Drawer.prototype, "position", 2);
-__decorateClass$j([attr({
+__decorateClass$i([attr], Drawer.prototype, "position", 2);
+__decorateClass$i([attr({
   attribute: "size"
 })], Drawer.prototype, "size", 2);
-__decorateClass$j([observable], Drawer.prototype, "dialog", 2);
+__decorateClass$i([observable], Drawer.prototype, "dialog", 2);
 
 const styles$l = css`
   ${display("block")}
@@ -6442,24 +6508,38 @@ const ValidationFlags = {
   valid: "valid"
 };
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 class Field extends FASTElement {
   constructor() {
-    super(...arguments);
+    super();
     this.labelPosition = LabelPosition.above;
+    this.labelSlot = [];
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
      * @internal
      */
     this.elementInternals = this.attachInternals();
+    this.elementInternals.role = "presentation";
+  }
+  /**
+   * Updates attributes on the slotted label elements.
+   *
+   * @param prev - the previous list of slotted label elements
+   * @param next - the current list of slotted label elements
+   */
+  labelSlotChanged(prev, next) {
+    if (next && this.input) {
+      this.setLabelProperties();
+      this.setStates();
+    }
   }
   /**
    * Adds or removes the `invalid` event listener based on the presence of slotted message elements.
@@ -6469,6 +6549,7 @@ class Field extends FASTElement {
    * @internal
    */
   messageSlotChanged(prev, next) {
+    toggleState(this.elementInternals, "has-message", !!next.length);
     if (!next.length) {
       this.removeEventListener("invalid", this.invalidHandler, {
         capture: true
@@ -6487,30 +6568,43 @@ class Field extends FASTElement {
    * @internal
    */
   slottedInputsChanged(prev, next) {
-    this.input = next?.[0];
-    if (this.input) {
+    if (next?.length) {
+      this.input = next?.[0];
       this.setStates();
     }
   }
   /**
-   * Calls the `setStates` method when a `change` event is emitted from the slotted input.
+   * Updates the field's states and label properties when the assigned input changes.
    *
-   * @param e - the event object
+   * @param prev - the previous input
+   * @param next - the current input
+   */
+  inputChanged(prev, next) {
+    if (next) {
+      this.setStates();
+      this.setLabelProperties();
+    }
+  }
+  /**
+   * Calls the `setStates` method when a `change` event is emitted from the slotted input.
+   *
+   * @param e - the event object
    * @internal
    */
   changeHandler(e) {
     this.setStates();
+    this.setValidationStates();
+    return true;
   }
   /**
    * Redirects `click` events to the slotted input.
    *
+   * @param e - the event object
    * @internal
    */
   clickHandler(e) {
-    if (this.isSameNode(e.target)) {
-      this.input.focus();
+    if (this === e.target) {
       this.input.click();
-      return;
     }
     return true;
   }
@@ -6521,7 +6615,7 @@ class Field extends FASTElement {
    * @internal
    */
   focusinHandler(e) {
-    if (e.target.matches(":focus-visible")) {
+    if (this.matches(":focus-within:has(> :focus-visible)")) {
       toggleState(this.elementInternals, "focus-visible", true);
     }
     return true;
@@ -6546,7 +6640,25 @@ class Field extends FASTElement {
     if (this.messageSlot.length) {
       e.preventDefault();
     }
-    this.setStates();
+    this.setValidationStates();
+  }
+  /**
+   * Sets ARIA and form-related attributes on slotted label elements.
+   *
+   * @internal
+   */
+  setLabelProperties() {
+    if (this.$fastController.isConnected) {
+      this.input.id = this.input.id || uniqueId("input");
+      this.labelSlot?.forEach(label => {
+        if (label instanceof HTMLLabelElement) {
+          label.htmlFor = label.htmlFor || this.input.id;
+          label.id = label.id || `${this.input.id}--label`;
+          label.setAttribute("aria-hidden", "true");
+          this.input.setAttribute("aria-labelledby", label.id);
+        }
+      });
+    }
   }
   /**
    * Toggles the field's states based on the slotted input.
@@ -6558,22 +6670,26 @@ class Field extends FASTElement {
       toggleState(this.elementInternals, "disabled", !!this.input.disabled);
       toggleState(this.elementInternals, "readonly", !!this.input.readOnly);
       toggleState(this.elementInternals, "required", !!this.input.required);
-      if (!this.input.validity) {
-        return;
-      }
-      for (const [flag, value] of Object.entries(ValidationFlags)) {
-        toggleState(this.elementInternals, value, !!this.input.validity[flag]);
-      }
+      toggleState(this.elementInternals, "checked", !!this.input.checked);
+    }
+  }
+  setValidationStates() {
+    if (!this.input.validity) {
+      return;
+    }
+    for (const [flag, value] of Object.entries(ValidationFlags)) {
+      toggleState(this.elementInternals, value, this.input.validity[flag]);
     }
   }
 }
-__decorateClass$i([attr({
+__decorateClass$h([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
-__decorateClass$i([observable], Field.prototype, "messageSlot", 2);
-__decorateClass$i([observable], Field.prototype, "slottedInputs", 2);
+__decorateClass$h([observable], Field.prototype, "labelSlot", 2);
+__decorateClass$h([observable], Field.prototype, "messageSlot", 2);
+__decorateClass$h([observable], Field.prototype, "slottedInputs", 2);
+__decorateClass$h([observable], Field.prototype, "input", 2);
 
-const disabledState = css.partial`:is([state--disabled], :state(disabled))`;
 const focusVisibleState = css.partial`:is([state--focus-visible], :state(focus-visible))`;
 const badInputState = css.partial`:is([state--${ValidationFlags.badInput}], :state(${ValidationFlags.badInput}))`;
 const customErrorState = css.partial`:is([state--${ValidationFlags.customError}], :state(${ValidationFlags.customError}))`;
@@ -6586,10 +6702,11 @@ const tooShortState = css.partial`:is([state--${ValidationFlags.tooShort}], :sta
 const typeMismatchState = css.partial`:is([state--${ValidationFlags.typeMismatch}], :state(${ValidationFlags.typeMismatch}))`;
 const validState = css.partial`:is([state-${ValidationFlags.valid}], :state(${ValidationFlags.valid}))`;
 const valueMissingState = css.partial`:is([state--${ValidationFlags.valueMissing}], :state(${ValidationFlags.valueMissing}))`;
+const hasMessageState = css.partial`:is([state--has-message], :state(has-message))`;
 const styles$k = css`
   ${display("inline-grid")}
 
-  :host{align-items:center;cursor:pointer;gap:0 ${spacingHorizontalM};justify-items:start;padding:${spacingVerticalS}}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message'}::slotted([slot='label']){cursor:pointer;grid-area:label}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){margin-block-start:${spacingVerticalXXS};grid-area:message}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label){display:inline-flex;color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}) ::slotted(label){color:${colorNeutralForeground1};cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
+  :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start;padding:${spacingVerticalS} ${spacingHorizontalS};position:relative}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host([label-position='below']:not(${hasMessageState})){grid-template-areas:'input' 'label'}::slotted([slot='label'])::after{content:'';display:block;position:absolute;inset:0}::slotted([slot='input']){grid-area:input;position:relative;z-index:1}::slotted([slot='message']){margin-block-start:${spacingVerticalXXS};grid-area:message}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
 
 const template$l = html`<template @click="${(x, c) => x.clickHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" ${children({
   property: "slottedInputs",
@@ -6598,7 +6715,7 @@ const template$l = html`<template @click="${(x, c) => x.clickHandler(c.event)}"
   subtree: true,
   selector: '[slot="input"]',
   filter: elements()
-})}><slot name="label" part="label"></slot><slot name="input" part="input"></slot><slot name="message" part="message" ${slotted({
+})}><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>`;
@@ -6614,12 +6731,12 @@ const definition$l = Field.compose({
 
 definition$l.define(FluentDesignSystem.registry);
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 class Image extends FASTElement {
@@ -6684,17 +6801,17 @@ class Image extends FASTElement {
     }
   }
 }
-__decorateClass$h([attr({
+__decorateClass$g([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
-__decorateClass$h([attr({
+__decorateClass$g([attr({
   mode: "boolean"
 })], Image.prototype, "bordered", 2);
-__decorateClass$h([attr({
+__decorateClass$g([attr({
   mode: "boolean"
 })], Image.prototype, "shadow", 2);
-__decorateClass$h([attr], Image.prototype, "fit", 2);
-__decorateClass$h([attr], Image.prototype, "shape", 2);
+__decorateClass$g([attr], Image.prototype, "fit", 2);
+__decorateClass$g([attr], Image.prototype, "shape", 2);
 
 const template$k = html`<slot></slot>`;
 
@@ -6709,12 +6826,12 @@ const definition$k = Image.compose({
 
 definition$k.define(FluentDesignSystem.registry);
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 class Label extends FASTElement {
@@ -6764,12 +6881,12 @@ class Label extends FASTElement {
     toggleState(this.elementInternals, "disabled", next);
   }
 }
-__decorateClass$g([attr], Label.prototype, "size", 2);
-__decorateClass$g([attr], Label.prototype, "weight", 2);
-__decorateClass$g([attr({
+__decorateClass$f([attr], Label.prototype, "size", 2);
+__decorateClass$f([attr], Label.prototype, "weight", 2);
+__decorateClass$f([attr({
   mode: "boolean"
 })], Label.prototype, "disabled", 2);
-__decorateClass$g([attr({
+__decorateClass$f([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
@@ -6791,12 +6908,12 @@ const definition$j = Label.compose({
 
 definition$j.define(FluentDesignSystem.registry);
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 class Link extends BaseAnchor {
@@ -6826,8 +6943,8 @@ class Link extends BaseAnchor {
     toggleState(this.elementInternals, "inline", next);
   }
 }
-__decorateClass$f([attr], Link.prototype, "appearance", 2);
-__decorateClass$f([attr({
+__decorateClass$e([attr], Link.prototype, "appearance", 2);
+__decorateClass$e([attr({
   mode: "boolean"
 })], Link.prototype, "inline", 2);
 
@@ -6889,12 +7006,12 @@ const MenuItemRole = {
   [MenuItemRole.menuitemradio]: "menuitemradio"
 });
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 class MenuItem extends FASTElement {
@@ -7039,18 +7156,18 @@ class MenuItem extends FASTElement {
     }
   }
 }
-__decorateClass$e([attr({
+__decorateClass$d([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$e([attr], MenuItem.prototype, "role", 2);
-__decorateClass$e([attr({
+__decorateClass$d([attr], MenuItem.prototype, "role", 2);
+__decorateClass$d([attr({
   mode: "boolean"
 })], MenuItem.prototype, "checked", 2);
-__decorateClass$e([attr({
+__decorateClass$d([attr({
   mode: "boolean"
 })], MenuItem.prototype, "hidden", 2);
-__decorateClass$e([observable], MenuItem.prototype, "slottedSubmenu", 2);
-__decorateClass$e([observable], MenuItem.prototype, "submenu", 2);
+__decorateClass$d([observable], MenuItem.prototype, "slottedSubmenu", 2);
+__decorateClass$d([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
 const styles$g = css`
@@ -7080,12 +7197,12 @@ const definition$g = MenuItem.compose({
 
 definition$g.define(FluentDesignSystem.registry);
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 const _MenuList = class _MenuList extends FASTElement {
@@ -7294,7 +7411,7 @@ const _MenuList = class _MenuList extends FASTElement {
   }
 };
 _MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$d([observable], _MenuList.prototype, "items", 2);
+__decorateClass$c([observable], _MenuList.prototype, "items", 2);
 let MenuList = _MenuList;
 
 const styles$f = css`
@@ -7315,12 +7432,12 @@ const definition$f = MenuList.compose({
 
 definition$f.define(FluentDesignSystem.registry);
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 class Menu extends FASTElement {
@@ -7604,24 +7721,24 @@ class Menu extends FASTElement {
     }
   }
 }
-__decorateClass$c([observable, attr({
+__decorateClass$b([observable, attr({
   attribute: "open-on-hover",
   mode: "boolean"
 })], Menu.prototype, "openOnHover", 2);
-__decorateClass$c([observable, attr({
+__decorateClass$b([observable, attr({
   attribute: "open-on-context",
   mode: "boolean"
 })], Menu.prototype, "openOnContext", 2);
-__decorateClass$c([observable, attr({
+__decorateClass$b([observable, attr({
   attribute: "close-on-scroll",
   mode: "boolean"
 })], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$c([observable, attr({
+__decorateClass$b([observable, attr({
   attribute: "persist-on-item-click",
   mode: "boolean"
 })], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$c([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$c([observable], Menu.prototype, "slottedTriggers", 2);
+__decorateClass$b([observable], Menu.prototype, "slottedMenuList", 2);
+__decorateClass$b([observable], Menu.prototype, "slottedTriggers", 2);
 
 const styles$e = css`
   ${display("inline-block")}
@@ -7647,12 +7764,12 @@ const definition$e = Menu.compose({
 
 definition$e.define(FluentDesignSystem.registry);
 
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 class MessageBar extends FASTElement {
@@ -7713,9 +7830,9 @@ class MessageBar extends FASTElement {
     }
   }
 }
-__decorateClass$b([attr], MessageBar.prototype, "shape", 2);
-__decorateClass$b([attr], MessageBar.prototype, "layout", 2);
-__decorateClass$b([attr], MessageBar.prototype, "intent", 2);
+__decorateClass$a([attr], MessageBar.prototype, "shape", 2);
+__decorateClass$a([attr], MessageBar.prototype, "layout", 2);
+__decorateClass$a([attr], MessageBar.prototype, "intent", 2);
 
 const styles$d = 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'
@@ -7737,12 +7854,12 @@ const definition$d = MessageBar.compose({
 
 definition$d.define(FluentDesignSystem.registry);
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 class ProgressBar extends FASTElement {
@@ -7831,21 +7948,21 @@ class ProgressBar extends FASTElement {
     return range === 0 ? 0 : Math.fround((value - min) / range * 100);
   }
 }
-__decorateClass$a([attr], ProgressBar.prototype, "thickness", 2);
-__decorateClass$a([attr], ProgressBar.prototype, "shape", 2);
-__decorateClass$a([attr({
+__decorateClass$9([attr], ProgressBar.prototype, "thickness", 2);
+__decorateClass$9([attr], ProgressBar.prototype, "shape", 2);
+__decorateClass$9([attr({
   attribute: "validation-state"
 })], ProgressBar.prototype, "validationState", 2);
-__decorateClass$a([attr({
+__decorateClass$9([attr({
   converter: nullableNumberConverter
 })], ProgressBar.prototype, "value", 2);
-__decorateClass$a([attr({
+__decorateClass$9([attr({
   converter: nullableNumberConverter
 })], ProgressBar.prototype, "min", 2);
-__decorateClass$a([attr({
+__decorateClass$9([attr({
   converter: nullableNumberConverter
 })], ProgressBar.prototype, "max", 2);
-__decorateClass$a([volatile], ProgressBar.prototype, "percentComplete", 1);
+__decorateClass$9([volatile], ProgressBar.prototype, "percentComplete", 1);
 
 const styles$c = css`
   ${display("block")}
@@ -7868,64 +7985,739 @@ const definition$c = ProgressBar.compose({
 
 definition$c.define(FluentDesignSystem.registry);
 
-const proxySlotName = "form-associated-proxy";
-const ElementInternalsKey = "ElementInternals";
-const supportsElementInternals = ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
-const InternalsMap = /* @__PURE__ */new WeakMap();
-function FormAssociated(BaseCtor) {
-  const C = class extends BaseCtor {
-    constructor(...args) {
-      super(...args);
-      /**
-       * Track whether the value has been changed from the initial value
-       */
-      this.dirtyValue = false;
-      /**
-       * The initial value of the form. This value sets the `value` property
-       * only when the `value` property has not been explicitly set.
-       *
-       * @remarks
-       * HTML Attribute: value
-       */
-      this.initialValue = "";
-      /**
-       * Sets the element's disabled state. A disabled element will not be included during form submission.
-       *
-       * @remarks
-       * HTML Attribute: disabled
-       */
-      this.disabled = false;
-      /**
-       * These are events that are still fired by the proxy
-       * element based on user / programmatic interaction.
-       *
-       * The proxy implementation should be transparent to
-       * the app author, so block these events from emitting.
-       */
-      this.proxyEventsToBlock = ["change", "click"];
-      this.proxyInitialized = false;
-      this.required = false;
-      this.initialValue = this.initialValue || "";
-      if (!this.elementInternals) {
-        this.formResetCallback = this.formResetCallback.bind(this);
-      }
+class Radio extends BaseCheckbox {
+  connectedCallback() {
+    super.connectedCallback();
+    this.tabIndex = this.disabled ? -1 : 0;
+  }
+  constructor() {
+    super();
+    this.elementInternals.role = "radio";
+  }
+  /**
+   * Toggles the disabled state when the user changes the `disabled` property.
+   *
+   * @param prev - the previous value of the `disabled` property
+   * @param next - the current value of the `disabled` property
+   * @internal
+   * @override
+   */
+  disabledChanged(prev, next) {
+    super.disabledChanged(prev, next);
+    if (next) {
+      this.checked = false;
+      this.tabIndex = -1;
     }
+    this.$emit("disabled", next, {
+      bubbles: true
+    });
+  }
+  /**
+   * This method is a no-op for the radio component.
+   *
+   * @internal
+   * @override
+   * @remarks
+   * To make a group of radio controls required, see {@link RadioGroup.required}.
+   */
+  requiredChanged() {
+    return;
+  }
+  /**
+   * This method is a no-op for the radio component.
+   *
+   * @internal
+   * @override
+   * @remarks
+   * The radio form value is controlled by the `RadioGroup` component.
+   */
+  setFormValue() {
+    return;
+  }
+  /**
+   * Sets the validity of the control.
+   *
+   * @internal
+   * @override
+   * @remarks
+   * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
+   */
+  setValidity() {
+    this.elementInternals.setValidity({});
+  }
+  /**
+   * Toggles the checked state of the control.
+   *
+   * @param force - Forces the element to be checked or unchecked
+   * @public
+   * @override
+   * @remarks
+   * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
+   */
+  toggleChecked(force = true) {
+    super.toggleChecked(force);
+  }
+}
+
+function getRootActiveElement(element) {
+  const rootNode = element.getRootNode();
+  if (rootNode instanceof ShadowRoot) {
+    return rootNode.activeElement;
+  }
+  return document.activeElement;
+}
+
+const RadioGroupOrientation = Orientation;
+
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$8(target, key, result);
+  return result;
+};
+class RadioGroup extends FASTElement {
+  constructor() {
+    super();
     /**
-     * Must evaluate to true to enable elementInternals.
-     * Feature detects API support and resolve respectively
-     *
-     * @internal
+     * Indicates that the value has been changed by the user.
      */
-    static get formAssociated() {
-      return supportsElementInternals;
-    }
+    this.dirtyState = false;
+    this.disabled = false;
     /**
-     * Returns the validity state of the element
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * @beta
+     * @internal
      */
-    get validity() {
-      return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
+    this.elementInternals = this.attachInternals();
+    this.elementInternals.role = "radiogroup";
+    this.elementInternals.ariaOrientation = this.orientation ?? RadioGroupOrientation.horizontal;
+  }
+  /**
+   * Sets the checked state of the nearest enabled radio when the `checkedIndex` changes.
+   *
+   * @param prev - the previous index
+   * @param next - the current index
+   * @internal
+   */
+  checkedIndexChanged(prev, next) {
+    if (!this.enabledRadios) {
+      return;
+    }
+    this.checkRadio(next);
+  }
+  /**
+   * Sets the `disabled` attribute on all child radios when the `disabled` property changes.
+   *
+   * @param prev - the previous disabled value
+   * @param next - the current disabled value
+   * @internal
+   */
+  disabledChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      this.checkedIndex = -1;
+      this.radios?.forEach(radio => {
+        radio.disabled = radio.disabledAttribute || this.disabled;
+      });
+      this.restrictFocus();
+    }
+  }
+  /**
+   * Sets the matching radio to checked when the value changes. If no radio matches the value, no radio will be checked.
+   *
+   * @param prev - the previous value
+   * @param next - the current value
+   */
+  initialValueChanged(prev, next) {
+    this.value = next ?? "";
+  }
+  /**
+   * Sets the `name` attribute on all child radios when the `name` property changes.
+   *
+   * @internal
+   */
+  nameChanged(prev, next) {
+    if (this.isConnected && next) {
+      this.radios?.forEach(radio => {
+        radio.name = this.name;
+      });
+    }
+  }
+  /**
+   * Sets the ariaOrientation attribute when the orientation changes.
+   *
+   * @param prev - the previous orientation
+   * @param next - the current orientation
+   * @internal
+   */
+  orientationChanged(prev, next) {
+    this.elementInternals.ariaOrientation = this.orientation ?? RadioGroupOrientation.horizontal;
+  }
+  /**
+   * Updates the enabled radios collection when properties on the child radios change.
+   *
+   * @param prev - the previous radios
+   * @param next - the current radios
+   */
+  radiosChanged(prev, next) {
+    const setSize = next?.length;
+    if (!setSize) {
+      return;
+    }
+    if (!this.name && next.every(x => x.name === next[0].name)) {
+      this.name = next[0].name;
+    }
+    const checkedIndex = findLastIndex(this.enabledRadios, x => x.initialChecked);
+    next.forEach((radio, index) => {
+      radio.ariaPosInSet = `${index + 1}`;
+      radio.ariaSetSize = `${setSize}`;
+      if (this.initialValue && !this.dirtyState) {
+        radio.checked = radio.value === this.initialValue;
+      } else {
+        radio.checked = index === checkedIndex;
+      }
+      radio.name = this.name ?? radio.name;
+      radio.disabled = this.disabled || radio.disabledAttribute;
+    });
+    if (!this.dirtyState && this.initialValue) {
+      this.value = this.initialValue;
+    }
+    if (!this.value) {
+      this.checkedIndex = checkedIndex;
+    }
+    const radioIds = next.map(radio => radio.id).join(" ").trim();
+    if (radioIds) {
+      this.setAttribute("aria-owns", radioIds);
+    }
+    Updates.enqueue(() => {
+      this.restrictFocus();
+    });
+  }
+  /**
+   *
+   * @param prev - the previous required value
+   * @param next - the current required value
+   */
+  requiredChanged(prev, next) {
+    this.elementInternals.ariaRequired = next ? "true" : null;
+    this.setValidity();
+  }
+  /**
+   * A collection of child radios that are not disabled.
+   *
+   * @internal
+   */
+  get enabledRadios() {
+    if (this.disabled) {
+      return [];
+    }
+    return this.radios?.filter(x => !x.disabled) ?? [];
+  }
+  /**
+   * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+   * specified (e.g., via `setCustomValidity`).
+   *
+   * @internal
+   */
+  get validationMessage() {
+    if (this.elementInternals.validationMessage) {
+      return this.elementInternals.validationMessage;
+    }
+    if (this.enabledRadios?.[0]?.validationMessage) {
+      return this.enabledRadios[0].validationMessage;
+    }
+    if (!this._validationFallbackMessage) {
+      const validationMessageFallbackControl = document.createElement("input");
+      validationMessageFallbackControl.type = "radio";
+      validationMessageFallbackControl.required = true;
+      validationMessageFallbackControl.checked = false;
+      this._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
+    }
+    return this._validationFallbackMessage;
+  }
+  /**
+   * The element's validity state.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+   */
+  get validity() {
+    return this.elementInternals.validity;
+  }
+  /**
+   * The current value of the checked radio.
+   *
+   * @public
+   */
+  get value() {
+    Observable.notify(this, "value");
+    return this.enabledRadios.find(x => x.checked)?.value ?? null;
+  }
+  set value(next) {
+    const index = this.enabledRadios.findIndex(x => x.value === next);
+    this.checkedIndex = index;
+    if (this.$fastController.isConnected) {
+      this.setFormValue(next);
+      this.setValidity();
+    }
+    Observable.track(this, "value");
+  }
+  /**
+   * Sets the checked state of all radios when any radio emits a `change` event.
+   *
+   * @param e - the change event
+   */
+  changeHandler(e) {
+    if (this === e.target) {
+      return true;
+    }
+    this.dirtyState = true;
+    const radioIndex = this.enabledRadios.indexOf(e.target);
+    this.checkRadio(radioIndex);
+    return true;
+  }
+  /**
+   * Checks the radio at the specified index.
+   *
+   * @param index - the index of the radio to check
+   * @internal
+   */
+  checkRadio(index = this.checkedIndex) {
+    let checkedIndex = this.checkedIndex;
+    this.enabledRadios.forEach((item, i) => {
+      const shouldCheck = i === index;
+      item.checked = shouldCheck;
+      if (shouldCheck) {
+        checkedIndex = i;
+      }
+    });
+    this.checkedIndex = checkedIndex;
+    this.setFormValue(this.value);
+    this.setValidity();
+  }
+  /**
+   * Checks the validity of the element and returns the result.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+   */
+  checkValidity() {
+    return this.elementInternals.checkValidity();
+  }
+  /**
+   * Handles click events for the radio group.
+   *
+   * @param e - the click event
+   * @internal
+   */
+  clickHandler(e) {
+    if (this === e.target) {
+      this.enabledRadios[Math.max(0, this.checkedIndex)]?.focus();
+    }
+    return true;
+  }
+  /**
+   * Focuses the checked radio or the first enabled radio.
+   *
+   * @internal
+   */
+  focus() {
+    this.enabledRadios[Math.max(0, this.checkedIndex)]?.focus();
+  }
+  /**
+   * Enables tabbing through the radio group when the group receives focus.
+   *
+   * @param e - the focus event
+   * @internal
+   */
+  focusinHandler(e) {
+    if (!this.disabled) {
+      this.enabledRadios.forEach(radio => {
+        radio.tabIndex = 0;
+      });
+    }
+    return true;
+  }
+  /**
+   * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
+   *
+   * @param e - the focusout event
+   * @internal
+   */
+  focusoutHandler(e) {
+    if (this.radios?.includes(e.relatedTarget) && this.radios?.some(x => x.checked)) {
+      this.restrictFocus();
+    }
+    return true;
+  }
+  formResetCallback() {
+    this.dirtyState = false;
+    this.checkedIndex = -1;
+    this.setFormValue(this.value);
+    this.setValidity();
+  }
+  getEnabledIndexInBounds(index, upperBound = this.enabledRadios.length) {
+    if (upperBound === 0) {
+      return -1;
+    }
+    return (index + upperBound) % upperBound;
+  }
+  /**
+   * Handles keydown events for the radio group.
+   *
+   * @param e - the keyboard event
+   * @internal
+   */
+  keydownHandler(e) {
+    const isRtl = getDirection(this) === "rtl";
+    const checkedIndex = this.enabledRadios.findIndex(x => x === getRootActiveElement(this)) ?? this.checkedIndex;
+    let increment = 0;
+    switch (e.key) {
+      case "ArrowLeft":
+        {
+          increment = isRtl ? 1 : -1;
+          break;
+        }
+      case "ArrowUp":
+        {
+          increment = -1;
+          break;
+        }
+      case "ArrowRight":
+        {
+          increment = isRtl ? -1 : 1;
+          break;
+        }
+      case "ArrowDown":
+        {
+          increment = 1;
+          break;
+        }
+      case "Tab":
+        {
+          this.restrictFocus();
+          break;
+        }
+      case " ":
+        {
+          this.checkRadio();
+          break;
+        }
+    }
+    if (!increment) {
+      return true;
+    }
+    const nextIndex = checkedIndex + increment;
+    this.checkedIndex = this.getEnabledIndexInBounds(nextIndex);
+    this.enabledRadios[this.checkedIndex]?.focus();
+  }
+  /**
+   *
+   * @param e - the disabled event
+   */
+  disabledRadioHandler(e) {
+    if (e.detail === true && e.target.checked) {
+      this.checkedIndex = -1;
+    }
+  }
+  /**
+   * Reports the validity of the element.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+   */
+  reportValidity() {
+    return this.elementInternals.reportValidity();
+  }
+  /**
+   * Resets the `tabIndex` for all child radios when the radio group loses focus.
+   *
+   * @internal
+   */
+  restrictFocus() {
+    let activeIndex = Math.max(this.checkedIndex, 0);
+    const focusedRadioIndex = this.enabledRadios.indexOf(getRootActiveElement(this));
+    if (focusedRadioIndex !== -1) {
+      activeIndex = focusedRadioIndex;
+    }
+    activeIndex = this.getEnabledIndexInBounds(activeIndex);
+    this.enabledRadios.forEach((item, index) => {
+      item.tabIndex = index === activeIndex ? 0 : -1;
+    });
+  }
+  /**
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+   *
+   * @internal
+   */
+  setFormValue(value, state) {
+    this.elementInternals.setFormValue(value, value ?? state);
+  }
+  /**
+   * Sets the validity of the element.
+   *
+   * @param flags - Validity flags to set.
+   * @param message - Optional message to supply. If not provided, the element's `validationMessage` will be used.
+   * @param anchor - Optional anchor to use for the validation message.
+   *
+   * @internal
+   */
+  setValidity(flags, message, anchor) {
+    if (this.$fastController.isConnected) {
+      if (this.disabled || !this.required) {
+        this.elementInternals.setValidity({});
+        return;
+      }
+      this.elementInternals.setValidity({
+        valueMissing: this.required && !this.value,
+        ...flags
+      }, message ?? this.validationMessage, anchor ?? this.enabledRadios[0]);
+    }
+  }
+  /**
+   * Updates the collection of child radios when the slot changes.
+   *
+   * @param e - the slot change event
+   * @internal
+   */
+  slotchangeHandler(e) {
+    Updates.enqueue(() => {
+      this.radios = [...this.querySelectorAll("*")].filter(x => x instanceof Radio);
+    });
+  }
+}
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
+RadioGroup.formAssociated = true;
+__decorateClass$8([observable], RadioGroup.prototype, "checkedIndex", 2);
+__decorateClass$8([attr({
+  attribute: "disabled",
+  mode: "boolean"
+})], RadioGroup.prototype, "disabled", 2);
+__decorateClass$8([attr({
+  attribute: "value",
+  mode: "fromView"
+})], RadioGroup.prototype, "initialValue", 2);
+__decorateClass$8([attr], RadioGroup.prototype, "name", 2);
+__decorateClass$8([attr], RadioGroup.prototype, "orientation", 2);
+__decorateClass$8([observable], RadioGroup.prototype, "radios", 2);
+__decorateClass$8([attr({
+  mode: "boolean"
+})], RadioGroup.prototype, "required", 2);
+
+const styles$b = css`
+  ${display("flex")}
+
+  :host{-webkit-tap-highlight-color:transparent;cursor:pointer}: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}}`;
+
+function radioGroupTemplate() {
+  return html`<template @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
+}
+const template$b = radioGroupTemplate();
+
+const definition$b = RadioGroup.compose({
+  name: `${FluentDesignSystem.prefix}-radio-group`,
+  template: template$b,
+  styles: styles$b
+});
+
+definition$b.define(FluentDesignSystem.registry);
+
+const styles$a = css`
+  ${display("inline-flex")}
+
+  :host{--size:16px;aspect-ratio:1;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};box-sizing:border-box;position:relative;width:var(--size)}:host([size='large']){--size:20px}.checked-indicator{aspect-ratio:1;border-radius:${borderRadiusCircular};color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute;width:calc(var(--size) * 0.625)}:host(:not([slot='input']))::after{content:'' / '';position:absolute;display:block;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(${checkedState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}) .checked-indicator{background-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover) .checked-indicator{background-color:${colorCompoundBrandBackgroundHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:active) .checked-indicator{background-color:${colorCompoundBrandBackgroundPressed}}:host(:focus-visible){outline:none}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host(${checkedState}${disabledState}) .checked-indicator{background-color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not(${disabledState}):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.checked-indicator{color:HighlightText}:host(${checkedState}) .checked-indicator{background-color:FieldText}:host(${checkedState}:not(${disabledState}):hover) .checked-indicator{background-color:Highlight}:host(${disabledState}){border-color:GrayText;color:GrayText}:host(${disabledState}${checkedState}) .checked-indicator{background-color:GrayText}`));
+
+const checkedIndicator = html.partial( /* html */
+`
+    <span part="checked-indicator" class="checked-indicator" role="presentation"></span>
+`);
+function radioTemplate(options = {}) {
+  return html`<template @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot></template>`;
+}
+const template$a = radioTemplate({
+  checkedIndicator
+});
+
+const definition$a = Radio.compose({
+  name: `${FluentDesignSystem.prefix}-radio`,
+  template: template$a,
+  styles: styles$a
+});
+
+definition$a.define(FluentDesignSystem.registry);
+
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$7(target, key, result);
+  return result;
+};
+class RatingDisplay extends FASTElement {
+  constructor() {
+    super();
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+    this.compact = false;
+    this.intlNumberFormatter = new Intl.NumberFormat();
+    this.elementInternals.role = "img";
+  }
+  /**
+   * Handles changes to the color attribute.
+   *
+   * @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 the size attribute.
+   *
+   * @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);
+  }
+  /**
+   * Returns "count" as string, formatted according to the locale.
+   *
+   * @internal
+   */
+  get formattedCount() {
+    return this.count ? this.intlNumberFormatter.format(this.count) : "";
+  }
+  /**
+   * Generates the icon SVG elements based on the "max" attribute.
+   *
+   * @internal
+   */
+  generateIcons() {
+    let htmlString = "";
+    const selectedValue = Math.round((this.compact ? 1 : this.value ?? 0) * 2) / 2;
+    for (let i = 0; i < (this.compact ? 1 : this.max ?? 5) * 2; i++) {
+      const iconValue = (i + 1) / 2;
+      htmlString += `<svg aria-hidden="true" ${iconValue === selectedValue ? "selected" : ""}><use href="#star"></use></svg>`;
+    }
+    return htmlString;
+  }
+}
+__decorateClass$7([attr], RatingDisplay.prototype, "color", 2);
+__decorateClass$7([attr({
+  mode: "boolean"
+})], RatingDisplay.prototype, "compact", 2);
+__decorateClass$7([attr({
+  converter: nullableNumberConverter
+})], RatingDisplay.prototype, "count", 2);
+__decorateClass$7([attr({
+  converter: nullableNumberConverter
+})], RatingDisplay.prototype, "max", 2);
+__decorateClass$7([attr], RatingDisplay.prototype, "size", 2);
+__decorateClass$7([attr({
+  converter: nullableNumberConverter
+})], RatingDisplay.prototype, "value", 2);
+
+const styles$9 = css`
+  ${display("inline-flex")}
+
+  :host{--icon-size:16px;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}}svg{width:var(--icon-size);height:var(--icon-size);fill:${colorPaletteMarigoldBackground3};margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(even){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host(${neutralState}) svg{fill:${colorNeutralForeground1}}:host(${brandState}) svg{fill:${colorBrandBackground}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:${colorPaletteMarigoldBackground2}}:host(${neutralState}:is([value^='-'],[value='0'])) svg,:host(${neutralState}:not([value])) svg,:host(${neutralState}) svg[selected] ~ svg{fill:${colorNeutralBackground1Pressed}}:host(${brandState}:is([value^='-'],[value='0'])) svg,:host(${brandState}:not([value])) svg,:host(${brandState}) svg[selected] ~ svg{fill:${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([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" viewBox="0 0 12 12"><path d="M5.28347 1.54556C5.57692 0.95096 6.42479 0.950961 6.71825 1.54556L7.82997 3.79817L10.3159 4.15939C10.9721 4.25474 11.2341 5.06112 10.7592 5.52394L8.96043 7.27736L9.38507 9.75321C9.49716 10.4067 8.81122 10.9051 8.22431 10.5966L6.00086 9.42761L3.7774 10.5966C3.19049 10.9051 2.50455 10.4067 2.61664 9.75321L3.04128 7.27736L1.24246 5.52394C0.767651 5.06111 1.02966 4.25474 1.68584 4.15939L4.17174 3.79817L5.28347 1.54556Z" /></symbol></svg>`;
+function ratingDisplayTemplate() {
+  return html` ${star} ${x => html`${html.partial(x.generateIcons())}`}<slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
+}
+const template$9 = ratingDisplayTemplate();
+
+const definition$9 = RatingDisplay.compose({
+  name: `${FluentDesignSystem.prefix}-rating-display`,
+  template: template$9,
+  styles: styles$9
+});
+
+definition$9.define(FluentDesignSystem.registry);
+
+Orientation;
+const SliderMode = {
+  singleValue: "single-value"
+};
+
+const proxySlotName = "form-associated-proxy";
+const ElementInternalsKey = "ElementInternals";
+const supportsElementInternals = ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
+const InternalsMap = /* @__PURE__ */new WeakMap();
+function FormAssociated(BaseCtor) {
+  const C = class extends BaseCtor {
+    constructor(...args) {
+      super(...args);
+      /**
+       * Track whether the value has been changed from the initial value
+       */
+      this.dirtyValue = false;
+      /**
+       * The initial value of the form. This value sets the `value` property
+       * only when the `value` property has not been explicitly set.
+       *
+       * @remarks
+       * HTML Attribute: value
+       */
+      this.initialValue = "";
+      /**
+       * Sets the element's disabled state. A disabled element will not be included during form submission.
+       *
+       * @remarks
+       * HTML Attribute: disabled
+       */
+      this.disabled = false;
+      /**
+       * These are events that are still fired by the proxy
+       * element based on user / programmatic interaction.
+       *
+       * The proxy implementation should be transparent to
+       * the app author, so block these events from emitting.
+       */
+      this.proxyEventsToBlock = ["change", "click"];
+      this.proxyInitialized = false;
+      this.required = false;
+      this.initialValue = this.initialValue || "";
+      if (!this.elementInternals) {
+        this.formResetCallback = this.formResetCallback.bind(this);
+      }
+    }
+    /**
+     * Must evaluate to true to enable elementInternals.
+     * Feature detects API support and resolve respectively
+     *
+     * @internal
+     */
+    static get formAssociated() {
+      return supportsElementInternals;
+    }
+    /**
+     * Returns the validity state of the element
+     *
+     * @beta
+     */
+    get validity() {
+      return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
     }
     /**
      * Retrieve a reference to the associated form.
@@ -8153,715 +8945,73 @@ function FormAssociated(BaseCtor) {
           this.proxy.name = this.name;
         }
         if (typeof this.value === "string") {
-          this.proxy.value = this.value;
-        }
-        this.proxy.setAttribute("slot", proxySlotName);
-        this.proxySlot = document.createElement("slot");
-        this.proxySlot.setAttribute("name", proxySlotName);
-      }
-      this.shadowRoot?.appendChild(this.proxySlot);
-      this.appendChild(this.proxy);
-    }
-    /**
-     * Detach the proxy element from the DOM
-     */
-    detachProxy() {
-      this.removeChild(this.proxy);
-      this.shadowRoot?.removeChild(this.proxySlot);
-    }
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate(anchor) {
-      if (this.proxy instanceof HTMLElement) {
-        this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
-      }
-    }
-    /**
-     * Associates the provided value (and optional state) with the parent form.
-     * @param value - The value to set
-     * @param state - The state object provided to during session restores and when autofilling.
-     */
-    setFormValue(value, state) {
-      if (this.elementInternals) {
-        this.elementInternals.setFormValue(value, state || value);
-      }
-    }
-    _keypressHandler(e) {
-      switch (e.key) {
-        case keyEnter:
-          if (this.form instanceof HTMLFormElement) {
-            const defaultButton = this.form.querySelector("[type=submit]");
-            defaultButton?.click();
-          }
-          break;
-      }
-    }
-    /**
-     * Used to stop propagation of proxy element events
-     * @param e - Event object
-     */
-    stopPropagation(e) {
-      e.stopPropagation();
-    }
-  };
-  attr({
-    mode: "boolean"
-  })(C.prototype, "disabled");
-  attr({
-    mode: "fromView",
-    attribute: "value"
-  })(C.prototype, "initialValue");
-  attr({
-    attribute: "current-value"
-  })(C.prototype, "currentValue");
-  attr(C.prototype, "name");
-  attr({
-    mode: "boolean"
-  })(C.prototype, "required");
-  observable(C.prototype, "value");
-  return C;
-}
-function CheckableFormAssociated(BaseCtor) {
-  class C extends FormAssociated(BaseCtor) {}
-  class D extends C {
-    constructor(...args) {
-      super(args);
-      /**
-       * Tracks whether the "checked" property has been changed.
-       * This is necessary to provide consistent behavior with
-       * normal input checkboxes
-       */
-      this.dirtyChecked = false;
-      /**
-       * Provides the default checkedness of the input element
-       * Passed down to proxy
-       *
-       * @public
-       * @remarks
-       * HTML Attribute: checked
-       */
-      this.checkedAttribute = false;
-      /**
-       * The checked state of the control.
-       *
-       * @public
-       */
-      this.checked = false;
-      this.dirtyChecked = false;
-    }
-    checkedAttributeChanged() {
-      this.defaultChecked = this.checkedAttribute;
-    }
-    /**
-     * @internal
-     */
-    defaultCheckedChanged() {
-      if (!this.dirtyChecked) {
-        this.checked = this.defaultChecked;
-        this.dirtyChecked = false;
-      }
-    }
-    checkedChanged(prev, next) {
-      if (!this.dirtyChecked) {
-        this.dirtyChecked = true;
-      }
-      this.currentChecked = this.checked;
-      this.updateForm();
-      if (this.proxy instanceof HTMLInputElement) {
-        this.proxy.checked = this.checked;
-      }
-      if (prev !== void 0) {
-        this.$emit("change");
-      }
-      this.validate();
-    }
-    currentCheckedChanged(prev, next) {
-      this.checked = this.currentChecked;
-    }
-    updateForm() {
-      const value = this.checked ? this.value : null;
-      this.setFormValue(value, value);
-    }
-    connectedCallback() {
-      super.connectedCallback();
-      this.updateForm();
-    }
-    formResetCallback() {
-      super.formResetCallback();
-      this.checked = !!this.checkedAttribute;
-      this.dirtyChecked = false;
-    }
-  }
-  attr({
-    attribute: "checked",
-    mode: "boolean"
-  })(D.prototype, "checkedAttribute");
-  attr({
-    attribute: "current-checked",
-    converter: booleanConverter
-  })(D.prototype, "currentChecked");
-  observable(D.prototype, "defaultChecked");
-  observable(D.prototype, "checked");
-  return D;
-}
-
-class _Radio extends FASTElement {}
-class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
-  return result;
-};
-class Radio extends FormAssociatedRadio {
-  constructor() {
-    super();
-    /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="radio"]
-     *
-     * @internal
-     */
-    this.initialValue = "on";
-    this.proxy.setAttribute("type", "radio");
-  }
-  get radioGroup() {
-    return this.closest("[role=radiogroup]");
-  }
-  /**
-   * @internal
-   */
-  defaultCheckedChanged() {
-    if (this.$fastController.isConnected && !this.dirtyChecked) {
-      if (!this.isInsideRadioGroup()) {
-        this.checked = this.defaultChecked ?? false;
-        this.dirtyChecked = false;
-      }
-    }
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.validate();
-    if (this.parentElement?.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
-      if (!this.disabled) {
-        this.setAttribute("tabindex", "0");
-      }
-    }
-    if (this.checkedAttribute) {
-      if (!this.dirtyChecked) {
-        if (!this.isInsideRadioGroup()) {
-          this.checked = this.defaultChecked ?? false;
-          this.dirtyChecked = false;
-        }
-      }
-    }
-  }
-  isInsideRadioGroup() {
-    return this.radioGroup !== null;
-  }
-  /**
-   * Handles key presses on the radio.
-   * @beta
-   */
-  keypressHandler(e) {
-    switch (e.key) {
-      case keySpace:
-        if (!this.checked && !this.radioGroup?.readOnly) {
-          this.checked = true;
-        }
-        return;
-    }
-    return true;
-  }
-}
-__decorateClass$9([observable], Radio.prototype, "name", 2);
-__decorateClass$9([observable], Radio.prototype, "defaultSlottedNodes", 2);
-
-const RadioGroupOrientation = Orientation;
-
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
-  return result;
-};
-class RadioGroup extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.stacked = false;
-    this.orientation = RadioGroupOrientation.horizontal;
-    this.radioChangeHandler = e => {
-      const changedRadio = e.target;
-      if (changedRadio.checked) {
-        this.slottedRadioButtons.forEach(radio => {
-          if (radio instanceof Radio && radio !== changedRadio) {
-            radio.checked = false;
-            if (!this.isInsideFoundationToolbar) {
-              radio.setAttribute("tabindex", "-1");
-            }
-          }
-        });
-        this.selectedRadio = changedRadio;
-        this.value = changedRadio.value;
-        changedRadio.setAttribute("tabindex", "0");
-        this.focusedRadio = changedRadio;
-      }
-      e.stopPropagation();
-    };
-    this.moveToRadioByIndex = (group, index) => {
-      const radio = group[index];
-      if (!this.isInsideToolbar) {
-        radio.setAttribute("tabindex", "0");
-        radio.checked = true;
-        this.selectedRadio = radio;
-      }
-      this.focusedRadio = radio;
-      radio.focus();
-    };
-    this.moveRightOffGroup = () => {
-      this.nextElementSibling?.focus();
-    };
-    this.moveLeftOffGroup = () => {
-      this.previousElementSibling?.focus();
-    };
-    /**
-     * @internal
-     */
-    this.focusOutHandler = e => {
-      const group = this.slottedRadioButtons;
-      const radio = e.target;
-      const index = radio !== null ? group.indexOf(radio) : 0;
-      const focusedIndex = this.focusedRadio ? group.indexOf(this.focusedRadio) : -1;
-      if (focusedIndex === 0 && index === focusedIndex || focusedIndex === group.length - 1 && focusedIndex === index) {
-        if (!this.selectedRadio) {
-          this.focusedRadio = group[0];
-          this.focusedRadio.setAttribute("tabindex", "0");
-          group.forEach(nextRadio => {
-            if (radio instanceof Radio && nextRadio !== this.focusedRadio) {
-              nextRadio.setAttribute("tabindex", "-1");
-            }
-          });
-        } else {
-          this.focusedRadio = this.selectedRadio;
-          if (!this.isInsideFoundationToolbar) {
-            this.selectedRadio.setAttribute("tabindex", "0");
-            group.forEach(nextRadio => {
-              if (nextRadio !== this.selectedRadio) {
-                nextRadio.setAttribute("tabindex", "-1");
-              }
-            });
-          }
-        }
-      }
-      return true;
-    };
-    /**
-     * @internal
-     */
-    this.handleDisabledClick = e => {
-      if (this.disabled) {
-        e.preventDefault();
-        return;
-      }
-      return true;
-    };
-    /**
-     * @internal
-     */
-    this.clickHandler = e => {
-      if (this.disabled) {
-        return;
-      }
-      e.preventDefault();
-      const radio = e.target;
-      if (radio && radio instanceof Radio) {
-        radio.checked = true;
-        radio.setAttribute("tabindex", "0");
-        this.selectedRadio = radio;
-        this.focusedRadio = radio;
-      }
-    };
-    this.shouldMoveOffGroupToTheRight = (index, group, key) => {
-      return index === group.length && this.isInsideToolbar && key === keyArrowRight;
-    };
-    this.shouldMoveOffGroupToTheLeft = (group, key) => {
-      const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
-      return index < 0 && this.isInsideToolbar && key === keyArrowLeft;
-    };
-    this.checkFocusedRadio = () => {
-      if (this.focusedRadio !== null && !this.focusedRadio.checked) {
-        this.focusedRadio.checked = true;
-        this.focusedRadio.setAttribute("tabindex", "0");
-        this.focusedRadio.focus();
-        this.selectedRadio = this.focusedRadio;
-      }
-    };
-    this.moveRight = e => {
-      const group = this.slottedRadioButtons;
-      let index = 0;
-      index = this.focusedRadio ? group.indexOf(this.focusedRadio) + 1 : 1;
-      if (this.shouldMoveOffGroupToTheRight(index, group, e.key)) {
-        this.moveRightOffGroup();
-        return;
-      } else if (index === group.length) {
-        index = 0;
-      }
-      while (index < group.length && group.length > 1) {
-        if (!group[index].disabled) {
-          this.moveToRadioByIndex(group, index);
-          break;
-        } else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
-          break;
-        } else if (index + 1 >= group.length) {
-          if (this.isInsideToolbar) {
-            break;
-          } else {
-            index = 0;
-          }
-        } else {
-          index += 1;
-        }
-      }
-    };
-    this.moveLeft = e => {
-      const group = this.slottedRadioButtons;
-      let index = 0;
-      index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
-      index = index < 0 ? group.length - 1 : index;
-      if (this.shouldMoveOffGroupToTheLeft(group, e.key)) {
-        this.moveLeftOffGroup();
-        return;
-      }
-      while (index >= 0 && group.length > 1) {
-        if (!group[index].disabled) {
-          this.moveToRadioByIndex(group, index);
-          break;
-        } else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
-          break;
-        } else if (index - 1 < 0) {
-          index = group.length - 1;
-        } else {
-          index -= 1;
+          this.proxy.value = this.value;
         }
+        this.proxy.setAttribute("slot", proxySlotName);
+        this.proxySlot = document.createElement("slot");
+        this.proxySlot.setAttribute("name", proxySlotName);
       }
-    };
+      this.shadowRoot?.appendChild(this.proxySlot);
+      this.appendChild(this.proxy);
+    }
     /**
-     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
-     * navigation is different when there is an ancestor with role='toolbar'
-     *
-     * @internal
+     * Detach the proxy element from the DOM
      */
-    this.keydownHandler = e => {
-      const key = e.key;
-      if (key in ArrowKeys && (this.isInsideFoundationToolbar || this.disabled)) {
-        return true;
-      }
-      switch (key) {
-        case keyEnter:
-          {
-            this.checkFocusedRadio();
-            break;
-          }
-        case keyArrowRight:
-        case keyArrowDown:
-          {
-            if (this.direction === Direction.ltr) {
-              this.moveRight(e);
-            } else {
-              this.moveLeft(e);
-            }
-            break;
-          }
-        case keyArrowLeft:
-        case keyArrowUp:
-          {
-            if (this.direction === Direction.ltr) {
-              this.moveLeft(e);
-            } else {
-              this.moveRight(e);
-            }
-            break;
-          }
-        default:
-          {
-            return true;
-          }
-      }
-    };
-  }
-  nameChanged() {
-    if (this.slottedRadioButtons) {
-      this.slottedRadioButtons.forEach(radio => {
-        radio.setAttribute("name", this.name);
-      });
-    }
-  }
-  valueChanged() {
-    if (this.slottedRadioButtons) {
-      this.slottedRadioButtons.forEach(radio => {
-        if (radio instanceof Radio) {
-          if (radio.value === this.value) {
-            radio.checked = true;
-            this.selectedRadio = radio;
-          }
-        }
-      });
+    detachProxy() {
+      this.removeChild(this.proxy);
+      this.shadowRoot?.removeChild(this.proxySlot);
     }
-    this.$emit("change");
-  }
-  slottedRadioButtonsChanged(oldValue, newValue) {
-    if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
-      this.setupRadioButtons();
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(anchor) {
+      if (this.proxy instanceof HTMLElement) {
+        this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
+      }
     }
-  }
-  get parentToolbar() {
-    return this.closest('[role="toolbar"]');
-  }
-  get isInsideToolbar() {
-    return this.parentToolbar ?? false;
-  }
-  get isInsideFoundationToolbar() {
-    return !!this.parentToolbar?.hasOwnProperty("$fastController");
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.direction = getDirection(this);
-    this.setupRadioButtons();
-  }
-  disconnectedCallback() {
-    this.slottedRadioButtons.forEach(radio => {
-      if (radio instanceof Radio) {
-        radio.removeEventListener("change", this.radioChangeHandler);
+    /**
+     * Associates the provided value (and optional state) with the parent form.
+     * @param value - The value to set
+     * @param state - The state object provided to during session restores and when autofilling.
+     */
+    setFormValue(value, state) {
+      if (this.elementInternals) {
+        this.elementInternals.setFormValue(value, state || value);
       }
-    });
-  }
-  setupRadioButtons() {
-    const checkedRadios = this.slottedRadioButtons.filter(radio => {
-      return radio.hasAttribute("checked");
-    });
-    const numberOfCheckedRadios = checkedRadios ? checkedRadios.length : 0;
-    if (numberOfCheckedRadios > 1) {
-      const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
-      lastCheckedRadio.checked = true;
-    }
-    let foundMatchingVal = false;
-    this.slottedRadioButtons.forEach(radio => {
-      if (radio instanceof Radio) {
-        if (this.name !== void 0) {
-          radio.setAttribute("name", this.name);
-        }
-        if (this.value && this.value === radio.value) {
-          this.selectedRadio = radio;
-          this.focusedRadio = radio;
-          radio.checked = true;
-          radio.setAttribute("tabindex", "0");
-          foundMatchingVal = true;
-        } else {
-          if (!this.isInsideFoundationToolbar) {
-            radio.setAttribute("tabindex", "-1");
+    }
+    _keypressHandler(e) {
+      switch (e.key) {
+        case keyEnter:
+          if (this.form instanceof HTMLFormElement) {
+            const defaultButton = this.form.querySelector("[type=submit]");
+            defaultButton?.click();
           }
-          radio.checked = false;
-        }
-        radio.addEventListener("change", this.radioChangeHandler);
-      }
-    });
-    if (this.value === void 0 && this.slottedRadioButtons.length > 0) {
-      const checkedRadios2 = this.slottedRadioButtons.filter(radio => {
-        return radio.hasAttribute("checked");
-      });
-      const numberOfCheckedRadios2 = checkedRadios2 !== null ? checkedRadios2.length : 0;
-      if (numberOfCheckedRadios2 > 0 && !foundMatchingVal) {
-        const lastCheckedRadio = checkedRadios2[numberOfCheckedRadios2 - 1];
-        lastCheckedRadio.checked = true;
-        this.focusedRadio = lastCheckedRadio;
-        lastCheckedRadio.setAttribute("tabindex", "0");
-      } else {
-        this.slottedRadioButtons[0].setAttribute("tabindex", "0");
-        this.focusedRadio = this.slottedRadioButtons[0];
+          break;
       }
     }
-  }
-}
-__decorateClass$8([attr({
-  mode: "boolean"
-})], RadioGroup.prototype, "stacked", 2);
-__decorateClass$8([attr({
-  attribute: "readonly",
-  mode: "boolean"
-})], RadioGroup.prototype, "readOnly", 2);
-__decorateClass$8([attr({
-  attribute: "disabled",
-  mode: "boolean"
-})], RadioGroup.prototype, "disabled", 2);
-__decorateClass$8([attr], RadioGroup.prototype, "name", 2);
-__decorateClass$8([attr], RadioGroup.prototype, "value", 2);
-__decorateClass$8([attr], RadioGroup.prototype, "orientation", 2);
-__decorateClass$8([observable], RadioGroup.prototype, "childItems", 2);
-__decorateClass$8([observable], RadioGroup.prototype, "slottedRadioButtons", 2);
-
-const styles$b = css`
-  ${display("flex")}
-
-  :host{align-items:flex-start;flex-direction:column;row-gap:${spacingVerticalS}}:host([disabled]) ::slotted([role='radio']){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}::slotted([slot='label']){color:${colorNeutralForeground1};padding:${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};cursor:default}.positioning-region{display:flex;flex-wrap:wrap}:host([orientation='vertical']) .positioning-region{flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']) .positioning-region{flex-direction:row}:host([orientation='horizontal']) ::slotted([role='radio']){padding-inline-end:${spacingHorizontalS}}:host([orientation='horizontal'][stacked]) ::slotted([role='radio']){display:flex;flex-direction:column;padding-inline:${spacingHorizontalS};height:auto;align-items:center;justify-content:center}:host([disabled]) ::slotted([role='radio']){pointer-events:none}`;
-
-function radioGroupTemplate() {
-  return html`<template role="radiogroup" tabindex="${x => x.disabled ? -1 : void 0}" aria-disabled="${x => x.disabled}" aria-readonly="${x => x.readOnly}" aria-orientation="${x => x.orientation}" @click="${(x, c) => x.clickHandler(c.event)}" @mousedown="${(x, c) => x.handleDisabledClick(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @focusout="${(x, c) => x.focusOutHandler(c.event)}"><slot name="label"></slot><div class="positioning-region ${x => x.orientation === RadioGroupOrientation.horizontal ? "horizontal" : "vertical"}" part="positioning-region"><slot ${slotted({
-    property: "slottedRadioButtons",
-    filter: elements("[role=radio]")
-  })}></slot></div></template>`;
-}
-const template$b = radioGroupTemplate();
-
-const definition$b = RadioGroup.compose({
-  name: `${FluentDesignSystem.prefix}-radio-group`,
-  template: template$b,
-  styles: styles$b
-});
-
-definition$b.define(FluentDesignSystem.registry);
-
-const styles$a = css`
-  ${display("inline-grid")}
-
-  :host{grid-auto-flow:column;grid-template-columns:max-content;gap:${spacingHorizontalXS};align-items:center;height:32px;cursor:pointer;outline:none;position:relative;user-select:none;color:blue;color:var(--state-color,${colorNeutralForeground3});padding-inline-end:${spacingHorizontalS};--control-border-color:${colorNeutralStrokeAccessible};--checked-indicator-background-color:${colorCompoundBrandForeground1};--state-color:${colorNeutralForeground3}}:host([disabled]){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}.label{cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label__hidden{display:none}.control{box-sizing:border-box;align-items:center;border:1px solid var(--control-border-color,${colorNeutralStrokeAccessible});border-radius:${borderRadiusCircular};display:flex;height:16px;justify-content:center;margin:${spacingVerticalS} ${spacingHorizontalS};position:relative;width:16px;justify-self:center}.checked-indicator{border-radius:${borderRadiusCircular};height:10px;opacity:0;width:10px}:host([aria-checked='false']:hover) .control{color:${colorNeutralForeground2}}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host(:hover) .control{border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .control{border-color:${colorNeutralStrokeAccessiblePressed}}:host([aria-checked='true']) .checked-indicator{opacity:1}:host([aria-checked='true']) .control{border-color:var(--control-border-color,${colorNeutralStrokeAccessible})}:host([aria-checked='true']) .checked-indicator{background-color:var(--checked-indicator-background-color,${colorCompoundBrandForeground1})}:host([aria-checked='true']:hover) .control{border-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:hover) .checked-indicator{background-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:active) .control{border-color:${colorCompoundBrandStrokePressed}}:host([aria-checked='true']:active) .checked-indicator{background:${colorCompoundBrandForeground1Pressed}}:host([disabled]){color:${colorNeutralForegroundDisabled};pointer-events:none}:host([disabled]) .control{pointer-events:none;border-color:${colorNeutralForegroundDisabled}}:host([disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host .control{border-color:InactiveBorder}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='true']:active) .checked-indicator,:host([aria-checked='true']:hover) .checked-indicator{background-color:Highlight;border-color:ActiveBorder}`));
-
-function radioTemplate(options = {}) {
-  return html`<template role="radio" aria-checked="${x => x.checked}" aria-required="${x => x.required}" aria-disabled="${x => x.disabled}" @keypress="${(x, c) => x.keypressHandler(c.event)}"><div part="control" class="control"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot></div><label part="label" class="${x => ["label", !x.defaultSlottedNodes?.length && "label__hidden"].filter(Boolean).join(" ")}"><slot ${slotted({
-    property: "defaultSlottedNodes",
-    filter: whitespaceFilter
-  })}></slot></label></template>`;
-}
-const template$a = radioTemplate({
-  checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`
-});
-
-const definition$a = Radio.compose({
-  name: `${FluentDesignSystem.prefix}-radio`,
-  template: template$a,
-  styles: styles$a
-});
-
-definition$a.define(FluentDesignSystem.registry);
-
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
-  return result;
-};
-class RatingDisplay extends FASTElement {
-  constructor() {
-    super();
     /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
+     * Used to stop propagation of proxy element events
+     * @param e - Event object
      */
-    this.elementInternals = this.attachInternals();
-    this.compact = false;
-    this.intlNumberFormatter = new Intl.NumberFormat();
-    this.elementInternals.role = "img";
-  }
-  /**
-   * Handles changes to the color attribute.
-   *
-   * @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 the size attribute.
-   *
-   * @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);
-  }
-  /**
-   * Returns "count" as string, formatted according to the locale.
-   *
-   * @internal
-   */
-  get formattedCount() {
-    return this.count ? this.intlNumberFormatter.format(this.count) : "";
-  }
-  /**
-   * Generates the icon SVG elements based on the "max" attribute.
-   *
-   * @internal
-   */
-  generateIcons() {
-    let htmlString = "";
-    const selectedValue = Math.round((this.compact ? 1 : this.value ?? 0) * 2) / 2;
-    for (let i = 0; i < (this.compact ? 1 : this.max ?? 5) * 2; i++) {
-      const iconValue = (i + 1) / 2;
-      htmlString += `<svg aria-hidden="true" ${iconValue === selectedValue ? "selected" : ""}><use href="#star"></use></svg>`;
+    stopPropagation(e) {
+      e.stopPropagation();
     }
-    return htmlString;
-  }
-}
-__decorateClass$7([attr], RatingDisplay.prototype, "color", 2);
-__decorateClass$7([attr({
-  mode: "boolean"
-})], RatingDisplay.prototype, "compact", 2);
-__decorateClass$7([attr({
-  converter: nullableNumberConverter
-})], RatingDisplay.prototype, "count", 2);
-__decorateClass$7([attr({
-  converter: nullableNumberConverter
-})], RatingDisplay.prototype, "max", 2);
-__decorateClass$7([attr], RatingDisplay.prototype, "size", 2);
-__decorateClass$7([attr({
-  converter: nullableNumberConverter
-})], RatingDisplay.prototype, "value", 2);
-
-const styles$9 = css`
-  ${display("inline-flex")}
-
-  :host{--icon-size:16px;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}}svg{width:var(--icon-size);height:var(--icon-size);fill:${colorPaletteMarigoldBackground3};margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(even){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host(${neutralState}) svg{fill:${colorNeutralForeground1}}:host(${brandState}) svg{fill:${colorBrandBackground}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:${colorPaletteMarigoldBackground2}}:host(${neutralState}:is([value^='-'],[value='0'])) svg,:host(${neutralState}:not([value])) svg,:host(${neutralState}) svg[selected] ~ svg{fill:${colorNeutralBackground1Pressed}}:host(${brandState}:is([value^='-'],[value='0'])) svg,:host(${brandState}:not([value])) svg,:host(${brandState}) svg[selected] ~ svg{fill:${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([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" viewBox="0 0 12 12"><path d="M5.28347 1.54556C5.57692 0.95096 6.42479 0.950961 6.71825 1.54556L7.82997 3.79817L10.3159 4.15939C10.9721 4.25474 11.2341 5.06112 10.7592 5.52394L8.96043 7.27736L9.38507 9.75321C9.49716 10.4067 8.81122 10.9051 8.22431 10.5966L6.00086 9.42761L3.7774 10.5966C3.19049 10.9051 2.50455 10.4067 2.61664 9.75321L3.04128 7.27736L1.24246 5.52394C0.767651 5.06111 1.02966 4.25474 1.68584 4.15939L4.17174 3.79817L5.28347 1.54556Z" /></symbol></svg>`;
-function ratingDisplayTemplate() {
-  return html` ${star} ${x => html`${html.partial(x.generateIcons())}`}<slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
+  };
+  attr({
+    mode: "boolean"
+  })(C.prototype, "disabled");
+  attr({
+    mode: "fromView",
+    attribute: "value"
+  })(C.prototype, "initialValue");
+  attr({
+    attribute: "current-value"
+  })(C.prototype, "currentValue");
+  attr(C.prototype, "name");
+  attr({
+    mode: "boolean"
+  })(C.prototype, "required");
+  observable(C.prototype, "value");
+  return C;
 }
-const template$9 = ratingDisplayTemplate();
-
-const definition$9 = RatingDisplay.compose({
-  name: `${FluentDesignSystem.prefix}-rating-display`,
-  template: template$9,
-  styles: styles$9
-});
-
-definition$9.define(FluentDesignSystem.registry);
-
-Orientation;
-const SliderMode = {
-  singleValue: "single-value"
-};
 
 class _Slider extends FASTElement {}
 class FormAssociatedSlider extends FormAssociated(_Slider) {
@@ -9324,7 +9474,12 @@ const definition$7 = Spinner.compose({
 
 definition$7.define(FluentDesignSystem.registry);
 
-class Switch extends BaseCheckbox {}
+class Switch extends BaseCheckbox {
+  constructor() {
+    super();
+    this.elementInternals.role = "switch";
+  }
+}
 
 function switchTemplate(options = {}) {
   return html`<template tabindex="${x => !x.disabled ? 0 : void 0}" @click="${(x, c) => x.clickHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @keyup="${(x, c) => x.keyupHandler(c.event)}"><slot name="switch">${staticallyCompose(options.switch)}</slot></template>`;
@@ -9333,7 +9488,6 @@ const template$6 = switchTemplate({
   switch: `<span class="checked-indicator" part="checked-indicator"></span>`
 });
 
-const checkedState = css.partial`:is([state--checked], :state(checked))`;
 const styles$6 = css`
   ${display("inline-flex")}