@fluentui/web-components 3.0.0-alpha.10 → 3.0.0-alpha.12

package/dist/web-components.js

@@ -1,5 +1,65 @@
 import { composedContains, composedParent } from '@microsoft/fast-element/utilities';
 
+let kernelMode;
+const kernelAttr = "fast-kernel";
+try {
+  if (document.currentScript) {
+    kernelMode = document.currentScript.getAttribute(kernelAttr);
+  } else {
+    const scripts = document.getElementsByTagName("script");
+    const currentScript = scripts[scripts.length - 1];
+    kernelMode = currentScript.getAttribute(kernelAttr);
+  }
+} catch (e) {
+  kernelMode = "isolate";
+}
+let KernelServiceId;
+switch (kernelMode) {
+  case "share":
+    // share the kernel across major versions
+    KernelServiceId = Object.freeze({
+      updateQueue: 1,
+      observable: 2,
+      contextEvent: 3,
+      elementRegistry: 4
+    });
+    break;
+  case "share-v2":
+    // only share the kernel with other v2 instances
+    KernelServiceId = Object.freeze({
+      updateQueue: 1.2,
+      observable: 2.2,
+      contextEvent: 3.2,
+      elementRegistry: 4.2
+    });
+    break;
+  default:
+    // fully isolate the kernel from all other FAST instances
+    const postfix = `-${Math.random().toString(36).substring(2, 8)}`;
+    KernelServiceId = Object.freeze({
+      updateQueue: `1.2${postfix}`,
+      observable: `2.2${postfix}`,
+      contextEvent: `3.2${postfix}`,
+      elementRegistry: `4.2${postfix}`
+    });
+    break;
+}
+/**
+ * Determines whether or not an object is a function.
+ * @public
+ */
+const isFunction = object => typeof object === "function";
+/**
+ * Determines whether or not an object is a string.
+ * @public
+ */
+const isString = object => typeof object === "string";
+/**
+ * A function which does nothing.
+ * @public
+ */
+const noop = () => void 0;
+
 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 */
@@ -118,66 +178,14 @@ function createMetadataLocator() {
     return metadata;
   };
 }
-
-let kernelMode;
-const kernelAttr = "fast-kernel";
-try {
-  if (document.currentScript) {
-    kernelMode = document.currentScript.getAttribute(kernelAttr);
-  } else {
-    const scripts = document.getElementsByTagName("script");
-    const currentScript = scripts[scripts.length - 1];
-    kernelMode = currentScript.getAttribute(kernelAttr);
-  }
-} catch (e) {
-  kernelMode = "isolate";
-}
-let KernelServiceId;
-switch (kernelMode) {
-  case "share":
-    // share the kernel across major versions
-    KernelServiceId = Object.freeze({
-      updateQueue: 1,
-      observable: 2,
-      contextEvent: 3,
-      elementRegistry: 4
-    });
-    break;
-  case "share-v2":
-    // only share the kernel with other v2 instances
-    KernelServiceId = Object.freeze({
-      updateQueue: 1.2,
-      observable: 2.2,
-      contextEvent: 3.2,
-      elementRegistry: 4.2
-    });
-    break;
-  default:
-    // fully isolate the kernel from all other FAST instances
-    const postfix = `-${Math.random().toString(36).substring(2, 8)}`;
-    KernelServiceId = Object.freeze({
-      updateQueue: `1.2${postfix}`,
-      observable: `2.2${postfix}`,
-      contextEvent: `3.2${postfix}`,
-      elementRegistry: `4.2${postfix}`
-    });
-    break;
-}
 /**
- * Determines whether or not an object is a function.
- * @internal
- */
-const isFunction = object => typeof object === "function";
-/**
- * Determines whether or not an object is a string.
+ * Makes a type noop for JSON serialization.
+ * @param type - The type to make noop for JSON serialization.
  * @internal
  */
-const isString = object => typeof object === "string";
-/**
- * A function which does nothing.
- * @internal
- */
-const noop = () => void 0;
+function makeSerializationNoop(type) {
+  type.prototype.toJSON = noop;
+}
 
 /**
  * The type of HTML aspect to target.
@@ -573,10 +581,6 @@ const Observable = FAST.getById(KernelServiceId.observable, () => {
       this.propertyName = void 0;
       this.notifier = void 0;
       this.next = void 0;
-      /**
-       * Opts out of JSON stringification.
-       */
-      this.toJSON = noop;
     }
     setMode(isAsync) {
       this.isAsync = this.needsQueue = isAsync;
@@ -674,6 +678,7 @@ const Observable = FAST.getById(KernelServiceId.observable, () => {
       }
     }
   }
