@fluentui/web-components 3.0.0-beta.5 → 3.0.0-beta.6

package/dist/web-components.js

@@ -3832,7 +3832,7 @@ function accordionTemplate() {
 
 class Accordion extends FASTAccordion {}
 
-const template$r = accordionTemplate();
+const template$s = accordionTemplate();
 
 /**
  * Determines the current localization direction of an element.
@@ -4022,7 +4022,7 @@ const whitespaceFilter = value => {
   return value.nodeType !== Node.TEXT_NODE || !!((_a = value.nodeValue) === null || _a === void 0 ? void 0 : _a.trim().length);
 };
 
-const styles$q = css`
+const styles$r = css`
   ${display("flex")}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -4033,10 +4033,10 @@ const FluentDesignSystem = Object.freeze({
   registry: customElements
 });
 
-const definition$r = Accordion.compose({
+const definition$s = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$r,
-  styles: styles$q
+  template: template$s,
+  styles: styles$r
 });
 
 /**
@@ -4047,12 +4047,12 @@ 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>`;
 }
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
-var __decorateClass$j = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
+var __decorateClass$k = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$j(target, key, result);
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
 class AccordionItem extends FASTAccordionItem {
@@ -4061,11 +4061,11 @@ class AccordionItem extends FASTAccordionItem {
     this.block = false;
   }
 }
-__decorateClass$j([attr], AccordionItem.prototype, "size", 2);
-__decorateClass$j([attr({
+__decorateClass$k([attr], AccordionItem.prototype, "size", 2);
+__decorateClass$k([attr({
   mode: "boolean"
 })], AccordionItem.prototype, "block", 2);
-__decorateClass$j([attr({
+__decorateClass$k([attr({
   attribute: "expand-icon-position"
 })], AccordionItem.prototype, "expandIconPosition", 2);
 
@@ -5854,7 +5854,7 @@ var tokens = /*#__PURE__*/Object.freeze({
     shadow64Brand: shadow64Brand
 });
 
-const styles$p = css`
+const styles$q = 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}`;
@@ -5885,15 +5885,15 @@ const chevronDown20Filled = html.partial(`<svg
     fill="currentColor"
   />
 </svg>`);
-const template$q = accordionItemTemplate({
+const template$r = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
 
-const definition$q = AccordionItem.compose({
+const definition$r = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$q,
-  styles: styles$p
+  template: template$r,
+  styles: styles$q
 });
 
 /**
@@ -5938,12 +5938,12 @@ 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>`;
 }
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
-var __decorateClass$i = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
+var __defProp$j = Object.defineProperty;
+var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
+var __decorateClass$j = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$i(target, key, result);
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
 class AnchorButton extends FASTAnchor {
@@ -5987,17 +5987,17 @@ class AnchorButton extends FASTAnchor {
     this.removeEventListener("click", this.handleDisabledFocusableClick);
   }
 }
-__decorateClass$i([attr], AnchorButton.prototype, "appearance", 2);
-__decorateClass$i([attr], AnchorButton.prototype, "shape", 2);
-__decorateClass$i([attr], AnchorButton.prototype, "size", 2);
-__decorateClass$i([attr({
+__decorateClass$j([attr], AnchorButton.prototype, "appearance", 2);
+__decorateClass$j([attr], AnchorButton.prototype, "shape", 2);
+__decorateClass$j([attr], AnchorButton.prototype, "size", 2);
+__decorateClass$j([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], AnchorButton.prototype, "iconOnly", 2);
-__decorateClass$i([attr({
+__decorateClass$j([attr({
   mode: "boolean"
 })], AnchorButton.prototype, "disabled", 2);
-__decorateClass$i([attr({
+__decorateClass$j([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], AnchorButton.prototype, "disabledFocusable", 2);
@@ -6024,24 +6024,24 @@ const AnchorButtonAppearance = ButtonAppearance;
 const AnchorButtonShape = ButtonShape;
 const AnchorButtonSize = ButtonSize;
 
-const template$p = anchorTemplate();
+const template$q = anchorTemplate();
 
-const styles$o = css`
+const styles$p = 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}: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) .control{border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active)
     .control{background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='transparent']:hover) .control{border-color:Highlight}`));
 
-const styles$n = css`
-  ${styles$o}
+const styles$o = css`
+  ${styles$p}
 
   .content{text-align:center}`;
 
-const definition$p = AnchorButton.compose({
+const definition$q = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$p,
-  styles: styles$n,
+  template: template$q,
+  styles: styles$o,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -6156,12 +6156,12 @@ const AvatarSize = {
   _128: 128
 };
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
+var __defProp$i = Object.defineProperty;
+var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
+var __decorateClass$i = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$h(target, key, result);
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 const _Avatar = class extends FASTElement {
@@ -6189,16 +6189,16 @@ const _Avatar = class extends FASTElement {
 };
 let Avatar = _Avatar;
 Avatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$h([attr], Avatar.prototype, "name", 2);
-__decorateClass$h([attr], Avatar.prototype, "initials", 2);
-__decorateClass$h([attr({
+__decorateClass$i([attr], Avatar.prototype, "name", 2);
+__decorateClass$i([attr], Avatar.prototype, "initials", 2);
+__decorateClass$i([attr({
   converter: nullableNumberConverter
 })], Avatar.prototype, "size", 2);
-__decorateClass$h([attr], Avatar.prototype, "shape", 2);
-__decorateClass$h([attr], Avatar.prototype, "active", 2);
-__decorateClass$h([attr], Avatar.prototype, "appearance", 2);
-__decorateClass$h([attr], Avatar.prototype, "color", 2);
-__decorateClass$h([attr({
+__decorateClass$i([attr], Avatar.prototype, "shape", 2);
+__decorateClass$i([attr], Avatar.prototype, "active", 2);
+__decorateClass$i([attr], Avatar.prototype, "appearance", 2);
+__decorateClass$i([attr], Avatar.prototype, "color", 2);
+__decorateClass$i([attr({
   attribute: "color-id"
 })], Avatar.prototype, "colorId", 2);
 const getHashCode = str => {
@@ -6215,7 +6215,7 @@ const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 2
 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$o = avatarTemplate();
+const template$p = avatarTemplate();
 
 const animations = {
   fastOutSlowInMax: curveDecelerateMax,
@@ -6228,13 +6228,13 @@ const animations = {
   normalEase: curveEasyEase,
   nullEasing: curveLinear
 };
-const styles$m = css`
+const styles$n = 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 definition$o = Avatar.compose({
+const definition$p = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$o,
-  styles: styles$m
+  template: template$p,
+  styles: styles$n
 });
 
 function applyMixins(derivedCtor, ...baseCtors) {
@@ -6280,12 +6280,12 @@ const BadgeSize = {
   extraLarge: "extra-large"
 };
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 class Badge extends FASTElement {
@@ -6295,16 +6295,16 @@ class Badge extends FASTElement {
     this.color = BadgeColor.brand;
   }
 }
-__decorateClass$g([attr], Badge.prototype, "appearance", 2);
-__decorateClass$g([attr], Badge.prototype, "color", 2);
-__decorateClass$g([attr], Badge.prototype, "shape", 2);
-__decorateClass$g([attr], Badge.prototype, "size", 2);
+__decorateClass$h([attr], Badge.prototype, "appearance", 2);
+__decorateClass$h([attr], Badge.prototype, "color", 2);
+__decorateClass$h([attr], Badge.prototype, "shape", 2);
+__decorateClass$h([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$n = badgeTemplate();
+const template$o = badgeTemplate();
 
 const textPadding = spacingHorizontalXXS;
 const badgeBaseStyles = css.partial`
@@ -6555,7 +6555,7 @@ const badgeTintStyles = css.partial`
   }
 `;
 
-const styles$l = css`
+const styles$m = 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}
@@ -6564,10 +6564,10 @@ const styles$l = css`
   ${badgeBaseStyles}
 `;
 
-const definition$n = Badge.compose({
+const definition$o = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$n,
-  styles: styles$l
+  template: template$o,
+  styles: styles$m
 });
 
 const proxySlotName = "form-associated-proxy";
@@ -7178,12 +7178,12 @@ function buttonTemplate$1(options = {}) {
   return html`<button class="control" part="control" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" form="${x => x.formId}" formaction="${x => x.formaction}" formenctype="${x => x.formenctype}" formmethod="${x => x.formmethod}" ?formnovalidate="${x => x.formnovalidate}" formtarget="${x => x.formtarget}" name="${x => x.name}" type="${x => x.type}" value="${x => x.value}" 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-pressed="${x => x.ariaPressed}" 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)}</button>`;
 }
 
-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$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 class Button extends FASTButton {
@@ -7217,24 +7217,24 @@ class Button extends FASTButton {
     this.removeEventListener("click", this.handleDisabledFocusableClick);
   }
 }
-__decorateClass$f([attr], Button.prototype, "appearance", 2);
-__decorateClass$f([attr], Button.prototype, "shape", 2);
-__decorateClass$f([attr], Button.prototype, "size", 2);
-__decorateClass$f([attr({
+__decorateClass$g([attr], Button.prototype, "appearance", 2);
+__decorateClass$g([attr], Button.prototype, "shape", 2);
+__decorateClass$g([attr], Button.prototype, "size", 2);
+__decorateClass$g([attr({
   attribute: "icon-only",
   mode: "boolean"
 })], Button.prototype, "iconOnly", 2);
-__decorateClass$f([attr({
+__decorateClass$g([attr({
   attribute: "disabled-focusable",
   mode: "boolean"
 })], Button.prototype, "disabledFocusable", 2);
 
-const template$m = buttonTemplate$1();
+const template$n = buttonTemplate$1();
 
-const definition$m = Button.compose({
+const definition$n = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$m,
-  styles: styles$o,
+  template: template$n,
+  styles: styles$p,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -7321,18 +7321,18 @@ class FASTCheckbox extends FormAssociatedCheckbox {
 __decorate([observable], FASTCheckbox.prototype, "defaultSlottedNodes", void 0);
 __decorate([observable], FASTCheckbox.prototype, "indeterminate", void 0);
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$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$e(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 class Checkbox extends FASTCheckbox {}
-__decorateClass$e([attr], Checkbox.prototype, "shape", 2);
-__decorateClass$e([attr], Checkbox.prototype, "size", 2);
-__decorateClass$e([attr({
+__decorateClass$f([attr], Checkbox.prototype, "shape", 2);
+__decorateClass$f([attr], Checkbox.prototype, "size", 2);
+__decorateClass$f([attr({
   attribute: "label-position"
 })], Checkbox.prototype, "labelPosition", 2);
 
@@ -7365,19 +7365,19 @@ const checkedIndicator = html.partial(`
 const indeterminateIndicator = html.partial(`
     <div class="indeterminate-indicator"></div>
 `);
-const template$l = checkboxTemplate({
+const template$m = checkboxTemplate({
   checkedIndicator,
   indeterminateIndicator
 });
 
-const styles$k = css`
+const styles$l = 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$l = Checkbox.compose({
+const definition$m = Checkbox.compose({
   name: `${FluentDesignSystem.prefix}-checkbox`,
-  template: template$l,
-  styles: styles$k
+  template: template$m,
+  styles: styles$l
 });
 
 class CompoundButton extends Button {}
@@ -7389,31 +7389,31 @@ const CompoundButtonSize = ButtonSize;
 function buttonTemplate(options = {}) {
   return html`<button class="control" part="control" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" form="${x => x.formId}" formaction="${x => x.formaction}" formenctype="${x => x.formenctype}" formmethod="${x => x.formmethod}" ?formnovalidate="${x => x.formnovalidate}" formtarget="${x => x.formtarget}" name="${x => x.name}" type="${x => x.type}" value="${x => x.value}" 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-pressed="${x => x.ariaPressed}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")}>${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</button>`;
 }
-const template$k = buttonTemplate();
+const template$l = buttonTemplate();
 
-const styles$j = css`
-  ${styles$o}
+const styles$k = css`
+  ${styles$p}
 
   :host .control,:host(:is([size])) .control{gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:hover,[appearance='primary']:active))
     ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='subtle'],[appearance='subtle']:hover,[appearance='subtle']:active))
     ::slotted([slot='description']),:host([appearance='transparent']) ::slotted([slot='description']){color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is([disabled],[disabled][appearance],[disabled-focusable],[disabled-focusable][appearance]))
     ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']) .control{padding:8px;padding-bottom:10px}:host([icon-only]) .control{min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']) .control{min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']) .control{min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']) .control{padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
 
-const definition$k = CompoundButton.compose({
+const definition$l = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$k,
-  styles: styles$j,
+  template: template$l,
+  styles: styles$k,
   shadowOptions: {
     delegatesFocus: true
   }
 });
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$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$d(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 class CounterBadge extends FASTElement {
@@ -7439,22 +7439,22 @@ class CounterBadge extends FASTElement {
     return;
   }
 }
-__decorateClass$d([attr], CounterBadge.prototype, "appearance", 2);
-__decorateClass$d([attr], CounterBadge.prototype, "color", 2);
-__decorateClass$d([attr], CounterBadge.prototype, "shape", 2);
-__decorateClass$d([attr], CounterBadge.prototype, "size", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr], CounterBadge.prototype, "appearance", 2);
+__decorateClass$e([attr], CounterBadge.prototype, "color", 2);
+__decorateClass$e([attr], CounterBadge.prototype, "shape", 2);
+__decorateClass$e([attr], CounterBadge.prototype, "size", 2);
+__decorateClass$e([attr({
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "count", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   attribute: "overflow-count",
   converter: nullableNumberConverter
 })], CounterBadge.prototype, "overflowCount", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   attribute: "show-zero",
   mode: "boolean"
 })], CounterBadge.prototype, "showZero", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   mode: "boolean"
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
@@ -7491,9 +7491,9 @@ function composeTemplate(options = {}) {
     defaultContent: html`${x => x.setCount()}`
   });
 }
-const template$j = composeTemplate();
+const template$k = composeTemplate();
 
-const styles$i = css`
+const styles$j = 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}
@@ -7501,197 +7501,381 @@ const styles$i = css`
 
   :host([dot]),:host([dot][appearance][size]){min-width:auto;width:6px;height:6px;padding:0}`;
 
-const definition$j = CounterBadge.compose({
+const definition$k = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$j,
-  styles: styles$i
+  template: template$k,
+  styles: styles$j
 });
 
-/**
- * Divider roles
- * @public
- */
-const DividerRole = {
-  /**
-   * The divider semantically separates content
-   */
-  separator: "separator",
-  /**
-   * The divider has no semantic value and is for visual presentation only.
-   */
-  presentation: "presentation"
+/*!
+* tabbable 5.2.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
+var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
+var matches = typeof Element === 'undefined' ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+var isContentEditable = function isContentEditable(node) {
+  return node.contentEditable === 'true';
 };
-/**
- * Divider orientation
- * @public
- */
-const DividerOrientation = Orientation;
-
-/**
- * The template for the {@link @microsoft/fast-foundation#FASTDivider} component.
- * @public
- */
-function dividerTemplate() {
-  return html`<template role="${x => x.role}" aria-orientation="${x => x.role !== DividerRole.presentation ? x.orientation : void 0}"><slot></slot></template>`;
-}
-
-/**
- * A Divider Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
- *
- * @public
- */
-class FASTDivider extends FASTElement {
-  constructor() {
-    super(...arguments);
-    /**
-     * The role of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: role
-     */
-    this.role = DividerRole.separator;
-    /**
-     * The orientation of the divider.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: orientation
-     */
-    this.orientation = DividerOrientation.horizontal;
+var getTabindex = function getTabindex(node) {
+  var tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
+  if (!isNaN(tabindexAttr)) {
+    return tabindexAttr;
+  } // Browsers do not return `tabIndex` correctly for contentEditable nodes;
+  // so if they don't have a tabindex attribute specifically set, assume it's 0.
+
+  if (isContentEditable(node)) {
+    return 0;
+  } // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+  //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+  //  yet they are still part of the regular tab order; in FF, they get a default
+  //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+  //  order, consider their tab index to be 0.
+
+  if ((node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
+    return 0;
+  }
+  return node.tabIndex;
+};
+var isInput = function isInput(node) {
+  return node.tagName === 'INPUT';
+};
+var isHiddenInput = function isHiddenInput(node) {
+  return isInput(node) && node.type === 'hidden';
+};
+var isDetailsWithSummary = function isDetailsWithSummary(node) {
+  var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
+    return child.tagName === 'SUMMARY';
+  });
+  return r;
+};
+var getCheckedRadio = function getCheckedRadio(nodes, form) {
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].checked && nodes[i].form === form) {
+      return nodes[i];
+    }
   }
-}
-__decorate([attr], FASTDivider.prototype, "role", void 0);
-__decorate([attr], FASTDivider.prototype, "orientation", void 0);
-
-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 Divider extends FASTDivider {}
-__decorateClass$c([attr({
-  attribute: "align-content"
-})], Divider.prototype, "alignContent", 2);
-__decorateClass$c([attr], Divider.prototype, "appearance", 2);
-__decorateClass$c([attr({
-  mode: "boolean"
-})], Divider.prototype, "inset", 2);
-
-const DividerAlignContent = {
-  center: "center",
-  start: "start",
-  end: "end"
+var isTabbableRadio = function isTabbableRadio(node) {
+  if (!node.name) {
+    return true;
+  }
+  var radioScope = node.form || node.ownerDocument;
+  var queryRadios = function queryRadios(name) {
+    return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
+  };
+  var radioSet;
+  if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
+    radioSet = queryRadios(window.CSS.escape(node.name));
+  } else {
+    try {
+      radioSet = queryRadios(node.name);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
+      return false;
+    }
+  }
+  var checked = getCheckedRadio(radioSet, node.form);
+  return !checked || checked === node;
 };
-const DividerAppearance = {
-  strong: "strong",
-  brand: "brand",
-  subtle: "subtle",
-  default: "default"
+var isRadio = function isRadio(node) {
+  return isInput(node) && node.type === 'radio';
+};
+var isNonTabbableRadio = function isNonTabbableRadio(node) {
+  return isRadio(node) && !isTabbableRadio(node);
+};
+var isHidden = function isHidden(node, displayCheck) {
+  if (getComputedStyle(node).visibility === 'hidden') {
+    return true;
+  }
+  var isDirectSummary = matches.call(node, 'details>summary:first-of-type');
+  var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
+  if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
+    return true;
+  }
+  if (!displayCheck || displayCheck === 'full') {
+    while (node) {
+      if (getComputedStyle(node).display === 'none') {
+        return true;
+      }
+      node = node.parentElement;
+    }
+  } else if (displayCheck === 'non-zero-area') {
+    var _node$getBoundingClie = node.getBoundingClientRect(),
+      width = _node$getBoundingClie.width,
+      height = _node$getBoundingClie.height;
+    return width === 0 && height === 0;
+  }
+  return false;
+};
+var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
+  if (node.disabled || isHiddenInput(node) || isHidden(node, options.displayCheck) || /* For a details element with a summary, the summary element gets the focused  */
+  isDetailsWithSummary(node)) {
+    return false;
+  }
+  return true;
+};
+var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
+  if (!isNodeMatchingSelectorFocusable(options, node) || isNonTabbableRadio(node) || getTabindex(node) < 0) {
+    return false;
+  }
+  return true;
+};
+var isTabbable = function isTabbable(node, options) {
+  options = options || {};
+  if (!node) {
+    throw new Error('No node provided');
+  }
+  if (matches.call(node, candidateSelector) === false) {
+    return false;
+  }
+  return isNodeMatchingSelectorTabbable(options, node);
 };
 
