@fluentui/web-components 3.0.0-alpha.21 → 3.0.0-alpha.23

package/dist/web-components.js

@@ -7207,6 +7207,213 @@ class FASTMenu extends FASTElement {
 FASTMenu.focusableElementRoles = MenuItemRole;
 __decorate([observable], FASTMenu.prototype, "items", void 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");
+  }
+}
+
+/**
+ * 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(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
+applyMixins(FASTTextField, StartEnd, DelegatesARIATextbox);
+
 /**
  * A base class for progress components.
  * @public
@@ -8623,6 +8830,17 @@ __decorate([observable], FASTTabs.prototype, "tabs", void 0);
 __decorate([observable], FASTTabs.prototype, "tabpanels", void 0);
 applyMixins(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>`;
+}
+
 /**
  * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
  * @public
@@ -8644,9 +8862,9 @@ function display(displayValue) {
  */
 class Accordion extends FASTAccordion {}
 
-const template$o = accordionTemplate();
+const template$p = accordionTemplate();
 
-const styles$n = css`
+const styles$o = css`
   ${display('flex')}
 
   :host{flex-direction:column;width:100%;contain:content}`;
@@ -8666,10 +8884,10 @@ const FluentDesignSystem = Object.freeze({
  * @remarks
  * HTML Element: \<fluent-accordion\>
  */
-const definition$o = Accordion.compose({
+const definition$p = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$o,
-  styles: styles$n
+  template: template$p,
+  styles: styles$o
 });
 
 /**
@@ -9489,7 +9707,7 @@ var tokens = /*#__PURE__*/Object.freeze({
     shadow64Brand: shadow64Brand
 });
 
-const styles$m = css`
+const styles$n = 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}`;
@@ -9524,7 +9742,7 @@ const chevronDown20Filled = html.partial(`<svg
  * The template for the fluent-accordion component.
  * @public
  */
