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

package/dist/web-components.js

@@ -3208,7 +3208,9 @@ function accordionItemTemplate(options = {}) {
 const keyArrowDown = "ArrowDown";
 const keyArrowUp = "ArrowUp";
 const keyEnd = "End";
+const keyEnter = "Enter";
 const keyHome = "Home";
+const keySpace = " ";
 
 /**
  * This method keeps a given value within the bounds of a min and max value. If the value
@@ -3562,6 +3564,465 @@ function accordionTemplate() {
   })}></slot></template>`;
 }
 
+const proxySlotName = "form-associated-proxy";
+const ElementInternalsKey = "ElementInternals";
+/**
+ * @alpha
+ */
+const supportsElementInternals = ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
+const InternalsMap = new WeakMap();
+/**
+ * Base function for providing Custom Element Form Association.
+ *
+ * @beta
+ */
+function FormAssociated(BaseCtor) {
+  const C = class extends BaseCtor {
+    constructor(...args) {
+      super(...args);
+      /**
+       * Track whether the value has been changed from the initial value
+       */
+      this.dirtyValue = false;
+      /**
+       * Sets the element's disabled state. A disabled element will not be included during form submission.
+       *
+       * @remarks
+       * HTML Attribute: disabled
+       */
+      this.disabled = false;
+      /**
+       * These are events that are still fired by the proxy
+       * element based on user / programmatic interaction.
+       *
+       * The proxy implementation should be transparent to
+       * the app author, so block these events from emitting.
+       */
+      this.proxyEventsToBlock = ["change", "click"];
+      this.proxyInitialized = false;
+      this.required = false;
+      this.initialValue = this.initialValue || "";
+      if (!this.elementInternals) {
+        // When elementInternals is not supported, formResetCallback is
+        // bound to an event listener, so ensure the handler's `this`
+        // context is correct.
+        this.formResetCallback = this.formResetCallback.bind(this);
+      }
+    }
+    /**
+     * Must evaluate to true to enable elementInternals.
+     * Feature detects API support and resolve respectively
+     *
+     * @internal
+     */
+    static get formAssociated() {
+      return supportsElementInternals;
+    }
+    /**
+     * Returns the validity state of the element
+     *
+     * @beta
+     */
+    get validity() {
+      return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
+    }
+    /**
+     * Retrieve a reference to the associated form.
+     * Returns null if not associated to any form.
+     *
+     * @beta
+     */
+    get form() {
+      return this.elementInternals ? this.elementInternals.form : this.proxy.form;
+    }
+    /**
+     * Retrieve the localized validation message,
+     * or custom validation message if set.
+     *
+     * @beta
+     */
+    get validationMessage() {
+      return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
+    }
+    /**
+     * Whether the element will be validated when the
+     * form is submitted
+     */
+    get willValidate() {
+      return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
+    }
+    /**
+     * A reference to all associated label elements
+     */
+    get labels() {
+      if (this.elementInternals) {
+        return Object.freeze(Array.from(this.elementInternals.labels));
+      } else if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {
+        // Labels associated by wrapping the element: <label><custom-element></custom-element></label>
+        const parentLabels = this.proxy.labels;
+        // Labels associated using the `for` attribute
+        const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
+        const labels = parentLabels ? forLabels.concat(Array.from(parentLabels)) : forLabels;
+        return Object.freeze(labels);
+      } else {
+        return emptyArray;
+      }
+    }
+    /**
+     * Invoked when the `value` property changes
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `valueChanged` method
+     * They must be sure to invoke `super.valueChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    valueChanged(previous, next) {
+      this.dirtyValue = true;
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.value = this.value;
+      }
+      this.currentValue = this.value;
+      this.setFormValue(this.value);
+      this.validate();
+    }
+    currentValueChanged() {
+      this.value = this.currentValue;
+    }
+    /**
+     * Invoked when the `initialValue` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `initialValueChanged` method
+     * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    initialValueChanged(previous, next) {
+      // If the value is clean and the component is connected to the DOM
+      // then set value equal to the attribute value.
+      if (!this.dirtyValue) {
+        this.value = this.initialValue;
+        this.dirtyValue = false;
+      }
+    }
+    /**
+     * Invoked when the `disabled` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `disabledChanged` method
+     * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    disabledChanged(previous, next) {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.disabled = this.disabled;
+      }
+      Updates.enqueue(() => this.classList.toggle("disabled", this.disabled));
+    }
+    /**
+     * Invoked when the `name` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `nameChanged` method
+     * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    nameChanged(previous, next) {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.name = this.name;
+      }
+    }
+    /**
+     * Invoked when the `required` property changes
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `requiredChanged` method
+     * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    requiredChanged(prev, next) {
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.required = this.required;
+      }
+      Updates.enqueue(() => this.classList.toggle("required", this.required));
+      this.validate();
+    }
+    /**
+     * The element internals object. Will only exist
+     * in browsers supporting the attachInternals API
+     */
+    get elementInternals() {
+      if (!supportsElementInternals) {
+        return null;
+      }
+      let internals = InternalsMap.get(this);
+      if (!internals) {
+        internals = this.attachInternals();
+        InternalsMap.set(this, internals);
+      }
+      return internals;
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("keypress", this._keypressHandler);
+      if (!this.value) {
+        this.value = this.initialValue;
+        this.dirtyValue = false;
+      }
+      if (!this.elementInternals) {
+        this.attachProxy();
+        if (this.form) {
+          this.form.addEventListener("reset", this.formResetCallback);
+        }
+      }
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+      this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
+      if (!this.elementInternals && this.form) {
+        this.form.removeEventListener("reset", this.formResetCallback);
+      }
+    }
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.elementInternals ? this.elementInternals.checkValidity() : this.proxy.checkValidity();
+    }
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.elementInternals ? this.elementInternals.reportValidity() : this.proxy.reportValidity();
+    }
+    /**
+     * Set the validity of the control. In cases when the elementInternals object is not
+     * available (and the proxy element is used to report validity), this function will
+     * do nothing unless a message is provided, at which point the setCustomValidity method
+     * of the proxy element will be invoked with the provided message.
+     * @param flags - Validity flags
+     * @param message - Optional message to supply
+     * @param anchor - Optional element used by UA to display an interactive validation UI
+     */
+    setValidity(flags, message, anchor) {
+      if (this.elementInternals) {
+        this.elementInternals.setValidity(flags, message, anchor);
+      } else if (typeof message === "string") {
+        this.proxy.setCustomValidity(message);
+      }
+    }
+    /**
+     * Invoked when a connected component's form or fieldset has its disabled
+     * state changed.
+     * @param disabled - the disabled value of the form / fieldset
+     */
+    formDisabledCallback(disabled) {
+      this.disabled = disabled;
+    }
+    formResetCallback() {
+      this.value = this.initialValue;
+      this.dirtyValue = false;
+    }
+    /**
+     * Attach the proxy element to the DOM
+     */
+    attachProxy() {
+      var _a;
+      if (!this.proxyInitialized) {
+        this.proxyInitialized = true;
+        this.proxy.style.display = "none";
+        this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation));
+        // These are typically mapped to the proxy during
+        // property change callbacks, but during initialization
+        // on the initial call of the callback, the proxy is
+        // still undefined. We should find a better way to address this.
+        this.proxy.disabled = this.disabled;
+        this.proxy.required = this.required;
+        if (typeof this.name === "string") {
+          this.proxy.name = this.name;
+        }
+        if (typeof this.value === "string") {
+          this.proxy.value = this.value;
+        }
+        this.proxy.setAttribute("slot", proxySlotName);
+        this.proxySlot = document.createElement("slot");
+        this.proxySlot.setAttribute("name", proxySlotName);
+      }
+      (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(this.proxySlot);
+      this.appendChild(this.proxy);
+    }
+    /**
+     * Detach the proxy element from the DOM
+     */
+    detachProxy() {
+      var _a;
+      this.removeChild(this.proxy);
+      (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);
+    }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(anchor) {
+      if (this.proxy instanceof HTMLElement) {
+        this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
+      }
+    }
+    /**
+     * Associates the provided value (and optional state) with the parent form.
+     * @param value - The value to set
+     * @param state - The state object provided to during session restores and when autofilling.
+     */
+    setFormValue(value, state) {
+      if (this.elementInternals) {
+        this.elementInternals.setFormValue(value, state || value);
+      }
+    }
+    _keypressHandler(e) {
+      switch (e.key) {
+        case keyEnter:
+          if (this.form instanceof HTMLFormElement) {
+            // Implicit submission
+            const defaultButton = this.form.querySelector("[type=submit]");
+            defaultButton === null || defaultButton === void 0 ? void 0 : defaultButton.click();
+          }
+          break;
+      }
+    }
+    /**
+     * Used to stop propagation of proxy element events
+     * @param e - Event object
+     */
+    stopPropagation(e) {
+      e.stopPropagation();
+    }
+  };
+  attr({
+    mode: "boolean"
+  })(C.prototype, "disabled");
+  attr({
+    mode: "fromView",
+    attribute: "value"
+  })(C.prototype, "initialValue");
+  attr({
+    attribute: "current-value"
+  })(C.prototype, "currentValue");
+  attr(C.prototype, "name");
+  attr({
+    mode: "boolean"
+  })(C.prototype, "required");
+  observable(C.prototype, "value");
+  return C;
+}
+/**
+ * Creates a checkable form associated component.
+ * @beta
+ */
+function CheckableFormAssociated(BaseCtor) {
+  class C extends FormAssociated(BaseCtor) {}
+  class D extends C {
+    constructor(...args) {
+      super(args);
+      /**
+       * Tracks whether the "checked" property has been changed.
+       * This is necessary to provide consistent behavior with
+       * normal input checkboxes
+       */
+      this.dirtyChecked = false;
+      /**
+       * Provides the default checkedness of the input element
+       * Passed down to proxy
+       *
+       * @public
+       * @remarks
+       * HTML Attribute: checked
+       */
+      this.checkedAttribute = false;
+      /**
+       * The checked state of the control.
+       *
+       * @public
+       */
+      this.checked = false;
+      // Re-initialize dirtyChecked because initialization of other values
+      // causes it to become true
+      this.dirtyChecked = false;
+    }
+    checkedAttributeChanged() {
+      this.defaultChecked = this.checkedAttribute;
+    }
+    /**
+     * @internal
+     */
+    defaultCheckedChanged() {
+      if (!this.dirtyChecked) {
+        // Setting this.checked will cause us to enter a dirty state,
+        // but if we are clean when defaultChecked is changed, we want to stay
+        // in a clean state, so reset this.dirtyChecked
+        this.checked = this.defaultChecked;
+        this.dirtyChecked = false;
+      }
+    }
+    checkedChanged(prev, next) {
+      if (!this.dirtyChecked) {
+        this.dirtyChecked = true;
+      }
+      this.currentChecked = this.checked;
+      this.updateForm();
+      if (this.proxy instanceof HTMLInputElement) {
+        this.proxy.checked = this.checked;
+      }
+      if (prev !== undefined) {
+        this.$emit("change");
+      }
+      this.validate();
+    }
+    currentCheckedChanged(prev, next) {
+      this.checked = this.currentChecked;
+    }
+    updateForm() {
+      const value = this.checked ? this.value : null;
+      this.setFormValue(value, value);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.updateForm();
+    }
+    formResetCallback() {
+      super.formResetCallback();
+      this.checked = !!this.checkedAttribute;
+      this.dirtyChecked = false;
+    }
+  }
+  attr({
+    attribute: "checked",
+    mode: "boolean"
+  })(D.prototype, "checkedAttribute");
+  attr({
+    attribute: "current-checked",
+    converter: booleanConverter
+  })(D.prototype, "currentChecked");
+  observable(D.prototype, "defaultChecked");
+  observable(D.prototype, "checked");
+  return D;
+}
+
 class DerivedValueEvaluator {
   constructor(value) {
     this.value = value;
@@ -4547,6 +5008,99 @@ function progressTemplate(options = {}) {
   return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<div class="progress" part="progress" slot="determinate"><div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div></div>`)} ${when(x => typeof x.value !== "number", html`<div class="progress" part="progress" slot="indeterminate"><slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator1)} ${staticallyCompose(options.indeterminateIndicator2)}</slot></div>`)}</template>`;
 }
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#(FASTSwitch:class)} component.
+ * @public
+ */
+function switchTemplate(options = {}) {
+  return html`<template role="switch" aria-checked="${x => x.checked}" aria-disabled="${x => x.disabled}" aria-readonly="${x => x.readOnly}" tabindex="${x => x.disabled ? null : 0}" @keypress="${(x, c) => x.keypressHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><label part="label" class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"><slot ${slotted("defaultSlottedNodes")}></slot></label><div part="switch" class="switch"><slot name="switch">${staticallyCompose(options.switch)}</slot></div></template>`;
+}
+
+class _Switch extends FASTElement {}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(FASTSwitch:class)} component.
+ *
+ * @beta
+ */
+class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+/**
+ * A Switch Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
+ *
+ * @slot - The deafult slot for the label
+ * @slot checked-message - The message when in a checked state
+ * @slot unchecked-message - The message when in an unchecked state
+ * @csspart label - The label
+ * @csspart switch - The element representing the switch, which wraps the indicator
+ * @csspart status-message - The wrapper for the status messages
+ * @csspart checked-message - The checked message
+ * @csspart unchecked-message - The unchecked message
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+class FASTSwitch extends FormAssociatedSwitch {
+  constructor() {
+    super();
+    /**
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="checkbox"]
+     *
+     * @internal
+     */
+    this.initialValue = "on";
+    /**
+     * @internal
+     */
+    this.keypressHandler = e => {
+      if (this.readOnly) {
+        return;
+      }
+      switch (e.key) {
+        case keyEnter:
+        case keySpace:
+          this.checked = !this.checked;
+          break;
+      }
+    };
+    /**
+     * @internal
+     */
+    this.clickHandler = e => {
+      if (!this.disabled && !this.readOnly) {
+        this.checked = !this.checked;
+      }
+    };
+    this.proxy.setAttribute("type", "checkbox");
+  }
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
+  }
+  /**
+   * @internal
+   */
+  checkedChanged(prev, next) {
+    super.checkedChanged(prev, next);
+    /**
+     * @deprecated - this behavior already exists in the template and should not exist in the class.
+     */
+    this.checked ? this.classList.add("checked") : this.classList.remove("checked");
+  }
+}
+__decorate([attr({
+  attribute: "readonly",
+  mode: "boolean"
+})], FASTSwitch.prototype, "readOnly", void 0);
+__decorate([observable], FASTSwitch.prototype, "defaultSlottedNodes", void 0);
+
 /**
  * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
  * @public
@@ -4568,9 +5122,9 @@ function display(displayValue) {
  */
 class Accordion extends FASTAccordion {}
 
