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

package/dist/web-components.js

@@ -3202,13 +3202,23 @@ function accordionItemTemplate(options = {}) {
   return html`<div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} ?disabled="${x => x.disabled ? "true" : void 0}" aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}" @click="${(x, c) => x.clickHandler(c.event)}"><span class="heading-content" part="heading-content"><slot name="heading"></slot></span></button>${startSlotTemplate(options)} ${endSlotTemplate(options)}<span class="icon" part="icon" aria-hidden="true"><slot name="expanded-icon">${staticallyCompose(options.expandedIcon)}</slot><slot name="collapsed-icon">${staticallyCompose(options.collapsedIcon)}</slot><span></div><div class="region" part="region" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
 }
 
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+  horizontal: "horizontal",
+  vertical: "vertical"
+};
+
 /**
  * String values for use with KeyboardEvent.key
  */
 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 +3572,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;
@@ -4451,6 +4920,64 @@ FASTDesignTokenNode.defaultNode = new DesignTokenNode();
 FASTDesignTokenNode.rootStyleSheetTarget = new RootStyleSheetTarget();
 FASTDesignTokenNode.cache = new WeakMap();
 
+/**
+ * Divider roles
+ * @public
+ */
+const DividerRole = {
+  /**
+   * The divider semantically separates content
+   */
+  separator: "separator",
+  /**
+   * The divider has no semantic value and is for visual presentation only.
+   */
+  presentation: "presentation"
+};
+/**
+ * Divider orientation
+ * @public
+ */
+const DividerOrientation = Orientation;
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#FASTDivider} component.
+ * @public
+ */
+function dividerTemplate() {
+  return html`<template role="${x => x.role}" aria-orientation="${x => x.orientation}"><slot></slot></template>`;
+}
+
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
+class FASTDivider extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    this.role = DividerRole.separator;
+    /**
+     * The orientation of the divider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    this.orientation = DividerOrientation.horizontal;
+  }
+}
+__decorate([attr], FASTDivider.prototype, "role", void 0);
+__decorate([attr], FASTDivider.prototype, "orientation", void 0);
+
 /**
  * A base class for progress components.
  * @public
@@ -4547,6 +5074,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 +5188,9 @@ function display(displayValue) {
  */
 class Accordion extends FASTAccordion {}
 
-const template$6 = accordionTemplate();
+const template$a = accordionTemplate();
 
-const styles$6 = css`
+const styles$a = css`
   ${display('flex')}
 
   :host{flex-direction:column;width:100%}`;
@@ -4590,10 +5210,10 @@ const FluentDesignSystem = Object.freeze({
  * @remarks
  * HTML Element: \<fluent-accordion\>
  */
-const definition$6 = Accordion.compose({
+const definition$a = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$6,
-  styles: styles$6
+  template: template$a,
+  styles: styles$a
 });
 
 /**
@@ -5403,7 +6023,7 @@ var tokens = /*#__PURE__*/Object.freeze({
 	shadow64Brand: shadow64Brand
 });
 
-const styles$5 = css`
+const styles$9 = 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 +6058,7 @@ const chevronDown20Filled = html.partial(`<svg
  * The template for the fluent-accordion component.
  * @public
  */
-const template$5 = accordionItemTemplate({
+const template$9 = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
@@ -5452,10 +6072,293 @@ const template$5 = accordionItemTemplate({
  * @remarks
  * HTML Element: \<fluent-accordion-item\>
  */
-const definition$5 = AccordionItem.compose({
+const definition$9 = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$5,
-  styles: styles$5
+  template: template$9,
+  styles: styles$9
+});
+
+/* TODO: This file is a direct copy of the React Avatar utils */
+/**
+ * Regular expressions matching characters to ignore when calculating the initials.
+ */
+/**
+ * Regular expression matching characters within various types of enclosures, including the enclosures themselves
+ *  so for example, (xyz) [xyz] {xyz} all would be ignored
+ */
+const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
+/**
+ * Regular expression matching special ASCII characters except space, plus some unicode special characters.
+ * Applies after unwanted enclosures have been removed
+ */
+// eslint-disable-next-line no-control-regex
+const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
+/**
+ * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
+ * and number has been trimmed for whitespaces
+ */
+const PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
+/** Regular expression matching one or more spaces. */
+const MULTIPLE_WHITESPACES_REGEX = /\s+/g;
+/**
+ * Regular expression matching languages for which we currently don't support initials.
+ * Arabic:   Arabic, Arabic Supplement, Arabic Extended-A.
+ * Korean:   Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.
+ * Japanese: Hiragana, Katakana.
+ * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,
+ *             CJK Unified Ideographs Extension B
+ */
+// eslint-disable-next-line
+const UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/;
+function getInitialsLatin(displayName, isRtl, firstInitialOnly) {
+  let initials = '';
+  const splits = displayName.split(' ');
+  if (splits.length !== 0) {
+    initials += splits[0].charAt(0).toUpperCase();
+  }
+  if (!firstInitialOnly) {
+    if (splits.length === 2) {
+      initials += splits[1].charAt(0).toUpperCase();
+    } else if (splits.length === 3) {
+      initials += splits[2].charAt(0).toUpperCase();
+    }
+  }
+  if (isRtl && initials.length > 1) {
+    return initials.charAt(1) + initials.charAt(0);
+  }
+  return initials;
+}
+function cleanupDisplayName(displayName) {
+  displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');
+  displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');
+  displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');
+  displayName = displayName.trim();
+  return displayName;
+}
+/**
+ * Get (up to 2 characters) initials based on display name of the persona.
+ *
+ * @param displayName - The full name of the person or entity
+ * @param isRtl - Whether the display is in RTL
+ * @param options - Extra options to control the behavior of getInitials
+ *
+ * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
+ * could be derived from the name.
+ *
+ * @internal
+ */
+function getInitials(displayName, isRtl, options) {
+  if (!displayName) {
+    return '';
+  }
+  displayName = cleanupDisplayName(displayName);
+  // For names containing CJK characters, and phone numbers, we don't display initials
+  if (UNSUPPORTED_TEXT_REGEX.test(displayName) || !(options === null || options === void 0 ? void 0 : options.allowPhoneInitials) && PHONENUMBER_REGEX.test(displayName)) {
+    return '';
+  }
+  return getInitialsLatin(displayName, isRtl, options === null || options === void 0 ? void 0 : options.firstInitialOnly);
+}
+
+/**
+ * The Avatar "active" state
+ */
+const AvatarActive = {
+  active: 'active',
+  inactive: 'inactive'
+};
+/**
+ * The Avatar Shape
+ */
+const AvatarShape = {
+  circular: 'circular',
+  square: 'square'
+};
+/**
+ * The Avatar Appearance when "active"
+ */
+const AvatarAppearance = {
+  ring: 'ring',
+  shadow: 'shadow',
+  ringShadow: 'ring-shadow'
+};
+/**
+ * A specific named color for the Avatar
+ */
+const AvatarNamedColor = {
+  darkRed: 'dark-red',
+  cranberry: 'cranberry',
+  red: 'red',
+  pumpkin: 'pumpkin',
+  peach: 'peach',
+  marigold: 'marigold',
+  gold: 'gold',
+  brass: 'brass',
+  brown: 'brown',
+  forest: 'forest',
+  seafoam: 'seafoam',
+  darkGreen: 'dark-green',
+  lightTeal: 'light-teal',
+  teal: 'teal',
+  steel: 'steel',
+  blue: 'blue',
+  royalBlue: 'royal-blue',
+  cornflower: 'cornflower',
+  navy: 'navy',
+  lavender: 'lavender',
+  purple: 'purple',
+  grape: 'grape',
+  lilac: 'lilac',
+  pink: 'pink',
+  magenta: 'magenta',
+  plum: 'plum',
+  beige: 'beige',
+  mink: 'mink',
+  platinum: 'platinum',
+  anchor: 'anchor'
+};
+/**
+ * Supported Avatar colors
+ */
+const AvatarColor = {
+  neutral: 'neutral',
+  brand: 'brand',
+  colorful: 'colorful',
+  ...AvatarNamedColor
+};
+/**
+ * The Avatar Sizes
+ * @public
+ */
+const AvatarSize = {
+  _16: 16,
+  _20: 20,
+  _24: 24,
+  _28: 28,
+  _32: 32,
+  _36: 36,
+  _40: 40,
+  _48: 48,
+  _56: 56,
+  _64: 64,
+  _72: 72,
+  _96: 96,
+  _120: 120,
+  _128: 128
+};
+
+/**
+ * The base class used for constructing a fluent-avatar custom element
+ * @public
+ */
+class Avatar extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * The color when displaying either an icon or initials.
+     * * neutral (default): gray
+     * * brand: color from the brand palette
+     * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
+     * * [AvatarNamedColor]: a specific color from the theme
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    this.color = 'neutral';
+  }
+  /**
+   * Sets the data-color attribute used for the visual presentation
+   * @internal
+   */
+  generateColor() {
+    var _a, _b;
+    if (!this.color) {
+      return;
+    }
+    return this.color === AvatarColor.colorful ? Avatar.colors[getHashCode((_b = (_a = this.colorId) !== null && _a !== void 0 ? _a : this.name) !== null && _b !== void 0 ? _b : '') % Avatar.colors.length] : this.color;
+  }
+  /**
+   * Generates and sets the initials for the template
+   * @internal
+   */
+  generateInitials() {
+    var _a, _b;
+    if (!this.name && !this.initials) {
+      return;
+    }
+    // size can be undefined since we default it in CSS only
+    const size = (_a = this.size) !== null && _a !== void 0 ? _a : 32;
+    return (_b = this.initials) !== null && _b !== void 0 ? _b : getInitials(this.name, window.getComputedStyle(this).direction === 'rtl', {
+      firstInitialOnly: size <= 16
+    });
+  }
+}
+/**
+ * An array of the available Avatar named colors
+ */
+Avatar.colors = Object.values(AvatarNamedColor);
+__decorate([attr], Avatar.prototype, "name", void 0);
+__decorate([attr], Avatar.prototype, "initials", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter
+})], Avatar.prototype, "size", void 0);
+__decorate([attr], Avatar.prototype, "shape", void 0);
+__decorate([attr], Avatar.prototype, "active", void 0);
+__decorate([attr], Avatar.prototype, "appearance", void 0);
+__decorate([attr], Avatar.prototype, "color", void 0);
+__decorate([attr({
+  attribute: 'color-id'
+})], Avatar.prototype, "colorId", void 0);
+// copied from React avatar
+const getHashCode = str => {
+  let hashCode = 0;
+  for (let len = str.length - 1; len >= 0; len--) {
+    const ch = str.charCodeAt(len);
+    const shift = len % 8;
+    hashCode ^= (ch << shift) + (ch >> 8 - shift); // eslint-disable-line no-bitwise
+  }
+
+  return hashCode;
+};
+
+const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
+/**
+ * The template for the Avatar component.
+ * @public
+ */
+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$8 = avatarTemplate();
+
+const animations = {
+  fastOutSlowInMax: curveDecelerateMax,
+  fastOutSlowInMid: curveDecelerateMid,
+  fastOutSlowInMin: curveDecelerateMin,
+  slowOutFastInMax: curveAccelerateMax,
+  slowOutFastInMid: curveAccelerateMid,
+  slowOutFastInMin: curveAccelerateMin,
+  fastEase: curveEasyEaseMax,
+  normalEase: curveEasyEase,
+  nullEasing: curveLinear
+};
+/** Avatar styles
+ * @public
+ */
+const styles$8 = 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}}.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}}`;
+
+/**
+ * The Fluent Avatar Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-badge\>
+ */
+const definition$8 = Avatar.compose({
+  name: `${FluentDesignSystem.prefix}-avatar`,
+  template: template$8,
+  styles: styles$8
 });
 
 /**
@@ -5542,7 +6445,7 @@ applyMixins(Badge, StartEnd);
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$4 = badgeTemplate();
+const template$7 = badgeTemplate();
 
 const textPadding = spacingHorizontalXXS;
 const badgeBaseStyles = css.partial`