-const template$i = dividerTemplate();
-
-const styles$h = 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 DialogModalType = {
+  modal: "modal",
+  nonModal: "non-modal",
+  alert: "alert"
+};
 
-const definition$i = Divider.compose({
-  name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$i,
-  styles: styles$h
-});
-
-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 Image extends FASTElement {}
-__decorateClass$b([attr({
-  mode: "boolean"
-})], Image.prototype, "block", 2);
-__decorateClass$b([attr({
-  mode: "boolean"
-})], Image.prototype, "bordered", 2);
-__decorateClass$b([attr({
-  mode: "boolean"
-})], Image.prototype, "shadow", 2);
-__decorateClass$b([attr], Image.prototype, "fit", 2);
-__decorateClass$b([attr], Image.prototype, "shape", 2);
-
-const ImageFit = {
-  none: "none",
-  center: "center",
-  contain: "contain",
-  cover: "cover",
-  default: "default"
-};
-const ImageShape = {
-  circular: "circular",
-  rounded: "rounded",
-  square: "square"
-};
-
-const template$h = html`<slot></slot>`;
-
-const styles$g = css`
-  :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
-
-const definition$h = Image.compose({
-  name: `${FluentDesignSystem.prefix}-image`,
-  template: template$h,
-  styles: styles$g
-});
-
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$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$a(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
-class Label extends FASTElement {
+const _Dialog = class extends FASTElement {
   constructor() {
     super(...arguments);
-    this.disabled = false;
-    this.required = false;
+    this.isTrappingFocus = false;
+    this.titleAction = [];
+    this.modalType = DialogModalType.modal;
+    this.open = false;
+    this.noTitleAction = false;
+    this.trapFocus = false;
+    this.onOpenChangeEvent = (dismissed = false) => {
+      this.$emit("onOpenChange", {
+        open: this.dialog.open,
+        dismissed
+      });
+    };
+    this.handleKeydown = e => {
+      if (e.defaultPrevented) {
+        return;
+      }
+      switch (e.key) {
+        case keyEscape:
+          if (this.modalType !== DialogModalType.alert) {
+            this.hide(true);
+            this.$emit("dismiss");
+          }
+          break;
+        default:
+          return true;
+      }
+    };
+    this.handleDocumentKeydown = e => {
+      if (!e.defaultPrevented && this.dialog.open) {
+        switch (e.key) {
+          case keyTab:
+            this.handleTabKeyDown(e);
+            break;
+        }
+      }
+    };
+    this.handleTabKeyDown = e => {
+      if (!this.trapFocus || !this.dialog.open) {
+        return;
+      }
+      const bounds = this.getTabQueueBounds();
+      if (bounds.length === 1) {
+        bounds[0].focus();
+        e.preventDefault();
+        return;
+      }
+      if (e.shiftKey && e.target === bounds[0]) {
+        bounds[bounds.length - 1].focus();
+        e.preventDefault();
+      } else if (!e.shiftKey && e.target === bounds[bounds.length - 1]) {
+        bounds[0].focus();
+        e.preventDefault();
+      }
+      return;
+    };
+    this.getTabQueueBounds = () => {
+      const bounds = [];
+      return _Dialog.reduceTabbableItems(bounds, this);
+    };
+    this.focusFirstElement = () => {
+      const bounds = this.getTabQueueBounds();
+      if (bounds.length > 0) {
+        bounds[0].focus();
+      } else {
+        if (this.dialog instanceof HTMLElement) {
+          this.dialog.focus();
+        }
+      }
+    };
+    this.shouldForceFocus = currentFocusElement => {
+      return this.isTrappingFocus && !this.contains(currentFocusElement);
+    };
+    this.shouldTrapFocus = () => {
+      return this.trapFocus && this.dialog.open;
+    };
+    this.handleDocumentFocus = e => {
+      if (!e.defaultPrevented && this.shouldForceFocus(e.target)) {
+        this.focusFirstElement();
+        e.preventDefault();
+      }
+    };
+    this.updateTrapFocus = shouldTrapFocusOverride => {
+      const shouldTrapFocus = shouldTrapFocusOverride === void 0 ? this.shouldTrapFocus() : shouldTrapFocusOverride;
+      if (shouldTrapFocus && !this.isTrappingFocus) {
+        this.isTrappingFocus = true;
+        document.addEventListener("focusin", this.handleDocumentFocus);
+        Updates.enqueue(() => {
+          if (this.shouldForceFocus(document.activeElement)) {
+            this.focusFirstElement();
+          }
+        });
+      } else if (!shouldTrapFocus && this.isTrappingFocus) {
+        this.isTrappingFocus = false;
+        document.removeEventListener("focusin", this.handleDocumentFocus);
+      }
+    };
   }
-}
-__decorateClass$a([attr], Label.prototype, "size", 2);
-__decorateClass$a([attr], Label.prototype, "weight", 2);
-__decorateClass$a([attr({
-  mode: "boolean"
-})], Label.prototype, "disabled", 2);
-__decorateClass$a([attr({
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("keydown", this.handleDocumentKeydown);
+    Updates.enqueue(() => {
+      this.updateTrapFocus();
+      this.setComponent();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("keydown", this.handleDocumentKeydown);
+    this.updateTrapFocus(false);
+  }
+  openChanged(oldValue, newValue) {
+    if (newValue !== oldValue) {
+      if (newValue && !oldValue) {
+        this.show();
+      } else if (!newValue && oldValue) {
+        this.hide();
+      }
+    }
+  }
+  modalTypeChanged(oldValue, newValue) {
+    if (newValue !== oldValue) {
+      if (newValue == DialogModalType.alert || newValue == DialogModalType.modal) {
+        this.trapFocus = true;
+      } else {
+        this.trapFocus = false;
+      }
+    }
+  }
+  setComponent() {
+    if (this.modalType == DialogModalType.modal || this.modalType == DialogModalType.alert) {
+      this.trapFocus = true;
+    } else {
+      this.trapFocus = false;
+    }
+  }
+  show() {
+    Updates.enqueue(() => {
+      if (this.modalType === DialogModalType.alert || this.modalType === DialogModalType.modal) {
+        this.dialog.showModal();
+        this.open = true;
+        this.updateTrapFocus(true);
+      } else if (this.modalType === DialogModalType.nonModal) {
+        this.dialog.show();
+        this.open = true;
+      }
+      this.onOpenChangeEvent();
+    });
+  }
+  hide(dismissed = false) {
+    this.dialog.close();
+    this.open = false;
+    this.onOpenChangeEvent(dismissed);
+  }
+  dismiss() {
+    if (this.modalType === DialogModalType.alert) {
+      return;
+    }
+    this.hide(true);
+  }
+  handleClick(event) {
+    event.preventDefault();
+    if (this.dialog.open && this.modalType !== DialogModalType.alert && event.target === this.dialog) {
+      this.dismiss();
+    }
+    return true;
+  }
+  static reduceTabbableItems(elements, element) {
+    if (element.getAttribute("tabindex") === "-1") {
+      return elements;
+    }
+    if (isTabbable(element) || _Dialog.isFocusableFastElement(element) && _Dialog.hasTabbableShadow(element)) {
+      elements.push(element);
+      return elements;
+    }
+    return Array.from(element.children).reduce((elements2, currentElement) => _Dialog.reduceTabbableItems(elements2, currentElement), elements);
+  }
+  static isFocusableFastElement(element) {
+    var _a, _b;
+    return !!((_b = (_a = element.$fastController) == null ? void 0 : _a.definition.shadowOptions) == null ? void 0 : _b.delegatesFocus);
+  }
+  static hasTabbableShadow(element) {
+    var _a, _b;
+    return Array.from((_b = (_a = element.shadowRoot) == null ? void 0 : _a.querySelectorAll("*")) != null ? _b : []).some(x => {
+      return isTabbable(x);
+    });
+  }
+};
+let Dialog = _Dialog;
+__decorateClass$d([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$d([observable], Dialog.prototype, "titleAction", 2);
+__decorateClass$d([observable], Dialog.prototype, "defaultTitleAction", 2);
+__decorateClass$d([attr({
+  attribute: "aria-describedby"
+})], Dialog.prototype, "ariaDescribedby", 2);
+__decorateClass$d([attr({
+  attribute: "aria-labelledby"
+})], Dialog.prototype, "ariaLabelledby", 2);
+__decorateClass$d([attr({
+  attribute: "modal-type"
+})], Dialog.prototype, "modalType", 2);
+__decorateClass$d([attr({
   mode: "boolean"
-})], Label.prototype, "required", 2);
-
-const styles$f = css`
-  ${display("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}}`;
-
-function labelTemplate() {
-  return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
-}
-const template$g = labelTemplate();
+})], Dialog.prototype, "open", 2);
+__decorateClass$d([attr({
+  mode: "boolean",
+  attribute: "no-title-action"
+})], Dialog.prototype, "noTitleAction", 2);
 
-const definition$g = Label.compose({
-  name: `${FluentDesignSystem.prefix}-label`,
-  template: template$g,
-  styles: styles$f
-});
+const dismissed16Regular = html.partial(`
+  <svg
+    fill="currentColor"
+    aria-hidden="true"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+      fill="currentColor"
+    ></path>
+  </svg>`);
+const template$j = html`<template ?open="${x => x.open}"><dialog role="${x => x.modalType === DialogModalType.alert ? "alertdialog" : "dialog"}" modal-type="${x => x.modalType}" class="dialog" part="dialog" aria-modal="${x => x.modalType === DialogModalType.modal || x.modalType === DialogModalType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @keydown="${(x, c) => x.handleKeydown(c.event)}" @click="${(x, c) => x.handleClick(c.event)}" ${ref("dialog")}><div class="root" part="root"><div class="title" part="title"><slot name="title"></slot><slot ${slotted({
+  property: "titleAction",
+  filter: elements()
+})} name="title-action"></slot>${when(x => x.modalType === DialogModalType.nonModal && x.titleAction.length === 0 && !x.noTitleAction, html`<fluent-button tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.dismiss()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button>`)}</div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div></div></dialog></template>`;
 
 function t(t) {
   return t.split("-")[1];
@@ -8608,752 +8792,491 @@ const z = (t, n, o) => {
   });
 };
 
