@fluentui/web-components 3.0.0-beta.24 → 3.0.0-beta.26

package/dist/web-components.js

@@ -2368,6 +2368,74 @@ function slotted(propertyOrOptions) {
   return new SlottedDirective(propertyOrOptions);
 }
 
+/**
+ * The runtime behavior for child node observation.
+ * @public
+ */
+class ChildrenDirective extends NodeObservationDirective {
+  /**
+   * Creates an instance of ChildrenDirective.
+   * @param options - The options to use in configuring the child observation behavior.
+   */
+  constructor(options) {
+    super(options);
+    this.observerProperty = Symbol();
+    this.handleEvent = (mutations, observer) => {
+      const target = observer.target;
+      this.updateTarget(this.getSource(target), this.computeNodes(target));
+    };
+    options.childList = true;
+  }
+  /**
+   * Begins observation of the nodes.
+   * @param target - The target to observe.
+   */
+  observe(target) {
+    let observer = target[this.observerProperty];
+    if (!observer) {
+      observer = new MutationObserver(this.handleEvent);
+      observer.toJSON = noop;
+      target[this.observerProperty] = observer;
+    }
+    observer.target = target;
+    observer.observe(target, this.options);
+  }
+  /**
+   * Disconnects observation of the nodes.
+   * @param target - The target to unobserve.
+   */
+  disconnect(target) {
+    const observer = target[this.observerProperty];
+    observer.target = null;
+    observer.disconnect();
+  }
+  /**
+   * Retrieves the raw nodes that should be assigned to the source property.
+   * @param target - The target to get the node to.
+   */
+  getNodes(target) {
+    if ("selector" in this.options) {
+      return Array.from(target.querySelectorAll(this.options.selector));
+    }
+    return Array.from(target.childNodes);
+  }
+}
+HTMLDirective.define(ChildrenDirective);
+/**
+ * A directive that observes the `childNodes` of an element and updates a property
+ * whenever they change.
+ * @param propertyOrOptions - The options used to configure child node observation.
+ * @public
+ */
+function children(propertyOrOptions) {
+  if (isString(propertyOrOptions)) {
+    propertyOrOptions = {
+      property: propertyOrOptions
+    };
+  }
+  return new ChildrenDirective(propertyOrOptions);
+}
+
 const booleanMode = "boolean";
 const reflectMode = "reflect";
 /**
@@ -3675,6 +3743,7 @@ const colorPaletteRedBackground1 = "var(--colorPaletteRedBackground1)";
 const colorPaletteRedBackground2 = "var(--colorPaletteRedBackground2)";
 const colorPaletteRedBackground3 = "var(--colorPaletteRedBackground3)";
 const colorPaletteRedBorder1 = "var(--colorPaletteRedBorder1)";
+const colorPaletteRedBorder2 = "var(--colorPaletteRedBorder2)";
 const colorPaletteRedForeground1 = "var(--colorPaletteRedForeground1)";
 const colorPaletteRedForeground2 = "var(--colorPaletteRedForeground2)";
 const colorPaletteRedForeground3 = "var(--colorPaletteRedForeground3)";
@@ -3828,7 +3897,7 @@ const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 const curveEasyEase = "var(--curveEasyEase)";
 const curveLinear = "var(--curveLinear)";
 
-const styles$s = css`
+const styles$t = 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}`;
@@ -3862,18 +3931,18 @@ const chevronDown20Filled = html.partial(`<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>`;
 }
-const template$t = accordionItemTemplate({
+const template$u = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
 
-const definition$t = AccordionItem.compose({
+const definition$u = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$t,
-  styles: styles$s
+  template: template$u,
+  styles: styles$t
 });
 
-definition$t.define(FluentDesignSystem.registry);
+definition$u.define(FluentDesignSystem.registry);
 
 const AccordionExpandMode = {
   single: "single",
@@ -4068,7 +4137,7 @@ __decorateClass$q([attr({
 })], Accordion.prototype, "expandmode", 2);
 __decorateClass$q([observable], Accordion.prototype, "slottedAccordionItems", 2);
 
-const styles$r = css`
+const styles$s = css`
   ${display("flex")}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -4079,15 +4148,15 @@ function accordionTemplate() {
     filter: elements()
   })}></slot></template>`;
 }
-const template$s = accordionTemplate();
+const template$t = accordionTemplate();
 
-const definition$s = Accordion.compose({
+const definition$t = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$s,
-  styles: styles$r
+  template: template$t,
+  styles: styles$s
 });
 
-definition$s.define(FluentDesignSystem.registry);
+definition$t.define(FluentDesignSystem.registry);
 
 var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
@@ -4171,7 +4240,7 @@ __decorateClass$p([attr({
 applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
 applyMixins(AnchorButton, StartEnd, DelegatesARIALink);
 
-const styles$q = css`
+const styles$r = css`
   ${display("inline-flex")}
 
   :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle}:host .control{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}.content{display:inherit;text-align:center}:host(:hover) .control{background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active) .control{background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host .control:focus-visible{border-color:${colorTransparentStroke};outline:${strokeWidthThick}) solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]) .control{min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS}}:host([size='small']) .control{min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]) .control{min-width:24px;max-width:24px}:host([size='large']) .control{min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]) .control{min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']) .control,:host([shape='circular']) .control:focus-visible{border-radius:${borderRadiusCircular}}:host([shape='square']) .control,:host([shape='square']) .control:focus-visible{border-radius:${borderRadiusNone}}:host([appearance='primary']) .control{background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover) .control,:host([appearance='primary']:hover:active) .control{border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active) .control{background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']) .control:focus-visible{border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary'])) .control,:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary']):hover) .control,:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary']):hover:active) .control{border-color:transparent}:host([appearance='outline']) .control{background-color:${colorTransparentBackground}}:host([appearance='outline']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active) .control{background-color:${colorTransparentBackgroundPressed}}:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline'])) .control,:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline']):hover) .control,:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline']):hover:active) .control{background-color:${colorTransparentBackground}}:host([appearance='subtle']) .control{background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle'])) .control,:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle']):hover) .control,:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle']):hover:active) .control{background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control{background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active) .control{background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control,:host([appearance='transparent']:hover) .control,:host([appearance='transparent']:hover:active) .control{border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent'])) .control,:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent']):hover) .control,:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent']):hover:active)
@@ -4182,18 +4251,18 @@ const styles$q = css`
 function anchorTemplate(options = {}) {
   return html`<a class="control" part="control" download="${x => x.download}" href="${x => x.href}" hreflang="${x => x.hreflang}" ping="${x => x.ping}" referrerpolicy="${x => x.referrerpolicy}" rel="${x => x.rel}" target="${x => x.target}" type="${x => x.type}" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-expanded="${x => x.ariaExpanded}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")}>${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</a>`;
 }
-const template$r = anchorTemplate();
+const template$s = anchorTemplate();
 
-const definition$r = AnchorButton.compose({
+const definition$s = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$r,
-  styles: styles$q,
+  template: template$s,
+  styles: styles$r,
   shadowOptions: {
     delegatesFocus: true
   }
 });
 
-definition$r.define(FluentDesignSystem.registry);
+definition$s.define(FluentDesignSystem.registry);
 
 const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
 const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
@@ -4350,22 +4419,22 @@ const animations = {
   normalEase: curveEasyEase,
   nullEasing: curveLinear
 };
-const styles$p = css`
+const styles$q = css`
   ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow}),${durationSlower};transition-delay:${animations.fastEase}),${animations.nullEasing})}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
 
 const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
 function avatarTemplate() {
   return html`<template role="img" data-color=${x => x.generateColor()}><slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot></template>`;
 }
-const template$q = avatarTemplate();
+const template$r = avatarTemplate();
 
-const definition$q = Avatar.compose({
+const definition$r = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$q,
-  styles: styles$p
+  template: template$r,
+  styles: styles$q
 });
 
-definition$q.define(FluentDesignSystem.registry);
+definition$r.define(FluentDesignSystem.registry);
 
 const BadgeAppearance = {
   filled: "filled",
@@ -4757,7 +4826,7 @@ css.partial`
   font-weight: ${fontWeightSemibold};
 `;
 
-const styles$o = css`
+const styles$p = css`
   :host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -4770,15 +4839,15 @@ const styles$o = css`
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$p = badgeTemplate();
+const template$q = badgeTemplate();
 
-const definition$p = Badge.compose({
+const definition$q = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$p,
-  styles: styles$o
+  template: template$q,
+  styles: styles$p
 });
 
-definition$p.define(FluentDesignSystem.registry);
+definition$q.define(FluentDesignSystem.registry);
 
 const ButtonType = {
   submit: "submit",
@@ -5037,7 +5106,7 @@ __decorateClass$m([attr], Button.prototype, "type", 2);
 __decorateClass$m([attr], Button.prototype, "value", 2);
 applyMixins(Button, StartEnd);
 
-const styles$n = css`
+const styles$o = css`
   ${display("inline-flex")}
 
   :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${borderRadiusCircular}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary'])),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover:active){border-color:transparent}:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline'])),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover:active){background-color:${colorTransparentBackground}}:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle'])),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover:active){background-color:${colorTransparentBackground};border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent'])),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover:active){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
@@ -5046,557 +5115,433 @@ const styles$n = css`
 function buttonTemplate$1(options = {}) {
   return html`<template tabindex="${x => x.disabled ? -1 : 0}" @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$o = buttonTemplate$1();
+const template$p = buttonTemplate$1();
 
-const definition$o = Button.compose({
+const definition$p = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$o,
-  styles: styles$n
+  template: template$p,
+  styles: styles$o
 });
 
-definition$o.define(FluentDesignSystem.registry);
+definition$p.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);
-      }
-    }
+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$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$l(target, key, result);
+  return result;
+};
+class BaseCheckbox extends FASTElement {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.initialValue = "on";
     /**
-     * Must evaluate to true to enable elementInternals.
-     * Feature detects API support and resolve respectively
+     * The internal checked state of the control.
      *
      * @internal
      */
-    static get formAssociated() {
-      return supportsElementInternals;
-    }
+    this._checked = this.initialChecked ?? false;
     /**
-     * Returns the validity state of the element
+     * Indicates that the checked state has been changed by the user.
      *
-     * @beta
+     * @internal
      */
-    get validity() {
-      return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
-    }
+    this.dirtyChecked = false;
     /**
-     * Retrieve a reference to the associated form.
-     * Returns null if not associated to any form.
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
-     * @beta
+     * @internal
      */
-    get form() {
-      return this.elementInternals ? this.elementInternals.form : this.proxy.form;
-    }
+    this.elementInternals = this.attachInternals();
     /**
-     * Retrieve the localized validation message,
-     * or custom validation message if set.
+     * The fallback validation message, taken from a native checkbox `<input>` element.
      *
-     * @beta
-     */
-    get validationMessage() {
-      return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
-    }
-    /**
-     * Whether the element will be validated when the
-     * form is submitted
-     */
-    get willValidate() {
-      return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
-    }
-    /**
-     * A reference to all associated label elements
+     * @internal
      */
-    get labels() {
-      if (this.elementInternals) {
-        return Object.freeze(Array.from(this.elementInternals.labels));
-      } else if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {
-        const parentLabels = this.proxy.labels;
-        const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
-        const labels = parentLabels ? forLabels.concat(Array.from(parentLabels)) : forLabels;
-        return Object.freeze(labels);
-      } else {
-        return emptyArray;
-      }
-    }
+    this._validationFallbackMessage = "";
     /**
-     * Invoked when the `value` property changes
-     * @param previous - the previous value
-     * @param next - the new value
+     * The internal value of the input.
      *
-     * @remarks
-     * If elements extending `FormAssociated` implement a `valueChanged` method
-     * They must be sure to invoke `super.valueChanged(previous, next)` to ensure
-     * proper functioning of `FormAssociated`
+     * @internal
      */
-    valueChanged(previous, next) {
-      this.dirtyValue = true;
-      if (this.proxy instanceof HTMLElement) {
-        this.proxy.value = this.value;
-      }
-      this.currentValue = this.value;
-      this.setFormValue(this.value);
-      this.validate();
-    }
-    currentValueChanged() {
-      this.value = this.currentValue;
+    this._value = this.initialValue;
+    this.elementInternals.role = "checkbox";
+  }
+  /**
+   * The element's current checked state.
+   *
+   * @public
+   */
+  get checked() {
+    Observable.track(this, "checked");
+    return this._checked;
+  }
+  set checked(state) {
+    this._checked = state;
+    this.setFormValue(state ? this.value : null);
+    this.setValidity();
+    this.setAriaChecked();
+    toggleState(this.elementInternals, "checked", state);
+    Observable.notify(this, "checked");
+  }
+  /**
+   * Synchronizes the element's indeterminate state with the internal ElementInternals state.
+   *
+   * @internal
+   */
+  indeterminateChanged(prev, next) {
+    this.setAriaChecked();
+    toggleState(this.elementInternals, "indeterminate", next);
+  }
+  /**
+   * Updates the form value when the checked state changes.
+   *
+   * @internal
+   */
+  initialCheckedChanged(prev, next) {
+    if (!this.dirtyChecked) {
+      this.checked = next;
     }
-    /**
-     * Invoked when the `initialValue` property changes
-     *
-     * @param previous - the previous value
-     * @param next - the new value
-     *
-     * @remarks
-     * If elements extending `FormAssociated` implement a `initialValueChanged` method
-     * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
-     * proper functioning of `FormAssociated`
-     */
-    initialValueChanged(previous, next) {
-      if (!this.dirtyValue) {
-        this.value = this.initialValue;
-        this.dirtyValue = false;
-      }
+  }
+  /**
+   * Sets the value of the input when the value attribute changes.
+   *
+   * @param prev - The previous value
+   * @param next - The current value
+   * @internal
+   */
+  initialValueChanged(prev, next) {
+    this._value = next;
+  }
+  /**
+   * Sets the validity of the control when the required state changes.
+   *
+   * @param prev - The previous required state
+   * @param next - The current required state
+   * @internal
+   */
+  requiredChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      this.setValidity();
+      this.elementInternals.ariaRequired = `${!!next}`;
     }