@@ -5818,7 +6721,7 @@ const badgeTintStyles = css.partial`
 /** Badge styles
  * @public
  */
-const styles$4 = css`
+const styles$7 = 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 +6739,10 @@ const styles$4 = css`
  * @remarks
  * HTML Element: \<fluent-badge\>
  */
-const definition$4 = Badge.compose({
+const definition$7 = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$4,
-  styles: styles$4
+  template: template$7,
+  styles: styles$7
 });
 
 /**
@@ -5975,12 +6878,12 @@ function composeTemplate(options = {}) {
  * The template for the Counter Badge component.
  * @public
  */
-const template$3 = composeTemplate();
+const template$6 = composeTemplate();
 
 /** Badge styles
  * @public
  */
-const styles$3 = css`
+const styles$6 = 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 +6900,136 @@ const styles$3 = css`
  * @remarks
  * HTML Element: \<fluent-counter-badge\>
  */
-const definition$3 = CounterBadge.compose({
+const definition$6 = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$3,
-  styles: styles$3
+  template: template$6,
+  styles: styles$6
+});
+
+/**
+ * @class Divider component
+ *
+ * @remarks
+ * This class extends the FASTDivider. A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
+ */
+class Divider extends FASTDivider {}
+__decorate([attr({
+  attribute: 'align-content'
+})], Divider.prototype, "alignContent", void 0);
+__decorate([attr], Divider.prototype, "appearance", void 0);
+__decorate([attr({
+  mode: 'boolean'
+})], Divider.prototype, "inset", void 0);
+
+/**
+ * Align content within divider
+ * @public
+ */
+const DividerAlignContent = {
+  center: 'center',
+  start: 'start',
+  end: 'end'
+};
+/**
+ * DividerAppearance - divider color defined by a design token alias.
+ * @public
+ */
+const DividerAppearance = {
+  strong: 'strong',
+  brand: 'brand',
+  subtle: 'subtle',
+  default: 'default'
+};
+
+/**
+ * Template for the Divider component
+ * @public
+ */
+const template$5 = dividerTemplate();
+
+/** Divider styles
+ * @public
+ */
+const styles$5 = css`
+  ${display('flex')}
+
+  :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}}`;
+
+/**
+ * The Fluent Divider Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-divider\>
+ */
+const definition$5 = Divider.compose({
+  name: `${FluentDesignSystem.prefix}-divider`,
+  template: template$5,
+  styles: styles$5
+});
+
+/**
+ * The base class used for constucting a fluent image custom element
+ * @public
+ */
+class Image extends FASTElement {}
+__decorate([attr({
+  mode: 'boolean'
+})], Image.prototype, "block", void 0);
+__decorate([attr({
+  mode: 'boolean'
+})], Image.prototype, "bordered", void 0);
+__decorate([attr({
+  mode: 'boolean'
+})], Image.prototype, "shadow", void 0);
+__decorate([attr], Image.prototype, "fit", void 0);
+__decorate([attr], Image.prototype, "shape", void 0);
+
+/**
+ * Image fit
+ * @public
+ */
+const ImageFit = {
+  none: 'none',
+  center: 'center',
+  contain: 'contain',
+  cover: 'cover',
+  default: 'default'
+};
+/**
+ * Image shape
+ * @public
+ */
+const ImageShape = {
+  circular: 'circular',
+  rounded: 'rounded',
+  square: 'square'
+};
+
+/**
+ * Template for the Image component
+ * @public
+ */
+const template$4 = html`<slot></slot>`;
+
+/** Image styles
+ *
+ * @public
+ */
+const styles$4 = css`
+  :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}}`;
+
+/**
+ * The Fluent Image Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-image\>
+ */
+const definition$4 = Image.compose({
+  name: `${FluentDesignSystem.prefix}-image`,
+  template: template$4,
+  styles: styles$4
 });
 
 /**
@@ -6043,7 +7072,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 +7087,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 +7100,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 +7136,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 +7157,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 +7171,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 +7380,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, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$8 as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$8 as AvatarStyles, template$8 as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$7 as BadgeDefinition, BadgeShape, BadgeSize, styles$7 as BadgeStyles, template$7 as BadgeTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$6 as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$6 as CounterBadgeStyles, template$6 as CounterBadgeTemplate, Divider, DividerAlignContent, DividerAppearance, definition$5 as DividerDefinition, DividerOrientation, DividerRole, styles$5 as DividerStyles, template$5 as DividerTemplate, Image, definition$4 as ImageDefinition, ImageFit, ImageShape, styles$4 as ImageStyles, template$4 as ImageTemplate, 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$a as accordionDefinition, definition$9 as accordionItemDefinition, styles$9 as accordionItemStyles, template$9 as accordionItemTemplate, styles$a as accordionStyles, template$a 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 };