-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;
+/**
+ * Divider roles
+ * @public
+ */
+const DividerRole = {
+  /**
+   * The divider semantically separates content
+   */
+  separator: "separator",
+  /**
+   * The divider has no semantic value and is for visual presentation only.
+   */
+  presentation: "presentation"
 };
-class Menu extends FASTElement {
+/**
+ * Divider orientation
+ * @public
+ */
+const DividerOrientation = Orientation;
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#FASTDivider} component.
+ * @public
+ */
+function dividerTemplate() {
+  return html`<template role="${x => x.role}" aria-orientation="${x => x.role !== DividerRole.presentation ? x.orientation : void 0}"><slot></slot></template>`;
+}
+
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
+class FASTDivider extends FASTElement {
   constructor() {
     super(...arguments);
-    this.openOnHover = false;
-    this.openOnContext = false;
-    this.closeOnScroll = false;
-    this.persistOnItemClick = false;
-    this.open = false;
-    this.slottedMenuList = [];
-    this.slottedTriggers = [];
-    this.toggleMenu = () => {
-      if (this.open) {
-        this.closeMenu();
-      } else {
-        this.openMenu();
-      }
-    };
-    this.closeMenu = () => {
-      this.open = false;
-      if (this.closeOnScroll) {
-        document.removeEventListener("scroll", this.closeMenu);
-      }
-    };
-    this.openMenu = e => {
-      this.open = true;
-      if (e && this.openOnContext) {
-        e.preventDefault();
-      }
-      if (this.closeOnScroll) {
-        document.addEventListener("scroll", this.closeMenu);
-      }
-    };
-    this.setPositioningTask = () => {
-      this.setPositioning();
-    };
-    this.handleTriggerKeydown = e => {
-      if (e.defaultPrevented) {
-        return;
-      }
-      const key = e.key;
-      switch (key) {
-        case keySpace:
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    this.role = DividerRole.separator;
+    /**
+     * The orientation of the divider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    this.orientation = DividerOrientation.horizontal;
+  }
+}
+__decorate([attr], FASTDivider.prototype, "role", void 0);
+__decorate([attr], FASTDivider.prototype, "orientation", void 0);
+
+/**
+ * Menu items roles.
+ * @public
+ */
+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"
+};
+/**
+ * @internal
+ */
+({
+  [MenuItemRole.menuitem]: "menuitem",
+  [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
+  [MenuItemRole.menuitemradio]: "menuitemradio"
+});
+
+/**
+ * Generates a template for the {@link @microsoft/fast-foundation#(FASTMenuItem:class)} component using
+ * the provided prefix.
+ *
+ * @public
+ */
+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>`;
+}
+
+/**
+ * A Switch Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot radio-indicator - The radio indicator
+ * @slot start - Content which can be provided before the menu item content
+ * @slot end - Content which can be provided after the menu item content
+ * @slot - The default slot for menu item content
+ * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot submenu - Used to nest menu's within menu items
+ * @csspart input-container - The element representing the visual checked or radio indicator
+ * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
+ * @csspart radio - The element wrapping the `menuitemradio` indicator
+ * @csspart content - The element wrapping the menu item content
+ * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
+ * @csspart expand-collapse - The expand/collapse element
+ * @csspart submenu-region - The container for the submenu, used for positioning
+ * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
+ * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ *
+ * @public
+ */
+class FASTMenuItem extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    this.role = MenuItemRole.menuitem;
+    /**
+     * The checked value of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: checked
+     */
+    this.checked = false;
+    this.focusSubmenuOnLoad = false;
+    /**
+     * @internal
+     */
+    this.handleMenuItemKeyDown = e => {
+      if (e.defaultPrevented) {
+        return false;
+      }
+      switch (e.key) {
         case keyEnter:
-          e.preventDefault();
-          this.toggleMenu();
-          if (this.open) {
-            this.focusMenuList();
+        case keySpace:
+          this.invoke();
+          return false;
+        case keyArrowRight:
+          //open/focus on submenu
+          this.expanded && this.submenu ? this.submenu.focus() : this.expandAndFocus();
+          return false;
+        case keyEscape:
+          // close submenu
+          if (this.expanded) {
+            this.closeSubMenu();
+            return false;
           }
           break;
-        default:
-          return true;
+        case keyArrowLeft:
+          //close submenu
+          if (this.expanded) {
+            this.closeSubMenu();
+            return false;
+          }
       }
+      return true;
     };
-    this.handleDocumentClick = e => {
-      if (e && !e.composedPath().includes(this._menuList) && !e.composedPath().includes(this._trigger)) {
-        this.closeMenu();
+    /**
+     * @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 = () => {
+      // close submenu
+      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;
       }
     };
   }
-  connectedCallback() {
-    super.connectedCallback();
-    Updates.enqueue(() => this.setComponent());
-  }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    (_a = this.cleanup) == null ? void 0 : _a.call(this);
-    this.removeListeners();
-  }
-  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();
-    }
-  }
-  focusMenuList() {
-    if (this.open && this._menuList) {
-      Updates.enqueue(() => {
-        this._menuList.focus();
+  expandedChanged(prev, next) {
+    if (this.$fastController.isConnected) {
+      if (next && this.submenu) {
+        this.updateSubmenu();
+      }
+      this.$emit("expanded-change", this, {
+        bubbles: false
       });
     }
   }
-  focusTrigger() {
-    if (!this.open && this._trigger) {
-      Updates.enqueue(() => {
-        this._trigger.focus();
-      });
-    }
-  }
-  openChanged(oldValue, newValue) {
-    var _a;
-    if (this.$fastController.isConnected && this._trigger instanceof HTMLElement) {
-      this._trigger.setAttribute("aria-expanded", `${this.open}`);
-      if (this._menuList && this.open) {
-        Updates.enqueue(this.setPositioningTask);
-      }
+  checkedChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected) {
+      this.$emit("change");
     }
-    (_a = this.cleanup) == null ? void 0 : _a.call(this);
-    this.$emit("onOpenChange", {
-      open: newValue
-    });
   }
-  openOnHoverChanged(oldValue, newValue) {
-    var _a, _b;
-    if (newValue) {
-      (_a = this._trigger) == null ? void 0 : _a.addEventListener("mouseover", this.openMenu);
-    } else {
-      (_b = this._trigger) == null ? void 0 : _b.removeEventListener("mouseover", this.openMenu);
-    }
+  /**
+   * @internal
+   */
+  get hasSubmenu() {
+    return !!this.submenu;
   }
-  persistOnItemClickChanged(oldValue, newValue) {
-    var _a, _b;
-    if (!newValue) {
-      (_a = this._menuList) == null ? void 0 : _a.addEventListener("click", this.closeMenu);
-    } else {
-      (_b = this._menuList) == null ? void 0 : _b.removeEventListener("click", this.closeMenu);
+  /**
+   * Sets the submenu and updates its position.
+   *
+   * @internal
+   */
+  slottedSubmenuChanged(prev, next) {
+    if (next.length) {
+      this.submenu = next[0];
+      this.updateSubmenu();
     }
   }
-  openOnContextChanged(oldValue, newValue) {
-    var _a, _b;
-    if (newValue) {
-      (_a = this._trigger) == null ? void 0 : _a.addEventListener("contextmenu", this.openMenu);
-    } else {
-      (_b = this._trigger) == null ? void 0 : _b.removeEventListener("contextmenu", this.openMenu);
-    }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    var _a;
+    (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
+    super.disconnectedCallback();
   }
-  closeOnScrollChanged(oldValue, newValue) {
-    if (newValue) {
-      document.addEventListener("scroll", this.closeMenu);
-    } else {
-      document.removeEventListener("scroll", this.closeMenu);
+  /**
+   * Calculate and apply submenu positioning.
+   *
+   * @public
+   */
+  updateSubmenu() {
+    var _a;
+    (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
+    if (!this.submenu || !this.expanded) {
+      return;
     }
-  }
-  setPositioning() {
-    if (this.$fastController.isConnected && this._menuList && this.open && this._trigger) {
-      this.cleanup = P(this, this.positioningContainer, async () => {
-        var _a, _b;
+    Updates.enqueue(() => {
+      this.cleanup = P(this, this.submenuContainer, () => __awaiter(this, void 0, void 0, function* () {
+        const fallbackPlacements = ["left-start", "right-start"];
         const {
-          middlewareData,
           x,
           y
-        } = await z(this._trigger, this.positioningContainer, {
-          placement: "bottom",
-          strategy: "fixed",
-          middleware: [b$1(), k({
+        } = yield z(this, this.submenuContainer, {
+          middleware: [E$1(), k({
             apply: ({
-              availableHeight,
+              availableWidth,
               rects
             }) => {
-              var _a2;
-              ((_a2 = this.positioningContainer) == null ? void 0 : _a2.style) && Object.assign(this.positioningContainer.style, {
-                maxHeight: `${availableHeight}px`,
-                width: `${rects.reference.width}px`
-              });
+              if (availableWidth < rects.floating.width) {
+                fallbackPlacements.push("bottom-end", "top-end");
+              }
             }
-          }), P$1()]
+          }), b$1({
+            fallbackPlacements
+          })],
+          placement: "right-start",
+          strategy: "fixed"
         });
-        if ((_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden) {
-          this.open = false;
-          return;
-        }
-        ((_b = this.positioningContainer) == null ? void 0 : _b.style) && Object.assign(this.positioningContainer.style, {
+        Object.assign(this.submenuContainer.style, {
+          left: `${x}px`,
           position: "fixed",
-          top: "0",
-          left: "0",
-          transform: `translate(${x}px, ${y}px)`
+          top: `${y}px`
         });
-      });
-    }
-  }
-  addListeners() {
-    var _a, _b, _c, _d, _e;
-    document.addEventListener("click", this.handleDocumentClick);
-    (_a = this._trigger) == null ? void 0 : _a.addEventListener("keydown", this.handleTriggerKeydown);
-    if (!this.persistOnItemClick) {
-      (_b = this._menuList) == null ? void 0 : _b.addEventListener("click", this.closeMenu);
-    }
-    if (this.openOnHover) {
-      (_c = this._trigger) == null ? void 0 : _c.addEventListener("mouseover", this.openMenu);
-    } else if (this.openOnContext) {
-      (_d = this._trigger) == null ? void 0 : _d.addEventListener("contextmenu", this.openMenu);
-    } else {
-      (_e = this._trigger) == null ? void 0 : _e.addEventListener("click", this.toggleMenu);
-    }
-  }
-  removeListeners() {
-    var _a, _b, _c, _d, _e;
-    document.removeEventListener("click", this.handleDocumentClick);
-    (_a = this._trigger) == null ? void 0 : _a.removeEventListener("keydown", this.handleTriggerKeydown);
-    if (!this.persistOnItemClick) {
-      (_b = this._menuList) == null ? void 0 : _b.removeEventListener("click", this.closeMenu);
-    }
-    if (this.openOnHover) {
-      (_c = this._trigger) == null ? void 0 : _c.removeEventListener("mouseover", this.openMenu);
-    }
-    if (this.openOnContext) {
-      (_d = this._trigger) == null ? void 0 : _d.removeEventListener("contextmenu", this.openMenu);
-    } else {
-      (_e = this._trigger) == null ? void 0 : _e.removeEventListener("click", this.toggleMenu);
-    }
-  }
-  handleMenuKeydown(e) {
-    if (e.defaultPrevented) {
-      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;
-    }
+        this.submenuLoaded();
+      }));
+    });
   }
 }
-__decorateClass$9([observable, attr({
-  attribute: "open-on-hover",
-  mode: "boolean"
-})], Menu.prototype, "openOnHover", 2);
-__decorateClass$9([observable, attr({
-  attribute: "open-on-context",
+__decorate([attr({
   mode: "boolean"
-})], Menu.prototype, "openOnContext", 2);
-__decorateClass$9([observable, attr({
-  attribute: "close-on-scroll",
+})], FASTMenuItem.prototype, "disabled", void 0);
+__decorate([attr({
   mode: "boolean"
-})], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$9([observable, attr({
-  attribute: "persist-on-item-click",
+})], FASTMenuItem.prototype, "expanded", void 0);
+__decorate([attr], FASTMenuItem.prototype, "role", void 0);
+__decorate([attr({
   mode: "boolean"
-})], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$9([observable, attr({
+})], FASTMenuItem.prototype, "checked", void 0);
+__decorate([attr({
   mode: "boolean"
-})], Menu.prototype, "open", 2);
-__decorateClass$9([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$9([observable], Menu.prototype, "slottedTriggers", 2);
+})], FASTMenuItem.prototype, "hidden", void 0);
+__decorate([observable], FASTMenuItem.prototype, "slottedSubmenu", void 0);
+__decorate([observable], FASTMenuItem.prototype, "submenu", void 0);
+applyMixins$1(FASTMenuItem, StartEnd);
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#FASTMenu} component.
+ * @public
+ */
 function menuTemplate$1() {
-  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>`;
+  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$f = menuTemplate$1();
-
-const styles$e = css`
-  :host{position:relative;z-index:var(--z-index-menu,1)}.positioning-container{position:fixed;top:0;left:0;transform:translate(0,0)}`;
-
-const definition$f = Menu.compose({
-  name: `${FluentDesignSystem.prefix}-menu`,
-  template: template$f,
-  styles: styles$e
-});
-
-class MenuButton extends Button {}
-
-const MenuButtonAppearance = ButtonAppearance;
-const MenuButtonShape = ButtonShape;
-const MenuButtonSize = ButtonSize;
-
-const template$e = buttonTemplate$1({
-  end: html.partial(`<svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor"></path></svg>`)
-});
-
-const definition$e = MenuButton.compose({
-  name: `${FluentDesignSystem.prefix}-menu-button`,
-  template: template$e,
-  styles: styles$o,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
 
 /**
- * Menu items roles.
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @slot - The default slot for the menu items
+ *
  * @public
  */
-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"
-};
-/**
- * @internal
- */
-({
-  [MenuItemRole.menuitem]: "menuitem",
-  [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
-  [MenuItemRole.menuitemradio]: "menuitemradio"
-});
-
-/**
- * Generates a template for the {@link @microsoft/fast-foundation#(FASTMenuItem:class)} component using
- * the provided prefix.
- *
- * @public
- */
-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>`;
-}
-
-/**
- * A Switch Custom HTML Element.
- * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
- *
- * @slot checked-indicator - The checked indicator
- * @slot radio-indicator - The radio indicator
- * @slot start - Content which can be provided before the menu item content
- * @slot end - Content which can be provided after the menu item content
- * @slot - The default slot for menu item content
- * @slot expand-collapse-indicator - The expand/collapse indicator
- * @slot submenu - Used to nest menu's within menu items
- * @csspart input-container - The element representing the visual checked or radio indicator
- * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
- * @csspart radio - The element wrapping the `menuitemradio` indicator
- * @csspart content - The element wrapping the menu item content
- * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
- * @csspart expand-collapse - The expand/collapse element
- * @csspart submenu-region - The container for the submenu, used for positioning
- * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
- * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
- *
- * @public
- */
-class FASTMenuItem extends FASTElement {
+class FASTMenu extends FASTElement {
   constructor() {
     super(...arguments);
+    this.expandedItem = null;
     /**
-     * The role of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: role
-     */
-    this.role = MenuItemRole.menuitem;
-    /**
-     * The checked value of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: checked
+     * The index of the focusable element in the items array
+     * defaults to -1
      */
-    this.checked = false;
-    this.focusSubmenuOnLoad = false;
+    this.focusIndex = -1;
     /**
      * @internal
      */
-    this.handleMenuItemKeyDown = e => {
-      if (e.defaultPrevented) {
-        return false;
-      }
-      switch (e.key) {
-        case keyEnter:
-        case keySpace:
-          this.invoke();
-          return false;
-        case keyArrowRight:
-          //open/focus on submenu
-          this.expanded && this.submenu ? this.submenu.focus() : this.expandAndFocus();
-          return false;
-        case keyEscape:
-          // close submenu
-          if (this.expanded) {
-            this.closeSubMenu();
-            return false;
-          }
-          break;
-        case keyArrowLeft:
-          //close submenu
-          if (this.expanded) {
-            this.closeSubMenu();
-            return false;
-          }
-      }
-      return true;
+    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.handleMenuItemClick = e => {
-      if (e.defaultPrevented || this.disabled) {
-        return false;
+    this.handleFocusOut = e => {
+      if (!this.contains(e.relatedTarget) && this.menuItems !== undefined) {
+        this.collapseExpandedItem();
+        // find our first focusable element
+        const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
+        // set the current focus index's tabindex to -1
+        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+        // set the first focusable element tabindex to 0
+        this.menuItems[focusIndex].setAttribute("tabindex", "0");
+        // set the focus index
+        this.focusIndex = focusIndex;
       }
-      this.invoke();
-      return false;
     };
-    /**
-     * @internal
-     */
-    this.submenuLoaded = () => {
-      if (!this.focusSubmenuOnLoad) {
-        return;
-      }
-      this.focusSubmenuOnLoad = false;
-      if (this.submenu) {
-        this.submenu.focus();
-        this.setAttribute("tabindex", "-1");
+    this.handleItemFocus = e => {
+      const targetItem = e.target;
+      if (this.menuItems !== undefined && targetItem !== this.menuItems[this.focusIndex]) {
+        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+        this.focusIndex = this.menuItems.indexOf(targetItem);
+        targetItem.setAttribute("tabindex", "0");
       }
     };
-    /**
-     * @internal
-     */
-    this.handleMouseOver = e => {
-      if (this.disabled || !this.hasSubmenu || this.expanded) {
-        return false;
+    this.handleExpandedChanged = e => {
+      if (e.defaultPrevented || e.target === null || this.menuItems === undefined || this.menuItems.indexOf(e.target) < 0) {
+        return;
       }
-      this.expanded = true;
-      return false;
-    };
-    /**
-     * @internal
-     */
-    this.handleMouseOut = e => {
-      if (!this.expanded || this.contains(document.activeElement)) {
-        return false;
+      e.preventDefault();
+      const changedItem = e.target;
+      // closing an expanded item without opening another
+      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");
       }
-      this.expanded = false;
-      return false;
-    };
-    /**
-     * @internal
-     */
-    this.closeSubMenu = () => {
-      // close submenu
-      this.expanded = false;
-      this.focus();
     };
     /**
-     * @internal
+     * handle change from child element
      */
-    this.expandAndFocus = () => {
-      if (!this.hasSubmenu) {
+    this.changeHandler = e => {
+      if (this.menuItems === undefined) {
         return;
       }
-      this.focusSubmenuOnLoad = true;
-      this.expanded = true;
-    };
-    /**
-     * @internal
-     */
-    this.invoke = () => {
-      if (this.disabled) {
+      const changedMenuItem = e.target;
+      const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+      if (changeItemIndex === -1) {
         return;
       }
-      switch (this.role) {
-        case MenuItemRole.menuitemcheckbox:
-          this.checked = !this.checked;
-          break;
-        case MenuItemRole.menuitem:
-          if (this.hasSubmenu) {
-            this.expandAndFocus();
+      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;
           }
-          this.$emit("change");
-          break;
-        case MenuItemRole.menuitemradio:
-          if (!this.checked) {
-            this.checked = true;
+        }
+        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;
           }
-          break;
+          if (role === "separator") {
+            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() {
-    var _a;
-    (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-    super.disconnectedCallback();
-  }
-  /**
-   * Calculate and apply submenu positioning.
-   *
-   * @public
-   */
-  updateSubmenu() {
-    var _a;
-    (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-    if (!this.submenu || !this.expanded) {
-      return;
-    }
-    Updates.enqueue(() => {
-      this.cleanup = P(this, this.submenuContainer, () => __awaiter(this, void 0, void 0, function* () {
-        const fallbackPlacements = ["left-start", "right-start"];
-        const {
-          x,
-          y
-        } = yield 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();
-      }));
-    });
-  }
-}
-__decorate([attr({
-  mode: "boolean"
-})], FASTMenuItem.prototype, "disabled", void 0);
-__decorate([attr({
-  mode: "boolean"
-})], FASTMenuItem.prototype, "expanded", void 0);
-__decorate([attr], FASTMenuItem.prototype, "role", void 0);
-__decorate([attr({
-  mode: "boolean"
-})], FASTMenuItem.prototype, "checked", void 0);
-__decorate([attr({
-  mode: "boolean"
-})], FASTMenuItem.prototype, "hidden", void 0);
-__decorate([observable], FASTMenuItem.prototype, "slottedSubmenu", void 0);
-__decorate([observable], FASTMenuItem.prototype, "submenu", void 0);
-applyMixins$1(FASTMenuItem, StartEnd);
-
-class MenuItem extends FASTMenuItem {}
-
-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>`);
-const template$d = menuItemTemplate({
-  checkboxIndicator: Checkmark16Filled,
-  expandCollapseGlyph: chevronRight16Filled,
-  radioIndicator: Checkmark16Filled
-});
-
-const styles$d = 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 definition$d = MenuItem.compose({
-  name: `${FluentDesignSystem.prefix}-menu-item`,
-  template: template$d,
-  styles: styles$d
-});
-
-/**
- * The template for the {@link @microsoft/fast-foundation#FASTMenu} component.
- * @public
- */
-function menuTemplate() {
-  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>`;
-}
-
-/**
- * A Menu Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
- *
- * @slot - The default slot for the menu items
- *
- * @public
- */
-class FASTMenu 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 !== undefined) {
-        this.collapseExpandedItem();
-        // find our first focusable element
-        const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
-        // set the current focus index's tabindex to -1
-        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        // set the first focusable element tabindex to 0
-        this.menuItems[focusIndex].setAttribute("tabindex", "0");
-        // set the focus index
-        this.focusIndex = focusIndex;
-      }
-    };
-    this.handleItemFocus = e => {
-      const targetItem = e.target;
-      if (this.menuItems !== undefined && 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 === undefined || this.menuItems.indexOf(e.target) < 0) {
-        return;
-      }
-      e.preventDefault();
-      const changedItem = e.target;
-      // closing an expanded item without opening another
-      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 === undefined) {
-        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 FASTMenuItem || isHTMLElement(el) && el.getAttribute("role") in FASTMenu.focusableElementRoles;
-    };
-    /**
-     * check if the item is focusable
-     */
-    this.isFocusableElement = el => {
-      return this.isMenuItemElement(el);
-    };
+    /**
+     * check if the item is a menu item
+     */
+    this.isMenuItemElement = el => {
+      return el instanceof FASTMenuItem || isHTMLElement(el) && el.getAttribute("role") in FASTMenu.focusableElementRoles;
+    };
+    /**
+     * check if the item is focusable
+     */
+    this.isFocusableElement = el => {
+      return this.isMenuItemElement(el);
+    };
   }
   itemsChanged(oldValue, newValue) {
     // only update children after the component is connected and
@@ -9487,43 +9410,212 @@ class FASTMenu extends FASTElement {
 FASTMenu.focusableElementRoles = MenuItemRole;
 __decorate([observable], FASTMenu.prototype, "items", void 0);
 
-class MenuList extends FASTMenu {
-  setItems() {
-    var _a;
-    super.setItems();
-    const filteredMenuListItems = (_a = this.menuItems) == null ? void 0 : _a.filter(this.isMenuItemElement);
-    filteredMenuListItems == null ? void 0 : filteredMenuListItems.forEach((item, index) => {
-      const indent = filteredMenuListItems == null ? void 0 : filteredMenuListItems.reduce((accum, current) => {
-        const elementValue = MenuList.elementIndent(current);
-        return Math.max(accum, elementValue);
-      }, 0);
-      if (item instanceof MenuItem) {
-        item.setAttribute("data-indent", `${indent}`);
-      }
-    });
-  }
-  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;
+class _TextField extends FASTElement {}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(TextField:class)} component.
+ *
+ * @beta
+ */
+class FormAssociatedTextField extends FormAssociated(_TextField) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
   }
 }
 
-const template$c = menuTemplate();
-
-const styles$c = 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}`;
+/**
+ * Text field sub-types
+ * @public
+ */
+const TextFieldType = {
+  /**
+   * An email TextField
+   */
+  email: "email",
+  /**
+   * A password TextField
+   */
+  password: "password",
+  /**
+   * A telephone TextField
+   */
+  tel: "tel",
+  /**
+   * A text TextField
+   */
+  text: "text",
+  /**
+   * A URL TextField
+   */
+  url: "url"
+};
 
-const definition$c = MenuList.compose({
-  name: `${FluentDesignSystem.prefix}-menu-list`,
-  template: template$c,
-  styles: styles$c
-});
+/**
+ * A Text Field Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> element }.
+ *
+ * @slot start - Content which can be provided before the number field input
+ * @slot end - Content which can be provided after the number field input
+ * @slot - The default slot for the label
+ * @csspart label - The label
+ * @csspart root - The element wrapping the control, including start and end slots
+ * @csspart control - The text field element
+ * @fires change - Fires a custom 'change' event when the value has changed
+ *
+ * @public
+ */
+class FASTTextField extends FormAssociatedTextField {
+  constructor() {
+    super(...arguments);
+    /**
+     * Allows setting a type or mode of text.
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    this.type = TextFieldType.text;
+  }
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+      this.validate();
+    }
+  }
+  autofocusChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.autofocus = this.autofocus;
+      this.validate();
+    }
+  }
+  placeholderChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.placeholder = this.placeholder;
+    }
+  }
+  typeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.type = this.type;
+      this.validate();
+    }
+  }
+  listChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.setAttribute("list", this.list);
+      this.validate();
+    }
+  }
+  maxlengthChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.maxLength = this.maxlength;
+      this.validate();
+    }
+  }
+  minlengthChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.minLength = this.minlength;
+      this.validate();
+    }
+  }
+  patternChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.pattern = this.pattern;
+      this.validate();
+    }
+  }
+  sizeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.size = this.size;
+    }
+  }
+  spellcheckChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.spellcheck = this.spellcheck;
+    }
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.proxy.setAttribute("type", this.type);
+    this.validate();
+    if (this.autofocus) {
+      Updates.enqueue(() => {
+        this.focus();
+      });
+    }
+  }
+  /**
+   * Selects all the text in the text field
+   *
+   * @public
+   */
+  select() {
+    this.control.select();
+    /**
+     * The select event does not permeate the shadow DOM boundary.
+     * This fn effectively proxies the select event,
+     * emitting a `select` event whenever the internal
+     * control emits a `select` event
+     */
+    this.$emit("select");
+  }
+  /**
+   * Handles the internal control's `input` event
+   * @internal
+   */
+  handleTextInput() {
+    this.value = this.control.value;
+  }
+  /**
+   * Change event handler for inner control.
+   * @remarks
+   * "Change" events are not `composable` so they will not
+   * permeate the shadow DOM boundary. This fn effectively proxies
+   * the change event, emitting a `change` event whenever the internal
+   * control emits a `change` event
+   * @internal
+   */
+  handleChange() {
+    this.$emit("change");
+  }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+  validate() {
+    super.validate(this.control);
+  }
+}
+__decorate([attr({
+  attribute: "readonly",
+  mode: "boolean"
+})], FASTTextField.prototype, "readOnly", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], FASTTextField.prototype, "autofocus", void 0);
+__decorate([attr], FASTTextField.prototype, "placeholder", void 0);
+__decorate([attr], FASTTextField.prototype, "type", void 0);
+__decorate([attr], FASTTextField.prototype, "list", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter
+})], FASTTextField.prototype, "maxlength", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter
+})], FASTTextField.prototype, "minlength", void 0);
+__decorate([attr], FASTTextField.prototype, "pattern", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter
+})], FASTTextField.prototype, "size", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], FASTTextField.prototype, "spellcheck", void 0);
+__decorate([observable], FASTTextField.prototype, "defaultSlottedNodes", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA textbox role
+ *
+ * @public
+ */
+class DelegatesARIATextbox {}
+applyMixins$1(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
+applyMixins$1(FASTTextField, StartEnd, DelegatesARIATextbox);
 
 /**
  * A base class for progress components.
@@ -9577,6 +9669,29 @@ __decorate([attr({
 })], FASTBaseProgress.prototype, "max", void 0);
 __decorate([observable], FASTBaseProgress.prototype, "percentComplete", void 0);
 
+/**
+ * An circular Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @slot determinate - The slot for a custom determinate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart background - The background
+ *
+ * @public
+ */
+class FASTProgressRing extends FASTBaseProgress {}
+
+const progressSegments = 44;
+/**
+ * The template for the {@link @microsoft/fast-foundation#FASTProgressRing} component.
+ * @public
+ */
+function progressRingTemplate(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`<svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate"><circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle><circle class="determinate" part="determinate" style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px" cx="8px" cy="8px" r="7px"></circle></svg>`, html`<slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator)}</slot>`)}</template>`;
+}
+
 /**
  * An Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
@@ -9598,66 +9713,22 @@ 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>`;
 }
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
-  return result;
-};
-class ProgressBar extends FASTProgress {
-  constructor() {
-    super(...arguments);
-    this.validationState = null;
-  }
-}
-__decorateClass$8([attr], ProgressBar.prototype, "thickness", 2);
-__decorateClass$8([attr], ProgressBar.prototype, "shape", 2);
-__decorateClass$8([attr({
-  attribute: "validation-state"
-})], ProgressBar.prototype, "validationState", 2);
-
-const ProgressBarThickness = {
-  medium: "medium",
-  large: "large"
-};
-const ProgressBarShape = {
-  rounded: "rounded",
-  square: "square"
-};
-const ProgressBarValidationState = {
-  success: "success",
-  warning: "warning",
-  error: "error"
-};
-
-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}`));
-
-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>`
-});
+/**
+ * Radio Group orientation
+ * @public
+ */
+const RadioGroupOrientation = Orientation;
 
