@fluentui/web-components 3.0.0-beta.25 → 3.0.0-beta.27

package/dist/web-components.js

@@ -3386,70 +3386,70 @@ function uniqueId(prefix = "") {
   return `${prefix}${uniqueIdCounter++}`;
 }
 
-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 ARIAGlobalStatesAndProperties {}
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-atomic"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-busy"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-controls"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-current"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-describedby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-details"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-disabled"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-errormessage"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-flowto"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-haspopup"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-hidden"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-invalid"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-keyshortcuts"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-label"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-labelledby"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-live"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-owns"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-relevant"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$t([attr({
+__decorateClass$s([attr({
   attribute: "aria-roledescription"
 })], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
 
@@ -3618,12 +3618,12 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-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 AccordionItem extends FASTElement {
@@ -3645,23 +3645,23 @@ class AccordionItem extends FASTElement {
     };
   }
 }
-__decorateClass$s([attr({
+__decorateClass$r([attr({
   attribute: "heading-level",
   mode: "fromView",
   converter: nullableNumberConverter
 })], AccordionItem.prototype, "headinglevel", 2);
-__decorateClass$s([attr({
+__decorateClass$r([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "expanded", 2);
-__decorateClass$s([attr({
+__decorateClass$r([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "disabled", 2);
-__decorateClass$s([attr], AccordionItem.prototype, "id", 2);
-__decorateClass$s([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$s([attr({
+__decorateClass$r([attr], AccordionItem.prototype, "id", 2);
+__decorateClass$r([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$r([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
-__decorateClass$s([attr({
+__decorateClass$r([attr({
   attribute: "expand-icon-position"
 })], AccordionItem.prototype, "expandIconPosition", 2);
 applyMixins(AccordionItem, StartEnd);
@@ -3949,12 +3949,12 @@ const AccordionExpandMode = {
   multi: "multi"
 };
 
-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;
 };
 class Accordion extends FASTElement {
@@ -4132,10 +4132,10 @@ class Accordion extends FASTElement {
     }
   }
 }
-__decorateClass$r([attr({
+__decorateClass$q([attr({
   attribute: "expand-mode"
 })], Accordion.prototype, "expandmode", 2);
-__decorateClass$r([observable], Accordion.prototype, "slottedAccordionItems", 2);
+__decorateClass$q([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
 const styles$s = css`
   ${display("flex")}
@@ -4158,12 +4158,12 @@ const definition$t = Accordion.compose({
 
 definition$t.define(FluentDesignSystem.registry);
 
-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 AnchorButton extends FASTElement {
@@ -4210,31 +4210,31 @@ class AnchorButton extends FASTElement {
     this.removeEventListener("click", this.handleDisabledFocusableClick);
   }
 }
-__decorateClass$q([attr], AnchorButton.prototype, "download", 2);
-__decorateClass$q([attr], AnchorButton.prototype, "href", 2);
-__decorateClass$q([attr], AnchorButton.prototype, "hreflang", 2);
-__decorateClass$q([attr], AnchorButton.prototype, "ping", 2);
-__decorateClass$q([attr], AnchorButton.prototype, "referrerpolicy", 2);
-__decorateClass$q([attr], AnchorButton.prototype, "rel", 2);
-__decorateClass$q([attr], AnchorButton.prototype, "target", 2);
-__decorateClass$q([attr], AnchorButton.prototype, "type", 2);
-__decorateClass$q([observable], AnchorButton.prototype, "defaultSlottedContent", 2);
-__decorateClass$q([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$q([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$q([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$q([attr({
+__decorateClass$p([attr], AnchorButton.prototype, "download", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "href", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "hreflang", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "ping", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "referrerpolicy", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "rel", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "target", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "type", 2);
+__decorateClass$p([observable], AnchorButton.prototype, "defaultSlottedContent", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$p([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$p([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
-__decorateClass$q([attr({
+__decorateClass$p([attr({
   mode: "boolean"
 })], AnchorButton.prototype, "disabled", 2);
-__decorateClass$q([attr({
+__decorateClass$p([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], AnchorButton.prototype, "disabledFocusable", 2);
 class DelegatesARIALink {}
-__decorateClass$q([attr({
+__decorateClass$p([attr({
   attribute: "aria-expanded"
 })], DelegatesARIALink.prototype, "ariaExpanded", 2);
 applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
@@ -4344,12 +4344,12 @@ const AvatarColor = {
   ...AvatarNamedColor
 };
 
-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;
 };
 const _Avatar = class _Avatar extends FASTElement {
@@ -4385,16 +4385,16 @@ const _Avatar = class _Avatar extends FASTElement {
  * An array of the available Avatar named colors
  */
 _Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$p([attr], _Avatar.prototype, "name", 2);
-__decorateClass$p([attr], _Avatar.prototype, "initials", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr], _Avatar.prototype, "name", 2);
+__decorateClass$o([attr], _Avatar.prototype, "initials", 2);
+__decorateClass$o([attr({
   converter: nullableNumberConverter
 })], _Avatar.prototype, "size", 2);
-__decorateClass$p([attr], _Avatar.prototype, "shape", 2);
-__decorateClass$p([attr], _Avatar.prototype, "active", 2);
-__decorateClass$p([attr], _Avatar.prototype, "appearance", 2);
-__decorateClass$p([attr], _Avatar.prototype, "color", 2);
-__decorateClass$p([attr({
+__decorateClass$o([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$o([attr], _Avatar.prototype, "active", 2);
+__decorateClass$o([attr], _Avatar.prototype, "appearance", 2);
+__decorateClass$o([attr], _Avatar.prototype, "color", 2);
+__decorateClass$o([attr({
   attribute: "color-id"
 })], _Avatar.prototype, "colorId", 2);
 let Avatar = _Avatar;
@@ -4453,12 +4453,12 @@ const BadgeColor = {
   warning: "warning"
 };
 
-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 Badge extends FASTElement {
@@ -4468,10 +4468,10 @@ class Badge extends FASTElement {
     this.color = BadgeColor.brand;
   }
 }
-__decorateClass$o([attr], Badge.prototype, "appearance", 2);
-__decorateClass$o([attr], Badge.prototype, "color", 2);
-__decorateClass$o([attr], Badge.prototype, "shape", 2);
-__decorateClass$o([attr], Badge.prototype, "size", 2);
+__decorateClass$n([attr], Badge.prototype, "appearance", 2);
+__decorateClass$n([attr], Badge.prototype, "color", 2);
+__decorateClass$n([attr], Badge.prototype, "shape", 2);
+__decorateClass$n([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
 const textPadding = spacingHorizontalXXS;
@@ -4855,12 +4855,12 @@ const ButtonType = {
   button: "button"
 };
 
-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 Button extends FASTElement {
@@ -5064,46 +5064,46 @@ class Button extends FASTElement {
  * @public
  */
 Button.formAssociated = true;
-__decorateClass$n([attr], Button.prototype, "appearance", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr], Button.prototype, "appearance", 2);
+__decorateClass$m([attr({
   mode: "boolean"
 })], Button.prototype, "autofocus", 2);
-__decorateClass$n([observable], Button.prototype, "defaultSlottedContent", 2);
-__decorateClass$n([attr({
+__decorateClass$m([observable], Button.prototype, "defaultSlottedContent", 2);
+__decorateClass$m([attr({
   mode: "boolean"
 })], Button.prototype, "disabled", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], Button.prototype, "disabledFocusable", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   attribute: "formaction"
 })], Button.prototype, "formAction", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   attribute: "form"
 })], Button.prototype, "formAttribute", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   attribute: "formenctype"
 })], Button.prototype, "formEnctype", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   attribute: "formmethod"
 })], Button.prototype, "formMethod", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   attribute: "formnovalidate",
   mode: "boolean"
 })], Button.prototype, "formNoValidate", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   attribute: "formtarget"
 })], Button.prototype, "formTarget", 2);
-__decorateClass$n([attr({
+__decorateClass$m([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
-__decorateClass$n([attr], Button.prototype, "name", 2);
-__decorateClass$n([attr], Button.prototype, "shape", 2);
-__decorateClass$n([attr], Button.prototype, "size", 2);
-__decorateClass$n([attr], Button.prototype, "type", 2);
-__decorateClass$n([attr], Button.prototype, "value", 2);
+__decorateClass$m([attr], Button.prototype, "name", 2);
+__decorateClass$m([attr], Button.prototype, "shape", 2);
+__decorateClass$m([attr], Button.prototype, "size", 2);
+__decorateClass$m([attr], Button.prototype, "type", 2);
+__decorateClass$m([attr], Button.prototype, "value", 2);
 applyMixins(Button, StartEnd);
 
 const styles$o = css`
@@ -5139,15 +5139,15 @@ function toggleState(elementInternals, state, force) {
   elementInternals.states.delete(state);
 }
 
-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 Checkbox extends FASTElement {
+class BaseCheckbox extends FASTElement {
   constructor() {
     super();
     this.disabled = false;
@@ -5470,39 +5470,40 @@ class Checkbox extends FASTElement {
  *
  * @public
  */
-Checkbox.formAssociated = true;
-__decorateClass$m([attr({
+BaseCheckbox.formAssociated = true;
+__decorateClass$l([attr({
   mode: "boolean"
-})], Checkbox.prototype, "autofocus", 2);
-__decorateClass$m([attr({
+})], BaseCheckbox.prototype, "autofocus", 2);
+__decorateClass$l([attr({
   mode: "boolean"
-})], Checkbox.prototype, "disabled", 2);
-__decorateClass$m([attr({
+})], BaseCheckbox.prototype, "disabled", 2);
+__decorateClass$l([attr({
   attribute: "form"
-})], Checkbox.prototype, "formAttribute", 2);
-__decorateClass$m([observable], Checkbox.prototype, "indeterminate", 2);
-__decorateClass$m([attr({
+})], BaseCheckbox.prototype, "formAttribute", 2);
+__decorateClass$l([observable], BaseCheckbox.prototype, "indeterminate", 2);
+__decorateClass$l([attr({
   attribute: "checked",
   mode: "boolean"
-})], Checkbox.prototype, "initialChecked", 2);
-__decorateClass$m([attr({
+})], BaseCheckbox.prototype, "initialChecked", 2);
+__decorateClass$l([attr({
   attribute: "value",
   mode: "fromView"
-})], Checkbox.prototype, "initialValue", 2);
-__decorateClass$m([attr], Checkbox.prototype, "name", 2);
-__decorateClass$m([attr({
+})], BaseCheckbox.prototype, "initialValue", 2);
+__decorateClass$l([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$l([attr({
   mode: "boolean"
-})], Checkbox.prototype, "required", 2);
-__decorateClass$m([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$m([attr], Checkbox.prototype, "size", 2);
+})], BaseCheckbox.prototype, "required", 2);
+class Checkbox extends BaseCheckbox {}
+__decorateClass$l([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$l([attr], Checkbox.prototype, "size", 2);
 
-const checkedState = css.partial`:is([state--checked], :state(checked))`;
+const checkedState$1 = css.partial`:is([state--checked], :state(checked))`;
 const indeterminateState = css.partial`:is([state--indeterminate], :state(indeterminate))`;
 const styles$n = css`
   ${display("inline-flex")}
 
-  :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not([disabled]):hover),:host(${checkedState}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState}:not([disabled]):hover),:host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator{background-color:Highlight}:host([disabled]){border-color:GrayText}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:GrayText}:host([disabled]),:host([disabled]${checkedState}) .checked-indicator{color:GrayText}`));
+  :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState$1}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState$1}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState$1})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState$1}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState$1}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState$1}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState$1}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not([disabled]):hover),:host(${checkedState$1}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState$1}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState$1}:not([disabled]):hover),:host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator{background-color:Highlight}:host([disabled]){border-color:GrayText}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:GrayText}:host([disabled]),:host([disabled]${checkedState$1}) .checked-indicator{color:GrayText}`));
 
 const checkedIndicator = html.partial( /* html */
 `
@@ -5560,12 +5561,12 @@ const definition$n = CompoundButton.compose({
 
 definition$n.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 CounterBadge extends FASTElement {
@@ -5596,22 +5597,22 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$l([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$l([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$l([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$l([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$l([attr({
+__decorateClass$k([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$k([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$k([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$k([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$k([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$l([attr({
+__decorateClass$k([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$l([attr({
+__decorateClass$k([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$l([attr({
+__decorateClass$k([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
@@ -5645,12 +5646,12 @@ const DialogType = {
   alert: "alert"
 };
 
-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 Dialog extends FASTElement {
@@ -5718,14 +5719,14 @@ class Dialog extends FASTElement {
     return true;
   }
 }
-__decorateClass$k([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$k([attr({
+__decorateClass$j([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$j([attr({
   attribute: "aria-describedby"
 })], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$k([attr({
+__decorateClass$j([attr({
   attribute: "aria-labelledby"
 })], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$k([attr], Dialog.prototype, "type", 2);
+__decorateClass$j([attr], Dialog.prototype, "type", 2);
 
 const template$l = 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>`;
 
@@ -5741,12 +5742,12 @@ const definition$l = Dialog.compose({
 
 definition$l.define(FluentDesignSystem.registry);
 
-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 DialogBody extends FASTElement {
@@ -5755,7 +5756,7 @@ class DialogBody extends FASTElement {
     this.noTitleAction = false;
   }
 }
-__decorateClass$j([attr({
+__decorateClass$i([attr({
   mode: "boolean",
   attribute: "no-title-action"
 })], DialogBody.prototype, "noTitleAction", 2);
@@ -5774,7 +5775,7 @@ const dismissed16Regular = html.partial(`
       fill="currentColor"
     ></path>
   </svg>`);
-const template$k = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type !== DialogType.nonModal} tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.parentNode?.hide()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div>`;
+const template$k = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert} tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.parentNode?.hide()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div>`;
 
 const styles$j = css`
   ${display("grid")}
@@ -5801,33 +5802,71 @@ const DividerRole = {
 };
 const DividerOrientation = Orientation;
 
-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 Divider extends FASTElement {
   constructor() {
     super(...arguments);
-    this.role = DividerRole.separator;
-    this.orientation = DividerOrientation.horizontal;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.elementInternals.role = this.role ?? DividerRole.separator;
+    if (this.role !== DividerRole.presentation) {
+      this.elementInternals.ariaOrientation = this.orientation ?? DividerOrientation.horizontal;
+    }
+  }
+  /**
+   * Sets the element's internal role when the role attribute changes.
+   *
+   * @param previous - the previous role value
+   * @param next - the current role value
+   * @internal
+   */
+  roleChanged(previous, next) {
+    if (this.$fastController.isConnected) {
+      this.elementInternals.role = `${next ?? DividerRole.separator}`;
+    }
+    if (next === DividerRole.presentation) {
+      this.elementInternals.ariaOrientation = null;
+    }
+  }
+  /**
+   * Sets the element's internal orientation when the orientation attribute changes.
+   *
+   * @param previous - the previous orientation value
+   * @param next - the current orientation value
+   * @internal
+   */
+  orientationChanged(previous, next) {
+    if (this.$fastController.isConnected) {
+      this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
+    }
   }
 }
-__decorateClass$i([attr], Divider.prototype, "role", 2);
-__decorateClass$i([attr], Divider.prototype, "orientation", 2);
-__decorateClass$i([attr({
+__decorateClass$h([attr], Divider.prototype, "role", 2);
+__decorateClass$h([attr], Divider.prototype, "orientation", 2);
+__decorateClass$h([attr({
   attribute: "align-content"
 })], Divider.prototype, "alignContent", 2);
-__decorateClass$i([attr], Divider.prototype, "appearance", 2);
-__decorateClass$i([attr({
+__decorateClass$h([attr], Divider.prototype, "appearance", 2);
+__decorateClass$h([attr({
   mode: "boolean"
 })], Divider.prototype, "inset", 2);
 
 function dividerTemplate() {
-  return html`<template role="${x => x.role}" aria-orientation="${x => x.role !== DividerRole.presentation ? x.orientation : void 0}"><slot></slot></template>`;
+  return html`<slot></slot>`;
 }
 const template$j = dividerTemplate();
 
@@ -5864,12 +5903,12 @@ const ValidationFlags = {
   valid: "valid"
 };
 
-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 Field extends FASTElement {
@@ -5989,11 +6028,11 @@ class Field extends FASTElement {
     }
   }
 }
-__decorateClass$h([attr({
+__decorateClass$g([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
-__decorateClass$h([observable], Field.prototype, "messageSlot", 2);
-__decorateClass$h([observable], Field.prototype, "slottedInputs", 2);
+__decorateClass$g([observable], Field.prototype, "messageSlot", 2);
+__decorateClass$g([observable], Field.prototype, "slottedInputs", 2);
 
 const disabledState = css.partial`:is([state--disabled], :state(disabled))`;
 const focusVisibleState = css.partial`:is([state--focus-visible], :state(focus-visible))`;
@@ -6036,26 +6075,26 @@ const definition$i = Field.compose({
 
 definition$i.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 Image extends FASTElement {}
-__decorateClass$g([attr({
+__decorateClass$f([attr({
   mode: "boolean"
 })], Image.prototype, "block", 2);
-__decorateClass$g([attr({
+__decorateClass$f([attr({
   mode: "boolean"
 })], Image.prototype, "bordered", 2);
-__decorateClass$g([attr({
+__decorateClass$f([attr({
   mode: "boolean"
 })], Image.prototype, "shadow", 2);
-__decorateClass$g([attr], Image.prototype, "fit", 2);
-__decorateClass$g([attr], Image.prototype, "shape", 2);
+__decorateClass$f([attr], Image.prototype, "fit", 2);
+__decorateClass$f([attr], Image.prototype, "shape", 2);
 
 const template$h = html`<slot></slot>`;
 
@@ -6070,12 +6109,12 @@ const definition$h = Image.compose({
 
 definition$h.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 Label extends FASTElement {
@@ -6085,12 +6124,12 @@ class Label extends FASTElement {
     this.required = false;
   }
 }
-__decorateClass$f([attr], Label.prototype, "size", 2);
-__decorateClass$f([attr], Label.prototype, "weight", 2);
-__decorateClass$f([attr({
+__decorateClass$e([attr], Label.prototype, "size", 2);
+__decorateClass$e([attr], Label.prototype, "weight", 2);
+__decorateClass$e([attr({
   mode: "boolean"
 })], Label.prototype, "disabled", 2);
-__decorateClass$f([attr({
+__decorateClass$e([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
@@ -7066,12 +7105,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 {
@@ -7276,21 +7315,21 @@ class MenuItem extends FASTElement {
     });
   }
 }
-__decorateClass$e([attr({
+__decorateClass$d([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$e([attr({
+__decorateClass$d([attr({
   mode: "boolean"
 })], MenuItem.prototype, "expanded", 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$e = css`
@@ -7320,12 +7359,12 @@ const definition$e = MenuItem.compose({
 
 definition$e.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 {
@@ -7566,7 +7605,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$d = css`
@@ -7587,12 +7626,12 @@ const definition$d = MenuList.compose({
 
 definition$d.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 {
@@ -7928,27 +7967,27 @@ 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, attr({
+__decorateClass$b([observable, attr({
   mode: "boolean"
 })], Menu.prototype, "open", 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$c = css`
   :host{position:relative;z-index:var(--z-index-menu,1)}.positioning-container{position:fixed;top:0;left:0;transform:translate(0,0)}`;
@@ -7972,12 +8011,12 @@ const definition$c = Menu.compose({
 
 definition$c.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 BaseProgress extends FASTElement {
@@ -8013,23 +8052,23 @@ class BaseProgress extends FASTElement {
     this.percentComplete = range === 0 ? 0 : Math.fround((value - min) / range * 100);
   }
 }
-__decorateClass$b([attr({
+__decorateClass$a([attr({
   converter: nullableNumberConverter
 })], BaseProgress.prototype, "value", 2);
-__decorateClass$b([attr({
+__decorateClass$a([attr({
   converter: nullableNumberConverter
 })], BaseProgress.prototype, "min", 2);
-__decorateClass$b([attr({
+__decorateClass$a([attr({
   converter: nullableNumberConverter
 })], BaseProgress.prototype, "max", 2);
-__decorateClass$b([observable], BaseProgress.prototype, "percentComplete", 2);
+__decorateClass$a([observable], BaseProgress.prototype, "percentComplete", 2);
 
-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 BaseProgress {
@@ -8038,9 +8077,9 @@ class ProgressBar extends BaseProgress {
     this.validationState = null;
   }
 }
-__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);
 
@@ -8520,12 +8559,12 @@ class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
   }
 }
 
-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;
+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$9(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 class Radio extends FormAssociatedRadio {
@@ -8592,17 +8631,17 @@ class Radio extends FormAssociatedRadio {
     return true;
   }
 }
-__decorateClass$9([observable], Radio.prototype, "name", 2);
-__decorateClass$9([observable], Radio.prototype, "defaultSlottedNodes", 2);
+__decorateClass$8([observable], Radio.prototype, "name", 2);
+__decorateClass$8([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;
+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$8(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 class RadioGroup extends FASTElement {
@@ -8905,22 +8944,22 @@ class RadioGroup extends FASTElement {
     }
   }
 }
-__decorateClass$8([attr({
+__decorateClass$7([attr({
   mode: "boolean"
 })], RadioGroup.prototype, "stacked", 2);
-__decorateClass$8([attr({
+__decorateClass$7([attr({
   attribute: "readonly",
   mode: "boolean"
 })], RadioGroup.prototype, "readOnly", 2);
-__decorateClass$8([attr({
+__decorateClass$7([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);
+__decorateClass$7([attr], RadioGroup.prototype, "name", 2);
+__decorateClass$7([attr], RadioGroup.prototype, "value", 2);
+__decorateClass$7([attr], RadioGroup.prototype, "orientation", 2);
+__decorateClass$7([observable], RadioGroup.prototype, "childItems", 2);
+__decorateClass$7([observable], RadioGroup.prototype, "slottedRadioButtons", 2);
 
 const styles$a = css`
   ${display("flex")}
@@ -8988,12 +9027,12 @@ function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   return pct;
 }
 
-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;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(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);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 class Slider extends FormAssociatedSlider {
@@ -9322,31 +9361,31 @@ class Slider extends FormAssociatedSlider {
     return constrainedValue + this.min;
   }
 }
-__decorateClass$7([attr], Slider.prototype, "size", 2);
-__decorateClass$7([attr({
+__decorateClass$6([attr], Slider.prototype, "size", 2);
+__decorateClass$6([attr({
   attribute: "readonly",
   mode: "boolean"
 })], Slider.prototype, "readOnly", 2);
-__decorateClass$7([observable], Slider.prototype, "direction", 2);
-__decorateClass$7([observable], Slider.prototype, "isDragging", 2);
-__decorateClass$7([observable], Slider.prototype, "position", 2);
-__decorateClass$7([observable], Slider.prototype, "trackWidth", 2);
-__decorateClass$7([observable], Slider.prototype, "trackMinWidth", 2);
-__decorateClass$7([observable], Slider.prototype, "trackHeight", 2);
-__decorateClass$7([observable], Slider.prototype, "trackLeft", 2);
-__decorateClass$7([observable], Slider.prototype, "trackMinHeight", 2);
-__decorateClass$7([observable], Slider.prototype, "valueTextFormatter", 2);
-__decorateClass$7([attr({
+__decorateClass$6([observable], Slider.prototype, "direction", 2);
+__decorateClass$6([observable], Slider.prototype, "isDragging", 2);
+__decorateClass$6([observable], Slider.prototype, "position", 2);
+__decorateClass$6([observable], Slider.prototype, "trackWidth", 2);
+__decorateClass$6([observable], Slider.prototype, "trackMinWidth", 2);
+__decorateClass$6([observable], Slider.prototype, "trackHeight", 2);
+__decorateClass$6([observable], Slider.prototype, "trackLeft", 2);
+__decorateClass$6([observable], Slider.prototype, "trackMinHeight", 2);
+__decorateClass$6([observable], Slider.prototype, "valueTextFormatter", 2);
+__decorateClass$6([attr({
   converter: nullableNumberConverter
 })], Slider.prototype, "min", 2);
-__decorateClass$7([attr({
+__decorateClass$6([attr({
   converter: nullableNumberConverter
 })], Slider.prototype, "max", 2);
-__decorateClass$7([attr({
+__decorateClass$6([attr({
   converter: nullableNumberConverter
 })], Slider.prototype, "step", 2);
-__decorateClass$7([attr], Slider.prototype, "orientation", 2);
-__decorateClass$7([attr], Slider.prototype, "mode", 2);
+__decorateClass$6([attr], Slider.prototype, "orientation", 2);
+__decorateClass$6([attr], Slider.prototype, "mode", 2);
 
 const styles$8 = css`
   ${display("inline-grid")} :host{--thumb-size:18px;--thumb-padding:3px;--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:-2px;--track-width:4px;--fast-slider-height:calc(var(--thumb-size) * 10);--slider-direction:90deg;align-items:center;box-sizing:border-box;outline:none;cursor:pointer;user-select:none;border-radius:${borderRadiusSmall};touch-action:pan-y;min-width:calc(var(--thumb-size) * 1px);width:100%}:host([size='small']){--thumb-size:14px;--track-width:2px;--thumb-padding:3px}:host([orientation='vertical']){--slider-direction:0deg;height:160px;min-height:var(--thumb-size);touch-action:pan-x;padding:8px 0;width:auto;min-width:auto}:host([disabled]:hover){cursor:initial}:host(:focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.thumb-cursor:focus{outline:0}.thumb-container{position:absolute;height:var(--thumb-size);width:var(--thumb-size);transition:all 0.2s ease}.thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.5))}:host([size='small']) .thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.35))}:host([orientation='vertical']) .thumb-container{transform:translateX(calc(var(--thumb-translate) * -1.5)) translateY(calc(var(--thumb-size) * -0.5))}:host([orientation='vertical'][size='small']) .thumb-container{transform:translateX(calc(var(--thumb-translate) * -1.35)) translateY(calc(var(--thumb-size) * -0.5))}.thumb-cursor{height:var(--thumb-size);width:var(--thumb-size);background-color:${colorBrandBackground};border-radius:${borderRadiusCircular};box-shadow:inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1},0 0 0 1px ${colorNeutralStroke1}}.thumb-cursor:hover{background-color:${colorCompoundBrandBackgroundHover}}.thumb-cursor:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([disabled]) .thumb-cursor{background-color:${colorNeutralForegroundDisabled};box-shadow:inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1},0 0 0 1px ${colorNeutralStrokeDisabled}}.positioning-region{position:relative;display:grid}:host([orientation='horizontal']) .positioning-region{margin:0 8px;grid-template-rows:var(--thumb-size) var(--thumb-size)}:host([orientation='vertical']) .positioning-region{margin:8px 0;height:100%;grid-template-columns:var(--thumb-size) var(--thumb-size)}.track{align-self:start;position:absolute;background-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};overflow:hidden}:host([step]) .track::after{content:'';position:absolute;border-radius:${borderRadiusMedium};width:100%;inset:0 2px;background-image:repeating-linear-gradient(
@@ -9369,12 +9408,12 @@ const definition$8 = Slider.compose({
 
 definition$8.define(FluentDesignSystem.registry);
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$6(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 class Spinner extends FASTElement {
@@ -9389,8 +9428,8 @@ class Spinner extends FASTElement {
     this.elementInternals.role = "progressbar";
   }
 }
-__decorateClass$6([attr], Spinner.prototype, "size", 2);
-__decorateClass$6([attr], Spinner.prototype, "appearance", 2);
+__decorateClass$5([attr], Spinner.prototype, "size", 2);
+__decorateClass$5([attr], Spinner.prototype, "appearance", 2);
 
 const styles$7 = css`
   ${display("flex")}
@@ -9407,84 +9446,21 @@ const definition$7 = Spinner.compose({
 
 definition$7.define(FluentDesignSystem.registry);
 
-class _Switch extends FASTElement {}
-class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$5(target, key, result);
-  return result;
-};
-class Switch extends FormAssociatedSwitch {
-  constructor() {
-    super();
-    /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="checkbox"]
-     *
-     * @internal
-     */
-    this.initialValue = "on";
-    /**
-     * @internal
-     */
-    this.keypressHandler = e => {
-      if (this.readOnly) {
-        return;
-      }
-      switch (e.key) {
-        case keyEnter:
-        case keySpace:
-          this.checked = !this.checked;
-          break;
-      }
-    };
-    /**
-     * @internal
-     */
-    this.clickHandler = e => {
-      if (!this.disabled && !this.readOnly) {
-        this.checked = !this.checked;
-      }
-    };
-    this.proxy.setAttribute("type", "checkbox");
-  }
-  // Map to proxy element
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-    }
-  }
-}
-__decorateClass$5([attr({
-  attribute: "label-position"
-})], Switch.prototype, "labelPosition", 2);
-__decorateClass$5([attr({
-  attribute: "readonly",
-  mode: "boolean"
-})], Switch.prototype, "readOnly", 2);
-__decorateClass$5([observable], Switch.prototype, "defaultSlottedNodes", 2);
+class Switch extends BaseCheckbox {}
 
 function switchTemplate(options = {}) {
-  return html`<template role="switch" aria-checked="${x => x.checked}" aria-disabled="${x => x.disabled}" aria-readonly="${x => x.readOnly}" tabindex="${x => x.disabled ? null : 0}" @keypress="${(x, c) => x.keypressHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><label part="label" class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"><slot ${slotted("defaultSlottedNodes")}></slot></label><div part="switch" class="switch"><slot name="switch">${staticallyCompose(options.switch)}</slot></div></template>`;
+  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>`;
 }
 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")}
 
-  :host{align-items:center;flex-direction:row-reverse;outline:none;user-select:none;contain:content}:host([label-position='before']){flex-direction:row}:host([label-position='above']){flex-direction:column;align-items:flex-start}:host([disabled]) .label,:host([readonly]) .label,:host([readonly]) .switch,:host([disabled]) .switch{cursor:not-allowed}.label{position:relative;color:${colorNeutralForeground1};line-height:${lineHeightBase300};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};font-family:${fontFamilyBase};padding:${spacingVerticalXS} ${spacingHorizontalXS};cursor:pointer}.label__hidden{display:none}.switch{display:flex;align-items:center;padding:0 ${spacingHorizontalXXS};box-sizing:border-box;width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};outline:none;cursor:pointer;margin:${spacingVerticalS} ${spacingHorizontalS}}:host(:hover) .switch{background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .switch{border-color:${colorNeutralStrokeAccessiblePressed}}:host([disabled]) .switch,:host([readonly]) .switch{border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host([aria-checked='true']) .switch{background:${colorCompoundBrandBackground}}:host([aria-checked='true']:hover) .switch{background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host([aria-checked='true']:active) .switch{background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host([aria-checked='true'][disabled]) .switch{background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host([aria-checked='true']) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}:host([aria-checked='true']:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host([aria-checked='true']:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host([disabled]) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host([aria-checked='true'][disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    .switch{border-color:InactiveBorder}:host([aria-checked='true']) .switch,:host([aria-checked='true']:active) .switch,:host([aria-checked='true']:hover) .switch{background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='true']:hover) .checked-indicator,:host([aria-checked='true']:active) .checked-indicator{background-color:ButtonFace}`));
+  :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${spacingHorizontalXXS};width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};cursor:pointer}:host(:hover){background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(:disabled),:host([readonly]){border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host(${checkedState}){background:${colorCompoundBrandBackground};border-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover){background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host(${checkedState}:active){background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host(${checkedState}:disabled){background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host(${checkedState}) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}:host(${checkedState}:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host(${checkedState}:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(${checkedState}:disabled) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{border-color:InactiveBorder}:host(${checkedState}),:host(${checkedState}:active),:host(${checkedState}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${checkedState}) .checked-indicator,:host(${checkedState}:hover) .checked-indicator,:host(${checkedState}:active) .checked-indicator{background-color:ButtonFace}`));
 
 const definition$6 = Switch.compose({
   name: `${FluentDesignSystem.prefix}-switch`,