+  makeSerializationNoop(ExpressionNotifierImplementation);
   return Object.freeze({
     /**
      * @internal
@@ -815,6 +820,62 @@ const ExecutionContext = Object.freeze({
   }
 });
 
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+class Binding {
+  /**
+   * Creates a binding.
+   * @param evaluate - Evaluates the binding.
+   * @param policy - The security policy to associate with this binding.
+   * @param isVolatile - Indicates whether the binding is volatile.
+   */
+  constructor(evaluate, policy, isVolatile = false) {
+    this.evaluate = evaluate;
+    this.policy = policy;
+    this.isVolatile = isVolatile;
+  }
+}
+
+class OneWayBinding extends Binding {
+  createObserver(subscriber) {
+    return Observable.binding(this.evaluate, subscriber, this.isVolatile);
+  }
+}
+/**
+ * Creates an standard binding.
+ * @param expression - The binding to refresh when changed.
+ * @param policy - The security policy to associate with th binding.
+ * @param isVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding configuration.
+ * @public
+ */
+function oneWay(expression, policy, isVolatile = Observable.isVolatileBinding(expression)) {
+  return new OneWayBinding(expression, policy, isVolatile);
+}
+
+class OneTimeBinding extends Binding {
+  createObserver() {
+    return this;
+  }
+  bind(controller) {
+    return this.evaluate(controller.source, controller.context);
+  }
+}
+makeSerializationNoop(OneTimeBinding);
+/**
+ * Creates a one time binding
+ * @param expression - The binding to refresh when signaled.
+ * @param policy - The security policy to associate with th binding.
+ * @returns A binding configuration.
+ * @public
+ */
+function oneTime(expression, policy) {
+  return new OneTimeBinding(expression, policy);
+}
+
 let DefaultStyleStrategy;
 function reduceStyles(styles) {
   return styles.map(x => x instanceof ElementStyles ? reduceStyles(x.styles) : [x]).reduce((prev, curr) => prev.concat(curr), []);
@@ -933,6 +994,88 @@ function cssDirective() {
   };
 }
 
+function handleChange(directive, controller, observer) {
+  controller.source.style.setProperty(directive.targetAspect, observer.bind(controller));
+}
+/**
+ * Enables bindings in CSS.
+ *
+ * @public
+ */
+class CSSBindingDirective {
+  /**
+   * Creates an instance of CSSBindingDirective.
+   * @param dataBinding - The binding to use in CSS.
+   * @param targetAspect - The CSS property to target.
+   */
+  constructor(dataBinding, targetAspect) {
+    this.dataBinding = dataBinding;
+    this.targetAspect = targetAspect;
+  }
+  /**
+   * Creates a CSS fragment to interpolate into the CSS document.
+   * @returns - the string to interpolate into CSS
+   */
+  createCSS(add) {
+    add(this);
+    return `var(${this.targetAspect})`;
+  }
+  /**
+   * Executed when this behavior is attached to a controller.
+   * @param controller - Controls the behavior lifecycle.
+   */
+  addedCallback(controller) {
+    var _a;
+    const element = controller.source;
+    if (!element.$cssBindings) {
+      element.$cssBindings = new Map();
+      const setAttribute = element.setAttribute;
+      element.setAttribute = (attr, value) => {
+        setAttribute.call(element, attr, value);
+        if (attr === "style") {
+          element.$cssBindings.forEach((v, k) => handleChange(k, v.controller, v.observer));
+        }
+      };
+    }
+    const observer = (_a = controller[this.targetAspect]) !== null && _a !== void 0 ? _a : controller[this.targetAspect] = this.dataBinding.createObserver(this, this);
+    observer.controller = controller;
+    controller.source.$cssBindings.set(this, {
+      controller,
+      observer
+    });
+  }
+  /**
+   * Executed when this behavior's host is connected.
+   * @param controller - Controls the behavior lifecycle.
+   */
+  connectedCallback(controller) {
+    handleChange(this, controller, controller[this.targetAspect]);
+  }
+  /**
+   * Executed when this behavior is detached from a controller.
+   * @param controller - Controls the behavior lifecycle.
+   */
+  removedCallback(controller) {
+    if (controller.source.$cssBindings) {
+      controller.source.$cssBindings.delete(this);
+    }
+  }
+  /**
+   * Called when a subject this instance has subscribed to changes.
+   * @param subject - The subject of the change.
+   * @param args - The event args detailing the change that occurred.
+   *
+   * @internal
+   */
+  handleChange(_, observer) {
+    handleChange(this, observer.controller, observer);
+  }
+}
+CSSDirective.define(CSSBindingDirective);
+
+const marker$1 = `${Math.random().toString(36).substring(2, 8)}`;
+let varId = 0;
+const nextCSSVariable = () => `--v${marker$1}${++varId}`;
 function collectStyles(strings, values) {
   const styles = [];
   let cssString = "";
@@ -943,7 +1086,11 @@ function collectStyles(strings, values) {
   for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
     cssString += strings[i];
     let value = values[i];
-    if (CSSDirective.getForInstance(value) !== void 0) {
+    if (isFunction(value)) {
+      value = new CSSBindingDirective(oneWay(value), nextCSSVariable()).createCSS(add);
+    } else if (value instanceof Binding) {
+      value = new CSSBindingDirective(value, nextCSSVariable()).createCSS(add);
+    } else if (CSSDirective.getForInstance(value) !== void 0) {
       value = value.createCSS(add);
     }
     if (value instanceof ElementStyles || value instanceof CSSStyleSheet) {
@@ -1166,24 +1313,6 @@ function htmlDirective(options) {
     HTMLDirective.define(type, options);
   };
 }
-/**
- * Captures a binding expression along with related information and capabilities.
- *
- * @public
- */
-class Binding {
-  /**
-   * Creates a binding.
-   * @param evaluate - Evaluates the binding.
-   * @param policy - The security policy to associate with this binding.
-   * @param isVolatile - Indicates whether the binding is volatile.
-   */
-  constructor(evaluate, policy, isVolatile = false) {
-    this.evaluate = evaluate;
-    this.policy = policy;
-    this.isVolatile = isVolatile;
-  }
-}
 /**
  * A base class used for attribute directives that don't need internal state.
  * @public
@@ -1195,11 +1324,6 @@ class StatelessAttachedAttributeDirective {
    */
   constructor(options) {
     this.options = options;
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    this.toJSON = noop;
   }
   /**
    * Creates a placeholder string based on the directive's index within the template.
@@ -1218,28 +1342,8 @@ class StatelessAttachedAttributeDirective {
     return this;
   }
 }
+makeSerializationNoop(StatelessAttachedAttributeDirective);
 
-class OnChangeBinding extends Binding {
-  createObserver(_, subscriber) {
-    return Observable.binding(this.evaluate, subscriber, this.isVolatile);
-  }
-}
-class OneTimeBinding extends Binding {
-  constructor() {
-    super(...arguments);
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    this.toJSON = noop;
-  }
-  createObserver() {
-    return this;
-  }
-  bind(controller) {
-    return this.evaluate(controller.source, controller.context);
-  }
-}
 function updateContent(target, aspect, value, controller) {
   // If there's no actual value, then this equates to the
   // empty string for the purposes of content bindings.
@@ -1423,34 +1527,13 @@ class HTMLBindingDirective {
   /** @internal */
   handleChange(binding, observer) {
     const target = observer.target;
-    const controller = observer.controller;
-    this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
-  }
-}
-HTMLDirective.define(HTMLBindingDirective, {
-  aspected: true
-});
-/**
- * Creates an standard binding.
- * @param expression - The binding to refresh when changed.
- * @param policy - The security policy to associate with th binding.
- * @param isVolatile - Indicates whether the binding is volatile or not.
- * @returns A binding configuration.
- * @public
- */
-function bind(expression, policy, isVolatile = Observable.isVolatileBinding(expression)) {
-  return new OnChangeBinding(expression, policy, isVolatile);
-}
-/**
- * Creates a one time binding
- * @param expression - The binding to refresh when signaled.
- * @param policy - The security policy to associate with th binding.
- * @returns A binding configuration.
- * @public
- */
-function oneTime(expression, policy) {
-  return new OneTimeBinding(expression, policy);
+    const controller = observer.controller;
+    this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+  }
 }
+HTMLDirective.define(HTMLBindingDirective, {
+  aspected: true
+});
 
 function removeNodeSequence(firstNode, lastNode) {
   const parent = firstNode.parentNode;
@@ -1503,11 +1586,6 @@ class HTMLView {
      * The length of the current collection within a repeat context.
      */
     this.length = 0;
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    this.toJSON = noop;
     this.firstChild = fragment.firstChild;
     this.lastChild = fragment.lastChild;
   }
@@ -1685,6 +1763,7 @@ class HTMLView {
     }
   }
 }
+makeSerializationNoop(HTMLView);
 Observable.defineProperty(HTMLView.prototype, "index");
 Observable.defineProperty(HTMLView.prototype, "length");
 
@@ -2026,11 +2105,6 @@ class ViewTemplate {
   constructor(html, factories = {}, policy) {
     this.policy = policy;
     this.result = null;
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    this.toJSON = noop;
     this.html = html;
     this.factories = factories;
   }
@@ -2111,7 +2185,7 @@ class ViewTemplate {
       let definition;
       html += currentString;
       if (isFunction(currentValue)) {
-        currentValue = new HTMLBindingDirective(bind(currentValue));
+        currentValue = new HTMLBindingDirective(oneWay(currentValue));
       } else if (currentValue instanceof Binding) {
         currentValue = new HTMLBindingDirective(currentValue);
       } else if (!(definition = HTMLDirective.getForInstance(currentValue))) {
@@ -2123,6 +2197,7 @@ class ViewTemplate {
     return new ViewTemplate(html + strings[strings.length - 1], factories, policy);
   }
 }
+makeSerializationNoop(ViewTemplate);
 /**
  * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.
@@ -2648,11 +2723,6 @@ class ElementController extends PropertyChangeNotifier {
      * If `null` then the element is managing its own rendering.
      */
     this.view = null;
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    this.toJSON = noop;
     this.source = element;
     this.definition = definition;
     const shadowOptions = definition.shadowOptions;
@@ -2692,6 +2762,27 @@ class ElementController extends PropertyChangeNotifier {
     Observable.track(this, isConnectedPropertyName);
     return this.stage === 1 /* Stages.connected */;
   }
+  /**
+   * The context the expression is evaluated against.
+   */
+  get context() {
+    var _a, _b;
+    return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.context) !== null && _b !== void 0 ? _b : ExecutionContext.default;
+  }
+  /**
+   * Indicates whether the controller is bound.
+   */
+  get isBound() {
+    var _a, _b;
+    return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.isBound) !== null && _b !== void 0 ? _b : false;
+  }
+  /**
+   * Indicates how the source's lifetime relates to the controller's lifetime.
+   */
+  get sourceLifetime() {
+    var _a;
+    return (_a = this.view) === null || _a === void 0 ? void 0 : _a.sourceLifetime;
+  }
   /**
    * Gets/sets the template used to render the component.
    * @remarks
@@ -2752,6 +2843,14 @@ class ElementController extends PropertyChangeNotifier {
       this.addStyles(value);
     }
   }
+  /**
+   * Registers an unbind handler with the controller.
+   * @param behavior - An object to call when the controller unbinds.
+   */
+  onUnbind(behavior) {
+    var _a;
+    (_a = this.view) === null || _a === void 0 ? void 0 : _a.onUnbind(behavior);
+  }
   /**
    * Adds the behavior to the component.
    * @param behavior - The behavior to add.
@@ -2978,6 +3077,7 @@ class ElementController extends PropertyChangeNotifier {
     elementControllerStrategy = strategy;
   }
 }
+makeSerializationNoop(ElementController);
 // Set default strategy for ElementController
 ElementController.setStrategy(ElementController);
 /**
@@ -3214,12 +3314,23 @@ const Orientation = {
  * String values for use with KeyboardEvent.key
  */
 const keyArrowDown = "ArrowDown";
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
 const keyArrowUp = "ArrowUp";
 const keyEnd = "End";
 const keyEnter = "Enter";
 const keyHome = "Home";
 const keySpace = " ";
 
+/**
+ * Expose ltr and rtl strings
+ */
+var Direction;
+(function (Direction) {
+  Direction["ltr"] = "ltr";
+  Direction["rtl"] = "rtl";
+})(Direction || (Direction = {}));
+
 /**
  * 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,
@@ -3233,6 +3344,13 @@ function wrapInBounds(min, max, value) {
   }
   return value;
 }
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+  return Math.min(Math.max(value, min), max);
+}
 
 let uniqueIdCounter = 0;
 /**
@@ -3572,6 +3690,19 @@ function accordionTemplate() {
   })}></slot></template>`;
 }
 
+/**
+ * Determines the current localization direction of an element.
+ *
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @returns the localization direction of the element
+ *
+ * @public
+ */
+const getDirection = rootNode => {
+  var _a;
+  return ((_a = rootNode.closest("[dir]")) === null || _a === void 0 ? void 0 : _a.dir) === "rtl" ? Direction.rtl : Direction.ltr;
+};
+
 const proxySlotName = "form-associated-proxy";
 const ElementInternalsKey = "ElementInternals";
 /**
@@ -4958,50 +5089,413 @@ class FASTDivider extends FASTElement {
   constructor() {
     super(...arguments);
     /**
-     * The role of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: role
+     * The role of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: role
+     */
+    this.role = DividerRole.separator;
+    /**
+     * The orientation of the divider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    this.orientation = DividerOrientation.horizontal;
+  }
+}
+__decorate([attr], FASTDivider.prototype, "role", void 0);
+__decorate([attr], FASTDivider.prototype, "orientation", void 0);
+
+/**
+ * A base class for progress components.
+ * @public
+ */
+class FASTBaseProgress extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Indicates progress in %
+     * @internal
+     */
+    this.percentComplete = 0;
+  }
+  valueChanged() {
+    this.updatePercentComplete();
+  }
+  minChanged() {
+    if (this.$fastController.isConnected) {
+      this.updatePercentComplete();
+    }
+  }
+  maxChanged() {
+    if (this.$fastController.isConnected) {
+      this.updatePercentComplete();
+    }
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.updatePercentComplete();
+  }
+  updatePercentComplete() {
+    const min = typeof this.min === "number" ? this.min : 0;
+    const max = typeof this.max === "number" ? this.max : 100;
+    const value = typeof this.value === "number" ? this.value : 0;
+    const range = max - min;
+    this.percentComplete = range === 0 ? 0 : Math.fround((value - min) / range * 100);
+  }
+}
+__decorate([attr({
+  converter: nullableNumberConverter
+})], FASTBaseProgress.prototype, "value", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter
+})], FASTBaseProgress.prototype, "min", void 0);
+__decorate([attr({
+  converter: nullableNumberConverter
+})], FASTBaseProgress.prototype, "max", void 0);
+__decorate([observable], FASTBaseProgress.prototype, "percentComplete", void 0);
+
+/**
+ * An circular Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @slot determinate - The slot for a custom determinate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart background - The background
+ *
+ * @public
+ */
+class FASTProgressRing extends FASTBaseProgress {}
+
+const progressSegments = 44;
+/**
+ * The template for the {@link @microsoft/fast-foundation#FASTProgressRing} component.
+ * @public
+ */
+function progressRingTemplate(options = {}) {
+  return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate"><circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle><circle class="determinate" part="determinate" style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px" cx="8px" cy="8px" r="7px"></circle></svg>`)} ${when(x => typeof x.value !== "number", html`<slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator)}</slot>`)}</template>`;
+}
+
+/**
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
+ * @public
+ */
+class FASTProgress extends FASTBaseProgress {}
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#FASTProgress} component.
+ * @public
+ */
+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 orientation of a {@link @microsoft/fast-foundation#(FASTSlider:class)}.
+ * @public
+ */
+const SliderOrientation = Orientation;
+/**
+ * The selection modes of a {@link @microsoft/fast-foundation#(FASTSlider:class)}.
+ * @public
+ */
+const SliderMode = {
+  singleValue: "single-value"
+};
+
+/**
+ * Converts a pixel coordinate on the track to a percent of the track's range
+ */
+function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
+  let pct = limit(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
+  if (direction === Direction.rtl) {
+    pct = 1 - pct;
+  }
+  return pct;
+}
+
+class _Slider extends FASTElement {}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Slider:class)} component.
+ *
+ * @beta
+ */
+class FormAssociatedSlider extends FormAssociated(_Slider) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+/**
+ * A Slider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#slider | ARIA slider }.
+ *
+ * @slot track - The track of the slider
+ * @slot track-start - The track-start visual indicator
+ * @slot thumb - The slider thumb
+ * @slot - The default slot for labels
+ * @csspart positioning-region - The region used to position the elements of the slider
+ * @csspart track-container - The region containing the track elements
+ * @csspart track-start - The element wrapping the track start slot
+ * @csspart thumb-container - The thumb container element which is programatically positioned
+ * @fires change - Fires a custom 'change' event when the slider value changes
+ *
+ * @public
+ */
+class FASTSlider extends FormAssociatedSlider {
+  constructor() {
+    super(...arguments);
+    /**
+     * @internal
+     */
+    this.direction = Direction.ltr;
+    /**
+     * @internal
+     */
+    this.isDragging = false;
+    /**
+     * @internal
+     */
+    this.trackWidth = 0;
+    /**
+     * @internal
+     */
+    this.trackMinWidth = 0;
+    /**
+     * @internal
+     */
+    this.trackHeight = 0;
+    /**
+     * @internal
+     */
+    this.trackLeft = 0;
+    /**
+     * @internal
+     */
+    this.trackMinHeight = 0;
+    /**
+     * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
+     *
+     * @public
+     */
+    this.valueTextFormatter = () => null;
+    /**
+     * The minimum allowed value.
+     *
+     * @defaultValue - 0
+     * @public
+     * @remarks
+     * HTML Attribute: min
+     */
+    this.min = 0; // Map to proxy element.
+    /**
+     * The maximum allowed value.
+     *
+     * @defaultValue - 10
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
+    this.max = 10; // Map to proxy element.
+    /**
+     * The orientation of the slider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    this.orientation = Orientation.horizontal;
+    /**
+     * The selection mode.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: mode
+     */
+    this.mode = SliderMode.singleValue;
+    this.keypressHandler = e => {
+      if (this.readOnly || this.disabled) {
+        return;
+      }
+      if (e.key === keyHome) {
+        e.preventDefault();
+        this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? this.value = `${this.min}` : this.value = `${this.max}`;
+      } else if (e.key === keyEnd) {
+        e.preventDefault();
+        this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? this.value = `${this.max}` : this.value = `${this.min}`;
+      } else if (!e.shiftKey) {
+        switch (e.key) {
+          case keyArrowRight:
+          case keyArrowUp:
+            e.preventDefault();
+            this.increment();
+            break;
+          case keyArrowLeft:
+          case keyArrowDown:
+            e.preventDefault();
+            this.decrement();
+            break;
+        }
+      }
+    };
+    this.setupTrackConstraints = () => {
+      const clientRect = this.track.getBoundingClientRect();
+      this.trackWidth = this.track.clientWidth;
+      this.trackMinWidth = this.track.clientLeft;
+      this.trackHeight = clientRect.top;
+      this.trackMinHeight = clientRect.bottom;
+      this.trackLeft = this.getBoundingClientRect().left;
+      if (this.trackWidth === 0) {
+        this.trackWidth = 1;
+      }
+    };
+    this.setupListeners = (remove = false) => {
+      const eventAction = `${remove ? "remove" : "add"}EventListener`;
+      this[eventAction]("keydown", this.keypressHandler);
+      this[eventAction]("mousedown", this.handleMouseDown);
+      this.thumb[eventAction]("mousedown", this.handleThumbMouseDown, {
+        passive: true
+      });
+      this.thumb[eventAction]("touchstart", this.handleThumbMouseDown, {
+        passive: true
+      });
+      // removes handlers attached by mousedown handlers
+      if (remove) {
+        this.handleMouseDown(null);
+        this.handleThumbMouseDown(null);
+      }
+    };
+    /**
+     * @internal
+     */
+    this.initialValue = "";
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     *  If the event handler is null it removes the events
      */
-    this.role = DividerRole.separator;
+    this.handleThumbMouseDown = event => {
+      const eventAction = `${event !== null ? "add" : "remove"}EventListener`;
+      window[eventAction]("mouseup", this.handleWindowMouseUp);
+      window[eventAction]("mousemove", this.handleMouseMove, {
+        passive: true
+      });
+      window[eventAction]("touchmove", this.handleMouseMove, {
+        passive: true
+      });
+      window[eventAction]("touchend", this.handleWindowMouseUp);
+      this.isDragging = event !== null;
+    };
     /**
-     * The orientation of the divider.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: orientation
+     *  Handle mouse moves during a thumb drag operation
      */
-    this.orientation = DividerOrientation.horizontal;
-  }
-}
-__decorate([attr], FASTDivider.prototype, "role", void 0);
-__decorate([attr], FASTDivider.prototype, "orientation", void 0);
-
-/**
- * A base class for progress components.
- * @public
- */
-class FASTBaseProgress extends FASTElement {
-  constructor() {
-    super(...arguments);
+    this.handleMouseMove = e => {
+      if (this.readOnly || this.disabled || e.defaultPrevented) {
+        return;
+      }
+      // update the value based on current position
+      const sourceEvent = window.TouchEvent && e instanceof TouchEvent ? e.touches[0] : e;
+      const eventValue = this.orientation === Orientation.horizontal ? sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft : sourceEvent.pageY - document.documentElement.scrollTop;
+      this.value = `${this.calculateNewValue(eventValue)}`;
+    };
     /**
-     * Indicates progress in %
-     * @internal
+     * Handle a window mouse up during a drag operation
      */
-    this.percentComplete = 0;
+    this.handleWindowMouseUp = event => {
+      this.stopDragging();
+    };
+    this.stopDragging = () => {
+      this.isDragging = false;
+      this.handleMouseDown(null);
+      this.handleThumbMouseDown(null);
+    };
+    /**
+     *
+     * @param e - MouseEvent or null. If there is no event handler it will remove the events
+     */
+    this.handleMouseDown = e => {
+      const eventAction = `${e !== null ? "add" : "remove"}EventListener`;
+      if (e === null || !this.disabled && !this.readOnly) {
+        window[eventAction]("mouseup", this.handleWindowMouseUp);
+        window.document[eventAction]("mouseleave", this.handleWindowMouseUp);
+        window[eventAction]("mousemove", this.handleMouseMove);
+        if (e) {
+          this.setupTrackConstraints();
+          const controlValue = this.orientation === Orientation.horizontal ? e.pageX - document.documentElement.scrollLeft - this.trackLeft : e.pageY - document.documentElement.scrollTop;
+          this.value = `${this.calculateNewValue(controlValue)}`;
+        }
+      }
+    };
   }
-  valueChanged() {
-    this.updatePercentComplete();
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
   }
-  minChanged() {
+  /**
+   * The value property, typed as a number.
+   *
+   * @public
+   */
+  get valueAsNumber() {
+    return parseFloat(super.value);
+  }
+  set valueAsNumber(next) {
+    this.value = next.toString();
+  }
+  /**
+   * @internal
+   */
+  valueChanged(previous, next) {
     if (this.$fastController.isConnected) {
-      this.updatePercentComplete();
+      const nextAsNumber = parseFloat(next);
+      const value = limit(this.min, this.max, this.convertToConstrainedValue(nextAsNumber)).toString();
+      if (value !== next) {
+        this.value = value;
+        return;
+      }
+      super.valueChanged(previous, next);
+      this.setThumbPositionForOrientation(this.direction);
+      this.$emit("change");
+    }
+  }
+  minChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.min = `${this.min}`;
     }
+    this.validate();
   }
   maxChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.max = `${this.max}`;