-const definition$b = ProgressBar.compose({
-  name: `${FluentDesignSystem.prefix}-progress-bar`,
-  template: template$b,
-  styles: styles$b
-});
+/**
+ * The template for the {@link @microsoft/fast-foundation#FASTRadioGroup} component.
+ * @public
+ */
+function radioGroupTemplate() {
+  return html`<template role="radiogroup" tabindex="${x => x.disabled ? -1 : void 0}" aria-disabled="${x => x.disabled}" aria-readonly="${x => x.readOnly}" aria-orientation="${x => x.orientation}" @click="${(x, c) => x.clickHandler(c.event)}" @mousedown="${(x, c) => x.handleDisabledClick(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @focusout="${(x, c) => x.focusOutHandler(c.event)}"><slot name="label"></slot><div class="positioning-region ${x => x.orientation === RadioGroupOrientation.horizontal ? "horizontal" : "vertical"}" part="positioning-region"><slot ${slotted({
+    property: "slottedRadioButtons",
+    filter: elements("[role=radio]")
+  })}></slot></div></template>`;
+}
 
 /**
  * The template for the {@link @microsoft/fast-foundation#(FASTRadio:class)} component.
@@ -9774,41 +9845,6 @@ class FASTRadio extends FormAssociatedRadio {
 __decorate([observable], FASTRadio.prototype, "name", void 0);
 __decorate([observable], FASTRadio.prototype, "defaultSlottedNodes", void 0);
 
-class Radio extends FASTRadio {}
-
-const styles$a = css`
-  ${display("inline-grid")}
-
-  :host{grid-auto-flow:column;grid-template-columns:max-content;gap:${spacingHorizontalXS};align-items:center;height:32px;cursor:pointer;outline:none;position:relative;user-select:none;color:blue;color:var(--state-color,${colorNeutralForeground3});padding-inline-end:${spacingHorizontalS};--control-border-color:${colorNeutralStrokeAccessible};--checked-indicator-background-color:${colorCompoundBrandForeground1};--state-color:${colorNeutralForeground3}}:host([disabled]){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}.label{cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label__hidden{display:none}.control{box-sizing:border-box;align-items:center;border:1px solid var(--control-border-color,${colorNeutralStrokeAccessible});border-radius:${borderRadiusCircular};display:flex;height:16px;justify-content:center;margin:${spacingVerticalS} ${spacingHorizontalS};position:relative;width:16px;justify-self:center}.checked-indicator{border-radius:${borderRadiusCircular};height:10px;opacity:0;width:10px}:host([aria-checked='false']:hover) .control{color:${colorNeutralForeground2}}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host(:hover) .control{border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .control{border-color:${colorNeutralStrokeAccessiblePressed}}:host([aria-checked='true']) .checked-indicator{opacity:1}:host([aria-checked='true']) .control{border-color:var(--control-border-color,${colorNeutralStrokeAccessible})}:host([aria-checked='true']) .checked-indicator{background-color:var(--checked-indicator-background-color,${colorCompoundBrandForeground1})}:host([aria-checked='true']:hover) .control{border-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:hover) .checked-indicator{background-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:active) .control{border-color:${colorCompoundBrandStrokePressed}}:host([aria-checked='true']:active) .checked-indicator{background:${colorCompoundBrandForeground1Pressed}}:host([disabled]){color:${colorNeutralForegroundDisabled};pointer-events:none}:host([disabled]) .control{pointer-events:none;border-color:${colorNeutralForegroundDisabled}}:host([disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host .control{border-color:InactiveBorder}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='true']:active) .checked-indicator,:host([aria-checked='true']:hover) .checked-indicator{background-color:Highlight;border-color:ActiveBorder}`));
-
-const template$a = radioTemplate({
-  checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`
-});
-
-const definition$a = Radio.compose({
-  name: `${FluentDesignSystem.prefix}-radio`,
-  template: template$a,
-  styles: styles$a
-});
-
-/**
- * Radio Group orientation
- * @public
- */
-const RadioGroupOrientation = Orientation;
-
-/**
- * The template for the {@link @microsoft/fast-foundation#FASTRadioGroup} component.
- * @public
- */
-function radioGroupTemplate() {
-  return html`<template role="radiogroup" tabindex="${x => x.disabled ? -1 : void 0}" aria-disabled="${x => x.disabled}" aria-readonly="${x => x.readOnly}" aria-orientation="${x => x.orientation}" @click="${(x, c) => x.clickHandler(c.event)}" @mousedown="${(x, c) => x.handleDisabledClick(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @focusout="${(x, c) => x.focusOutHandler(c.event)}"><slot name="label"></slot><div class="positioning-region ${x => x.orientation === RadioGroupOrientation.horizontal ? "horizontal" : "vertical"}" part="positioning-region"><slot ${slotted({
-    property: "slottedRadioButtons",
-    filter: elements("[role=radio]")
-  })}></slot></div></template>`;
-}
-
 /**
  * An Radio Group Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
@@ -10143,36 +10179,18 @@ __decorate([attr], FASTRadioGroup.prototype, "orientation", void 0);
 __decorate([observable], FASTRadioGroup.prototype, "childItems", void 0);
 __decorate([observable], FASTRadioGroup.prototype, "slottedRadioButtons", void 0);
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
-  return result;
+/**
+ * The orientation of a {@link @microsoft/fast-foundation#(FASTSlider:class)}.
+ * @public
+ */
+const SliderOrientation = Orientation;
+/**
+ * The selection modes of a {@link @microsoft/fast-foundation#(FASTSlider:class)}.
+ * @public
+ */
+const SliderMode = {
+  singleValue: "single-value"
 };