-const template$6 = accordionTemplate();
+const template$7 = accordionTemplate();
 
-const styles$6 = css`
+const styles$7 = css`
   ${display('flex')}
 
   :host{flex-direction:column;width:100%}`;
@@ -4590,10 +5144,10 @@ const FluentDesignSystem = Object.freeze({
  * @remarks
  * HTML Element: \<fluent-accordion\>
  */
-const definition$6 = Accordion.compose({
+const definition$7 = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$6,
-  styles: styles$6
+  template: template$7,
+  styles: styles$7
 });
 
 /**
@@ -5403,7 +5957,7 @@ var tokens = /*#__PURE__*/Object.freeze({
 	shadow64Brand: shadow64Brand
 });
 
-const styles$5 = css`
+const styles$6 = css`
   ${display('block')}
 
   :host{max-width:fit-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}`;
@@ -5438,7 +5992,7 @@ const chevronDown20Filled = html.partial(`<svg
  * The template for the fluent-accordion component.
  * @public
  */
-const template$5 = accordionItemTemplate({
+const template$6 = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
@@ -5452,10 +6006,10 @@ const template$5 = accordionItemTemplate({
  * @remarks
  * HTML Element: \<fluent-accordion-item\>
  */
-const definition$5 = AccordionItem.compose({
+const definition$6 = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$5,
-  styles: styles$5
+  template: template$6,
+  styles: styles$6
 });
 
 /**
@@ -5542,7 +6096,7 @@ applyMixins(Badge, StartEnd);
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$4 = badgeTemplate();
+const template$5 = badgeTemplate();
 
 const textPadding = spacingHorizontalXXS;
 const badgeBaseStyles = css.partial`
@@ -5818,7 +6372,7 @@ const badgeTintStyles = css.partial`
 /** Badge styles
  * @public
  */
-const styles$4 = css`
+const styles$5 = 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}
@@ -5836,10 +6390,10 @@ const styles$4 = css`
  * @remarks
  * HTML Element: \<fluent-badge\>
  */
-const definition$4 = Badge.compose({
+const definition$5 = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$4,
-  styles: styles$4
+  template: template$5,
+  styles: styles$5
 });
 
 /**
@@ -5975,12 +6529,12 @@ function composeTemplate(options = {}) {
  * The template for the Counter Badge component.
  * @public
  */
-const template$3 = composeTemplate();
+const template$4 = composeTemplate();
 
 /** Badge styles
  * @public
  */
-const styles$3 = css`
+const styles$4 = 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}
@@ -5997,10 +6551,10 @@ const styles$3 = css`
  * @remarks
  * HTML Element: \<fluent-counter-badge\>
  */
-const definition$3 = CounterBadge.compose({
+const definition$4 = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$3,
-  styles: styles$3
+  template: template$4,
+  styles: styles$4
 });
 
 /**
@@ -6043,7 +6597,7 @@ const ProgressBarValidationState = {
 /** Text styles
  * @public
  */
-const styles$2 = css`
+const styles$3 = css`
   ${display('flex')}
 
   :host{align-items:center;height:2px;overflow-x:hidden;border-radius:${borderRadiusMedium}}: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(
@@ -6058,7 +6612,7 @@ const styles$2 = 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$2 = progressTemplate({
+const template$3 = progressTemplate({
   indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
   indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`
 });