-    /**
-     * Invoked when the `disabled` property changes
-     *
-     * @param previous - the previous value
-     * @param next - the new value
-     *
-     * @remarks
-     * If elements extending `FormAssociated` implement a `disabledChanged` method
-     * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure
-     * proper functioning of `FormAssociated`
-     */
-    disabledChanged(previous, next) {
-      if (this.proxy instanceof HTMLElement) {
-        this.proxy.disabled = this.disabled;
-      }
-      Updates.enqueue(() => this.classList.toggle("disabled", this.disabled));
-    }
-    /**
-     * Invoked when the `name` property changes
-     *
-     * @param previous - the previous value
-     * @param next - the new value
-     *
-     * @remarks
-     * If elements extending `FormAssociated` implement a `nameChanged` method
-     * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
-     * proper functioning of `FormAssociated`
-     */
-    nameChanged(previous, next) {
-      if (this.proxy instanceof HTMLElement) {
-        this.proxy.name = this.name;
-      }
-    }
-    /**
-     * Invoked when the `required` property changes
-     *
-     * @param previous - the previous value
-     * @param next - the new value
-     *
-     * @remarks
-     * If elements extending `FormAssociated` implement a `requiredChanged` method
-     * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure
-     * proper functioning of `FormAssociated`
-     */
-    requiredChanged(prev, next) {
-      if (this.proxy instanceof HTMLElement) {
-        this.proxy.required = this.required;
-      }
-      Updates.enqueue(() => this.classList.toggle("required", this.required));
-      this.validate();
+  }
+  /**
+   * The associated `<form>` element.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+   */
+  get form() {
+    return this.elementInternals.form;
+  }
+  /**
+   * A reference to all associated `<label>` elements.
+   *
+   * @public
+   */
+  get labels() {
+    return Object.freeze(Array.from(this.elementInternals.labels));
+  }
+  /**
+   * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+   * specified (e.g., via `setCustomValidity`).
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+   */
+  get validationMessage() {
+    if (this.elementInternals.validationMessage) {
+      return this.elementInternals.validationMessage;
     }
-    /**
-     * The element internals object. Will only exist
-     * in browsers supporting the attachInternals API
-     */
-    get elementInternals() {
-      if (!supportsElementInternals) {
-        return null;
-      }
-      let internals = InternalsMap.get(this);
-      if (!internals) {
-        internals = this.attachInternals();
-        InternalsMap.set(this, internals);
-      }
-      return internals;
+    if (!this._validationFallbackMessage) {
+      const validationMessageFallbackControl = document.createElement("input");
+      validationMessageFallbackControl.type = "checkbox";
+      validationMessageFallbackControl.required = true;
+      validationMessageFallbackControl.checked = false;
+      this._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
     }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-      super.connectedCallback();
-      this.addEventListener("keypress", this._keypressHandler);
-      if (!this.value) {
-        this.value = this.initialValue;
-        this.dirtyValue = false;
-      }
-      if (!this.elementInternals) {
-        this.attachProxy();
-        if (this.form) {
-          this.form.addEventListener("reset", this.formResetCallback);
-        }
-      }
+    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 input.
+   *
+   * @public
+   */
+  get value() {
+    Observable.track(this, "value");
+    return this._value;
+  }
+  set value(value) {
+    this._value = value;
+    if (this.$fastController.isConnected) {
+      this.setFormValue(value);
+      this.setValidity();
+      Observable.notify(this, "value");
     }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-      this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
-      if (!this.elementInternals && this.form) {
-        this.form.removeEventListener("reset", this.formResetCallback);
-      }
+  }
+  /**
+   * Determines if the control can be submitted for constraint validation.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+   */
+  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.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+   */
+  checkValidity() {
+    return this.elementInternals.checkValidity();
+  }
+  /**
+   * Toggles the checked state when the user clicks the element.
+   *
+   * @param e - the event object
+   * @internal
+   */
+  clickHandler(e) {
+    if (this.disabled) {
+      return;
     }
-    /**
-     * Return the current validity of the element.
-     */
-    checkValidity() {
-      return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();
+    this.dirtyChecked = true;
+    this.toggleChecked();
+    this.$emit("change");
+    this.$emit("input");
+    return true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setFormValue(this.checked ? this.value : null);
+    this.setAriaChecked();
+    this.setValidity();
+  }
+  /**
+   * Updates the form value when a user changes the `checked` state.
+   *
+   * @param e - the event object
+   * @internal
+   */
+  inputHandler(e) {
+    this.elementInternals.setFormValue(this.value);
+    this.setValidity();
+    return true;
+  }
+  /**
+   * Prevents scrolling when the user presses the space key.
+   *
+   * @param e - the event object
+   * @internal
+   */
+  keydownHandler(e) {
+    if (e.key !== " ") {
+      return true;
     }
-    /**
-     * Return the current validity of the element.
-     * If false, fires an invalid event at the element.
-     */
-    reportValidity() {
-      return this.elementInternals ? this.elementInternals.reportValidity() : this.proxy.reportValidity();
+  }
+  /**
+   * Toggles the checked state when the user releases the space key.
+   *
+   * @param e - the event object
+   * @internal
+   */
+  keyupHandler(e) {
+    if (e.key !== " ") {
+      return true;
     }
-    /**
-     * Set the validity of the control. In cases when the elementInternals object is not
-     * available (and the proxy element is used to report validity), this function will
-     * do nothing unless a message is provided, at which point the setCustomValidity method
-     * of the proxy element will be invoked with the provided message.
-     * @param flags - Validity flags
-     * @param message - Optional message to supply
-     * @param anchor - Optional element used by UA to display an interactive validation UI
-     */
-    setValidity(flags, message, anchor) {
-      if (this.elementInternals) {
-        this.elementInternals.setValidity(flags, message, anchor);
-      } else if (typeof message === "string") {
-        this.proxy.setCustomValidity(message);
+    this.click();
+  }
+  /**
+   * Resets the form value to its initial value when the form is reset.
+   *
+   * @internal
+   */
+  formResetCallback() {
+    this.checked = this.initialChecked ?? false;
+    this.dirtyChecked = false;
+    this.indeterminate = false;
+    this.setValidity();
+  }
+  /**
+   * 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();
+  }
+  /**
+   * 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 a custom validity message.
+   *
+   * @param message - The message to set
+   * @public
+   */
+  setCustomValidity(message) {
+    this.elementInternals.setValidity({
+      customError: true
+    }, message);
+    this.setValidity();
+  }
+  /**
+   * Sets the validity of the control.
+   *
+   * @param flags - Validity flags to set.
+   * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used.
+   * @param anchor - Optional anchor to use for the validation message.
+   *
+   * @internal
+   */
+  setValidity(flags = {
+    valueMissing: !!this.required && !this.checked
+  }, message = this.validationMessage, anchor) {
+    if (this.$fastController.isConnected) {
+      if (this.disabled) {
+        this.elementInternals.setValidity({});
+        return;
       }
+      this.elementInternals.setValidity(flags, message, anchor);
     }
-    /**
-     * Invoked when a connected component's form or fieldset has its disabled
-     * state changed.
-     * @param disabled - the disabled value of the form / fieldset
-     */
-    formDisabledCallback(disabled) {
-      this.disabled = disabled;
-    }
-    formResetCallback() {
-      this.value = this.initialValue;
-      this.dirtyValue = false;
-    }
-    /**
-     * Attach the proxy element to the DOM
-     */
-    attachProxy() {
-      if (!this.proxyInitialized) {
-        this.proxyInitialized = true;
-        this.proxy.style.display = "none";
-        this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation));
-        this.proxy.disabled = this.disabled;
-        this.proxy.required = this.required;
-        if (typeof this.name === "string") {
-          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 _Checkbox extends FASTElement {}
-class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
   }
-}
-
-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$l(target, key, result);
-  return result;
-};
-class Checkbox extends FormAssociatedCheckbox {
-  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";
+  /**
+   * Toggles the checked state of the control.
+   *
+   * @public
+   */
+  toggleChecked(force = !this.checked) {
     this.indeterminate = false;
-    /**
-     * @internal
-     */
-    this.keypressHandler = e => {
-      if (this.disabled) {
-        return;
-      }
-      switch (e.key) {
-        case keySpace:
-          this.toggleChecked();
-          break;
-      }
-    };
-    /**
-     * @internal
-     */
-    this.clickHandler = e => {
-      if (!this.disabled) {
-        this.toggleChecked();
-      }
-    };
-    this.proxy.setAttribute("type", "checkbox");
-  }
-  toggleChecked() {
-    if (this.indeterminate) {
-      this.indeterminate = false;
-    }
-    this.checked = !this.checked;
+    this.checked = force;
   }
 }
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
+BaseCheckbox.formAssociated = true;
+__decorateClass$l([attr({
+  mode: "boolean"
+})], BaseCheckbox.prototype, "autofocus", 2);
+__decorateClass$l([attr({
+  mode: "boolean"
+})], BaseCheckbox.prototype, "disabled", 2);
+__decorateClass$l([attr({
+  attribute: "form"
+})], BaseCheckbox.prototype, "formAttribute", 2);
+__decorateClass$l([observable], BaseCheckbox.prototype, "indeterminate", 2);
+__decorateClass$l([attr({
+  attribute: "checked",
+  mode: "boolean"
+})], BaseCheckbox.prototype, "initialChecked", 2);
+__decorateClass$l([attr({
+  attribute: "value",
+  mode: "fromView"
+})], BaseCheckbox.prototype, "initialValue", 2);
+__decorateClass$l([attr], BaseCheckbox.prototype, "name", 2);
+__decorateClass$l([attr({
+  mode: "boolean"
+})], BaseCheckbox.prototype, "required", 2);
+class Checkbox extends BaseCheckbox {}
 __decorateClass$l([attr], Checkbox.prototype, "shape", 2);
 __decorateClass$l([attr], Checkbox.prototype, "size", 2);
-__decorateClass$l([attr({
-  attribute: "label-position"
-})], Checkbox.prototype, "labelPosition", 2);
-__decorateClass$l([observable], Checkbox.prototype, "defaultSlottedNodes", 2);
-__decorateClass$l([observable], Checkbox.prototype, "indeterminate", 2);
-
-const checkedIndicator = html.partial(`
-    <div class="checked-indicator">
-        <svg fill="currentColor"
-            aria-hidden="true"
-            width="1em"
-            height="1em"
-            viewBox="0 0 12 12"
-            xmlns="http://www.w3.org/2000/svg">
-                <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor">
-                </path>
-        </svg>
-    </div>
+
+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$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 */
+`
+    <svg
+        fill="currentColor"
+        aria-hidden="true"
+        class="checked-indicator"
+        width="1em"
+        height="1em"
+        viewBox="0 0 12 12"
+        xmlns="http://www.w3.org/2000/svg">
+            <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path>
+    </svg>
 `);
-const indeterminateIndicator = html.partial(`
-    <div class="indeterminate-indicator"></div>
+const indeterminateIndicator = html.partial( /* html */
+`
+    <span class="indeterminate-indicator"></span>
 `);
 function checkboxTemplate(options = {}) {
-  return html`<template role="checkbox" aria-checked="${x => x.indeterminate ? "mixed" : x.checked}" aria-required="${x => x.required}" aria-disabled="${x => x.disabled}" tabindex="${x => x.disabled ? null : 0}" @keypress="${(x, c) => x.keypressHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><div part="control" class="control"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot><slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot></div><label part="label" class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"><slot ${slotted("defaultSlottedNodes")}></slot></label></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="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot><slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot></template>`;
 }
-const template$n = checkboxTemplate({
+const template$o = checkboxTemplate({
   checkedIndicator,
   indeterminateIndicator
 });
 
-const styles$m = css`
-  ${display("inline-flex")}
-  :host{align-items:center;outline:none;user-select:none;vertical-align:middle;cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};color:${colorNeutralForeground3};position:relative}:host(:focus-visible)::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusMedium};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}.control{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;margin:${spacingVerticalS} ${spacingHorizontalS};fill:currentcolor;height:16px;width:16px;border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusSmall};outline:none}.label{align-self:center;cursor:inherit;padding-inline:${spacingHorizontalS};padding-bottom:${spacingVerticalS};padding-top:${spacingVerticalS}}.label__hidden{display:none;visibility:hidden}.checked-indicator{display:flex;align-items:center;justify-content:center;color:${colorNeutralForegroundInverted};font-size:12px;margin:auto;opacity:0}.indeterminate-indicator{position:absolute;width:8px;height:8px;border-radius:${borderRadiusSmall};background-color:${colorCompoundBrandForeground1};opacity:0}:host(:hover){color:${colorNeutralForeground2}}:host(:hover) .control{border-color:${colorNeutralStrokeAccessibleHover}}:host(:hover) .indeterminate-indicator{background-color:${colorCompoundBrandForeground1Hover}}:host(:active) .control{border-color:${colorNeutralStrokeAccessiblePressed}}:host(:active) .indeterminate-indicator{background-color:${colorCompoundBrandForeground1Pressed}}:host([aria-checked='true']),:host([aria-checked='mixed']),:host(:active){color:${colorNeutralForeground1}}:host([aria-checked='true']) .control{background-color:${colorCompoundBrandBackground}}:host([aria-checked='true']:hover) .control{border-color:${colorCompoundBrandStrokeHover};background-color:${colorCompoundBrandBackgroundHover}}:host([aria-checked='true']:active) .control{background-color:${colorCompoundBrandBackgroundPressed}}:host([aria-checked='mixed']:hover) .control{border-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='mixed']) .indeterminate-indicator{opacity:1}:host([aria-checked='true']) .control,:host([aria-checked='mixed']) .control{border-color:${colorCompoundBrandStroke}}:host([aria-checked='mixed']:active) .control,:host([aria-checked='true']:active) .control{border-color:${colorCompoundBrandStrokePressed}}:host([label-position='before']){flex-direction:row-reverse}:host([label-position='before']) .label{padding-inline:${spacingHorizontalS} ${spacingHorizontalXS};padding-top:${spacingVerticalS};padding-bottom:${spacingVerticalS}}:host([size='large']) .control{width:20px;height:20px}:host([size='large']) .checked-indicator{font-size:16px;height:20px}:host([aria-checked='mixed'][size='large']) .indeterminate-indicator{height:10px;width:10px}:host([shape='circular']) .control,:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]) .control,:host([aria-checked='mixed'][disabled]) .control,:host([aria-checked='true'][disabled]) .control{background-color:${colorTransparentBackgroundHover};border-color:${colorNeutralStrokeDisabled}}:host([aria-checked='true'][disabled]) .checked-indicator,:host([disabled]) ::slotted([slot='start']),:host([disabled]) .label,:host([aria-checked='mixed'][disabled]) .label,:host([aria-checked='true'][disabled]) .label{color:${colorNeutralForegroundDisabled}}:host([disabled]) .indeterminate-indicator{background-color:${colorNeutralForegroundDisabled}}`;
-
-const definition$n = Checkbox.compose({
+const definition$o = Checkbox.compose({
   name: `${FluentDesignSystem.prefix}-checkbox`,
-  template: template$n,
-  styles: styles$m
+  template: template$o,
+  styles: styles$n
 });
 
-definition$n.define(FluentDesignSystem.registry);
+definition$o.define(FluentDesignSystem.registry);
 
 class CompoundButton extends Button {}
 
-const styles$l = css`
-  ${styles$n}
+const styles$m = css`
+  ${styles$o}
 
   :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:hover,[appearance='primary']:active))
     ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='subtle'],[appearance='subtle']:hover,[appearance='subtle']:active))
@@ -5606,15 +5551,15 @@ const styles$l = css`
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? -1 : 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$m = buttonTemplate();
+const template$n = buttonTemplate();
 
-const definition$m = CompoundButton.compose({
+const definition$n = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$m,
-  styles: styles$l
+  template: template$n,
+  styles: styles$m
 });
 
-definition$m.define(FluentDesignSystem.registry);
+definition$n.define(FluentDesignSystem.registry);
 
 var __defProp$k = Object.defineProperty;
 var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
@@ -5672,7 +5617,7 @@ __decorateClass$k([attr({
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
-const styles$k = css`
+const styles$l = css`
   :host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -5685,15 +5630,15 @@ function composeTemplate(options = {}) {
     defaultContent: html`${x => x.setCount()}`
   });
 }
-const template$l = composeTemplate();
+const template$m = composeTemplate();
 
-const definition$l = CounterBadge.compose({
+const definition$m = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$l,
-  styles: styles$k
+  template: template$m,
+  styles: styles$l
 });
 
-definition$l.define(FluentDesignSystem.registry);
+definition$m.define(FluentDesignSystem.registry);
 
 const DialogType = {
   modal: "modal",
@@ -5783,18 +5728,19 @@ __decorateClass$j([attr({
 })], Dialog.prototype, "ariaLabelledby", 2);
 __decorateClass$j([attr], Dialog.prototype, "type", 2);
 
-const template$k = 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>`;
+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>`;
 
-const styles$j = css`
-  @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:calc(-48px + 100vh);padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`;
+const styles$k = css`
+  @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:calc(-48px + 100vh);padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    @layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}`));
 
-const definition$k = Dialog.compose({
+const definition$l = Dialog.compose({
   name: `${FluentDesignSystem.prefix}-dialog`,
-  template: template$k,
-  styles: styles$j
+  template: template$l,
+  styles: styles$k
 });
 
-definition$k.define(FluentDesignSystem.registry);
+definition$l.define(FluentDesignSystem.registry);
 
 var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
@@ -5829,20 +5775,20 @@ const dismissed16Regular = html.partial(`
       fill="currentColor"
     ></path>
   </svg>`);
-const template$j = 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.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 styles$i = css`
+const styles$j = css`
   ${display("grid")}
 
   :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL};position:sticky;z-index:1}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL};position:sticky;z-index:2}:not(:has(:is([slot='title'],[slot='title-action']))) .title:not(:has(.title-action)),:not(:has([slot='action'])) .actions{display:none}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}`;
 
-const definition$j = DialogBody.compose({
+const definition$k = DialogBody.compose({
   name: `${FluentDesignSystem.prefix}-dialog-body`,
-  template: template$j,
-  styles: styles$i
+  template: template$k,
+  styles: styles$j
 });
 
-definition$j.define(FluentDesignSystem.registry);
+definition$k.define(FluentDesignSystem.registry);
 
 const DividerRole = {
   /**
@@ -5884,21 +5830,40 @@ __decorateClass$h([attr({
 function dividerTemplate() {
   return html`<template role="${x => x.role}" aria-orientation="${x => x.role !== DividerRole.presentation ? x.orientation : void 0}"><slot></slot></template>`;
 }
-const template$i = dividerTemplate();
+const template$j = dividerTemplate();
 
-const styles$h = css`
+const styles$i = css`
   ${display("flex")}
 
   :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical']){flex-direction:column;align-items:center}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
 
-const definition$i = Divider.compose({
+const definition$j = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$i,
-  styles: styles$h
+  template: template$j,
+  styles: styles$i
 });
 
-definition$i.define(FluentDesignSystem.registry);
+definition$j.define(FluentDesignSystem.registry);
+
+const LabelPosition = {
+  above: "above",
+  after: "after",
+  before: "before"
+};
+const ValidationFlags = {
+  badInput: "bad-input",
+  customError: "custom-error",
+  patternMismatch: "pattern-mismatch",
+  rangeOverflow: "range-overflow",
+  rangeUnderflow: "range-underflow",
+  stepMismatch: "step-mismatch",
+  tooLong: "too-long",
+  tooShort: "too-short",
+  typeMismatch: "type-mismatch",
+  valueMissing: "value-missing",
+  valid: "valid"
+};
 
 var __defProp$g = Object.defineProperty;
 var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
@@ -5908,18 +5873,190 @@ var __decorateClass$g = (decorators, target, key, kind) => {
   if (kind && result) __defProp$g(target, key, result);
   return result;
 };
-class Image extends FASTElement {}
+class Field extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.labelPosition = LabelPosition.above;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+  }
+  /**
+   * Adds or removes the `invalid` event listener based on the presence of slotted message elements.
+   *
+   * @param prev - the previous list of slotted message elements
+   * @param next - the current list of slotted message elements
+   * @internal
+   */
+  messageSlotChanged(prev, next) {
+    if (!next.length) {
+      this.removeEventListener("invalid", this.invalidHandler, {
+        capture: true
+      });
+      return;
+    }
+    this.addEventListener("invalid", this.invalidHandler, {
+      capture: true
+    });
+  }
+  /**
+   * Sets the `input` property to the first slotted input.
+   *
+   * @param prev - The previous collection of inputs.
+   * @param next - The current collection of inputs.
+   * @internal
+   */
+  slottedInputsChanged(prev, next) {
+    this.input = next?.[0];
+    if (this.input) {
+      this.setStates();
+    }
+  }
+  /**
+   * Calls the `setStates` method when a `change` event is emitted from the slotted input.
+   *
+   * @param e - the event object
+   * @internal
+   */
+  changeHandler(e) {
+    this.setStates();
+  }
+  /**
+   * Redirects `click` events to the slotted input.
+   *
+   * @internal
+   */
+  clickHandler(e) {
+    if (this.isSameNode(e.target)) {
+      this.input.focus();
+      this.input.click();
+      return;
+    }
+    return true;
+  }
+  /**
+   * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
+   *
+   * @param e - the focus event
+   * @internal
+   */
+  focusinHandler(e) {
+    if (e.target.matches(":focus-visible")) {
+      toggleState(this.elementInternals, "focus-visible", true);
+    }
+    return true;
+  }
+  /**
+   * Removes the `focus-visible` state from the field when a slotted input loses focus.
+   *
+   * @param e - the focus event
+   * @internal
+   */
+  focusoutHandler(e) {
+    toggleState(this.elementInternals, "focus-visible", false);
+    return true;
+  }
+  /**
+   * Toggles validity state flags on the element when the slotted input emits an `invalid` event (if slotted validation messages are present).
+   *
+   * @param e - the event object
+   * @internal
+   */
+  invalidHandler(e) {
+    if (this.messageSlot.length) {
+      e.preventDefault();
+    }
+    this.setStates();
+  }
+  /**
+   * Toggles the field's states based on the slotted input.
+   *
+   * @internal
+   */
+  setStates() {
+    if (this.$fastController.isConnected) {
+      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]);
+      }
+    }
+  }
+}
 __decorateClass$g([attr({
+  attribute: "label-position"
+})], Field.prototype, "labelPosition", 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))`;
+const badInputState = css.partial`:is([state--${ValidationFlags.badInput}], :state(${ValidationFlags.badInput}))`;
+const customErrorState = css.partial`:is([state--${ValidationFlags.customError}], :state(${ValidationFlags.customError}))`;
+const patternMismatchState = css.partial`:is([state--${ValidationFlags.patternMismatch}], :state(${ValidationFlags.patternMismatch}))`;
+const rangeOverflowState = css.partial`:is([state--${ValidationFlags.rangeOverflow}], :state(${ValidationFlags.rangeOverflow}))`;
+const rangeUnderflowState = css.partial`:is([state--${ValidationFlags.rangeUnderflow}], :state(${ValidationFlags.rangeUnderflow}))`;
+const stepMismatchState = css.partial`:is([state--${ValidationFlags.stepMismatch}], :state(${ValidationFlags.stepMismatch}))`;
+const tooLongState = css.partial`:is([state--${ValidationFlags.tooLong}], :state(${ValidationFlags.tooLong}))`;
+const tooShortState = css.partial`:is([state--${ValidationFlags.tooShort}], :state(${ValidationFlags.tooShort}))`;
+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 styles$h = 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}`;
+
+const template$i = 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",
+  attributes: true,
+  attributeFilter: ["disabled", "required", "readonly"],
+  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({
+  property: "messageSlot",
+  filter: elements("[flag]")
+})}></slot></template>`;
+
+const definition$i = Field.compose({
+  name: `${FluentDesignSystem.prefix}-field`,
+  template: template$i,
+  styles: styles$h,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+
+definition$i.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;
+  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);
+  return result;
+};
+class Image extends FASTElement {}
+__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>`;
 
@@ -5934,12 +6071,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 {
@@ -5949,19 +6086,19 @@ 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);
 
 const styles$f = css`
-  ${display("flex")}
+  ${display("inline-flex")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};color:${colorNeutralForeground1}}.asterisk{color:${colorPaletteRedForeground1};margin-left:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400};font-weight:${fontWeightSemibold}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
+  :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']),:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
 
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
@@ -5990,7 +6127,7 @@ const template$f = buttonTemplate$1({
 const definition$f = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
   template: template$f,
-  styles: styles$n
+  styles: styles$o
 });
 
 definition$f.define(FluentDesignSystem.registry);
@@ -6821,1124 +6958,1560 @@ const O = {
       x: 0,
       y: 0
     };
-    if ((i || !i && "fixed" !== o) && (("body" !== s(n) || g(r)) && (l = T(n)), a(n))) {
-      const t = E(n);
-      c = L(n), f.x = t.x + n.clientLeft, f.y = t.y + n.clientTop;
-    }
-    return {
-      width: e.width * c.x,
-      height: e.height * c.y,
-      x: e.x * c.x - l.scrollLeft * c.x + f.x,
-      y: e.y * c.y - l.scrollTop * c.y + f.y
+    if ((i || !i && "fixed" !== o) && (("body" !== s(n) || g(r)) && (l = T(n)), a(n))) {
+      const t = E(n);
+      c = L(n), f.x = t.x + n.clientLeft, f.y = t.y + n.clientTop;
+    }
+    return {
+      width: e.width * c.x,
+      height: e.height * c.y,
+      x: e.x * c.x - l.scrollLeft * c.x + f.x,
+      y: e.y * c.y - l.scrollTop * c.y + f.y
+    };
+  },
+  isElement: d,
+  getDimensions: function (t) {
+    return a(t) ? c(t) : t.getBoundingClientRect();
+  },
+  getOffsetParent: H,
+  getDocumentElement: R,
+  getScale: L,
+  async getElementRects(t) {
+    let {
+      reference: e,
+      floating: n,
+      strategy: o
+    } = t;
+    const i = this.getOffsetParent || H,
+      r = this.getDimensions;
+    return {
+      reference: V(e, await i(n), o),
+      floating: {
+        x: 0,
+        y: 0,
+        ...(await r(n))
+      }
+    };
+  },
+  getClientRects: t => Array.from(t.getClientRects()),
+  isRTL: t => "rtl" === o(t).direction
+};
+function P(t, e, n, o) {
+  void 0 === o && (o = {});
+  const {
+      ancestorScroll: i = !0,
+      ancestorResize: r = !0,
+      elementResize: l = !0,
+      animationFrame: c = !1
+    } = o,
+    s = i && !c,
+    f = s || r ? [...(d(t) ? D(t) : t.contextElement ? D(t.contextElement) : []), ...D(e)] : [];
+  f.forEach(t => {
+    s && t.addEventListener("scroll", n, {
+      passive: !0
+    }), r && t.addEventListener("resize", n);
+  });
+  let u,
+    a = null;
+  if (l) {
+    let o = !0;
+    a = new ResizeObserver(() => {
+      o || n(), o = !1;
+    }), d(t) && !c && a.observe(t), d(t) || !t.contextElement || c || a.observe(t.contextElement), a.observe(e);
+  }
+  let h = c ? E(t) : null;
+  return c && function e() {
+    const o = E(t);
+    !h || o.x === h.x && o.y === h.y && o.width === h.width && o.height === h.height || n();
+    h = o, u = requestAnimationFrame(e);
+  }(), n(), () => {
+    var t;
+    f.forEach(t => {
+      s && t.removeEventListener("scroll", n), r && t.removeEventListener("resize", n);
+    }), null == (t = a) || t.disconnect(), a = null, c && cancelAnimationFrame(u);
+  };
+}
+const z = (t, n, o) => {
+  const i = new Map(),
+    r = {
+      platform: O,
+      ...o
+    },
+    l = {
+      ...r.platform,
+      _c: i
+    };
+  return i$1(t, n, {
+    ...r,
+    platform: l
+  });
+};
+
+const MenuItemRole = {
+  /**
+   * The menu item has a "menuitem" role
+   */
+  menuitem: "menuitem",
+  /**
+   * The menu item has a "menuitemcheckbox" role
+   */
+  menuitemcheckbox: "menuitemcheckbox",
+  /**
+   * The menu item has a "menuitemradio" role
+   */
+  menuitemradio: "menuitemradio"
+};
+({
+  [MenuItemRole.menuitem]: "menuitem",
+  [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
+  [MenuItemRole.menuitemradio]: "menuitemradio"
+});
+
+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$d(target, key, result);
+  return result;
+};
+class MenuItem extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.role = MenuItemRole.menuitem;
+    this.checked = false;
+    this.focusSubmenuOnLoad = false;
+    /**
+     * @internal
+     */
+    this.handleMenuItemKeyDown = e => {
+      if (e.defaultPrevented) {
+        return false;
+      }
+      switch (e.key) {
+        case keyEnter:
+        case keySpace:
+          this.invoke();
+          return false;
+        case keyArrowRight:
+          this.expanded && this.submenu ? this.submenu.focus() : this.expandAndFocus();
+          return false;
+        case keyEscape:
+          if (this.expanded) {
+            this.closeSubMenu();
+            return false;
+          }
+          break;
+        case keyArrowLeft:
+          if (this.expanded) {
+            this.closeSubMenu();
+            return false;
+          }
+      }
+      return true;
+    };
+    /**
+     * @internal
+     */
+    this.handleMenuItemClick = e => {
+      if (e.defaultPrevented || this.disabled) {
+        return false;
+      }
+      this.invoke();
+      return false;
+    };
+    /**
+     * @internal
+     */
+    this.submenuLoaded = () => {
+      if (!this.focusSubmenuOnLoad) {
+        return;
+      }
+      this.focusSubmenuOnLoad = false;
+      if (this.submenu) {
+        this.submenu.focus();
+        this.setAttribute("tabindex", "-1");
+      }
+    };
+    /**
+     * @internal
+     */
+    this.handleMouseOver = e => {
+      if (this.disabled || !this.hasSubmenu || this.expanded) {
+        return false;
+      }
+      this.expanded = true;
+      return false;
+    };
+    /**
+     * @internal
+     */
+    this.handleMouseOut = e => {
+      if (!this.expanded || this.contains(document.activeElement)) {
+        return false;
+      }
+      this.expanded = false;
+      return false;
+    };
+    /**
+     * @internal
+     */
+    this.closeSubMenu = () => {
+      this.expanded = false;
+      this.focus();
+    };
+    /**
+     * @internal
+     */
+    this.expandAndFocus = () => {
+      if (!this.hasSubmenu) {
+        return;
+      }
+      this.focusSubmenuOnLoad = true;
+      this.expanded = true;
+    };
+    /**
+     * @internal
+     */
+    this.invoke = () => {
+      if (this.disabled) {
+        return;
+      }
+      switch (this.role) {
+        case MenuItemRole.menuitemcheckbox:
+          this.checked = !this.checked;
+          break;
+        case MenuItemRole.menuitem:
+          if (this.hasSubmenu) {
+            this.expandAndFocus();
+            break;
+          }
+          this.$emit("change");
+          break;
+        case MenuItemRole.menuitemradio:
+          if (!this.checked) {
+            this.checked = true;
+          }
+          break;
+      }
+    };
+  }
+  expandedChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      if (next && this.submenu) {
+        this.updateSubmenu();
+      }
+      this.$emit("expanded-change", this, {
+        bubbles: false
+      });
+    }
+  }
+  checkedChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected) {
+      this.$emit("change");
+    }
+  }
+  /**
+   * @internal
+   */
+  get hasSubmenu() {
+    return !!this.submenu;
+  }
+  /**
+   * Sets the submenu and updates its position.
+   *
+   * @internal
+   */
+  slottedSubmenuChanged(prev, next) {
+    if (next.length) {
+      this.submenu = next[0];
+      this.updateSubmenu();
+    }
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    this.cleanup?.();
+    super.disconnectedCallback();
+  }
+  /**
+   * Calculate and apply submenu positioning.
+   *
+   * @public
+   */
+  updateSubmenu() {
+    this.cleanup?.();
+    if (!this.submenu || !this.expanded) {
+      return;
+    }
+    Updates.enqueue(() => {
+      this.cleanup = P(this, this.submenuContainer, async () => {
+        const fallbackPlacements = ["left-start", "right-start"];
+        const {
+          x,
+          y
+        } = await z(this, this.submenuContainer, {
+          middleware: [E$1(), k({
+            apply: ({
+              availableWidth,
+              rects
+            }) => {
+              if (availableWidth < rects.floating.width) {
+                fallbackPlacements.push("bottom-end", "top-end");
+              }
+            }
+          }), b$1({
+            fallbackPlacements
+          })],
+          placement: "right-start",
+          strategy: "fixed"
+        });
+        Object.assign(this.submenuContainer.style, {
+          left: `${x}px`,
+          position: "fixed",
+          top: `${y}px`
+        });
+        this.submenuLoaded();
+      });
+    });
+  }
+}
+__decorateClass$d([attr({
+  mode: "boolean"
+})], MenuItem.prototype, "disabled", 2);
+__decorateClass$d([attr({
+  mode: "boolean"
+})], MenuItem.prototype, "expanded", 2);
+__decorateClass$d([attr], MenuItem.prototype, "role", 2);
+__decorateClass$d([attr({
+  mode: "boolean"
+})], MenuItem.prototype, "checked", 2);
+__decorateClass$d([attr({
+  mode: "boolean"
+})], MenuItem.prototype, "hidden", 2);
+__decorateClass$d([observable], MenuItem.prototype, "slottedSubmenu", 2);
+__decorateClass$d([observable], MenuItem.prototype, "submenu", 2);
+applyMixins(MenuItem, StartEnd);
+
+const styles$e = css`
+  ${display("grid")}
+
+  :host{grid-template-columns:20px 20px auto 20px;align-items:center;grid-gap:4px;height:32px;background:${colorNeutralBackground1};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};padding:0 10px;cursor:pointer;overflow:visible;contain:layout}:host(:hover){background:${colorNeutralBackground1Hover}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}.checkbox,.radio{display:none}.input-container,.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']),:host([checked]) .checkbox,:host([checked]) .radio{display:inline-flex;justify-content:center;align-items:center;color:${colorNeutralForeground2}}.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']){height:32px;font-size:${fontSizeBase500};width:fit-content}.input-container{width:20px}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap;grid-column:4 / span 1;justify-self:flex-end}.expand-collapse-glyph-container{grid-column:4 / span 1;justify-self:flex-end}:host(:hover) .input-container,:host(:hover) .expand-collapse-glyph-container,:host(:hover) .content{color:${colorNeutralForeground2Hover}}:host([icon]:hover) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Hover}}:host(:active){background-color:${colorNeutralBackground1Selected}}:host(:active) .input-container,:host(:active) .expand-collapse-glyph-container,:host(:active) .content{color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host([disabled]){background-color:${colorNeutralBackgroundDisabled}}:host([disabled]) .content,:host([disabled]) .expand-collapse-glyph-container,:host([disabled]) ::slotted([slot='end']),:host([disabled]) ::slotted([slot='start']){color:${colorNeutralForegroundDisabled}}:host([data-indent]){display:grid}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']){display:grid}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1}:host([data-indent='2'][aria-haspopup='menu']) .expand-collapse-glyph-container{grid-column:5 / span 1}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']) .content,:host([data-indent='1'][role='menuitemradio']) .content{grid-column:auto / span 1}:host([icon]) ::slotted([slot='end']),:host([data-indent='1']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}:host([data-indent='2']){display:grid;grid-template-columns:20px 20px auto auto}:host([data-indent='2']) .content{grid-column:3 / span 1}:host([data-indent='2']) .input-container{grid-column:1 / span 1}:host([data-indent='2']) ::slotted([slot='start']){grid-column:2 / span 1}:host([aria-haspopup='menu']){grid-template-columns:20px auto auto 20px}:host([data-indent='2'][aria-haspopup='menu']){grid-template-columns:20px 20px auto auto 20px}:host([aria-haspopup='menu']) ::slotted([slot='end']){grid-column:3 / span 1;justify-self:flex-end}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}`;
+
+const Checkmark16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
+const chevronRight16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
+function menuItemTemplate(options = {}) {
+  return html`<template aria-haspopup="${x => x.hasSubmenu ? "menu" : void 0}" aria-checked="${x => x.role !== MenuItemRole.menuitem ? x.checked : void 0}" aria-disabled="${x => x.disabled}" aria-expanded="${x => x.expanded}" @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}" @click="${(x, c) => x.handleMenuItemClick(c.event)}" @mouseover="${(x, c) => x.handleMouseOver(c.event)}" @mouseout="${(x, c) => x.handleMouseOut(c.event)}">${when(x => x.role === MenuItemRole.menuitemcheckbox, html`<div part="input-container" class="input-container"><span part="checkbox" class="checkbox"><slot name="checkbox-indicator">${staticallyCompose(options.checkboxIndicator)}</slot></span></div>`)} ${when(x => x.role === MenuItemRole.menuitemradio, html`<div part="input-container" class="input-container"><span part="radio" class="radio"><slot name="radio-indicator">${staticallyCompose(options.radioIndicator)}</slot></span></div>`)}</div>${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)} ${when(x => x.hasSubmenu, html`<div part="expand-collapse-glyph-container" class="expand-collapse-glyph-container"><span part="expand-collapse" class="expand-collapse"><slot name="expand-collapse-indicator">${staticallyCompose(options.expandCollapseGlyph)}</slot></span></div>`)}<span ?hidden="${x => !x.expanded}" class="submenu-container" part="submenu-container" ${ref("submenuContainer")}><slot name="submenu" ${slotted({
+    property: "slottedSubmenu",
+    filter: elements("[role='menu']")
+  })}></slot></span></template>`;
+}
+const template$e = menuItemTemplate({
+  checkboxIndicator: Checkmark16Filled,
+  expandCollapseGlyph: chevronRight16Filled,
+  radioIndicator: Checkmark16Filled
+});
+
+const definition$e = MenuItem.compose({
+  name: `${FluentDesignSystem.prefix}-menu-item`,
+  template: template$e,
+  styles: styles$e
+});
+
+definition$e.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;
+  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);
+  return result;
+};
+const _MenuList = class _MenuList extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.expandedItem = null;
+    /**
+     * The index of the focusable element in the items array
+     * defaults to -1
+     */
+    this.focusIndex = -1;
+    /**
+     * @internal
+     */
+    this.isNestedMenu = () => {
+      return this.parentElement !== null && isHTMLElement(this.parentElement) && this.parentElement.getAttribute("role") === "menuitem";
+    };
+    /**
+     * if focus is moving out of the menu, reset to a stable initial state
+     * @internal
+     */
+    this.handleFocusOut = e => {
+      if (!this.contains(e.relatedTarget) && this.menuItems !== void 0) {
+        this.collapseExpandedItem();
+        const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
+        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+        this.menuItems[focusIndex].setAttribute("tabindex", "0");
+        this.focusIndex = focusIndex;
+      }
+    };
+    this.handleItemFocus = e => {
+      const targetItem = e.target;
+      if (this.menuItems !== void 0 && targetItem !== this.menuItems[this.focusIndex]) {
+        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+        this.focusIndex = this.menuItems.indexOf(targetItem);
+        targetItem.setAttribute("tabindex", "0");
+      }
+    };
+    this.handleExpandedChanged = e => {
+      if (e.defaultPrevented || e.target === null || this.menuItems === void 0 || this.menuItems.indexOf(e.target) < 0) {
+        return;
+      }
+      e.preventDefault();
+      const changedItem = e.target;
+      if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
+        this.expandedItem = null;
+        return;
+      }
+      if (changedItem.expanded) {
+        if (this.expandedItem !== null && this.expandedItem !== changedItem) {
+          this.expandedItem.expanded = false;
+        }
+        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+        this.expandedItem = changedItem;
+        this.focusIndex = this.menuItems.indexOf(changedItem);
+        changedItem.setAttribute("tabindex", "0");
+      }
+    };
+    /**
+     * handle change from child element
+     */
+    this.changeHandler = e => {
+      if (this.menuItems === void 0) {
+        return;
+      }
+      const changedMenuItem = e.target;
+      const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+      if (changeItemIndex === -1) {
+        return;
+      }
+      if (changedMenuItem.role === "menuitemradio" && changedMenuItem.checked === true) {
+        for (let i = changeItemIndex - 1; i >= 0; --i) {
+          const item = this.menuItems[i];
+          const role = item.getAttribute("role");
+          if (role === MenuItemRole.menuitemradio) {
+            item.checked = false;
+          }
+          if (role === "separator") {
+            break;
+          }
+        }
+        const maxIndex = this.menuItems.length - 1;
+        for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
+          const item = this.menuItems[i];
+          const role = item.getAttribute("role");
+          if (role === MenuItemRole.menuitemradio) {
+            item.checked = false;
+          }
+          if (role === "separator") {
+            break;
+          }
+        }
+      }
+    };
+    /**
+     * check if the item is a menu item
+     */
+    this.isMenuItemElement = el => {
+      return el instanceof MenuItem || isHTMLElement(el) && el.getAttribute("role") in _MenuList.focusableElementRoles;
     };
-  },
-  isElement: d,
-  getDimensions: function (t) {
-    return a(t) ? c(t) : t.getBoundingClientRect();
-  },
-  getOffsetParent: H,
-  getDocumentElement: R,
-  getScale: L,
-  async getElementRects(t) {
-    let {
-      reference: e,
-      floating: n,
-      strategy: o
-    } = t;
-    const i = this.getOffsetParent || H,
-      r = this.getDimensions;
-    return {
-      reference: V(e, await i(n), o),
-      floating: {
-        x: 0,
-        y: 0,
-        ...(await r(n))
-      }
+    /**
+     * check if the item is focusable
+     */
+    this.isFocusableElement = el => {
+      return this.isMenuItemElement(el);
     };
-  },
-  getClientRects: t => Array.from(t.getClientRects()),
-  isRTL: t => "rtl" === o(t).direction
-};
-function P(t, e, n, o) {
-  void 0 === o && (o = {});
-  const {
-      ancestorScroll: i = !0,
-      ancestorResize: r = !0,
-      elementResize: l = !0,
-      animationFrame: c = !1
-    } = o,
-    s = i && !c,
-    f = s || r ? [...(d(t) ? D(t) : t.contextElement ? D(t.contextElement) : []), ...D(e)] : [];
-  f.forEach(t => {
-    s && t.addEventListener("scroll", n, {
-      passive: !0
-    }), r && t.addEventListener("resize", n);
-  });
-  let u,
-    a = null;
-  if (l) {
-    let o = !0;
-    a = new ResizeObserver(() => {
-      o || n(), o = !1;
-    }), d(t) && !c && a.observe(t), d(t) || !t.contextElement || c || a.observe(t.contextElement), a.observe(e);
   }
-  let h = c ? E(t) : null;
-  return c && function e() {
-    const o = E(t);
-    !h || o.x === h.x && o.y === h.y && o.width === h.width && o.height === h.height || n();
-    h = o, u = requestAnimationFrame(e);
-  }(), n(), () => {
-    var t;
-    f.forEach(t => {
-      s && t.removeEventListener("scroll", n), r && t.removeEventListener("resize", n);
-    }), null == (t = a) || t.disconnect(), a = null, c && cancelAnimationFrame(u);
-  };
-}
-const z = (t, n, o) => {
-  const i = new Map(),
-    r = {
-      platform: O,
-      ...o
-    },
-    l = {
-      ...r.platform,
-      _c: i
-    };
-  return i$1(t, n, {
-    ...r,
-    platform: l
-  });
-};
-
-const MenuItemRole = {
+  itemsChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected && this.menuItems !== void 0) {
+      this.setItems();
+    }
+  }
   /**
-   * The menu item has a "menuitem" role
+   * @internal
    */
-  menuitem: "menuitem",
+  connectedCallback() {
+    super.connectedCallback();
+    Updates.enqueue(() => {
+      this.setItems();
+    });
+    this.addEventListener("change", this.changeHandler);
+  }
   /**
-   * The menu item has a "menuitemcheckbox" role
+   * @internal
    */
-  menuitemcheckbox: "menuitemcheckbox",
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeItemListeners();
+    this.menuItems = void 0;
+    this.removeEventListener("change", this.changeHandler);
+  }
   /**
-   * The menu item has a "menuitemradio" role
+   * Focuses the first item in the menu.
+   *
+   * @public
    */
-  menuitemradio: "menuitemradio"
+  focus() {
+    this.setFocus(0, 1);
+  }
+  /**
+   * Collapses any expanded menu items.
+   *
+   * @public
+   */
+  collapseExpandedItem() {
+    if (this.expandedItem !== null) {
+      this.expandedItem.expanded = false;
+      this.expandedItem = null;
+    }
+  }
+  /**
+   * @internal
+   */
+  handleMenuKeyDown(e) {
+    if (e.defaultPrevented || this.menuItems === void 0) {
+      return;
+    }
+    switch (e.key) {
+      case keyArrowDown:
+        this.setFocus(this.focusIndex + 1, 1);
+        return;
+      case keyArrowUp:
+        this.setFocus(this.focusIndex - 1, -1);
+        return;
+      case keyEnd:
+        this.setFocus(this.menuItems.length - 1, -1);
+        return;
+      case keyHome:
+        this.setFocus(0, 1);
+        return;
+      default:
+        return true;
+    }
+  }
+  removeItemListeners(items = this.items) {
+    items.forEach(item => {
+      item.removeEventListener("focus", this.handleItemFocus);
+      item.removeEventListener("expanded-changed", this.handleExpandedChanged);
+      Observable.getNotifier(item).unsubscribe(this, "hidden");
+    });
+  }
+  static elementIndent(el) {
+    const role = el.getAttribute("role");
+    const startSlot = el.querySelector("[slot=start]");
+    if (role && role !== MenuItemRole.menuitem) {
+      return startSlot ? 2 : 1;
+    }
+    return startSlot ? 1 : 0;
+  }
+  setItems() {
+    const children = Array.from(this.children);
+    this.removeItemListeners(children);
+    children.forEach(child => Observable.getNotifier(child).subscribe(this, "hidden"));
+    const newItems = children.filter(child => !child.hasAttribute("hidden"));
+    this.menuItems = newItems;
+    const menuItems = this.menuItems.filter(this.isMenuItemElement);
+    if (menuItems.length) {
+      this.focusIndex = 0;
+    }
+    menuItems.forEach((item, index) => {
+      item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+      item.addEventListener("expanded-change", this.handleExpandedChanged);
+      item.addEventListener("focus", this.handleItemFocus);
+    });
+    const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
+    filteredMenuListItems?.forEach((item, index) => {
+      const indent = filteredMenuListItems?.reduce((accum, current) => {
+        const elementValue = _MenuList.elementIndent(current);
+        return Math.max(accum, elementValue);
+      }, 0);
+      if (item instanceof MenuItem) {
+        item.setAttribute("data-indent", `${indent}`);
+      }
+    });
+  }
+  handleChange(source, propertyName) {
+    if (propertyName === "hidden") {
+      this.setItems();
+    }
+  }
+  setFocus(focusIndex, adjustment) {
+    if (this.menuItems === void 0) {
+      return;
+    }
+    while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
+      const child = this.menuItems[focusIndex];
+      if (this.isFocusableElement(child)) {
+        if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
+          this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+        }
+        this.focusIndex = focusIndex;
+        child.setAttribute("tabindex", "0");
+        child.focus();
+        break;
+      }
+      focusIndex += adjustment;
+    }
+  }
 };
-({
-  [MenuItemRole.menuitem]: "menuitem",
-  [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
-  [MenuItemRole.menuitemradio]: "menuitemradio"
+_MenuList.focusableElementRoles = MenuItemRole;
+__decorateClass$c([observable], _MenuList.prototype, "items", 2);
+let MenuList = _MenuList;
+
+const styles$d = css`
+  ${display("flex")}
+
+  :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:4px;row-gap:2px}`;
+
+function menuTemplate$1() {
+  return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" role="menu" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot ${slotted("items")}></slot></template>`;
+}
+const template$d = menuTemplate$1();
+
+const definition$d = MenuList.compose({
+  name: `${FluentDesignSystem.prefix}-menu-list`,
+  template: template$d,
+  styles: styles$d
 });
 