-class RadioGroup extends FASTRadioGroup {
-  constructor() {
-    super(...arguments);
-    this.stacked = false;
-  }
-}
-__decorateClass$7([attr({
-  mode: "boolean"
-})], RadioGroup.prototype, "stacked", 2);
-
-const styles$9 = css`
-  ${display("flex")}
-
-  :host{align-items:flex-start;flex-direction:column;row-gap:${spacingVerticalS}}:host([disabled]) ::slotted([role='radio']){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}::slotted([slot='label']){color:${colorNeutralForeground1};padding:${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};cursor:default}.positioning-region{display:flex;flex-wrap:wrap}:host([orientation='vertical']) .positioning-region{flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']) .positioning-region{flex-direction:row}:host([orientation='horizontal']) ::slotted([role='radio']){padding-inline-end:${spacingHorizontalS}}:host([orientation='horizontal'][stacked]) ::slotted([role='radio']){display:flex;flex-direction:column;padding-inline:${spacingHorizontalS};height:auto;align-items:center;justify-content:center}:host([disabled]) ::slotted([role='radio']){pointer-events:none}`;
-
-const template$9 = radioGroupTemplate();
-
-const definition$9 = RadioGroup.compose({
-  name: `${FluentDesignSystem.prefix}-radio-group`,
-  template: template$9,
-  styles: styles$9
-});
 
 /**
  * Converts a pixel coordinate on the track to a percent of the track's range
@@ -10198,19 +10216,6 @@ class FormAssociatedSlider extends FormAssociated(_Slider) {
   }
 }
 
-/**
- * The orientation of a {@link @microsoft/fast-foundation#(FASTSlider:class)}.
- * @public
- */
-const SliderOrientation = Orientation;
-/**
- * The selection modes of a {@link @microsoft/fast-foundation#(FASTSlider:class)}.
- * @public
- */
-const SliderMode = {
-  singleValue: "single-value"
-};
-
 /**
  * A Slider Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#slider | ARIA slider }.
@@ -10619,190 +10624,41 @@ function sliderTemplate(options = {}) {
   return html`<template role="slider" tabindex="${x => x.disabled ? null : 0}" aria-valuetext="${x => x.valueTextFormatter(x.value)}" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}" aria-disabled="${x => x.disabled ? true : void 0}" aria-readonly="${x => x.readOnly ? true : void 0}" aria-orientation="${x => x.orientation}" class="${x => x.orientation}"><div part="positioning-region" class="positioning-region"><div ${ref("track")} part="track-container" class="track"><slot name="track"></slot><div part="track-start" class="track-start" style="${x => x.position}"><slot name="track-start"></slot></div></div><slot></slot><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></div></template>`;
 }
 
-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$6(target, key, result);
-  return result;
-};
-class Slider extends FASTSlider {
-  handleChange(source, propertyName) {
-    switch (propertyName) {
-      case "min":
-      case "max":
-      case "step":
-        this.handleStepStyles();
-        break;
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    Observable.getNotifier(this).subscribe(this, "max");
-    Observable.getNotifier(this).subscribe(this, "min");
-    Observable.getNotifier(this).subscribe(this, "step");
-    this.handleStepStyles();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    Observable.getNotifier(this).unsubscribe(this, "max");
-    Observable.getNotifier(this).unsubscribe(this, "min");
-    Observable.getNotifier(this).unsubscribe(this, "step");
-  }
-  handleStepStyles() {
-    if (this.step) {
-      const totalSteps = 100 / Math.floor((this.max - this.min) / this.step);
-      if (this.stepStyles !== void 0) {
-        this.$fastController.removeStyles(this.stepStyles);
-      }
-      this.stepStyles = css`
-        :host{--step-rate:${totalSteps}%;color:blue}`;
-      this.$fastController.addStyles(this.stepStyles);
-    } else if (this.stepStyles !== void 0) {
-      this.$fastController.removeStyles(this.stepStyles);
-    }
-  }
+/**
+ * The template for the {@link @microsoft/fast-foundation#(FASTSwitch:class)} component.
+ * @public
+ */
+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>`;
 }
-__decorateClass$6([attr], Slider.prototype, "size", 2);
-
-const SliderSize = {
-  small: "small",
-  medium: "medium"
-};
-
-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(
-      var(--slider-direction),#0000 0%,#0000 calc(var(--step-rate) - 1px),${colorNeutralBackground1} calc(var(--step-rate) - 1px),${colorNeutralBackground1} var(--step-rate)
-    )}:host([orientation='vertical'][step]) .track::after{inset:-2px 0}:host([disabled]) .track{background-color:${colorNeutralBackgroundDisabled}}:host([orientation='horizontal']) .track{right:var(--track-overhang);left:var(--track-overhang);align-self:start;height:var(--track-width);grid-row:2 / auto}:host([orientation='vertical']) .track{top:var(--track-overhang);bottom:var(--track-overhang);width:var(--track-width);height:100%;grid-column:2 / auto}.track-start{background-color:${colorCompoundBrandBackground};position:absolute;height:100%;left:0;border-radius:${borderRadiusMedium}}:host([disabled]) .track-start{background-color:${colorNeutralForegroundDisabled}}:host(:hover) .track-start{background-color:${colorCompoundBrandBackgroundHover}}:host([disabled]:hover) .track-start{background-color:${colorNeutralForegroundDisabled}}.track-start:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([orientation='vertical']) .track-start{height:auto;width:100%;bottom:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    .track:hover,.track:active,.track{background:WindowText}.thumb-cursor:hover,.thumb-cursor:active,.thumb-cursor{background:ButtonText}:host(:hover) .track-start,.track-start:active,.track-start{background:Highlight}`));
-
-const template$8 = sliderTemplate({
-  thumb: `<div class="thumb-cursor" tabindex="0"></div>`
-});
-
-const definition$8 = Slider.compose({
-  name: `${FluentDesignSystem.prefix}-slider`,
-  template: template$8,
-  styles: styles$8
-});
 
+class _Switch extends FASTElement {}
 /**
- * An circular Progress HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
- *
- * @slot indeterminate - The slot for a custom indeterminate indicator
- * @slot determinate - The slot for a custom determinate indicator
- * @csspart progress - Represents the progress element
- * @csspart determinate - The determinate indicator
- * @csspart background - The background
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(FASTSwitch:class)} component.
  *
- * @public
+ * @beta
  */
-class FASTProgressRing extends FASTBaseProgress {}
+class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
 