+    }
+    this.validate();
+  }
+  stepChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.step = `${this.step}`;
+    }
+    this.updateStepMultiplier();
+    this.validate();
+  }
+  orientationChanged() {
     if (this.$fastController.isConnected) {
-      this.updatePercentComplete();
+      this.setThumbPositionForOrientation(this.direction);
     }
   }
   /**
@@ -5009,69 +5503,151 @@ class FASTBaseProgress extends FASTElement {
    */
   connectedCallback() {
     super.connectedCallback();
-    this.updatePercentComplete();
+    this.proxy.setAttribute("type", "range");
+    this.direction = getDirection(this);
+    this.updateStepMultiplier();
+    this.setupTrackConstraints();
+    this.setupListeners();
+    this.setupDefaultValue();
+    this.setThumbPositionForOrientation(this.direction);
   }
-  updatePercentComplete() {
-    const min = typeof this.min === "number" ? this.min : 0;
-    const max = typeof this.max === "number" ? this.max : 100;
-    const value = typeof this.value === "number" ? this.value : 0;
-    const range = max - min;
-    this.percentComplete = range === 0 ? 0 : Math.fround((value - min) / range * 100);
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    this.setupListeners(true);
+  }
+  /**
+   * Increment the value by the step
+   *
+   * @public
+   */
+  increment() {
+    const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) + Number(this.stepValue) : Number(this.value) + Number(this.stepValue);
+    const incrementedVal = this.convertToConstrainedValue(newVal);
+    const incrementedValString = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
+    this.value = incrementedValString;
+  }
+  /**
+   * Decrement the value by the step
+   *
+   * @public
+   */
+  decrement() {
+    const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) - Number(this.stepValue) : Number(this.value) - Number(this.stepValue);
+    const decrementedVal = this.convertToConstrainedValue(newVal);
+    const decrementedValString = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
+    this.value = decrementedValString;
+  }
+  /**
+   * Gets the actual step value for the slider
+   *
+   */
+  get stepValue() {
+    return this.step === undefined ? 1 : this.step;
+  }
+  /**
+   * Places the thumb based on the current value
+   *
+   * @public
+   * @param direction - writing mode
+   */
+  setThumbPositionForOrientation(direction) {
+    const newPct = convertPixelToPercent(Number(this.value), Number(this.min), Number(this.max), direction);
+    const percentage = (1 - newPct) * 100;
+    if (this.orientation === Orientation.horizontal) {
+      this.position = this.isDragging ? `right: ${percentage}%; transition: none;` : `right: ${percentage}%; transition: all 0.2s ease;`;
+    } else {
+      this.position = this.isDragging ? `top: ${percentage}%; transition: none;` : `top: ${percentage}%; transition: all 0.2s ease;`;
+    }
+  }
+  /**
+   * Update the step multiplier used to ensure rounding errors from steps that
+   * are not whole numbers
+   */
+  updateStepMultiplier() {
+    const stepString = this.stepValue + "";
+    const decimalPlacesOfStep = !!(this.stepValue % 1) ? stepString.length - stepString.indexOf(".") - 1 : 0;
+    this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
+  }
+  get midpoint() {
+    return `${this.convertToConstrainedValue((this.max + this.min) / 2)}`;
+  }
+  setupDefaultValue() {
+    if (typeof this.value === "string") {
+      if (this.value.length === 0) {
+        this.initialValue = this.midpoint;
+      } else {
+        const value = parseFloat(this.value);
+        if (!Number.isNaN(value) && (value < this.min || value > this.max)) {
+          this.value = this.midpoint;
+        }
+      }
+    }
+  }
+  /**
+   * Calculate the new value based on the given raw pixel value.
+   *
+   * @param rawValue - the value to be converted to a constrained value
+   * @returns the constrained value
+   *
+   * @internal
+   */
+  calculateNewValue(rawValue) {
+    this.setupTrackConstraints();
+    // update the value based on current position
+    const newPosition = convertPixelToPercent(rawValue, this.orientation === Orientation.horizontal ? this.trackMinWidth : this.trackMinHeight, this.orientation === Orientation.horizontal ? this.trackWidth : this.trackHeight, this.direction);
+    const newValue = (this.max - this.min) * newPosition + this.min;
+    return this.convertToConstrainedValue(newValue);
+  }
+  convertToConstrainedValue(value) {
+    if (isNaN(value)) {
+      value = this.min;
+    }
+    /**
+     * The following logic intends to overcome the issue with math in JavaScript with regards to floating point numbers.
+     * This is needed as the `step` may be an integer but could also be a float. To accomplish this the step  is assumed to be a float
+     * and is converted to an integer by determining the number of decimal places it represent, multiplying it until it is an
+     * integer and then dividing it to get back to the correct number.
+     */
+    let constrainedValue = value - this.min;
+    const roundedConstrainedValue = Math.round(constrainedValue / this.stepValue);
+    const remainderValue = constrainedValue - roundedConstrainedValue * (this.stepMultiplier * this.stepValue) / this.stepMultiplier;
+    constrainedValue = remainderValue >= Number(this.stepValue) / 2 ? constrainedValue - remainderValue + Number(this.stepValue) : constrainedValue - remainderValue;
+    return constrainedValue + this.min;
   }
 }