-const template$n = accordionItemTemplate({
+const template$o = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
@@ -9538,10 +9756,10 @@ const template$n = accordionItemTemplate({
  * @remarks
  * HTML Element: \<fluent-accordion-item\>
  */
-const definition$n = AccordionItem.compose({
+const definition$o = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$n,
-  styles: styles$m
+  template: template$o,
+  styles: styles$n
 });
 
 /**
@@ -9678,18 +9896,18 @@ const AnchorButtonSize = ButtonSize;
  * The template for the Button component.
  * @public
  */
-const template$m = anchorTemplate();
+const template$n = anchorTemplate();
 
 // Need to support icon hover styles
-const styles$l = css`
+const styles$m = 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}`;
 
 // Need to support icon hover styles
-const styles$k = css`
-  ${styles$l}
+const styles$l = css`
+  ${styles$m}
 
   .content{text-align:center}`;
 
@@ -9701,10 +9919,10 @@ const styles$k = css`
  * @remarks
  * HTML Element: \<fluent-anchor-button\>
  */
-const definition$m = AnchorButton.compose({
+const definition$n = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
-  template: template$m,
-  styles: styles$k,
+  template: template$n,
+  styles: styles$l,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -9961,7 +10179,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$l = avatarTemplate();
+const template$m = avatarTemplate();
 
 const animations = {
   fastOutSlowInMax: curveDecelerateMax,
@@ -9977,7 +10195,7 @@ const animations = {
 /** Avatar styles
  * @public
  */
-const styles$j = css`
+const styles$k = 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}}`;
 
 /**
@@ -9987,10 +10205,10 @@ const styles$j = css`
  * @remarks
  * HTML Element: \<fluent-badge\>
  */
-const definition$l = Avatar.compose({
+const definition$m = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$l,
-  styles: styles$j
+  template: template$m,
+  styles: styles$k
 });
 
 /**
@@ -10077,7 +10295,7 @@ applyMixins(Badge, StartEnd);
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$k = badgeTemplate();
+const template$l = badgeTemplate();
 
 const textPadding = spacingHorizontalXXS;
 const badgeBaseStyles = css.partial`
@@ -10354,7 +10572,7 @@ const badgeTintStyles = css.partial`
 /** Badge styles
  * @public
  */
-const styles$i = css`
+const styles$j = 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}
@@ -10372,10 +10590,10 @@ const styles$i = css`
  * @remarks
  * HTML Element: \<fluent-badge\>
  */
-const definition$k = Badge.compose({
+const definition$l = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$k,
-  styles: styles$i
+  template: template$l,
+  styles: styles$j
 });
 
 /**
@@ -10446,7 +10664,7 @@ __decorate([attr({
  * The template for the Button component.
  * @public
  */
-const template$j = buttonTemplate$1();
+const template$k = buttonTemplate$1();
 
 /**
  * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button },
@@ -10456,10 +10674,10 @@ const template$j = buttonTemplate$1();
  * @remarks
  * HTML Element: \<fluent-button\>
  */
-const definition$j = Button.compose({
+const definition$k = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
-  template: template$j,
-  styles: styles$l,
+  template: template$k,
+  styles: styles$m,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -10498,11 +10716,11 @@ function buttonTemplate(options = {}) {
  * The template for the Button component.
  * @public
  */
-const template$i = buttonTemplate();
+const template$j = buttonTemplate();
 
 // Need to support icon hover styles
-const styles$h = css`
-  ${styles$l}
+const styles$i = css`
+  ${styles$m}
 
   :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))
@@ -10517,10 +10735,10 @@ const styles$h = css`
  * @remarks
  * HTML Element: \<fluent-comopund-button\>
  */
-const definition$i = CompoundButton.compose({
+const definition$j = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
-  template: template$i,
-  styles: styles$h,
+  template: template$j,
+  styles: styles$i,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -10659,12 +10877,12 @@ function composeTemplate(options = {}) {
  * The template for the Counter Badge component.
  * @public
  */
-const template$h = composeTemplate();
+const template$i = composeTemplate();
 
 /** Badge styles
  * @public
  */
-const styles$g = css`
+const styles$h = 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}
@@ -10681,10 +10899,10 @@ const styles$g = css`
  * @remarks
  * HTML Element: \<fluent-counter-badge\>
  */
-const definition$h = CounterBadge.compose({
+const definition$i = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$h,
-  styles: styles$g
+  template: template$i,
+  styles: styles$h
 });
 
 /**
@@ -10726,12 +10944,12 @@ const DividerAppearance = {
  * Template for the Divider component
  * @public
  */
-const template$g = dividerTemplate();
+const template$h = dividerTemplate();
 
 /** Divider styles
  * @public
  */
-const styles$f = css`
+const styles$g = 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}}`;
@@ -10743,10 +10961,10 @@ const styles$f = css`
  * @remarks
  * HTML Element: \<fluent-divider\>
  */
-const definition$g = Divider.compose({
+const definition$h = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$g,
-  styles: styles$f
+  template: template$h,
+  styles: styles$g
 });
 
 /**
@@ -10791,13 +11009,13 @@ const ImageShape = {
  * Template for the Image component
  * @public
  */
-const template$f = html`<slot></slot>`;
+const template$g = html`<slot></slot>`;
 
 /** Image styles
  *
  * @public
  */
-const styles$e = css`
+const styles$f = 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}}`;
 
 /**
@@ -10807,10 +11025,10 @@ const styles$e = css`
  * @remarks
  * HTML Element: \<fluent-image\>
  */
-const definition$f = Image.compose({
+const definition$g = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
-  template: template$f,
-  styles: styles$e
+  template: template$g,
+  styles: styles$f
 });
 
 /**
@@ -10850,7 +11068,7 @@ __decorate([attr({
 /** Label styles
  * @public
  */
-const styles$d = css`
+const styles$e = 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}}`;
@@ -10862,7 +11080,7 @@ const styles$d = css`
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
 }
-const template$e = labelTemplate();
+const template$f = labelTemplate();
 
 /**
  * The Fluent Label Element.
@@ -10872,10 +11090,10 @@ const template$e = labelTemplate();
  * @remarks
  * HTML Element: \<fluent-label\>
  */
-const definition$e = Label.compose({
+const definition$f = Label.compose({
   name: `${FluentDesignSystem.prefix}-label`,
-  template: template$e,
-  styles: styles$d
+  template: template$f,
+  styles: styles$e
 });
 
 /**
@@ -10904,7 +11122,7 @@ const MenuButtonSize = ButtonSize;
  * The template for the Button component.
  * @public
  */
-const template$d = buttonTemplate$1({
+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>`)
 });
 
@@ -10916,10 +11134,10 @@ const template$d = buttonTemplate$1({
  * @remarks
  * HTML Element: \<fluent-button\>
  */
-const definition$d = MenuButton.compose({
+const definition$e = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
-  template: template$d,
-  styles: styles$l,
+  template: template$e,
+  styles: styles$m,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -10933,7 +11151,7 @@ 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$c = menuItemTemplate({
+const template$d = menuItemTemplate({
   checkboxIndicator: Checkmark16Filled,
   expandCollapseGlyph: chevronRight16Filled,
   radioIndicator: Checkmark16Filled
@@ -10942,7 +11160,7 @@ const template$c = menuItemTemplate({
 /** MenuItem styles
  * @public
  */
-const styles$c = css`
+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}`;
@@ -10956,10 +11174,10 @@ const styles$c = css`
  * @remarks
  * HTML Element: <fluent-menu-item>
  */
-const definition$c = MenuItem.compose({
+const definition$d = MenuItem.compose({
   name: `${FluentDesignSystem.prefix}-menu-item`,
-  template: template$c,
-  styles: styles$c
+  template: template$d,
+  styles: styles$d
 });
 
 /**
@@ -10996,12 +11214,12 @@ class MenuList extends FASTMenu {
   }
 }
 
-const template$b = menuTemplate();
+const template$c = menuTemplate();
 
 /** MenuList styles
  * @public
  */
-const styles$b = css`
+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}`;
@@ -11015,10 +11233,10 @@ const styles$b = css`
  * @remarks
  * HTML Element: <fluent-menu-list>
  */
-const definition$b = MenuList.compose({
+const definition$c = MenuList.compose({
   name: `${FluentDesignSystem.prefix}-menu-list`,
-  template: template$b,
-  styles: styles$b
+  template: template$c,
+  styles: styles$c
 });
 
 /**
@@ -11072,7 +11290,7 @@ const ProgressBarValidationState = {
 /** ProgressBar styles
  * @public
  */
-const styles$a = css`
+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(
@@ -11087,7 +11305,7 @@ const styles$a = css`
       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}}`;
 
-const template$a = progressTemplate({
+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>`
 });
@@ -11100,10 +11318,10 @@ const template$a = progressTemplate({
  * @remarks
  * HTML Element: \<fluent-progress-bar\>
  */
-const definition$a = ProgressBar.compose({
+const definition$b = ProgressBar.compose({
   name: `${FluentDesignSystem.prefix}-progress-bar`,
-  template: template$a,
-  styles: styles$a
+  template: template$b,
+  styles: styles$b
 });
 
 /**
@@ -11115,12 +11333,12 @@ class Radio extends FASTRadio {}
 /** Radio styles
  * @public
  */
-const styles$9 = css`
+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}}`;
 
-const template$9 = radioTemplate({
+const template$a = radioTemplate({
   checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`
 });
 
@@ -11132,10 +11350,10 @@ const template$9 = radioTemplate({
  * @remarks
  * HTML Element: \<fluent-radio\>
  */
-const definition$9 = Radio.compose({
+const definition$a = Radio.compose({
   name: `${FluentDesignSystem.prefix}-radio`,
-  template: template$9,
-  styles: styles$9
+  template: template$a,
+  styles: styles$a
 });
 
 /**
@@ -11162,12 +11380,12 @@ __decorate([attr({
 /** RadioGroup styles
  * @public
  */
-const styles$8 = css`
+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$8 = radioGroupTemplate();
+const template$9 = radioGroupTemplate();
 
 /**
  * The Fluent RadioGroup Element.
@@ -11177,10 +11395,10 @@ const template$8 = radioGroupTemplate();
  * @remarks
  * HTML Element: \<fluent-radio-group\>
  */
-const definition$8 = RadioGroup.compose({
+const definition$9 = RadioGroup.compose({
   name: `${FluentDesignSystem.prefix}-radio-group`,
-  template: template$8,
-  styles: styles$8
+  template: template$9,
+  styles: styles$9
 });
 
 /**
@@ -11242,12 +11460,12 @@ const SliderSize = {
 /** Text styles
  * @public
  */
-const styles$7 = css`
+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}`;
 
-const template$7 = sliderTemplate({
+const template$8 = sliderTemplate({
   thumb: `<div class="thumb-cursor" tabindex="0"></div>`
 });
 
@@ -11259,10 +11477,10 @@ const template$7 = sliderTemplate({
  * @remarks
  * HTML Element: \<fluent-slider\>
  */
-const definition$7 = Slider.compose({
+const definition$8 = Slider.compose({
   name: `${FluentDesignSystem.prefix}-slider`,
-  template: template$7,
-  styles: styles$7
+  template: template$8,
+  styles: styles$8
 });
 
 /**
@@ -11295,7 +11513,7 @@ const SpinnerSize = {
   huge: 'huge'
 };
 
-const template$6 = progressRingTemplate({
+const template$7 = progressRingTemplate({
   indeterminateIndicator: `
     <svg class="progress" part="progress" viewBox="0 0 16 16">
         <circle
@@ -11316,7 +11534,7 @@ const template$6 = progressRingTemplate({
   `
 });
 
-const styles$6 = css`
+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)}}`;
@@ -11330,10 +11548,10 @@ const styles$6 = css`
  * @remarks
  * HTML Element: \<fluent-spinner\>
  */
-const definition$6 = Spinner.compose({
+const definition$7 = Spinner.compose({
   name: `${FluentDesignSystem.prefix}-spinner`,
-  template: template$6,
-  styles: styles$6
+  template: template$7,
+  styles: styles$7
 });
 
 class Switch extends FASTSwitch {}
@@ -11351,11 +11569,11 @@ const SwitchLabelPosition = {
   before: 'before'
 };
 
-const template$5 = switchTemplate({
+const template$6 = switchTemplate({
   switch: `<span class="checked-indicator" part="checked-indicator"></span>`
 });
 
-const styles$5 = css`
+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%;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:transform}:host([aria-checked='true']) .checked-indicator{background-color:${colorNeutralForegroundInverted};transform:translateX(20px)}: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}}`;
@@ -11367,10 +11585,10 @@ const styles$5 = css`
  * @remarks
  * HTML Element: \<fluent-switch\>
  */
-const definition$5 = Switch.compose({
+const definition$6 = Switch.compose({
   name: `${FluentDesignSystem.prefix}-switch`,
-  template: template$5,
-  styles: styles$5
+  template: template$6,
+  styles: styles$6
 });
 
 const TabsAppearance = {
@@ -11532,17 +11750,17 @@ __decorate([attr({
 })], Tabs.prototype, "disabled", void 0);
 __decorate([attr], Tabs.prototype, "size", void 0);
 
-const template$4 = tabsTemplate({});
+const template$5 = tabsTemplate({});
 
-const styles$4 = css`
+const styles$5 = css`
   ${display('grid')}
 
   :host{box-sizing:border-box;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};color:${colorNeutralForeground2};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab:hover):before{content:unset}:host ::slotted(fluent-tab){border-radius:${borderRadiusMedium}}:host ::slotted(fluent-tab[aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}.tablist{display:grid;grid-template-rows:auto auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end;box-sizing:border-box}::slotted([slot='start']),::slotted([slot='end']){display:flex;align-self:center}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host([orientation='vertical']){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host([orientation='vertical']) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host([orientation='vertical']) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host([orientation='vertical']) ::slotted([slot='end']){grid-row:3}:host([appearance='subtle']) ::slotted(fluent-tab:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted(fluent-tab:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}:host([size='small']) ::slotted(fluent-tab){font-size:${fontSizeBase300};line-height:${lineHeightBase300};padding:${spacingVerticalSNudge} ${spacingHorizontalSNudge}}:host([size='large']) ::slotted(fluent-tab){font-size:${fontSizeBase400};line-height:${lineHeightBase400};padding:${spacingVerticalL} ${spacingHorizontalMNudge}}:host ::slotted(fluent-tab[data-animate='true'])::after{transition-property:transform;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax}}:host ::slotted(fluent-tab)::after{height:${strokeWidthThicker};margin-top:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted(fluent-tab)::after{width:${strokeWidthThicker};height:unset;margin-top:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted(fluent-tab)::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;margin-top:auto}:host([orientation='vertical']) ::slotted(fluent-tab)::before{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-top:auto;transform-origin:left}:host([orientation='vertical']) ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:unset;margin-inline-end:auto;transform-origin:top;width:${strokeWidthThicker}}:host([orientation='vertical']) ::slotted(fluent-tab){align-items:flex-start;grid-column:2;padding-top:${spacingVerticalSNudge};padding-bottom:${spacingVerticalSNudge}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab){padding-top:${spacingVerticalXXS};padding-bottom:${spacingVerticalXXS}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab){padding-top:${spacingVerticalS};padding-bottom:${spacingVerticalS}}:host([size='small']) ::slotted(fluent-tab)::after,:host([size='small']) ::slotted(fluent-tab)::before,:host([size='small']) ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalSNudge};left:${spacingHorizontalSNudge}}:host ::slotted(fluent-tab)::after,:host ::slotted(fluent-tab)::before,:host ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalMNudge};left:${spacingHorizontalMNudge}}:host([size='large']) ::slotted(fluent-tab)::after,:host([size='large']) ::slotted(fluent-tab)::before,:host([size='large']) ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalMNudge};left:${spacingHorizontalMNudge}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalSNudge};bottom:${spacingVerticalSNudge}}:host([orientation='vertical']) ::slotted(fluent-tab)::after,:host([orientation='vertical']) ::slotted(fluent-tab)::before,:host([orientation='vertical']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalS};bottom:${spacingVerticalS}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalMNudge};bottom:${spacingVerticalMNudge}}`;
 
-const definition$4 = Tabs.compose({
+const definition$5 = Tabs.compose({
   name: `${FluentDesignSystem.prefix}-tabs`,
-  template: template$4,
-  styles: styles$4
+  template: template$5,
+  styles: styles$5
 });
 
 /**
@@ -11563,32 +11781,32 @@ class Tab extends FASTTab {
 function tabTemplate(options = {}) {
   return html`<template slot="tab" role="tab" aria-disabled="${x => x.disabled}">${startSlotTemplate(options)}<span class="tab-content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$3 = tabTemplate({});
+const template$4 = tabTemplate({});
 
-const styles$3 = css`
+const styles$4 = css`
   ${display('inline-flex')}
 
   :host{position:relative;flex-direction:column;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-size:${fontSizeBase300};color:${colorNeutralForeground2};fill:currentcolor;grid-row:1;padding:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium}}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:${colorNeutralForeground1};font-weight:${fontWeightSemibold}}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:${lineHeightBase300};font-weight:${fontWeightSemibold}}:host([aria-selected='true'])::after{background-color:${colorCompoundBrandStroke};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:${colorNeutralStroke1Hover};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:${colorNeutralForegroundDisabled}}::slotted([slot='start']),::slotted([slot='end']){display:flex}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}:host([disabled]){cursor:not-allowed;fill:${colorNeutralForegroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}`;
 
-const definition$3 = Tab.compose({
+const definition$4 = Tab.compose({
   name: `${FluentDesignSystem.prefix}-tab`,
-  template: template$3,
-  styles: styles$3
+  template: template$4,
+  styles: styles$4
 });
 
 class TabPanel extends FASTTabPanel {}
 
-const template$2 = tabPanelTemplate();
+const template$3 = tabPanelTemplate();
 
-const styles$2 = css`
+const styles$3 = css`
   ${display('block')}
 
   :host{box-sizing:border-box;padding:${spacingHorizontalM} ${spacingHorizontalMNudge}}`;
 
-const definition$2 = TabPanel.compose({
+const definition$3 = TabPanel.compose({
   name: `${FluentDesignSystem.prefix}-tab-panel`,
-  template: template$2,
-  styles: styles$2
+  template: template$3,
+  styles: styles$3
 });
 
 /**
@@ -11722,12 +11940,12 @@ const TextAlign = {
 /**
  * @internal
  */
-const template$1 = html`<slot></slot>`;
+const template$2 = html`<slot></slot>`;
 
 /** Text styles
  * @public
  */
-const styles$1 = css`
+const styles$2 = css`
   ${display('inline')}
 
   :host{contain:content}::slotted(*){font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start;white-space:normal;overflow:visible;text-overflow:clip;margin:0;display:inline}:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]),:host([block]) ::slotted(*){display:block}:host([italic]) ::slotted(*){font-style:italic}:host([underline]) ::slotted(*){text-decoration-line:underline}:host([strikethrough]) ::slotted(*){text-decoration-line:line-through}:host([underline][strikethrough]) ::slotted(*){text-decoration-line:line-through underline}:host([size='100']) ::slotted(*){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']) ::slotted(*){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']) ::slotted(*){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']) ::slotted(*){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']) ::slotted(*){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']) ::slotted(*){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']) ::slotted(*){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']) ::slotted(*){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']) ::slotted(*){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']) ::slotted(*){font-family:${fontFamilyMonospace}}:host([font='numeric']) ::slotted(*){font-family:${fontFamilyNumeric}}:host([weight='medium']) ::slotted(*){font-weight:${fontWeightMedium}}:host([weight='semibold']) ::slotted(*){font-weight:${fontWeightSemibold}}:host([weight='bold']) ::slotted(*){font-weight:${fontWeightBold}}:host([align='center']) ::slotted(*){text-align:center}:host([align='end']) ::slotted(*){text-align:end}:host([align='justify']) ::slotted(*){text-align:justify}`;
@@ -11740,8 +11958,65 @@ const styles$1 = css`
  * @remarks
  * HTML Element: \<fluent-text\>
  */
-const definition$1 = Text.compose({
+const definition$2 = Text.compose({
   name: `${FluentDesignSystem.prefix}-text`,
+  template: template$2,
+  styles: styles$2
+});
+
+/**
+ * The base class used for constructing a fluent-text-input custom element
+ * @public
+ */
+class TextInput extends FASTTextField {}
+__decorate([attr({
+  attribute: 'control-size'
+})], TextInput.prototype, "controlSize", void 0);
+__decorate([attr], TextInput.prototype, "appearance", void 0);
+
+/**
+ * TextInput size constants
+ * @public
+ */
+const TextInputControlSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+};
+/**
+ * TextInput appearance constants
+ * @public
+ */
+const TextInputAppearance = {
+  outline: 'outline',
+  underline: 'underline',
+  filledLighter: 'filled-lighter',
+  filledDarker: 'filled-darker'
+};
+
+/**
+ * @internal
+ */
+const template$1 = textFieldTemplate();
+
+/** TextInput styles
+ * @public
+ */
+const styles$1 = css`
+  ${display('block')}
+
+  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label__hidden{display:none}.root{position:relative;box-sizing:border-box;height:32px;display:inline-flex;align-items:center;flex-direction:row;width:100%;padding:0 ${spacingHorizontalMNudge};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};gap:${spacingHorizontalXXS}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;background:transparent;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+
+/**
+ * The Fluent TextInput Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-text-input\>
+ */
+const definition$1 = TextInput.compose({
+  name: `${FluentDesignSystem.prefix}-text-input`,
   template: template$1,
   styles: styles$1
 });
@@ -11864,7 +12139,7 @@ const template = buttonTemplate$1();
 
 // Need to support icon hover styles
 const styles = css`
-  ${styles$l}
+  ${styles$m}
 
   :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}}`;
 
@@ -11896,4 +12171,4 @@ const setTheme = theme => {
   }
 };
 
-export { Accordion, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$m as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$m as AnchorButtonTemplate, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$l as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$j as AvatarStyles, template$l as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$k as BadgeDefinition, BadgeShape, BadgeSize, styles$i as BadgeStyles, template$k as BadgeTemplate, Button, ButtonAppearance, definition$j as ButtonDefinition, ButtonShape, ButtonSize, styles$l as ButtonStyles, template$j as ButtonTemplate, CompoundButton, CompoundButtonAppearance, definition$i as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$h as CompoundButtonStyles, template$i as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$h as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$g as CounterBadgeStyles, template$h as CounterBadgeTemplate, Divider, DividerAlignContent, DividerAppearance, definition$g as DividerDefinition, DividerOrientation, DividerRole, styles$f as DividerStyles, template$g as DividerTemplate, Image, definition$f as ImageDefinition, ImageFit, ImageShape, styles$e as ImageStyles, template$f as ImageTemplate, Label, definition$e as LabelDefinition, styles$d as LabelStyles, template$e as LabelTemplate, MenuButton, MenuButtonAppearance, definition$d as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$l as MenuButtonStyles, template$d as MenuButtonTemplate, MenuItem, definition$c as MenuItemDefinition, styles$c as MenuItemStyles, template$c as MenuItemTemplate, MenuList, definition$b as MenuListDefinition, styles$b as MenuListStyles, template$b as MenuListTemplate, ProgressBar, definition$a as ProgressBarDefinition, ProgressBarShape, styles$a as ProgressBarStyles, template$a as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$9 as RadioDefinition, RadioGroup, definition$8 as RadioGroupDefinition, RadioGroupOrientation, styles$8 as RadioGroupStyles, template$8 as RadioGroupTemplate, styles$9 as RadioStyles, template$9 as RadioTemplate, Slider, definition$7 as SliderDefinition, SliderOrientation, SliderSize, styles$7 as SliderStyles, template$7 as SliderTemplate, Spinner, SpinnerAppearance, definition$6 as SpinnerDefinition, SpinnerSize, styles$6 as SpinnerStyles, template$6 as SpinnerTemplate, Switch, definition$5 as SwitchDefinition, SwitchLabelPosition, styles$5 as SwitchStyles, template$5 as SwitchTemplate, Tab, definition$3 as TabDefinition, TabPanel, definition$2 as TabPanelDefinition, styles$2 as TabPanelStyles, template$2 as TabPanelTemplate, styles$3 as TabStyles, template$3 as TabTemplate, Tabs, TabsAppearance, definition$4 as TabsDefinition, TabsOrientation, TabsSize, styles$4 as TabsStyles, template$4 as TabsTemplate, Text, TextAlign, definition$1 as TextDefinition, TextFont, TextSize, styles$1 as TextStyles, template$1 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles as ToggleButtonStyles, template as ToggleButtonTemplate, definition$o as accordionDefinition, definition$n as accordionItemDefinition, styles$m as accordionItemStyles, template$n as accordionItemTemplate, styles$n as accordionStyles, template$o 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, 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$n as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$n as AnchorButtonTemplate, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$m as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$k as AvatarStyles, template$m as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$l as BadgeDefinition, BadgeShape, BadgeSize, styles$j as BadgeStyles, template$l as BadgeTemplate, Button, ButtonAppearance, definition$k as ButtonDefinition, ButtonShape, ButtonSize, styles$m as ButtonStyles, template$k as ButtonTemplate, CompoundButton, CompoundButtonAppearance, definition$j as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$i as CompoundButtonStyles, template$j as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$i as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$h as CounterBadgeStyles, template$i as CounterBadgeTemplate, Divider, DividerAlignContent, DividerAppearance, definition$h as DividerDefinition, DividerOrientation, DividerRole, styles$g as DividerStyles, template$h as DividerTemplate, Image, definition$g as ImageDefinition, ImageFit, ImageShape, styles$f as ImageStyles, template$g as ImageTemplate, Label, definition$f as LabelDefinition, styles$e as LabelStyles, template$f as LabelTemplate, MenuButton, MenuButtonAppearance, definition$e as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$m as MenuButtonStyles, template$e as MenuButtonTemplate, 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, 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$p as accordionDefinition, definition$o as accordionItemDefinition, styles$n as accordionItemStyles, template$o as accordionItemTemplate, styles$o as accordionStyles, template$p 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, 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 };