-const progressSegments = 44;
 /**
- * The template for the {@link @microsoft/fast-foundation#FASTProgressRing} component.
- * @public
- */
-function progressRingTemplate(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`<svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate"><circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle><circle class="determinate" part="determinate" style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px" cx="8px" cy="8px" r="7px"></circle></svg>`, html`<slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator)}</slot>`)}</template>`;
-}
-
-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 Spinner extends FASTProgressRing {}
-__decorateClass$5([attr], Spinner.prototype, "size", 2);
-__decorateClass$5([attr], Spinner.prototype, "appearance", 2);
-
-const SpinnerAppearance = {
-  primary: "primary",
-  inverted: "inverted"
-};
-const SpinnerSize = {
-  tiny: "tiny",
-  extraSmall: "extra-small",
-  small: "small",
-  medium: "medium",
-  large: "large",
-  extraLarge: "extra-large",
-  huge: "huge"
-};
-
-const template$7 = progressRingTemplate({
-  indeterminateIndicator: `
-    <svg class="progress" part="progress" viewBox="0 0 16 16">
-        <circle
-            class="background"
-            part="background"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-        <circle
-            class="indeterminate-indicator-1"
-            part="indeterminate-indicator-1"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-    </svg>
-  `
-});
-
-const styles$7 = css`
-  ${display("flex")}
-
-  :host{display:flex;align-items:center;height:32px;width:32px;contain:content}:host([size='tiny']){height:20px;width:20px}:host([size='extra-small']){height:24px;width:24px}:host([size='small']){height:28px;width:28px}:host([size='large']){height:36px;width:36px}:host([size='extra-large']){height:40px;width:40px}:host([size='huge']){height:44px;width:44px}.progress{height:100%;width:100%}.background{fill:none;stroke:${colorBrandStroke2};stroke-width:1.5px}:host([appearance='inverted']) .background{stroke:rgba(255,255,255,0.2)}.determinate{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out}:host([appearance='inverted']) .determinite{stroke:${colorNeutralStrokeOnBrand2}}.indeterminate-indicator-1{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 3s cubic-bezier(0.53,0.21,0.29,0.67) infinite}:host([appearance='inverted']) .indeterminate-indicator-1{stroke:${colorNeutralStrokeOnBrand2}}@keyframes spin-infinite{0%{stroke-dasharray:0.01px 43.97px;transform:rotate(0deg)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}100%{stroke-dasharray:0.01px 43.97px;transform:rotate(1080deg)}}`;
-
-const definition$7 = Spinner.compose({
-  name: `${FluentDesignSystem.prefix}-spinner`,
-  template: template$7,
-  styles: styles$7
-});
-
-/**
- * The template for the {@link @microsoft/fast-foundation#(FASTSwitch:class)} component.
- * @public
- */
-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>`;
-}
-
-class _Switch extends FASTElement {}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(FASTSwitch:class)} component.
- *
- * @beta
- */
-class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-/**
- * A Switch Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
- *
- * @slot - The deafult slot for the label
- * @slot checked-message - The message when in a checked state
- * @slot unchecked-message - The message when in an unchecked state
- * @csspart label - The label
- * @csspart switch - The element representing the switch, which wraps the indicator
- * @csspart status-message - The wrapper for the status messages
- * @csspart checked-message - The checked message
- * @csspart unchecked-message - The unchecked message
- * @fires change - Emits a custom change event when the checked state changes
- *
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
+ *
+ * @slot - The deafult slot for the label
+ * @slot checked-message - The message when in a checked state
+ * @slot unchecked-message - The message when in an unchecked state
+ * @csspart label - The label
+ * @csspart switch - The element representing the switch, which wraps the indicator
+ * @csspart status-message - The wrapper for the status messages
+ * @csspart checked-message - The checked message
+ * @csspart unchecked-message - The unchecked message
+ * @fires change - Emits a custom change event when the checked state changes
+ *
  * @public
  */
 class FASTSwitch extends FormAssociatedSwitch {
@@ -10851,40 +10707,37 @@ __decorate([attr({
 })], FASTSwitch.prototype, "readOnly", void 0);
 __decorate([observable], FASTSwitch.prototype, "defaultSlottedNodes", void 0);
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$4(target, key, result);
-  return result;
-};
-class Switch extends FASTSwitch {}
-__decorateClass$4([attr({
-  attribute: "label-position"
-})], Switch.prototype, "labelPosition", 2);
-
-const SwitchLabelPosition = {
-  above: "above",
-  after: "after",
-  before: "before"
-};
-
-const template$6 = switchTemplate({
-  switch: `<span class="checked-indicator" part="checked-indicator"></span>`
-});
-
-const styles$6 = css`
-  ${display("inline-flex")}
+/**
+ * The template for the {@link @microsoft/fast-foundation#FASTTabPanel} component.
+ * @public
+ */
+function tabPanelTemplate() {
+  return html`<template slot="tabpanel" role="tabpanel"><slot></slot></template>`;
+}
 
-  :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}`));
+/**
+ * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(FASTTabs:class)}
+ *
+ * @slot - The default slot for the tabpanel content
+ *
+ * @public
+ */
+class FASTTabPanel extends FASTElement {}
 