+__decorate([attr({
+  attribute: "readonly",
+  mode: "boolean"
+})], FASTSlider.prototype, "readOnly", void 0);
+__decorate([observable], FASTSlider.prototype, "direction", void 0);
+__decorate([observable], FASTSlider.prototype, "isDragging", void 0);
+__decorate([observable], FASTSlider.prototype, "position", void 0);
+__decorate([observable], FASTSlider.prototype, "trackWidth", void 0);
+__decorate([observable], FASTSlider.prototype, "trackMinWidth", void 0);
+__decorate([observable], FASTSlider.prototype, "trackHeight", void 0);
+__decorate([observable], FASTSlider.prototype, "trackLeft", void 0);
+__decorate([observable], FASTSlider.prototype, "trackMinHeight", void 0);
+__decorate([observable], FASTSlider.prototype, "valueTextFormatter", void 0);
 __decorate([attr({
   converter: nullableNumberConverter
-})], FASTBaseProgress.prototype, "value", void 0);
+})], FASTSlider.prototype, "min", void 0);
 __decorate([attr({
   converter: nullableNumberConverter
-})], FASTBaseProgress.prototype, "min", void 0);
+})], FASTSlider.prototype, "max", void 0);
 __decorate([attr({
   converter: nullableNumberConverter
-})], FASTBaseProgress.prototype, "max", void 0);
-__decorate([observable], FASTBaseProgress.prototype, "percentComplete", void 0);
+})], FASTSlider.prototype, "step", void 0);
+__decorate([attr], FASTSlider.prototype, "orientation", void 0);
+__decorate([attr], FASTSlider.prototype, "mode", void 0);
 
 /**
- * An circular Progress HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
- *
- * @slot indeterminate - The slot for a custom indeterminate indicator
- * @slot determinate - The slot for a custom determinate indicator
- * @csspart progress - Represents the progress element
- * @csspart determinate - The determinate indicator
- * @csspart background - The background
- *
- * @public
- */
-class FASTProgressRing extends FASTBaseProgress {}
-
-const progressSegments = 44;
-/**
- * The template for the {@link @microsoft/fast-foundation#FASTProgressRing} component.
- * @public
- */
-function progressRingTemplate(options = {}) {
-  return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate"><circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle><circle class="determinate" part="determinate" style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px" cx="8px" cy="8px" r="7px"></circle></svg>`)} ${when(x => typeof x.value !== "number", html`<slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator)}</slot>`)}</template>`;
-}
-
-/**
- * An Progress HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
- *
- * @slot indeterminate - The slot for a custom indeterminate indicator
- * @csspart progress - Represents the progress element
- * @csspart determinate - The determinate indicator
- * @csspart indeterminate - The indeterminate indicator
- *
- * @public
- */
-class FASTProgress extends FASTBaseProgress {}
-
-/**
- * The template for the {@link @microsoft/fast-foundation#FASTProgress} component.
+ * The template for the {@link @microsoft/fast-foundation#(FASTSlider:class)} component.
  * @public
  */