@@ -6071,10 +6625,10 @@ const template$2 = progressTemplate({
  * @remarks
  * HTML Element: \<fluent-progress-bar\>
  */
-const definition$2 = ProgressBar.compose({
+const definition$3 = ProgressBar.compose({
   name: `${FluentDesignSystem.prefix}-progress-bar`,
-  template: template$2,
-  styles: styles$2
+  template: template$3,
+  styles: styles$3
 });
 
 /**
@@ -6107,7 +6661,7 @@ const SpinnerSize = {
   huge: 'huge'
 };
 
-const template$1 = progressRingTemplate({
+const template$2 = progressRingTemplate({
   indeterminateIndicator: `
     <svg class="progress" part="progress" viewBox="0 0 16 16">
         <circle
@@ -6128,7 +6682,7 @@ const template$1 = progressRingTemplate({
   `
 });
 
-const styles$1 = css`
+const styles$2 = css`
   ${display('flex')}
 
   :host{display:flex;align-items:center;height:32px;width:32px}: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)}}`;
@@ -6142,8 +6696,45 @@ const styles$1 = css`
  * @remarks
  * HTML Element: \<fluent-spinner\>
  */
-const definition$1 = Spinner.compose({
+const definition$2 = Spinner.compose({
   name: `${FluentDesignSystem.prefix}-spinner`,
+  template: template$2,
+  styles: styles$2
+});
+
+class Switch extends FASTSwitch {}
+__decorate([attr({
+  attribute: 'label-position'
+})], Switch.prototype, "labelPosition", void 0);
+
+/**
+ * SwitchLabelPosition Constants
+ * @public
+ */
+const SwitchLabelPosition = {
+  above: 'above',
+  after: 'after',
+  before: 'before'
+};
+
+const template$1 = switchTemplate({
+  switch: `<span class="checked-indicator" part="checked-indicator"></span>`
+});
+
+const styles$1 = css`
+  ${display('inline-flex')}
+
+  :host{align-items:center;flex-direction:row-reverse;outline:none;user-select:none}: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}}`;
+
+/**
+ * The Fluent Switch Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-switch\>
+ */
+const definition$1 = Switch.compose({
+  name: `${FluentDesignSystem.prefix}-switch`,
   template: template$1,
   styles: styles$1
 });
@@ -6314,4 +6905,4 @@ const setTheme = theme => {
   }
 };
 
-export { Accordion, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, Badge, BadgeAppearance, BadgeColor, definition$4 as BadgeDefinition, BadgeShape, BadgeSize, styles$4 as BadgeStyles, template$4 as BadgeTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$3 as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$3 as CounterBadgeStyles, template$3 as CounterBadgeTemplate, ProgressBar, definition$2 as ProgressBarDefinition, ProgressBarShape, styles$2 as ProgressBarStyles, template$2 as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Spinner, SpinnerAppearance, definition$1 as SpinnerDefinition, SpinnerSize, styles$1 as SpinnerStyles, template$1 as SpinnerTemplate, Text, TextAlign, definition as TextDefinition, TextFont, TextSize, styles as TextStyles, template as TextTemplate, TextWeight, definition$6 as accordionDefinition, definition$5 as accordionItemDefinition, styles$5 as accordionItemStyles, template$5 as accordionItemTemplate, styles$6 as accordionStyles, template$6 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, colorNeutralStencil2, 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, 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, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, 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, Badge, BadgeAppearance, BadgeColor, definition$5 as BadgeDefinition, BadgeShape, BadgeSize, styles$5 as BadgeStyles, template$5 as BadgeTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$4 as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$4 as CounterBadgeStyles, template$4 as CounterBadgeTemplate, ProgressBar, definition$3 as ProgressBarDefinition, ProgressBarShape, styles$3 as ProgressBarStyles, template$3 as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Spinner, SpinnerAppearance, definition$2 as SpinnerDefinition, SpinnerSize, styles$2 as SpinnerStyles, template$2 as SpinnerTemplate, Switch, SwitchLabelPosition, Text, TextAlign, definition as TextDefinition, TextFont, TextSize, styles as TextStyles, template as TextTemplate, TextWeight, definition$7 as accordionDefinition, definition$6 as accordionItemDefinition, styles$6 as accordionItemStyles, template$6 as accordionItemTemplate, styles$7 as accordionStyles, template$7 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, colorNeutralStencil2, 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, 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, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, 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, definition$1 as definition, 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, styles$1 as switchStyles, template$1 as switchTemplate };