-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;
+definition$d.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;
   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$b(target, key, result);
   return result;
 };
-class MenuItem extends FASTElement {
+class Menu extends FASTElement {
   constructor() {
     super(...arguments);
-    this.role = MenuItemRole.menuitem;
-    this.checked = false;
-    this.focusSubmenuOnLoad = false;
-    /**
-     * @internal
-     */
-    this.handleMenuItemKeyDown = e => {
-      if (e.defaultPrevented) {
-        return false;
-      }
-      switch (e.key) {
-        case keyEnter:
-        case keySpace:
-          this.invoke();
-          return false;
-        case keyArrowRight:
-          this.expanded && this.submenu ? this.submenu.focus() : this.expandAndFocus();
-          return false;
-        case keyEscape:
-          if (this.expanded) {
-            this.closeSubMenu();
-            return false;
-          }
-          break;
-        case keyArrowLeft:
-          if (this.expanded) {
-            this.closeSubMenu();
-            return false;
-          }
-      }
-      return true;
-    };
+    this.openOnHover = false;
+    this.openOnContext = false;
+    this.closeOnScroll = false;
+    this.persistOnItemClick = false;
+    this.open = false;
+    this.slottedMenuList = [];
+    this.slottedTriggers = [];
     /**
-     * @internal
+     * Toggles the open state of the menu.
+     * @public
      */
-    this.handleMenuItemClick = e => {
-      if (e.defaultPrevented || this.disabled) {
-        return false;
+    this.toggleMenu = () => {
+      if (this.open) {
+        this.closeMenu();
+      } else {
+        this.openMenu();
       }
-      this.invoke();
-      return false;
     };
     /**
-     * @internal
+     * Closes the menu.
+     * @public
      */
-    this.submenuLoaded = () => {
-      if (!this.focusSubmenuOnLoad) {
-        return;
-      }
-      this.focusSubmenuOnLoad = false;
-      if (this.submenu) {
-        this.submenu.focus();
-        this.setAttribute("tabindex", "-1");
+    this.closeMenu = () => {
+      this.open = false;
+      if (this.closeOnScroll) {
+        document.removeEventListener("scroll", this.closeMenu);
       }
     };
     /**
-     * @internal
+     * Opens the menu.
+     * @public
      */
-    this.handleMouseOver = e => {
-      if (this.disabled || !this.hasSubmenu || this.expanded) {
-        return false;
+    this.openMenu = e => {
+      this.open = true;
+      if (e && this.openOnContext) {
+        e.preventDefault();
       }
-      this.expanded = true;
-      return false;
-    };
-    /**
-     * @internal
-     */
-    this.handleMouseOut = e => {
-      if (!this.expanded || this.contains(document.activeElement)) {
-        return false;
+      if (this.closeOnScroll) {
+        document.addEventListener("scroll", this.closeMenu);
       }
-      this.expanded = false;
-      return false;
     };
     /**
+     * The task to set the positioning of the menu.
      * @internal
      */
-    this.closeSubMenu = () => {
-      this.expanded = false;
-      this.focus();
+    this.setPositioningTask = () => {
+      this.setPositioning();
     };
     /**
-     * @internal
+     * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
+     * is open, focuses on the menu list.
+     *
+     * @param e - the keyboard event
+     * @public
      */
-    this.expandAndFocus = () => {
-      if (!this.hasSubmenu) {
+    this.handleTriggerKeydown = e => {
+      if (e.defaultPrevented) {
         return;
       }
-      this.focusSubmenuOnLoad = true;
-      this.expanded = true;
+      const key = e.key;
+      switch (key) {
+        case keySpace:
+        case keyEnter:
+          e.preventDefault();
+          this.toggleMenu();
+          if (this.open) {
+            this.focusMenuList();
+          }
+          break;
+        default:
+          return true;
+      }
     };
     /**
+     * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
      * @internal
+     * @param e - The event triggered on document click.
      */
-    this.invoke = () => {
-      if (this.disabled) {
-        return;
-      }
-      switch (this.role) {
-        case MenuItemRole.menuitemcheckbox:
-          this.checked = !this.checked;
-          break;
-        case MenuItemRole.menuitem:
-          if (this.hasSubmenu) {
-            this.expandAndFocus();
-            break;
-          }
-          this.$emit("change");
-          break;
-        case MenuItemRole.menuitemradio:
-          if (!this.checked) {
-            this.checked = true;
-          }
-          break;
+    this.handleDocumentClick = e => {
+      if (e && !e.composedPath().includes(this._menuList) && !e.composedPath().includes(this._trigger)) {
+        this.closeMenu();
       }
     };
   }
-  expandedChanged(prev, next) {
-    if (this.$fastController.isConnected) {
-      if (next && this.submenu) {
-        this.updateSubmenu();
-      }
-      this.$emit("expanded-change", this, {
-        bubbles: false
+  /**
+   * Called when the element is connected to the DOM.
+   * Sets up the component.
+   * @public
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    Updates.enqueue(() => this.setComponent());
+  }
+  /**
+   * Called when the element is disconnected from the DOM.
+   * Removes event listeners.
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanup?.();
+    this.removeListeners();
+  }
+  /**
+   * Sets the component.
+   * Sets the trigger and menu list elements and adds event listeners.
+   * @public
+   */
+  setComponent() {
+    if (this.$fastController.isConnected && this.slottedMenuList.length && this.slottedTriggers.length) {
+      this._trigger = this.slottedTriggers[0];
+      this._menuList = this.slottedMenuList[0];
+      this._trigger.setAttribute("aria-haspopup", "true");
+      this._trigger.setAttribute("aria-expanded", `${this.open}`);
+      this.addListeners();
+    }
+  }
+  /**
+   * Focuses on the menu list.
+   * @public
+   */
+  focusMenuList() {
+    if (this.open && this._menuList) {
+      Updates.enqueue(() => {
+        this._menuList.focus();
       });
     }
   }
-  checkedChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected) {
-      this.$emit("change");
+  /**
+   * Focuses on the menu trigger.
+   * @public
+   */
+  focusTrigger() {
+    if (!this.open && this._trigger) {
+      Updates.enqueue(() => {
+        this._trigger.focus();
+      });
     }
   }
   /**
-   * @internal
+   * Called whenever the open state changes.
+   * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
+   * Sets menu list position
+   * emits openChanged event
+   *
+   * @param oldValue - The previous value of 'open'.
+   * @param newValue - The new value of 'open'.
+   * @public
    */
-  get hasSubmenu() {
-    return !!this.submenu;
+  openChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected && this._trigger instanceof HTMLElement) {
+      this._trigger.setAttribute("aria-expanded", `${this.open}`);
+      if (this._menuList && this.open) {
+        Updates.enqueue(this.setPositioningTask);
+      }
+    }
+    this.cleanup?.();
+    this.$emit("onOpenChange", {
+      open: newValue
+    });
+  }
+  /**
+   * Called whenever the 'openOnHover' property changes.
+   * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
+   *
+   * @param oldValue - The previous value of 'openOnHover'.
+   * @param newValue - The new value of 'openOnHover'.
+   * @public
+   */
+  openOnHoverChanged(oldValue, newValue) {
+    if (newValue) {
+      this._trigger?.addEventListener("mouseover", this.openMenu);
+    } else {
+      this._trigger?.removeEventListener("mouseover", this.openMenu);
+    }
   }
   /**
-   * Sets the submenu and updates its position.
-   *
-   * @internal
+   * Called whenever the 'persistOnItemClick' property changes.
+   * Adds or removes a 'click' event listener to the menu list based on the new value.
+   * @public
+   * @param oldValue - The previous value of 'persistOnItemClick'.
+   * @param newValue - The new value of 'persistOnItemClick'.
    */
-  slottedSubmenuChanged(prev, next) {
-    if (next.length) {
-      this.submenu = next[0];
-      this.updateSubmenu();
+  persistOnItemClickChanged(oldValue, newValue) {
+    if (!newValue) {
+      this._menuList?.addEventListener("click", this.closeMenu);
+    } else {
+      this._menuList?.removeEventListener("click", this.closeMenu);
     }
   }
   /**
-   * @internal
+   * Called whenever the 'openOnContext' property changes.
+   * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
+   * @public
+   * @param oldValue - The previous value of 'openOnContext'.
+   * @param newValue - The new value of 'openOnContext'.
    */
-  disconnectedCallback() {
-    this.cleanup?.();
-    super.disconnectedCallback();
+  openOnContextChanged(oldValue, newValue) {
+    if (newValue) {
+      this._trigger?.addEventListener("contextmenu", this.openMenu);
+    } else {
+      this._trigger?.removeEventListener("contextmenu", this.openMenu);
+    }
   }
   /**
-   * Calculate and apply submenu positioning.
-   *
+   * Called whenever the 'closeOnScroll' property changes.
+   * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
    * @public
+   * @param oldValue - The previous value of 'closeOnScroll'.
+   * @param newValue - The new value of 'closeOnScroll'.
    */
-  updateSubmenu() {
-    this.cleanup?.();
-    if (!this.submenu || !this.expanded) {
-      return;
+  closeOnScrollChanged(oldValue, newValue) {
+    if (newValue) {
+      document.addEventListener("scroll", this.closeMenu);
+    } else {
+      document.removeEventListener("scroll", this.closeMenu);
     }
-    Updates.enqueue(() => {
-      this.cleanup = P(this, this.submenuContainer, async () => {
-        const fallbackPlacements = ["left-start", "right-start"];
+  }
+  /**
+   * Sets the positioning of the menu.
+   * @internal
+   */
+  setPositioning() {
+    if (this.$fastController.isConnected && this._menuList && this.open && this._trigger) {
+      this.cleanup = P(this, this.positioningContainer, async () => {
         const {
+          middlewareData,
           x,
           y
-        } = await z(this, this.submenuContainer, {
-          middleware: [E$1(), k({
+        } = await z(this._trigger, this.positioningContainer, {
+          placement: "bottom",
+          strategy: "fixed",
+          middleware: [b$1(), k({
             apply: ({
-              availableWidth,
+              availableHeight,
               rects
             }) => {
-              if (availableWidth < rects.floating.width) {
-                fallbackPlacements.push("bottom-end", "top-end");
-              }
+              this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
+                maxHeight: `${availableHeight}px`,
+                width: `${rects.reference.width}px`
+              });
             }
-          }), b$1({
-            fallbackPlacements
-          })],
-          placement: "right-start",
-          strategy: "fixed"
-        });
-        Object.assign(this.submenuContainer.style, {
-          left: `${x}px`,
-          position: "fixed",
-          top: `${y}px`
+          }), P$1()]
         });
-        this.submenuLoaded();
-      });
-    });
-  }
-}
-__decorateClass$e([attr({
-  mode: "boolean"
-})], MenuItem.prototype, "disabled", 2);
-__decorateClass$e([attr({
-  mode: "boolean"
-})], MenuItem.prototype, "expanded", 2);
-__decorateClass$e([attr], MenuItem.prototype, "role", 2);
-__decorateClass$e([attr({
-  mode: "boolean"
-})], MenuItem.prototype, "checked", 2);
-__decorateClass$e([attr({
-  mode: "boolean"
-})], MenuItem.prototype, "hidden", 2);
-__decorateClass$e([observable], MenuItem.prototype, "slottedSubmenu", 2);
-__decorateClass$e([observable], MenuItem.prototype, "submenu", 2);
-applyMixins(MenuItem, StartEnd);
-
-const styles$e = css`
-  ${display("grid")}
-
-  :host{grid-template-columns:20px 20px auto 20px;align-items:center;grid-gap:4px;height:32px;background:${colorNeutralBackground1};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};padding:0 10px;cursor:pointer;overflow:visible;contain:layout}:host(:hover){background:${colorNeutralBackground1Hover}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}.checkbox,.radio{display:none}.input-container,.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']),:host([checked]) .checkbox,:host([checked]) .radio{display:inline-flex;justify-content:center;align-items:center;color:${colorNeutralForeground2}}.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']){height:32px;font-size:${fontSizeBase500};width:fit-content}.input-container{width:20px}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap;grid-column:4 / span 1;justify-self:flex-end}.expand-collapse-glyph-container{grid-column:4 / span 1;justify-self:flex-end}:host(:hover) .input-container,:host(:hover) .expand-collapse-glyph-container,:host(:hover) .content{color:${colorNeutralForeground2Hover}}:host([icon]:hover) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Hover}}:host(:active){background-color:${colorNeutralBackground1Selected}}:host(:active) .input-container,:host(:active) .expand-collapse-glyph-container,:host(:active) .content{color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host([disabled]){background-color:${colorNeutralBackgroundDisabled}}:host([disabled]) .content,:host([disabled]) .expand-collapse-glyph-container,:host([disabled]) ::slotted([slot='end']),:host([disabled]) ::slotted([slot='start']){color:${colorNeutralForegroundDisabled}}:host([data-indent]){display:grid}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']){display:grid}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1}:host([data-indent='2'][aria-haspopup='menu']) .expand-collapse-glyph-container{grid-column:5 / span 1}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']) .content,:host([data-indent='1'][role='menuitemradio']) .content{grid-column:auto / span 1}:host([icon]) ::slotted([slot='end']),:host([data-indent='1']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}:host([data-indent='2']){display:grid;grid-template-columns:20px 20px auto auto}:host([data-indent='2']) .content{grid-column:3 / span 1}:host([data-indent='2']) .input-container{grid-column:1 / span 1}:host([data-indent='2']) ::slotted([slot='start']){grid-column:2 / span 1}:host([aria-haspopup='menu']){grid-template-columns:20px auto auto 20px}:host([data-indent='2'][aria-haspopup='menu']){grid-template-columns:20px 20px auto auto 20px}:host([aria-haspopup='menu']) ::slotted([slot='end']){grid-column:3 / span 1;justify-self:flex-end}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}`;
-
-const Checkmark16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
-const chevronRight16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
-function menuItemTemplate(options = {}) {
-  return html`<template aria-haspopup="${x => x.hasSubmenu ? "menu" : void 0}" aria-checked="${x => x.role !== MenuItemRole.menuitem ? x.checked : void 0}" aria-disabled="${x => x.disabled}" aria-expanded="${x => x.expanded}" @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}" @click="${(x, c) => x.handleMenuItemClick(c.event)}" @mouseover="${(x, c) => x.handleMouseOver(c.event)}" @mouseout="${(x, c) => x.handleMouseOut(c.event)}">${when(x => x.role === MenuItemRole.menuitemcheckbox, html`<div part="input-container" class="input-container"><span part="checkbox" class="checkbox"><slot name="checkbox-indicator">${staticallyCompose(options.checkboxIndicator)}</slot></span></div>`)} ${when(x => x.role === MenuItemRole.menuitemradio, html`<div part="input-container" class="input-container"><span part="radio" class="radio"><slot name="radio-indicator">${staticallyCompose(options.radioIndicator)}</slot></span></div>`)}</div>${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)} ${when(x => x.hasSubmenu, html`<div part="expand-collapse-glyph-container" class="expand-collapse-glyph-container"><span part="expand-collapse" class="expand-collapse"><slot name="expand-collapse-indicator">${staticallyCompose(options.expandCollapseGlyph)}</slot></span></div>`)}<span ?hidden="${x => !x.expanded}" class="submenu-container" part="submenu-container" ${ref("submenuContainer")}><slot name="submenu" ${slotted({
-    property: "slottedSubmenu",
-    filter: elements("[role='menu']")
-  })}></slot></span></template>`;
-}
-const template$e = menuItemTemplate({
-  checkboxIndicator: Checkmark16Filled,
-  expandCollapseGlyph: chevronRight16Filled,
-  radioIndicator: Checkmark16Filled
-});
-
-const definition$e = MenuItem.compose({
-  name: `${FluentDesignSystem.prefix}-menu-item`,
-  template: template$e,
-  styles: styles$e
-});
-
-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;
-  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);
-  return result;
-};
-const _MenuList = class _MenuList extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.expandedItem = null;
-    /**
-     * The index of the focusable element in the items array
-     * defaults to -1
-     */
-    this.focusIndex = -1;
-    /**
-     * @internal
-     */
-    this.isNestedMenu = () => {
-      return this.parentElement !== null && isHTMLElement(this.parentElement) && this.parentElement.getAttribute("role") === "menuitem";
-    };
-    /**
-     * if focus is moving out of the menu, reset to a stable initial state
-     * @internal
-     */
-    this.handleFocusOut = e => {
-      if (!this.contains(e.relatedTarget) && this.menuItems !== void 0) {
-        this.collapseExpandedItem();
-        const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
-        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        this.menuItems[focusIndex].setAttribute("tabindex", "0");
-        this.focusIndex = focusIndex;
-      }
-    };
-    this.handleItemFocus = e => {
-      const targetItem = e.target;
-      if (this.menuItems !== void 0 && targetItem !== this.menuItems[this.focusIndex]) {
-        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        this.focusIndex = this.menuItems.indexOf(targetItem);
-        targetItem.setAttribute("tabindex", "0");
-      }
-    };
-    this.handleExpandedChanged = e => {
-      if (e.defaultPrevented || e.target === null || this.menuItems === void 0 || this.menuItems.indexOf(e.target) < 0) {
-        return;
-      }
-      e.preventDefault();
-      const changedItem = e.target;
-      if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
-        this.expandedItem = null;
-        return;
-      }
-      if (changedItem.expanded) {
-        if (this.expandedItem !== null && this.expandedItem !== changedItem) {
-          this.expandedItem.expanded = false;
-        }
-        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        this.expandedItem = changedItem;
-        this.focusIndex = this.menuItems.indexOf(changedItem);
-        changedItem.setAttribute("tabindex", "0");
-      }
-    };
-    /**
-     * handle change from child element
-     */
-    this.changeHandler = e => {
-      if (this.menuItems === void 0) {
-        return;
-      }
-      const changedMenuItem = e.target;
-      const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
-      if (changeItemIndex === -1) {
-        return;
-      }
-      if (changedMenuItem.role === "menuitemradio" && changedMenuItem.checked === true) {
-        for (let i = changeItemIndex - 1; i >= 0; --i) {
-          const item = this.menuItems[i];
-          const role = item.getAttribute("role");
-          if (role === MenuItemRole.menuitemradio) {
-            item.checked = false;
-          }
-          if (role === "separator") {
-            break;
-          }
-        }
-        const maxIndex = this.menuItems.length - 1;
-        for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
-          const item = this.menuItems[i];
-          const role = item.getAttribute("role");
-          if (role === MenuItemRole.menuitemradio) {
-            item.checked = false;
-          }
-          if (role === "separator") {
-            break;
-          }
+        if (middlewareData.hide?.referenceHidden) {
+          this.open = false;
+          return;
         }
-      }
-    };
-    /**
-     * check if the item is a menu item
-     */
-    this.isMenuItemElement = el => {
-      return el instanceof MenuItem || isHTMLElement(el) && el.getAttribute("role") in _MenuList.focusableElementRoles;
-    };
-    /**
-     * check if the item is focusable
-     */
-    this.isFocusableElement = el => {
-      return this.isMenuItemElement(el);
-    };
-  }
-  itemsChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected && this.menuItems !== void 0) {
-      this.setItems();
+        this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
+          position: "fixed",
+          top: "0",
+          left: "0",
+          transform: `translate(${x}px, ${y}px)`
+        });
+      });
     }
   }
   /**
-   * @internal
+   * Adds event listeners.
+   * Adds click and keydown event listeners to the trigger and a click event listener to the document.
+   * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
+   * @public
    */
-  connectedCallback() {
-    super.connectedCallback();
-    Updates.enqueue(() => {
-      this.setItems();
-    });
-    this.addEventListener("change", this.changeHandler);
+  addListeners() {
+    document.addEventListener("click", this.handleDocumentClick);
+    this._trigger?.addEventListener("keydown", this.handleTriggerKeydown);
+    if (!this.persistOnItemClick) {
+      this._menuList?.addEventListener("click", this.closeMenu);
+    }
+    if (this.openOnHover) {
+      this._trigger?.addEventListener("mouseover", this.openMenu);
+    } else if (this.openOnContext) {
+      this._trigger?.addEventListener("contextmenu", this.openMenu);
+    } else {
+      this._trigger?.addEventListener("click", this.toggleMenu);
+    }
   }
   /**
+   * Removes event listeners.
+   * Removes click and keydown event listeners from the trigger and a click event listener from the document.
+   * Also removes 'mouseover' event listeners from the trigger.
    * @internal
    */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeItemListeners();
-    this.menuItems = void 0;
-    this.removeEventListener("change", this.changeHandler);
-  }
-  /**
-   * Focuses the first item in the menu.
-   *
-   * @public
-   */
-  focus() {
-    this.setFocus(0, 1);
+  removeListeners() {
+    document.removeEventListener("click", this.handleDocumentClick);
+    this._trigger?.removeEventListener("keydown", this.handleTriggerKeydown);
+    if (!this.persistOnItemClick) {
+      this._menuList?.removeEventListener("click", this.closeMenu);
+    }
+    if (this.openOnHover) {
+      this._trigger?.removeEventListener("mouseover", this.openMenu);
+    }
+    if (this.openOnContext) {
+      this._trigger?.removeEventListener("contextmenu", this.openMenu);
+    } else {
+      this._trigger?.removeEventListener("click", this.toggleMenu);
+    }
   }
   /**
-   * Collapses any expanded menu items.
+   * Handles keyboard interaction for the menu. Closes the menu and focuses on the trigger when the Escape key is
+   * pressed. Closes the menu when the Tab key is pressed.
    *
+   * @param e - the keyboard event
    * @public
    */
-  collapseExpandedItem() {
-    if (this.expandedItem !== null) {
-      this.expandedItem.expanded = false;
-      this.expandedItem = null;
-    }
-  }
-  /**
-   * @internal
-   */
-  handleMenuKeyDown(e) {
-    if (e.defaultPrevented || this.menuItems === void 0) {
+  handleMenuKeydown(e) {
+    if (e.defaultPrevented) {
       return;
     }
-    switch (e.key) {
-      case keyArrowDown:
-        this.setFocus(this.focusIndex + 1, 1);
-        return;
-      case keyArrowUp:
-        this.setFocus(this.focusIndex - 1, -1);
-        return;
-      case keyEnd:
-        this.setFocus(this.menuItems.length - 1, -1);
-        return;
-      case keyHome:
-        this.setFocus(0, 1);
-        return;
+    const key = e.key;
+    switch (key) {
+      case keyEscape:
+        e.preventDefault();
+        if (this.open) {
+          this.closeMenu();
+          this.focusTrigger();
+        }
+        break;
+      case keyTab:
+        if (this.open) {
+          this.closeMenu();
+        }
+        if (e.shiftKey) {
+          this.focusTrigger();
+        }
       default:
         return true;
     }
   }
-  removeItemListeners(items = this.items) {
-    items.forEach(item => {
-      item.removeEventListener("focus", this.handleItemFocus);
-      item.removeEventListener("expanded-changed", this.handleExpandedChanged);
-      Observable.getNotifier(item).unsubscribe(this, "hidden");
-    });
+}
+__decorateClass$b([observable, attr({
+  attribute: "open-on-hover",
+  mode: "boolean"
+})], Menu.prototype, "openOnHover", 2);
+__decorateClass$b([observable, attr({
+  attribute: "open-on-context",
+  mode: "boolean"
+})], Menu.prototype, "openOnContext", 2);
+__decorateClass$b([observable, attr({
+  attribute: "close-on-scroll",
+  mode: "boolean"
+})], Menu.prototype, "closeOnScroll", 2);
+__decorateClass$b([observable, attr({
+  attribute: "persist-on-item-click",
+  mode: "boolean"
+})], Menu.prototype, "persistOnItemClick", 2);
+__decorateClass$b([observable, attr({
+  mode: "boolean"
+})], Menu.prototype, "open", 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)}`;
+
+function menuTemplate() {
+  return html`<template ?open-on-hover="${x => x.openOnHover}" ?open-on-context="${x => x.openOnContext}" ?close-on-scroll="${x => x.closeOnScroll}" ?persist-on-item-click="${x => x.persistOnItemClick}" @keydown="${(x, c) => x.handleMenuKeydown(c.event)}"><slot name="trigger" ${slotted({
+    property: "slottedTriggers",
+    filter: elements()
+  })}></slot><span ${ref("positioningContainer")} part="positioning-container" class="positioning-container" ?hidden="${x => !x.open}"><slot ${slotted({
+    property: "slottedMenuList",
+    filter: elements()
+  })}></slot></span></template>`;
+}
+const template$c = menuTemplate();
+
+const definition$c = Menu.compose({
+  name: `${FluentDesignSystem.prefix}-menu`,
+  template: template$c,
+  styles: styles$c
+});
+
+definition$c.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;
+  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);
+  return result;
+};
+class BaseProgress extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.percentComplete = 0;
   }
-  static elementIndent(el) {
-    const role = el.getAttribute("role");
-    const startSlot = el.querySelector("[slot=start]");
-    if (role && role !== MenuItemRole.menuitem) {
-      return startSlot ? 2 : 1;
-    }
-    return startSlot ? 1 : 0;
+  valueChanged() {
+    this.updatePercentComplete();
   }
-  setItems() {
-    const children = Array.from(this.children);
-    this.removeItemListeners(children);
-    children.forEach(child => Observable.getNotifier(child).subscribe(this, "hidden"));
-    const newItems = children.filter(child => !child.hasAttribute("hidden"));
-    this.menuItems = newItems;
-    const menuItems = this.menuItems.filter(this.isMenuItemElement);
-    if (menuItems.length) {
-      this.focusIndex = 0;
+  minChanged() {
+    if (this.$fastController.isConnected) {
+      this.updatePercentComplete();
     }
-    menuItems.forEach((item, index) => {
-      item.setAttribute("tabindex", index === 0 ? "0" : "-1");
-      item.addEventListener("expanded-change", this.handleExpandedChanged);
-      item.addEventListener("focus", this.handleItemFocus);
-    });
-    const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
-    filteredMenuListItems?.forEach((item, index) => {
-      const indent = filteredMenuListItems?.reduce((accum, current) => {
-        const elementValue = _MenuList.elementIndent(current);
-        return Math.max(accum, elementValue);
-      }, 0);
-      if (item instanceof MenuItem) {
-        item.setAttribute("data-indent", `${indent}`);
-      }
-    });
   }
-  handleChange(source, propertyName) {
-    if (propertyName === "hidden") {
-      this.setItems();
+  maxChanged() {
+    if (this.$fastController.isConnected) {
+      this.updatePercentComplete();
     }
   }
-  setFocus(focusIndex, adjustment) {
-    if (this.menuItems === void 0) {
-      return;
-    }
-    while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
-      const child = this.menuItems[focusIndex];
-      if (this.isFocusableElement(child)) {
-        if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
-          this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        }
-        this.focusIndex = focusIndex;
-        child.setAttribute("tabindex", "0");
-        child.focus();
-        break;
-      }
-      focusIndex += adjustment;
-    }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.updatePercentComplete();
+  }
+  updatePercentComplete() {
+    const min = typeof this.min === "number" ? this.min : 0;
+    const max = typeof this.max === "number" ? this.max : 100;
+    const value = typeof this.value === "number" ? this.value : 0;
+    const range = max - min;
+    this.percentComplete = range === 0 ? 0 : Math.fround((value - min) / range * 100);
   }
+}
+__decorateClass$a([attr({
+  converter: nullableNumberConverter
+})], BaseProgress.prototype, "value", 2);
+__decorateClass$a([attr({
+  converter: nullableNumberConverter
+})], BaseProgress.prototype, "min", 2);
+__decorateClass$a([attr({
+  converter: nullableNumberConverter
+})], BaseProgress.prototype, "max", 2);
+__decorateClass$a([observable], BaseProgress.prototype, "percentComplete", 2);
+
+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;
 };
-_MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$d([observable], _MenuList.prototype, "items", 2);
-let MenuList = _MenuList;
+class ProgressBar extends BaseProgress {
+  constructor() {
+    super(...arguments);
+    this.validationState = null;
+  }
+}
+__decorateClass$9([attr], ProgressBar.prototype, "thickness", 2);
+__decorateClass$9([attr], ProgressBar.prototype, "shape", 2);
+__decorateClass$9([attr({
+  attribute: "validation-state"
+})], ProgressBar.prototype, "validationState", 2);
 
-const styles$d = css`
+const styles$b = css`
   ${display("flex")}
 
-  :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:4px;row-gap:2px}`;
+  :host{align-items:center;height:2px;overflow-x:hidden;border-radius:${borderRadiusMedium};contain:content}:host([thickness='large']),:host([thickness='large']) .progress,:host([thickness='large']) .determinate{height:4px}:host([shape='square']),:host([shape='square']) .progress,:host([shape='square']) .determinate{border-radius:0}:host([validation-state='error']) .determinate{background-color:${colorPaletteRedBackground3}}:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background:linear-gradient(
+      to right,${colorPaletteRedBackground2} 0%,${colorPaletteRedBackground3} 50%,${colorPaletteRedBackground2}
+    )}:host([validation-state='warning']) .determinate{background-color:${colorPaletteDarkOrangeBackground3}}:host([validation-state='warning']) .indeterminate-indicator-1,:host([validation-state='warning']) .indeterminate-indicator-2{background:linear-gradient(
+      to right,${colorPaletteDarkOrangeBackground2} 0%,${colorPaletteDarkOrangeBackground3} 50%,${colorPaletteDarkOrangeBackground2}
+    )}:host([validation-state='success']) .determinate{background-color:${colorPaletteGreenBackground3}}:host([validation-state='success']) .indeterminate-indicator-1,:host([validation-state='success']) .indeterminate-indicator-2{background:linear-gradient(
+      to right,${colorPaletteGreenBackground2} 0%,${colorPaletteGreenBackground3} 50%,${colorPaletteGreenBackground2}
+    )}.progress{background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};width:100%;height:2px;display:flex;align-items:center;position:relative}.determinate{background-color:${colorCompoundBrandBackground};border-radius:${borderRadiusMedium};height:2px;transition:all 0.2s ease-in-out;display:flex}.indeterminate-indicator-1{position:absolute;opacity:0;height:100%;background:linear-gradient(
+      to right,${colorBrandBackground2} 0%,${colorCompoundBrandBackground} 50%,${colorBrandBackground2}
+    );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:40%;animation:indeterminate-1 3s infinite}.indeterminate-indicator-2{position:absolute;opacity:0;height:100%;background:linear-gradient(
+      to right,${colorBrandBackground2} 0%,${colorCompoundBrandBackground} 50%,${colorBrandBackground2}
+    );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:60%;animation:indeterminate-2 3s infinite}@keyframes indeterminate-1{0%{opacity:1;transform:translateX(-100%)}70%{opacity:1;transform:translateX(300%)}70.01%{opacity:0}100%{opacity:0;transform:translateX(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translateX(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translateX(-150%)}100%{transform:translateX(166.66%);opacity:1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .progress{background-color:HighlightText}.determinate,:host([validation-state='success']) .determinate,:host([validation-state='warning']) .determinate,:host([validation-state='error']) .determinate,:host([validation-state='success']) ..indeterminate-indicator-1,:host([validation-state='success']) ..indeterminate-indicator-2,:host([validation-state='warning']) .indeterminate-indicator-1,:host([validation-state='warning']) .indeterminate-indicator-2,:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background-color:Highlight}`));
 
-function menuTemplate$1() {
-  return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" role="menu" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot ${slotted("items")}></slot></template>`;
+function progressTemplate(options = {}) {
+  return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<div class="progress" part="progress" slot="determinate"><div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div></div>`, html`<div class="progress" part="progress" slot="indeterminate"><slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator1)} ${staticallyCompose(options.indeterminateIndicator2)}</slot></div>`)}</template>`;
 }
-const template$d = menuTemplate$1();
+const template$b = progressTemplate({
+  indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
+  indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`
+});
 
-const definition$d = MenuList.compose({
-  name: `${FluentDesignSystem.prefix}-menu-list`,
-  template: template$d,
-  styles: styles$d
+const definition$b = ProgressBar.compose({
+  name: `${FluentDesignSystem.prefix}-progress-bar`,
+  template: template$b,
+  styles: styles$b
 });
 
-definition$d.define(FluentDesignSystem.registry);
+definition$b.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;
-  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);
-  return result;
-};
-class Menu extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.openOnHover = false;
-    this.openOnContext = false;
-    this.closeOnScroll = false;
-    this.persistOnItemClick = false;
-    this.open = false;
-    this.slottedMenuList = [];
-    this.slottedTriggers = [];
+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);
+      }
+    }
     /**
-     * Toggles the open state of the menu.
-     * @public
+     * Must evaluate to true to enable elementInternals.
+     * Feature detects API support and resolve respectively
+     *
+     * @internal
      */
-    this.toggleMenu = () => {
-      if (this.open) {
-        this.closeMenu();
+    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.
+     * Returns null if not associated to any form.
+     *
+     * @beta
+     */
+    get form() {
+      return this.elementInternals ? this.elementInternals.form : this.proxy.form;
+    }
+    /**
+     * Retrieve the localized validation message,
+     * or custom validation message if set.
+     *
+     * @beta
+     */
+    get validationMessage() {
+      return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
+    }
+    /**
+     * Whether the element will be validated when the
+     * form is submitted
+     */
+    get willValidate() {
+      return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
+    }
+    /**
+     * A reference to all associated label elements
+     */
+    get labels() {
+      if (this.elementInternals) {
+        return Object.freeze(Array.from(this.elementInternals.labels));
+      } else if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {
+        const parentLabels = this.proxy.labels;
+        const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
+        const labels = parentLabels ? forLabels.concat(Array.from(parentLabels)) : forLabels;
+        return Object.freeze(labels);
       } else {
-        this.openMenu();
+        return emptyArray;
       }
-    };
+    }
     /**
-     * Closes the menu.
-     * @public
+     * Invoked when the `value` property changes
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `valueChanged` method
+     * They must be sure to invoke `super.valueChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
      */
-    this.closeMenu = () => {
-      this.open = false;
-      if (this.closeOnScroll) {
-        document.removeEventListener("scroll", this.closeMenu);
+    valueChanged(previous, next) {
+      this.dirtyValue = true;
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.value = this.value;
       }
-    };
+      this.currentValue = this.value;
+      this.setFormValue(this.value);
+      this.validate();
+    }
+    currentValueChanged() {
+      this.value = this.currentValue;
+    }
     /**
-     * Opens the menu.
-     * @public
+     * Invoked when the `initialValue` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `initialValueChanged` method
+     * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
      */
-    this.openMenu = e => {
-      this.open = true;
-      if (e && this.openOnContext) {
-        e.preventDefault();
+    initialValueChanged(previous, next) {
+      if (!this.dirtyValue) {
+        this.value = this.initialValue;
+        this.dirtyValue = false;
+      }
+    }
+    /**
+     * Invoked when the `disabled` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `disabledChanged` method
+     * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    disabledChanged(previous, next) {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.disabled = this.disabled;
+      }
+      Updates.enqueue(() => this.classList.toggle("disabled", this.disabled));
+    }
+    /**
+     * Invoked when the `name` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `nameChanged` method
+     * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    nameChanged(previous, next) {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.name = this.name;
+      }
+    }
+    /**
+     * Invoked when the `required` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `requiredChanged` method
+     * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    requiredChanged(prev, next) {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.required = this.required;
+      }
+      Updates.enqueue(() => this.classList.toggle("required", this.required));
+      this.validate();
+    }
+    /**
+     * The element internals object. Will only exist
+     * in browsers supporting the attachInternals API
+     */
+    get elementInternals() {
+      if (!supportsElementInternals) {
+        return null;
       }
-      if (this.closeOnScroll) {
-        document.addEventListener("scroll", this.closeMenu);
+      let internals = InternalsMap.get(this);
+      if (!internals) {
+        internals = this.attachInternals();
+        InternalsMap.set(this, internals);
       }
-    };
+      return internals;
+    }
     /**
-     * The task to set the positioning of the menu.
      * @internal
      */
-    this.setPositioningTask = () => {
-      this.setPositioning();
-    };
-    /**
-     * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
-     * is open, focuses on the menu list.
-     *
-     * @param e - the keyboard event
-     * @public
-     */
-    this.handleTriggerKeydown = e => {
-      if (e.defaultPrevented) {
-        return;
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("keypress", this._keypressHandler);
+      if (!this.value) {
+        this.value = this.initialValue;
+        this.dirtyValue = false;
       }
-      const key = e.key;
-      switch (key) {
-        case keySpace:
-        case keyEnter:
-          e.preventDefault();
-          this.toggleMenu();
-          if (this.open) {
-            this.focusMenuList();
-          }
-          break;
-        default:
-          return true;
+      if (!this.elementInternals) {
+        this.attachProxy();
+        if (this.form) {
+          this.form.addEventListener("reset", this.formResetCallback);
+        }
       }
-    };
+    }
     /**
-     * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
      * @internal
-     * @param e - The event triggered on document click.
      */
-    this.handleDocumentClick = e => {
-      if (e && !e.composedPath().includes(this._menuList) && !e.composedPath().includes(this._trigger)) {
-        this.closeMenu();
-      }
-    };
-  }
-  /**
-   * Called when the element is connected to the DOM.
-   * Sets up the component.
-   * @public
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    Updates.enqueue(() => this.setComponent());
-  }
-  /**
-   * Called when the element is disconnected from the DOM.
-   * Removes event listeners.
-   * @public
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.cleanup?.();
-    this.removeListeners();
-  }
-  /**
-   * Sets the component.
-   * Sets the trigger and menu list elements and adds event listeners.
-   * @public
-   */
-  setComponent() {
-    if (this.$fastController.isConnected && this.slottedMenuList.length && this.slottedTriggers.length) {
-      this._trigger = this.slottedTriggers[0];
-      this._menuList = this.slottedMenuList[0];
-      this._trigger.setAttribute("aria-haspopup", "true");
-      this._trigger.setAttribute("aria-expanded", `${this.open}`);
-      this.addListeners();
-    }
-  }
-  /**
-   * Focuses on the menu list.
-   * @public
-   */
-  focusMenuList() {
-    if (this.open && this._menuList) {
-      Updates.enqueue(() => {
-        this._menuList.focus();
-      });
-    }
-  }
-  /**
-   * Focuses on the menu trigger.
-   * @public
-   */
-  focusTrigger() {
-    if (!this.open && this._trigger) {
-      Updates.enqueue(() => {
-        this._trigger.focus();
-      });
-    }
-  }
-  /**
-   * Called whenever the open state changes.
-   * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
-   * Sets menu list position
-   * emits openChanged event
-   *
-   * @param oldValue - The previous value of 'open'.
-   * @param newValue - The new value of 'open'.
-   * @public
-   */
-  openChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected && this._trigger instanceof HTMLElement) {
-      this._trigger.setAttribute("aria-expanded", `${this.open}`);
-      if (this._menuList && this.open) {
-        Updates.enqueue(this.setPositioningTask);
+    disconnectedCallback() {
+      this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
+      if (!this.elementInternals && this.form) {
+        this.form.removeEventListener("reset", this.formResetCallback);
       }
     }
-    this.cleanup?.();
-    this.$emit("onOpenChange", {
-      open: newValue
-    });
-  }
-  /**
-   * Called whenever the 'openOnHover' property changes.
-   * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
-   *
-   * @param oldValue - The previous value of 'openOnHover'.
-   * @param newValue - The new value of 'openOnHover'.
-   * @public
-   */
-  openOnHoverChanged(oldValue, newValue) {
-    if (newValue) {
-      this._trigger?.addEventListener("mouseover", this.openMenu);
-    } else {
-      this._trigger?.removeEventListener("mouseover", this.openMenu);
-    }
-  }
-  /**
-   * Called whenever the 'persistOnItemClick' property changes.
-   * Adds or removes a 'click' event listener to the menu list based on the new value.
-   * @public
-   * @param oldValue - The previous value of 'persistOnItemClick'.
-   * @param newValue - The new value of 'persistOnItemClick'.
-   */
-  persistOnItemClickChanged(oldValue, newValue) {
-    if (!newValue) {
-      this._menuList?.addEventListener("click", this.closeMenu);
-    } else {
-      this._menuList?.removeEventListener("click", this.closeMenu);
-    }
-  }
-  /**
-   * Called whenever the 'openOnContext' property changes.
-   * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
-   * @public
-   * @param oldValue - The previous value of 'openOnContext'.
-   * @param newValue - The new value of 'openOnContext'.
-   */
-  openOnContextChanged(oldValue, newValue) {
-    if (newValue) {
-      this._trigger?.addEventListener("contextmenu", this.openMenu);
-    } else {
-      this._trigger?.removeEventListener("contextmenu", this.openMenu);
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();
     }
-  }
-  /**
-   * Called whenever the 'closeOnScroll' property changes.
-   * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
-   * @public
-   * @param oldValue - The previous value of 'closeOnScroll'.
-   * @param newValue - The new value of 'closeOnScroll'.
-   */
-  closeOnScrollChanged(oldValue, newValue) {
-    if (newValue) {
-      document.addEventListener("scroll", this.closeMenu);
-    } else {
-      document.removeEventListener("scroll", this.closeMenu);
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.elementInternals ? this.elementInternals.reportValidity() : this.proxy.reportValidity();
     }
-  }
-  /**
-   * Sets the positioning of the menu.
-   * @internal
-   */
-  setPositioning() {
-    if (this.$fastController.isConnected && this._menuList && this.open && this._trigger) {
-      this.cleanup = P(this, this.positioningContainer, async () => {
-        const {
-          middlewareData,
-          x,
-          y
-        } = await z(this._trigger, this.positioningContainer, {
-          placement: "bottom",
-          strategy: "fixed",
-          middleware: [b$1(), k({
-            apply: ({
-              availableHeight,
-              rects
-            }) => {
-              this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
-                maxHeight: `${availableHeight}px`,
-                width: `${rects.reference.width}px`
-              });
-            }
-          }), P$1()]
-        });
-        if (middlewareData.hide?.referenceHidden) {
-          this.open = false;
-          return;
-        }
-        this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
-          position: "fixed",
-          top: "0",
-          left: "0",
-          transform: `translate(${x}px, ${y}px)`
-        });
-      });
+    /**
+     * Set the validity of the control. In cases when the elementInternals object is not
+     * available (and the proxy element is used to report validity), this function will
+     * do nothing unless a message is provided, at which point the setCustomValidity method
+     * of the proxy element will be invoked with the provided message.
+     * @param flags - Validity flags
+     * @param message - Optional message to supply
+     * @param anchor - Optional element used by UA to display an interactive validation UI
+     */
+    setValidity(flags, message, anchor) {
+      if (this.elementInternals) {
+        this.elementInternals.setValidity(flags, message, anchor);
+      } else if (typeof message === "string") {
+        this.proxy.setCustomValidity(message);
+      }
     }
-  }
-  /**
-   * Adds event listeners.
-   * Adds click and keydown event listeners to the trigger and a click event listener to the document.
-   * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
-   * @public
-   */
-  addListeners() {
-    document.addEventListener("click", this.handleDocumentClick);
-    this._trigger?.addEventListener("keydown", this.handleTriggerKeydown);
-    if (!this.persistOnItemClick) {
-      this._menuList?.addEventListener("click", this.closeMenu);
+    /**
+     * Invoked when a connected component's form or fieldset has its disabled
+     * state changed.
+     * @param disabled - the disabled value of the form / fieldset
+     */
+    formDisabledCallback(disabled) {
+      this.disabled = disabled;
     }
-    if (this.openOnHover) {
-      this._trigger?.addEventListener("mouseover", this.openMenu);
-    } else if (this.openOnContext) {
-      this._trigger?.addEventListener("contextmenu", this.openMenu);
-    } else {
-      this._trigger?.addEventListener("click", this.toggleMenu);
+    formResetCallback() {
+      this.value = this.initialValue;
+      this.dirtyValue = false;
     }
-  }
-  /**
-   * Removes event listeners.
-   * Removes click and keydown event listeners from the trigger and a click event listener from the document.
-   * Also removes 'mouseover' event listeners from the trigger.
-   * @internal
-   */
-  removeListeners() {
-    document.removeEventListener("click", this.handleDocumentClick);
-    this._trigger?.removeEventListener("keydown", this.handleTriggerKeydown);
-    if (!this.persistOnItemClick) {
-      this._menuList?.removeEventListener("click", this.closeMenu);
+    /**
+     * Attach the proxy element to the DOM
+     */
+    attachProxy() {
+      if (!this.proxyInitialized) {
+        this.proxyInitialized = true;
+        this.proxy.style.display = "none";
+        this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation));
+        this.proxy.disabled = this.disabled;
+        this.proxy.required = this.required;
+        if (typeof this.name === "string") {
+          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);
     }
-    if (this.openOnHover) {
-      this._trigger?.removeEventListener("mouseover", this.openMenu);
+    /**
+     * Detach the proxy element from the DOM
+     */
+    detachProxy() {
+      this.removeChild(this.proxy);
+      this.shadowRoot?.removeChild(this.proxySlot);
     }
-    if (this.openOnContext) {
-      this._trigger?.removeEventListener("contextmenu", this.openMenu);
-    } else {
-      this._trigger?.removeEventListener("click", this.toggleMenu);
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(anchor) {
+      if (this.proxy instanceof HTMLElement) {
+        this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
+      }
     }
-  }
-  /**
-   * Handles keyboard interaction for the menu. Closes the menu and focuses on the trigger when the Escape key is
-   * pressed. Closes the menu when the Tab key is pressed.
-   *
-   * @param e - the keyboard event
-   * @public
-   */
-  handleMenuKeydown(e) {
-    if (e.defaultPrevented) {
-      return;
+    /**
+     * 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);
+      }
     }
-    const key = e.key;
-    switch (key) {
-      case keyEscape:
-        e.preventDefault();
-        if (this.open) {
-          this.closeMenu();
-          this.focusTrigger();
-        }
-        break;
-      case keyTab:
-        if (this.open) {
-          this.closeMenu();
-        }
-        if (e.shiftKey) {
-          this.focusTrigger();
-        }
-      default:
-        return true;
+    _keypressHandler(e) {
+      switch (e.key) {
+        case keyEnter:
+          if (this.form instanceof HTMLFormElement) {
+            const defaultButton = this.form.querySelector("[type=submit]");
+            defaultButton?.click();
+          }
+          break;
+      }
     }
-  }
-}
-__decorateClass$c([observable, attr({
-  attribute: "open-on-hover",
-  mode: "boolean"
-})], Menu.prototype, "openOnHover", 2);
-__decorateClass$c([observable, attr({
-  attribute: "open-on-context",
-  mode: "boolean"
-})], Menu.prototype, "openOnContext", 2);
-__decorateClass$c([observable, attr({
-  attribute: "close-on-scroll",
-  mode: "boolean"
-})], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$c([observable, attr({
-  attribute: "persist-on-item-click",
-  mode: "boolean"
-})], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$c([observable, attr({
-  mode: "boolean"
-})], Menu.prototype, "open", 2);
-__decorateClass$c([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$c([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)}`;
-
-function menuTemplate() {
-  return html`<template ?open-on-hover="${x => x.openOnHover}" ?open-on-context="${x => x.openOnContext}" ?close-on-scroll="${x => x.closeOnScroll}" ?persist-on-item-click="${x => x.persistOnItemClick}" @keydown="${(x, c) => x.handleMenuKeydown(c.event)}"><slot name="trigger" ${slotted({
-    property: "slottedTriggers",
-    filter: elements()
-  })}></slot><span ${ref("positioningContainer")} part="positioning-container" class="positioning-container" ?hidden="${x => !x.open}"><slot ${slotted({
-    property: "slottedMenuList",
-    filter: elements()
-  })}></slot></span></template>`;
+    /**
+     * 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;
 }
-const template$c = menuTemplate();
-
-const definition$c = Menu.compose({
-  name: `${FluentDesignSystem.prefix}-menu`,
-  template: template$c,
-  styles: styles$c
-});
-
-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;
-  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);
-  return result;
-};
-class BaseProgress extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.percentComplete = 0;
-  }
-  valueChanged() {
-    this.updatePercentComplete();
-  }
-  minChanged() {
-    if (this.$fastController.isConnected) {
-      this.updatePercentComplete();
+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();
     }
-  }
-  maxChanged() {
-    if (this.$fastController.isConnected) {
-      this.updatePercentComplete();
+    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;
     }
   }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.updatePercentComplete();
-  }
-  updatePercentComplete() {
-    const min = typeof this.min === "number" ? this.min : 0;
-    const max = typeof this.max === "number" ? this.max : 100;
-    const value = typeof this.value === "number" ? this.value : 0;
-    const range = max - min;
-    this.percentComplete = range === 0 ? 0 : Math.fround((value - min) / range * 100);
-  }
-}
-__decorateClass$b([attr({
-  converter: nullableNumberConverter
-})], BaseProgress.prototype, "value", 2);
-__decorateClass$b([attr({
-  converter: nullableNumberConverter
-})], BaseProgress.prototype, "min", 2);
-__decorateClass$b([attr({
-  converter: nullableNumberConverter
-})], BaseProgress.prototype, "max", 2);
-__decorateClass$b([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;
-  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);
-  return result;
-};
-class ProgressBar extends BaseProgress {
-  constructor() {
-    super(...arguments);
-    this.validationState = null;
-  }
-}
-__decorateClass$a([attr], ProgressBar.prototype, "thickness", 2);
-__decorateClass$a([attr], ProgressBar.prototype, "shape", 2);
-__decorateClass$a([attr({
-  attribute: "validation-state"
-})], ProgressBar.prototype, "validationState", 2);
-
-const styles$b = css`
-  ${display("flex")}
-
-  :host{align-items:center;height:2px;overflow-x:hidden;border-radius:${borderRadiusMedium};contain:content}:host([thickness='large']),:host([thickness='large']) .progress,:host([thickness='large']) .determinate{height:4px}:host([shape='square']),:host([shape='square']) .progress,:host([shape='square']) .determinate{border-radius:0}:host([validation-state='error']) .determinate{background-color:${colorPaletteRedBackground3}}:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background:linear-gradient(
-      to right,${colorPaletteRedBackground2} 0%,${colorPaletteRedBackground3} 50%,${colorPaletteRedBackground2}
-    )}:host([validation-state='warning']) .determinate{background-color:${colorPaletteDarkOrangeBackground3}}:host([validation-state='warning']) .indeterminate-indicator-1,:host([validation-state='warning']) .indeterminate-indicator-2{background:linear-gradient(
-      to right,${colorPaletteDarkOrangeBackground2} 0%,${colorPaletteDarkOrangeBackground3} 50%,${colorPaletteDarkOrangeBackground2}
-    )}:host([validation-state='success']) .determinate{background-color:${colorPaletteGreenBackground3}}:host([validation-state='success']) .indeterminate-indicator-1,:host([validation-state='success']) .indeterminate-indicator-2{background:linear-gradient(
-      to right,${colorPaletteGreenBackground2} 0%,${colorPaletteGreenBackground3} 50%,${colorPaletteGreenBackground2}
-    )}.progress{background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};width:100%;height:2px;display:flex;align-items:center;position:relative}.determinate{background-color:${colorCompoundBrandBackground};border-radius:${borderRadiusMedium};height:2px;transition:all 0.2s ease-in-out;display:flex}.indeterminate-indicator-1{position:absolute;opacity:0;height:100%;background:linear-gradient(
-      to right,${colorBrandBackground2} 0%,${colorCompoundBrandBackground} 50%,${colorBrandBackground2}
-    );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:40%;animation:indeterminate-1 3s infinite}.indeterminate-indicator-2{position:absolute;opacity:0;height:100%;background:linear-gradient(
-      to right,${colorBrandBackground2} 0%,${colorCompoundBrandBackground} 50%,${colorBrandBackground2}
-    );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:60%;animation:indeterminate-2 3s infinite}@keyframes indeterminate-1{0%{opacity:1;transform:translateX(-100%)}70%{opacity:1;transform:translateX(300%)}70.01%{opacity:0}100%{opacity:0;transform:translateX(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translateX(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translateX(-150%)}100%{transform:translateX(166.66%);opacity:1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    .progress{background-color:HighlightText}.determinate,:host([validation-state='success']) .determinate,:host([validation-state='warning']) .determinate,:host([validation-state='error']) .determinate,:host([validation-state='success']) ..indeterminate-indicator-1,:host([validation-state='success']) ..indeterminate-indicator-2,:host([validation-state='warning']) .indeterminate-indicator-1,:host([validation-state='warning']) .indeterminate-indicator-2,:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background-color:Highlight}`));
-
-function progressTemplate(options = {}) {
-  return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<div class="progress" part="progress" slot="determinate"><div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div></div>`, html`<div class="progress" part="progress" slot="indeterminate"><slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator1)} ${staticallyCompose(options.indeterminateIndicator2)}</slot></div>`)}</template>`;
+  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;
 }
-const template$b = progressTemplate({
-  indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
-  indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`
-});
-
-const definition$b = ProgressBar.compose({
-  name: `${FluentDesignSystem.prefix}-progress-bar`,
-  template: template$b,
-  styles: styles$b
-});
-
-definition$b.define(FluentDesignSystem.registry);
 
 class _Radio extends FASTElement {}
 class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
@@ -7948,12 +8521,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 {
@@ -8020,17 +8593,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 {
@@ -8333,22 +8906,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")}
@@ -8416,12 +8989,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 {
@@ -8750,31 +9323,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(
@@ -8797,12 +9370,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 {
@@ -8817,8 +9390,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")}
@@ -8835,84 +9408,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`,
@@ -9465,9 +9975,9 @@ class TextInput extends FASTElement {
    *
    * @internal
    */
-  readonlyChanged() {
+  readOnlyChanged() {
     if (this.$fastController.isConnected) {
-      this.elementInternals.ariaReadOnly = `${!!this.readonly}`;
+      this.elementInternals.ariaReadOnly = `${!!this.readOnly}`;
     }
   }
   /**
@@ -9501,7 +10011,7 @@ class TextInput extends FASTElement {
    * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
    */
   get validationMessage() {
-    return this.elementInternals.validationMessage;
+    return this.elementInternals.validationMessage || this.control.validationMessage;
   }
   /**
    * The current value of the input.
@@ -9540,6 +10050,17 @@ class TextInput extends FASTElement {
   get form() {
     return this.elementInternals.form;
   }
+  /**
+   * Handles the internal control's `keypress` event.
+   *
+   * @internal
+   */
+  beforeinputHandler(e) {
+    if (e.inputType === "insertLineBreak") {
+      this.implicitSubmit();
+    }
+    return true;
+  }
   /**
    * Change event handler for inner control.
    *
@@ -9549,23 +10070,46 @@ class TextInput extends FASTElement {
    * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
    */
   changeHandler(e) {
-    e.preventDefault();
     this.setValidity();
     this.$emit("change", e, {
       bubbles: true,
-      cancelable: false,
-      composed: false
+      composed: true
     });
+    return true;
+  }
+  /**
+   * 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();
+  }
+  /**
+   * Clicks the inner control when the component is clicked.
+   *
+   * @param e - the event object
+   */
+  clickHandler(e) {
+    if (this.isSameNode(e.target)) {
+      this.control?.click();
+    }
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("keypress", this.keypressHandler);
     this.setFormValue(this.value);
     this.setValidity();
   }
-  disconnectedCallback() {
-    this.removeEventListener("keypress", this.keypressHandler);
-    super.disconnectedCallback();
+  /**
+   * Focuses the inner control when the component is focused.
+   *
+   * @param e - the event object
+   * @public
+   */
+  focusinHandler(e) {
+    this.control?.focus();
   }
   /**
    * Resets the value to its initial value when the form is reset.
@@ -9612,12 +10156,13 @@ class TextInput extends FASTElement {
     return true;
   }
   /**
-   * Handles the internal control's `keypress` event.
+   * Handles the internal control's `keydown` event.
    *
+   * @param e - the event object
    * @internal
    */
-  keypressHandler(e) {
-    if (e.key === keyEnter) {
+  keydownHandler(e) {
+    if (e.key === "Enter") {
       this.implicitSubmit();
     }
     return true;
@@ -9635,6 +10180,28 @@ class TextInput extends FASTElement {
     this.control.select();
     this.$emit("select");
   }
+  /**
+   * Sets the custom validity message.
+   * @param message - The message to set
+   *
+   * @public
+   */
+  setCustomValidity(message) {
+    this.elementInternals.setValidity({
+      customError: true
+    }, message);
+    this.reportValidity();
+  }
+  /**
+   * 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();
+  }
   /**
    * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
    *
@@ -9652,12 +10219,14 @@ class TextInput extends FASTElement {
    *
    * @internal
    */
-  setValidity(flags = this.control.validity, message = this.control.validationMessage, anchor = this.control) {
-    if (this.disabled) {
-      this.elementInternals.setValidity({});
-      return;
+  setValidity(flags = this.control.validity, message = this.validationMessage, anchor = this.control) {
+    if (this.$fastController.isConnected) {
+      if (this.disabled) {
+        this.elementInternals.setValidity({});
+        return;
+      }
+      this.elementInternals.setValidity(flags, message, anchor);
     }
-    this.elementInternals.setValidity(flags, message ?? "", anchor);
   }
 }
 /**
@@ -9703,7 +10272,7 @@ __decorateClass$2([attr], TextInput.prototype, "placeholder", 2);
 __decorateClass$2([attr({
   attribute: "readonly",
   mode: "boolean"
-})], TextInput.prototype, "readonly", 2);
+})], TextInput.prototype, "readOnly", 2);
 __decorateClass$2([attr({
   mode: "boolean"
 })], TextInput.prototype, "required", 2);
@@ -9723,20 +10292,23 @@ applyMixins(TextInput, StartEnd);
 const styles$2 = css`
   ${display("block")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{position:relative;box-sizing:border-box;height:32px;display:inline-flex;align-items:center;flex-direction:row;width:100%;padding:0 ${spacingHorizontalMNudge};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};gap:${spacingHorizontalXXS}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;background:transparent;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
 
 function textInputTemplate(options = {}) {
-  return html`<label part="label" for="control" class="label" ${ref("controlLabel")}><slot ${slotted({
+  return html`<template @beforeinput="${(x, c) => x.beforeinputHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><label part="label" for="control" class="label" ${ref("controlLabel")}><slot ${slotted({
     property: "defaultSlottedNodes",
     filter: whitespaceFilter
-  })}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @change="${(x, c) => x.changeHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" ?autofocus="${x => x.autofocus}" autocomplete="${x => x.autocomplete}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" ?multiple="${x => x.multiple}" name="${x => x.name}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readonly}" ?required="${x => x.required}" size="${x => x.size}" spellcheck="${x => x.spellcheck}" type="${x => x.type}" value="${x => x.initialValue}" ${ref("control")} />${endSlotTemplate(options)}</div>`;
+  })}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @change="${(x, c) => x.changeHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" ?autofocus="${x => x.autofocus}" autocomplete="${x => x.autocomplete}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" ?multiple="${x => x.multiple}" name="${x => x.name}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" spellcheck="${x => x.spellcheck}" type="${x => x.type}" value="${x => x.initialValue}" ${ref("control")} />${endSlotTemplate(options)}</div></template>`;
 }
 const template$2 = textInputTemplate();
 
 const definition$2 = TextInput.compose({
   name: `${FluentDesignSystem.prefix}-text-input`,
   template: template$2,
-  styles: styles$2
+  styles: styles$2,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
 
 definition$2.define(FluentDesignSystem.registry);
@@ -9786,7 +10358,7 @@ __decorateClass$1([attr], Text.prototype, "align", 2);
 const styles$1 = css`
   ${display("inline")}
 
-  :host{contain:content}::slotted(*){font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start;white-space:normal;overflow:visible;text-overflow:clip;margin:0;display:inline}:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]),:host([block]) ::slotted(*){display:block}:host([italic]) ::slotted(*){font-style:italic}:host([underline]) ::slotted(*){text-decoration-line:underline}:host([strikethrough]) ::slotted(*){text-decoration-line:line-through}:host([underline][strikethrough]) ::slotted(*){text-decoration-line:line-through underline}:host([size='100']) ::slotted(*){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']) ::slotted(*){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']) ::slotted(*){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']) ::slotted(*){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']) ::slotted(*){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']) ::slotted(*){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']) ::slotted(*){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']) ::slotted(*){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']) ::slotted(*){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']) ::slotted(*){font-family:${fontFamilyMonospace}}:host([font='numeric']) ::slotted(*){font-family:${fontFamilyNumeric}}:host([weight='medium']) ::slotted(*){font-weight:${fontWeightMedium}}:host([weight='semibold']) ::slotted(*){font-weight:${fontWeightSemibold}}:host([weight='bold']) ::slotted(*){font-weight:${fontWeightBold}}:host([align='center']) ::slotted(*){text-align:center}:host([align='end']) ::slotted(*){text-align:end}:host([align='justify']) ::slotted(*){text-align:justify}`;
+  :host{contain:content}::slotted(*){font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start;white-space:normal;overflow:visible;text-overflow:clip;margin:0;display:inline}:host([nowrap]) ::slotted(*),:host([nowrap]){white-space:nowrap;overflow:hidden}:host([truncate]) ::slotted(*),:host([truncate]){text-overflow:ellipsis}:host([block]),:host([block]) ::slotted(*),:host([block]){display:block}:host([italic]) ::slotted(*),:host([italic]){font-style:italic}:host([underline]) ::slotted(*),:host([underline]){text-decoration-line:underline}:host([strikethrough]) ::slotted(*),:host([strikethrough]){text-decoration-line:line-through}:host([underline][strikethrough]) ::slotted(*),:host([underline][strikethrough]){text-decoration-line:line-through underline}:host([size='100']) ::slotted(*),:host([size='100']){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']) ::slotted(*),:host([size='200']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']) ::slotted(*),:host([size='400']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']) ::slotted(*),:host([size='500']){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']) ::slotted(*),:host([size='600']){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']) ::slotted(*),:host([size='700']){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']) ::slotted(*),:host([size='800']){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']) ::slotted(*),:host([size='900']){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']) ::slotted(*),:host([size='1000']){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']) ::slotted(*),:host([font='monospace']){font-family:${fontFamilyMonospace}}:host([font='numeric']) ::slotted(*),:host([font='numeric']){font-family:${fontFamilyNumeric}}:host([weight='medium']) ::slotted(*),:host([weight='medium']){font-weight:${fontWeightMedium}}:host([weight='semibold']) ::slotted(*),:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([weight='bold']) ::slotted(*),:host([weight='bold']){font-weight:${fontWeightBold}}:host([align='center']) ::slotted(*),:host([align='center']){text-align:center}:host([align='end']) ::slotted(*),:host([align='end']){text-align:end}:host([align='justify']) ::slotted(*),:host([align='justify']){text-align:justify}`;
 
 const template$1 = html`<slot></slot>`;
 
@@ -9858,7 +10430,7 @@ __decorateClass([attr({
 })], ToggleButton.prototype, "mixed", 2);
 
 const styles = css`
-  ${styles$n}
+  ${styles$o}
 
   :host([aria-pressed='true']){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host([aria-pressed='true']:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host([aria-pressed='true']:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host([aria-pressed='true'][appearance='primary']){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host([aria-pressed='true'][appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([aria-pressed='true'][appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host([aria-pressed='true'][appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([aria-pressed='true'][appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host([aria-pressed='true'][appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host([aria-pressed='true'][appearance='outline']:hover),:host([aria-pressed='true'][appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host([aria-pressed='true'][appearance='outline']:active),:host([aria-pressed='true'][appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host([aria-pressed='true'][appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host([aria-pressed='true'][appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host([aria-pressed='true'][appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([aria-pressed='true']),:host([aria-pressed='true'][appearance='primary']),:host([aria-pressed='true'][appearance='subtle']),:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background:SelectedItem;color:SelectedItemText}`));