-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>`;
+function sliderTemplate(options = {}) {
+  return html`<template role="slider" tabindex="${x => x.disabled ? null : 0}" aria-valuetext="${x => x.valueTextFormatter(x.value)}" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}" aria-disabled="${x => x.disabled ? true : void 0}" aria-readonly="${x => x.readOnly ? true : void 0}" aria-orientation="${x => x.orientation}" class="${x => x.orientation}"><div part="positioning-region" class="positioning-region"><div ${ref("track")} part="track-container" class="track"><slot name="track"></slot><div part="track-start" class="track-start" style="${x => x.position}"><slot name="track-start"></slot></div></div><slot></slot><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></div></template>`;
 }
 
 /**
@@ -5150,16 +5726,6 @@ class FASTSwitch extends FormAssociatedSwitch {
       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",
@@ -5188,12 +5754,12 @@ function display(displayValue) {
  */
 class Accordion extends FASTAccordion {}
 
-const template$a = accordionTemplate();
+const template$b = accordionTemplate();
 
-const styles$a = css`
+const styles$b = css`
   ${display('flex')}
 
-  :host{flex-direction:column;width:100%}`;
+  :host{flex-direction:column;width:100%;contain:content}`;
 
 const FluentDesignSystem = Object.freeze({
   prefix: 'fluent',
@@ -5210,10 +5776,10 @@ const FluentDesignSystem = Object.freeze({
  * @remarks
  * HTML Element: \<fluent-accordion\>
  */
-const definition$a = Accordion.compose({
+const definition$b = Accordion.compose({
   name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$a,
-  styles: styles$a
+  template: template$b,
+  styles: styles$b
 });
 
 /**
@@ -5646,397 +6212,397 @@ 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,
-	colorNeutralStencil1Alpha: colorNeutralStencil1Alpha,
-	colorNeutralStencil2Alpha: colorNeutralStencil2Alpha,
-	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,
-	colorPaletteRedForegroundInverted: colorPaletteRedForegroundInverted,
-	colorPaletteGreenForegroundInverted: colorPaletteGreenForegroundInverted,
-	colorPaletteYellowForegroundInverted: colorPaletteYellowForegroundInverted,
-	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,
+    colorNeutralStencil1Alpha: colorNeutralStencil1Alpha,
+    colorNeutralStencil2Alpha: colorNeutralStencil2Alpha,
+    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,
+    colorPaletteRedForegroundInverted: colorPaletteRedForegroundInverted,
+    colorPaletteGreenForegroundInverted: colorPaletteGreenForegroundInverted,
+    colorPaletteYellowForegroundInverted: colorPaletteYellowForegroundInverted,
+    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$9 = css`
+const styles$a = 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}`;
+  :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;vertical-align:middle;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.heading-content{height:100%;display:flex;align-items:center}.button{box-sizing:border-box;appearance:none;border:none;outline:none;text-align:start;cursor:pointer;font-family:inherit;height:44px;color:${colorNeutralForeground1};background:${colorTransparentBackground};line-height:${lineHeightBase300};height:auto;padding:0;font-size:inherit;grid-column:auto / span 2;grid-row:1}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}.icon{display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-right:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.region{margin:0 ${spacingHorizontalM}}::slotted([slot='start']),::slotted([slot='end']){justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1 / span 1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .region{display:block}:host([expanded]) .default-collapsed-icon,:host([expanded]) ::slotted([slot='collapsed-icon']),:host(:not([expanded])) .default-expanded-icon,:host(:not([expanded])) ::slotted([slot='expanded-icon']),:host([expanded]) ::slotted([slot='end']),::slotted([slot='start']),.region{display:none}:host([expanded]) ::slotted([slot='start']),:host([expanded]) ::slotted([slot='expanded-icon']),:host(:not([expanded])) ::slotted([slot='collapsed-icon']),::slotted([slot='end']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([expand-icon-position='end']) :slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) ::slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) .icon{grid-column:4 / span 1;grid-row:1;display:flex;padding-left:10px;padding-right:0}:host([expand-icon-position='end']) .button{grid-column:2 / span 3;grid-row:1}:host([block]){max-width:100%}:host([expand-icon-position='end']) .heading{grid-template-columns:auto auto 28px}:host([expand-icon-position='end']) .icon{grid-column:5 / span 1}:host([block][expand-icon-position='end']) .heading{grid-template-columns:auto 1fr}:host([block][expand-icon-position='end']) .icon{grid-column:5 / span 1}`;
 
 const chevronRight20Filled = html.partial(`<svg
   width="20"
@@ -6068,7 +6634,7 @@ const chevronDown20Filled = html.partial(`<svg
  * The template for the fluent-accordion component.
  * @public
  */
-const template$9 = accordionItemTemplate({
+const template$a = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
@@ -6082,10 +6648,10 @@ const template$9 = accordionItemTemplate({
  * @remarks
  * HTML Element: \<fluent-accordion-item\>
  */
-const definition$9 = AccordionItem.compose({
+const definition$a = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$9,
-  styles: styles$9
+  template: template$a,
+  styles: styles$a
 });
 
 /* TODO: This file is a direct copy of the React Avatar utils */
@@ -6339,7 +6905,7 @@ const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 2
 function avatarTemplate() {
   return html`<template role="img" data-color=${x => x.generateColor()}><slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot></template>`;
 }
-const template$8 = avatarTemplate();
+const template$9 = avatarTemplate();
 
 const animations = {
   fastOutSlowInMax: curveDecelerateMax,
@@ -6355,8 +6921,8 @@ const animations = {
 /** Avatar styles
  * @public
  */
-const styles$8 = css`
-  ${display('inline-flex')} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6}}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin} ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick} ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
+const styles$9 = css`
+  ${display('inline-flex')} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin} ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick} ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
 
 /**
  * The Fluent Avatar Element.
@@ -6365,10 +6931,10 @@ const styles$8 = css`
  * @remarks
  * HTML Element: \<fluent-badge\>
  */
-const definition$8 = Avatar.compose({
+const definition$9 = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
-  template: template$8,
-  styles: styles$8
+  template: template$9,
+  styles: styles$9
 });
 
 /**
@@ -6455,7 +7021,7 @@ applyMixins(Badge, StartEnd);
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
 }
-const template$7 = badgeTemplate();
+const template$8 = badgeTemplate();
 
 const textPadding = spacingHorizontalXXS;
 const badgeBaseStyles = css.partial`
@@ -6475,6 +7041,7 @@ const badgeBaseStyles = css.partial`
     border-color: ${colorTransparentStroke};
     background-color: ${colorBrandBackground};
     color: ${colorNeutralForegroundOnBrand};
+    contain: content;
   }
 
   ::slotted(svg) {
@@ -6731,7 +7298,7 @@ const badgeTintStyles = css.partial`
 /** Badge styles
  * @public
  */
-const styles$7 = css`
+const styles$8 = 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}
@@ -6749,10 +7316,10 @@ const styles$7 = css`
  * @remarks
  * HTML Element: \<fluent-badge\>
  */
-const definition$7 = Badge.compose({
+const definition$8 = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
-  template: template$7,
-  styles: styles$7
+  template: template$8,
+  styles: styles$8
 });
 
 /**
@@ -6888,12 +7455,12 @@ function composeTemplate(options = {}) {
  * The template for the Counter Badge component.
  * @public
  */
-const template$6 = composeTemplate();
+const template$7 = composeTemplate();
 
 /** Badge styles
  * @public
  */
-const styles$6 = css`
+const styles$7 = 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}
@@ -6910,10 +7477,10 @@ const styles$6 = css`
  * @remarks
  * HTML Element: \<fluent-counter-badge\>
  */
-const definition$6 = CounterBadge.compose({
+const definition$7 = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
-  template: template$6,
-  styles: styles$6
+  template: template$7,
+  styles: styles$7
 });
 
 /**
@@ -6955,15 +7522,15 @@ const DividerAppearance = {
  * Template for the Divider component
  * @public
  */
-const template$5 = dividerTemplate();
+const template$6 = dividerTemplate();
 
 /** Divider styles
  * @public
  */
-const styles$5 = css`
+const styles$6 = css`
   ${display('flex')}
 
-  :host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical']){flex-direction:column;align-items:center}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`;
+  :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical']){flex-direction:column;align-items:center}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`;
 
 /**
  * The Fluent Divider Element
@@ -6972,10 +7539,10 @@ const styles$5 = css`
  * @remarks
  * HTML Element: \<fluent-divider\>
  */
-const definition$5 = Divider.compose({
+const definition$6 = Divider.compose({
   name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$5,
-  styles: styles$5
+  template: template$6,
+  styles: styles$6
 });
 
 /**
@@ -7020,14 +7587,14 @@ const ImageShape = {
  * Template for the Image component
  * @public
  */
-const template$4 = html`<slot></slot>`;
+const template$5 = html`<slot></slot>`;
 
 /** Image styles
  *
  * @public
  */
-const styles$4 = css`
-  :host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}`;
+const styles$5 = css`
+  :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}`;
 
 /**
  * The Fluent Image Element
@@ -7036,10 +7603,10 @@ const styles$4 = css`
  * @remarks
  * HTML Element: \<fluent-image\>
  */
-const definition$4 = Image.compose({
+const definition$5 = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
-  template: template$4,
-  styles: styles$4
+  template: template$5,
+  styles: styles$5
 });
 
 /**
@@ -7090,13 +7657,13 @@ const ProgressBarValidationState = {
   error: 'error'
 };
 
-/** Text styles
+/** ProgressBar styles
  * @public
  */
-const styles$3 = css`
+const styles$4 = 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(
+  :host{align-items:center;height:2px;overflow-x:hidden;border-radius:${borderRadiusMedium};contain:content}:host([thickness='large']),:host([thickness='large']) .progress,:host([thickness='large']) .determinate{height:4px}:host([shape='square']),:host([shape='square']) .progress,:host([shape='square']) .determinate{border-radius:0}:host([validation-state='error']) .determinate{background-color:${colorPaletteRedBackground3}}:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background:linear-gradient(
       to right,${colorPaletteRedBackground2} 0%,${colorPaletteRedBackground3} 50%,${colorPaletteRedBackground2}
     )}:host([validation-state='warning']) .determinate{background-color:${colorPaletteDarkOrangeBackground3}}:host([validation-state='warning']) .indeterminate-indicator-1,:host([validation-state='warning']) .indeterminate-indicator-2{background:linear-gradient(
       to right,${colorPaletteDarkOrangeBackground2} 0%,${colorPaletteDarkOrangeBackground3} 50%,${colorPaletteDarkOrangeBackground2}
@@ -7108,7 +7675,7 @@ const styles$3 = 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$3 = progressTemplate({
+const template$4 = progressTemplate({
   indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
   indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`
 });
@@ -7121,8 +7688,90 @@ const template$3 = progressTemplate({
  * @remarks
  * HTML Element: \<fluent-progress-bar\>
  */
-const definition$3 = ProgressBar.compose({
+const definition$4 = ProgressBar.compose({
   name: `${FluentDesignSystem.prefix}-progress-bar`,
+  template: template$4,
+  styles: styles$4
+});
+
+/**
+ * The base class used for constructing a fluent-slider custom element
+ * @public
+ */
+class Slider extends FASTSlider {
+  handleChange(source, propertyName) {
+    switch (propertyName) {
+      case 'min':
+      case 'max':
+      case 'step':
+        this.handleStepStyles();
+        break;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    Observable.getNotifier(this).subscribe(this, 'max');
+    Observable.getNotifier(this).subscribe(this, 'min');
+    Observable.getNotifier(this).subscribe(this, 'step');
+    this.handleStepStyles();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    Observable.getNotifier(this).unsubscribe(this, 'max');
+    Observable.getNotifier(this).unsubscribe(this, 'min');
+    Observable.getNotifier(this).unsubscribe(this, 'step');
+  }
+  /**
+   * Handles changes to step styling based on the step value
+   * NOTE: This function is not a changed callback, stepStyles is not observable
+   */
+  handleStepStyles() {
+    if (this.step) {
+      const totalSteps = 100 / Math.floor((this.max - this.min) / this.step);
+      if (this.stepStyles !== undefined) {
+        this.$fastController.removeStyles(this.stepStyles);
+      }
+      this.stepStyles = css /**css*/`
+        :host{--step-rate:${totalSteps}%;color:blue}`;
+      this.$fastController.addStyles(this.stepStyles);
+    } else if (this.stepStyles !== undefined) {
+      this.$fastController.removeStyles(this.stepStyles);
+    }
+  }
+}
+__decorate([attr], Slider.prototype, "size", void 0);
+
+/**
+ * SliderSize Constants
+ * @public
+ */
+const SliderSize = {
+  small: 'small',
+  medium: 'medium'
+};
+
+/** Text styles
+ * @public
+ */
+const styles$3 = css`
+  ${display('inline-grid')} :host{--thumb-size:18px;--thumb-padding:3px;--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:-2px;--track-width:4px;--fast-slider-height:calc(var(--thumb-size) * 10);--slider-direction:90deg;align-items:center;box-sizing:border-box;outline:none;cursor:pointer;user-select:none;border-radius:${borderRadiusSmall};touch-action:pan-y;min-width:calc(var(--thumb-size) * 1px);width:100%}:host([size='small']){--thumb-size:14px;--track-width:2px;--thumb-padding:3px}:host([orientation='vertical']){--slider-direction:0deg;height:160px;min-height:var(--thumb-size);touch-action:pan-x;padding:8px 0;width:auto;min-width:auto}:host([disabled]:hover){cursor:initial}:host(:focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.thumb-cursor:focus{outline:0}.thumb-container{position:absolute;height:var(--thumb-size);width:var(--thumb-size);transition:all 0.2s ease}.thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.5))}:host([size='small']) .thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.35))}:host([orientation='vertical']) .thumb-container{transform:translateX(calc(var(--thumb-translate) * -1.5)) translateY(calc(var(--thumb-size) * -0.5))}:host([orientation='vertical'][size='small']) .thumb-container{transform:translateX(calc(var(--thumb-translate) * -1.35)) translateY(calc(var(--thumb-size) * -0.5))}.thumb-cursor{height:var(--thumb-size);width:var(--thumb-size);background-color:${colorBrandBackground};border-radius:${borderRadiusCircular};box-shadow:inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1},0 0 0 1px ${colorNeutralStroke1}}.thumb-cursor:hover{background-color:${colorCompoundBrandBackgroundHover}}.thumb-cursor:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([disabled]) .thumb-cursor{background-color:${colorNeutralForegroundDisabled};box-shadow:inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1},0 0 0 1px ${colorNeutralStrokeDisabled}}.positioning-region{position:relative;display:grid}:host([orientation='horizontal']) .positioning-region{margin:0 8px;grid-template-rows:var(--thumb-size) var(--thumb-size)}:host([orientation='vertical']) .positioning-region{margin:8px 0;height:100%;grid-template-columns:var(--thumb-size) var(--thumb-size)}.track{align-self:start;position:absolute;background-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};overflow:hidden}:host([step]) .track::after{content:'';position:absolute;border-radius:${borderRadiusMedium};width:100%;inset:0 2px;background-image:repeating-linear-gradient(
+      var(--slider-direction),#0000 0%,#0000 calc(var(--step-rate) - 1px),${colorNeutralBackground1} calc(var(--step-rate) - 1px),${colorNeutralBackground1} var(--step-rate)
+    )}:host([orientation='vertical'][step]) .track::after{inset:-2px 0}:host([disabled]) .track{background-color:${colorNeutralBackgroundDisabled}}:host([orientation='horizontal']) .track{right:var(--track-overhang);left:var(--track-overhang);align-self:start;height:var(--track-width);grid-row:2 / auto}:host([orientation='vertical']) .track{top:var(--track-overhang);bottom:var(--track-overhang);width:var(--track-width);height:100%;grid-column:2 / auto}.track-start{background-color:${colorCompoundBrandBackground};position:absolute;height:100%;left:0;border-radius:${borderRadiusMedium}}:host([disabled]) .track-start{background-color:${colorNeutralForegroundDisabled}}:host(:hover) .track-start{background-color:${colorCompoundBrandBackgroundHover}}:host([disabled]:hover) .track-start{background-color:${colorNeutralForegroundDisabled}}.track-start:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([orientation='vertical']) .track-start{height:auto;width:100%;bottom:0}`;
+
+const template$3 = sliderTemplate({
+  thumb: `<div class="thumb-cursor" tabindex="0"></div>`
+});
+
+/**
+ * The Fluent Slider Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-slider\>
+ */
+const definition$3 = Slider.compose({
+  name: `${FluentDesignSystem.prefix}-slider`,
   template: template$3,
   styles: styles$3
 });
@@ -7181,7 +7830,7 @@ const template$2 = progressRingTemplate({
 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)}}`;
+  :host{display:flex;align-items:center;height:32px;width:32px;contain:content}:host([size='tiny']){height:20px;width:20px}:host([size='extra-small']){height:24px;width:24px}:host([size='small']){height:28px;width:28px}:host([size='large']){height:36px;width:36px}:host([size='extra-large']){height:40px;width:40px}:host([size='huge']){height:44px;width:44px}.progress{height:100%;width:100%}.background{fill:none;stroke:${colorBrandStroke2};stroke-width:1.5px}:host([appearance='inverted']) .background{stroke:rgba(255,255,255,0.2)}.determinate{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out}:host([appearance='inverted']) .determinite{stroke:${colorNeutralStrokeOnBrand2}}.indeterminate-indicator-1{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 3s cubic-bezier(0.53,0.21,0.29,0.67) infinite}:host([appearance='inverted']) .indeterminate-indicator-1{stroke:${colorNeutralStrokeOnBrand2}}@keyframes spin-infinite{0%{stroke-dasharray:0.01px 43.97px;transform:rotate(0deg)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}100%{stroke-dasharray:0.01px 43.97px;transform:rotate(1080deg)}}`;
 
 /**
  * The Fluent Spinner Element. Implements {@link @microsoft/fast-foundation#ProgressRing },
@@ -7220,7 +7869,7 @@ const template$1 = switchTemplate({
 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}}`;
+  :host{align-items:center;flex-direction:row-reverse;outline:none;user-select:none;contain:content}:host([label-position='before']){flex-direction:row}:host([label-position='above']){flex-direction:column;align-items:flex-start}:host([disabled]) .label,:host([readonly]) .label,:host([readonly]) .switch,:host([disabled]) .switch{cursor:not-allowed}.label{position:relative;color:${colorNeutralForeground1};line-height:${lineHeightBase300};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};font-family:${fontFamilyBase};padding:${spacingVerticalXS} ${spacingHorizontalXS};cursor:pointer}.label__hidden{display:none}.switch{display:flex;align-items:center;padding:0 ${spacingHorizontalXXS};box-sizing:border-box;width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};outline:none;cursor:pointer;margin:${spacingVerticalS} ${spacingHorizontalS}}:host(:hover) .switch{background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .switch{border-color:${colorNeutralStrokeAccessiblePressed}}:host([disabled]) .switch,:host([readonly]) .switch{border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host([aria-checked='true']) .switch{background:${colorCompoundBrandBackground}}:host([aria-checked='true']:hover) .switch{background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host([aria-checked='true']:active) .switch{background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host([aria-checked='true'][disabled]) .switch{background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:transform}:host([aria-checked='true']) .checked-indicator{background-color:${colorNeutralForegroundInverted};transform:translateX(20px)}:host([aria-checked='true']:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host([aria-checked='true']:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host([disabled]) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host([aria-checked='true'][disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}`;
 
 /**
  * The Fluent Switch Element.
@@ -7374,7 +8023,7 @@ const template = html`<slot></slot>`;
 const styles = css`
   ${display('inline')}
 
-  ::slotted(*){font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start;white-space:normal;overflow:visible;text-overflow:clip;margin:0;display:inline}:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]),:host([block]) ::slotted(*){display:block}:host([italic]) ::slotted(*){font-style:italic}:host([underline]) ::slotted(*){text-decoration-line:underline}:host([strikethrough]) ::slotted(*){text-decoration-line:line-through}:host([underline][strikethrough]) ::slotted(*){text-decoration-line:line-through underline}:host([size='100']) ::slotted(*){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']) ::slotted(*){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']) ::slotted(*){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']) ::slotted(*){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']) ::slotted(*){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']) ::slotted(*){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']) ::slotted(*){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']) ::slotted(*){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']) ::slotted(*){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']) ::slotted(*){font-family:${fontFamilyMonospace}}:host([font='numeric']) ::slotted(*){font-family:${fontFamilyNumeric}}:host([weight='medium']) ::slotted(*){font-weight:${fontWeightMedium}}:host([weight='semibold']) ::slotted(*){font-weight:${fontWeightSemibold}}:host([weight='bold']) ::slotted(*){font-weight:${fontWeightBold}}:host([align='center']) ::slotted(*){text-align:center}:host([align='end']) ::slotted(*){text-align:end}:host([align='justify']) ::slotted(*){text-align:justify}`;
+  :host{contain:content}::slotted(*){font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start;white-space:normal;overflow:visible;text-overflow:clip;margin:0;display:inline}:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]),:host([block]) ::slotted(*){display:block}:host([italic]) ::slotted(*){font-style:italic}:host([underline]) ::slotted(*){text-decoration-line:underline}:host([strikethrough]) ::slotted(*){text-decoration-line:line-through}:host([underline][strikethrough]) ::slotted(*){text-decoration-line:line-through underline}:host([size='100']) ::slotted(*){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']) ::slotted(*){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']) ::slotted(*){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']) ::slotted(*){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']) ::slotted(*){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']) ::slotted(*){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']) ::slotted(*){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']) ::slotted(*){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']) ::slotted(*){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']) ::slotted(*){font-family:${fontFamilyMonospace}}:host([font='numeric']) ::slotted(*){font-family:${fontFamilyNumeric}}:host([weight='medium']) ::slotted(*){font-weight:${fontWeightMedium}}:host([weight='semibold']) ::slotted(*){font-weight:${fontWeightSemibold}}:host([weight='bold']) ::slotted(*){font-weight:${fontWeightBold}}:host([align='center']) ::slotted(*){text-align:center}:host([align='end']) ::slotted(*){text-align:end}:host([align='justify']) ::slotted(*){text-align:justify}`;
 
 /**
  * The Fluent Text Element.
@@ -7401,4 +8050,4 @@ const setTheme = theme => {
   }
 };
 
-export { Accordion, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$8 as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$8 as AvatarStyles, template$8 as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$7 as BadgeDefinition, BadgeShape, BadgeSize, styles$7 as BadgeStyles, template$7 as BadgeTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$6 as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$6 as CounterBadgeStyles, template$6 as CounterBadgeTemplate, Divider, DividerAlignContent, DividerAppearance, definition$5 as DividerDefinition, DividerOrientation, DividerRole, styles$5 as DividerStyles, template$5 as DividerTemplate, Image, definition$4 as ImageDefinition, ImageFit, ImageShape, styles$4 as ImageStyles, template$4 as ImageTemplate, ProgressBar, definition$3 as ProgressBarDefinition, ProgressBarShape, styles$3 as ProgressBarStyles, template$3 as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Spinner, SpinnerAppearance, definition$2 as SpinnerDefinition, SpinnerSize, styles$2 as SpinnerStyles, template$2 as SpinnerTemplate, Switch, SwitchLabelPosition, Text, TextAlign, definition as TextDefinition, TextFont, TextSize, styles as TextStyles, template as TextTemplate, TextWeight, definition$a as accordionDefinition, definition$9 as accordionItemDefinition, styles$9 as accordionItemStyles, template$9 as accordionItemTemplate, styles$a as accordionStyles, template$a as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, 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 };
+export { Accordion, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$9 as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$9 as AvatarStyles, template$9 as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$8 as BadgeDefinition, BadgeShape, BadgeSize, styles$8 as BadgeStyles, template$8 as BadgeTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$7 as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$7 as CounterBadgeStyles, template$7 as CounterBadgeTemplate, Divider, DividerAlignContent, DividerAppearance, definition$6 as DividerDefinition, DividerOrientation, DividerRole, styles$6 as DividerStyles, template$6 as DividerTemplate, Image, definition$5 as ImageDefinition, ImageFit, ImageShape, styles$5 as ImageStyles, template$5 as ImageTemplate, ProgressBar, definition$4 as ProgressBarDefinition, ProgressBarShape, styles$4 as ProgressBarStyles, template$4 as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Slider, definition$3 as SliderDefinition, SliderOrientation, SliderSize, styles$3 as SliderStyles, template$3 as SliderTemplate, 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$b as accordionDefinition, definition$a as accordionItemDefinition, styles$a as accordionItemStyles, template$a as accordionItemTemplate, styles$b as accordionStyles, template$b as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, 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 };