-const definition$6 = Switch.compose({
-  name: `${FluentDesignSystem.prefix}-switch`,
-  template: template$6,
-  styles: styles$6
-});
+/**
+ * A Tab Component to be used with {@link @microsoft/fast-foundation#(FASTTabs:class)}
+ *
+ * @slot start - Content which can be provided before the tab content
+ * @slot end - Content which can be provided after the tab content
+ * @slot - The default slot for the tab content
+ *
+ * @public
+ */
+class FASTTab extends FASTElement {}
+__decorate([attr({
+  mode: "boolean"
+})], FASTTab.prototype, "disabled", void 0);
+applyMixins$1(FASTTab, StartEnd);
 
 /**
  * The orientation of the {@link @microsoft/fast-foundation#(FASTTabs:class)} component
@@ -11169,6 +11022,784 @@ __decorate([observable], FASTTabs.prototype, "tabs", void 0);
 __decorate([observable], FASTTabs.prototype, "tabpanels", void 0);
 applyMixins$1(FASTTabs, StartEnd);
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#(FASTTextField:class)} component.
+ * @public
+ */
+function textFieldTemplate(options = {}) {
+  return html`<label part="label" for="control" class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"><slot ${slotted({
+    property: "defaultSlottedNodes",
+    filter: whitespaceFilter
+  })}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @input="${x => x.handleTextInput()}" @change="${x => x.handleChange()}" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" name="${x => x.name}" minlength="${x => x.minlength}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" ?spellcheck="${x => x.spellcheck}" :value="${x => x.value}" 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-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")} />${endSlotTemplate(options)}</div>`;
+}
+
+const styles$i = css`
+  ${display("flex")}
+
+  :host{--dialog-backdrop:${colorBackgroundOverlay}}dialog{background:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorTransparentStroke};z-index:2;margin:auto auto;max-width:100%;width:100vw;border-radius:${borderRadiusXLarge};box-shadow:${shadow64};max-height:100vh;height:fit-content;overflow:unset;position:fixed;inset:0;padding:0}dialog::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}.root{box-sizing:border-box;display:flex;flex-direction:column;overflow:unset;max-height:calc(100vh - 48px);padding:${spacingVerticalXXL} ${spacingHorizontalXXL}}.title{font-size:${fontSizeBase500};line-height:${lineHeightBase500};font-weight:${fontWeightSemibold};font-family:${fontFamilyBase};color:${colorNeutralForeground1};margin-bottom:${spacingVerticalS};display:flex;justify-content:space-between;align-items:flex-start;column-gap:8px}.content{vertical-align:top;min-height:32px;color:${colorNeutralForeground1};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};font-family:${fontFamilyBase};overflow-y:auto;box-sizing:border-box}.actions{display:flex;grid-column-start:1;flex-direction:column;max-width:100vw;row-gap:${spacingVerticalS};padding-top:${spacingVerticalXXL};justify-self:stretch;width:100%}::slotted([slot='action']){width:100%}@media screen and (min-width:480px){::slotted([slot='action']){width:fit-content}dialog{max-width:600px;width:100%}.actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;column-gap:${spacingHorizontalS};padding-top:${spacingVerticalS};box-sizing:border-box}}`;
+
+const definition$j = Dialog.compose({
+  name: `${FluentDesignSystem.prefix}-dialog`,
+  template: template$j,
+  styles: styles$i
+});
+
+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 Divider extends FASTDivider {}
+__decorateClass$c([attr({
+  attribute: "align-content"
+})], Divider.prototype, "alignContent", 2);
+__decorateClass$c([attr], Divider.prototype, "appearance", 2);
+__decorateClass$c([attr({
+  mode: "boolean"
+})], Divider.prototype, "inset", 2);
+
+const DividerAlignContent = {
+  center: "center",
+  start: "start",
+  end: "end"
+};
+const DividerAppearance = {
+  strong: "strong",
+  brand: "brand",
+  subtle: "subtle",
+  default: "default"
+};
+
+const template$i = dividerTemplate();
+
+const styles$h = 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({
+  name: `${FluentDesignSystem.prefix}-divider`,
+  template: template$i,
+  styles: styles$h
+});
+
+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 Image extends FASTElement {}
+__decorateClass$b([attr({
+  mode: "boolean"
+})], Image.prototype, "block", 2);
+__decorateClass$b([attr({
+  mode: "boolean"
+})], Image.prototype, "bordered", 2);
+__decorateClass$b([attr({
+  mode: "boolean"
+})], Image.prototype, "shadow", 2);
+__decorateClass$b([attr], Image.prototype, "fit", 2);
+__decorateClass$b([attr], Image.prototype, "shape", 2);
+
+const ImageFit = {
+  none: "none",
+  center: "center",
+  contain: "contain",
+  cover: "cover",
+  default: "default"
+};
+const ImageShape = {
+  circular: "circular",
+  rounded: "rounded",
+  square: "square"
+};
+
+const template$h = html`<slot></slot>`;
+
+const styles$g = css`
+  :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
+
+const definition$h = Image.compose({
+  name: `${FluentDesignSystem.prefix}-image`,
+  template: template$h,
+  styles: styles$g
+});
+
+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 Label extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.required = false;
+  }
+}
+__decorateClass$a([attr], Label.prototype, "size", 2);
+__decorateClass$a([attr], Label.prototype, "weight", 2);
+__decorateClass$a([attr({
+  mode: "boolean"
+})], Label.prototype, "disabled", 2);
+__decorateClass$a([attr({
+  mode: "boolean"
+})], Label.prototype, "required", 2);
+
+const styles$f = css`
+  ${display("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}}`;
+
+function labelTemplate() {
+  return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
+}
+const template$g = labelTemplate();
+
+const definition$g = Label.compose({
+  name: `${FluentDesignSystem.prefix}-label`,
+  template: template$g,
+  styles: styles$f
+});
+
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$9(target, key, result);
+  return result;
+};
+class 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 = [];
+    this.toggleMenu = () => {
+      if (this.open) {
+        this.closeMenu();
+      } else {
+        this.openMenu();
+      }
+    };
+    this.closeMenu = () => {
+      this.open = false;
+      if (this.closeOnScroll) {
+        document.removeEventListener("scroll", this.closeMenu);
+      }
+    };
+    this.openMenu = e => {
+      this.open = true;
+      if (e && this.openOnContext) {
+        e.preventDefault();
+      }
+      if (this.closeOnScroll) {
+        document.addEventListener("scroll", this.closeMenu);
+      }
+    };
+    this.setPositioningTask = () => {
+      this.setPositioning();
+    };
+    this.handleTriggerKeydown = e => {
+      if (e.defaultPrevented) {
+        return;
+      }
+      const key = e.key;
+      switch (key) {
+        case keySpace:
+        case keyEnter:
+          e.preventDefault();
+          this.toggleMenu();
+          if (this.open) {
+            this.focusMenuList();
+          }
+          break;
+        default:
+          return true;
+      }
+    };
+    this.handleDocumentClick = e => {
+      if (e && !e.composedPath().includes(this._menuList) && !e.composedPath().includes(this._trigger)) {
+        this.closeMenu();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    Updates.enqueue(() => this.setComponent());
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.removeListeners();
+  }
+  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();
+    }
+  }
+  focusMenuList() {
+    if (this.open && this._menuList) {
+      Updates.enqueue(() => {
+        this._menuList.focus();
+      });
+    }
+  }
+  focusTrigger() {
+    if (!this.open && this._trigger) {
+      Updates.enqueue(() => {
+        this._trigger.focus();
+      });
+    }
+  }
+  openChanged(oldValue, newValue) {
+    var _a;
+    if (this.$fastController.isConnected && this._trigger instanceof HTMLElement) {
+      this._trigger.setAttribute("aria-expanded", `${this.open}`);
+      if (this._menuList && this.open) {
+        Updates.enqueue(this.setPositioningTask);
+      }
+    }
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.$emit("onOpenChange", {
+      open: newValue
+    });
+  }
+  openOnHoverChanged(oldValue, newValue) {
+    var _a, _b;
+    if (newValue) {
+      (_a = this._trigger) == null ? void 0 : _a.addEventListener("mouseover", this.openMenu);
+    } else {
+      (_b = this._trigger) == null ? void 0 : _b.removeEventListener("mouseover", this.openMenu);
+    }
+  }
+  persistOnItemClickChanged(oldValue, newValue) {
+    var _a, _b;
+    if (!newValue) {
+      (_a = this._menuList) == null ? void 0 : _a.addEventListener("click", this.closeMenu);
+    } else {
+      (_b = this._menuList) == null ? void 0 : _b.removeEventListener("click", this.closeMenu);
+    }
+  }
+  openOnContextChanged(oldValue, newValue) {
+    var _a, _b;
+    if (newValue) {
+      (_a = this._trigger) == null ? void 0 : _a.addEventListener("contextmenu", this.openMenu);
+    } else {
+      (_b = this._trigger) == null ? void 0 : _b.removeEventListener("contextmenu", this.openMenu);
+    }
+  }
+  closeOnScrollChanged(oldValue, newValue) {
+    if (newValue) {
+      document.addEventListener("scroll", this.closeMenu);
+    } else {
+      document.removeEventListener("scroll", this.closeMenu);
+    }
+  }
+  setPositioning() {
+    if (this.$fastController.isConnected && this._menuList && this.open && this._trigger) {
+      this.cleanup = P(this, this.positioningContainer, async () => {
+        var _a, _b;
+        const {
+          middlewareData,
+          x,
+          y
+        } = await z(this._trigger, this.positioningContainer, {
+          placement: "bottom",
+          strategy: "fixed",
+          middleware: [b$1(), k({
+            apply: ({
+              availableHeight,
+              rects
+            }) => {
+              var _a2;
+              ((_a2 = this.positioningContainer) == null ? void 0 : _a2.style) && Object.assign(this.positioningContainer.style, {
+                maxHeight: `${availableHeight}px`,
+                width: `${rects.reference.width}px`
+              });
+            }
+          }), P$1()]
+        });
+        if ((_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden) {
+          this.open = false;
+          return;
+        }
+        ((_b = this.positioningContainer) == null ? void 0 : _b.style) && Object.assign(this.positioningContainer.style, {
+          position: "fixed",
+          top: "0",
+          left: "0",
+          transform: `translate(${x}px, ${y}px)`
+        });
+      });
+    }
+  }
+  addListeners() {
+    var _a, _b, _c, _d, _e;
+    document.addEventListener("click", this.handleDocumentClick);
+    (_a = this._trigger) == null ? void 0 : _a.addEventListener("keydown", this.handleTriggerKeydown);
+    if (!this.persistOnItemClick) {
+      (_b = this._menuList) == null ? void 0 : _b.addEventListener("click", this.closeMenu);
+    }
+    if (this.openOnHover) {
+      (_c = this._trigger) == null ? void 0 : _c.addEventListener("mouseover", this.openMenu);
+    } else if (this.openOnContext) {
+      (_d = this._trigger) == null ? void 0 : _d.addEventListener("contextmenu", this.openMenu);
+    } else {
+      (_e = this._trigger) == null ? void 0 : _e.addEventListener("click", this.toggleMenu);
+    }
+  }
+  removeListeners() {
+    var _a, _b, _c, _d, _e;
+    document.removeEventListener("click", this.handleDocumentClick);
+    (_a = this._trigger) == null ? void 0 : _a.removeEventListener("keydown", this.handleTriggerKeydown);
+    if (!this.persistOnItemClick) {
+      (_b = this._menuList) == null ? void 0 : _b.removeEventListener("click", this.closeMenu);
+    }
+    if (this.openOnHover) {
+      (_c = this._trigger) == null ? void 0 : _c.removeEventListener("mouseover", this.openMenu);
+    }
+    if (this.openOnContext) {
+      (_d = this._trigger) == null ? void 0 : _d.removeEventListener("contextmenu", this.openMenu);
+    } else {
+      (_e = this._trigger) == null ? void 0 : _e.removeEventListener("click", this.toggleMenu);
+    }
+  }
+  handleMenuKeydown(e) {
+    if (e.defaultPrevented) {
+      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;
+    }
+  }
+}
+__decorateClass$9([observable, attr({
+  attribute: "open-on-hover",
+  mode: "boolean"
+})], Menu.prototype, "openOnHover", 2);
+__decorateClass$9([observable, attr({
+  attribute: "open-on-context",
+  mode: "boolean"
+})], Menu.prototype, "openOnContext", 2);
+__decorateClass$9([observable, attr({
+  attribute: "close-on-scroll",
+  mode: "boolean"
+})], Menu.prototype, "closeOnScroll", 2);
+__decorateClass$9([observable, attr({
+  attribute: "persist-on-item-click",
+  mode: "boolean"
+})], Menu.prototype, "persistOnItemClick", 2);
+__decorateClass$9([observable, attr({
+  mode: "boolean"
+})], Menu.prototype, "open", 2);
+__decorateClass$9([observable], Menu.prototype, "slottedMenuList", 2);
+__decorateClass$9([observable], Menu.prototype, "slottedTriggers", 2);
+
+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$f = menuTemplate();
+
+const styles$e = css`
+  :host{position:relative;z-index:var(--z-index-menu,1)}.positioning-container{position:fixed;top:0;left:0;transform:translate(0,0)}`;
+
+const definition$f = Menu.compose({
+  name: `${FluentDesignSystem.prefix}-menu`,
+  template: template$f,
+  styles: styles$e
+});
+
+class MenuButton extends Button {}
+
+const MenuButtonAppearance = ButtonAppearance;
+const MenuButtonShape = ButtonShape;
+const MenuButtonSize = ButtonSize;
+
+const template$e = buttonTemplate$1({
+  end: html.partial(`<svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor"></path></svg>`)
+});
+
+const definition$e = MenuButton.compose({
+  name: `${FluentDesignSystem.prefix}-menu-button`,
+  template: template$e,
+  styles: styles$p,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+
+class MenuItem extends FASTMenuItem {}
+
+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>`);
+const template$d = menuItemTemplate({
+  checkboxIndicator: Checkmark16Filled,
+  expandCollapseGlyph: chevronRight16Filled,
+  radioIndicator: Checkmark16Filled
+});
+
+const styles$d = 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 definition$d = MenuItem.compose({
+  name: `${FluentDesignSystem.prefix}-menu-item`,
+  template: template$d,
+  styles: styles$d
+});
+
+class MenuList extends FASTMenu {
+  setItems() {
+    var _a;
+    super.setItems();
+    const filteredMenuListItems = (_a = this.menuItems) == null ? void 0 : _a.filter(this.isMenuItemElement);
+    filteredMenuListItems == null ? void 0 : filteredMenuListItems.forEach((item, index) => {
+      const indent = filteredMenuListItems == null ? void 0 : filteredMenuListItems.reduce((accum, current) => {
+        const elementValue = MenuList.elementIndent(current);
+        return Math.max(accum, elementValue);
+      }, 0);
+      if (item instanceof MenuItem) {
+        item.setAttribute("data-indent", `${indent}`);
+      }
+    });
+  }
+  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;
+  }
+}
+
+const template$c = menuTemplate$1();
+
+const styles$c = 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}`;
+
+const definition$c = MenuList.compose({
+  name: `${FluentDesignSystem.prefix}-menu-list`,
+  template: template$c,
+  styles: styles$c
+});
+
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$8(target, key, result);
+  return result;
+};
+class ProgressBar extends FASTProgress {
+  constructor() {
+    super(...arguments);
+    this.validationState = null;
+  }
+}
+__decorateClass$8([attr], ProgressBar.prototype, "thickness", 2);
+__decorateClass$8([attr], ProgressBar.prototype, "shape", 2);
+__decorateClass$8([attr({
+  attribute: "validation-state"
+})], ProgressBar.prototype, "validationState", 2);
+
+const ProgressBarThickness = {
+  medium: "medium",
+  large: "large"
+};
+const ProgressBarShape = {
+  rounded: "rounded",
+  square: "square"
+};
+const ProgressBarValidationState = {
+  success: "success",
+  warning: "warning",
+  error: "error"
+};
+
+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}`));
+
+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
+});
+
+class Radio extends FASTRadio {}
+
+const styles$a = css`
+  ${display("inline-grid")}
+
+  :host{grid-auto-flow:column;grid-template-columns:max-content;gap:${spacingHorizontalXS};align-items:center;height:32px;cursor:pointer;outline:none;position:relative;user-select:none;color:blue;color:var(--state-color,${colorNeutralForeground3});padding-inline-end:${spacingHorizontalS};--control-border-color:${colorNeutralStrokeAccessible};--checked-indicator-background-color:${colorCompoundBrandForeground1};--state-color:${colorNeutralForeground3}}:host([disabled]){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}.label{cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label__hidden{display:none}.control{box-sizing:border-box;align-items:center;border:1px solid var(--control-border-color,${colorNeutralStrokeAccessible});border-radius:${borderRadiusCircular};display:flex;height:16px;justify-content:center;margin:${spacingVerticalS} ${spacingHorizontalS};position:relative;width:16px;justify-self:center}.checked-indicator{border-radius:${borderRadiusCircular};height:10px;opacity:0;width:10px}:host([aria-checked='false']:hover) .control{color:${colorNeutralForeground2}}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host(:hover) .control{border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .control{border-color:${colorNeutralStrokeAccessiblePressed}}:host([aria-checked='true']) .checked-indicator{opacity:1}:host([aria-checked='true']) .control{border-color:var(--control-border-color,${colorNeutralStrokeAccessible})}:host([aria-checked='true']) .checked-indicator{background-color:var(--checked-indicator-background-color,${colorCompoundBrandForeground1})}:host([aria-checked='true']:hover) .control{border-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:hover) .checked-indicator{background-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:active) .control{border-color:${colorCompoundBrandStrokePressed}}:host([aria-checked='true']:active) .checked-indicator{background:${colorCompoundBrandForeground1Pressed}}:host([disabled]){color:${colorNeutralForegroundDisabled};pointer-events:none}:host([disabled]) .control{pointer-events:none;border-color:${colorNeutralForegroundDisabled}}:host([disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host .control{border-color:InactiveBorder}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='true']:active) .checked-indicator,:host([aria-checked='true']:hover) .checked-indicator{background-color:Highlight;border-color:ActiveBorder}`));
+
+const template$a = radioTemplate({
+  checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`
+});
+
+const definition$a = Radio.compose({
+  name: `${FluentDesignSystem.prefix}-radio`,
+  template: template$a,
+  styles: styles$a
+});
+
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$7(target, key, result);
+  return result;
+};
+class RadioGroup extends FASTRadioGroup {
+  constructor() {
+    super(...arguments);
+    this.stacked = false;
+  }
+}
+__decorateClass$7([attr({
+  mode: "boolean"
+})], RadioGroup.prototype, "stacked", 2);
+
+const styles$9 = css`
+  ${display("flex")}
+
+  :host{align-items:flex-start;flex-direction:column;row-gap:${spacingVerticalS}}:host([disabled]) ::slotted([role='radio']){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}::slotted([slot='label']){color:${colorNeutralForeground1};padding:${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};cursor:default}.positioning-region{display:flex;flex-wrap:wrap}:host([orientation='vertical']) .positioning-region{flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']) .positioning-region{flex-direction:row}:host([orientation='horizontal']) ::slotted([role='radio']){padding-inline-end:${spacingHorizontalS}}:host([orientation='horizontal'][stacked]) ::slotted([role='radio']){display:flex;flex-direction:column;padding-inline:${spacingHorizontalS};height:auto;align-items:center;justify-content:center}:host([disabled]) ::slotted([role='radio']){pointer-events:none}`;
+
+const template$9 = radioGroupTemplate();
+
+const definition$9 = RadioGroup.compose({
+  name: `${FluentDesignSystem.prefix}-radio-group`,
+  template: template$9,
+  styles: styles$9
+});
+
+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$6(target, key, result);
+  return result;
+};
+class Slider extends FASTSlider {
+  handleChange(source, propertyName) {
+    switch (propertyName) {
+      case "min":
+      case "max":
+      case "step":
+        this.handleStepStyles();
+        break;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    Observable.getNotifier(this).subscribe(this, "max");
+    Observable.getNotifier(this).subscribe(this, "min");
+    Observable.getNotifier(this).subscribe(this, "step");
+    this.handleStepStyles();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    Observable.getNotifier(this).unsubscribe(this, "max");
+    Observable.getNotifier(this).unsubscribe(this, "min");
+    Observable.getNotifier(this).unsubscribe(this, "step");
+  }
+  handleStepStyles() {
+    if (this.step) {
+      const totalSteps = 100 / Math.floor((this.max - this.min) / this.step);
+      if (this.stepStyles !== void 0) {
+        this.$fastController.removeStyles(this.stepStyles);
+      }
+      this.stepStyles = css`
+        :host{--step-rate:${totalSteps}%;color:blue}`;
+      this.$fastController.addStyles(this.stepStyles);
+    } else if (this.stepStyles !== void 0) {
+      this.$fastController.removeStyles(this.stepStyles);
+    }
+  }
+}
+__decorateClass$6([attr], Slider.prototype, "size", 2);
+
+const SliderSize = {
+  small: "small",
+  medium: "medium"
+};
+
+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(
+      var(--slider-direction),#0000 0%,#0000 calc(var(--step-rate) - 1px),${colorNeutralBackground1} calc(var(--step-rate) - 1px),${colorNeutralBackground1} var(--step-rate)
+    )}:host([orientation='vertical'][step]) .track::after{inset:-2px 0}:host([disabled]) .track{background-color:${colorNeutralBackgroundDisabled}}:host([orientation='horizontal']) .track{right:var(--track-overhang);left:var(--track-overhang);align-self:start;height:var(--track-width);grid-row:2 / auto}:host([orientation='vertical']) .track{top:var(--track-overhang);bottom:var(--track-overhang);width:var(--track-width);height:100%;grid-column:2 / auto}.track-start{background-color:${colorCompoundBrandBackground};position:absolute;height:100%;left:0;border-radius:${borderRadiusMedium}}:host([disabled]) .track-start{background-color:${colorNeutralForegroundDisabled}}:host(:hover) .track-start{background-color:${colorCompoundBrandBackgroundHover}}:host([disabled]:hover) .track-start{background-color:${colorNeutralForegroundDisabled}}.track-start:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([orientation='vertical']) .track-start{height:auto;width:100%;bottom:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .track:hover,.track:active,.track{background:WindowText}.thumb-cursor:hover,.thumb-cursor:active,.thumb-cursor{background:ButtonText}:host(:hover) .track-start,.track-start:active,.track-start{background:Highlight}`));
+
+const template$8 = sliderTemplate({
+  thumb: `<div class="thumb-cursor" tabindex="0"></div>`
+});
+
+const definition$8 = Slider.compose({
+  name: `${FluentDesignSystem.prefix}-slider`,
+  template: template$8,
+  styles: styles$8
+});
+
+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 Spinner extends FASTProgressRing {}
+__decorateClass$5([attr], Spinner.prototype, "size", 2);
+__decorateClass$5([attr], Spinner.prototype, "appearance", 2);
+
+const SpinnerAppearance = {
+  primary: "primary",
+  inverted: "inverted"
+};
+const SpinnerSize = {
+  tiny: "tiny",
+  extraSmall: "extra-small",
+  small: "small",
+  medium: "medium",
+  large: "large",
+  extraLarge: "extra-large",
+  huge: "huge"
+};
+
+const template$7 = progressRingTemplate({
+  indeterminateIndicator: `
+    <svg class="progress" part="progress" viewBox="0 0 16 16">
+        <circle
+            class="background"
+            part="background"
+            cx="8px"
+            cy="8px"
+            r="7px"
+        ></circle>
+        <circle
+            class="indeterminate-indicator-1"
+            part="indeterminate-indicator-1"
+            cx="8px"
+            cy="8px"
+            r="7px"
+        ></circle>
+    </svg>
+  `
+});
+
+const styles$7 = css`
+  ${display("flex")}
+
+  :host{display:flex;align-items:center;height:32px;width:32px;contain:content}:host([size='tiny']){height:20px;width:20px}:host([size='extra-small']){height:24px;width:24px}:host([size='small']){height:28px;width:28px}:host([size='large']){height:36px;width:36px}:host([size='extra-large']){height:40px;width:40px}:host([size='huge']){height:44px;width:44px}.progress{height:100%;width:100%}.background{fill:none;stroke:${colorBrandStroke2};stroke-width:1.5px}:host([appearance='inverted']) .background{stroke:rgba(255,255,255,0.2)}.determinate{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out}:host([appearance='inverted']) .determinite{stroke:${colorNeutralStrokeOnBrand2}}.indeterminate-indicator-1{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 3s cubic-bezier(0.53,0.21,0.29,0.67) infinite}:host([appearance='inverted']) .indeterminate-indicator-1{stroke:${colorNeutralStrokeOnBrand2}}@keyframes spin-infinite{0%{stroke-dasharray:0.01px 43.97px;transform:rotate(0deg)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}100%{stroke-dasharray:0.01px 43.97px;transform:rotate(1080deg)}}`;
+
+const definition$7 = Spinner.compose({
+  name: `${FluentDesignSystem.prefix}-spinner`,
+  template: template$7,
+  styles: styles$7
+});
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$4(target, key, result);
+  return result;
+};
+class Switch extends FASTSwitch {}
+__decorateClass$4([attr({
+  attribute: "label-position"
+})], Switch.prototype, "labelPosition", 2);
+
+const SwitchLabelPosition = {
+  above: "above",
+  after: "after",
+  before: "before"
+};
+
+const template$6 = switchTemplate({
+  switch: `<span class="checked-indicator" part="checked-indicator"></span>`
+});
+
+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}`));
+
+const definition$6 = Switch.compose({
+  name: `${FluentDesignSystem.prefix}-switch`,
+  template: template$6,
+  styles: styles$6
+});
+
 const TabsAppearance = {
   subtle: "subtle",
   transparent: "transparent"
@@ -11291,21 +11922,6 @@ const definition$5 = Tabs.compose({
   styles: styles$5
 });
 
-/**
- * A Tab Component to be used with {@link @microsoft/fast-foundation#(FASTTabs:class)}
- *
- * @slot start - Content which can be provided before the tab content
- * @slot end - Content which can be provided after the tab content
- * @slot - The default slot for the tab content
- *
- * @public
- */
-class FASTTab extends FASTElement {}
-__decorate([attr({
-  mode: "boolean"
-})], FASTTab.prototype, "disabled", void 0);
-applyMixins$1(FASTTab, StartEnd);
-
 class Tab extends FASTTab {
   connectedCallback() {
     super.connectedCallback();
@@ -11335,23 +11951,6 @@ const definition$4 = Tab.compose({
   styles: styles$4
 });
 
-/**
- * The template for the {@link @microsoft/fast-foundation#FASTTabPanel} component.
- * @public
- */
-function tabPanelTemplate() {
-  return html`<template slot="tabpanel" role="tabpanel"><slot></slot></template>`;
-}
-
-/**
- * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(FASTTabs:class)}
- *
- * @slot - The default slot for the tabpanel content
- *
- * @public
- */
-class FASTTabPanel extends FASTElement {}
-
 class TabPanel extends FASTTabPanel {}
 
 const template$3 = tabPanelTemplate();
@@ -11452,224 +12051,6 @@ const definition$2 = Text.compose({
   styles: styles$2
 });
 
-/**
- * The template for the {@link @microsoft/fast-foundation#(FASTTextField:class)} component.
- * @public
- */
-function textFieldTemplate(options = {}) {
-  return html`<label part="label" for="control" class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"><slot ${slotted({
-    property: "defaultSlottedNodes",
-    filter: whitespaceFilter
-  })}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @input="${x => x.handleTextInput()}" @change="${x => x.handleChange()}" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" name="${x => x.name}" minlength="${x => x.minlength}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" ?spellcheck="${x => x.spellcheck}" :value="${x => x.value}" 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-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")} />${endSlotTemplate(options)}</div>`;
-}
-
-class _TextField extends FASTElement {}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(TextField:class)} component.
- *
- * @beta
- */
-class FormAssociatedTextField extends FormAssociated(_TextField) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-/**
- * Text field sub-types
- * @public
- */
-const TextFieldType = {
-  /**
-   * An email TextField
-   */
-  email: "email",
-  /**
-   * A password TextField
-   */
-  password: "password",
-  /**
-   * A telephone TextField
-   */
-  tel: "tel",
-  /**
-   * A text TextField
-   */
-  text: "text",
-  /**
-   * A URL TextField
-   */
-  url: "url"
-};
-
-/**
- * A Text Field Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> element }.
- *
- * @slot start - Content which can be provided before the number field input
- * @slot end - Content which can be provided after the number field input
- * @slot - The default slot for the label
- * @csspart label - The label
- * @csspart root - The element wrapping the control, including start and end slots
- * @csspart control - The text field element
- * @fires change - Fires a custom 'change' event when the value has changed
- *
- * @public
- */
-class FASTTextField extends FormAssociatedTextField {
-  constructor() {
-    super(...arguments);
-    /**
-     * Allows setting a type or mode of text.
-     * @public
-     * @remarks
-     * HTML Attribute: type
-     */
-    this.type = TextFieldType.text;
-  }
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-      this.validate();
-    }
-  }
-  autofocusChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.autofocus = this.autofocus;
-      this.validate();
-    }
-  }
-  placeholderChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.placeholder = this.placeholder;
-    }
-  }
-  typeChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.type = this.type;
-      this.validate();
-    }
-  }
-  listChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.setAttribute("list", this.list);
-      this.validate();
-    }
-  }
-  maxlengthChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.maxLength = this.maxlength;
-      this.validate();
-    }
-  }
-  minlengthChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.minLength = this.minlength;
-      this.validate();
-    }
-  }
-  patternChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.pattern = this.pattern;
-      this.validate();
-    }
-  }
-  sizeChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.size = this.size;
-    }
-  }
-  spellcheckChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.spellcheck = this.spellcheck;
-    }
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.proxy.setAttribute("type", this.type);
-    this.validate();
-    if (this.autofocus) {
-      Updates.enqueue(() => {
-        this.focus();
-      });
-    }
-  }
-  /**
-   * Selects all the text in the text field
-   *
-   * @public
-   */
-  select() {
-    this.control.select();
-    /**
-     * The select event does not permeate the shadow DOM boundary.
-     * This fn effectively proxies the select event,
-     * emitting a `select` event whenever the internal
-     * control emits a `select` event
-     */
-    this.$emit("select");
-  }
-  /**
-   * Handles the internal control's `input` event
-   * @internal
-   */
-  handleTextInput() {
-    this.value = this.control.value;
-  }
-  /**
-   * Change event handler for inner control.
-   * @remarks
-   * "Change" events are not `composable` so they will not
-   * permeate the shadow DOM boundary. This fn effectively proxies
-   * the change event, emitting a `change` event whenever the internal
-   * control emits a `change` event
-   * @internal
-   */
-  handleChange() {
-    this.$emit("change");
-  }
-  /** {@inheritDoc (FormAssociated:interface).validate} */
-  validate() {
-    super.validate(this.control);
-  }
-}
-__decorate([attr({
-  attribute: "readonly",
-  mode: "boolean"
-})], FASTTextField.prototype, "readOnly", void 0);
-__decorate([attr({
-  mode: "boolean"
-})], FASTTextField.prototype, "autofocus", void 0);
-__decorate([attr], FASTTextField.prototype, "placeholder", void 0);
-__decorate([attr], FASTTextField.prototype, "type", void 0);
-__decorate([attr], FASTTextField.prototype, "list", void 0);
-__decorate([attr({
-  converter: nullableNumberConverter
-})], FASTTextField.prototype, "maxlength", void 0);
-__decorate([attr({
-  converter: nullableNumberConverter
-})], FASTTextField.prototype, "minlength", void 0);
-__decorate([attr], FASTTextField.prototype, "pattern", void 0);
-__decorate([attr({
-  converter: nullableNumberConverter
-})], FASTTextField.prototype, "size", void 0);
-__decorate([attr({
-  mode: "boolean"
-})], FASTTextField.prototype, "spellcheck", void 0);
-__decorate([observable], FASTTextField.prototype, "defaultSlottedNodes", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA textbox role
- *
- * @public
- */
-class DelegatesARIATextbox {}
-applyMixins$1(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
-applyMixins$1(FASTTextField, StartEnd, DelegatesARIATextbox);
-
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -11784,7 +12165,7 @@ const ToggleButtonSize = ButtonSize;
 const template = buttonTemplate$1();
 
 const styles = css`
-  ${styles$o}
+  ${styles$p}
 
   :host([aria-pressed="true"]) .control{border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host([aria-pressed='true']:hover) .control{border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host([aria-pressed='true']:active) .control{border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host([aria-pressed='true'][appearance='primary']) .control{border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host([aria-pressed='true'][appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([aria-pressed='true'][appearance='primary']:active) .control{background-color:${colorBrandBackgroundPressed}}:host([aria-pressed='true'][appearance='subtle']) .control{border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([aria-pressed='true'][appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host([aria-pressed='true'][appearance='subtle']:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host([aria-pressed='true'][appearance='outline']) .control,:host([aria-pressed='true'][appearance='transparent']) .control{background-color:${colorTransparentBackgroundSelected}}:host([aria-pressed='true'][appearance='outline']:hover) .control,:host([aria-pressed='true'][appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([aria-pressed='true'][appearance='outline']:active) .control,:host([aria-pressed='true'][appearance='transparent']:active) .control{background-color:${colorTransparentBackgroundPressed}}:host([aria-pressed='true'][appearance='transparent']) .control{border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host([aria-pressed='true'][appearance='transparent']:hover) .control{color:${colorNeutralForeground2BrandHover}}:host([aria-pressed='true'][appearance='transparent']:active) .control{color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([aria-pressed='true']) .control,:host([aria-pressed='true'][appearance='primary']) .control,:host([aria-pressed='true'][appearance='subtle']) .control,:host([aria-pressed='true'][appearance='outline']) .control,:host([aria-pressed='true'][appearance='transparent']) .control,:host([aria-pressed='true'][appearance='transparent']) .control{background:SelectedItem;color:SelectedItemText}`));
