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

package/dist/web-components.js

@@ -1,27 +1,5 @@
 import { composedContains, composedParent } from '@microsoft/fast-element/utilities';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function __decorate(decorators, target, key, desc) {
-  var c = arguments.length,
-    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
-    d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
@@ -93,7 +71,7 @@ if (FAST.error === void 0) {
  * no actual items to return.
  * @public
  */
-Object.freeze([]);
+const emptyArray = Object.freeze([]);
 /**
  * Do not change. Part of shared kernel contract.
  * @internal
@@ -2199,6 +2177,136 @@ function when(condition, templateOrTemplateBinding) {
   return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
 }
 
+const selectElements = value => value.nodeType === 1;
+/**
+ * Creates a function that can be used to filter a Node array, selecting only elements.
+ * @param selector - An optional selector to restrict the filter to.
+ * @public
+ */
+const elements = selector => selector ? value => value.nodeType === 1 && value.matches(selector) : selectElements;
+/**
+ * A base class for node observation.
+ * @public
+ * @remarks
+ * Internally used by the SlottedDirective and the ChildrenDirective.
+ */
+class NodeObservationDirective extends StatelessAttachedAttributeDirective {
+  /**
+   * The unique id of the factory.
+   */
+  get id() {
+    return this._id;
+  }
+  set id(value) {
+    this._id = value;
+    this._controllerProperty = `${value}-c`;
+  }
+  /**
+   * Bind this behavior to the source.
+   * @param source - The source to bind to.
+   * @param context - The execution context that the binding is operating within.
+   * @param targets - The targets that behaviors in a view can attach to.
+   */
+  bind(controller) {
+    const target = controller.targets[this.targetNodeId];
+    target[this._controllerProperty] = controller;
+    this.updateTarget(controller.source, this.computeNodes(target));
+    this.observe(target);
+    controller.onUnbind(this);
+  }
+  /**
+   * Unbinds this behavior from the source.
+   * @param source - The source to unbind from.
+   * @param context - The execution context that the binding is operating within.
+   * @param targets - The targets that behaviors in a view can attach to.
+   */
+  unbind(controller) {
+    const target = controller.targets[this.targetNodeId];
+    this.updateTarget(controller.source, emptyArray);
+    this.disconnect(target);
+    target[this._controllerProperty] = null;
+  }
+  /**
+   * Gets the data source for the target.
+   * @param target - The target to get the source for.
+   * @returns The source.
+   */
+  getSource(target) {
+    return target[this._controllerProperty].source;
+  }
+  /**
+   * Updates the source property with the computed nodes.
+   * @param source - The source object to assign the nodes property to.
+   * @param value - The nodes to assign to the source object property.
+   */
+  updateTarget(source, value) {
+    source[this.options.property] = value;
+  }
+  /**
+   * Computes the set of nodes that should be assigned to the source property.
+   * @param target - The target to compute the nodes for.
+   * @returns The computed nodes.
+   * @remarks
+   * Applies filters if provided.
+   */
+  computeNodes(target) {
+    let nodes = this.getNodes(target);
+    if ("filter" in this.options) {
+      nodes = nodes.filter(this.options.filter);
+    }
+    return nodes;
+  }
+}
+
+const slotEvent = "slotchange";
+/**
+ * The runtime behavior for slotted node observation.
+ * @public
+ */
+class SlottedDirective extends NodeObservationDirective {
+  /**
+   * Begins observation of the nodes.
+   * @param target - The target to observe.
+   */
+  observe(target) {
+    target.addEventListener(slotEvent, this);
+  }
+  /**
+   * Disconnects observation of the nodes.
+   * @param target - The target to unobserve.
+   */
+  disconnect(target) {
+    target.removeEventListener(slotEvent, this);
+  }
+  /**
+   * Retrieves the raw nodes that should be assigned to the source property.
+   * @param target - The target to get the node to.
+   */
+  getNodes(target) {
+    return target.assignedNodes(this.options);
+  }
+  /** @internal */
+  handleEvent(event) {
+    const target = event.currentTarget;
+    this.updateTarget(this.getSource(target), this.computeNodes(target));
+  }
+}
+HTMLDirective.define(SlottedDirective);
+/**
+ * A directive that observes the `assignedNodes()` of a slot and updates a property
+ * whenever they change.
+ * @param propertyOrOptions - The options used to configure slotted node observation.
+ * @public
+ */
+function slotted(propertyOrOptions) {
+  if (isString(propertyOrOptions)) {
+    propertyOrOptions = {
+      property: propertyOrOptions
+    };
+  }
+  return new SlottedDirective(propertyOrOptions);
+}
+
 const booleanMode = "boolean";
 const reflectMode = "reflect";
 /**
@@ -3039,6 +3147,28 @@ function staticallyCompose(item) {
   return item;
 }
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __decorate(decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
 /**
  * A mixin class implementing start and end slots.
  * These are generally used to decorate text elements with icons or other visual indicators.
@@ -3064,6 +3194,46 @@ function startSlotTemplate(options) {
   return html`<slot name="start" ${ref("start")}>${staticallyCompose(options.start)}</slot>`.inline();
 }
 
+/**
+ * The template for the {@link @microsoft/fast-foundation#(FASTAccordionItem:class)} component.
+ * @public
+ */
+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>`;
+}
+
+/**
+ * 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
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+function wrapInBounds(min, max, value) {
+  if (value < min) {
+    return max;
+  } else if (value > max) {
+    return min;
+  }
+  return value;
+}
+
+let uniqueIdCounter = 0;
+/**
+ * Generates a unique ID based on incrementing a counter.
+ */
+function uniqueId(prefix = "") {
+  return `${prefix}${uniqueIdCounter++}`;
+}
+
 /**
  * Apply mixins to a constructor.
  * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
@@ -3083,127 +3253,897 @@ function applyMixins(derivedCtor, ...baseCtors) {
   });
 }
 
-class DerivedValueEvaluator {
-  constructor(value) {
-    this.value = value;
-    this.notifier = Observable.getNotifier(this);
-    this.dependencies = new Set();
-    this.binding = Observable.binding(value, this);
-    this.binding.setMode(false);
-  }
-  static getOrCreate(value) {
-    let v = DerivedValueEvaluator.cache.get(value);
-    if (v) {
-      return v;
-    }
-    v = new DerivedValueEvaluator(value);
-    DerivedValueEvaluator.cache.set(value, v);
-    return v;
-  }
-  evaluate(node, tokenContext) {
-    const resolve = token => {
-      this.dependencies.add(token);
-      if (tokenContext === token) {
-        if (node.parent) {
-          return node.parent.getTokenValue(token);
-        }
-        throw new Error("DesignTokenNode has encountered a circular token reference. Avoid this by setting the token value for an ancestor node.");
-      } else {
-        return node.getTokenValue(token);
-      }
-    };
-    return this.binding.observe(resolve);
-  }
-  handleChange() {
-    this.notifier.notify(undefined);
-  }
-}
-DerivedValueEvaluator.cache = new WeakMap();
-class DerivedValue {
-  constructor(token, evaluator, node, subscriber) {
-    this.token = token;
-    this.evaluator = evaluator;
-    this.node = node;
-    this.subscriber = subscriber;
-    this.value = evaluator.evaluate(node, token);
-    if (this.subscriber) {
-      Observable.getNotifier(this.evaluator).subscribe(this.subscriber);
-    }
-  }
-  dispose() {
-    if (this.subscriber) {
-      Observable.getNotifier(this.evaluator).unsubscribe(this.subscriber);
-    }
-  }
-  update() {
-    this.value = this.evaluator.evaluate(this.node, this.token);
-    return this;
-  }
-}
 /**
- * @internal
+ * An individual item in an {@link @microsoft/fast-foundation#(FASTAccordion:class) }.
+ *
+ * @slot start - Content which can be provided between the heading and the icon
+ * @slot end - Content which can be provided between the start slot and icon
+ * @slot heading - Content which serves as the accordion item heading and text of the expand button
+ * @slot - The default slot for accordion item content
+ * @slot expanded-icon - The expanded icon
+ * @slot collapsed-icon - The collapsed icon
+ * @fires change - Fires a custom 'change' event when the button is invoked
+ * @csspart heading - Wraps the button
+ * @csspart button - The button which serves to invoke the item
+ * @csspart heading-content - Wraps the slot for the heading content within the button
+ * @csspart icon - The icon container
+ * @csspart region - The wrapper for the accordion item content
+ *
+ * @public
  */
-class DesignTokenChangeRecordImpl {
-  constructor(target, type, token, value) {
-    this.target = target;
-    this.type = type;
-    this.token = token;
-    this.value = value;
-  }
-  notify() {
-    Observable.getNotifier(this.token).notify(this);
+class FASTAccordionItem extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
+     * heading element.
+     *
+     * @defaultValue 2
+     * @public
+     * @remarks
+     * HTML attribute: heading-level
+     */
+    this.headinglevel = 2;
+    /**
+     * Expands or collapses the item.
+     *
+     * @public
+     * @remarks
+     * HTML attribute: expanded
+     */
+    this.expanded = false;
+    /**
+     * Disables an accordion item
+     *
+     * @public
+     * @remarks
+     * HTML attribute: disabled
+     */
+    this.disabled = false;
+    /**
+     * The item ID
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: id
+     */
+    this.id = uniqueId("accordion-");
+    /**
+     * @internal
+     */
+    this.clickHandler = e => {
+      if (this.disabled) {
+        return;
+      }
+      this.$emit("click", e);
+    };
   }
 }
+__decorate([attr({
+  attribute: "heading-level",
+  mode: "fromView",
+  converter: nullableNumberConverter
+})], FASTAccordionItem.prototype, "headinglevel", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], FASTAccordionItem.prototype, "expanded", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], FASTAccordionItem.prototype, "disabled", void 0);
+__decorate([attr], FASTAccordionItem.prototype, "id", void 0);
+applyMixins(FASTAccordionItem, StartEnd);
+
 /**
+ * Expand mode for {@link FASTAccordion}
  * @public
  */
-class DesignTokenNode {
-  constructor() {
-    this._parent = null;
-    this._children = new Set();
-    this._values = new Map();
-    this._derived = new Map();
-    this.dependencyGraph = new Map();
-  }
-  /**
-   * Determines if a value is a {@link DerivedDesignTokenValue}
-   * @param value - The value to test
-   */
-  static isDerivedTokenValue(value) {
-    return typeof value === "function";
-  }
+const AccordionExpandMode = {
   /**
-   * Determines if a token has a derived value for a node.
+   * Designates only a single {@link @microsoft/fast-foundation#(FASTAccordionItem:class) } can be open a time.
    */
-  static isDerivedFor(node, token) {
-    return node._derived.has(token);
-  }
+  single: "single",
   /**
-   * Collects token/value pairs for all derived token / values set on upstream nodes.
+   * Designates multiple {@link @microsoft/fast-foundation#(FASTAccordionItem:class) | FASTAccordionItemItems} can be open simultaneously.
    */
-  static collectDerivedContext(node) {
-    const collected = new Map();
-    // Exit early if  there is no parent
-    if (node.parent === null) {
-      return collected;
-    }
-    let ignored = DesignTokenNode.getAssignedTokensForNode(node);
-    let current = node.parent;
-    do {
-      const assigned = DesignTokenNode.getAssignedTokensForNode(current);
-      for (let i = 0, l = assigned.length; i < l; i++) {
-        const token = assigned[i];
-        if (!ignored.includes(token) && DesignTokenNode.isDerivedFor(current, token)) {
-          collected.set(token, current._derived.get(token));
-        }
-      }
-      ignored = Array.from(new Set(ignored.concat(assigned)));
-      current = current.parent;
-    } while (current !== null);
-    return collected;
-  }
-  /**
-   * Resolves the local value for a token if it is assigned, otherwise returns undefined.
+  multi: "multi"
+};
+
+/**
+ * An Accordion Custom HTML Element
+ * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
+ *
+ * @fires change - Fires a custom 'change' event when the active item changes
+ * @csspart item - The slot for the accordion items
+ * @public
+ *
+ * @remarks
+ * Designed to be used with {@link @microsoft/fast-foundation#accordionTemplate} and {@link @microsoft/fast-foundation#(FASTAccordionItem:class)}.
+ */
+class FASTAccordion extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Controls the expand mode of the Accordion, either allowing
+     * single or multiple item expansion.
+     * @public
+     *
+     * @remarks
+     * HTML attribute: expand-mode
+     */
+    this.expandmode = AccordionExpandMode.multi;
+    this.activeItemIndex = 0;
+    this.change = () => {
+      this.$emit("change", this.activeid);
+    };
+    this.setItems = () => {
+      if (this.slottedAccordionItems.length === 0) {
+        return;
+      }
+      const children = Array.from(this.children);
+      this.removeItemListeners(children);
+      children.forEach(child => Observable.getNotifier(child).subscribe(this, "disabled"));
+      this.accordionItems = children.filter(child => !child.hasAttribute("disabled"));
+      this.accordionIds = this.getItemIds();
+      this.accordionItems.forEach((item, index) => {
+        if (item instanceof FASTAccordionItem) {
+          item.addEventListener("click", this.activeItemChange);
+          Observable.getNotifier(item).subscribe(this, "expanded");
+        }
+        const itemId = this.accordionIds[index];
+        item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
+        this.activeid = this.accordionIds[this.activeItemIndex];
+        item.addEventListener("keydown", this.handleItemKeyDown);
+        item.addEventListener("focus", this.handleItemFocus);
+      });
+      if (this.isSingleExpandMode()) {
+        const expandedItem = this.findExpandedItem();
+        this.setSingleExpandMode(expandedItem);
+      }
+    };
+    this.removeItemListeners = oldValue => {
+      oldValue.forEach((item, index) => {
+        Observable.getNotifier(item).unsubscribe(this, "disabled");
+        Observable.getNotifier(item).unsubscribe(this, "expanded");
+        item.removeEventListener("click", this.activeItemChange);
+        item.removeEventListener("keydown", this.handleItemKeyDown);
+        item.removeEventListener("focus", this.handleItemFocus);
+      });
+    };
+    this.activeItemChange = event => {
+      if (event.defaultPrevented || event.target !== event.currentTarget) {
+        return;
+      }
+      event.preventDefault();
+      this.handleExpandedChange(event.target);
+    };
+    this.handleExpandedChange = item => {
+      if (item instanceof FASTAccordionItem) {
+        this.activeid = item.getAttribute("id");
+        if (!this.isSingleExpandMode()) {
+          item.expanded = !item.expanded;
+          // setSingleExpandMode sets activeItemIndex on its own
+          this.activeItemIndex = this.accordionItems.indexOf(item);
+        } else {
+          this.setSingleExpandMode(item);
+        }
+        this.change();
+      }
+    };
+    this.handleItemKeyDown = event => {
+      // only handle the keydown if the event target is the accordion item
+      // prevents arrow keys from moving focus to accordion headers when focus is on accordion item panel content
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      this.accordionIds = this.getItemIds();
+      switch (event.key) {
+        case keyArrowUp:
+          event.preventDefault();
+          this.adjust(-1);
+          break;
+        case keyArrowDown:
+          event.preventDefault();
+          this.adjust(1);
+          break;
+        case keyHome:
+          this.activeItemIndex = 0;
+          this.focusItem();
+          break;
+        case keyEnd:
+          this.activeItemIndex = this.accordionItems.length - 1;
+          this.focusItem();
+          break;
+      }
+    };
+    this.handleItemFocus = event => {
+      // update the active item index if the focus moves to an accordion item via a different method other than the up and down arrow key actions
+      // only do so if the focus is actually on the accordion item and not on any of its children
+      if (event.target === event.currentTarget) {
+        const focusedItem = event.target;
+        const focusedIndex = this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem);
+        if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
+          this.activeItemIndex = focusedIndex;
+          this.activeid = this.accordionIds[this.activeItemIndex];
+        }
+      }
+    };
+  }
+  expandmodeChanged(prev, next) {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+    const expandedItem = this.findExpandedItem();
+    if (!expandedItem) {
+      return;
+    }
+    if (next !== AccordionExpandMode.single) {
+      expandedItem === null || expandedItem === void 0 ? void 0 : expandedItem.expandbutton.removeAttribute("aria-disabled");
+    } else {
+      this.setSingleExpandMode(expandedItem);
+    }
+  }
+  /**
+   * @internal
+   */
+  slottedAccordionItemsChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected) {
+      this.setItems();
+    }
+  }
+  /**
+   * @internal
+   */
+  handleChange(source, propertyName) {
+    if (propertyName === "disabled") {
+      this.setItems();
+    } else if (propertyName === "expanded") {
+      // we only need to manage single expanded instances
+      // such as scenarios where a child is programatically expanded
+      if (source.expanded && this.isSingleExpandMode()) {
+        this.setSingleExpandMode(source);
+      }
+    }
+  }
+  findExpandedItem() {
+    var _a;
+    if (this.accordionItems.length === 0) {
+      return null;
+    }
+    return (_a = this.accordionItems.find(item => item instanceof FASTAccordionItem && item.expanded)) !== null && _a !== void 0 ? _a : this.accordionItems[0];
+  }
+  setSingleExpandMode(expandedItem) {
+    if (this.accordionItems.length === 0) {
+      return;
+    }
+    const currentItems = Array.from(this.accordionItems);
+    this.activeItemIndex = currentItems.indexOf(expandedItem);
+    currentItems.forEach((item, index) => {
+      if (this.activeItemIndex === index) {
+        item.expanded = true;
+        item.expandbutton.setAttribute("aria-disabled", "true");
+      } else {
+        item.expanded = false;
+        if (!item.hasAttribute("disabled")) {
+          item.expandbutton.removeAttribute("aria-disabled");
+        }
+      }
+    });
+  }
+  getItemIds() {
+    return this.slottedAccordionItems.map(accordionItem => {
+      return accordionItem.id;
+    });
+  }
+  isSingleExpandMode() {
+    return this.expandmode === AccordionExpandMode.single;
+  }
+  adjust(adjustment) {
+    this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
+    this.focusItem();
+  }
+  focusItem() {
+    const element = this.accordionItems[this.activeItemIndex];
+    if (element instanceof FASTAccordionItem) {
+      element.expandbutton.focus();
+    }
+  }
+}
+__decorate([attr({
+  attribute: "expand-mode"
+})], FASTAccordion.prototype, "expandmode", void 0);
+__decorate([observable], FASTAccordion.prototype, "slottedAccordionItems", void 0);
+
+/**
+ * Creates a template for the {@link @microsoft/fast-foundation#FASTAccordion} component.
+ * @public
+ */
+function accordionTemplate() {
+  return html`<template><slot ${slotted({
+    property: "slottedAccordionItems",
+    filter: elements()
+  })}></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;
+    this.notifier = Observable.getNotifier(this);
+    this.dependencies = new Set();
+    this.binding = Observable.binding(value, this);
+    this.binding.setMode(false);
+  }
+  static getOrCreate(value) {
+    let v = DerivedValueEvaluator.cache.get(value);
+    if (v) {
+      return v;
+    }
+    v = new DerivedValueEvaluator(value);
+    DerivedValueEvaluator.cache.set(value, v);
+    return v;
+  }
+  evaluate(node, tokenContext) {
+    const resolve = token => {
+      this.dependencies.add(token);
+      if (tokenContext === token) {
+        if (node.parent) {
+          return node.parent.getTokenValue(token);
+        }
+        throw new Error("DesignTokenNode has encountered a circular token reference. Avoid this by setting the token value for an ancestor node.");
+      } else {
+        return node.getTokenValue(token);
+      }
+    };
+    return this.binding.observe(resolve);
+  }
+  handleChange() {
+    this.notifier.notify(undefined);
+  }
+}
+DerivedValueEvaluator.cache = new WeakMap();
+class DerivedValue {
+  constructor(token, evaluator, node, subscriber) {
+    this.token = token;
+    this.evaluator = evaluator;
+    this.node = node;
+    this.subscriber = subscriber;
+    this.value = evaluator.evaluate(node, token);
+    if (this.subscriber) {
+      Observable.getNotifier(this.evaluator).subscribe(this.subscriber);
+    }
+  }
+  dispose() {
+    if (this.subscriber) {
+      Observable.getNotifier(this.evaluator).unsubscribe(this.subscriber);
+    }
+  }
+  update() {
+    this.value = this.evaluator.evaluate(this.node, this.token);
+    return this;
+  }
+}
+/**
+ * @internal
+ */
+class DesignTokenChangeRecordImpl {
+  constructor(target, type, token, value) {
+    this.target = target;
+    this.type = type;
+    this.token = token;
+    this.value = value;
+  }
+  notify() {
+    Observable.getNotifier(this.token).notify(this);
+  }
+}
+/**
+ * @public
+ */
+class DesignTokenNode {
+  constructor() {
+    this._parent = null;
+    this._children = new Set();
+    this._values = new Map();
+    this._derived = new Map();
+    this.dependencyGraph = new Map();
+  }
+  /**
+   * Determines if a value is a {@link DerivedDesignTokenValue}
+   * @param value - The value to test
+   */
+  static isDerivedTokenValue(value) {
+    return typeof value === "function";
+  }
+  /**
+   * Determines if a token has a derived value for a node.
+   */
+  static isDerivedFor(node, token) {
+    return node._derived.has(token);
+  }
+  /**
+   * Collects token/value pairs for all derived token / values set on upstream nodes.
+   */
+  static collectDerivedContext(node) {
+    const collected = new Map();
+    // Exit early if  there is no parent
+    if (node.parent === null) {
+      return collected;
+    }
+    let ignored = DesignTokenNode.getAssignedTokensForNode(node);
+    let current = node.parent;
+    do {
+      const assigned = DesignTokenNode.getAssignedTokensForNode(current);
+      for (let i = 0, l = assigned.length; i < l; i++) {
+        const token = assigned[i];
+        if (!ignored.includes(token) && DesignTokenNode.isDerivedFor(current, token)) {
+          collected.set(token, current._derived.get(token));
+        }
+      }
+      ignored = Array.from(new Set(ignored.concat(assigned)));
+      current = current.parent;
+    } while (current !== null);
+    return collected;
+  }
+  /**
+   * Resolves the local value for a token if it is assigned, otherwise returns undefined.
    */
   static getLocalTokenValue(node, token) {
     return !DesignTokenNode.isAssigned(node, token) ? undefined : DesignTokenNode.isDerivedFor(node, token) ? node._derived.get(token).value : node._values.get(token);
@@ -4068,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
@@ -4084,90 +5117,79 @@ function display(displayValue) {
 }
 
 /**
- * BadgeAppearance constants
- * @public
- */
-const BadgeAppearance = {
-  filled: 'filled',
-  ghost: 'ghost',
-  outline: 'outline',
-  tint: 'tint'
-};
-/**
- * BadgeColor constants
- * @public
- */
-const BadgeColor = {
-  brand: 'brand',
-  danger: 'danger',
-  important: 'important',
-  informative: 'informative',
-  severe: 'severe',
-  subtle: 'subtle',
-  success: 'success',
-  warning: 'warning'
-};
-/**
- * A Badge can be square, circular or rounded.
+ * The base class used for constructing a fluent-accordion custom element
  * @public
  */
-const BadgeShape = {
-  circular: 'circular',
-  rounded: 'rounded',
-  square: 'square'
-};
+class Accordion extends FASTAccordion {}
+
+const template$7 = accordionTemplate();
+
+const styles$7 = css`
+  ${display('flex')}
+
+  :host{flex-direction:column;width:100%}`;
+
+const FluentDesignSystem = Object.freeze({
+  prefix: 'fluent',
+  shadowRootMode: 'open',
+  registry: customElements
+});
+
 /**
- * A Badge can be square, circular or rounded.
+ * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
+ * {@link @microsoft/fast-foundation#accordionTemplate}
+ *
+ *
  * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion\>
  */
-const BadgeSize = {
-  tiny: 'tiny',
-  extraSmall: 'extra-small',
-  small: 'small',
-  medium: 'medium',
-  large: 'large',
-  extraLarge: 'extra-large'
-};
+const definition$7 = Accordion.compose({
+  name: `${FluentDesignSystem.prefix}-accordion`,
+  template: template$7,
+  styles: styles$7
+});
 
 /**
- * The base class used for constructing a fluent-badge custom element
- * @public
+ * @internal
  */
-class Badge extends FASTElement {
+class AccordionItem extends FASTAccordionItem {
   constructor() {
     super(...arguments);
     /**
-     * The appearance the badge should have.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: appearance
-     */
-    this.appearance = BadgeAppearance.filled;
-    /**
-     * The color the badge should have.
+     * Sets the width of the focus state.
      *
      * @public
      * @remarks
-     * HTML Attribute: color
+     * HTML Attribute: block
      */
-    this.color = BadgeColor.brand;
+    this.block = false;
   }
 }
-__decorate([attr], Badge.prototype, "appearance", void 0);
-__decorate([attr], Badge.prototype, "color", void 0);
-__decorate([attr], Badge.prototype, "shape", void 0);
-__decorate([attr], Badge.prototype, "size", void 0);
-applyMixins(Badge, StartEnd);
+__decorate([attr], AccordionItem.prototype, "size", void 0);
+__decorate([attr({
+  mode: 'boolean'
+})], AccordionItem.prototype, "block", void 0);
+__decorate([attr({
+  attribute: 'expand-icon-position'
+})], AccordionItem.prototype, "expandIconPosition", void 0);
 
 /**
- * The template for the Badge component.
- * @public
+ * An Accordion Item header font size can be small, medium, large, and extra-large
  */
-function badgeTemplate(options = {}) {
-  return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
-}
-const template$4 = badgeTemplate();
+const AccordionItemSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  extraLarge: 'extra-large'
+};
+/**
+ * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
+ */
+const AccordionItemExpandIconPosition = {
+  start: 'start',
+  end: 'end'
+};
 
 const {
   create
@@ -4553,388 +5575,529 @@ const shadow28Brand = create('shadow28Brand');
 const shadow64Brand = create('shadow64Brand');
 
 var tokens = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    borderRadiusNone: borderRadiusNone,
-    borderRadiusSmall: borderRadiusSmall,
-    borderRadiusMedium: borderRadiusMedium,
-    borderRadiusLarge: borderRadiusLarge,
-    borderRadiusXLarge: borderRadiusXLarge,
-    borderRadiusCircular: borderRadiusCircular,
-    fontSizeBase100: fontSizeBase100,
-    fontSizeBase200: fontSizeBase200,
-    fontSizeBase300: fontSizeBase300,
-    fontSizeBase400: fontSizeBase400,
-    fontSizeBase500: fontSizeBase500,
-    fontSizeBase600: fontSizeBase600,
-    fontSizeHero700: fontSizeHero700,
-    fontSizeHero800: fontSizeHero800,
-    fontSizeHero900: fontSizeHero900,
-    fontSizeHero1000: fontSizeHero1000,
-    lineHeightBase100: lineHeightBase100,
-    lineHeightBase200: lineHeightBase200,
-    lineHeightBase300: lineHeightBase300,
-    lineHeightBase400: lineHeightBase400,
-    lineHeightBase500: lineHeightBase500,
-    lineHeightBase600: lineHeightBase600,
-    lineHeightHero700: lineHeightHero700,
-    lineHeightHero800: lineHeightHero800,
-    lineHeightHero900: lineHeightHero900,
-    lineHeightHero1000: lineHeightHero1000,
-    fontFamilyBase: fontFamilyBase,
-    fontFamilyMonospace: fontFamilyMonospace,
-    fontFamilyNumeric: fontFamilyNumeric,
-    fontWeightRegular: fontWeightRegular,
-    fontWeightMedium: fontWeightMedium,
-    fontWeightSemibold: fontWeightSemibold,
-    fontWeightBold: fontWeightBold,
-    strokeWidthThin: strokeWidthThin,
-    strokeWidthThick: strokeWidthThick,
-    strokeWidthThicker: strokeWidthThicker,
-    strokeWidthThickest: strokeWidthThickest,
-    spacingHorizontalNone: spacingHorizontalNone,
-    spacingHorizontalXXS: spacingHorizontalXXS,
-    spacingHorizontalXS: spacingHorizontalXS,
-    spacingHorizontalSNudge: spacingHorizontalSNudge,
-    spacingHorizontalS: spacingHorizontalS,
-    spacingHorizontalMNudge: spacingHorizontalMNudge,
-    spacingHorizontalM: spacingHorizontalM,
-    spacingHorizontalL: spacingHorizontalL,
-    spacingHorizontalXL: spacingHorizontalXL,
-    spacingHorizontalXXL: spacingHorizontalXXL,
-    spacingHorizontalXXXL: spacingHorizontalXXXL,
-    spacingVerticalNone: spacingVerticalNone,
-    spacingVerticalXXS: spacingVerticalXXS,
-    spacingVerticalXS: spacingVerticalXS,
-    spacingVerticalSNudge: spacingVerticalSNudge,
-    spacingVerticalS: spacingVerticalS,
-    spacingVerticalMNudge: spacingVerticalMNudge,
-    spacingVerticalM: spacingVerticalM,
-    spacingVerticalL: spacingVerticalL,
-    spacingVerticalXL: spacingVerticalXL,
-    spacingVerticalXXL: spacingVerticalXXL,
-    spacingVerticalXXXL: spacingVerticalXXXL,
-    durationUltraFast: durationUltraFast,
-    durationFaster: durationFaster,
-    durationFast: durationFast,
-    durationNormal: durationNormal,
-    durationSlow: durationSlow,
-    durationSlower: durationSlower,
-    durationUltraSlow: durationUltraSlow,
-    curveAccelerateMax: curveAccelerateMax,
-    curveAccelerateMid: curveAccelerateMid,
-    curveAccelerateMin: curveAccelerateMin,
-    curveDecelerateMax: curveDecelerateMax,
-    curveDecelerateMid: curveDecelerateMid,
-    curveDecelerateMin: curveDecelerateMin,
-    curveEasyEaseMax: curveEasyEaseMax,
-    curveEasyEase: curveEasyEase,
-    curveLinear: curveLinear,
-    colorNeutralForeground1: colorNeutralForeground1,
-    colorNeutralForeground1Hover: colorNeutralForeground1Hover,
-    colorNeutralForeground1Pressed: colorNeutralForeground1Pressed,
-    colorNeutralForeground1Selected: colorNeutralForeground1Selected,
-    colorNeutralForeground2: colorNeutralForeground2,
-    colorNeutralForeground2Hover: colorNeutralForeground2Hover,
-    colorNeutralForeground2Pressed: colorNeutralForeground2Pressed,
-    colorNeutralForeground2Selected: colorNeutralForeground2Selected,
-    colorNeutralForeground2BrandHover: colorNeutralForeground2BrandHover,
-    colorNeutralForeground2BrandPressed: colorNeutralForeground2BrandPressed,
-    colorNeutralForeground2BrandSelected: colorNeutralForeground2BrandSelected,
-    colorNeutralForeground3: colorNeutralForeground3,
-    colorNeutralForeground3Hover: colorNeutralForeground3Hover,
-    colorNeutralForeground3Pressed: colorNeutralForeground3Pressed,
-    colorNeutralForeground3Selected: colorNeutralForeground3Selected,
-    colorNeutralForeground3BrandHover: colorNeutralForeground3BrandHover,
-    colorNeutralForeground3BrandPressed: colorNeutralForeground3BrandPressed,
-    colorNeutralForeground3BrandSelected: colorNeutralForeground3BrandSelected,
-    colorNeutralForeground4: colorNeutralForeground4,
-    colorNeutralForegroundDisabled: colorNeutralForegroundDisabled,
-    colorNeutralForegroundInvertedDisabled: colorNeutralForegroundInvertedDisabled,
-    colorBrandForegroundLink: colorBrandForegroundLink,
-    colorBrandForegroundLinkHover: colorBrandForegroundLinkHover,
-    colorBrandForegroundLinkPressed: colorBrandForegroundLinkPressed,
-    colorBrandForegroundLinkSelected: colorBrandForegroundLinkSelected,
-    colorNeutralForeground2Link: colorNeutralForeground2Link,
-    colorNeutralForeground2LinkHover: colorNeutralForeground2LinkHover,
-    colorNeutralForeground2LinkPressed: colorNeutralForeground2LinkPressed,
-    colorNeutralForeground2LinkSelected: colorNeutralForeground2LinkSelected,
-    colorCompoundBrandForeground1: colorCompoundBrandForeground1,
-    colorCompoundBrandForeground1Hover: colorCompoundBrandForeground1Hover,
-    colorCompoundBrandForeground1Pressed: colorCompoundBrandForeground1Pressed,
-    colorBrandForeground1: colorBrandForeground1,
-    colorBrandForeground2: colorBrandForeground2,
-    colorNeutralForeground1Static: colorNeutralForeground1Static,
-    colorNeutralForegroundStaticInverted: colorNeutralForegroundStaticInverted,
-    colorNeutralForegroundInverted: colorNeutralForegroundInverted,
-    colorNeutralForegroundInvertedHover: colorNeutralForegroundInvertedHover,
-    colorNeutralForegroundInvertedPressed: colorNeutralForegroundInvertedPressed,
-    colorNeutralForegroundInvertedSelected: colorNeutralForegroundInvertedSelected,
-    colorNeutralForegroundInverted2: colorNeutralForegroundInverted2,
-    colorNeutralForegroundOnBrand: colorNeutralForegroundOnBrand,
-    colorNeutralForegroundInvertedLink: colorNeutralForegroundInvertedLink,
-    colorNeutralForegroundInvertedLinkHover: colorNeutralForegroundInvertedLinkHover,
-    colorNeutralForegroundInvertedLinkPressed: colorNeutralForegroundInvertedLinkPressed,
-    colorNeutralForegroundInvertedLinkSelected: colorNeutralForegroundInvertedLinkSelected,
-    colorBrandForegroundInverted: colorBrandForegroundInverted,
-    colorBrandForegroundInvertedHover: colorBrandForegroundInvertedHover,
-    colorBrandForegroundInvertedPressed: colorBrandForegroundInvertedPressed,
-    colorBrandForegroundOnLight: colorBrandForegroundOnLight,
-    colorBrandForegroundOnLightHover: colorBrandForegroundOnLightHover,
-    colorBrandForegroundOnLightPressed: colorBrandForegroundOnLightPressed,
-    colorBrandForegroundOnLightSelected: colorBrandForegroundOnLightSelected,
-    colorNeutralBackground1: colorNeutralBackground1,
-    colorNeutralBackground1Hover: colorNeutralBackground1Hover,
-    colorNeutralBackground1Pressed: colorNeutralBackground1Pressed,
-    colorNeutralBackground1Selected: colorNeutralBackground1Selected,
-    colorNeutralBackground2: colorNeutralBackground2,
-    colorNeutralBackground2Hover: colorNeutralBackground2Hover,
-    colorNeutralBackground2Pressed: colorNeutralBackground2Pressed,
-    colorNeutralBackground2Selected: colorNeutralBackground2Selected,
-    colorNeutralBackground3: colorNeutralBackground3,
-    colorNeutralBackground3Hover: colorNeutralBackground3Hover,
-    colorNeutralBackground3Pressed: colorNeutralBackground3Pressed,
-    colorNeutralBackground3Selected: colorNeutralBackground3Selected,
-    colorNeutralBackground4: colorNeutralBackground4,
-    colorNeutralBackground4Hover: colorNeutralBackground4Hover,
-    colorNeutralBackground4Pressed: colorNeutralBackground4Pressed,
-    colorNeutralBackground4Selected: colorNeutralBackground4Selected,
-    colorNeutralBackground5: colorNeutralBackground5,
-    colorNeutralBackground5Hover: colorNeutralBackground5Hover,
-    colorNeutralBackground5Pressed: colorNeutralBackground5Pressed,
-    colorNeutralBackground5Selected: colorNeutralBackground5Selected,
-    colorNeutralBackground6: colorNeutralBackground6,
-    colorNeutralBackgroundInverted: colorNeutralBackgroundInverted,
-    colorNeutralBackgroundStatic: colorNeutralBackgroundStatic,
-    colorSubtleBackground: colorSubtleBackground,
-    colorSubtleBackgroundHover: colorSubtleBackgroundHover,
-    colorSubtleBackgroundPressed: colorSubtleBackgroundPressed,
-    colorSubtleBackgroundSelected: colorSubtleBackgroundSelected,
-    colorSubtleBackgroundLightAlphaHover: colorSubtleBackgroundLightAlphaHover,
-    colorSubtleBackgroundLightAlphaPressed: colorSubtleBackgroundLightAlphaPressed,
-    colorSubtleBackgroundLightAlphaSelected: colorSubtleBackgroundLightAlphaSelected,
-    colorSubtleBackgroundInverted: colorSubtleBackgroundInverted,
-    colorSubtleBackgroundInvertedHover: colorSubtleBackgroundInvertedHover,
-    colorSubtleBackgroundInvertedPressed: colorSubtleBackgroundInvertedPressed,
-    colorSubtleBackgroundInvertedSelected: colorSubtleBackgroundInvertedSelected,
-    colorTransparentBackground: colorTransparentBackground,
-    colorTransparentBackgroundHover: colorTransparentBackgroundHover,
-    colorTransparentBackgroundPressed: colorTransparentBackgroundPressed,
-    colorTransparentBackgroundSelected: colorTransparentBackgroundSelected,
-    colorNeutralBackgroundDisabled: colorNeutralBackgroundDisabled,
-    colorNeutralBackgroundInvertedDisabled: colorNeutralBackgroundInvertedDisabled,
-    colorNeutralStencil1: colorNeutralStencil1,
-    colorNeutralStencil2: colorNeutralStencil2,
-    colorBackgroundOverlay: colorBackgroundOverlay,
-    colorScrollbarOverlay: colorScrollbarOverlay,
-    colorBrandBackground: colorBrandBackground,
-    colorBrandBackgroundHover: colorBrandBackgroundHover,
-    colorBrandBackgroundPressed: colorBrandBackgroundPressed,
-    colorBrandBackgroundSelected: colorBrandBackgroundSelected,
-    colorCompoundBrandBackground: colorCompoundBrandBackground,
-    colorCompoundBrandBackgroundHover: colorCompoundBrandBackgroundHover,
-    colorCompoundBrandBackgroundPressed: colorCompoundBrandBackgroundPressed,
-    colorBrandBackgroundStatic: colorBrandBackgroundStatic,
-    colorBrandBackground2: colorBrandBackground2,
-    colorBrandBackgroundInverted: colorBrandBackgroundInverted,
-    colorBrandBackgroundInvertedHover: colorBrandBackgroundInvertedHover,
-    colorBrandBackgroundInvertedPressed: colorBrandBackgroundInvertedPressed,
-    colorBrandBackgroundInvertedSelected: colorBrandBackgroundInvertedSelected,
-    colorNeutralStrokeAccessible: colorNeutralStrokeAccessible,
-    colorNeutralStrokeAccessibleHover: colorNeutralStrokeAccessibleHover,
-    colorNeutralStrokeAccessiblePressed: colorNeutralStrokeAccessiblePressed,
-    colorNeutralStrokeAccessibleSelected: colorNeutralStrokeAccessibleSelected,
-    colorNeutralStroke1: colorNeutralStroke1,
-    colorNeutralStroke1Hover: colorNeutralStroke1Hover,
-    colorNeutralStroke1Pressed: colorNeutralStroke1Pressed,
-    colorNeutralStroke1Selected: colorNeutralStroke1Selected,
-    colorNeutralStroke2: colorNeutralStroke2,
-    colorNeutralStroke3: colorNeutralStroke3,
-    colorNeutralStrokeOnBrand: colorNeutralStrokeOnBrand,
-    colorNeutralStrokeOnBrand2: colorNeutralStrokeOnBrand2,
-    colorNeutralStrokeOnBrand2Hover: colorNeutralStrokeOnBrand2Hover,
-    colorNeutralStrokeOnBrand2Pressed: colorNeutralStrokeOnBrand2Pressed,
-    colorNeutralStrokeOnBrand2Selected: colorNeutralStrokeOnBrand2Selected,
-    colorBrandStroke1: colorBrandStroke1,
-    colorBrandStroke2: colorBrandStroke2,
-    colorCompoundBrandStroke: colorCompoundBrandStroke,
-    colorCompoundBrandStrokeHover: colorCompoundBrandStrokeHover,
-    colorCompoundBrandStrokePressed: colorCompoundBrandStrokePressed,
-    colorNeutralStrokeDisabled: colorNeutralStrokeDisabled,
-    colorNeutralStrokeInvertedDisabled: colorNeutralStrokeInvertedDisabled,
-    colorTransparentStroke: colorTransparentStroke,
-    colorTransparentStrokeInteractive: colorTransparentStrokeInteractive,
-    colorTransparentStrokeDisabled: colorTransparentStrokeDisabled,
-    colorStrokeFocus1: colorStrokeFocus1,
-    colorStrokeFocus2: colorStrokeFocus2,
-    colorNeutralShadowAmbient: colorNeutralShadowAmbient,
-    colorNeutralShadowKey: colorNeutralShadowKey,
-    colorNeutralShadowAmbientLighter: colorNeutralShadowAmbientLighter,
-    colorNeutralShadowKeyLighter: colorNeutralShadowKeyLighter,
-    colorNeutralShadowAmbientDarker: colorNeutralShadowAmbientDarker,
-    colorNeutralShadowKeyDarker: colorNeutralShadowKeyDarker,
-    colorBrandShadowAmbient: colorBrandShadowAmbient,
-    colorBrandShadowKey: colorBrandShadowKey,
-    colorPaletteRedBackground1: colorPaletteRedBackground1,
-    colorPaletteRedBackground2: colorPaletteRedBackground2,
-    colorPaletteRedBackground3: colorPaletteRedBackground3,
-    colorPaletteRedForeground1: colorPaletteRedForeground1,
-    colorPaletteRedForeground2: colorPaletteRedForeground2,
-    colorPaletteRedForeground3: colorPaletteRedForeground3,
-    colorPaletteRedBorderActive: colorPaletteRedBorderActive,
-    colorPaletteRedBorder1: colorPaletteRedBorder1,
-    colorPaletteRedBorder2: colorPaletteRedBorder2,
-    colorPaletteGreenBackground1: colorPaletteGreenBackground1,
-    colorPaletteGreenBackground2: colorPaletteGreenBackground2,
-    colorPaletteGreenBackground3: colorPaletteGreenBackground3,
-    colorPaletteGreenForeground1: colorPaletteGreenForeground1,
-    colorPaletteGreenForeground2: colorPaletteGreenForeground2,
-    colorPaletteGreenForeground3: colorPaletteGreenForeground3,
-    colorPaletteGreenBorderActive: colorPaletteGreenBorderActive,
-    colorPaletteGreenBorder1: colorPaletteGreenBorder1,
-    colorPaletteGreenBorder2: colorPaletteGreenBorder2,
-    colorPaletteDarkOrangeBackground1: colorPaletteDarkOrangeBackground1,
-    colorPaletteDarkOrangeBackground2: colorPaletteDarkOrangeBackground2,
-    colorPaletteDarkOrangeBackground3: colorPaletteDarkOrangeBackground3,
-    colorPaletteDarkOrangeForeground1: colorPaletteDarkOrangeForeground1,
-    colorPaletteDarkOrangeForeground2: colorPaletteDarkOrangeForeground2,
-    colorPaletteDarkOrangeForeground3: colorPaletteDarkOrangeForeground3,
-    colorPaletteDarkOrangeBorderActive: colorPaletteDarkOrangeBorderActive,
-    colorPaletteDarkOrangeBorder1: colorPaletteDarkOrangeBorder1,
-    colorPaletteDarkOrangeBorder2: colorPaletteDarkOrangeBorder2,
-    colorPaletteYellowBackground1: colorPaletteYellowBackground1,
-    colorPaletteYellowBackground2: colorPaletteYellowBackground2,
-    colorPaletteYellowBackground3: colorPaletteYellowBackground3,
-    colorPaletteYellowForeground1: colorPaletteYellowForeground1,
-    colorPaletteYellowForeground2: colorPaletteYellowForeground2,
-    colorPaletteYellowForeground3: colorPaletteYellowForeground3,
-    colorPaletteYellowBorderActive: colorPaletteYellowBorderActive,
-    colorPaletteYellowBorder1: colorPaletteYellowBorder1,
-    colorPaletteYellowBorder2: colorPaletteYellowBorder2,
-    colorPaletteBerryBackground1: colorPaletteBerryBackground1,
-    colorPaletteBerryBackground2: colorPaletteBerryBackground2,
-    colorPaletteBerryBackground3: colorPaletteBerryBackground3,
-    colorPaletteBerryForeground1: colorPaletteBerryForeground1,
-    colorPaletteBerryForeground2: colorPaletteBerryForeground2,
-    colorPaletteBerryForeground3: colorPaletteBerryForeground3,
-    colorPaletteBerryBorderActive: colorPaletteBerryBorderActive,
-    colorPaletteBerryBorder1: colorPaletteBerryBorder1,
-    colorPaletteBerryBorder2: colorPaletteBerryBorder2,
-    colorPaletteLightGreenBackground1: colorPaletteLightGreenBackground1,
-    colorPaletteLightGreenBackground2: colorPaletteLightGreenBackground2,
-    colorPaletteLightGreenBackground3: colorPaletteLightGreenBackground3,
-    colorPaletteLightGreenForeground1: colorPaletteLightGreenForeground1,
-    colorPaletteLightGreenForeground2: colorPaletteLightGreenForeground2,
-    colorPaletteLightGreenForeground3: colorPaletteLightGreenForeground3,
-    colorPaletteLightGreenBorderActive: colorPaletteLightGreenBorderActive,
-    colorPaletteLightGreenBorder1: colorPaletteLightGreenBorder1,
-    colorPaletteLightGreenBorder2: colorPaletteLightGreenBorder2,
-    colorPaletteMarigoldBackground1: colorPaletteMarigoldBackground1,
-    colorPaletteMarigoldBackground2: colorPaletteMarigoldBackground2,
-    colorPaletteMarigoldBackground3: colorPaletteMarigoldBackground3,
-    colorPaletteMarigoldForeground1: colorPaletteMarigoldForeground1,
-    colorPaletteMarigoldForeground2: colorPaletteMarigoldForeground2,
-    colorPaletteMarigoldForeground3: colorPaletteMarigoldForeground3,
-    colorPaletteMarigoldBorderActive: colorPaletteMarigoldBorderActive,
-    colorPaletteMarigoldBorder1: colorPaletteMarigoldBorder1,
-    colorPaletteMarigoldBorder2: colorPaletteMarigoldBorder2,
-    colorPaletteDarkRedBackground2: colorPaletteDarkRedBackground2,
-    colorPaletteDarkRedForeground2: colorPaletteDarkRedForeground2,
-    colorPaletteDarkRedBorderActive: colorPaletteDarkRedBorderActive,
-    colorPaletteCranberryBackground2: colorPaletteCranberryBackground2,
-    colorPaletteCranberryForeground2: colorPaletteCranberryForeground2,
-    colorPaletteCranberryBorderActive: colorPaletteCranberryBorderActive,
-    colorPalettePumpkinBackground2: colorPalettePumpkinBackground2,
-    colorPalettePumpkinForeground2: colorPalettePumpkinForeground2,
-    colorPalettePumpkinBorderActive: colorPalettePumpkinBorderActive,
-    colorPalettePeachBackground2: colorPalettePeachBackground2,
-    colorPalettePeachForeground2: colorPalettePeachForeground2,
-    colorPalettePeachBorderActive: colorPalettePeachBorderActive,
-    colorPaletteGoldBackground2: colorPaletteGoldBackground2,
-    colorPaletteGoldForeground2: colorPaletteGoldForeground2,
-    colorPaletteGoldBorderActive: colorPaletteGoldBorderActive,
-    colorPaletteBrassBackground2: colorPaletteBrassBackground2,
-    colorPaletteBrassForeground2: colorPaletteBrassForeground2,
-    colorPaletteBrassBorderActive: colorPaletteBrassBorderActive,
-    colorPaletteBrownBackground2: colorPaletteBrownBackground2,
-    colorPaletteBrownForeground2: colorPaletteBrownForeground2,
-    colorPaletteBrownBorderActive: colorPaletteBrownBorderActive,
-    colorPaletteForestBackground2: colorPaletteForestBackground2,
-    colorPaletteForestForeground2: colorPaletteForestForeground2,
-    colorPaletteForestBorderActive: colorPaletteForestBorderActive,
-    colorPaletteSeafoamBackground2: colorPaletteSeafoamBackground2,
-    colorPaletteSeafoamForeground2: colorPaletteSeafoamForeground2,
-    colorPaletteSeafoamBorderActive: colorPaletteSeafoamBorderActive,
-    colorPaletteDarkGreenBackground2: colorPaletteDarkGreenBackground2,
-    colorPaletteDarkGreenForeground2: colorPaletteDarkGreenForeground2,
-    colorPaletteDarkGreenBorderActive: colorPaletteDarkGreenBorderActive,
-    colorPaletteLightTealBackground2: colorPaletteLightTealBackground2,
-    colorPaletteLightTealForeground2: colorPaletteLightTealForeground2,
-    colorPaletteLightTealBorderActive: colorPaletteLightTealBorderActive,
-    colorPaletteTealBackground2: colorPaletteTealBackground2,
-    colorPaletteTealForeground2: colorPaletteTealForeground2,
-    colorPaletteTealBorderActive: colorPaletteTealBorderActive,
-    colorPaletteSteelBackground2: colorPaletteSteelBackground2,
-    colorPaletteSteelForeground2: colorPaletteSteelForeground2,
-    colorPaletteSteelBorderActive: colorPaletteSteelBorderActive,
-    colorPaletteBlueBackground2: colorPaletteBlueBackground2,
-    colorPaletteBlueForeground2: colorPaletteBlueForeground2,
-    colorPaletteBlueBorderActive: colorPaletteBlueBorderActive,
-    colorPaletteRoyalBlueBackground2: colorPaletteRoyalBlueBackground2,
-    colorPaletteRoyalBlueForeground2: colorPaletteRoyalBlueForeground2,
-    colorPaletteRoyalBlueBorderActive: colorPaletteRoyalBlueBorderActive,
-    colorPaletteCornflowerBackground2: colorPaletteCornflowerBackground2,
-    colorPaletteCornflowerForeground2: colorPaletteCornflowerForeground2,
-    colorPaletteCornflowerBorderActive: colorPaletteCornflowerBorderActive,
-    colorPaletteNavyBackground2: colorPaletteNavyBackground2,
-    colorPaletteNavyForeground2: colorPaletteNavyForeground2,
-    colorPaletteNavyBorderActive: colorPaletteNavyBorderActive,
-    colorPaletteLavenderBackground2: colorPaletteLavenderBackground2,
-    colorPaletteLavenderForeground2: colorPaletteLavenderForeground2,
-    colorPaletteLavenderBorderActive: colorPaletteLavenderBorderActive,
-    colorPalettePurpleBackground2: colorPalettePurpleBackground2,
-    colorPalettePurpleForeground2: colorPalettePurpleForeground2,
-    colorPalettePurpleBorderActive: colorPalettePurpleBorderActive,
-    colorPaletteGrapeBackground2: colorPaletteGrapeBackground2,
-    colorPaletteGrapeForeground2: colorPaletteGrapeForeground2,
-    colorPaletteGrapeBorderActive: colorPaletteGrapeBorderActive,
-    colorPaletteLilacBackground2: colorPaletteLilacBackground2,
-    colorPaletteLilacForeground2: colorPaletteLilacForeground2,
-    colorPaletteLilacBorderActive: colorPaletteLilacBorderActive,
-    colorPalettePinkBackground2: colorPalettePinkBackground2,
-    colorPalettePinkForeground2: colorPalettePinkForeground2,
-    colorPalettePinkBorderActive: colorPalettePinkBorderActive,
-    colorPaletteMagentaBackground2: colorPaletteMagentaBackground2,
-    colorPaletteMagentaForeground2: colorPaletteMagentaForeground2,
-    colorPaletteMagentaBorderActive: colorPaletteMagentaBorderActive,
-    colorPalettePlumBackground2: colorPalettePlumBackground2,
-    colorPalettePlumForeground2: colorPalettePlumForeground2,
-    colorPalettePlumBorderActive: colorPalettePlumBorderActive,
-    colorPaletteBeigeBackground2: colorPaletteBeigeBackground2,
-    colorPaletteBeigeForeground2: colorPaletteBeigeForeground2,
-    colorPaletteBeigeBorderActive: colorPaletteBeigeBorderActive,
-    colorPaletteMinkBackground2: colorPaletteMinkBackground2,
-    colorPaletteMinkForeground2: colorPaletteMinkForeground2,
-    colorPaletteMinkBorderActive: colorPaletteMinkBorderActive,
-    colorPalettePlatinumBackground2: colorPalettePlatinumBackground2,
-    colorPalettePlatinumForeground2: colorPalettePlatinumForeground2,
-    colorPalettePlatinumBorderActive: colorPalettePlatinumBorderActive,
-    colorPaletteAnchorBackground2: colorPaletteAnchorBackground2,
-    colorPaletteAnchorForeground2: colorPaletteAnchorForeground2,
-    colorPaletteAnchorBorderActive: colorPaletteAnchorBorderActive,
-    shadow2: shadow2,
-    shadow4: shadow4,
-    shadow8: shadow8,
-    shadow16: shadow16,
-    shadow28: shadow28,
-    shadow64: shadow64,
-    shadow2Brand: shadow2Brand,
-    shadow4Brand: shadow4Brand,
-    shadow8Brand: shadow8Brand,
-    shadow16Brand: shadow16Brand,
-    shadow28Brand: shadow28Brand,
-    shadow64Brand: shadow64Brand
+	__proto__: null,
+	borderRadiusNone: borderRadiusNone,
+	borderRadiusSmall: borderRadiusSmall,
+	borderRadiusMedium: borderRadiusMedium,
+	borderRadiusLarge: borderRadiusLarge,
+	borderRadiusXLarge: borderRadiusXLarge,
+	borderRadiusCircular: borderRadiusCircular,
+	fontSizeBase100: fontSizeBase100,
+	fontSizeBase200: fontSizeBase200,
+	fontSizeBase300: fontSizeBase300,
+	fontSizeBase400: fontSizeBase400,
+	fontSizeBase500: fontSizeBase500,
+	fontSizeBase600: fontSizeBase600,
+	fontSizeHero700: fontSizeHero700,
+	fontSizeHero800: fontSizeHero800,
+	fontSizeHero900: fontSizeHero900,
+	fontSizeHero1000: fontSizeHero1000,
+	lineHeightBase100: lineHeightBase100,
+	lineHeightBase200: lineHeightBase200,
+	lineHeightBase300: lineHeightBase300,
+	lineHeightBase400: lineHeightBase400,
+	lineHeightBase500: lineHeightBase500,
+	lineHeightBase600: lineHeightBase600,
+	lineHeightHero700: lineHeightHero700,
+	lineHeightHero800: lineHeightHero800,
+	lineHeightHero900: lineHeightHero900,
+	lineHeightHero1000: lineHeightHero1000,
+	fontFamilyBase: fontFamilyBase,
+	fontFamilyMonospace: fontFamilyMonospace,
+	fontFamilyNumeric: fontFamilyNumeric,
+	fontWeightRegular: fontWeightRegular,
+	fontWeightMedium: fontWeightMedium,
+	fontWeightSemibold: fontWeightSemibold,
+	fontWeightBold: fontWeightBold,
+	strokeWidthThin: strokeWidthThin,
+	strokeWidthThick: strokeWidthThick,
+	strokeWidthThicker: strokeWidthThicker,
+	strokeWidthThickest: strokeWidthThickest,
+	spacingHorizontalNone: spacingHorizontalNone,
+	spacingHorizontalXXS: spacingHorizontalXXS,
+	spacingHorizontalXS: spacingHorizontalXS,
+	spacingHorizontalSNudge: spacingHorizontalSNudge,
+	spacingHorizontalS: spacingHorizontalS,
+	spacingHorizontalMNudge: spacingHorizontalMNudge,
+	spacingHorizontalM: spacingHorizontalM,
+	spacingHorizontalL: spacingHorizontalL,
+	spacingHorizontalXL: spacingHorizontalXL,
+	spacingHorizontalXXL: spacingHorizontalXXL,
+	spacingHorizontalXXXL: spacingHorizontalXXXL,
+	spacingVerticalNone: spacingVerticalNone,
+	spacingVerticalXXS: spacingVerticalXXS,
+	spacingVerticalXS: spacingVerticalXS,
+	spacingVerticalSNudge: spacingVerticalSNudge,
+	spacingVerticalS: spacingVerticalS,
+	spacingVerticalMNudge: spacingVerticalMNudge,
+	spacingVerticalM: spacingVerticalM,
+	spacingVerticalL: spacingVerticalL,
+	spacingVerticalXL: spacingVerticalXL,
+	spacingVerticalXXL: spacingVerticalXXL,
+	spacingVerticalXXXL: spacingVerticalXXXL,
+	durationUltraFast: durationUltraFast,
+	durationFaster: durationFaster,
+	durationFast: durationFast,
+	durationNormal: durationNormal,
+	durationSlow: durationSlow,
+	durationSlower: durationSlower,
+	durationUltraSlow: durationUltraSlow,
+	curveAccelerateMax: curveAccelerateMax,
+	curveAccelerateMid: curveAccelerateMid,
+	curveAccelerateMin: curveAccelerateMin,
+	curveDecelerateMax: curveDecelerateMax,
+	curveDecelerateMid: curveDecelerateMid,
+	curveDecelerateMin: curveDecelerateMin,
+	curveEasyEaseMax: curveEasyEaseMax,
+	curveEasyEase: curveEasyEase,
+	curveLinear: curveLinear,
+	colorNeutralForeground1: colorNeutralForeground1,
+	colorNeutralForeground1Hover: colorNeutralForeground1Hover,
+	colorNeutralForeground1Pressed: colorNeutralForeground1Pressed,
+	colorNeutralForeground1Selected: colorNeutralForeground1Selected,
+	colorNeutralForeground2: colorNeutralForeground2,
+	colorNeutralForeground2Hover: colorNeutralForeground2Hover,
+	colorNeutralForeground2Pressed: colorNeutralForeground2Pressed,
+	colorNeutralForeground2Selected: colorNeutralForeground2Selected,
+	colorNeutralForeground2BrandHover: colorNeutralForeground2BrandHover,
+	colorNeutralForeground2BrandPressed: colorNeutralForeground2BrandPressed,
+	colorNeutralForeground2BrandSelected: colorNeutralForeground2BrandSelected,
+	colorNeutralForeground3: colorNeutralForeground3,
+	colorNeutralForeground3Hover: colorNeutralForeground3Hover,
+	colorNeutralForeground3Pressed: colorNeutralForeground3Pressed,
+	colorNeutralForeground3Selected: colorNeutralForeground3Selected,
+	colorNeutralForeground3BrandHover: colorNeutralForeground3BrandHover,
+	colorNeutralForeground3BrandPressed: colorNeutralForeground3BrandPressed,
+	colorNeutralForeground3BrandSelected: colorNeutralForeground3BrandSelected,
+	colorNeutralForeground4: colorNeutralForeground4,
+	colorNeutralForegroundDisabled: colorNeutralForegroundDisabled,
+	colorNeutralForegroundInvertedDisabled: colorNeutralForegroundInvertedDisabled,
+	colorBrandForegroundLink: colorBrandForegroundLink,
+	colorBrandForegroundLinkHover: colorBrandForegroundLinkHover,
+	colorBrandForegroundLinkPressed: colorBrandForegroundLinkPressed,
+	colorBrandForegroundLinkSelected: colorBrandForegroundLinkSelected,
+	colorNeutralForeground2Link: colorNeutralForeground2Link,
+	colorNeutralForeground2LinkHover: colorNeutralForeground2LinkHover,
+	colorNeutralForeground2LinkPressed: colorNeutralForeground2LinkPressed,
+	colorNeutralForeground2LinkSelected: colorNeutralForeground2LinkSelected,
+	colorCompoundBrandForeground1: colorCompoundBrandForeground1,
+	colorCompoundBrandForeground1Hover: colorCompoundBrandForeground1Hover,
+	colorCompoundBrandForeground1Pressed: colorCompoundBrandForeground1Pressed,
+	colorBrandForeground1: colorBrandForeground1,
+	colorBrandForeground2: colorBrandForeground2,
+	colorNeutralForeground1Static: colorNeutralForeground1Static,
+	colorNeutralForegroundStaticInverted: colorNeutralForegroundStaticInverted,
+	colorNeutralForegroundInverted: colorNeutralForegroundInverted,
+	colorNeutralForegroundInvertedHover: colorNeutralForegroundInvertedHover,
+	colorNeutralForegroundInvertedPressed: colorNeutralForegroundInvertedPressed,
+	colorNeutralForegroundInvertedSelected: colorNeutralForegroundInvertedSelected,
+	colorNeutralForegroundInverted2: colorNeutralForegroundInverted2,
+	colorNeutralForegroundOnBrand: colorNeutralForegroundOnBrand,
+	colorNeutralForegroundInvertedLink: colorNeutralForegroundInvertedLink,
+	colorNeutralForegroundInvertedLinkHover: colorNeutralForegroundInvertedLinkHover,
+	colorNeutralForegroundInvertedLinkPressed: colorNeutralForegroundInvertedLinkPressed,
+	colorNeutralForegroundInvertedLinkSelected: colorNeutralForegroundInvertedLinkSelected,
+	colorBrandForegroundInverted: colorBrandForegroundInverted,
+	colorBrandForegroundInvertedHover: colorBrandForegroundInvertedHover,
+	colorBrandForegroundInvertedPressed: colorBrandForegroundInvertedPressed,
+	colorBrandForegroundOnLight: colorBrandForegroundOnLight,
+	colorBrandForegroundOnLightHover: colorBrandForegroundOnLightHover,
+	colorBrandForegroundOnLightPressed: colorBrandForegroundOnLightPressed,
+	colorBrandForegroundOnLightSelected: colorBrandForegroundOnLightSelected,
+	colorNeutralBackground1: colorNeutralBackground1,
+	colorNeutralBackground1Hover: colorNeutralBackground1Hover,
+	colorNeutralBackground1Pressed: colorNeutralBackground1Pressed,
+	colorNeutralBackground1Selected: colorNeutralBackground1Selected,
+	colorNeutralBackground2: colorNeutralBackground2,
+	colorNeutralBackground2Hover: colorNeutralBackground2Hover,
+	colorNeutralBackground2Pressed: colorNeutralBackground2Pressed,
+	colorNeutralBackground2Selected: colorNeutralBackground2Selected,
+	colorNeutralBackground3: colorNeutralBackground3,
+	colorNeutralBackground3Hover: colorNeutralBackground3Hover,
+	colorNeutralBackground3Pressed: colorNeutralBackground3Pressed,
+	colorNeutralBackground3Selected: colorNeutralBackground3Selected,
+	colorNeutralBackground4: colorNeutralBackground4,
+	colorNeutralBackground4Hover: colorNeutralBackground4Hover,
+	colorNeutralBackground4Pressed: colorNeutralBackground4Pressed,
+	colorNeutralBackground4Selected: colorNeutralBackground4Selected,
+	colorNeutralBackground5: colorNeutralBackground5,
+	colorNeutralBackground5Hover: colorNeutralBackground5Hover,
+	colorNeutralBackground5Pressed: colorNeutralBackground5Pressed,
+	colorNeutralBackground5Selected: colorNeutralBackground5Selected,
+	colorNeutralBackground6: colorNeutralBackground6,
+	colorNeutralBackgroundInverted: colorNeutralBackgroundInverted,
+	colorNeutralBackgroundStatic: colorNeutralBackgroundStatic,
+	colorSubtleBackground: colorSubtleBackground,
+	colorSubtleBackgroundHover: colorSubtleBackgroundHover,
+	colorSubtleBackgroundPressed: colorSubtleBackgroundPressed,
+	colorSubtleBackgroundSelected: colorSubtleBackgroundSelected,
+	colorSubtleBackgroundLightAlphaHover: colorSubtleBackgroundLightAlphaHover,
+	colorSubtleBackgroundLightAlphaPressed: colorSubtleBackgroundLightAlphaPressed,
+	colorSubtleBackgroundLightAlphaSelected: colorSubtleBackgroundLightAlphaSelected,
+	colorSubtleBackgroundInverted: colorSubtleBackgroundInverted,
+	colorSubtleBackgroundInvertedHover: colorSubtleBackgroundInvertedHover,
+	colorSubtleBackgroundInvertedPressed: colorSubtleBackgroundInvertedPressed,
+	colorSubtleBackgroundInvertedSelected: colorSubtleBackgroundInvertedSelected,
+	colorTransparentBackground: colorTransparentBackground,
+	colorTransparentBackgroundHover: colorTransparentBackgroundHover,
+	colorTransparentBackgroundPressed: colorTransparentBackgroundPressed,
+	colorTransparentBackgroundSelected: colorTransparentBackgroundSelected,
+	colorNeutralBackgroundDisabled: colorNeutralBackgroundDisabled,
+	colorNeutralBackgroundInvertedDisabled: colorNeutralBackgroundInvertedDisabled,
+	colorNeutralStencil1: colorNeutralStencil1,
+	colorNeutralStencil2: colorNeutralStencil2,
+	colorBackgroundOverlay: colorBackgroundOverlay,
+	colorScrollbarOverlay: colorScrollbarOverlay,
+	colorBrandBackground: colorBrandBackground,
+	colorBrandBackgroundHover: colorBrandBackgroundHover,
+	colorBrandBackgroundPressed: colorBrandBackgroundPressed,
+	colorBrandBackgroundSelected: colorBrandBackgroundSelected,
+	colorCompoundBrandBackground: colorCompoundBrandBackground,
+	colorCompoundBrandBackgroundHover: colorCompoundBrandBackgroundHover,
+	colorCompoundBrandBackgroundPressed: colorCompoundBrandBackgroundPressed,
+	colorBrandBackgroundStatic: colorBrandBackgroundStatic,
+	colorBrandBackground2: colorBrandBackground2,
+	colorBrandBackgroundInverted: colorBrandBackgroundInverted,
+	colorBrandBackgroundInvertedHover: colorBrandBackgroundInvertedHover,
+	colorBrandBackgroundInvertedPressed: colorBrandBackgroundInvertedPressed,
+	colorBrandBackgroundInvertedSelected: colorBrandBackgroundInvertedSelected,
+	colorNeutralStrokeAccessible: colorNeutralStrokeAccessible,
+	colorNeutralStrokeAccessibleHover: colorNeutralStrokeAccessibleHover,
+	colorNeutralStrokeAccessiblePressed: colorNeutralStrokeAccessiblePressed,
+	colorNeutralStrokeAccessibleSelected: colorNeutralStrokeAccessibleSelected,
+	colorNeutralStroke1: colorNeutralStroke1,
+	colorNeutralStroke1Hover: colorNeutralStroke1Hover,
+	colorNeutralStroke1Pressed: colorNeutralStroke1Pressed,
+	colorNeutralStroke1Selected: colorNeutralStroke1Selected,
+	colorNeutralStroke2: colorNeutralStroke2,
+	colorNeutralStroke3: colorNeutralStroke3,
+	colorNeutralStrokeOnBrand: colorNeutralStrokeOnBrand,
+	colorNeutralStrokeOnBrand2: colorNeutralStrokeOnBrand2,
+	colorNeutralStrokeOnBrand2Hover: colorNeutralStrokeOnBrand2Hover,
+	colorNeutralStrokeOnBrand2Pressed: colorNeutralStrokeOnBrand2Pressed,
+	colorNeutralStrokeOnBrand2Selected: colorNeutralStrokeOnBrand2Selected,
+	colorBrandStroke1: colorBrandStroke1,
+	colorBrandStroke2: colorBrandStroke2,
+	colorCompoundBrandStroke: colorCompoundBrandStroke,
+	colorCompoundBrandStrokeHover: colorCompoundBrandStrokeHover,
+	colorCompoundBrandStrokePressed: colorCompoundBrandStrokePressed,
+	colorNeutralStrokeDisabled: colorNeutralStrokeDisabled,
+	colorNeutralStrokeInvertedDisabled: colorNeutralStrokeInvertedDisabled,
+	colorTransparentStroke: colorTransparentStroke,
+	colorTransparentStrokeInteractive: colorTransparentStrokeInteractive,
+	colorTransparentStrokeDisabled: colorTransparentStrokeDisabled,
+	colorStrokeFocus1: colorStrokeFocus1,
+	colorStrokeFocus2: colorStrokeFocus2,
+	colorNeutralShadowAmbient: colorNeutralShadowAmbient,
+	colorNeutralShadowKey: colorNeutralShadowKey,
+	colorNeutralShadowAmbientLighter: colorNeutralShadowAmbientLighter,
+	colorNeutralShadowKeyLighter: colorNeutralShadowKeyLighter,
+	colorNeutralShadowAmbientDarker: colorNeutralShadowAmbientDarker,
+	colorNeutralShadowKeyDarker: colorNeutralShadowKeyDarker,
+	colorBrandShadowAmbient: colorBrandShadowAmbient,
+	colorBrandShadowKey: colorBrandShadowKey,
+	colorPaletteRedBackground1: colorPaletteRedBackground1,
+	colorPaletteRedBackground2: colorPaletteRedBackground2,
+	colorPaletteRedBackground3: colorPaletteRedBackground3,
+	colorPaletteRedForeground1: colorPaletteRedForeground1,
+	colorPaletteRedForeground2: colorPaletteRedForeground2,
+	colorPaletteRedForeground3: colorPaletteRedForeground3,
+	colorPaletteRedBorderActive: colorPaletteRedBorderActive,
+	colorPaletteRedBorder1: colorPaletteRedBorder1,
+	colorPaletteRedBorder2: colorPaletteRedBorder2,
+	colorPaletteGreenBackground1: colorPaletteGreenBackground1,
+	colorPaletteGreenBackground2: colorPaletteGreenBackground2,
+	colorPaletteGreenBackground3: colorPaletteGreenBackground3,
+	colorPaletteGreenForeground1: colorPaletteGreenForeground1,
+	colorPaletteGreenForeground2: colorPaletteGreenForeground2,
+	colorPaletteGreenForeground3: colorPaletteGreenForeground3,
+	colorPaletteGreenBorderActive: colorPaletteGreenBorderActive,
+	colorPaletteGreenBorder1: colorPaletteGreenBorder1,
+	colorPaletteGreenBorder2: colorPaletteGreenBorder2,
+	colorPaletteDarkOrangeBackground1: colorPaletteDarkOrangeBackground1,
+	colorPaletteDarkOrangeBackground2: colorPaletteDarkOrangeBackground2,
+	colorPaletteDarkOrangeBackground3: colorPaletteDarkOrangeBackground3,
+	colorPaletteDarkOrangeForeground1: colorPaletteDarkOrangeForeground1,
+	colorPaletteDarkOrangeForeground2: colorPaletteDarkOrangeForeground2,
+	colorPaletteDarkOrangeForeground3: colorPaletteDarkOrangeForeground3,
+	colorPaletteDarkOrangeBorderActive: colorPaletteDarkOrangeBorderActive,
+	colorPaletteDarkOrangeBorder1: colorPaletteDarkOrangeBorder1,
+	colorPaletteDarkOrangeBorder2: colorPaletteDarkOrangeBorder2,
+	colorPaletteYellowBackground1: colorPaletteYellowBackground1,
+	colorPaletteYellowBackground2: colorPaletteYellowBackground2,
+	colorPaletteYellowBackground3: colorPaletteYellowBackground3,
+	colorPaletteYellowForeground1: colorPaletteYellowForeground1,
+	colorPaletteYellowForeground2: colorPaletteYellowForeground2,
+	colorPaletteYellowForeground3: colorPaletteYellowForeground3,
+	colorPaletteYellowBorderActive: colorPaletteYellowBorderActive,
+	colorPaletteYellowBorder1: colorPaletteYellowBorder1,
+	colorPaletteYellowBorder2: colorPaletteYellowBorder2,
+	colorPaletteBerryBackground1: colorPaletteBerryBackground1,
+	colorPaletteBerryBackground2: colorPaletteBerryBackground2,
+	colorPaletteBerryBackground3: colorPaletteBerryBackground3,
+	colorPaletteBerryForeground1: colorPaletteBerryForeground1,
+	colorPaletteBerryForeground2: colorPaletteBerryForeground2,
+	colorPaletteBerryForeground3: colorPaletteBerryForeground3,
+	colorPaletteBerryBorderActive: colorPaletteBerryBorderActive,
+	colorPaletteBerryBorder1: colorPaletteBerryBorder1,
+	colorPaletteBerryBorder2: colorPaletteBerryBorder2,
+	colorPaletteLightGreenBackground1: colorPaletteLightGreenBackground1,
+	colorPaletteLightGreenBackground2: colorPaletteLightGreenBackground2,
+	colorPaletteLightGreenBackground3: colorPaletteLightGreenBackground3,
+	colorPaletteLightGreenForeground1: colorPaletteLightGreenForeground1,
+	colorPaletteLightGreenForeground2: colorPaletteLightGreenForeground2,
+	colorPaletteLightGreenForeground3: colorPaletteLightGreenForeground3,
+	colorPaletteLightGreenBorderActive: colorPaletteLightGreenBorderActive,
+	colorPaletteLightGreenBorder1: colorPaletteLightGreenBorder1,
+	colorPaletteLightGreenBorder2: colorPaletteLightGreenBorder2,
+	colorPaletteMarigoldBackground1: colorPaletteMarigoldBackground1,
+	colorPaletteMarigoldBackground2: colorPaletteMarigoldBackground2,
+	colorPaletteMarigoldBackground3: colorPaletteMarigoldBackground3,
+	colorPaletteMarigoldForeground1: colorPaletteMarigoldForeground1,
+	colorPaletteMarigoldForeground2: colorPaletteMarigoldForeground2,
+	colorPaletteMarigoldForeground3: colorPaletteMarigoldForeground3,
+	colorPaletteMarigoldBorderActive: colorPaletteMarigoldBorderActive,
+	colorPaletteMarigoldBorder1: colorPaletteMarigoldBorder1,
+	colorPaletteMarigoldBorder2: colorPaletteMarigoldBorder2,
+	colorPaletteDarkRedBackground2: colorPaletteDarkRedBackground2,
+	colorPaletteDarkRedForeground2: colorPaletteDarkRedForeground2,
+	colorPaletteDarkRedBorderActive: colorPaletteDarkRedBorderActive,
+	colorPaletteCranberryBackground2: colorPaletteCranberryBackground2,
+	colorPaletteCranberryForeground2: colorPaletteCranberryForeground2,
+	colorPaletteCranberryBorderActive: colorPaletteCranberryBorderActive,
+	colorPalettePumpkinBackground2: colorPalettePumpkinBackground2,
+	colorPalettePumpkinForeground2: colorPalettePumpkinForeground2,
+	colorPalettePumpkinBorderActive: colorPalettePumpkinBorderActive,
+	colorPalettePeachBackground2: colorPalettePeachBackground2,
+	colorPalettePeachForeground2: colorPalettePeachForeground2,
+	colorPalettePeachBorderActive: colorPalettePeachBorderActive,
+	colorPaletteGoldBackground2: colorPaletteGoldBackground2,
+	colorPaletteGoldForeground2: colorPaletteGoldForeground2,
+	colorPaletteGoldBorderActive: colorPaletteGoldBorderActive,
+	colorPaletteBrassBackground2: colorPaletteBrassBackground2,
+	colorPaletteBrassForeground2: colorPaletteBrassForeground2,
+	colorPaletteBrassBorderActive: colorPaletteBrassBorderActive,
+	colorPaletteBrownBackground2: colorPaletteBrownBackground2,
+	colorPaletteBrownForeground2: colorPaletteBrownForeground2,
+	colorPaletteBrownBorderActive: colorPaletteBrownBorderActive,
+	colorPaletteForestBackground2: colorPaletteForestBackground2,
+	colorPaletteForestForeground2: colorPaletteForestForeground2,
+	colorPaletteForestBorderActive: colorPaletteForestBorderActive,
+	colorPaletteSeafoamBackground2: colorPaletteSeafoamBackground2,
+	colorPaletteSeafoamForeground2: colorPaletteSeafoamForeground2,
+	colorPaletteSeafoamBorderActive: colorPaletteSeafoamBorderActive,
+	colorPaletteDarkGreenBackground2: colorPaletteDarkGreenBackground2,
+	colorPaletteDarkGreenForeground2: colorPaletteDarkGreenForeground2,
+	colorPaletteDarkGreenBorderActive: colorPaletteDarkGreenBorderActive,
+	colorPaletteLightTealBackground2: colorPaletteLightTealBackground2,
+	colorPaletteLightTealForeground2: colorPaletteLightTealForeground2,
+	colorPaletteLightTealBorderActive: colorPaletteLightTealBorderActive,
+	colorPaletteTealBackground2: colorPaletteTealBackground2,
+	colorPaletteTealForeground2: colorPaletteTealForeground2,
+	colorPaletteTealBorderActive: colorPaletteTealBorderActive,
+	colorPaletteSteelBackground2: colorPaletteSteelBackground2,
+	colorPaletteSteelForeground2: colorPaletteSteelForeground2,
+	colorPaletteSteelBorderActive: colorPaletteSteelBorderActive,
+	colorPaletteBlueBackground2: colorPaletteBlueBackground2,
+	colorPaletteBlueForeground2: colorPaletteBlueForeground2,
+	colorPaletteBlueBorderActive: colorPaletteBlueBorderActive,
+	colorPaletteRoyalBlueBackground2: colorPaletteRoyalBlueBackground2,
+	colorPaletteRoyalBlueForeground2: colorPaletteRoyalBlueForeground2,
+	colorPaletteRoyalBlueBorderActive: colorPaletteRoyalBlueBorderActive,
+	colorPaletteCornflowerBackground2: colorPaletteCornflowerBackground2,
+	colorPaletteCornflowerForeground2: colorPaletteCornflowerForeground2,
+	colorPaletteCornflowerBorderActive: colorPaletteCornflowerBorderActive,
+	colorPaletteNavyBackground2: colorPaletteNavyBackground2,
+	colorPaletteNavyForeground2: colorPaletteNavyForeground2,
+	colorPaletteNavyBorderActive: colorPaletteNavyBorderActive,
+	colorPaletteLavenderBackground2: colorPaletteLavenderBackground2,
+	colorPaletteLavenderForeground2: colorPaletteLavenderForeground2,
+	colorPaletteLavenderBorderActive: colorPaletteLavenderBorderActive,
+	colorPalettePurpleBackground2: colorPalettePurpleBackground2,
+	colorPalettePurpleForeground2: colorPalettePurpleForeground2,
+	colorPalettePurpleBorderActive: colorPalettePurpleBorderActive,
+	colorPaletteGrapeBackground2: colorPaletteGrapeBackground2,
+	colorPaletteGrapeForeground2: colorPaletteGrapeForeground2,
+	colorPaletteGrapeBorderActive: colorPaletteGrapeBorderActive,
+	colorPaletteLilacBackground2: colorPaletteLilacBackground2,
+	colorPaletteLilacForeground2: colorPaletteLilacForeground2,
+	colorPaletteLilacBorderActive: colorPaletteLilacBorderActive,
+	colorPalettePinkBackground2: colorPalettePinkBackground2,
+	colorPalettePinkForeground2: colorPalettePinkForeground2,
+	colorPalettePinkBorderActive: colorPalettePinkBorderActive,
+	colorPaletteMagentaBackground2: colorPaletteMagentaBackground2,
+	colorPaletteMagentaForeground2: colorPaletteMagentaForeground2,
+	colorPaletteMagentaBorderActive: colorPaletteMagentaBorderActive,
+	colorPalettePlumBackground2: colorPalettePlumBackground2,
+	colorPalettePlumForeground2: colorPalettePlumForeground2,
+	colorPalettePlumBorderActive: colorPalettePlumBorderActive,
+	colorPaletteBeigeBackground2: colorPaletteBeigeBackground2,
+	colorPaletteBeigeForeground2: colorPaletteBeigeForeground2,
+	colorPaletteBeigeBorderActive: colorPaletteBeigeBorderActive,
+	colorPaletteMinkBackground2: colorPaletteMinkBackground2,
+	colorPaletteMinkForeground2: colorPaletteMinkForeground2,
+	colorPaletteMinkBorderActive: colorPaletteMinkBorderActive,
+	colorPalettePlatinumBackground2: colorPalettePlatinumBackground2,
+	colorPalettePlatinumForeground2: colorPalettePlatinumForeground2,
+	colorPalettePlatinumBorderActive: colorPalettePlatinumBorderActive,
+	colorPaletteAnchorBackground2: colorPaletteAnchorBackground2,
+	colorPaletteAnchorForeground2: colorPaletteAnchorForeground2,
+	colorPaletteAnchorBorderActive: colorPaletteAnchorBorderActive,
+	shadow2: shadow2,
+	shadow4: shadow4,
+	shadow8: shadow8,
+	shadow16: shadow16,
+	shadow28: shadow28,
+	shadow64: shadow64,
+	shadow2Brand: shadow2Brand,
+	shadow4Brand: shadow4Brand,
+	shadow8Brand: shadow8Brand,
+	shadow16Brand: shadow16Brand,
+	shadow28Brand: shadow28Brand,
+	shadow64Brand: shadow64Brand
 });
 
+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}`;
+
+const chevronRight20Filled = html.partial(`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="default-collapsed-icon"
+>
+  <path
+    d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z"
+    fill="#212121"
+  />
+</svg>`);
+const chevronDown20Filled = html.partial(`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="default-expanded-icon"
+>
+  <path
+    d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z"
+    fill="#212121"
+  />
+</svg>`);
+/**
+ * The template for the fluent-accordion component.
+ * @public
+ */
+const template$6 = accordionItemTemplate({
+  collapsedIcon: chevronRight20Filled,
+  expandedIcon: chevronDown20Filled
+});
+
+/**
+ * The Fluent AccordionItem Element. Implements {@link @microsoft/fast-foundation#AccordionItem },
+ * {@link @microsoft/fast-foundation#accordionItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion-item\>
+ */
+const definition$6 = AccordionItem.compose({
+  name: `${FluentDesignSystem.prefix}-accordion-item`,
+  template: template$6,
+  styles: styles$6
+});
+
+/**
+ * BadgeAppearance constants
+ * @public
+ */
+const BadgeAppearance = {
+  filled: 'filled',
+  ghost: 'ghost',
+  outline: 'outline',
+  tint: 'tint'
+};
+/**
+ * BadgeColor constants
+ * @public
+ */
+const BadgeColor = {
+  brand: 'brand',
+  danger: 'danger',
+  important: 'important',
+  informative: 'informative',
+  severe: 'severe',
+  subtle: 'subtle',
+  success: 'success',
+  warning: 'warning'
+};
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+const BadgeShape = {
+  circular: 'circular',
+  rounded: 'rounded',
+  square: 'square'
+};
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+const BadgeSize = {
+  tiny: 'tiny',
+  extraSmall: 'extra-small',
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  extraLarge: 'extra-large'
+};
+
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+class Badge extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * The appearance the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    this.appearance = BadgeAppearance.filled;
+    /**
+     * The color the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    this.color = BadgeColor.brand;
+  }
+}
+__decorate([attr], Badge.prototype, "appearance", void 0);
+__decorate([attr], Badge.prototype, "color", void 0);
+__decorate([attr], Badge.prototype, "shape", void 0);
+__decorate([attr], Badge.prototype, "size", void 0);
+applyMixins(Badge, StartEnd);
+
+/**
+ * The template for the Badge component.
+ * @public
+ */
+function badgeTemplate(options = {}) {
+  return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
+}
+const template$5 = badgeTemplate();
+
 const textPadding = spacingHorizontalXXS;
 const badgeBaseStyles = css.partial`
   ${display('inline-flex')} :host {
@@ -5209,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}
@@ -5218,12 +6381,6 @@ const styles$4 = css`
   ${badgeBaseStyles}
 `;
 
-const FluentDesignSystem = Object.freeze({
-  prefix: 'fluent',
-  shadowRootMode: 'open',
-  registry: customElements
-});
-
 /**
  * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
  * {@link @microsoft/fast-foundation#badgeTemplate}
@@ -5233,10 +6390,10 @@ const FluentDesignSystem = Object.freeze({
  * @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
 });
 
 /**
@@ -5372,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}
@@ -5394,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
 });
 
 /**
@@ -5440,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(
@@ -5455,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>`
 });
@@ -5468,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
 });
 
 /**
@@ -5504,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
@@ -5525,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)}}`;
@@ -5539,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
 });
@@ -5711,4 +6905,4 @@ const setTheme = theme => {
   }
 };
 
-export { 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, 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 };