@@ -11810,4 +12191,4 @@ const setThemeFor = (element, theme) => {
   }
 };
 
-export { Accordion, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$p as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$p as AnchorButtonTemplate, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$o as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$m as AvatarStyles, template$o as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$n as BadgeDefinition, BadgeShape, BadgeSize, styles$l as BadgeStyles, template$n as BadgeTemplate, Button, ButtonAppearance, definition$m as ButtonDefinition, ButtonShape, ButtonSize, styles$o as ButtonStyles, template$m as ButtonTemplate, Checkbox, definition$l as CheckboxDefinition, CheckboxLabelPosition, CheckboxShape, CheckboxSize, styles$k as CheckboxStyles, template$l as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$k as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$j as CompoundButtonStyles, template$k as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$j as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$i as CounterBadgeStyles, template$j as CounterBadgeTemplate, Divider, DividerAlignContent, DividerAppearance, definition$i as DividerDefinition, DividerOrientation, DividerRole, styles$h as DividerStyles, template$i as DividerTemplate, FluentDesignSystem, Image, definition$h as ImageDefinition, ImageFit, ImageShape, styles$g as ImageStyles, template$h as ImageTemplate, Label, definition$g as LabelDefinition, styles$f as LabelStyles, template$g as LabelTemplate, Menu, MenuButton, MenuButtonAppearance, definition$e as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$o as MenuButtonStyles, template$e as MenuButtonTemplate, definition$f as MenuDefinition, MenuItem, definition$d as MenuItemDefinition, MenuItemRole, styles$d as MenuItemStyles, template$d as MenuItemTemplate, MenuList, definition$c as MenuListDefinition, styles$c as MenuListStyles, template$c as MenuListTemplate, styles$e as MenuStyles, template$f as MenuTemplate, ProgressBar, definition$b as ProgressBarDefinition, ProgressBarShape, styles$b as ProgressBarStyles, template$b as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$a as RadioDefinition, RadioGroup, definition$9 as RadioGroupDefinition, RadioGroupOrientation, styles$9 as RadioGroupStyles, template$9 as RadioGroupTemplate, styles$a as RadioStyles, template$a as RadioTemplate, Slider, definition$8 as SliderDefinition, SliderOrientation, SliderSize, styles$8 as SliderStyles, template$8 as SliderTemplate, Spinner, SpinnerAppearance, definition$7 as SpinnerDefinition, SpinnerSize, styles$7 as SpinnerStyles, template$7 as SpinnerTemplate, Switch, definition$6 as SwitchDefinition, SwitchLabelPosition, styles$6 as SwitchStyles, template$6 as SwitchTemplate, Tab, definition$4 as TabDefinition, TabPanel, definition$3 as TabPanelDefinition, styles$3 as TabPanelStyles, template$3 as TabPanelTemplate, styles$4 as TabStyles, template$4 as TabTemplate, Tabs, TabsAppearance, definition$5 as TabsDefinition, TabsOrientation, TabsSize, styles$5 as TabsStyles, template$5 as TabsTemplate, Text, TextAlign, definition$2 as TextDefinition, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$1 as TextInputDefinition, styles$1 as TextInputStyles, template$1 as TextInputTemplate, TextFieldType as TextInputType, TextSize, styles$2 as TextStyles, template$2 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles as ToggleButtonStyles, template as ToggleButtonTemplate, definition$r as accordionDefinition, definition$q as accordionItemDefinition, styles$p as accordionItemStyles, template$q as accordionItemTemplate, styles$q as accordionStyles, template$r as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, durationFast, durationFaster, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, setTheme, setThemeFor, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin };
+export { Accordion, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$q as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$q as AnchorButtonTemplate, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$p as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$n as AvatarStyles, template$p as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$o as BadgeDefinition, BadgeShape, BadgeSize, styles$m as BadgeStyles, template$o as BadgeTemplate, Button, ButtonAppearance, definition$n as ButtonDefinition, ButtonShape, ButtonSize, styles$p as ButtonStyles, template$n as ButtonTemplate, Checkbox, definition$m as CheckboxDefinition, CheckboxLabelPosition, CheckboxShape, CheckboxSize, styles$l as CheckboxStyles, template$m as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$l as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$k as CompoundButtonStyles, template$l as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$k as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$j as CounterBadgeStyles, template$k as CounterBadgeTemplate, Dialog, definition$j as DialogDefinition, styles$i as DialogStyles, template$j as DialogTemplate, Divider, DividerAlignContent, DividerAppearance, definition$i as DividerDefinition, DividerOrientation, DividerRole, styles$h as DividerStyles, template$i as DividerTemplate, FluentDesignSystem, Image, definition$h as ImageDefinition, ImageFit, ImageShape, styles$g as ImageStyles, template$h as ImageTemplate, Label, definition$g as LabelDefinition, styles$f as LabelStyles, template$g as LabelTemplate, Menu, MenuButton, MenuButtonAppearance, definition$e as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$p as MenuButtonStyles, template$e as MenuButtonTemplate, definition$f as MenuDefinition, MenuItem, definition$d as MenuItemDefinition, MenuItemRole, styles$d as MenuItemStyles, template$d as MenuItemTemplate, MenuList, definition$c as MenuListDefinition, styles$c as MenuListStyles, template$c as MenuListTemplate, styles$e as MenuStyles, template$f as MenuTemplate, ProgressBar, definition$b as ProgressBarDefinition, ProgressBarShape, styles$b as ProgressBarStyles, template$b as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$a as RadioDefinition, RadioGroup, definition$9 as RadioGroupDefinition, RadioGroupOrientation, styles$9 as RadioGroupStyles, template$9 as RadioGroupTemplate, styles$a as RadioStyles, template$a as RadioTemplate, Slider, definition$8 as SliderDefinition, SliderOrientation, SliderSize, styles$8 as SliderStyles, template$8 as SliderTemplate, Spinner, SpinnerAppearance, definition$7 as SpinnerDefinition, SpinnerSize, styles$7 as SpinnerStyles, template$7 as SpinnerTemplate, Switch, definition$6 as SwitchDefinition, SwitchLabelPosition, styles$6 as SwitchStyles, template$6 as SwitchTemplate, Tab, definition$4 as TabDefinition, TabPanel, definition$3 as TabPanelDefinition, styles$3 as TabPanelStyles, template$3 as TabPanelTemplate, styles$4 as TabStyles, template$4 as TabTemplate, Tabs, TabsAppearance, definition$5 as TabsDefinition, TabsOrientation, TabsSize, styles$5 as TabsStyles, template$5 as TabsTemplate, Text, TextAlign, definition$2 as TextDefinition, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$1 as TextInputDefinition, styles$1 as TextInputStyles, template$1 as TextInputTemplate, TextFieldType as TextInputType, TextSize, styles$2 as TextStyles, template$2 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles as ToggleButtonStyles, template as ToggleButtonTemplate, definition$s as accordionDefinition, definition$r as accordionItemDefinition, styles$q as accordionItemStyles, template$r as accordionItemTemplate, styles$r as accordionStyles, template$s as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, durationFast, durationFaster, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, setTheme, setThemeFor, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin };