@fluentui/web-components 3.0.0-beta.6 → 3.0.0-beta.7

package/dist/web-components.js

@@ -1030,16 +1030,6 @@ const CSSDirective = Object.freeze({
     return type;
   }
 });
-/**
- * Decorator: Defines a CSSDirective.
- * @public
- */
-function cssDirective() {
-  /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
-  return function (type) {
-    CSSDirective.define(type);
-  };
-}
 
 function handleChange(directive, controller, observer) {
   controller.source.style.setProperty(directive.targetAspect, observer.bind(controller));
@@ -1349,17 +1339,6 @@ const HTMLDirective = Object.freeze({
     }
   }
 });
-/**
- * Decorator: Defines an HTMLDirective.
- * @param options - Provides options that specify the directive's application.
- * @public
- */
-function htmlDirective(options) {
-  /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
-  return function (type) {
-    HTMLDirective.define(type, options);
-  };
-}
 /**
  * A base class used for attribute directives that don't need internal state.
  * @public
@@ -4080,1469 +4059,393 @@ const AccordionItemExpandIconPosition = {
   end: "end"
 };
 
-/**
- * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
- * When the parent of a node is a shadow-root, it will return the host
- * element of the shadow root. Otherwise it will return the parent node or null if
- * no parent node exists.
- * @param element - The element for which to retrieve the composed parent
- *
- * @public
- */
-function composedParent(element) {
-  const parentNode = element.parentElement;
-  if (parentNode) {
-    return parentNode;
-  } else {
-    const rootNode = element.getRootNode();
-    if (rootNode.host instanceof HTMLElement) {
-      // this is shadow-root
-      return rootNode.host;
-    }
-  }
-  return null;
-}
-/**
- * Determines if the reference element contains the test element in a "composed" DOM tree that
- * ignores shadow DOM boundaries.
- *
- * Returns true of the test element is a descendent of the reference, or exists in
- * a shadow DOM that is a logical descendent of the reference. Otherwise returns false.
- * @param reference - The element to test for containment against.
- * @param test - The element being tested for containment.
- *
- * @public
- */
-function composedContains(reference, test) {
-  let current = test;
-  while (current !== null) {
-    if (current === reference) {
-      return true;
-    }
-    current = composedParent(current);
-  }
-  return false;
-}
-/**
- * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
- * control ViewBehaviors.
- * @public
- */
-Object.freeze({
-  /**
-   * Creates a ViewBehaviorOrchestrator.
-   * @param source - The source to to associate behaviors with.
-   * @returns A ViewBehaviorOrchestrator.
-   */
-  create(source) {
-    const behaviors = [];
-    const targets = {};
-    let unbindables = null;
-    let isConnected = false;
-    return {
-      source,
-      context: ExecutionContext.default,
-      targets,
-      get isBound() {
-        return isConnected;
-      },
-      addBehaviorFactory(factory, target) {
-        var _a, _b, _c, _d;
-        const compiled = factory;
-        compiled.id = (_a = compiled.id) !== null && _a !== void 0 ? _a : nextId();
-        compiled.targetNodeId = (_b = compiled.targetNodeId) !== null && _b !== void 0 ? _b : nextId();
-        compiled.targetTagName = (_c = target.tagName) !== null && _c !== void 0 ? _c : null;
-        compiled.policy = (_d = compiled.policy) !== null && _d !== void 0 ? _d : DOM.policy;
-        this.addTarget(compiled.targetNodeId, target);
-        this.addBehavior(compiled.createBehavior());
-      },
-      addTarget(nodeId, target) {
-        targets[nodeId] = target;
-      },
-      addBehavior(behavior) {
-        behaviors.push(behavior);
-        if (isConnected) {
-          behavior.bind(this);
-        }
-      },
-      onUnbind(unbindable) {
-        if (unbindables === null) {
-          unbindables = [];
-        }
-        unbindables.push(unbindable);
-      },
-      connectedCallback(controller) {
-        if (!isConnected) {
-          isConnected = true;
-          behaviors.forEach(x => x.bind(this));
-        }
-      },
-      disconnectedCallback(controller) {
-        if (isConnected) {
-          isConnected = false;
-          if (unbindables !== null) {
-            unbindables.forEach(x => x.unbind(this));
-          }
-        }
-      }
-    };
-  }
-});
-
-class DerivedValueEvaluator {
-  constructor(value) {
-    this.value = value;
-    this.notifier = Observable.getNotifier(this);
-    this.dependencies = new Set();
-    this.binding = Observable.binding(value, this);
-    this.binding.setMode(false);
-  }
-  static getOrCreate(value) {
-    let v = DerivedValueEvaluator.cache.get(value);
-    if (v) {
-      return v;
-    }
-    v = new DerivedValueEvaluator(value);
-    DerivedValueEvaluator.cache.set(value, v);
-    return v;
-  }
-  evaluate(node, tokenContext) {
-    const resolve = token => {
-      this.dependencies.add(token);
-      if (tokenContext === token) {
-        if (node.parent) {
-          return node.parent.getTokenValue(token);
-        }
-        throw new Error("DesignTokenNode has encountered a circular token reference. Avoid this by setting the token value for an ancestor node.");
-      } else {
-        return node.getTokenValue(token);
-      }
-    };
-    return this.binding.observe(resolve);
-  }
-  handleChange() {
-    this.notifier.notify(undefined);
-  }
-}
-DerivedValueEvaluator.cache = new WeakMap();
-class DerivedValue {
-  constructor(token, evaluator, node, subscriber) {
-    this.token = token;
-    this.evaluator = evaluator;
-    this.node = node;
-    this.subscriber = subscriber;
-    this.value = evaluator.evaluate(node, token);
-    if (this.subscriber) {
-      Observable.getNotifier(this.evaluator).subscribe(this.subscriber);
-    }
-  }
-  dispose() {
-    if (this.subscriber) {
-      Observable.getNotifier(this.evaluator).unsubscribe(this.subscriber);
-    }
-  }
-  update() {
-    this.value = this.evaluator.evaluate(this.node, this.token);
-    return this;
-  }
-}
-/**
- * @internal
- */
-class DesignTokenChangeRecordImpl {
-  constructor(target, type, token, value) {
-    this.target = target;
-    this.type = type;
-    this.token = token;
-    this.value = value;
-  }
-  notify() {
-    Observable.getNotifier(this.token).notify(this);
-  }
-}
-/**
- * @public
- */
-class DesignTokenNode {
-  constructor() {
-    this._parent = null;
-    this._children = new Set();
-    this._values = new Map();
-    this._derived = new Map();
-    this.dependencyGraph = new Map();
-  }
-  /**
-   * Determines if a value is a {@link DerivedDesignTokenValue}
-   * @param value - The value to test
-   */
-  static isDerivedTokenValue(value) {
-    return typeof value === "function";
-  }
-  /**
-   * Determines if a token has a derived value for a node.
-   */
-  static isDerivedFor(node, token) {
-    return node._derived.has(token);
-  }
-  /**
-   * Collects token/value pairs for all derived token / values set on upstream nodes.
-   */
-  static collectDerivedContext(node) {
-    const collected = new Map();
-    // Exit early if  there is no parent
-    if (node.parent === null) {
-      return collected;
-    }
-    let ignored = DesignTokenNode.getAssignedTokensForNode(node);
-    let current = node.parent;
-    do {
-      const assigned = DesignTokenNode.getAssignedTokensForNode(current);
-      for (let i = 0, l = assigned.length; i < l; i++) {
-        const token = assigned[i];
-        if (!ignored.includes(token) && DesignTokenNode.isDerivedFor(current, token)) {
-          collected.set(token, current._derived.get(token));
-        }
-      }
-      ignored = Array.from(new Set(ignored.concat(assigned)));
-      current = current.parent;
-    } while (current !== null);
-    return collected;
-  }
-  /**
-   * Resolves the local value for a token if it is assigned, otherwise returns undefined.
-   */
-  static getLocalTokenValue(node, token) {
-    return !DesignTokenNode.isAssigned(node, token) ? undefined : DesignTokenNode.isDerivedFor(node, token) ? node._derived.get(token).value : node._values.get(token);
-  }
-  static getOrCreateDependencyGraph(node, token) {
-    let dependents = node.dependencyGraph.get(token);
-    if (dependents) {
-      return dependents;
-    }
-    dependents = new Set();
-    node.dependencyGraph.set(token, dependents);
-    return dependents;
-  }
-  /**
-   * Emit all queued notifications
-   */
-  static notify() {
-    const notifications = this._notifications;
-    this._notifications = [];
-    for (const record of notifications) {
-      record.notify();
-    }
-  }
-  static queueNotification(...records) {
-    this._notifications.push(...records);
-  }
-  /**
-   * Retrieves all tokens assigned directly to a node.
-   * @param node - the node to retrieve assigned tokens for
-   * @returns
-   */
-  static getAssignedTokensForNode(node) {
-    return Array.from(node._values.keys());
-  }
-  /**
-   * Retrieves all tokens assigned to the node and ancestor nodes.
-   * @param node - the node to compose assigned tokens for
-   */
-  static composeAssignedTokensForNode(node) {
-    const tokens = new Set(DesignTokenNode.getAssignedTokensForNode(node));
-    let current = node.parent;
-    while (current !== null) {
-      const assignedTokens = DesignTokenNode.getAssignedTokensForNode(current);
-      for (const token of assignedTokens) {
-        tokens.add(token);
-      }
-      current = current.parent;
-    }
-    return Array.from(tokens);
-  }
-  /**
-   * Tests if a token is assigned directly to a node
-   * @param node - The node to test
-   * @param token  - The token to test
-   * @returns
-   */
-  static isAssigned(node, token) {
-    return node._values.has(token);
-  }
-  /**
-   * The parent node
-   */
-  get parent() {
-    return this._parent;
-  }
-  get children() {
-    return Array.from(this._children);
-  }
-  /**
-   * Appends a child to the node, notifying for any tokens set for the node's context.
-   */
-  appendChild(child) {
-    var _a, _b;
-    let prevContext = null;
-    // If this node is already attached, get it's context so change record
-    // types can be determined
-    if (child.parent !== null) {
-      prevContext = DesignTokenNode.composeAssignedTokensForNode(child.parent);
-      child.parent._children.delete(child);
-    }
-    const context = DesignTokenNode.composeAssignedTokensForNode(this);
-    const derivedContext = DesignTokenNode.collectDerivedContext(this);
-    child._parent = this;
-    this._children.add(child);
-    for (const token of context) {
-      let type = 0 /* DesignTokenMutationType.add */;
-      if (prevContext !== null) {
-        const prevContextIndex = prevContext.indexOf(token);
-        if (prevContextIndex !== -1) {
-          type = 1 /* DesignTokenMutationType.change */;
-          prevContext.splice(prevContextIndex, 1);
-        }
-      }
-      child.dispatch(new DesignTokenChangeRecordImpl(this, type, token, (_a = derivedContext.get(token)) === null || _a === void 0 ? void 0 : _a.evaluator.value));
-    }
-    if (prevContext !== null && prevContext.length > 0) {
-      for (const token of prevContext) {
-        child.dispatch(new DesignTokenChangeRecordImpl(this, 2 /* DesignTokenMutationType.delete */, token, (_b = derivedContext.get(token)) === null || _b === void 0 ? void 0 : _b.evaluator.value));
-      }
-    }
-    DesignTokenNode.notify();
-  }
-  /**
-   * Appends a child to the node, notifying for any tokens set for the node's context.
-   */
-  removeChild(child) {
-    if (child.parent === this) {
-      const context = DesignTokenNode.composeAssignedTokensForNode(this);
-      child._parent = null;
-      this._children.delete(child);
-      for (const token of context) {
-        child.dispatch(new DesignTokenChangeRecordImpl(this, 2 /* DesignTokenMutationType.delete */, token));
-      }
-      DesignTokenNode.notify();
-    }
-  }
-  /**
-   * Dispose of the node, removing parent/child relationships and
-   * unsubscribing all observable binding subscribers. Does not emit
-   * notifications.
-   */
-  dispose() {
-    if (this.parent) {
-      this.parent._children.delete(this);
-      this._parent = null;
-    }
-    for (const [, derived] of this._derived) {
-      derived.dispose();
-    }
-  }
-  /**
-   * Sets a token to a value
-   */
-  setTokenValue(token, value) {
-    const changeType = DesignTokenNode.isAssigned(this, token) || DesignTokenNode.isDerivedFor(this, token) ? 1 /* DesignTokenMutationType.change */ : 0 /* DesignTokenMutationType.add */;
-    const prev = DesignTokenNode.getLocalTokenValue(this, token);
-    this._values.set(token, value);
-    if (DesignTokenNode.isDerivedFor(this, token)) {
-      this.tearDownDerivedTokenValue(token);
-    }
-    const isDerived = DesignTokenNode.isDerivedTokenValue(value);
-    const derivedContext = DesignTokenNode.collectDerivedContext(this);
-    let result;
-    if (isDerived) {
-      const evaluator = this.setupDerivedTokenValue(token, value, true);
-      result = evaluator.value;
-    } else {
-      result = value;
-    }
-    if (prev !== result) {
-      DesignTokenNode.queueNotification(new DesignTokenChangeRecordImpl(this, changeType, token, value));
-    }
-    this.dispatch(new DesignTokenChangeRecordImpl(this, changeType, token, value));
-    derivedContext.forEach((derivedValue, token) => {
-      // Skip over any derived values already established locally, because
-      // those will get updated via this.notifyDerived and this.notifyStatic
-      if (!DesignTokenNode.isDerivedFor(this, token)) {
-        const prev = DesignTokenNode.getLocalTokenValue(this, token);
-        derivedValue = this.setupDerivedTokenValue(token, derivedValue.evaluator.value);
-        const result = derivedValue.value;
-        if (prev !== result) {
-          DesignTokenNode.queueNotification(new DesignTokenChangeRecordImpl(this, 1 /* DesignTokenMutationType.change */, token, derivedValue.evaluator.value));
-        }
-        this.dispatch(new DesignTokenChangeRecordImpl(this, 0 /* DesignTokenMutationType.add */, token, derivedValue.evaluator.value));
-      }
-    });
-    DesignTokenNode.notify();
-  }
-  /**
-   * Returns the resolve value for a token
-   */
-  getTokenValue(token) {
-    /* eslint-disable-next-line */
-    let node = this;
-    let value;
-    while (node !== null) {
-      if (DesignTokenNode.isDerivedFor(node, token)) {
-        value = node._derived.get(token).value;
-        break;
-      }
-      if (DesignTokenNode.isAssigned(node, token)) {
-        value = node._values.get(token);
-        break;
-      }
-      node = node._parent;
-    }
-    if (value !== undefined) {
-      return value;
-    } else {
-      throw new Error(`No value set for token ${token} in node tree.`);
-    }
-  }
-  /**
-   * Deletes the token value for a node
-   */
-  deleteTokenValue(token) {
-    if (DesignTokenNode.isAssigned(this, token)) {
-      const prev = DesignTokenNode.getLocalTokenValue(this, token);
-      this._values.delete(token);
-      this.tearDownDerivedTokenValue(token);
-      let newValue;
-      try {
-        newValue = this.getTokenValue(token);
-      } catch (e) {
-        newValue = undefined;
-      }
-      DesignTokenNode.queueNotification(new DesignTokenChangeRecordImpl(this, 2 /* DesignTokenMutationType.delete */, token));
-      if (prev !== newValue) {
-        this.dispatch(new DesignTokenChangeRecordImpl(this, 2 /* DesignTokenMutationType.delete */, token));
-      }
-      DesignTokenNode.notify();
-    }
-  }
-  /**
-   * Notifies that a token has been mutated
-   */
-  dispatch(record) {
-    var _a, _b, _c;
-    if (this !== record.target) {
-      const {
-        token
-      } = record;
-      // If the node is assigned the token being dispatched and the assigned value does not depend on the token
-      // (circular token reference) then terminate the dispatch.
-      const isAssigned = DesignTokenNode.isAssigned(this, token);
-      const containsCircularForToken = isAssigned && ((_a = this._derived.get(token)) === null || _a === void 0 ? void 0 : _a.evaluator.dependencies.has(token));
-      if (isAssigned && !containsCircularForToken) {
-        return;
-      }
-      // Delete token evaluations if the token is not assigned explicitly but is derived for the node and
-      // the record is a delete type.
-      if (record.type === 2 /* DesignTokenMutationType.delete */ && !isAssigned && DesignTokenNode.isDerivedFor(this, token)) {
-        this.tearDownDerivedTokenValue(token);
-        DesignTokenNode.queueNotification(new DesignTokenChangeRecordImpl(this, 2 /* DesignTokenMutationType.delete */, token));
-      }
-      if (containsCircularForToken) {
-        record = new DesignTokenChangeRecordImpl(this, 1 /* DesignTokenMutationType.change */, token, (_b = this._derived.get(token)) === null || _b === void 0 ? void 0 : _b.evaluator.value);
-      }
-      const {
-        value
-      } = record;
-      if (value && DesignTokenNode.isDerivedTokenValue(value)) {
-        const dependencies = DerivedValueEvaluator.getOrCreate(value).dependencies;
-        // If this is not the originator, check to see if this node
-        // has any dependencies of the token value. If so, we need to evaluate for this node
-        let evaluate = false;
-        for (const dependency of dependencies) {
-          if (DesignTokenNode.isAssigned(this, dependency)) {
-            evaluate = true;
-            break;
-          }
-        }
-        if (evaluate) {
-          const prev = (_c = this._derived.get(token)) === null || _c === void 0 ? void 0 : _c.value;
-          const derivedValue = this.setupDerivedTokenValue(token, value);
-          if (prev !== derivedValue.value) {
-            const type = prev === undefined ? 0 /* DesignTokenMutationType.add */ : 1 /* DesignTokenMutationType.change */;
-            const notification = new DesignTokenChangeRecordImpl(this, type, token, derivedValue.evaluator.value);
-            DesignTokenNode.queueNotification(notification);
-            record = notification;
-          }
-        }
-      }
-    }
-    this.collectLocalChangeRecords(record).forEach(_record => {
-      DesignTokenNode.queueNotification(_record);
-      this.dispatch(_record);
-    });
-    this.notifyChildren(record);
-  }
-  /**
-   * Generate change-records for local dependencies of a change record
-   */
-  collectLocalChangeRecords(record) {
-    const collected = new Map();
-    for (const dependent of DesignTokenNode.getOrCreateDependencyGraph(this, record.token)) {
-      if (dependent.value !== dependent.update().value) {
-        collected.set(dependent.token, new DesignTokenChangeRecordImpl(this, 1 /* DesignTokenMutationType.change */, dependent.token, dependent.evaluator.value));
-      }
-    }
-    return collected;
-  }
-  /**
-   *
-   * Notify children of changes to the node
-   */
-  notifyChildren(...records) {
-    if (this.children.length) {
-      for (let i = 0, l = this.children.length; i < l; i++) {
-        for (let j = 0; j < records.length; j++) {
-          this.children[i].dispatch(records[j]);
-        }
-      }
-    }
-  }
-  tearDownDerivedTokenValue(token) {
-    if (DesignTokenNode.isDerivedFor(this, token)) {
-      const value = this._derived.get(token);
-      value.dispose();
-      this._derived.delete(token);
-      value.evaluator.dependencies.forEach(dependency => {
-        DesignTokenNode.getOrCreateDependencyGraph(this, dependency).delete(value);
-      });
-    }
-  }
-  setupDerivedTokenValue(token, value, subscribeNode = false) {
-    const deriver = new DerivedValue(token, DerivedValueEvaluator.getOrCreate(value), this, subscribeNode ? {
-      handleChange: () => {
-        if (deriver.value !== deriver.update().value) {
-          const record = new DesignTokenChangeRecordImpl(this, 1 /* DesignTokenMutationType.change */, deriver.token, deriver.evaluator.value);
-          DesignTokenNode.queueNotification(record);
-          this.dispatch(record);
-          DesignTokenNode.notify();
-        }
-      }
-    } : undefined);
-    this._derived.set(token, deriver);
-    deriver.evaluator.dependencies.forEach(dependency => {
-      if (dependency !== token) {
-        DesignTokenNode.getOrCreateDependencyGraph(this, dependency).add(deriver);
-      }
-    });
-    return deriver;
-  }
-}
-DesignTokenNode._notifications = [];
-
-class QueuedStyleSheetTarget {
-  setProperty(name, value) {
-    Updates.enqueue(() => this.target.setProperty(name, value));
-  }
-  removeProperty(name) {
-    Updates.enqueue(() => this.target.removeProperty(name));
-  }
-}
-/**
- * Handles setting properties for a FASTElement using Constructable Stylesheets
- */
-class ConstructableStyleSheetTarget extends QueuedStyleSheetTarget {
-  constructor(source) {
-    super();
-    const sheet = new CSSStyleSheet();
-    this.target = sheet.cssRules[sheet.insertRule(":host{}")].style;
-    source.$fastController.addStyles(new ElementStyles([sheet]));
-  }
-}
-class DocumentStyleSheetTarget extends QueuedStyleSheetTarget {
-  constructor() {
-    super();
-    const sheet = new CSSStyleSheet();
-    this.target = sheet.cssRules[sheet.insertRule(":root{}")].style;
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-  }
-}
-class HeadStyleElementStyleSheetTarget extends QueuedStyleSheetTarget {
-  constructor() {
-    super();
-    this.style = document.createElement("style");
-    document.head.appendChild(this.style);
-    const {
-      sheet
-    } = this.style;
-    // Because the HTMLStyleElement has been appended,
-    // there shouldn't exist a case where `sheet` is null,
-    // but if-check it just in case.
-    if (sheet) {
-      // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
-      // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
-      const index = sheet.insertRule(":root{}", sheet.cssRules.length);
-      this.target = sheet.cssRules[index].style;
-    }
-  }
-}
-/**
- * Handles setting properties for a FASTElement using an HTMLStyleElement
- */
-class StyleElementStyleSheetTarget {
-  constructor(target) {
-    this.store = new Map();
-    this.target = null;
-    const controller = target.$fastController;
-    this.style = document.createElement("style");
-    controller.addStyles(this.style);
-    Observable.getNotifier(controller).subscribe(this, "isConnected");
-    this.handleChange(controller, "isConnected");
-  }
-  targetChanged() {
-    if (this.target !== null) {
-      for (const [key, value] of this.store.entries()) {
-        this.target.setProperty(key, value);
-      }
-    }
-  }
-  setProperty(name, value) {
-    this.store.set(name, value);
-    Updates.enqueue(() => {
-      if (this.target !== null) {
-        this.target.setProperty(name, value);
-      }
-    });
-  }
-  removeProperty(name) {
-    this.store.delete(name);
-    Updates.enqueue(() => {
-      if (this.target !== null) {
-        this.target.removeProperty(name);
-      }
-    });
-  }
-  handleChange(source, key) {
-    // HTMLStyleElement.sheet is null if the element isn't connected to the DOM,
-    // so this method reacts to changes in DOM connection for the element hosting
-    // the HTMLStyleElement.
-    //
-    // All rules applied via the CSSOM also get cleared when the element disconnects,
-    // so we need to add a new rule each time and populate it with the stored properties
-    const {
-      sheet
-    } = this.style;
-    if (sheet) {
-      // Safari will throw if we try to use the return result of insertRule()
-      // to index the rule inline, so store as a const prior to indexing.
-      // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
-      // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
-      const index = sheet.insertRule(":host{}", sheet.cssRules.length);
-      this.target = sheet.cssRules[index].style;
-    } else {
-      this.target = null;
-    }
-  }
-}
-__decorate([observable], StyleElementStyleSheetTarget.prototype, "target", void 0);
-/**
- * Controls emission for default values. This control is capable
- * of emitting to multiple {@link PropertyTarget | PropertyTargets},
- * and only emits if it has at least one root.
- *
- * @internal
- */
-class RootStyleSheetTarget {
-  setProperty(name, value) {
-    RootStyleSheetTarget.properties[name] = value;
-    for (const target of RootStyleSheetTarget.roots.values()) {
-      target.setProperty(name, value);
-    }
-  }
-  removeProperty(name) {
-    delete RootStyleSheetTarget.properties[name];
-    for (const target of RootStyleSheetTarget.roots.values()) {
-      target.removeProperty(name);
-    }
-  }
-  static registerRoot(root) {
-    const {
-      roots
-    } = RootStyleSheetTarget;
-    if (!roots.has(root)) {
-      roots.add(root);
-      for (const key in RootStyleSheetTarget.properties) {
-        root.setProperty(key, RootStyleSheetTarget.properties[key]);
-      }
-    }
-  }
-  static unregisterRoot(root) {
-    const {
-      roots
-    } = RootStyleSheetTarget;
-    if (roots.has(root)) {
-      roots.delete(root);
-      for (const key in RootStyleSheetTarget.properties) {
-        root.removeProperty(key);
-      }
-    }
-  }
-}
-RootStyleSheetTarget.roots = new Set();
-RootStyleSheetTarget.properties = {};
-// Caches PropertyTarget instances
-const propertyTargetCache = new WeakMap();
-// Use Constructable StyleSheets for FAST elements when supported, otherwise use
-// HTMLStyleElement instances
-const propertyTargetCtor = ElementStyles.supportsAdoptedStyleSheets ? ConstructableStyleSheetTarget : StyleElementStyleSheetTarget;
-/**
- * Manages creation and caching of PropertyTarget instances.
- *
- * @internal
- */
-const PropertyTargetManager = Object.freeze({
-  getOrCreate(source) {
-    if (propertyTargetCache.has(source)) {
-      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-      return propertyTargetCache.get(source);
-    }
-    let target;
-    if (source instanceof Document) {
-      target = ElementStyles.supportsAdoptedStyleSheets ? new DocumentStyleSheetTarget() : new HeadStyleElementStyleSheetTarget();
-    } else {
-      target = new propertyTargetCtor(source);
-    }
-    propertyTargetCache.set(source, target);
-    return target;
-  }
-});
-
-/**
- * @public
- */
-class DesignToken {
-  constructor(configuration) {
-    this.subscriberNotifier = {
-      handleChange: (source, change) => {
-        const record = {
-          target: change.target === FASTDesignTokenNode.defaultNode ? "default" : change.target.target,
-          token: this
-        };
-        this.subscribers.notify(record);
-      }
-    };
-    this.name = configuration.name;
-    Observable.getNotifier(this).subscribe(this.subscriberNotifier);
-  }
-  /**
-   * The default value of the token (alias of {@link DesignToken.default})
-   */
-  get $value() {
-    return this.default;
-  }
-  /**
-   * The default value of the token, or undefined if it has not been set.
-   */
-  get default() {
-    return FASTDesignTokenNode.defaultNode.getTokenValue(this);
-  }
-  get subscribers() {
-    if (this._subscribers) {
-      return this._subscribers;
-    }
-    this._subscribers = new SubscriberSet(this);
-    return this._subscribers;
-  }
-  static isCSSDesignTokenConfiguration(config) {
-    return typeof config.cssCustomPropertyName === "string";
-  }
-  static create(config) {
-    if (typeof config === "string") {
-      return new CSSDesignToken({
-        name: config,
-        cssCustomPropertyName: config
-      });
-    } else {
-      return DesignToken.isCSSDesignTokenConfiguration(config) ? new CSSDesignToken(config) : new DesignToken(config);
-    }
-  }
-  /**
-   * Configures the strategy for resolving hierarchical relationships between FASTElement targets.
-   */
-  static withStrategy(strategy) {
-    FASTDesignTokenNode.withStrategy(strategy);
-  }
-  /**
-   * Registers a target for emitting default style values.
-   * {@link CSSDesignToken | CSSDesignTokens} with default values assigned via
-   * {@link DesignToken.withDefault} will emit CSS custom properties to all
-   * registered targets.
-   * @param target - The target to register, defaults to the document
-   */
-  static registerDefaultStyleTarget(target = document) {
-    if (target instanceof FASTElement || target instanceof Document) {
-      target = PropertyTargetManager.getOrCreate(target);
-    }
-    RootStyleSheetTarget.registerRoot(target);
-  }
-  /**
-   * Unregister a target for default style emission.
-   * @param target - The root to deregister, defaults to the document
-   */
-  static unregisterDefaultStyleTarget(target = document) {
-    if (target instanceof FASTElement || target instanceof Document) {
-      target = PropertyTargetManager.getOrCreate(target);
-    }
-    RootStyleSheetTarget.unregisterRoot(target);
-  }
-  /**
-   * Retrieves the value of the token for a target element.
-   */
-  getValueFor(target) {
-    return FASTDesignTokenNode.getOrCreate(target).getTokenValue(this);
-  }
-  /**
-   * Sets the value of the token for a target element.
-   */
-  setValueFor(target, value) {
-    FASTDesignTokenNode.getOrCreate(target).setTokenValue(this, this.normalizeValue(value));
-  }
-  /**
-   * Deletes the value of the token for a target element.
-   */
-  deleteValueFor(target) {
-    FASTDesignTokenNode.getOrCreate(target).deleteTokenValue(this);
-    return this;
-  }
-  /**
-   * Sets the default value of the token.
-   */
-  withDefault(value) {
-    FASTDesignTokenNode.defaultNode.setTokenValue(this, this.normalizeValue(value));
-    return this;
-  }
-  /**
-   * Subscribes a subscriber to notifications for the token.
-   */
-  subscribe(subscriber) {
-    this.subscribers.subscribe(subscriber);
-  }
-  /**
-   * Unsubscribes a subscriber to notifications for the token.
-   */
-  unsubscribe(subscriber) {
-    this.subscribers.unsubscribe(subscriber);
-  }
-  /**
-   * Alias the token to the provided token.
-   * @param token - the token to alias to
-   */
-  alias(token) {
-    return resolve => resolve(token);
-  }
-  normalizeValue(value) {
-    if (value instanceof DesignToken) {
-      value = this.alias(value);
-    }
-    return value;
-  }
-}
-/**
- * @public
- */
-let CSSDesignToken = class CSSDesignToken extends DesignToken {
-  constructor(configuration) {
-    super(configuration);
-    this.cssReflector = {
-      handleChange: (source, record) => {
-        const target = record.target === FASTDesignTokenNode.defaultNode ? FASTDesignTokenNode.rootStyleSheetTarget : record.target instanceof FASTDesignTokenNode ? PropertyTargetManager.getOrCreate(record.target.target) : null;
-        if (target) {
-          if (record.type === 2 /* DesignTokenMutationType.delete */) {
-            target.removeProperty(this.cssCustomProperty);
-          } else {
-            target.setProperty(this.cssCustomProperty, this.resolveCSSValue(record.target.getTokenValue(this)));
-          }
-        }
-      }
-    };
-    this.cssCustomProperty = `--${configuration.cssCustomPropertyName}`;
-    this.cssVar = `var(${this.cssCustomProperty})`;
-    Observable.getNotifier(this).subscribe(this.cssReflector);
-  }
-  /**
-   * The DesignToken represented as a string that can be used in CSS.
-   */
-  createCSS() {
-    return this.cssVar;
-  }
-  /**
-   * Creates HTML to be used within a template.
-   */
-  createHTML() {
-    return this.cssVar;
-  }
-  resolveCSSValue(value) {
-    return value && typeof value.createCSS === "function" ? value.createCSS() : value;
-  }
-};
-CSSDesignToken = __decorate([cssDirective(), htmlDirective()], CSSDesignToken);
-const defaultDesignTokenResolutionStrategy = {
-  contains: composedContains,
-  parent(element) {
-    let parent = composedParent(element);
-    while (parent !== null) {
-      if (parent instanceof FASTElement) {
-        return parent;
-      }
-      parent = composedParent(parent);
-    }
-    return null;
-  }
-};
-class FASTDesignTokenNode extends DesignTokenNode {
-  constructor(target) {
-    super();
-    this.target = target;
-    // By default, nodes are not attached to the defaultNode for performance
-    // reasons. However, that behavior can throw if retrieval for a node
-    // happens before the bind() method is called. To guard against that,
-    //  lazily attach to the defaultNode when get/set/delete methods are called.
-    this.setTokenValue = this.lazyAttachToDefault(super.setTokenValue);
-    this.getTokenValue = this.lazyAttachToDefault(super.getTokenValue);
-    this.deleteTokenValue = this.lazyAttachToDefault(super.deleteTokenValue);
-  }
-  static get strategy() {
-    if (this._strategy === undefined) {
-      FASTDesignTokenNode.withStrategy(defaultDesignTokenResolutionStrategy);
-    }
-    return this._strategy;
-  }
-  connectedCallback(controller) {
-    let parent = FASTDesignTokenNode.findParent(controller.source);
-    if (parent === null) {
-      parent = FASTDesignTokenNode.defaultNode;
-    }
-    if (parent !== this.parent) {
-      const reparent = [];
-      for (const child of parent.children) {
-        if (child instanceof FASTDesignTokenNode && FASTDesignTokenNode.strategy.contains(controller.source, child.target)) {
-          reparent.push(child);
-        }
-      }
-      parent.appendChild(this);
-      for (const child of reparent) {
-        this.appendChild(child);
-      }
-    }
-  }
-  disconnectedCallback(controller) {
-    FASTDesignTokenNode.cache.delete(this.target);
-    this.dispose();
-  }
-  static getOrCreate(target) {
-    let found = FASTDesignTokenNode.cache.get(target);
-    if (found) {
-      return found;
-    }
-    found = new FASTDesignTokenNode(target);
-    FASTDesignTokenNode.cache.set(target, found);
-    target.$fastController.addBehavior(FASTDesignTokenNode.strategy);
-    target.$fastController.addBehavior(found);
-    return found;
-  }
-  static withStrategy(strategy) {
-    this._strategy = strategy;
-  }
-  static findParent(target) {
-    let current = FASTDesignTokenNode.strategy.parent(target);
-    while (current !== null) {
-      const node = FASTDesignTokenNode.cache.get(current);
-      if (node) {
-        return node;
-      }
-      current = FASTDesignTokenNode.strategy.parent(current);
-    }
-    return null;
-  }
-  /**
-   * Creates a function from a function that lazily attaches the node to the default node.
-   */
-  lazyAttachToDefault(fn) {
-    const cb = (...args) => {
-      if (this.parent === null) {
-        FASTDesignTokenNode.defaultNode.appendChild(this);
-      }
-      return fn.apply(this, args);
-    };
-    return cb;
-  }
-}
-FASTDesignTokenNode.defaultNode = new DesignTokenNode();
-FASTDesignTokenNode.rootStyleSheetTarget = new RootStyleSheetTarget();
-FASTDesignTokenNode.cache = new WeakMap();
-
-const {
-  create
-} = DesignToken;
-const borderRadiusNone = create("borderRadiusNone");
-const borderRadiusSmall = create("borderRadiusSmall");
-const borderRadiusMedium = create("borderRadiusMedium");
-const borderRadiusLarge = create("borderRadiusLarge");
-const borderRadiusXLarge = create("borderRadiusXLarge");
-const borderRadiusCircular = create("borderRadiusCircular");
-const fontSizeBase100 = create("fontSizeBase100");
-const fontSizeBase200 = create("fontSizeBase200");
-const fontSizeBase300 = create("fontSizeBase300");
-const fontSizeBase400 = create("fontSizeBase400");
-const fontSizeBase500 = create("fontSizeBase500");
-const fontSizeBase600 = create("fontSizeBase600");
-const fontSizeHero700 = create("fontSizeHero700");
-const fontSizeHero800 = create("fontSizeHero800");
-const fontSizeHero900 = create("fontSizeHero900");
-const fontSizeHero1000 = create("fontSizeHero1000");
-const lineHeightBase100 = create("lineHeightBase100");
-const lineHeightBase200 = create("lineHeightBase200");
-const lineHeightBase300 = create("lineHeightBase300");
-const lineHeightBase400 = create("lineHeightBase400");
-const lineHeightBase500 = create("lineHeightBase500");
-const lineHeightBase600 = create("lineHeightBase600");
-const lineHeightHero700 = create("lineHeightHero700");
-const lineHeightHero800 = create("lineHeightHero800");
-const lineHeightHero900 = create("lineHeightHero900");
-const lineHeightHero1000 = create("lineHeightHero1000");
-const fontFamilyBase = create("fontFamilyBase");
-const fontFamilyMonospace = create("fontFamilyMonospace");
-const fontFamilyNumeric = create("fontFamilyNumeric");
-const fontWeightRegular = create("fontWeightRegular");
-const fontWeightMedium = create("fontWeightMedium");
-const fontWeightSemibold = create("fontWeightSemibold");
-const fontWeightBold = create("fontWeightBold");
-const strokeWidthThin = create("strokeWidthThin");
-const strokeWidthThick = create("strokeWidthThick");
-const strokeWidthThicker = create("strokeWidthThicker");
-const strokeWidthThickest = create("strokeWidthThickest");
-const spacingHorizontalNone = create("spacingHorizontalNone");
-const spacingHorizontalXXS = create("spacingHorizontalXXS");
-const spacingHorizontalXS = create("spacingHorizontalXS");
-const spacingHorizontalSNudge = create("spacingHorizontalSNudge");
-const spacingHorizontalS = create("spacingHorizontalS");
-const spacingHorizontalMNudge = create("spacingHorizontalMNudge");
-const spacingHorizontalM = create("spacingHorizontalM");
-const spacingHorizontalL = create("spacingHorizontalL");
-const spacingHorizontalXL = create("spacingHorizontalXL");
-const spacingHorizontalXXL = create("spacingHorizontalXXL");
-const spacingHorizontalXXXL = create("spacingHorizontalXXXL");
-const spacingVerticalNone = create("spacingVerticalNone");
-const spacingVerticalXXS = create("spacingVerticalXXS");
-const spacingVerticalXS = create("spacingVerticalXS");
-const spacingVerticalSNudge = create("spacingVerticalSNudge");
-const spacingVerticalS = create("spacingVerticalS");
-const spacingVerticalMNudge = create("spacingVerticalMNudge");
-const spacingVerticalM = create("spacingVerticalM");
-const spacingVerticalL = create("spacingVerticalL");
-const spacingVerticalXL = create("spacingVerticalXL");
-const spacingVerticalXXL = create("spacingVerticalXXL");
-const spacingVerticalXXXL = create("spacingVerticalXXXL");
-const durationUltraFast = create("durationUltraFast");
-const durationFaster = create("durationFaster");
-const durationFast = create("durationFast");
-const durationNormal = create("durationNormal");
-const durationSlow = create("durationSlow");
-const durationSlower = create("durationSlower");
-const durationUltraSlow = create("durationUltraSlow");
-const curveAccelerateMax = create("curveAccelerateMax");
-const curveAccelerateMid = create("curveAccelerateMid");
-const curveAccelerateMin = create("curveAccelerateMin");
-const curveDecelerateMax = create("curveDecelerateMax");
-const curveDecelerateMid = create("curveDecelerateMid");
-const curveDecelerateMin = create("curveDecelerateMin");
-const curveEasyEaseMax = create("curveEasyEaseMax");
-const curveEasyEase = create("curveEasyEase");
-const curveLinear = create("curveLinear");
-const colorNeutralForeground1 = create("colorNeutralForeground1");
-const colorNeutralForeground1Hover = create("colorNeutralForeground1Hover");
-const colorNeutralForeground1Pressed = create("colorNeutralForeground1Pressed");
-const colorNeutralForeground1Selected = create("colorNeutralForeground1Selected");
-const colorNeutralForeground2 = create("colorNeutralForeground2");
-const colorNeutralForeground2Hover = create("colorNeutralForeground2Hover");
-const colorNeutralForeground2Pressed = create("colorNeutralForeground2Pressed");
-const colorNeutralForeground2Selected = create("colorNeutralForeground2Selected");
-const colorNeutralForeground2BrandHover = create("colorNeutralForeground2BrandHover");
-const colorNeutralForeground2BrandPressed = create("colorNeutralForeground2BrandPressed");
-const colorNeutralForeground2BrandSelected = create("colorNeutralForeground2BrandSelected");
-const colorNeutralForeground3 = create("colorNeutralForeground3");
-const colorNeutralForeground3Hover = create("colorNeutralForeground3Hover");
-const colorNeutralForeground3Pressed = create("colorNeutralForeground3Pressed");
-const colorNeutralForeground3Selected = create("colorNeutralForeground3Selected");
-const colorNeutralForeground3BrandHover = create("colorNeutralForeground3BrandHover");
-const colorNeutralForeground3BrandPressed = create("colorNeutralForeground3BrandPressed");
-const colorNeutralForeground3BrandSelected = create("colorNeutralForeground3BrandSelected");
-const colorNeutralForeground4 = create("colorNeutralForeground4");
-const colorNeutralForegroundDisabled = create("colorNeutralForegroundDisabled");
-const colorNeutralForegroundInvertedDisabled = create("colorNeutralForegroundInvertedDisabled");
-const colorBrandForegroundLink = create("colorBrandForegroundLink");
-const colorBrandForegroundLinkHover = create("colorBrandForegroundLinkHover");
-const colorBrandForegroundLinkPressed = create("colorBrandForegroundLinkPressed");
-const colorBrandForegroundLinkSelected = create("colorBrandForegroundLinkSelected");
-const colorNeutralForeground2Link = create("colorNeutralForeground2Link");
-const colorNeutralForeground2LinkHover = create("colorNeutralForeground2LinkHover");
-const colorNeutralForeground2LinkPressed = create("colorNeutralForeground2LinkPressed");
-const colorNeutralForeground2LinkSelected = create("colorNeutralForeground2LinkSelected");
-const colorCompoundBrandForeground1 = create("colorCompoundBrandForeground1");
-const colorCompoundBrandForeground1Hover = create("colorCompoundBrandForeground1Hover");
-const colorCompoundBrandForeground1Pressed = create("colorCompoundBrandForeground1Pressed");
-const colorBrandForeground1 = create("colorBrandForeground1");
-const colorBrandForeground2 = create("colorBrandForeground2");
-const colorNeutralForeground1Static = create("colorNeutralForeground1Static");
-const colorNeutralForegroundStaticInverted = create("colorNeutralForegroundStaticInverted");
-const colorNeutralForegroundInverted = create("colorNeutralForegroundInverted");
-const colorNeutralForegroundInvertedHover = create("colorNeutralForegroundInvertedHover");
-const colorNeutralForegroundInvertedPressed = create("colorNeutralForegroundInvertedPressed");
-const colorNeutralForegroundInvertedSelected = create("colorNeutralForegroundInvertedSelected");
-const colorNeutralForegroundInverted2 = create("colorNeutralForegroundInverted2");
-const colorNeutralForegroundOnBrand = create("colorNeutralForegroundOnBrand");
-const colorNeutralForegroundInvertedLink = create("colorNeutralForegroundInvertedLink");
-const colorNeutralForegroundInvertedLinkHover = create("colorNeutralForegroundInvertedLinkHover");
-const colorNeutralForegroundInvertedLinkPressed = create("colorNeutralForegroundInvertedLinkPressed");
-const colorNeutralForegroundInvertedLinkSelected = create("colorNeutralForegroundInvertedLinkSelected");
-const colorBrandForegroundInverted = create("colorBrandForegroundInverted");
-const colorBrandForegroundInvertedHover = create("colorBrandForegroundInvertedHover");
-const colorBrandForegroundInvertedPressed = create("colorBrandForegroundInvertedPressed");
-const colorBrandForegroundOnLight = create("colorBrandForegroundOnLight");
-const colorBrandForegroundOnLightHover = create("colorBrandForegroundOnLightHover");
-const colorBrandForegroundOnLightPressed = create("colorBrandForegroundOnLightPressed");
-const colorBrandForegroundOnLightSelected = create("colorBrandForegroundOnLightSelected");
-const colorNeutralBackground1 = create("colorNeutralBackground1");
-const colorNeutralBackground1Hover = create("colorNeutralBackground1Hover");
-const colorNeutralBackground1Pressed = create("colorNeutralBackground1Pressed");
-const colorNeutralBackground1Selected = create("colorNeutralBackground1Selected");
-const colorNeutralBackground2 = create("colorNeutralBackground2");
-const colorNeutralBackground2Hover = create("colorNeutralBackground2Hover");
-const colorNeutralBackground2Pressed = create("colorNeutralBackground2Pressed");
-const colorNeutralBackground2Selected = create("colorNeutralBackground2Selected");
-const colorNeutralBackground3 = create("colorNeutralBackground3");
-const colorNeutralBackground3Hover = create("colorNeutralBackground3Hover");
-const colorNeutralBackground3Pressed = create("colorNeutralBackground3Pressed");
-const colorNeutralBackground3Selected = create("colorNeutralBackground3Selected");
-const colorNeutralBackground4 = create("colorNeutralBackground4");
-const colorNeutralBackground4Hover = create("colorNeutralBackground4Hover");
-const colorNeutralBackground4Pressed = create("colorNeutralBackground4Pressed");
-const colorNeutralBackground4Selected = create("colorNeutralBackground4Selected");
-const colorNeutralBackground5 = create("colorNeutralBackground5");
-const colorNeutralBackground5Hover = create("colorNeutralBackground5Hover");
-const colorNeutralBackground5Pressed = create("colorNeutralBackground5Pressed");
-const colorNeutralBackground5Selected = create("colorNeutralBackground5Selected");
-const colorNeutralBackground6 = create("colorNeutralBackground6");
-const colorNeutralBackgroundInverted = create("colorNeutralBackgroundInverted");
-const colorNeutralBackgroundStatic = create("colorNeutralBackgroundStatic");
-const colorSubtleBackground = create("colorSubtleBackground");
-const colorSubtleBackgroundHover = create("colorSubtleBackgroundHover");
-const colorSubtleBackgroundPressed = create("colorSubtleBackgroundPressed");
-const colorSubtleBackgroundSelected = create("colorSubtleBackgroundSelected");
-const colorSubtleBackgroundLightAlphaHover = create("colorSubtleBackgroundLightAlphaHover");
-const colorSubtleBackgroundLightAlphaPressed = create("colorSubtleBackgroundLightAlphaPressed");
-const colorSubtleBackgroundLightAlphaSelected = create("colorSubtleBackgroundLightAlphaSelected");
-const colorSubtleBackgroundInverted = create("colorSubtleBackgroundInverted");
-const colorSubtleBackgroundInvertedHover = create("colorSubtleBackgroundInvertedHover");
-const colorSubtleBackgroundInvertedPressed = create("colorSubtleBackgroundInvertedPressed");
-const colorSubtleBackgroundInvertedSelected = create("colorSubtleBackgroundInvertedSelected");
-const colorTransparentBackground = create("colorTransparentBackground");
-const colorTransparentBackgroundHover = create("colorTransparentBackgroundHover");
-const colorTransparentBackgroundPressed = create("colorTransparentBackgroundPressed");
-const colorTransparentBackgroundSelected = create("colorTransparentBackgroundSelected");
-const colorNeutralBackgroundDisabled = create("colorNeutralBackgroundDisabled");
-const colorNeutralBackgroundInvertedDisabled = create("colorNeutralBackgroundInvertedDisabled");
-const colorNeutralStencil1 = create("colorNeutralStencil1");
-const colorNeutralStencil2 = create("colorNeutralStencil2");
-const colorNeutralStencil1Alpha = create("colorNeutralStencil1Alpha");
-const colorNeutralStencil2Alpha = create("colorNeutralStencil2Alpha");
-const colorBackgroundOverlay = create("colorBackgroundOverlay");
-const colorScrollbarOverlay = create("colorScrollbarOverlay");
-const colorBrandBackground = create("colorBrandBackground");
-const colorBrandBackgroundHover = create("colorBrandBackgroundHover");
-const colorBrandBackgroundPressed = create("colorBrandBackgroundPressed");
-const colorBrandBackgroundSelected = create("colorBrandBackgroundSelected");
-const colorCompoundBrandBackground = create("colorCompoundBrandBackground");
-const colorCompoundBrandBackgroundHover = create("colorCompoundBrandBackgroundHover");
-const colorCompoundBrandBackgroundPressed = create("colorCompoundBrandBackgroundPressed");
-const colorBrandBackgroundStatic = create("colorBrandBackgroundStatic");
-const colorBrandBackground2 = create("colorBrandBackground2");
-const colorBrandBackgroundInverted = create("colorBrandBackgroundInverted");
-const colorBrandBackgroundInvertedHover = create("colorBrandBackgroundInvertedHover");
-const colorBrandBackgroundInvertedPressed = create("colorBrandBackgroundInvertedPressed");
-const colorBrandBackgroundInvertedSelected = create("colorBrandBackgroundInvertedSelected");
-const colorNeutralStrokeAccessible = create("colorNeutralStrokeAccessible");
-const colorNeutralStrokeAccessibleHover = create("colorNeutralStrokeAccessibleHover");
-const colorNeutralStrokeAccessiblePressed = create("colorNeutralStrokeAccessiblePressed");
-const colorNeutralStrokeAccessibleSelected = create("colorNeutralStrokeAccessibleSelected");
-const colorNeutralStroke1 = create("colorNeutralStroke1");
-const colorNeutralStroke1Hover = create("colorNeutralStroke1Hover");
-const colorNeutralStroke1Pressed = create("colorNeutralStroke1Pressed");
-const colorNeutralStroke1Selected = create("colorNeutralStroke1Selected");
-const colorNeutralStroke2 = create("colorNeutralStroke2");
-const colorNeutralStroke3 = create("colorNeutralStroke3");
-const colorNeutralStrokeOnBrand = create("colorNeutralStrokeOnBrand");
-const colorNeutralStrokeOnBrand2 = create("colorNeutralStrokeOnBrand2");
-const colorNeutralStrokeOnBrand2Hover = create("colorNeutralStrokeOnBrand2Hover");
-const colorNeutralStrokeOnBrand2Pressed = create("colorNeutralStrokeOnBrand2Pressed");
-const colorNeutralStrokeOnBrand2Selected = create("colorNeutralStrokeOnBrand2Selected");
-const colorBrandStroke1 = create("colorBrandStroke1");
-const colorBrandStroke2 = create("colorBrandStroke2");
-const colorCompoundBrandStroke = create("colorCompoundBrandStroke");
-const colorCompoundBrandStrokeHover = create("colorCompoundBrandStrokeHover");
-const colorCompoundBrandStrokePressed = create("colorCompoundBrandStrokePressed");
-const colorNeutralStrokeDisabled = create("colorNeutralStrokeDisabled");
-const colorNeutralStrokeInvertedDisabled = create("colorNeutralStrokeInvertedDisabled");
-const colorTransparentStroke = create("colorTransparentStroke");
-const colorTransparentStrokeInteractive = create("colorTransparentStrokeInteractive");
-const colorTransparentStrokeDisabled = create("colorTransparentStrokeDisabled");
-const colorStrokeFocus1 = create("colorStrokeFocus1");
-const colorStrokeFocus2 = create("colorStrokeFocus2");
-const colorNeutralShadowAmbient = create("colorNeutralShadowAmbient");
-const colorNeutralShadowKey = create("colorNeutralShadowKey");
-const colorNeutralShadowAmbientLighter = create("colorNeutralShadowAmbientLighter");
-const colorNeutralShadowKeyLighter = create("colorNeutralShadowKeyLighter");
-const colorNeutralShadowAmbientDarker = create("colorNeutralShadowAmbientDarker");
-const colorNeutralShadowKeyDarker = create("colorNeutralShadowKeyDarker");
-const colorBrandShadowAmbient = create("colorBrandShadowAmbient");
-const colorBrandShadowKey = create("colorBrandShadowKey");
-const colorPaletteRedBackground1 = create("colorPaletteRedBackground1");
-const colorPaletteRedBackground2 = create("colorPaletteRedBackground2");
-const colorPaletteRedBackground3 = create("colorPaletteRedBackground3");
-const colorPaletteRedForeground1 = create("colorPaletteRedForeground1");
-const colorPaletteRedForeground2 = create("colorPaletteRedForeground2");
-const colorPaletteRedForeground3 = create("colorPaletteRedForeground3");
-const colorPaletteRedBorderActive = create("colorPaletteRedBorderActive");
-const colorPaletteRedBorder1 = create("colorPaletteRedBorder1");
-const colorPaletteRedBorder2 = create("colorPaletteRedBorder2");
-const colorPaletteGreenBackground1 = create("colorPaletteGreenBackground1");
-const colorPaletteGreenBackground2 = create("colorPaletteGreenBackground2");
-const colorPaletteGreenBackground3 = create("colorPaletteGreenBackground3");
-const colorPaletteGreenForeground1 = create("colorPaletteGreenForeground1");
-const colorPaletteGreenForeground2 = create("colorPaletteGreenForeground2");
-const colorPaletteGreenForeground3 = create("colorPaletteGreenForeground3");
-const colorPaletteGreenBorderActive = create("colorPaletteGreenBorderActive");
-const colorPaletteGreenBorder1 = create("colorPaletteGreenBorder1");
-const colorPaletteGreenBorder2 = create("colorPaletteGreenBorder2");
-const colorPaletteDarkOrangeBackground1 = create("colorPaletteDarkOrangeBackground1");
-const colorPaletteDarkOrangeBackground2 = create("colorPaletteDarkOrangeBackground2");
-const colorPaletteDarkOrangeBackground3 = create("colorPaletteDarkOrangeBackground3");
-const colorPaletteDarkOrangeForeground1 = create("colorPaletteDarkOrangeForeground1");
-const colorPaletteDarkOrangeForeground2 = create("colorPaletteDarkOrangeForeground2");
-const colorPaletteDarkOrangeForeground3 = create("colorPaletteDarkOrangeForeground3");
-const colorPaletteDarkOrangeBorderActive = create("colorPaletteDarkOrangeBorderActive");
-const colorPaletteDarkOrangeBorder1 = create("colorPaletteDarkOrangeBorder1");
-const colorPaletteDarkOrangeBorder2 = create("colorPaletteDarkOrangeBorder2");
-const colorPaletteYellowBackground1 = create("colorPaletteYellowBackground1");
-const colorPaletteYellowBackground2 = create("colorPaletteYellowBackground2");
-const colorPaletteYellowBackground3 = create("colorPaletteYellowBackground3");
-const colorPaletteYellowForeground1 = create("colorPaletteYellowForeground1");
-const colorPaletteYellowForeground2 = create("colorPaletteYellowForeground2");
-const colorPaletteYellowForeground3 = create("colorPaletteYellowForeground3");
-const colorPaletteYellowBorderActive = create("colorPaletteYellowBorderActive");
-const colorPaletteYellowBorder1 = create("colorPaletteYellowBorder1");
-const colorPaletteYellowBorder2 = create("colorPaletteYellowBorder2");
-const colorPaletteBerryBackground1 = create("colorPaletteBerryBackground1");
-const colorPaletteBerryBackground2 = create("colorPaletteBerryBackground2");
-const colorPaletteBerryBackground3 = create("colorPaletteBerryBackground3");
-const colorPaletteBerryForeground1 = create("colorPaletteBerryForeground1");
-const colorPaletteBerryForeground2 = create("colorPaletteBerryForeground2");
-const colorPaletteBerryForeground3 = create("colorPaletteBerryForeground3");
-const colorPaletteBerryBorderActive = create("colorPaletteBerryBorderActive");
-const colorPaletteBerryBorder1 = create("colorPaletteBerryBorder1");
-const colorPaletteBerryBorder2 = create("colorPaletteBerryBorder2");
-const colorPaletteLightGreenBackground1 = create("colorPaletteLightGreenBackground1");
-const colorPaletteLightGreenBackground2 = create("colorPaletteLightGreenBackground2");
-const colorPaletteLightGreenBackground3 = create("colorPaletteLightGreenBackground3");
-const colorPaletteLightGreenForeground1 = create("colorPaletteLightGreenForeground1");
-const colorPaletteLightGreenForeground2 = create("colorPaletteLightGreenForeground2");
-const colorPaletteLightGreenForeground3 = create("colorPaletteLightGreenForeground3");
-const colorPaletteLightGreenBorderActive = create("colorPaletteLightGreenBorderActive");
-const colorPaletteLightGreenBorder1 = create("colorPaletteLightGreenBorder1");
-const colorPaletteLightGreenBorder2 = create("colorPaletteLightGreenBorder2");
-const colorPaletteMarigoldBackground1 = create("colorPaletteMarigoldBackground1");
-const colorPaletteMarigoldBackground2 = create("colorPaletteMarigoldBackground2");
-const colorPaletteMarigoldBackground3 = create("colorPaletteMarigoldBackground3");
-const colorPaletteMarigoldForeground1 = create("colorPaletteMarigoldForeground1");
-const colorPaletteMarigoldForeground2 = create("colorPaletteMarigoldForeground2");
-const colorPaletteMarigoldForeground3 = create("colorPaletteMarigoldForeground3");
-const colorPaletteMarigoldBorderActive = create("colorPaletteMarigoldBorderActive");
-const colorPaletteMarigoldBorder1 = create("colorPaletteMarigoldBorder1");
-const colorPaletteMarigoldBorder2 = create("colorPaletteMarigoldBorder2");
-const colorPaletteDarkRedBackground2 = create("colorPaletteDarkRedBackground2");
-const colorPaletteDarkRedForeground2 = create("colorPaletteDarkRedForeground2");
-const colorPaletteDarkRedBorderActive = create("colorPaletteDarkRedBorderActive");
-const colorPaletteCranberryBackground2 = create("colorPaletteCranberryBackground2");
-const colorPaletteCranberryForeground2 = create("colorPaletteCranberryForeground2");
-const colorPaletteCranberryBorderActive = create("colorPaletteCranberryBorderActive");
-const colorPalettePumpkinBackground2 = create("colorPalettePumpkinBackground2");
-const colorPalettePumpkinForeground2 = create("colorPalettePumpkinForeground2");
-const colorPalettePumpkinBorderActive = create("colorPalettePumpkinBorderActive");
-const colorPalettePeachBackground2 = create("colorPalettePeachBackground2");
-const colorPalettePeachForeground2 = create("colorPalettePeachForeground2");
-const colorPalettePeachBorderActive = create("colorPalettePeachBorderActive");
-const colorPaletteGoldBackground2 = create("colorPaletteGoldBackground2");
-const colorPaletteGoldForeground2 = create("colorPaletteGoldForeground2");
-const colorPaletteGoldBorderActive = create("colorPaletteGoldBorderActive");
-const colorPaletteBrassBackground2 = create("colorPaletteBrassBackground2");
-const colorPaletteBrassForeground2 = create("colorPaletteBrassForeground2");
-const colorPaletteBrassBorderActive = create("colorPaletteBrassBorderActive");
-const colorPaletteBrownBackground2 = create("colorPaletteBrownBackground2");
-const colorPaletteBrownForeground2 = create("colorPaletteBrownForeground2");
-const colorPaletteBrownBorderActive = create("colorPaletteBrownBorderActive");
-const colorPaletteForestBackground2 = create("colorPaletteForestBackground2");
-const colorPaletteForestForeground2 = create("colorPaletteForestForeground2");
-const colorPaletteForestBorderActive = create("colorPaletteForestBorderActive");
-const colorPaletteSeafoamBackground2 = create("colorPaletteSeafoamBackground2");
-const colorPaletteSeafoamForeground2 = create("colorPaletteSeafoamForeground2");
-const colorPaletteSeafoamBorderActive = create("colorPaletteSeafoamBorderActive");
-const colorPaletteDarkGreenBackground2 = create("colorPaletteDarkGreenBackground2");
-const colorPaletteDarkGreenForeground2 = create("colorPaletteDarkGreenForeground2");
-const colorPaletteDarkGreenBorderActive = create("colorPaletteDarkGreenBorderActive");
-const colorPaletteLightTealBackground2 = create("colorPaletteLightTealBackground2");
-const colorPaletteLightTealForeground2 = create("colorPaletteLightTealForeground2");
-const colorPaletteLightTealBorderActive = create("colorPaletteLightTealBorderActive");
-const colorPaletteTealBackground2 = create("colorPaletteTealBackground2");
-const colorPaletteTealForeground2 = create("colorPaletteTealForeground2");
-const colorPaletteTealBorderActive = create("colorPaletteTealBorderActive");
-const colorPaletteSteelBackground2 = create("colorPaletteSteelBackground2");
-const colorPaletteSteelForeground2 = create("colorPaletteSteelForeground2");
-const colorPaletteSteelBorderActive = create("colorPaletteSteelBorderActive");
-const colorPaletteBlueBackground2 = create("colorPaletteBlueBackground2");
-const colorPaletteBlueForeground2 = create("colorPaletteBlueForeground2");
-const colorPaletteBlueBorderActive = create("colorPaletteBlueBorderActive");
-const colorPaletteRoyalBlueBackground2 = create("colorPaletteRoyalBlueBackground2");
-const colorPaletteRoyalBlueForeground2 = create("colorPaletteRoyalBlueForeground2");
-const colorPaletteRoyalBlueBorderActive = create("colorPaletteRoyalBlueBorderActive");
-const colorPaletteCornflowerBackground2 = create("colorPaletteCornflowerBackground2");
-const colorPaletteCornflowerForeground2 = create("colorPaletteCornflowerForeground2");
-const colorPaletteCornflowerBorderActive = create("colorPaletteCornflowerBorderActive");
-const colorPaletteNavyBackground2 = create("colorPaletteNavyBackground2");
-const colorPaletteNavyForeground2 = create("colorPaletteNavyForeground2");
-const colorPaletteNavyBorderActive = create("colorPaletteNavyBorderActive");
-const colorPaletteLavenderBackground2 = create("colorPaletteLavenderBackground2");
-const colorPaletteLavenderForeground2 = create("colorPaletteLavenderForeground2");
-const colorPaletteLavenderBorderActive = create("colorPaletteLavenderBorderActive");
-const colorPalettePurpleBackground2 = create("colorPalettePurpleBackground2");
-const colorPalettePurpleForeground2 = create("colorPalettePurpleForeground2");
-const colorPalettePurpleBorderActive = create("colorPalettePurpleBorderActive");
-const colorPaletteGrapeBackground2 = create("colorPaletteGrapeBackground2");
-const colorPaletteGrapeForeground2 = create("colorPaletteGrapeForeground2");
-const colorPaletteGrapeBorderActive = create("colorPaletteGrapeBorderActive");
-const colorPaletteLilacBackground2 = create("colorPaletteLilacBackground2");
-const colorPaletteLilacForeground2 = create("colorPaletteLilacForeground2");
-const colorPaletteLilacBorderActive = create("colorPaletteLilacBorderActive");
-const colorPalettePinkBackground2 = create("colorPalettePinkBackground2");
-const colorPalettePinkForeground2 = create("colorPalettePinkForeground2");
-const colorPalettePinkBorderActive = create("colorPalettePinkBorderActive");
-const colorPaletteMagentaBackground2 = create("colorPaletteMagentaBackground2");
-const colorPaletteMagentaForeground2 = create("colorPaletteMagentaForeground2");
-const colorPaletteMagentaBorderActive = create("colorPaletteMagentaBorderActive");
-const colorPalettePlumBackground2 = create("colorPalettePlumBackground2");
-const colorPalettePlumForeground2 = create("colorPalettePlumForeground2");
-const colorPalettePlumBorderActive = create("colorPalettePlumBorderActive");
-const colorPaletteBeigeBackground2 = create("colorPaletteBeigeBackground2");
-const colorPaletteBeigeForeground2 = create("colorPaletteBeigeForeground2");
-const colorPaletteBeigeBorderActive = create("colorPaletteBeigeBorderActive");
-const colorPaletteMinkBackground2 = create("colorPaletteMinkBackground2");
-const colorPaletteMinkForeground2 = create("colorPaletteMinkForeground2");
-const colorPaletteMinkBorderActive = create("colorPaletteMinkBorderActive");
-const colorPalettePlatinumBackground2 = create("colorPalettePlatinumBackground2");
-const colorPalettePlatinumForeground2 = create("colorPalettePlatinumForeground2");
-const colorPalettePlatinumBorderActive = create("colorPalettePlatinumBorderActive");
-const colorPaletteAnchorBackground2 = create("colorPaletteAnchorBackground2");
-const colorPaletteAnchorForeground2 = create("colorPaletteAnchorForeground2");
-const colorPaletteAnchorBorderActive = create("colorPaletteAnchorBorderActive");
-const colorPaletteRedForegroundInverted = create("colorPaletteRedForegroundInverted");
-const colorPaletteGreenForegroundInverted = create("colorPaletteGreenForegroundInverted");
-const colorPaletteYellowForegroundInverted = create("colorPaletteYellowForegroundInverted");
-const shadow2 = create("shadow2");
-const shadow4 = create("shadow4");
-const shadow8 = create("shadow8");
-const shadow16 = create("shadow16");
-const shadow28 = create("shadow28");
-const shadow64 = create("shadow64");
-const shadow2Brand = create("shadow2Brand");
-const shadow4Brand = create("shadow4Brand");
-const shadow8Brand = create("shadow8Brand");
-const shadow16Brand = create("shadow16Brand");
-const shadow28Brand = create("shadow28Brand");
-const shadow64Brand = create("shadow64Brand");
+const colorNeutralForeground1 = "--colorNeutralForeground1";
+const colorNeutralForeground1Hover = "--colorNeutralForeground1Hover";
+const colorNeutralForeground1Pressed = "--colorNeutralForeground1Pressed";
+const colorNeutralForeground1Selected = "--colorNeutralForeground1Selected";
+const colorNeutralForeground2 = "--colorNeutralForeground2";
+const colorNeutralForeground2Hover = "--colorNeutralForeground2Hover";
+const colorNeutralForeground2Pressed = "--colorNeutralForeground2Pressed";
+const colorNeutralForeground2Selected = "--colorNeutralForeground2Selected";
+const colorNeutralForeground2BrandHover = "--colorNeutralForeground2BrandHover";
+const colorNeutralForeground2BrandPressed = "--colorNeutralForeground2BrandPressed";
+const colorNeutralForeground2BrandSelected = "--colorNeutralForeground2BrandSelected";
+const colorNeutralForeground3 = "--colorNeutralForeground3";
+const colorNeutralForeground3Hover = "--colorNeutralForeground3Hover";
+const colorNeutralForeground3Pressed = "--colorNeutralForeground3Pressed";
+const colorNeutralForeground3Selected = "--colorNeutralForeground3Selected";
+const colorNeutralForeground3BrandHover = "--colorNeutralForeground3BrandHover";
+const colorNeutralForeground3BrandPressed = "--colorNeutralForeground3BrandPressed";
+const colorNeutralForeground3BrandSelected = "--colorNeutralForeground3BrandSelected";
+const colorNeutralForeground4 = "--colorNeutralForeground4";
+const colorNeutralForegroundDisabled = "--colorNeutralForegroundDisabled";
+const colorBrandForegroundLink = "--colorBrandForegroundLink";
+const colorBrandForegroundLinkHover = "--colorBrandForegroundLinkHover";
+const colorBrandForegroundLinkPressed = "--colorBrandForegroundLinkPressed";
+const colorBrandForegroundLinkSelected = "--colorBrandForegroundLinkSelected";
+const colorNeutralForeground2Link = "--colorNeutralForeground2Link";
+const colorNeutralForeground2LinkHover = "--colorNeutralForeground2LinkHover";
+const colorNeutralForeground2LinkPressed = "--colorNeutralForeground2LinkPressed";
+const colorNeutralForeground2LinkSelected = "--colorNeutralForeground2LinkSelected";
+const colorCompoundBrandForeground1 = "--colorCompoundBrandForeground1";
+const colorCompoundBrandForeground1Hover = "--colorCompoundBrandForeground1Hover";
+const colorCompoundBrandForeground1Pressed = "--colorCompoundBrandForeground1Pressed";
+const colorNeutralForegroundOnBrand = "--colorNeutralForegroundOnBrand";
+const colorNeutralForegroundInverted = "--colorNeutralForegroundInverted";
+const colorNeutralForegroundInvertedHover = "--colorNeutralForegroundInvertedHover";
+const colorNeutralForegroundInvertedPressed = "--colorNeutralForegroundInvertedPressed";
+const colorNeutralForegroundInvertedSelected = "--colorNeutralForegroundInvertedSelected";
+const colorNeutralForegroundInverted2 = "--colorNeutralForegroundInverted2";
+const colorNeutralForegroundStaticInverted = "--colorNeutralForegroundStaticInverted";
+const colorNeutralForegroundInvertedLink = "--colorNeutralForegroundInvertedLink";
+const colorNeutralForegroundInvertedLinkHover = "--colorNeutralForegroundInvertedLinkHover";
+const colorNeutralForegroundInvertedLinkPressed = "--colorNeutralForegroundInvertedLinkPressed";
+const colorNeutralForegroundInvertedLinkSelected = "--colorNeutralForegroundInvertedLinkSelected";
+const colorNeutralForegroundInvertedDisabled = "--colorNeutralForegroundInvertedDisabled";
+const colorBrandForeground1 = "--colorBrandForeground1";
+const colorBrandForeground2 = "--colorBrandForeground2";
+const colorNeutralForeground1Static = "--colorNeutralForeground1Static";
+const colorBrandForegroundInverted = "--colorBrandForegroundInverted";
+const colorBrandForegroundInvertedHover = "--colorBrandForegroundInvertedHover";
+const colorBrandForegroundInvertedPressed = "--colorBrandForegroundInvertedPressed";
+const colorBrandForegroundOnLight = "--colorBrandForegroundOnLight";
+const colorBrandForegroundOnLightHover = "--colorBrandForegroundOnLightHover";
+const colorBrandForegroundOnLightPressed = "--colorBrandForegroundOnLightPressed";
+const colorBrandForegroundOnLightSelected = "--colorBrandForegroundOnLightSelected";
+const colorNeutralBackground1 = "--colorNeutralBackground1";
+const colorNeutralBackground1Hover = "--colorNeutralBackground1Hover";
+const colorNeutralBackground1Pressed = "--colorNeutralBackground1Pressed";
+const colorNeutralBackground1Selected = "--colorNeutralBackground1Selected";
+const colorNeutralBackground2 = "--colorNeutralBackground2";
+const colorNeutralBackground2Hover = "--colorNeutralBackground2Hover";
+const colorNeutralBackground2Pressed = "--colorNeutralBackground2Pressed";
+const colorNeutralBackground2Selected = "--colorNeutralBackground2Selected";
+const colorNeutralBackground3 = "--colorNeutralBackground3";
+const colorNeutralBackground3Hover = "--colorNeutralBackground3Hover";
+const colorNeutralBackground3Pressed = "--colorNeutralBackground3Pressed";
+const colorNeutralBackground3Selected = "--colorNeutralBackground3Selected";
+const colorNeutralBackground4 = "--colorNeutralBackground4";
+const colorNeutralBackground4Hover = "--colorNeutralBackground4Hover";
+const colorNeutralBackground4Pressed = "--colorNeutralBackground4Pressed";
+const colorNeutralBackground4Selected = "--colorNeutralBackground4Selected";
+const colorNeutralBackground5 = "--colorNeutralBackground5";
+const colorNeutralBackground5Hover = "--colorNeutralBackground5Hover";
+const colorNeutralBackground5Pressed = "--colorNeutralBackground5Pressed";
+const colorNeutralBackground5Selected = "--colorNeutralBackground5Selected";
+const colorNeutralBackground6 = "--colorNeutralBackground6";
+const colorNeutralBackgroundStatic = "--colorNeutralBackgroundStatic";
+const colorNeutralBackgroundInverted = "--colorNeutralBackgroundInverted";
+const colorSubtleBackground = "--colorSubtleBackground";
+const colorSubtleBackgroundHover = "--colorSubtleBackgroundHover";
+const colorSubtleBackgroundPressed = "--colorSubtleBackgroundPressed";
+const colorSubtleBackgroundSelected = "--colorSubtleBackgroundSelected";
+const colorSubtleBackgroundLightAlphaHover = "--colorSubtleBackgroundLightAlphaHover";
+const colorSubtleBackgroundLightAlphaPressed = "--colorSubtleBackgroundLightAlphaPressed";
+const colorSubtleBackgroundLightAlphaSelected = "--colorSubtleBackgroundLightAlphaSelected";
+const colorSubtleBackgroundInverted = "--colorSubtleBackgroundInverted";
+const colorSubtleBackgroundInvertedHover = "--colorSubtleBackgroundInvertedHover";
+const colorSubtleBackgroundInvertedPressed = "--colorSubtleBackgroundInvertedPressed";
+const colorSubtleBackgroundInvertedSelected = "--colorSubtleBackgroundInvertedSelected";
+const colorTransparentBackground = "--colorTransparentBackground";
+const colorTransparentBackgroundHover = "--colorTransparentBackgroundHover";
+const colorTransparentBackgroundPressed = "--colorTransparentBackgroundPressed";
+const colorTransparentBackgroundSelected = "--colorTransparentBackgroundSelected";
+const colorNeutralBackgroundDisabled = "--colorNeutralBackgroundDisabled";
+const colorNeutralBackgroundInvertedDisabled = "--colorNeutralBackgroundInvertedDisabled";
+const colorNeutralStencil1 = "--colorNeutralStencil1";
+const colorNeutralStencil2 = "--colorNeutralStencil2";
+const colorNeutralStencil1Alpha = "--colorNeutralStencil1Alpha";
+const colorNeutralStencil2Alpha = "--colorNeutralStencil2Alpha";
+const colorBackgroundOverlay = "--colorBackgroundOverlay";
+const colorScrollbarOverlay = "--colorScrollbarOverlay";
+const colorBrandBackground = "--colorBrandBackground";
+const colorBrandBackgroundHover = "--colorBrandBackgroundHover";
+const colorBrandBackgroundPressed = "--colorBrandBackgroundPressed";
+const colorBrandBackgroundSelected = "--colorBrandBackgroundSelected";
+const colorCompoundBrandBackground = "--colorCompoundBrandBackground";
+const colorCompoundBrandBackgroundHover = "--colorCompoundBrandBackgroundHover";
+const colorCompoundBrandBackgroundPressed = "--colorCompoundBrandBackgroundPressed";
+const colorBrandBackgroundStatic = "--colorBrandBackgroundStatic";
+const colorBrandBackground2 = "--colorBrandBackground2";
+const colorBrandBackgroundInverted = "--colorBrandBackgroundInverted";
+const colorBrandBackgroundInvertedHover = "--colorBrandBackgroundInvertedHover";
+const colorBrandBackgroundInvertedPressed = "--colorBrandBackgroundInvertedPressed";
+const colorBrandBackgroundInvertedSelected = "--colorBrandBackgroundInvertedSelected";
+const colorNeutralStrokeAccessible = "--colorNeutralStrokeAccessible";
+const colorNeutralStrokeAccessibleHover = "--colorNeutralStrokeAccessibleHover";
+const colorNeutralStrokeAccessiblePressed = "--colorNeutralStrokeAccessiblePressed";
+const colorNeutralStrokeAccessibleSelected = "--colorNeutralStrokeAccessibleSelected";
+const colorNeutralStroke1 = "--colorNeutralStroke1";
+const colorNeutralStroke1Hover = "--colorNeutralStroke1Hover";
+const colorNeutralStroke1Pressed = "--colorNeutralStroke1Pressed";
+const colorNeutralStroke1Selected = "--colorNeutralStroke1Selected";
+const colorNeutralStroke2 = "--colorNeutralStroke2";
+const colorNeutralStroke3 = "--colorNeutralStroke3";
+const colorNeutralStrokeOnBrand = "--colorNeutralStrokeOnBrand";
+const colorNeutralStrokeOnBrand2 = "--colorNeutralStrokeOnBrand2";
+const colorNeutralStrokeOnBrand2Hover = "--colorNeutralStrokeOnBrand2Hover";
+const colorNeutralStrokeOnBrand2Pressed = "--colorNeutralStrokeOnBrand2Pressed";
+const colorNeutralStrokeOnBrand2Selected = "--colorNeutralStrokeOnBrand2Selected";
+const colorBrandStroke1 = "--colorBrandStroke1";
+const colorBrandStroke2 = "--colorBrandStroke2";
+const colorCompoundBrandStroke = "--colorCompoundBrandStroke";
+const colorCompoundBrandStrokeHover = "--colorCompoundBrandStrokeHover";
+const colorCompoundBrandStrokePressed = "--colorCompoundBrandStrokePressed";
+const colorNeutralStrokeDisabled = "--colorNeutralStrokeDisabled";
+const colorNeutralStrokeInvertedDisabled = "--colorNeutralStrokeInvertedDisabled";
+const colorTransparentStroke = "--colorTransparentStroke";
+const colorTransparentStrokeInteractive = "--colorTransparentStrokeInteractive";
+const colorTransparentStrokeDisabled = "--colorTransparentStrokeDisabled";
+const colorStrokeFocus1 = "--colorStrokeFocus1";
+const colorStrokeFocus2 = "--colorStrokeFocus2";
+const colorNeutralShadowAmbient = "--colorNeutralShadowAmbient";
+const colorNeutralShadowKey = "--colorNeutralShadowKey";
+const colorNeutralShadowAmbientLighter = "--colorNeutralShadowAmbientLighter";
+const colorNeutralShadowKeyLighter = "--colorNeutralShadowKeyLighter";
+const colorNeutralShadowAmbientDarker = "--colorNeutralShadowAmbientDarker";
+const colorNeutralShadowKeyDarker = "--colorNeutralShadowKeyDarker";
+const colorBrandShadowAmbient = "--colorBrandShadowAmbient";
+const colorBrandShadowKey = "--colorBrandShadowKey";
+const colorPaletteRedBackground1 = "--colorPaletteRedBackground1";
+const colorPaletteRedBackground2 = "--colorPaletteRedBackground2";
+const colorPaletteRedBackground3 = "--colorPaletteRedBackground3";
+const colorPaletteRedBorderActive = "--colorPaletteRedBorderActive";
+const colorPaletteRedBorder1 = "--colorPaletteRedBorder1";
+const colorPaletteRedBorder2 = "--colorPaletteRedBorder2";
+const colorPaletteRedForeground1 = "--colorPaletteRedForeground1";
+const colorPaletteRedForeground2 = "--colorPaletteRedForeground2";
+const colorPaletteRedForeground3 = "--colorPaletteRedForeground3";
+const colorPaletteRedForegroundInverted = "--colorPaletteRedForegroundInverted";
+const colorPaletteGreenBackground1 = "--colorPaletteGreenBackground1";
+const colorPaletteGreenBackground2 = "--colorPaletteGreenBackground2";
+const colorPaletteGreenBackground3 = "--colorPaletteGreenBackground3";
+const colorPaletteGreenBorderActive = "--colorPaletteGreenBorderActive";
+const colorPaletteGreenBorder1 = "--colorPaletteGreenBorder1";
+const colorPaletteGreenBorder2 = "--colorPaletteGreenBorder2";
+const colorPaletteGreenForeground1 = "--colorPaletteGreenForeground1";
+const colorPaletteGreenForeground2 = "--colorPaletteGreenForeground2";
+const colorPaletteGreenForeground3 = "--colorPaletteGreenForeground3";
+const colorPaletteGreenForegroundInverted = "--colorPaletteGreenForegroundInverted";
+const colorPaletteDarkOrangeBackground1 = "--colorPaletteDarkOrangeBackground1";
+const colorPaletteDarkOrangeBackground2 = "--colorPaletteDarkOrangeBackground2";
+const colorPaletteDarkOrangeBackground3 = "--colorPaletteDarkOrangeBackground3";
+const colorPaletteDarkOrangeBorderActive = "--colorPaletteDarkOrangeBorderActive";
+const colorPaletteDarkOrangeBorder1 = "--colorPaletteDarkOrangeBorder1";
+const colorPaletteDarkOrangeBorder2 = "--colorPaletteDarkOrangeBorder2";
+const colorPaletteDarkOrangeForeground1 = "--colorPaletteDarkOrangeForeground1";
+const colorPaletteDarkOrangeForeground2 = "--colorPaletteDarkOrangeForeground2";
+const colorPaletteDarkOrangeForeground3 = "--colorPaletteDarkOrangeForeground3";
+const colorPaletteYellowBackground1 = "--colorPaletteYellowBackground1";
+const colorPaletteYellowBackground2 = "--colorPaletteYellowBackground2";
+const colorPaletteYellowBackground3 = "--colorPaletteYellowBackground3";
+const colorPaletteYellowBorderActive = "--colorPaletteYellowBorderActive";
+const colorPaletteYellowBorder1 = "--colorPaletteYellowBorder1";
+const colorPaletteYellowBorder2 = "--colorPaletteYellowBorder2";
+const colorPaletteYellowForeground1 = "--colorPaletteYellowForeground1";
+const colorPaletteYellowForeground2 = "--colorPaletteYellowForeground2";
+const colorPaletteYellowForeground3 = "--colorPaletteYellowForeground3";
+const colorPaletteYellowForegroundInverted = "--colorPaletteYellowForegroundInverted";
+const colorPaletteBerryBackground1 = "--colorPaletteBerryBackground1";
+const colorPaletteBerryBackground2 = "--colorPaletteBerryBackground2";
+const colorPaletteBerryBackground3 = "--colorPaletteBerryBackground3";
+const colorPaletteBerryBorderActive = "--colorPaletteBerryBorderActive";
+const colorPaletteBerryBorder1 = "--colorPaletteBerryBorder1";
+const colorPaletteBerryBorder2 = "--colorPaletteBerryBorder2";
+const colorPaletteBerryForeground1 = "--colorPaletteBerryForeground1";
+const colorPaletteBerryForeground2 = "--colorPaletteBerryForeground2";
+const colorPaletteBerryForeground3 = "--colorPaletteBerryForeground3";
+const colorPaletteMarigoldBackground1 = "--colorPaletteMarigoldBackground1";
+const colorPaletteMarigoldBackground2 = "--colorPaletteMarigoldBackground2";
+const colorPaletteMarigoldBackground3 = "--colorPaletteMarigoldBackground3";
+const colorPaletteMarigoldBorderActive = "--colorPaletteMarigoldBorderActive";
+const colorPaletteMarigoldBorder1 = "--colorPaletteMarigoldBorder1";
+const colorPaletteMarigoldBorder2 = "--colorPaletteMarigoldBorder2";
+const colorPaletteMarigoldForeground1 = "--colorPaletteMarigoldForeground1";
+const colorPaletteMarigoldForeground2 = "--colorPaletteMarigoldForeground2";
+const colorPaletteMarigoldForeground3 = "--colorPaletteMarigoldForeground3";
+const colorPaletteLightGreenBackground1 = "--colorPaletteLightGreenBackground1";
+const colorPaletteLightGreenBackground2 = "--colorPaletteLightGreenBackground2";
+const colorPaletteLightGreenBackground3 = "--colorPaletteLightGreenBackground3";
+const colorPaletteLightGreenBorderActive = "--colorPaletteLightGreenBorderActive";
+const colorPaletteLightGreenBorder1 = "--colorPaletteLightGreenBorder1";
+const colorPaletteLightGreenBorder2 = "--colorPaletteLightGreenBorder2";
+const colorPaletteLightGreenForeground1 = "--colorPaletteLightGreenForeground1";
+const colorPaletteLightGreenForeground2 = "--colorPaletteLightGreenForeground2";
+const colorPaletteLightGreenForeground3 = "--colorPaletteLightGreenForeground3";
+const colorPaletteAnchorBackground2 = "--colorPaletteAnchorBackground2";
+const colorPaletteAnchorBorderActive = "--colorPaletteAnchorBorderActive";
+const colorPaletteAnchorForeground2 = "--colorPaletteAnchorForeground2";
+const colorPaletteBeigeBackground2 = "--colorPaletteBeigeBackground2";
+const colorPaletteBeigeBorderActive = "--colorPaletteBeigeBorderActive";
+const colorPaletteBeigeForeground2 = "--colorPaletteBeigeForeground2";
+const colorPaletteBlueBackground2 = "--colorPaletteBlueBackground2";
+const colorPaletteBlueBorderActive = "--colorPaletteBlueBorderActive";
+const colorPaletteBlueForeground2 = "--colorPaletteBlueForeground2";
+const colorPaletteBrassBackground2 = "--colorPaletteBrassBackground2";
+const colorPaletteBrassBorderActive = "--colorPaletteBrassBorderActive";
+const colorPaletteBrassForeground2 = "--colorPaletteBrassForeground2";
+const colorPaletteBrownBackground2 = "--colorPaletteBrownBackground2";
+const colorPaletteBrownBorderActive = "--colorPaletteBrownBorderActive";
+const colorPaletteBrownForeground2 = "--colorPaletteBrownForeground2";
+const colorPaletteCornflowerBackground2 = "--colorPaletteCornflowerBackground2";
+const colorPaletteCornflowerBorderActive = "--colorPaletteCornflowerBorderActive";
+const colorPaletteCornflowerForeground2 = "--colorPaletteCornflowerForeground2";
+const colorPaletteCranberryBackground2 = "--colorPaletteCranberryBackground2";
+const colorPaletteCranberryBorderActive = "--colorPaletteCranberryBorderActive";
+const colorPaletteCranberryForeground2 = "--colorPaletteCranberryForeground2";
+const colorPaletteDarkGreenBackground2 = "--colorPaletteDarkGreenBackground2";
+const colorPaletteDarkGreenBorderActive = "--colorPaletteDarkGreenBorderActive";
+const colorPaletteDarkGreenForeground2 = "--colorPaletteDarkGreenForeground2";
+const colorPaletteDarkRedBackground2 = "--colorPaletteDarkRedBackground2";
+const colorPaletteDarkRedBorderActive = "--colorPaletteDarkRedBorderActive";
+const colorPaletteDarkRedForeground2 = "--colorPaletteDarkRedForeground2";
+const colorPaletteForestBackground2 = "--colorPaletteForestBackground2";
+const colorPaletteForestBorderActive = "--colorPaletteForestBorderActive";
+const colorPaletteForestForeground2 = "--colorPaletteForestForeground2";
+const colorPaletteGoldBackground2 = "--colorPaletteGoldBackground2";
+const colorPaletteGoldBorderActive = "--colorPaletteGoldBorderActive";
+const colorPaletteGoldForeground2 = "--colorPaletteGoldForeground2";
+const colorPaletteGrapeBackground2 = "--colorPaletteGrapeBackground2";
+const colorPaletteGrapeBorderActive = "--colorPaletteGrapeBorderActive";
+const colorPaletteGrapeForeground2 = "--colorPaletteGrapeForeground2";
+const colorPaletteLavenderBackground2 = "--colorPaletteLavenderBackground2";
+const colorPaletteLavenderBorderActive = "--colorPaletteLavenderBorderActive";
+const colorPaletteLavenderForeground2 = "--colorPaletteLavenderForeground2";
+const colorPaletteLightTealBackground2 = "--colorPaletteLightTealBackground2";
+const colorPaletteLightTealBorderActive = "--colorPaletteLightTealBorderActive";
+const colorPaletteLightTealForeground2 = "--colorPaletteLightTealForeground2";
+const colorPaletteLilacBackground2 = "--colorPaletteLilacBackground2";
+const colorPaletteLilacBorderActive = "--colorPaletteLilacBorderActive";
+const colorPaletteLilacForeground2 = "--colorPaletteLilacForeground2";
+const colorPaletteMagentaBackground2 = "--colorPaletteMagentaBackground2";
+const colorPaletteMagentaBorderActive = "--colorPaletteMagentaBorderActive";
+const colorPaletteMagentaForeground2 = "--colorPaletteMagentaForeground2";
+const colorPaletteMinkBackground2 = "--colorPaletteMinkBackground2";
+const colorPaletteMinkBorderActive = "--colorPaletteMinkBorderActive";
+const colorPaletteMinkForeground2 = "--colorPaletteMinkForeground2";
+const colorPaletteNavyBackground2 = "--colorPaletteNavyBackground2";
+const colorPaletteNavyBorderActive = "--colorPaletteNavyBorderActive";
+const colorPaletteNavyForeground2 = "--colorPaletteNavyForeground2";
+const colorPalettePeachBackground2 = "--colorPalettePeachBackground2";
+const colorPalettePeachBorderActive = "--colorPalettePeachBorderActive";
+const colorPalettePeachForeground2 = "--colorPalettePeachForeground2";
+const colorPalettePinkBackground2 = "--colorPalettePinkBackground2";
+const colorPalettePinkBorderActive = "--colorPalettePinkBorderActive";
+const colorPalettePinkForeground2 = "--colorPalettePinkForeground2";
+const colorPalettePlatinumBackground2 = "--colorPalettePlatinumBackground2";
+const colorPalettePlatinumBorderActive = "--colorPalettePlatinumBorderActive";
+const colorPalettePlatinumForeground2 = "--colorPalettePlatinumForeground2";
+const colorPalettePlumBackground2 = "--colorPalettePlumBackground2";
+const colorPalettePlumBorderActive = "--colorPalettePlumBorderActive";
+const colorPalettePlumForeground2 = "--colorPalettePlumForeground2";
+const colorPalettePumpkinBackground2 = "--colorPalettePumpkinBackground2";
+const colorPalettePumpkinBorderActive = "--colorPalettePumpkinBorderActive";
+const colorPalettePumpkinForeground2 = "--colorPalettePumpkinForeground2";
+const colorPalettePurpleBackground2 = "--colorPalettePurpleBackground2";
+const colorPalettePurpleBorderActive = "--colorPalettePurpleBorderActive";
+const colorPalettePurpleForeground2 = "--colorPalettePurpleForeground2";
+const colorPaletteRoyalBlueBackground2 = "--colorPaletteRoyalBlueBackground2";
+const colorPaletteRoyalBlueBorderActive = "--colorPaletteRoyalBlueBorderActive";
+const colorPaletteRoyalBlueForeground2 = "--colorPaletteRoyalBlueForeground2";
+const colorPaletteSeafoamBackground2 = "--colorPaletteSeafoamBackground2";
+const colorPaletteSeafoamBorderActive = "--colorPaletteSeafoamBorderActive";
+const colorPaletteSeafoamForeground2 = "--colorPaletteSeafoamForeground2";
+const colorPaletteSteelBackground2 = "--colorPaletteSteelBackground2";
+const colorPaletteSteelBorderActive = "--colorPaletteSteelBorderActive";
+const colorPaletteSteelForeground2 = "--colorPaletteSteelForeground2";
+const colorPaletteTealBackground2 = "--colorPaletteTealBackground2";
+const colorPaletteTealBorderActive = "--colorPaletteTealBorderActive";
+const colorPaletteTealForeground2 = "--colorPaletteTealForeground2";
+const borderRadiusNone = "--borderRadiusNone";
+const borderRadiusSmall = "--borderRadiusSmall";
+const borderRadiusMedium = "--borderRadiusMedium";
+const borderRadiusLarge = "--borderRadiusLarge";
+const borderRadiusXLarge = "--borderRadiusXLarge";
+const borderRadiusCircular = "--borderRadiusCircular";
+const fontFamilyBase = "--fontFamilyBase";
+const fontFamilyMonospace = "--fontFamilyMonospace";
+const fontFamilyNumeric = "--fontFamilyNumeric";
+const fontSizeBase100 = "--fontSizeBase100";
+const fontSizeBase200 = "--fontSizeBase200";
+const fontSizeBase300 = "--fontSizeBase300";
+const fontSizeBase400 = "--fontSizeBase400";
+const fontSizeBase500 = "--fontSizeBase500";
+const fontSizeBase600 = "--fontSizeBase600";
+const fontSizeHero700 = "--fontSizeHero700";
+const fontSizeHero800 = "--fontSizeHero800";
+const fontSizeHero900 = "--fontSizeHero900";
+const fontSizeHero1000 = "--fontSizeHero1000";
+const fontWeightRegular = "--fontWeightRegular";
+const fontWeightMedium = "--fontWeightMedium";
+const fontWeightSemibold = "--fontWeightSemibold";
+const fontWeightBold = "--fontWeightBold";
+const lineHeightBase100 = "--lineHeightBase100";
+const lineHeightBase200 = "--lineHeightBase200";
+const lineHeightBase300 = "--lineHeightBase300";
+const lineHeightBase400 = "--lineHeightBase400";
+const lineHeightBase500 = "--lineHeightBase500";
+const lineHeightBase600 = "--lineHeightBase600";
+const lineHeightHero700 = "--lineHeightHero700";
+const lineHeightHero800 = "--lineHeightHero800";
+const lineHeightHero900 = "--lineHeightHero900";
+const lineHeightHero1000 = "--lineHeightHero1000";
+const shadow2 = "--shadow2";
+const shadow4 = "--shadow4";
+const shadow8 = "--shadow8";
+const shadow16 = "--shadow16";
+const shadow28 = "--shadow28";
+const shadow64 = "--shadow64";
+const shadow2Brand = "--shadow2Brand";
+const shadow4Brand = "--shadow4Brand";
+const shadow8Brand = "--shadow8Brand";
+const shadow16Brand = "--shadow16Brand";
+const shadow28Brand = "--shadow28Brand";
+const shadow64Brand = "--shadow64Brand";
+const strokeWidthThin = "--strokeWidthThin";
+const strokeWidthThick = "--strokeWidthThick";
+const strokeWidthThicker = "--strokeWidthThicker";
+const strokeWidthThickest = "--strokeWidthThickest";
+const spacingHorizontalNone = "--spacingHorizontalNone";
+const spacingHorizontalXXS = "--spacingHorizontalXXS";
+const spacingHorizontalXS = "--spacingHorizontalXS";
+const spacingHorizontalSNudge = "--spacingHorizontalSNudge";
+const spacingHorizontalS = "--spacingHorizontalS";
+const spacingHorizontalMNudge = "--spacingHorizontalMNudge";
+const spacingHorizontalM = "--spacingHorizontalM";
+const spacingHorizontalL = "--spacingHorizontalL";
+const spacingHorizontalXL = "--spacingHorizontalXL";
+const spacingHorizontalXXL = "--spacingHorizontalXXL";
+const spacingHorizontalXXXL = "--spacingHorizontalXXXL";
+const spacingVerticalNone = "--spacingVerticalNone";
+const spacingVerticalXXS = "--spacingVerticalXXS";
+const spacingVerticalXS = "--spacingVerticalXS";
+const spacingVerticalSNudge = "--spacingVerticalSNudge";
+const spacingVerticalS = "--spacingVerticalS";
+const spacingVerticalMNudge = "--spacingVerticalMNudge";
+const spacingVerticalM = "--spacingVerticalM";
+const spacingVerticalL = "--spacingVerticalL";
+const spacingVerticalXL = "--spacingVerticalXL";
+const spacingVerticalXXL = "--spacingVerticalXXL";
+const spacingVerticalXXXL = "--spacingVerticalXXXL";
+const durationUltraFast = "--durationUltraFast";
+const durationFaster = "--durationFaster";
+const durationFast = "--durationFast";
+const durationNormal = "--durationNormal";
+const durationSlow = "--durationSlow";
+const durationSlower = "--durationSlower";
+const durationUltraSlow = "--durationUltraSlow";
+const curveAccelerateMax = "--curveAccelerateMax";
+const curveAccelerateMid = "--curveAccelerateMid";
+const curveAccelerateMin = "--curveAccelerateMin";
+const curveDecelerateMax = "--curveDecelerateMax";
+const curveDecelerateMid = "--curveDecelerateMid";
+const curveDecelerateMin = "--curveDecelerateMin";
+const curveEasyEaseMax = "--curveEasyEaseMax";
+const curveEasyEase = "--curveEasyEase";
+const curveLinear = "--curveLinear";
 
 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,
@@ -5563,7 +4466,6 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorNeutralForeground3BrandSelected: colorNeutralForeground3BrandSelected,
     colorNeutralForeground4: colorNeutralForeground4,
     colorNeutralForegroundDisabled: colorNeutralForegroundDisabled,
-    colorNeutralForegroundInvertedDisabled: colorNeutralForegroundInvertedDisabled,
     colorBrandForegroundLink: colorBrandForegroundLink,
     colorBrandForegroundLinkHover: colorBrandForegroundLinkHover,
     colorBrandForegroundLinkPressed: colorBrandForegroundLinkPressed,
@@ -5575,20 +4477,21 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorCompoundBrandForeground1: colorCompoundBrandForeground1,
     colorCompoundBrandForeground1Hover: colorCompoundBrandForeground1Hover,
     colorCompoundBrandForeground1Pressed: colorCompoundBrandForeground1Pressed,
-    colorBrandForeground1: colorBrandForeground1,
-    colorBrandForeground2: colorBrandForeground2,
-    colorNeutralForeground1Static: colorNeutralForeground1Static,
-    colorNeutralForegroundStaticInverted: colorNeutralForegroundStaticInverted,
+    colorNeutralForegroundOnBrand: colorNeutralForegroundOnBrand,
     colorNeutralForegroundInverted: colorNeutralForegroundInverted,
     colorNeutralForegroundInvertedHover: colorNeutralForegroundInvertedHover,
     colorNeutralForegroundInvertedPressed: colorNeutralForegroundInvertedPressed,
     colorNeutralForegroundInvertedSelected: colorNeutralForegroundInvertedSelected,
     colorNeutralForegroundInverted2: colorNeutralForegroundInverted2,
-    colorNeutralForegroundOnBrand: colorNeutralForegroundOnBrand,
+    colorNeutralForegroundStaticInverted: colorNeutralForegroundStaticInverted,
     colorNeutralForegroundInvertedLink: colorNeutralForegroundInvertedLink,
     colorNeutralForegroundInvertedLinkHover: colorNeutralForegroundInvertedLinkHover,
     colorNeutralForegroundInvertedLinkPressed: colorNeutralForegroundInvertedLinkPressed,
     colorNeutralForegroundInvertedLinkSelected: colorNeutralForegroundInvertedLinkSelected,
+    colorNeutralForegroundInvertedDisabled: colorNeutralForegroundInvertedDisabled,
+    colorBrandForeground1: colorBrandForeground1,
+    colorBrandForeground2: colorBrandForeground2,
+    colorNeutralForeground1Static: colorNeutralForeground1Static,
     colorBrandForegroundInverted: colorBrandForegroundInverted,
     colorBrandForegroundInvertedHover: colorBrandForegroundInvertedHover,
     colorBrandForegroundInvertedPressed: colorBrandForegroundInvertedPressed,
@@ -5617,8 +4520,8 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorNeutralBackground5Pressed: colorNeutralBackground5Pressed,
     colorNeutralBackground5Selected: colorNeutralBackground5Selected,
     colorNeutralBackground6: colorNeutralBackground6,
-    colorNeutralBackgroundInverted: colorNeutralBackgroundInverted,
     colorNeutralBackgroundStatic: colorNeutralBackgroundStatic,
+    colorNeutralBackgroundInverted: colorNeutralBackgroundInverted,
     colorSubtleBackground: colorSubtleBackground,
     colorSubtleBackgroundHover: colorSubtleBackgroundHover,
     colorSubtleBackgroundPressed: colorSubtleBackgroundPressed,
@@ -5693,153 +4596,186 @@ var tokens = /*#__PURE__*/Object.freeze({
     colorPaletteRedBackground1: colorPaletteRedBackground1,
     colorPaletteRedBackground2: colorPaletteRedBackground2,
     colorPaletteRedBackground3: colorPaletteRedBackground3,
-    colorPaletteRedForeground1: colorPaletteRedForeground1,
-    colorPaletteRedForeground2: colorPaletteRedForeground2,
-    colorPaletteRedForeground3: colorPaletteRedForeground3,
     colorPaletteRedBorderActive: colorPaletteRedBorderActive,
     colorPaletteRedBorder1: colorPaletteRedBorder1,
     colorPaletteRedBorder2: colorPaletteRedBorder2,
+    colorPaletteRedForeground1: colorPaletteRedForeground1,
+    colorPaletteRedForeground2: colorPaletteRedForeground2,
+    colorPaletteRedForeground3: colorPaletteRedForeground3,
+    colorPaletteRedForegroundInverted: colorPaletteRedForegroundInverted,
     colorPaletteGreenBackground1: colorPaletteGreenBackground1,
     colorPaletteGreenBackground2: colorPaletteGreenBackground2,
     colorPaletteGreenBackground3: colorPaletteGreenBackground3,
-    colorPaletteGreenForeground1: colorPaletteGreenForeground1,
-    colorPaletteGreenForeground2: colorPaletteGreenForeground2,
-    colorPaletteGreenForeground3: colorPaletteGreenForeground3,
     colorPaletteGreenBorderActive: colorPaletteGreenBorderActive,
     colorPaletteGreenBorder1: colorPaletteGreenBorder1,
     colorPaletteGreenBorder2: colorPaletteGreenBorder2,
+    colorPaletteGreenForeground1: colorPaletteGreenForeground1,
+    colorPaletteGreenForeground2: colorPaletteGreenForeground2,
+    colorPaletteGreenForeground3: colorPaletteGreenForeground3,
+    colorPaletteGreenForegroundInverted: colorPaletteGreenForegroundInverted,
     colorPaletteDarkOrangeBackground1: colorPaletteDarkOrangeBackground1,
     colorPaletteDarkOrangeBackground2: colorPaletteDarkOrangeBackground2,
     colorPaletteDarkOrangeBackground3: colorPaletteDarkOrangeBackground3,
-    colorPaletteDarkOrangeForeground1: colorPaletteDarkOrangeForeground1,
-    colorPaletteDarkOrangeForeground2: colorPaletteDarkOrangeForeground2,
-    colorPaletteDarkOrangeForeground3: colorPaletteDarkOrangeForeground3,
     colorPaletteDarkOrangeBorderActive: colorPaletteDarkOrangeBorderActive,
     colorPaletteDarkOrangeBorder1: colorPaletteDarkOrangeBorder1,
     colorPaletteDarkOrangeBorder2: colorPaletteDarkOrangeBorder2,
+    colorPaletteDarkOrangeForeground1: colorPaletteDarkOrangeForeground1,
+    colorPaletteDarkOrangeForeground2: colorPaletteDarkOrangeForeground2,
+    colorPaletteDarkOrangeForeground3: colorPaletteDarkOrangeForeground3,
     colorPaletteYellowBackground1: colorPaletteYellowBackground1,
     colorPaletteYellowBackground2: colorPaletteYellowBackground2,
     colorPaletteYellowBackground3: colorPaletteYellowBackground3,
-    colorPaletteYellowForeground1: colorPaletteYellowForeground1,
-    colorPaletteYellowForeground2: colorPaletteYellowForeground2,
-    colorPaletteYellowForeground3: colorPaletteYellowForeground3,
     colorPaletteYellowBorderActive: colorPaletteYellowBorderActive,
     colorPaletteYellowBorder1: colorPaletteYellowBorder1,
     colorPaletteYellowBorder2: colorPaletteYellowBorder2,
+    colorPaletteYellowForeground1: colorPaletteYellowForeground1,
+    colorPaletteYellowForeground2: colorPaletteYellowForeground2,
+    colorPaletteYellowForeground3: colorPaletteYellowForeground3,
+    colorPaletteYellowForegroundInverted: colorPaletteYellowForegroundInverted,
     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,
+    colorPaletteBerryForeground1: colorPaletteBerryForeground1,
+    colorPaletteBerryForeground2: colorPaletteBerryForeground2,
+    colorPaletteBerryForeground3: colorPaletteBerryForeground3,
     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,
+    colorPaletteMarigoldForeground1: colorPaletteMarigoldForeground1,
+    colorPaletteMarigoldForeground2: colorPaletteMarigoldForeground2,
+    colorPaletteMarigoldForeground3: colorPaletteMarigoldForeground3,
+    colorPaletteLightGreenBackground1: colorPaletteLightGreenBackground1,
+    colorPaletteLightGreenBackground2: colorPaletteLightGreenBackground2,
+    colorPaletteLightGreenBackground3: colorPaletteLightGreenBackground3,
+    colorPaletteLightGreenBorderActive: colorPaletteLightGreenBorderActive,
+    colorPaletteLightGreenBorder1: colorPaletteLightGreenBorder1,
+    colorPaletteLightGreenBorder2: colorPaletteLightGreenBorder2,
+    colorPaletteLightGreenForeground1: colorPaletteLightGreenForeground1,
+    colorPaletteLightGreenForeground2: colorPaletteLightGreenForeground2,
+    colorPaletteLightGreenForeground3: colorPaletteLightGreenForeground3,
+    colorPaletteAnchorBackground2: colorPaletteAnchorBackground2,
+    colorPaletteAnchorBorderActive: colorPaletteAnchorBorderActive,
+    colorPaletteAnchorForeground2: colorPaletteAnchorForeground2,
+    colorPaletteBeigeBackground2: colorPaletteBeigeBackground2,
+    colorPaletteBeigeBorderActive: colorPaletteBeigeBorderActive,
+    colorPaletteBeigeForeground2: colorPaletteBeigeForeground2,
+    colorPaletteBlueBackground2: colorPaletteBlueBackground2,
+    colorPaletteBlueBorderActive: colorPaletteBlueBorderActive,
+    colorPaletteBlueForeground2: colorPaletteBlueForeground2,
     colorPaletteBrassBackground2: colorPaletteBrassBackground2,
-    colorPaletteBrassForeground2: colorPaletteBrassForeground2,
     colorPaletteBrassBorderActive: colorPaletteBrassBorderActive,
+    colorPaletteBrassForeground2: colorPaletteBrassForeground2,
     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,
+    colorPaletteBrownForeground2: colorPaletteBrownForeground2,
     colorPaletteCornflowerBackground2: colorPaletteCornflowerBackground2,
-    colorPaletteCornflowerForeground2: colorPaletteCornflowerForeground2,
     colorPaletteCornflowerBorderActive: colorPaletteCornflowerBorderActive,
-    colorPaletteNavyBackground2: colorPaletteNavyBackground2,
-    colorPaletteNavyForeground2: colorPaletteNavyForeground2,
-    colorPaletteNavyBorderActive: colorPaletteNavyBorderActive,
-    colorPaletteLavenderBackground2: colorPaletteLavenderBackground2,
-    colorPaletteLavenderForeground2: colorPaletteLavenderForeground2,
-    colorPaletteLavenderBorderActive: colorPaletteLavenderBorderActive,
-    colorPalettePurpleBackground2: colorPalettePurpleBackground2,
-    colorPalettePurpleForeground2: colorPalettePurpleForeground2,
-    colorPalettePurpleBorderActive: colorPalettePurpleBorderActive,
+    colorPaletteCornflowerForeground2: colorPaletteCornflowerForeground2,
+    colorPaletteCranberryBackground2: colorPaletteCranberryBackground2,
+    colorPaletteCranberryBorderActive: colorPaletteCranberryBorderActive,
+    colorPaletteCranberryForeground2: colorPaletteCranberryForeground2,
+    colorPaletteDarkGreenBackground2: colorPaletteDarkGreenBackground2,
+    colorPaletteDarkGreenBorderActive: colorPaletteDarkGreenBorderActive,
+    colorPaletteDarkGreenForeground2: colorPaletteDarkGreenForeground2,
+    colorPaletteDarkRedBackground2: colorPaletteDarkRedBackground2,
+    colorPaletteDarkRedBorderActive: colorPaletteDarkRedBorderActive,
+    colorPaletteDarkRedForeground2: colorPaletteDarkRedForeground2,
+    colorPaletteForestBackground2: colorPaletteForestBackground2,
+    colorPaletteForestBorderActive: colorPaletteForestBorderActive,
+    colorPaletteForestForeground2: colorPaletteForestForeground2,
+    colorPaletteGoldBackground2: colorPaletteGoldBackground2,
+    colorPaletteGoldBorderActive: colorPaletteGoldBorderActive,
+    colorPaletteGoldForeground2: colorPaletteGoldForeground2,
     colorPaletteGrapeBackground2: colorPaletteGrapeBackground2,
-    colorPaletteGrapeForeground2: colorPaletteGrapeForeground2,
     colorPaletteGrapeBorderActive: colorPaletteGrapeBorderActive,
+    colorPaletteGrapeForeground2: colorPaletteGrapeForeground2,
+    colorPaletteLavenderBackground2: colorPaletteLavenderBackground2,
+    colorPaletteLavenderBorderActive: colorPaletteLavenderBorderActive,
+    colorPaletteLavenderForeground2: colorPaletteLavenderForeground2,
+    colorPaletteLightTealBackground2: colorPaletteLightTealBackground2,
+    colorPaletteLightTealBorderActive: colorPaletteLightTealBorderActive,
+    colorPaletteLightTealForeground2: colorPaletteLightTealForeground2,
     colorPaletteLilacBackground2: colorPaletteLilacBackground2,
-    colorPaletteLilacForeground2: colorPaletteLilacForeground2,
     colorPaletteLilacBorderActive: colorPaletteLilacBorderActive,
-    colorPalettePinkBackground2: colorPalettePinkBackground2,
-    colorPalettePinkForeground2: colorPalettePinkForeground2,
-    colorPalettePinkBorderActive: colorPalettePinkBorderActive,
+    colorPaletteLilacForeground2: colorPaletteLilacForeground2,
     colorPaletteMagentaBackground2: colorPaletteMagentaBackground2,
-    colorPaletteMagentaForeground2: colorPaletteMagentaForeground2,
     colorPaletteMagentaBorderActive: colorPaletteMagentaBorderActive,
-    colorPalettePlumBackground2: colorPalettePlumBackground2,
-    colorPalettePlumForeground2: colorPalettePlumForeground2,
-    colorPalettePlumBorderActive: colorPalettePlumBorderActive,
-    colorPaletteBeigeBackground2: colorPaletteBeigeBackground2,
-    colorPaletteBeigeForeground2: colorPaletteBeigeForeground2,
-    colorPaletteBeigeBorderActive: colorPaletteBeigeBorderActive,
+    colorPaletteMagentaForeground2: colorPaletteMagentaForeground2,
     colorPaletteMinkBackground2: colorPaletteMinkBackground2,
-    colorPaletteMinkForeground2: colorPaletteMinkForeground2,
     colorPaletteMinkBorderActive: colorPaletteMinkBorderActive,
+    colorPaletteMinkForeground2: colorPaletteMinkForeground2,
+    colorPaletteNavyBackground2: colorPaletteNavyBackground2,
+    colorPaletteNavyBorderActive: colorPaletteNavyBorderActive,
+    colorPaletteNavyForeground2: colorPaletteNavyForeground2,
+    colorPalettePeachBackground2: colorPalettePeachBackground2,
+    colorPalettePeachBorderActive: colorPalettePeachBorderActive,
+    colorPalettePeachForeground2: colorPalettePeachForeground2,
+    colorPalettePinkBackground2: colorPalettePinkBackground2,
+    colorPalettePinkBorderActive: colorPalettePinkBorderActive,
+    colorPalettePinkForeground2: colorPalettePinkForeground2,
     colorPalettePlatinumBackground2: colorPalettePlatinumBackground2,
-    colorPalettePlatinumForeground2: colorPalettePlatinumForeground2,
     colorPalettePlatinumBorderActive: colorPalettePlatinumBorderActive,
-    colorPaletteAnchorBackground2: colorPaletteAnchorBackground2,
-    colorPaletteAnchorForeground2: colorPaletteAnchorForeground2,
-    colorPaletteAnchorBorderActive: colorPaletteAnchorBorderActive,
-    colorPaletteRedForegroundInverted: colorPaletteRedForegroundInverted,
-    colorPaletteGreenForegroundInverted: colorPaletteGreenForegroundInverted,
-    colorPaletteYellowForegroundInverted: colorPaletteYellowForegroundInverted,
+    colorPalettePlatinumForeground2: colorPalettePlatinumForeground2,
+    colorPalettePlumBackground2: colorPalettePlumBackground2,
+    colorPalettePlumBorderActive: colorPalettePlumBorderActive,
+    colorPalettePlumForeground2: colorPalettePlumForeground2,
+    colorPalettePumpkinBackground2: colorPalettePumpkinBackground2,
+    colorPalettePumpkinBorderActive: colorPalettePumpkinBorderActive,
+    colorPalettePumpkinForeground2: colorPalettePumpkinForeground2,
+    colorPalettePurpleBackground2: colorPalettePurpleBackground2,
+    colorPalettePurpleBorderActive: colorPalettePurpleBorderActive,
+    colorPalettePurpleForeground2: colorPalettePurpleForeground2,
+    colorPaletteRoyalBlueBackground2: colorPaletteRoyalBlueBackground2,
+    colorPaletteRoyalBlueBorderActive: colorPaletteRoyalBlueBorderActive,
+    colorPaletteRoyalBlueForeground2: colorPaletteRoyalBlueForeground2,
+    colorPaletteSeafoamBackground2: colorPaletteSeafoamBackground2,
+    colorPaletteSeafoamBorderActive: colorPaletteSeafoamBorderActive,
+    colorPaletteSeafoamForeground2: colorPaletteSeafoamForeground2,
+    colorPaletteSteelBackground2: colorPaletteSteelBackground2,
+    colorPaletteSteelBorderActive: colorPaletteSteelBorderActive,
+    colorPaletteSteelForeground2: colorPaletteSteelForeground2,
+    colorPaletteTealBackground2: colorPaletteTealBackground2,
+    colorPaletteTealBorderActive: colorPaletteTealBorderActive,
+    colorPaletteTealForeground2: colorPaletteTealForeground2,
+    borderRadiusNone: borderRadiusNone,
+    borderRadiusSmall: borderRadiusSmall,
+    borderRadiusMedium: borderRadiusMedium,
+    borderRadiusLarge: borderRadiusLarge,
+    borderRadiusXLarge: borderRadiusXLarge,
+    borderRadiusCircular: borderRadiusCircular,
+    fontFamilyBase: fontFamilyBase,
+    fontFamilyMonospace: fontFamilyMonospace,
+    fontFamilyNumeric: fontFamilyNumeric,
+    fontSizeBase100: fontSizeBase100,
+    fontSizeBase200: fontSizeBase200,
+    fontSizeBase300: fontSizeBase300,
+    fontSizeBase400: fontSizeBase400,
+    fontSizeBase500: fontSizeBase500,
+    fontSizeBase600: fontSizeBase600,
+    fontSizeHero700: fontSizeHero700,
+    fontSizeHero800: fontSizeHero800,
+    fontSizeHero900: fontSizeHero900,
+    fontSizeHero1000: fontSizeHero1000,
+    fontWeightRegular: fontWeightRegular,
+    fontWeightMedium: fontWeightMedium,
+    fontWeightSemibold: fontWeightSemibold,
+    fontWeightBold: fontWeightBold,
+    lineHeightBase100: lineHeightBase100,
+    lineHeightBase200: lineHeightBase200,
+    lineHeightBase300: lineHeightBase300,
+    lineHeightBase400: lineHeightBase400,
+    lineHeightBase500: lineHeightBase500,
+    lineHeightBase600: lineHeightBase600,
+    lineHeightHero700: lineHeightHero700,
+    lineHeightHero800: lineHeightHero800,
+    lineHeightHero900: lineHeightHero900,
+    lineHeightHero1000: lineHeightHero1000,
     shadow2: shadow2,
     shadow4: shadow4,
     shadow8: shadow8,
@@ -5851,13 +4787,55 @@ var tokens = /*#__PURE__*/Object.freeze({
     shadow8Brand: shadow8Brand,
     shadow16Brand: shadow16Brand,
     shadow28Brand: shadow28Brand,
-    shadow64Brand: shadow64Brand
+    shadow64Brand: shadow64Brand,
+    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
 });
 
 const styles$q = css`
   ${display("block")}
 
-  :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;vertical-align:middle;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.heading-content{height:100%;display:flex;align-items:center}.button{box-sizing:border-box;appearance:none;border:none;outline:none;text-align:start;cursor:pointer;font-family:inherit;height:44px;color:${colorNeutralForeground1};background:${colorTransparentBackground};line-height:${lineHeightBase300};height:auto;padding:0;font-size:inherit;grid-column:auto / span 2;grid-row:1}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}.icon{display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-right:${spacingHorizontalS};grid-column:1 / span 1;grid-row:1}.region{margin:0 ${spacingHorizontalM}}::slotted([slot='start']),::slotted([slot='end']){justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2 / span 1;grid-row:1 / span 1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .region{display:block}:host([expanded]) .default-collapsed-icon,:host([expanded]) ::slotted([slot='collapsed-icon']),:host(:not([expanded])) .default-expanded-icon,:host(:not([expanded])) ::slotted([slot='expanded-icon']),:host([expanded]) ::slotted([slot='end']),::slotted([slot='start']),.region{display:none}:host([expanded]) ::slotted([slot='start']),:host([expanded]) ::slotted([slot='expanded-icon']),:host(:not([expanded])) ::slotted([slot='collapsed-icon']),::slotted([slot='end']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([expand-icon-position='end']) :slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) ::slotted(span[slot='start']),:host([expand-icon-position='end']) ::slotted(span[slot='end']){grid-column:1 / span 1;grid-row:1}:host([expand-icon-position='end']) .icon{grid-column:4 / span 1;grid-row:1;display:flex;padding-left:10px;padding-right:0}:host([expand-icon-position='end']) .button{grid-column:2 / span 3;grid-row:1}:host([block]){max-width:100%}:host([expand-icon-position='end']) .heading{grid-template-columns:auto auto 28px}:host([expand-icon-position='end']) .icon{grid-column:5 / span 1}:host([block][expand-icon-position='end']) .heading{grid-template-columns:auto 1fr}:host([block][expand-icon-position='end']) .icon{grid-column:5 / span 1}`;
+  :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;vertical-align:middle;padding-inline:var(${spacingHorizontalM}) var(${spacingHorizontalMNudge});border-radius:var(${borderRadiusMedium});font-family:var(${fontFamilyBase});font-size:var(${fontSizeBase300});font-weight:var(${fontWeightRegular});line-height:var(${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:var(${colorNeutralForeground1});background:var(${colorTransparentBackground});line-height:var(${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:var(${borderRadiusSmall})}.icon{display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-right:var(${spacingHorizontalS});grid-column:1 / span 1;grid-row:1}.region{margin:0 var(${spacingHorizontalM})}::slotted([slot='start']),::slotted([slot='end']){justify-content:center;align-items:center;padding-right:var(${spacingHorizontalS});grid-column:2 / span 1;grid-row:1 / span 1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:var(${borderRadiusSmall});outline:none;border:2px solid var(${colorStrokeFocus1});box-shadow:inset 0 0 0 1px var(${colorStrokeFocus2})}:host([disabled]) .button{color:var(${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:var(${fontSizeBase300});line-height:var(${lineHeightBase300})}:host([size='small']) .heading{font-size:var(${fontSizeBase200});line-height:var(${lineHeightBase200})}:host([size='large']) .heading{font-size:var(${fontSizeBase400});line-height:var(${lineHeightBase400})}:host([size='extra-large']) .heading{font-size:var(${fontSizeBase500});line-height:var(${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"
@@ -6029,8 +5007,8 @@ const template$q = anchorTemplate();
 const styles$p = css`
   ${display("inline-flex")}
 
-  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle}:host .control{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}.content{display:inherit}:host(:hover) .control{background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active) .control{background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host .control:focus-visible{border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]) .control{min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS}}:host([size='small']) .control{min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]) .control{min-width:24px;max-width:24px}:host([size='large']) .control{min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]) .control{min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']) .control,:host([shape='circular']) .control:focus-visible{border-radius:${borderRadiusCircular}}:host([shape='square']) .control,:host([shape='square']) .control:focus-visible{border-radius:${borderRadiusNone}}:host([appearance='primary']) .control{background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover) .control,:host([appearance='primary']:hover:active) .control{border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active) .control{background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']) .control:focus-visible{border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active) .control{border-color:transparent}:host([appearance='outline']) .control{background-color:${colorTransparentBackground}}:host([appearance='outline']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active) .control{background-color:${colorTransparentBackgroundPressed}}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active) .control{background-color:${colorTransparentBackground}}:host([appearance='subtle']) .control{background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active) .control{background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control{background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active) .control{background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control,:host([appearance='transparent']:hover) .control,:host([appearance='transparent']:hover:active) .control{border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active) .control{border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active)
-    .control{background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{--icon-spacing:var(${spacingHorizontalSNudge});contain:layout style;vertical-align:middle}:host .control{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:var(${colorNeutralBackground1});color:var(${colorNeutralForeground1});border:var(${strokeWidthThin}) solid var(${colorNeutralStroke1});padding:0 var(${spacingHorizontalM});min-width:96px;border-radius:var(${borderRadiusMedium});font-size:var(${fontSizeBase300});font-family:var(${fontFamilyBase});font-weight:var(${fontWeightSemibold});line-height:var(${lineHeightBase300});transition-duration:var(${durationFaster});transition-property:background,border,color;transition-timing-function:var(${curveEasyEase});cursor:pointer}.content{display:inherit}:host(:hover) .control{background-color:var(${colorNeutralBackground1Hover});color:var(${colorNeutralForeground1Hover});border-color:var(${colorNeutralStroke1Hover})}:host(:hover:active) .control{background-color:var(${colorNeutralBackground1Pressed});border-color:var(${colorNeutralStroke1Pressed});color:var(${colorNeutralForeground1Pressed});outline-style:none}:host .control:focus-visible{border-color:var(${colorTransparentStroke});outline:var(${strokeWidthThick}) solid var(${colorTransparentStroke});box-shadow:var(${shadow4}),0 0 0 2px var(${colorStrokeFocus2})}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]) .control{min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:var(${spacingHorizontalXS})}:host([size='small']) .control{min-height:24px;min-width:64px;padding:0 var(${spacingHorizontalS});border-radius:var(${borderRadiusSmall});font-size:var(${fontSizeBase200});line-height:var(${lineHeightBase200});font-weight:var(${fontWeightRegular})}:host([size='small'][icon-only]) .control{min-width:24px;max-width:24px}:host([size='large']) .control{min-height:40px;border-radius:var(${borderRadiusLarge});padding:0 var(${spacingHorizontalL});font-size:var(${fontSizeBase400});line-height:var(${lineHeightBase400})}:host([size='large'][icon-only]) .control{min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']) .control,:host([shape='circular']) .control:focus-visible{border-radius:var(${borderRadiusCircular})}:host([shape='square']) .control,:host([shape='square']) .control:focus-visible{border-radius:var(${borderRadiusNone})}:host([appearance='primary']) .control{background-color:var(${colorBrandBackground});color:var(${colorNeutralForegroundOnBrand});border-color:transparent}:host([appearance='primary']:hover) .control{background-color:var(${colorBrandBackgroundHover})}:host([appearance='primary']:hover) .control,:host([appearance='primary']:hover:active) .control{border-color:transparent;color:var(${colorNeutralForegroundOnBrand})}:host([appearance='primary']:hover:active) .control{background-color:var(${colorBrandBackgroundPressed})}:host([appearance='primary']) .control:focus-visible{border-color:var(${colorNeutralForegroundOnBrand});box-shadow:var(${shadow2}),0 0 0 2px var(${colorStrokeFocus2})}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active) .control{border-color:transparent}:host([appearance='outline']) .control{background-color:var(${colorTransparentBackground})}:host([appearance='outline']:hover) .control{background-color:var(${colorTransparentBackgroundHover})}:host([appearance='outline']:hover:active) .control{background-color:var(${colorTransparentBackgroundPressed})}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active) .control{background-color:var(${colorTransparentBackground})}:host([appearance='subtle']) .control{background-color:var(${colorSubtleBackground});color:var(${colorNeutralForeground2});border-color:transparent}:host([appearance='subtle']:hover) .control{background-color:var(${colorSubtleBackgroundHover});color:var(${colorNeutralForeground2Hover});border-color:transparent}:host([appearance='subtle']:hover:active) .control{background-color:var(${colorSubtleBackgroundPressed});color:var(${colorNeutralForeground2Pressed});border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active) .control{background-color:var(${colorTransparentBackground});border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:var(${colorNeutralForeground2BrandHover})}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:var(${colorNeutralForeground2BrandPressed})}:host([appearance='transparent']) .control{background-color:var(${colorTransparentBackground});color:var(${colorNeutralForeground2})}:host([appearance='transparent']:hover) .control{background-color:var(${colorTransparentBackgroundHover});color:var(${colorNeutralForeground2BrandHover})}:host([appearance='transparent']:hover:active) .control{background-color:var(${colorTransparentBackgroundPressed});color:var(${colorNeutralForeground2BrandPressed})}:host([appearance='transparent']) .control,:host([appearance='transparent']:hover) .control,:host([appearance='transparent']:hover:active) .control{border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active) .control{border-color:transparent;background-color:var(${colorTransparentBackground})}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active)
+    .control{background-color:var(${colorNeutralBackgroundDisabled});border-color:var(${colorNeutralStrokeDisabled});color:var(${colorNeutralForegroundDisabled});cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='transparent']:hover) .control{border-color:Highlight}`));
 
 const styles$o = css`
@@ -6229,7 +5207,7 @@ const animations = {
   nullEasing: curveLinear
 };
 const styles$n = 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}}`;
+  ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:var(${fontFamilyBase});font-weight:var(${fontWeightSemibold});font-size:var(${fontSizeBase300});border-radius:var(${borderRadiusCircular});color:var(${colorNeutralForeground3});background-color:var(${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:var(${borderRadiusCircular})}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 var(${strokeWidthThin}) var(${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 var(${strokeWidthThick}) var(${colorNeutralBackground1})}:host([size='16']),:host([size='20']),:host([size='24']){font-size:var(${fontSizeBase100});font-weight:var(${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:var(${fontSizeBase200})}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:var(${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:var(${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:var(${fontSizeBase600})}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:var(${borderRadiusMedium})}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:var(${borderRadiusSmall})}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:var(${borderRadiusLarge})}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:var(${borderRadiusXLarge})}:host([data-color='brand']){color:var(${colorNeutralForegroundStaticInverted});background-color:var(${colorBrandBackgroundStatic})}:host([data-color='dark-red']){color:var(${colorPaletteDarkRedForeground2});background-color:var(${colorPaletteDarkRedBackground2})}:host([data-color='cranberry']){color:var(${colorPaletteCranberryForeground2});background-color:var(${colorPaletteCranberryBackground2})}:host([data-color='red']){color:var(${colorPaletteRedForeground2});background-color:var(${colorPaletteRedBackground2})}:host([data-color='pumpkin']){color:var(${colorPalettePumpkinForeground2});background-color:var(${colorPalettePumpkinBackground2})}:host([data-color='peach']){color:var(${colorPalettePeachForeground2});background-color:var(${colorPalettePeachBackground2})}:host([data-color='marigold']){color:var(${colorPaletteMarigoldForeground2});background-color:var(${colorPaletteMarigoldBackground2})}:host([data-color='gold']){color:var(${colorPaletteGoldForeground2});background-color:var(${colorPaletteGoldBackground2})}:host([data-color='brass']){color:var(${colorPaletteBrassForeground2});background-color:var(${colorPaletteBrassBackground2})}:host([data-color='brown']){color:var(${colorPaletteBrownForeground2});background-color:var(${colorPaletteBrownBackground2})}:host([data-color='forest']){color:var(${colorPaletteForestForeground2});background-color:var(${colorPaletteForestBackground2})}:host([data-color='seafoam']){color:var(${colorPaletteSeafoamForeground2});background-color:var(${colorPaletteSeafoamBackground2})}:host([data-color='dark-green']){color:var(${colorPaletteDarkGreenForeground2});background-color:var(${colorPaletteDarkGreenBackground2})}:host([data-color='light-teal']){color:var(${colorPaletteLightTealForeground2});background-color:var(${colorPaletteLightTealBackground2})}:host([data-color='teal']){color:var(${colorPaletteTealForeground2});background-color:var(${colorPaletteTealBackground2})}:host([data-color='steel']){color:var(${colorPaletteSteelForeground2});background-color:var(${colorPaletteSteelBackground2})}:host([data-color='blue']){color:var(${colorPaletteBlueForeground2});background-color:var(${colorPaletteBlueBackground2})}:host([data-color='royal-blue']){color:var(${colorPaletteRoyalBlueForeground2});background-color:var(${colorPaletteRoyalBlueBackground2})}:host([data-color='cornflower']){color:var(${colorPaletteCornflowerForeground2});background-color:var(${colorPaletteCornflowerBackground2})}:host([data-color='navy']){color:var(${colorPaletteNavyForeground2});background-color:var(${colorPaletteNavyBackground2})}:host([data-color='lavender']){color:var(${colorPaletteLavenderForeground2});background-color:var(${colorPaletteLavenderBackground2})}:host([data-color='purple']){color:var(${colorPalettePurpleForeground2});background-color:var(${colorPalettePurpleBackground2})}:host([data-color='grape']){color:var(${colorPaletteGrapeForeground2});background-color:var(${colorPaletteGrapeBackground2})}:host([data-color='lilac']){color:var(${colorPaletteLilacForeground2});background-color:var(${colorPaletteLilacBackground2})}:host([data-color='pink']){color:var(${colorPalettePinkForeground2});background-color:var(${colorPalettePinkBackground2})}:host([data-color='magenta']){color:var(${colorPaletteMagentaForeground2});background-color:var(${colorPaletteMagentaBackground2})}:host([data-color='plum']){color:var(${colorPalettePlumForeground2});background-color:var(${colorPalettePlumBackground2})}:host([data-color='beige']){color:var(${colorPaletteBeigeForeground2});background-color:var(${colorPaletteBeigeBackground2})}:host([data-color='mink']){color:var(${colorPaletteMinkForeground2});background-color:var(${colorPaletteMinkBackground2})}:host([data-color='platinum']){color:var(${colorPalettePlatinumForeground2});background-color:var(${colorPalettePlatinumBackground2})}:host([data-color='anchor']){color:var(${colorPaletteAnchorForeground2});background-color:var(${colorPaletteAnchorBackground2})}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:var(${durationUltraSlow}),var(${durationFaster});transition-delay:var(${animations.fastEase}),var(${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:var(${durationUltraSlow}),var(${durationSlower});transition-delay:var(${animations.fastEase}),var(${animations.nullEasing})}:host([active])::before{box-shadow:var(${shadow8});border-style:solid;border-color:var(${colorBrandBackgroundStatic})}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * var(${strokeWidthThick}));border-width:var(${strokeWidthThick})}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * var(${strokeWidthThicker}));border-width:var(${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 * var(${strokeWidthThickest}));border-width:var(${strokeWidthThickest})}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:var(${shadow4})}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:var(${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:var(${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:var(${durationUltraSlow}),var(${durationFaster});transition-delay:var(${animations.fastOutSlowInMin}),var(${animations.nullEasing})}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:var(${durationUltraSlow}),var(${durationSlower});transition-delay:var(${animations.fastOutSlowInMin}),var(${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 definition$p = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
@@ -6313,17 +5291,17 @@ const badgeBaseStyles = css.partial`
     box-sizing: border-box;
     align-items: center;
     justify-content: center;
-    font-family: ${fontFamilyBase};
-    font-weight: ${fontWeightSemibold};
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
+    font-family: var(${fontFamilyBase});
+    font-weight: var(${fontWeightSemibold});
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
     min-width: 20px;
     height: 20px;
-    padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
-    border-radius: ${borderRadiusCircular};
-    border-color: ${colorTransparentStroke};
-    background-color: ${colorBrandBackground};
-    color: ${colorNeutralForegroundOnBrand};
+    padding-inline: calc(var(${spacingHorizontalXS}) + var(${textPadding}));
+    border-radius: var(${borderRadiusCircular});
+    border-color: var(${colorTransparentStroke});
+    background-color: var(${colorBrandBackground});
+    color: var(${colorNeutralForegroundOnBrand});
     contain: content;
   }
 
@@ -6339,7 +5317,7 @@ const badgeBaseStyles = css.partial`
     bottom: 0;
     right: 0;
     border-style: solid;
-    border-width: ${strokeWidthThin};
+    border-width: var(${strokeWidthThin});
     border-color: inherit;
     border-radius: inherit;
   }
@@ -6370,9 +5348,9 @@ const badgeSizeStyles = css.partial`
   :host([size='small']) {
     min-width: 16px;
     height: 16px;
-    font-size: ${fontSizeBase100};
-    line-height: ${lineHeightBase100};
-    padding-inline: calc(${spacingHorizontalXXS} + ${textPadding});
+    font-size: var(${fontSizeBase100});
+    line-height: var(${lineHeightBase100});
+    padding-inline: calc(var(${spacingHorizontalXXS}) + var(${textPadding}));
   }
   :host([size='small']) ::slotted(svg) {
     font-size: 12px;
@@ -6380,9 +5358,9 @@ const badgeSizeStyles = css.partial`
   :host([size='large']) {
     min-width: 24px;
     height: 24px;
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
-    padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
+    padding-inline: calc(var(${spacingHorizontalXS}) + var(${textPadding}));
   }
   :host([size='large']) ::slotted(svg) {
     font-size: 16px;
@@ -6390,9 +5368,9 @@ const badgeSizeStyles = css.partial`
   :host([size='extra-large']) {
     min-width: 32px;
     height: 32px;
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
-    padding-inline: calc(${spacingHorizontalSNudge} + ${textPadding});
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
+    padding-inline: calc(var(${spacingHorizontalSNudge}) + var(${textPadding}));
   }
   :host([size='extra-large']) ::slotted(svg) {
     font-size: 20px;
@@ -6400,163 +5378,163 @@ const badgeSizeStyles = css.partial`
 `;
 const badgeFilledStyles = css.partial`
   :host([color='danger']) {
-    background-color: ${colorPaletteRedBackground3};
-    color: ${colorNeutralForegroundOnBrand};
+    background-color: var(${colorPaletteRedBackground3});
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host([color='important']) {
-    background-color: ${colorNeutralForeground1};
-    color: ${colorNeutralBackground1};
+    background-color: var(${colorNeutralForeground1});
+    color: var(${colorNeutralBackground1});
   }
 
   :host([color='informative']) {
-    background-color: ${colorNeutralBackground5};
-    color: ${colorNeutralForeground3};
+    background-color: var(${colorNeutralBackground5});
+    color: var(${colorNeutralForeground3});
   }
 
   :host([color='severe']) {
-    background-color: ${colorPaletteDarkOrangeBackground3};
-    color: ${colorNeutralForegroundOnBrand};
+    background-color: var(${colorPaletteDarkOrangeBackground3});
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host([color='subtle']) {
-    background-color: ${colorNeutralBackground1};
-    color: ${colorNeutralForeground1};
+    background-color: var(${colorNeutralBackground1});
+    color: var(${colorNeutralForeground1});
   }
 
   :host([color='success']) {
-    background-color: ${colorPaletteGreenBackground3};
-    color: ${colorNeutralForegroundOnBrand};
+    background-color: var(${colorPaletteGreenBackground3});
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host([color='warning']) {
-    background-color: ${colorPaletteYellowBackground3};
-    color: ${colorNeutralForeground1Static};
+    background-color: var(${colorPaletteYellowBackground3});
+    color: var(${colorNeutralForeground1Static});
   }
 `;
 const badgeGhostStyles = css.partial`
   :host([appearance='ghost']) {
-    color: ${colorBrandForeground1};
+    color: var(${colorBrandForeground1});
     background-color: initial;
   }
 
   :host([appearance='ghost'][color='danger']) {
-    color: ${colorPaletteRedForeground3};
+    color: var(${colorPaletteRedForeground3});
   }
 
   :host([appearance='ghost'][color='important']) {
-    color: ${colorNeutralForeground1};
+    color: var(${colorNeutralForeground1});
   }
 
   :host([appearance='ghost'][color='informative']) {
-    color: ${colorNeutralForeground3};
+    color: var(${colorNeutralForeground3});
   }
 
   :host([appearance='ghost'][color='severe']) {
-    color: ${colorPaletteDarkOrangeForeground3};
+    color: var(${colorPaletteDarkOrangeForeground3});
   }
 
   :host([appearance='ghost'][color='subtle']) {
-    color: ${colorNeutralForegroundInverted};
+    color: var(${colorNeutralForegroundInverted});
   }
 
   :host([appearance='ghost'][color='success']) {
-    color: ${colorPaletteGreenForeground3};
+    color: var(${colorPaletteGreenForeground3});
   }
 
   :host([appearance='ghost'][color='warning']) {
-    color: ${colorPaletteYellowForeground2};
+    color: var(${colorPaletteYellowForeground2});
   }
 `;
 const badgeOutlineStyles = css.partial`
   :host([appearance='outline']) {
     border-color: currentColor;
-    color: ${colorBrandForeground1};
+    color: var(${colorBrandForeground1});
     background-color: initial;
   }
 
   :host([appearance='outline'][color='danger']) {
-    color: ${colorPaletteRedForeground3};
+    color: var(${colorPaletteRedForeground3});
   }
 
   :host([appearance='outline'][color='important']) {
-    color: ${colorNeutralForeground3};
-    border-color: ${colorNeutralStrokeAccessible};
+    color: var(${colorNeutralForeground3});
+    border-color: var(${colorNeutralStrokeAccessible});
   }
 
   :host([appearance='outline'][color='informative']) {
-    color: ${colorNeutralForeground3};
-    border-color: ${colorNeutralStroke2};
+    color: var(${colorNeutralForeground3});
+    border-color: var(${colorNeutralStroke2});
   }
 
   :host([appearance='outline'][color='severe']) {
-    color: ${colorPaletteDarkOrangeForeground3};
+    color: var(${colorPaletteDarkOrangeForeground3});
   }
 
   :host([appearance='outline'][color='subtle']) {
-    color: ${colorNeutralForegroundStaticInverted};
+    color: var(${colorNeutralForegroundStaticInverted});
   }
 
   :host([appearance='outline'][color='success']) {
-    color: ${colorPaletteGreenForeground2};
+    color: var(${colorPaletteGreenForeground2});
   }
 
   :host([appearance='outline'][color='warning']) {
-    color: ${colorPaletteYellowForeground2};
+    color: var(${colorPaletteYellowForeground2});
   }
 `;
 const badgeTintStyles = css.partial`
   :host([appearance='tint']) {
-    background-color: ${colorBrandBackground2};
-    color: ${colorBrandForeground2};
-    border-color: ${colorBrandStroke2};
+    background-color: var(${colorBrandBackground2});
+    color: var(${colorBrandForeground2});
+    border-color: var(${colorBrandStroke2});
   }
 
   :host([appearance='tint'][color='danger']) {
-    background-color: ${colorPaletteRedBackground1};
-    color: ${colorPaletteRedForeground1};
-    border-color: ${colorPaletteRedBorder1};
+    background-color: var(${colorPaletteRedBackground1});
+    color: var(${colorPaletteRedForeground1});
+    border-color: var(${colorPaletteRedBorder1});
   }
 
   :host([appearance='tint'][color='important']) {
-    background-color: ${colorNeutralForeground3};
-    color: ${colorNeutralBackground1};
-    border-color: ${colorTransparentStroke};
+    background-color: var(${colorNeutralForeground3});
+    color: var(${colorNeutralBackground1});
+    border-color: var(${colorTransparentStroke});
   }
 
   :host([appearance='tint'][color='informative']) {
-    background-color: ${colorNeutralBackground4};
-    color: ${colorNeutralForeground3};
-    border-color: ${colorNeutralStroke2};
+    background-color: var(${colorNeutralBackground4});
+    color: var(${colorNeutralForeground3});
+    border-color: var(${colorNeutralStroke2});
   }
 
   :host([appearance='tint'][color='severe']) {
-    background-color: ${colorPaletteDarkOrangeBackground1};
-    color: ${colorPaletteDarkOrangeForeground1};
-    border-color: ${colorPaletteDarkOrangeBorder1};
+    background-color: var(${colorPaletteDarkOrangeBackground1});
+    color: var(${colorPaletteDarkOrangeForeground1});
+    border-color: var(${colorPaletteDarkOrangeBorder1});
   }
 
   :host([appearance='tint'][color='subtle']) {
-    background-color: ${colorNeutralBackground1};
-    color: ${colorNeutralForeground3};
-    border-color: ${colorNeutralStroke2};
+    background-color: var(${colorNeutralBackground1});
+    color: var(${colorNeutralForeground3});
+    border-color: var(${colorNeutralStroke2});
   }
 
   :host([appearance='tint'][color='success']) {
-    background-color: ${colorPaletteGreenBackground1};
-    color: ${colorPaletteGreenForeground1};
-    border-color: ${colorPaletteGreenBorder2};
+    background-color: var(${colorPaletteGreenBackground1});
+    color: var(${colorPaletteGreenForeground1});
+    border-color: var(${colorPaletteGreenBorder2});
   }
 
   :host([appearance='tint'][color='warning']) {
-    background-color: ${colorPaletteYellowBackground1};
-    color: ${colorPaletteYellowForeground2};
-    border-color: ${colorPaletteYellowBorder1};
+    background-color: var(${colorPaletteYellowBackground1});
+    color: var(${colorPaletteYellowForeground2});
+    border-color: var(${colorPaletteYellowBorder1});
   }
 `;
 
 const styles$m = 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}
+  :host([shape='square']){border-radius:var(${borderRadiusNone})}:host([shape='rounded']){border-radius:var(${borderRadiusMedium})}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:var(${borderRadiusSmall})}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
   ${badgeOutlineStyles}
@@ -7372,7 +6350,7 @@ const template$m = checkboxTemplate({
 
 const styles$l = css`
   ${display("inline-flex")}
-  :host{align-items:center;outline:none;user-select:none;vertical-align:middle;cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};color:${colorNeutralForeground3};position:relative}:host(:focus-visible)::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusMedium};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}.control{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;margin:${spacingVerticalS} ${spacingHorizontalS};fill:currentcolor;height:16px;width:16px;border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusSmall};outline:none}.label{align-self:center;cursor:inherit;padding-inline:${spacingHorizontalS};padding-bottom:${spacingVerticalS};padding-top:${spacingVerticalS}}.label__hidden{display:none;visibility:hidden}.checked-indicator{display:flex;align-items:center;justify-content:center;color:${colorNeutralForegroundInverted};font-size:12px;margin:auto;opacity:0}.indeterminate-indicator{position:absolute;width:8px;height:8px;border-radius:${borderRadiusSmall};background-color:${colorCompoundBrandForeground1};opacity:0}:host(:hover){color:${colorNeutralForeground2}}:host(:hover) .control{border-color:${colorNeutralStrokeAccessibleHover}}:host(:hover) .indeterminate-indicator{background-color:${colorCompoundBrandForeground1Hover}}:host(:active) .control{border-color:${colorNeutralStrokeAccessiblePressed}}:host(:active) .indeterminate-indicator{background-color:${colorCompoundBrandForeground1Pressed}}:host([aria-checked='true']),:host([aria-checked='mixed']),:host(:active){color:${colorNeutralForeground1}}:host([aria-checked='true']) .control{background-color:${colorCompoundBrandBackground}}:host([aria-checked='true']:hover) .control{border-color:${colorCompoundBrandStrokeHover};background-color:${colorCompoundBrandBackgroundHover}}:host([aria-checked='true']:active) .control{background-color:${colorCompoundBrandBackgroundPressed}}:host([aria-checked='mixed']:hover) .control{border-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='mixed']) .indeterminate-indicator{opacity:1}:host([aria-checked='true']) .control,:host([aria-checked='mixed']) .control{border-color:${colorCompoundBrandStroke}}:host([aria-checked='mixed']:active) .control,:host([aria-checked='true']:active) .control{border-color:${colorCompoundBrandStrokePressed}}:host([label-position='before']){flex-direction:row-reverse}:host([label-position='before']) .label{padding-inline:${spacingHorizontalS} ${spacingHorizontalXS};padding-top:${spacingVerticalS};padding-bottom:${spacingVerticalS}}:host([size='large']) .control{width:20px;height:20px}:host([size='large']) .checked-indicator{font-size:16px;height:20px}:host([aria-checked='mixed'][size='large']) .indeterminate-indicator{height:10px;width:10px}:host([shape='circular']) .control,:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]) .control,:host([aria-checked='mixed'][disabled]) .control,:host([aria-checked='true'][disabled]) .control{background-color:${colorTransparentBackgroundHover};border-color:${colorNeutralStrokeDisabled}}:host([aria-checked='true'][disabled]) .checked-indicator,:host([disabled]) ::slotted([slot='start']),:host([disabled]) .label,:host([aria-checked='mixed'][disabled]) .label,:host([aria-checked='true'][disabled]) .label{color:${colorNeutralForegroundDisabled}}:host([disabled]) .indeterminate-indicator{background-color:${colorNeutralForegroundDisabled}}`;
+  :host{align-items:center;outline:none;user-select:none;vertical-align:middle;cursor:pointer;font-family:var(${fontFamilyBase});font-size:var(${fontSizeBase300});line-height:var(${lineHeightBase300});color:var(${colorNeutralForeground3});position:relative}:host(:focus-visible)::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:var(${borderRadiusMedium});outline:none;border:2px solid var(${colorStrokeFocus1});box-shadow:inset 0 0 0 1px var(${colorStrokeFocus2})}.control{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;margin:var(${spacingVerticalS}) var(${spacingHorizontalS});fill:currentcolor;height:16px;width:16px;border:var(${strokeWidthThin}) solid var(${colorNeutralStrokeAccessible});border-radius:var(${borderRadiusSmall});outline:none}.label{align-self:center;cursor:inherit;padding-inline:var(${spacingHorizontalS});padding-bottom:var(${spacingVerticalS});padding-top:var(${spacingVerticalS})}.label__hidden{display:none;visibility:hidden}.checked-indicator{display:flex;align-items:center;justify-content:center;color:var(${colorNeutralForegroundInverted});font-size:12px;margin:auto;opacity:0}.indeterminate-indicator{position:absolute;width:8px;height:8px;border-radius:var(${borderRadiusSmall});background-color:var(${colorCompoundBrandForeground1});opacity:0}:host(:hover){color:var(${colorNeutralForeground2})}:host(:hover) .control{border-color:var(${colorNeutralStrokeAccessibleHover})}:host(:hover) .indeterminate-indicator{background-color:var(${colorCompoundBrandForeground1Hover})}:host(:active) .control{border-color:var(${colorNeutralStrokeAccessiblePressed})}:host(:active) .indeterminate-indicator{background-color:var(${colorCompoundBrandForeground1Pressed})}:host([aria-checked='true']),:host([aria-checked='mixed']),:host(:active){color:var(${colorNeutralForeground1})}:host([aria-checked='true']) .control{background-color:var(${colorCompoundBrandBackground})}:host([aria-checked='true']:hover) .control{border-color:var(${colorCompoundBrandStrokeHover});background-color:var(${colorCompoundBrandBackgroundHover})}:host([aria-checked='true']:active) .control{background-color:var(${colorCompoundBrandBackgroundPressed})}:host([aria-checked='mixed']:hover) .control{border-color:var(${colorCompoundBrandStrokeHover})}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='mixed']) .indeterminate-indicator{opacity:1}:host([aria-checked='true']) .control,:host([aria-checked='mixed']) .control{border-color:var(${colorCompoundBrandStroke})}:host([aria-checked='mixed']:active) .control,:host([aria-checked='true']:active) .control{border-color:var(${colorCompoundBrandStrokePressed})}:host([label-position='before']){flex-direction:row-reverse}:host([label-position='before']) .label{padding-inline:var(${spacingHorizontalS}) var(${spacingHorizontalXS});padding-top:var(${spacingVerticalS});padding-bottom:var(${spacingVerticalS})}:host([size='large']) .control{width:20px;height:20px}:host([size='large']) .checked-indicator{font-size:16px;height:20px}:host([aria-checked='mixed'][size='large']) .indeterminate-indicator{height:10px;width:10px}:host([shape='circular']) .control,:host([shape='circular']) .indeterminate-indicator{border-radius:var(${borderRadiusCircular})}:host([disabled]) .control,:host([aria-checked='mixed'][disabled]) .control,:host([aria-checked='true'][disabled]) .control{background-color:var(${colorTransparentBackgroundHover});border-color:var(${colorNeutralStrokeDisabled})}:host([aria-checked='true'][disabled]) .checked-indicator,:host([disabled]) ::slotted([slot='start']),:host([disabled]) .label,:host([aria-checked='mixed'][disabled]) .label,:host([aria-checked='true'][disabled]) .label{color:var(${colorNeutralForegroundDisabled})}:host([disabled]) .indeterminate-indicator{background-color:var(${colorNeutralForegroundDisabled})}`;
 
 const definition$m = Checkbox.compose({
   name: `${FluentDesignSystem.prefix}-checkbox`,
@@ -7394,10 +6372,10 @@ const template$l = buttonTemplate();
 const styles$k = css`
   ${styles$p}
 
-  :host .control,:host(:is([size])) .control{gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:hover,[appearance='primary']:active))
-    ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='subtle'],[appearance='subtle']:hover,[appearance='subtle']:active))
-    ::slotted([slot='description']),:host([appearance='transparent']) ::slotted([slot='description']){color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is([disabled],[disabled][appearance],[disabled-focusable],[disabled-focusable][appearance]))
-    ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']) .control{padding:8px;padding-bottom:10px}:host([icon-only]) .control{min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']) .control{min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']) .control{min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']) .control{padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
+  :host .control,:host(:is([size])) .control{gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:var(${fontSizeBase300});line-height:var(${lineHeightBase300})}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:var(${colorNeutralForeground2});line-height:100%;font-size:var(${fontSizeBase200});font-weight:var(${fontWeightRegular})}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:var(${colorNeutralForeground2Hover})}:host(:active) ::slotted([slot='description']){color:var(${colorNeutralForeground2Pressed})}:host(:is([appearance='primary'],[appearance='primary']:hover,[appearance='primary']:active))
+    ::slotted([slot='description']){color:var(${colorNeutralForegroundOnBrand})}:host(:is([appearance='subtle'],[appearance='subtle']:hover,[appearance='subtle']:active))
+    ::slotted([slot='description']),:host([appearance='transparent']) ::slotted([slot='description']){color:var(${colorNeutralForeground2})}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:var(${colorNeutralForeground2BrandHover})}:host([appearance='transparent']:active) ::slotted([slot='description']){color:var(${colorNeutralForeground2BrandPressed})}:host(:is([disabled],[disabled][appearance],[disabled-focusable],[disabled-focusable][appearance]))
+    ::slotted([slot='description']){color:var(${colorNeutralForegroundDisabled})}:host([size='small']) .control{padding:8px;padding-bottom:10px}:host([icon-only]) .control{min-width:52px;max-width:52px;padding:var(${spacingHorizontalSNudge})}:host([icon-only][size='small']) .control{min-width:48px;max-width:48px;padding:var(${spacingHorizontalXS})}:host([icon-only][size='large']) .control{min-width:56px;max-width:56px;padding:var(${spacingHorizontalS})}:host([size='large']) .control{padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:var(${fontSizeBase400});line-height:var(${lineHeightBase400})}:host([size='large']) ::slotted([slot='description']){font-size:var(${fontSizeBase300})}`;
 
 const definition$l = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
@@ -7494,7 +6472,7 @@ function composeTemplate(options = {}) {
 const template$k = composeTemplate();
 
 const styles$j = 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}
+  :host([shape='rounded']){border-radius:var(${borderRadiusMedium})}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:var(${borderRadiusSmall})}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
   ${badgeBaseStyles}
@@ -11036,7 +10014,7 @@ function textFieldTemplate(options = {}) {
 const styles$i = css`
   ${display("flex")}
 
-  :host{--dialog-backdrop:${colorBackgroundOverlay}}dialog{background:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorTransparentStroke};z-index:2;margin:auto auto;max-width:100%;width:100vw;border-radius:${borderRadiusXLarge};box-shadow:${shadow64};max-height:100vh;height:fit-content;overflow:unset;position:fixed;inset:0;padding:0}dialog::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}.root{box-sizing:border-box;display:flex;flex-direction:column;overflow:unset;max-height:calc(100vh - 48px);padding:${spacingVerticalXXL} ${spacingHorizontalXXL}}.title{font-size:${fontSizeBase500};line-height:${lineHeightBase500};font-weight:${fontWeightSemibold};font-family:${fontFamilyBase};color:${colorNeutralForeground1};margin-bottom:${spacingVerticalS};display:flex;justify-content:space-between;align-items:flex-start;column-gap:8px}.content{vertical-align:top;min-height:32px;color:${colorNeutralForeground1};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};font-family:${fontFamilyBase};overflow-y:auto;box-sizing:border-box}.actions{display:flex;grid-column-start:1;flex-direction:column;max-width:100vw;row-gap:${spacingVerticalS};padding-top:${spacingVerticalXXL};justify-self:stretch;width:100%}::slotted([slot='action']){width:100%}@media screen and (min-width:480px){::slotted([slot='action']){width:fit-content}dialog{max-width:600px;width:100%}.actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;column-gap:${spacingHorizontalS};padding-top:${spacingVerticalS};box-sizing:border-box}}`;
+  :host{--dialog-backdrop:var(${colorBackgroundOverlay})}dialog{background:var(${colorNeutralBackground1});border:var(${strokeWidthThin}) solid var(${colorTransparentStroke});z-index:2;margin:auto auto;max-width:100%;width:100vw;border-radius:var(${borderRadiusXLarge});box-shadow:var(${shadow64});max-height:100vh;height:fit-content;overflow:unset;position:fixed;inset:0;padding:0}dialog::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}.root{box-sizing:border-box;display:flex;flex-direction:column;overflow:unset;max-height:calc(100vh - 48px);padding:var(${spacingVerticalXXL}) var(${spacingHorizontalXXL})}.title{font-size:var(${fontSizeBase500});line-height:var(${lineHeightBase500});font-weight:var(${fontWeightSemibold});font-family:var(${fontFamilyBase});color:var(${colorNeutralForeground1});margin-bottom:var(${spacingVerticalS});display:flex;justify-content:space-between;align-items:flex-start;column-gap:8px}.content{vertical-align:top;min-height:32px;color:var(${colorNeutralForeground1});font-size:var(${fontSizeBase300});line-height:var(${lineHeightBase300});font-weight:var(${fontWeightRegular});font-family:var(${fontFamilyBase});overflow-y:auto;box-sizing:border-box}.actions{display:flex;grid-column-start:1;flex-direction:column;max-width:100vw;row-gap:var(${spacingVerticalS});padding-top:var(${spacingVerticalXXL});justify-self:stretch;width:100%}::slotted([slot='action']){width:100%}@media screen and (min-width:480px){::slotted([slot='action']){width:fit-content}dialog{max-width:600px;width:100%}.actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;column-gap:var(${spacingHorizontalS});padding-top:var(${spacingVerticalS});box-sizing:border-box}}`;
 
 const definition$j = Dialog.compose({
   name: `${FluentDesignSystem.prefix}-dialog`,
@@ -11078,7 +10056,7 @@ const template$i = dividerTemplate();
 const styles$h = css`
   ${display("flex")}
 
-  :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical']){flex-direction:column;align-items:center}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{contain:content}:host::after,:host::before{align-self:center;background:var(${colorNeutralStroke2});box-sizing:border-box;content:'';display:flex;flex-grow:1;height:var(${strokeWidthThin})}:host([inset]){padding:0 12px}:host ::slotted(*){color:var(${colorNeutralForeground2});font-family:var(${fontFamilyBase});font-size:var(${fontSizeBase200});font-weight:var(${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:var(${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:var(${colorNeutralStroke1})}:host([appearance='strong']) ::slotted(*){color:var(${colorNeutralForeground1})}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:var(${colorBrandStroke1})}:host([appearance='brand']) ::slotted(*){color:var(${colorBrandForeground1})}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:var(${colorNeutralStroke3})}:host([appearance='subtle']) ::slotted(*){color:var(${colorNeutralForeground3})}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
 
 const definition$i = Divider.compose({
@@ -11124,7 +10102,7 @@ const ImageShape = {
 const template$h = html`<slot></slot>`;
 
 const styles$g = css`
-  :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
+  :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:var(${strokeWidthThin}) solid var(${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:var(${shadow4})}:host([shape='circular']) ::slotted(img){border-radius:var(${borderRadiusCircular})}:host([shape='rounded']) ::slotted(img){border-radius:var(${borderRadiusMedium})}`;
 
 const definition$h = Image.compose({
   name: `${FluentDesignSystem.prefix}-image`,
@@ -11159,7 +10137,7 @@ __decorateClass$a([attr({
 const styles$f = css`
   ${display("flex")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};color:${colorNeutralForeground1}}.asterisk{color:${colorPaletteRedForeground1};margin-left:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400};font-weight:${fontWeightSemibold}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
+  :host{font-family:var(${fontFamilyBase});font-size:var(${fontSizeBase300});line-height:var(${lineHeightBase300});font-weight:var(${fontWeightRegular});color:var(${colorNeutralForeground1})}.asterisk{color:var(${colorPaletteRedForeground1});margin-left:var(${spacingHorizontalXS})}:host([size='small']){font-size:var(${fontSizeBase200});line-height:var(${lineHeightBase200})}:host([size='large']){font-size:var(${fontSizeBase400});line-height:var(${lineHeightBase400});font-weight:var(${fontWeightSemibold})}:host([weight='semibold']){font-weight:var(${fontWeightSemibold})}:host([disabled]),:host([disabled]) .asterisk{color:var(${colorNeutralForegroundDisabled})}`;
 
 function labelTemplate() {
   return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
@@ -11483,7 +10461,7 @@ const template$d = menuItemTemplate({
 const styles$d = css`
   ${display("grid")}
 
-  :host{grid-template-columns:20px 20px auto 20px;align-items:center;grid-gap:4px;height:32px;background:${colorNeutralBackground1};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};padding:0 10px;cursor:pointer;overflow:visible;contain:layout}:host(:hover){background:${colorNeutralBackground1Hover}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}.checkbox,.radio{display:none}.input-container,.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']),:host([checked]) .checkbox,:host([checked]) .radio{display:inline-flex;justify-content:center;align-items:center;color:${colorNeutralForeground2}}.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']){height:32px;font-size:${fontSizeBase500};width:fit-content}.input-container{width:20px}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap;grid-column:4 / span 1;justify-self:flex-end}.expand-collapse-glyph-container{grid-column:4 / span 1;justify-self:flex-end}:host(:hover) .input-container,:host(:hover) .expand-collapse-glyph-container,:host(:hover) .content{color:${colorNeutralForeground2Hover}}:host([icon]:hover) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Hover}}:host(:active){background-color:${colorNeutralBackground1Selected}}:host(:active) .input-container,:host(:active) .expand-collapse-glyph-container,:host(:active) .content{color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host([disabled]){background-color:${colorNeutralBackgroundDisabled}}:host([disabled]) .content,:host([disabled]) .expand-collapse-glyph-container,:host([disabled]) ::slotted([slot='end']),:host([disabled]) ::slotted([slot='start']){color:${colorNeutralForegroundDisabled}}:host([data-indent]){display:grid}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']){display:grid}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1}:host([data-indent='2'][aria-haspopup='menu']) .expand-collapse-glyph-container{grid-column:5 / span 1}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']) .content,:host([data-indent='1'][role='menuitemradio']) .content{grid-column:auto / span 1}:host([icon]) ::slotted([slot='end']),:host([data-indent='1']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}:host([data-indent='2']){display:grid;grid-template-columns:20px 20px auto auto}:host([data-indent='2']) .content{grid-column:3 / span 1}:host([data-indent='2']) .input-container{grid-column:1 / span 1}:host([data-indent='2']) ::slotted([slot='start']){grid-column:2 / span 1}:host([aria-haspopup='menu']){grid-template-columns:20px auto auto 20px}:host([data-indent='2'][aria-haspopup='menu']){grid-template-columns:20px 20px auto auto 20px}:host([aria-haspopup='menu']) ::slotted([slot='end']){grid-column:3 / span 1;justify-self:flex-end}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}`;
+  :host{grid-template-columns:20px 20px auto 20px;align-items:center;grid-gap:4px;height:32px;background:var(${colorNeutralBackground1});font:var(${fontWeightRegular}) var(${fontSizeBase300}) / var(${lineHeightBase300}) var(${fontFamilyBase});border-radius:var(${borderRadiusMedium});color:var(${colorNeutralForeground2});padding:0 10px;cursor:pointer;overflow:visible;contain:layout}:host(:hover){background:var(${colorNeutralBackground1Hover})}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}.checkbox,.radio{display:none}.input-container,.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']),:host([checked]) .checkbox,:host([checked]) .radio{display:inline-flex;justify-content:center;align-items:center;color:var(${colorNeutralForeground2})}.expand-collapse-glyph-container,::slotted([slot='start']),::slotted([slot='end']){height:32px;font-size:var(${fontSizeBase500});width:fit-content}.input-container{width:20px}::slotted([slot='end']){color:var(${colorNeutralForeground3});font:var(${fontWeightRegular}) var(${fontSizeBase200}) / var(${lineHeightBase200}) var(${fontFamilyBase});white-space:nowrap;grid-column:4 / span 1;justify-self:flex-end}.expand-collapse-glyph-container{grid-column:4 / span 1;justify-self:flex-end}:host(:hover) .input-container,:host(:hover) .expand-collapse-glyph-container,:host(:hover) .content{color:var(${colorNeutralForeground2Hover})}:host([icon]:hover) ::slotted([slot='start']){color:var(${colorCompoundBrandForeground1Hover})}:host(:active){background-color:var(${colorNeutralBackground1Selected})}:host(:active) .input-container,:host(:active) .expand-collapse-glyph-container,:host(:active) .content{color:var(${colorNeutralForeground2Pressed})}:host(:active) ::slotted([slot='start']){color:var(${colorCompoundBrandForeground1Pressed})}:host([disabled]){background-color:var(${colorNeutralBackgroundDisabled})}:host([disabled]) .content,:host([disabled]) .expand-collapse-glyph-container,:host([disabled]) ::slotted([slot='end']),:host([disabled]) ::slotted([slot='start']){color:var(${colorNeutralForegroundDisabled})}:host([data-indent]){display:grid}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']){display:grid}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1}:host([data-indent='2'][aria-haspopup='menu']) .expand-collapse-glyph-container{grid-column:5 / span 1}:host([data-indent='1']) .content{grid-column:2 / span 1}:host([data-indent='1'][role='menuitemcheckbox']) .content,:host([data-indent='1'][role='menuitemradio']) .content{grid-column:auto / span 1}:host([icon]) ::slotted([slot='end']),:host([data-indent='1']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}:host([data-indent='2']){display:grid;grid-template-columns:20px 20px auto auto}:host([data-indent='2']) .content{grid-column:3 / span 1}:host([data-indent='2']) .input-container{grid-column:1 / span 1}:host([data-indent='2']) ::slotted([slot='start']){grid-column:2 / span 1}:host([aria-haspopup='menu']){grid-template-columns:20px auto auto 20px}:host([data-indent='2'][aria-haspopup='menu']){grid-template-columns:20px 20px auto auto 20px}:host([aria-haspopup='menu']) ::slotted([slot='end']){grid-column:3 / span 1;justify-self:flex-end}:host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']){grid-column:4 / span 1;justify-self:flex-end}`;
 
 const definition$d = MenuItem.compose({
   name: `${FluentDesignSystem.prefix}-menu-item`,
@@ -11521,7 +10499,7 @@ const template$c = menuTemplate$1();
 const styles$c = css`
   ${display("flex")}
 
-  :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:4px;row-gap:2px}`;
+  :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:var(${colorNeutralBackground1});border:1px solid var(${colorTransparentStroke});border-radius:var(${borderRadiusMedium});box-shadow:var(${shadow16});padding:4px;row-gap:2px}`;
 
 const definition$c = MenuList.compose({
   name: `${FluentDesignSystem.prefix}-menu-list`,
@@ -11566,17 +10544,17 @@ const ProgressBarValidationState = {
 const styles$b = css`
   ${display("flex")}
 
-  :host{align-items:center;height:2px;overflow-x:hidden;border-radius:${borderRadiusMedium};contain:content}:host([thickness='large']),:host([thickness='large']) .progress,:host([thickness='large']) .determinate{height:4px}:host([shape='square']),:host([shape='square']) .progress,:host([shape='square']) .determinate{border-radius:0}:host([validation-state='error']) .determinate{background-color:${colorPaletteRedBackground3}}:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background:linear-gradient(
-      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}
-    )}:host([validation-state='success']) .determinate{background-color:${colorPaletteGreenBackground3}}:host([validation-state='success']) .indeterminate-indicator-1,:host([validation-state='success']) .indeterminate-indicator-2{background:linear-gradient(
-      to right,${colorPaletteGreenBackground2} 0%,${colorPaletteGreenBackground3} 50%,${colorPaletteGreenBackground2}
-    )}.progress{background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};width:100%;height:2px;display:flex;align-items:center;position:relative}.determinate{background-color:${colorCompoundBrandBackground};border-radius:${borderRadiusMedium};height:2px;transition:all 0.2s ease-in-out;display:flex}.indeterminate-indicator-1{position:absolute;opacity:0;height:100%;background:linear-gradient(
-      to right,${colorBrandBackground2} 0%,${colorCompoundBrandBackground} 50%,${colorBrandBackground2}
-    );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:40%;animation:indeterminate-1 3s infinite}.indeterminate-indicator-2{position:absolute;opacity:0;height:100%;background:linear-gradient(
-      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}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{align-items:center;height:2px;overflow-x:hidden;border-radius:var(${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:var(${colorPaletteRedBackground3})}:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background:linear-gradient(
+      to right,var(${colorPaletteRedBackground2}) 0%,var(${colorPaletteRedBackground3}) 50%,var(${colorPaletteRedBackground2})
+    )}:host([validation-state='warning']) .determinate{background-color:var(${colorPaletteDarkOrangeBackground3})}:host([validation-state='warning']) .indeterminate-indicator-1,:host([validation-state='warning']) .indeterminate-indicator-2{background:linear-gradient(
+      to right,var(${colorPaletteDarkOrangeBackground2}) 0%,var(${colorPaletteDarkOrangeBackground3}) 50%,var(${colorPaletteDarkOrangeBackground2})
+    )}:host([validation-state='success']) .determinate{background-color:var(${colorPaletteGreenBackground3})}:host([validation-state='success']) .indeterminate-indicator-1,:host([validation-state='success']) .indeterminate-indicator-2{background:linear-gradient(
+      to right,var(${colorPaletteGreenBackground2}) 0%,var(${colorPaletteGreenBackground3}) 50%,var(${colorPaletteGreenBackground2})
+    )}.progress{background-color:var(${colorNeutralBackground6});border-radius:var(${borderRadiusMedium});width:100%;height:2px;display:flex;align-items:center;position:relative}.determinate{background-color:var(${colorCompoundBrandBackground});border-radius:var(${borderRadiusMedium});height:2px;transition:all 0.2s ease-in-out;display:flex}.indeterminate-indicator-1{position:absolute;opacity:0;height:100%;background:linear-gradient(
+      to right,var(${colorBrandBackground2}) 0%,var(${colorCompoundBrandBackground}) 50%,var(${colorBrandBackground2})
+    );border-radius:var(${borderRadiusMedium});animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:40%;animation:indeterminate-1 3s infinite}.indeterminate-indicator-2{position:absolute;opacity:0;height:100%;background:linear-gradient(
+      to right,var(${colorBrandBackground2}) 0%,var(${colorCompoundBrandBackground}) 50%,var(${colorBrandBackground2})
+    );border-radius:var(${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}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .progress{background-color:HighlightText}.determinate,:host([validation-state='success']) .determinate,:host([validation-state='warning']) .determinate,:host([validation-state='error']) .determinate,:host([validation-state='success']) ..indeterminate-indicator-1,:host([validation-state='success']) ..indeterminate-indicator-2,:host([validation-state='warning']) .indeterminate-indicator-1,:host([validation-state='warning']) .indeterminate-indicator-2,:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background-color:Highlight}`));
 
 const template$b = progressTemplate({
@@ -11595,7 +10573,7 @@ class Radio extends FASTRadio {}
 const styles$a = css`
   ${display("inline-grid")}
 
-  :host{grid-auto-flow:column;grid-template-columns:max-content;gap:${spacingHorizontalXS};align-items:center;height:32px;cursor:pointer;outline:none;position:relative;user-select:none;color:blue;color:var(--state-color,${colorNeutralForeground3});padding-inline-end:${spacingHorizontalS};--control-border-color:${colorNeutralStrokeAccessible};--checked-indicator-background-color:${colorCompoundBrandForeground1};--state-color:${colorNeutralForeground3}}:host([disabled]){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}.label{cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label__hidden{display:none}.control{box-sizing:border-box;align-items:center;border:1px solid var(--control-border-color,${colorNeutralStrokeAccessible});border-radius:${borderRadiusCircular};display:flex;height:16px;justify-content:center;margin:${spacingVerticalS} ${spacingHorizontalS};position:relative;width:16px;justify-self:center}.checked-indicator{border-radius:${borderRadiusCircular};height:10px;opacity:0;width:10px}:host([aria-checked='false']:hover) .control{color:${colorNeutralForeground2}}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host(:hover) .control{border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .control{border-color:${colorNeutralStrokeAccessiblePressed}}:host([aria-checked='true']) .checked-indicator{opacity:1}:host([aria-checked='true']) .control{border-color:var(--control-border-color,${colorNeutralStrokeAccessible})}:host([aria-checked='true']) .checked-indicator{background-color:var(--checked-indicator-background-color,${colorCompoundBrandForeground1})}:host([aria-checked='true']:hover) .control{border-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:hover) .checked-indicator{background-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:active) .control{border-color:${colorCompoundBrandStrokePressed}}:host([aria-checked='true']:active) .checked-indicator{background:${colorCompoundBrandForeground1Pressed}}:host([disabled]){color:${colorNeutralForegroundDisabled};pointer-events:none}:host([disabled]) .control{pointer-events:none;border-color:${colorNeutralForegroundDisabled}}:host([disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{grid-auto-flow:column;grid-template-columns:max-content;gap:var(${spacingHorizontalXS});align-items:center;height:32px;cursor:pointer;outline:none;position:relative;user-select:none;color:blue;color:var(--state-color,var(${colorNeutralForeground3}));padding-inline-end:var(${spacingHorizontalS});--control-border-color:var(${colorNeutralStrokeAccessible});--checked-indicator-background-color:var(${colorCompoundBrandForeground1});--state-color:var(${colorNeutralForeground3})}:host([disabled]){--control-border-color:var(${colorNeutralForegroundDisabled});--checked-indicator-background-color:var(${colorNeutralForegroundDisabled});--state-color:var(${colorNeutralForegroundDisabled})}.label{cursor:pointer;font-family:var(${fontFamilyBase});font-size:var(${fontSizeBase300});font-weight:var(${fontWeightRegular});line-height:var(${lineHeightBase300})}.label__hidden{display:none}.control{box-sizing:border-box;align-items:center;border:1px solid var(--control-border-color,var(${colorNeutralStrokeAccessible}));border-radius:var(${borderRadiusCircular});display:flex;height:16px;justify-content:center;margin:var(${spacingVerticalS}) var(${spacingHorizontalS});position:relative;width:16px;justify-self:center}.checked-indicator{border-radius:var(${borderRadiusCircular});height:10px;opacity:0;width:10px}:host([aria-checked='false']:hover) .control{color:var(${colorNeutralForeground2})}:host(:focus-visible){border-radius:var(${borderRadiusSmall});box-shadow:0 0 0 3px var(${colorStrokeFocus2});outline:1px solid var(${colorStrokeFocus1})}:host(:hover) .control{border-color:var(${colorNeutralStrokeAccessibleHover})}:host(:active) .control{border-color:var(${colorNeutralStrokeAccessiblePressed})}:host([aria-checked='true']) .checked-indicator{opacity:1}:host([aria-checked='true']) .control{border-color:var(--control-border-color,var(${colorNeutralStrokeAccessible}))}:host([aria-checked='true']) .checked-indicator{background-color:var(--checked-indicator-background-color,var(${colorCompoundBrandForeground1}))}:host([aria-checked='true']:hover) .control{border-color:var(${colorCompoundBrandStrokeHover})}:host([aria-checked='true']:hover) .checked-indicator{background-color:var(${colorCompoundBrandStrokeHover})}:host([aria-checked='true']:active) .control{border-color:var(${colorCompoundBrandStrokePressed})}:host([aria-checked='true']:active) .checked-indicator{background:var(${colorCompoundBrandForeground1Pressed})}:host([disabled]){color:var(${colorNeutralForegroundDisabled});pointer-events:none}:host([disabled]) .control{pointer-events:none;border-color:var(${colorNeutralForegroundDisabled})}:host([disabled]) .checked-indicator{background:var(${colorNeutralForegroundDisabled})}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host .control{border-color:InactiveBorder}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='true']:active) .checked-indicator,:host([aria-checked='true']:hover) .checked-indicator{background-color:Highlight;border-color:ActiveBorder}`));
 
 const template$a = radioTemplate({
@@ -11629,7 +10607,7 @@ __decorateClass$7([attr({
 const styles$9 = css`
   ${display("flex")}
 
-  :host{align-items:flex-start;flex-direction:column;row-gap:${spacingVerticalS}}:host([disabled]) ::slotted([role='radio']){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}::slotted([slot='label']){color:${colorNeutralForeground1};padding:${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};cursor:default}.positioning-region{display:flex;flex-wrap:wrap}:host([orientation='vertical']) .positioning-region{flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']) .positioning-region{flex-direction:row}:host([orientation='horizontal']) ::slotted([role='radio']){padding-inline-end:${spacingHorizontalS}}:host([orientation='horizontal'][stacked]) ::slotted([role='radio']){display:flex;flex-direction:column;padding-inline:${spacingHorizontalS};height:auto;align-items:center;justify-content:center}:host([disabled]) ::slotted([role='radio']){pointer-events:none}`;
+  :host{align-items:flex-start;flex-direction:column;row-gap:var(${spacingVerticalS})}:host([disabled]) ::slotted([role='radio']){--control-border-color:var(${colorNeutralForegroundDisabled});--checked-indicator-background-color:var(${colorNeutralForegroundDisabled});--state-color:var(${colorNeutralForegroundDisabled})}::slotted([slot='label']){color:var(${colorNeutralForeground1});padding:var(${spacingVerticalS}) var(${spacingHorizontalS}) var(${spacingVerticalS}) var(${spacingHorizontalXS});font:var(${fontWeightRegular}) var(${fontSizeBase300}) / var(${lineHeightBase300}) var(${fontFamilyBase});cursor:default}.positioning-region{display:flex;flex-wrap:wrap}:host([orientation='vertical']) .positioning-region{flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']) .positioning-region{flex-direction:row}:host([orientation='horizontal']) ::slotted([role='radio']){padding-inline-end:var(${spacingHorizontalS})}:host([orientation='horizontal'][stacked]) ::slotted([role='radio']){display:flex;flex-direction:column;padding-inline:var(${spacingHorizontalS});height:auto;align-items:center;justify-content:center}:host([disabled]) ::slotted([role='radio']){pointer-events:none}`;
 
 const template$9 = radioGroupTemplate();
 
@@ -11692,9 +10670,9 @@ const SliderSize = {
 };
 
 const styles$8 = css`
-  ${display("inline-grid")} :host{--thumb-size:18px;--thumb-padding:3px;--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:-2px;--track-width:4px;--fast-slider-height:calc(var(--thumb-size) * 10);--slider-direction:90deg;align-items:center;box-sizing:border-box;outline:none;cursor:pointer;user-select:none;border-radius:${borderRadiusSmall};touch-action:pan-y;min-width:calc(var(--thumb-size) * 1px);width:100%}:host([size='small']){--thumb-size:14px;--track-width:2px;--thumb-padding:3px}:host([orientation='vertical']){--slider-direction:0deg;height:160px;min-height:var(--thumb-size);touch-action:pan-x;padding:8px 0;width:auto;min-width:auto}:host([disabled]:hover){cursor:initial}:host(:focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.thumb-cursor:focus{outline:0}.thumb-container{position:absolute;height:var(--thumb-size);width:var(--thumb-size);transition:all 0.2s ease}.thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.5))}:host([size='small']) .thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.35))}:host([orientation='vertical']) .thumb-container{transform:translateX(calc(var(--thumb-translate) * -1.5)) translateY(calc(var(--thumb-size) * -0.5))}:host([orientation='vertical'][size='small']) .thumb-container{transform:translateX(calc(var(--thumb-translate) * -1.35)) translateY(calc(var(--thumb-size) * -0.5))}.thumb-cursor{height:var(--thumb-size);width:var(--thumb-size);background-color:${colorBrandBackground};border-radius:${borderRadiusCircular};box-shadow:inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1},0 0 0 1px ${colorNeutralStroke1}}.thumb-cursor:hover{background-color:${colorCompoundBrandBackgroundHover}}.thumb-cursor:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([disabled]) .thumb-cursor{background-color:${colorNeutralForegroundDisabled};box-shadow:inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1},0 0 0 1px ${colorNeutralStrokeDisabled}}.positioning-region{position:relative;display:grid}:host([orientation='horizontal']) .positioning-region{margin:0 8px;grid-template-rows:var(--thumb-size) var(--thumb-size)}:host([orientation='vertical']) .positioning-region{margin:8px 0;height:100%;grid-template-columns:var(--thumb-size) var(--thumb-size)}.track{align-self:start;position:absolute;background-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};overflow:hidden}:host([step]) .track::after{content:'';position:absolute;border-radius:${borderRadiusMedium};width:100%;inset:0 2px;background-image:repeating-linear-gradient(
-      var(--slider-direction),#0000 0%,#0000 calc(var(--step-rate) - 1px),${colorNeutralBackground1} calc(var(--step-rate) - 1px),${colorNeutralBackground1} var(--step-rate)
-    )}:host([orientation='vertical'][step]) .track::after{inset:-2px 0}:host([disabled]) .track{background-color:${colorNeutralBackgroundDisabled}}:host([orientation='horizontal']) .track{right:var(--track-overhang);left:var(--track-overhang);align-self:start;height:var(--track-width);grid-row:2 / auto}:host([orientation='vertical']) .track{top:var(--track-overhang);bottom:var(--track-overhang);width:var(--track-width);height:100%;grid-column:2 / auto}.track-start{background-color:${colorCompoundBrandBackground};position:absolute;height:100%;left:0;border-radius:${borderRadiusMedium}}:host([disabled]) .track-start{background-color:${colorNeutralForegroundDisabled}}:host(:hover) .track-start{background-color:${colorCompoundBrandBackgroundHover}}:host([disabled]:hover) .track-start{background-color:${colorNeutralForegroundDisabled}}.track-start:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([orientation='vertical']) .track-start{height:auto;width:100%;bottom:0}`.withBehaviors(forcedColorsStylesheetBehavior(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:var(${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 var(${colorStrokeFocus2});outline:1px solid var(${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:var(${colorBrandBackground});border-radius:var(${borderRadiusCircular});box-shadow:inset 0 0 0 var(--thumb-padding) var(${colorNeutralBackground1}),0 0 0 1px var(${colorNeutralStroke1})}.thumb-cursor:hover{background-color:var(${colorCompoundBrandBackgroundHover})}.thumb-cursor:active{background-color:var(${colorCompoundBrandBackgroundPressed})}:host([disabled]) .thumb-cursor{background-color:var(${colorNeutralForegroundDisabled});box-shadow:inset 0 0 0 var(--thumb-padding) var(${colorNeutralBackground1}),0 0 0 1px var(${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:var(${colorNeutralStrokeAccessible});border-radius:var(${borderRadiusMedium});overflow:hidden}:host([step]) .track::after{content:'';position:absolute;border-radius:var(${borderRadiusMedium});width:100%;inset:0 2px;background-image:repeating-linear-gradient(
+      var(--slider-direction),#0000 0%,#0000 calc(var(--step-rate) - 1px),var(${colorNeutralBackground1}) calc(var(--step-rate) - 1px),var(${colorNeutralBackground1}) var(--step-rate)
+    )}:host([orientation='vertical'][step]) .track::after{inset:-2px 0}:host([disabled]) .track{background-color:var(${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:var(${colorCompoundBrandBackground});position:absolute;height:100%;left:0;border-radius:var(${borderRadiusMedium})}:host([disabled]) .track-start{background-color:var(${colorNeutralForegroundDisabled})}:host(:hover) .track-start{background-color:var(${colorCompoundBrandBackgroundHover})}:host([disabled]:hover) .track-start{background-color:var(${colorNeutralForegroundDisabled})}.track-start:active{background-color:var(${colorCompoundBrandBackgroundPressed})}:host([orientation='vertical']) .track-start{height:auto;width:100%;bottom:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .track:hover,.track:active,.track{background:WindowText}.thumb-cursor:hover,.thumb-cursor:active,.thumb-cursor{background:ButtonText}:host(:hover) .track-start,.track-start:active,.track-start{background:Highlight}`));
 
 const template$8 = sliderTemplate({
@@ -11757,7 +10735,7 @@ const template$7 = progressRingTemplate({
 const styles$7 = css`
   ${display("flex")}
 
-  :host{display:flex;align-items:center;height:32px;width:32px;contain:content}:host([size='tiny']){height:20px;width:20px}:host([size='extra-small']){height:24px;width:24px}:host([size='small']){height:28px;width:28px}:host([size='large']){height:36px;width:36px}:host([size='extra-large']){height:40px;width:40px}:host([size='huge']){height:44px;width:44px}.progress{height:100%;width:100%}.background{fill:none;stroke:${colorBrandStroke2};stroke-width:1.5px}:host([appearance='inverted']) .background{stroke:rgba(255,255,255,0.2)}.determinate{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out}:host([appearance='inverted']) .determinite{stroke:${colorNeutralStrokeOnBrand2}}.indeterminate-indicator-1{stroke:${colorBrandStroke1};fill:none;stroke-width:1.5px;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all 0.2s ease-in-out;animation:spin-infinite 3s cubic-bezier(0.53,0.21,0.29,0.67) infinite}:host([appearance='inverted']) .indeterminate-indicator-1{stroke:${colorNeutralStrokeOnBrand2}}@keyframes spin-infinite{0%{stroke-dasharray:0.01px 43.97px;transform:rotate(0deg)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}100%{stroke-dasharray:0.01px 43.97px;transform:rotate(1080deg)}}`;
+  :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:var(${colorBrandStroke2});stroke-width:1.5px}:host([appearance='inverted']) .background{stroke:rgba(255,255,255,0.2)}.determinate{stroke:var(${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:var(${colorNeutralStrokeOnBrand2})}.indeterminate-indicator-1{stroke:var(${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:var(${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)}}`;
 
 const definition$7 = Spinner.compose({
   name: `${FluentDesignSystem.prefix}-spinner`,
@@ -11791,7 +10769,7 @@ const template$6 = switchTemplate({
 const styles$6 = css`
   ${display("inline-flex")}
 
-  :host{align-items:center;flex-direction:row-reverse;outline:none;user-select:none;contain:content}:host([label-position='before']){flex-direction:row}:host([label-position='above']){flex-direction:column;align-items:flex-start}:host([disabled]) .label,:host([readonly]) .label,:host([readonly]) .switch,:host([disabled]) .switch{cursor:not-allowed}.label{position:relative;color:${colorNeutralForeground1};line-height:${lineHeightBase300};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};font-family:${fontFamilyBase};padding:${spacingVerticalXS} ${spacingHorizontalXS};cursor:pointer}.label__hidden{display:none}.switch{display:flex;align-items:center;padding:0 ${spacingHorizontalXXS};box-sizing:border-box;width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};outline:none;cursor:pointer;margin:${spacingVerticalS} ${spacingHorizontalS}}:host(:hover) .switch{background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .switch{border-color:${colorNeutralStrokeAccessiblePressed}}:host([disabled]) .switch,:host([readonly]) .switch{border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host([aria-checked='true']) .switch{background:${colorCompoundBrandBackground}}:host([aria-checked='true']:hover) .switch{background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host([aria-checked='true']:active) .switch{background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host([aria-checked='true'][disabled]) .switch{background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host([aria-checked='true']) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}: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(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :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:var(${colorNeutralForeground1});line-height:var(${lineHeightBase300});font-size:var(${fontSizeBase300});font-weight:var(${fontWeightRegular});font-family:var(${fontFamilyBase});padding:var(${spacingVerticalXS}) var(${spacingHorizontalXS});cursor:pointer}.label__hidden{display:none}.switch{display:flex;align-items:center;padding:0 var(${spacingHorizontalXXS});box-sizing:border-box;width:40px;height:20px;background-color:var(${colorTransparentBackground});border:1px solid var(${colorNeutralStrokeAccessible});border-radius:var(${borderRadiusCircular});outline:none;cursor:pointer;margin:var(${spacingVerticalS}) var(${spacingHorizontalS})}:host(:hover) .switch{background:none;border-color:var(${colorNeutralStrokeAccessibleHover})}:host(:active) .switch{border-color:var(${colorNeutralStrokeAccessiblePressed})}:host([disabled]) .switch,:host([readonly]) .switch{border:1px solid var(${colorNeutralStrokeDisabled});background-color:none;pointer:default}:host([aria-checked='true']) .switch{background:var(${colorCompoundBrandBackground})}:host([aria-checked='true']:hover) .switch{background:var(${colorCompoundBrandBackgroundHover});border-color:var(${colorCompoundBrandBackgroundHover})}:host([aria-checked='true']:active) .switch{background:var(${colorCompoundBrandBackgroundPressed});border-color:var(${colorCompoundBrandBackgroundPressed})}:host([aria-checked='true'][disabled]) .switch{background:var(${colorNeutralBackgroundDisabled});border-color:var(${colorNeutralStrokeDisabled})}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:var(${colorNeutralForeground3});transition-duration:var(${durationNormal});transition-timing-function:var(${curveEasyEase});transition-property:margin-inline-start}:host([aria-checked='true']) .checked-indicator{background-color:var(${colorNeutralForegroundInverted});margin-inline-start:calc(100% - 14px)}:host([aria-checked='true']:hover) .checked-indicator{background:var(${colorNeutralForegroundInvertedHover})}:host([aria-checked='true']:active) .checked-indicator{background:var(${colorNeutralForegroundInvertedPressed})}:host(:hover) .checked-indicator{background-color:var(${colorNeutralForeground3Hover})}:host(:active) .checked-indicator{background-color:var(${colorNeutralForeground3Pressed})}:host([disabled]) .checked-indicator,:host([readonly]) .checked-indicator{background:var(${colorNeutralForegroundDisabled})}:host([aria-checked='true'][disabled]) .checked-indicator{background:var(${colorNeutralForegroundDisabled})}:host(:focus-visible){border-color:var(${colorTransparentStroke});outline:var(${strokeWidthThick}) solid var(${colorTransparentStroke});box-shadow:var(${shadow4}),0 0 0 2px var(${colorStrokeFocus2})}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     .switch{border-color:InactiveBorder}:host([aria-checked='true']) .switch,:host([aria-checked='true']:active) .switch,:host([aria-checked='true']:hover) .switch{background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='true']:hover) .checked-indicator,:host([aria-checked='true']:active) .checked-indicator{background-color:ButtonFace}`));
 
 const definition$6 = Switch.compose({
@@ -11914,7 +10892,7 @@ const template$5 = tabsTemplate({});
 const styles$5 = css`
   ${display("grid")}
 
-  :host{box-sizing:border-box;font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};color:${colorNeutralForeground2};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted(fluent-tab:hover):before{content:unset}:host ::slotted(fluent-tab){border-radius:${borderRadiusMedium}}:host ::slotted(fluent-tab[aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}.tablist{display:grid;grid-template-rows:auto auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end;box-sizing:border-box}::slotted([slot='start']),::slotted([slot='end']){display:flex;align-self:center}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host([orientation='vertical']){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host([orientation='vertical']) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host([orientation='vertical']) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host([orientation='vertical']) ::slotted([slot='end']){grid-row:3}:host([appearance='subtle']) ::slotted(fluent-tab:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted(fluent-tab:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}:host([size='small']) ::slotted(fluent-tab){font-size:${fontSizeBase300};line-height:${lineHeightBase300};padding:${spacingVerticalSNudge} ${spacingHorizontalSNudge}}:host([size='large']) ::slotted(fluent-tab){font-size:${fontSizeBase400};line-height:${lineHeightBase400};padding:${spacingVerticalL} ${spacingHorizontalMNudge}}:host ::slotted(fluent-tab[data-animate='true'])::after{transition-property:transform;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax}}:host ::slotted(fluent-tab)::after{height:${strokeWidthThicker};margin-top:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted(fluent-tab)::after{width:${strokeWidthThicker};height:unset;margin-top:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted(fluent-tab)::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;margin-top:auto}:host([orientation='vertical']) ::slotted(fluent-tab)::before{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-top:auto;transform-origin:left}:host([orientation='vertical']) ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:unset;margin-inline-end:auto;transform-origin:top;width:${strokeWidthThicker}}:host([orientation='vertical']) ::slotted(fluent-tab){align-items:flex-start;grid-column:2;padding-top:${spacingVerticalSNudge};padding-bottom:${spacingVerticalSNudge}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab){padding-top:${spacingVerticalXXS};padding-bottom:${spacingVerticalXXS}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab){padding-top:${spacingVerticalS};padding-bottom:${spacingVerticalS}}:host([size='small']) ::slotted(fluent-tab)::after,:host([size='small']) ::slotted(fluent-tab)::before,:host([size='small']) ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalSNudge};left:${spacingHorizontalSNudge}}:host ::slotted(fluent-tab)::after,:host ::slotted(fluent-tab)::before,:host ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalMNudge};left:${spacingHorizontalMNudge}}:host([size='large']) ::slotted(fluent-tab)::after,:host([size='large']) ::slotted(fluent-tab)::before,:host([size='large']) ::slotted(fluent-tab:hover)::after{right:${spacingHorizontalMNudge};left:${spacingHorizontalMNudge}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalSNudge};bottom:${spacingVerticalSNudge}}:host([orientation='vertical']) ::slotted(fluent-tab)::after,:host([orientation='vertical']) ::slotted(fluent-tab)::before,:host([orientation='vertical']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalS};bottom:${spacingVerticalS}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${spacingVerticalMNudge};bottom:${spacingVerticalMNudge}}`;
+  :host{box-sizing:border-box;font-family:var(${fontFamilyBase});font-size:var(${fontSizeBase300});line-height:var(${lineHeightBase300});color:var(${colorNeutralForeground2});grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}:host([disabled]){cursor:not-allowed;color:var(${colorNeutralForegroundDisabled})}:host([disabled]) ::slotted(fluent-tab){pointer-events:none;cursor:not-allowed;color:var(${colorNeutralForegroundDisabled})}:host([disabled]) ::slotted(fluent-tab:after){background-color:var(${colorNeutralForegroundDisabled})}:host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after{background-color:var(${colorNeutralForegroundDisabled})}:host([disabled]) ::slotted(fluent-tab:hover):before{content:unset}:host ::slotted(fluent-tab){border-radius:var(${borderRadiusMedium})}:host ::slotted(fluent-tab[aria-selected='true'])::before{background-color:var(${colorNeutralForegroundDisabled})}.tablist{display:grid;grid-template-rows:auto auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end;box-sizing:border-box}::slotted([slot='start']),::slotted([slot='end']){display:flex;align-self:center}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host([orientation='vertical']){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host([orientation='vertical']) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host([orientation='vertical']) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host([orientation='vertical']) ::slotted([slot='end']){grid-row:3}:host([appearance='subtle']) ::slotted(fluent-tab:hover){background-color:var(${colorSubtleBackgroundHover});color:var(${colorNeutralForeground1Hover});fill:var(${colorCompoundBrandForeground1Hover})}:host([appearance='subtle']) ::slotted(fluent-tab:active){background-color:var(${colorSubtleBackgroundPressed});fill:var(${colorSubtleBackgroundPressed});color:var(${colorNeutralForeground1})}:host([size='small']) ::slotted(fluent-tab){font-size:var(${fontSizeBase300});line-height:var(${lineHeightBase300});padding:var(${spacingVerticalSNudge}) var(${spacingHorizontalSNudge})}:host([size='large']) ::slotted(fluent-tab){font-size:var(${fontSizeBase400});line-height:var(${lineHeightBase400});padding:var(${spacingVerticalL}) var(${spacingHorizontalMNudge})}:host ::slotted(fluent-tab[data-animate='true'])::after{transition-property:transform;transition-duration:var(${durationSlow});transition-timing-function:var(${curveDecelerateMax})}:host ::slotted(fluent-tab)::after{height:var(${strokeWidthThicker});margin-top:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted(fluent-tab)::after{width:var(${strokeWidthThicker});height:unset;margin-top:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted(fluent-tab)::before{height:var(${strokeWidthThicker});border-radius:var(${borderRadiusCircular});content:'';inset:0;position:absolute;margin-top:auto}:host([orientation='vertical']) ::slotted(fluent-tab)::before{height:unset;width:var(${strokeWidthThicker});margin-inline-end:auto;transform-origin:top}:host ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:var(${strokeWidthThicker});margin-top:auto;transform-origin:left}:host([orientation='vertical']) ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:unset;margin-inline-end:auto;transform-origin:top;width:var(${strokeWidthThicker})}:host([orientation='vertical']) ::slotted(fluent-tab){align-items:flex-start;grid-column:2;padding-top:var(${spacingVerticalSNudge});padding-bottom:var(${spacingVerticalSNudge})}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab){padding-top:var(${spacingVerticalXXS});padding-bottom:var(${spacingVerticalXXS})}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab){padding-top:var(${spacingVerticalS});padding-bottom:var(${spacingVerticalS})}:host([size='small']) ::slotted(fluent-tab)::after,:host([size='small']) ::slotted(fluent-tab)::before,:host([size='small']) ::slotted(fluent-tab:hover)::after{right:var(${spacingHorizontalSNudge});left:var(${spacingHorizontalSNudge})}:host ::slotted(fluent-tab)::after,:host ::slotted(fluent-tab)::before,:host ::slotted(fluent-tab:hover)::after{right:var(${spacingHorizontalMNudge});left:var(${spacingHorizontalMNudge})}:host([size='large']) ::slotted(fluent-tab)::after,:host([size='large']) ::slotted(fluent-tab)::before,:host([size='large']) ::slotted(fluent-tab:hover)::after{right:var(${spacingHorizontalMNudge});left:var(${spacingHorizontalMNudge})}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:var(${spacingVerticalSNudge});bottom:var(${spacingVerticalSNudge})}:host([orientation='vertical']) ::slotted(fluent-tab)::after,:host([orientation='vertical']) ::slotted(fluent-tab)::before,:host([orientation='vertical']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:var(${spacingVerticalS});bottom:var(${spacingVerticalS})}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:var(${spacingVerticalMNudge});bottom:var(${spacingVerticalMNudge})}`;
 
 const definition$5 = Tabs.compose({
   name: `${FluentDesignSystem.prefix}-tabs`,
@@ -11942,7 +10920,7 @@ const template$4 = tabTemplate({});
 const styles$4 = css`
   ${display("inline-flex")}
 
-  :host{position:relative;flex-direction:column;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-size:${fontSizeBase300};color:${colorNeutralForeground2};fill:currentcolor;grid-row:1;padding:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium}}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:${colorNeutralForeground1};font-weight:${fontWeightSemibold}}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:${lineHeightBase300};font-weight:${fontWeightSemibold}}:host([aria-selected='true'])::after{background-color:${colorCompoundBrandStroke};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:${colorNeutralStroke1Hover};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:${colorNeutralForegroundDisabled}}::slotted([slot='start']),::slotted([slot='end']){display:flex}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}:host([disabled]){cursor:not-allowed;fill:${colorNeutralForegroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host{position:relative;flex-direction:column;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:var(${lineHeightBase300});font-family:var(${fontFamilyBase});font-size:var(${fontSizeBase300});color:var(${colorNeutralForeground2});fill:currentcolor;grid-row:1;padding:var(${spacingHorizontalM}) var(${spacingHorizontalMNudge});border-radius:var(${borderRadiusMedium})}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:var(${colorNeutralForeground1});font-weight:var(${fontWeightSemibold})}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:var(${lineHeightBase300});font-weight:var(${fontWeightSemibold})}:host([aria-selected='true'])::after{background-color:var(${colorCompoundBrandStroke});border-radius:var(${borderRadiusCircular});content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:var(${colorNeutralStroke1Hover});border-radius:var(${borderRadiusCircular});content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:var(${colorNeutralForegroundDisabled})}::slotted([slot='start']),::slotted([slot='end']){display:flex}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}:host([disabled]){cursor:not-allowed;fill:var(${colorNeutralForegroundDisabled});color:var(${colorNeutralForegroundDisabled})}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:var(${borderRadiusSmall});box-shadow:0 0 0 3px var(${colorStrokeFocus2});outline:1px solid var(${colorStrokeFocus1})}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([aria-selected='true'])::after{background-color:Highlight}`));
 
 const definition$4 = Tab.compose({
@@ -11958,7 +10936,7 @@ const template$3 = tabPanelTemplate();
 const styles$3 = css`
   ${display("block")}
 
-  :host{box-sizing:border-box;padding:${spacingHorizontalM} ${spacingHorizontalMNudge}}`;
+  :host{box-sizing:border-box;padding:var(${spacingHorizontalM}) var(${spacingHorizontalMNudge})}`;
 
 const definition$3 = TabPanel.compose({
   name: `${FluentDesignSystem.prefix}-tab-panel`,
@@ -12043,7 +11021,7 @@ const template$2 = html`<slot></slot>`;
 const styles$2 = css`
   ${display("inline")}
 
-  :host{contain:content}::slotted(*){font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};text-align:start;white-space:normal;overflow:visible;text-overflow:clip;margin:0;display:inline}:host([nowrap]) ::slotted(*){white-space:nowrap;overflow:hidden}:host([truncate]) ::slotted(*){text-overflow:ellipsis}:host([block]),:host([block]) ::slotted(*){display:block}:host([italic]) ::slotted(*){font-style:italic}:host([underline]) ::slotted(*){text-decoration-line:underline}:host([strikethrough]) ::slotted(*){text-decoration-line:line-through}:host([underline][strikethrough]) ::slotted(*){text-decoration-line:line-through underline}:host([size='100']) ::slotted(*){font-size:${fontSizeBase100};line-height:${lineHeightBase100}}:host([size='200']) ::slotted(*){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='400']) ::slotted(*){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='500']) ::slotted(*){font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([size='600']) ::slotted(*){font-size:${fontSizeBase600};line-height:${lineHeightBase600}}:host([size='700']) ::slotted(*){font-size:${fontSizeHero700};line-height:${lineHeightHero700}}:host([size='800']) ::slotted(*){font-size:${fontSizeHero800};line-height:${lineHeightHero800}}:host([size='900']) ::slotted(*){font-size:${fontSizeHero900};line-height:${lineHeightHero900}}:host([size='1000']) ::slotted(*){font-size:${fontSizeHero1000};line-height:${lineHeightHero1000}}:host([font='monospace']) ::slotted(*){font-family:${fontFamilyMonospace}}:host([font='numeric']) ::slotted(*){font-family:${fontFamilyNumeric}}:host([weight='medium']) ::slotted(*){font-weight:${fontWeightMedium}}:host([weight='semibold']) ::slotted(*){font-weight:${fontWeightSemibold}}:host([weight='bold']) ::slotted(*){font-weight:${fontWeightBold}}:host([align='center']) ::slotted(*){text-align:center}:host([align='end']) ::slotted(*){text-align:end}:host([align='justify']) ::slotted(*){text-align:justify}`;
+  :host{contain:content}::slotted(*){font-family:var(${fontFamilyBase});font-size:var(${fontSizeBase300});line-height:var(${lineHeightBase300});font-weight:var(${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:var(${fontSizeBase100});line-height:var(${lineHeightBase100})}:host([size='200']) ::slotted(*){font-size:var(${fontSizeBase200});line-height:var(${lineHeightBase200})}:host([size='400']) ::slotted(*){font-size:var(${fontSizeBase400});line-height:var(${lineHeightBase400})}:host([size='500']) ::slotted(*){font-size:var(${fontSizeBase500});line-height:var(${lineHeightBase500})}:host([size='600']) ::slotted(*){font-size:var(${fontSizeBase600});line-height:var(${lineHeightBase600})}:host([size='700']) ::slotted(*){font-size:var(${fontSizeHero700});line-height:var(${lineHeightHero700})}:host([size='800']) ::slotted(*){font-size:var(${fontSizeHero800});line-height:var(${lineHeightHero800})}:host([size='900']) ::slotted(*){font-size:var(${fontSizeHero900});line-height:var(${lineHeightHero900})}:host([size='1000']) ::slotted(*){font-size:var(${fontSizeHero1000});line-height:var(${lineHeightHero1000})}:host([font='monospace']) ::slotted(*){font-family:var(${fontFamilyMonospace})}:host([font='numeric']) ::slotted(*){font-family:var(${fontFamilyNumeric})}:host([weight='medium']) ::slotted(*){font-weight:var(${fontWeightMedium})}:host([weight='semibold']) ::slotted(*){font-weight:var(${fontWeightSemibold})}:host([weight='bold']) ::slotted(*){font-weight:var(${fontWeightBold})}:host([align='center']) ::slotted(*){text-align:center}:host([align='end']) ::slotted(*){text-align:end}:host([align='justify']) ::slotted(*){text-align:justify}`;
 
 const definition$2 = Text.compose({
   name: `${FluentDesignSystem.prefix}-text`,
@@ -12082,7 +11060,7 @@ const template$1 = textFieldTemplate();
 const styles$1 = css`
   ${display("block")}
 
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label__hidden{display:none}.root{position:relative;box-sizing:border-box;height:32px;display:inline-flex;align-items:center;flex-direction:row;width:100%;padding:0 ${spacingHorizontalMNudge};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};gap:${spacingHorizontalXXS}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;background:transparent;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
+  :host{font-family:var(${fontFamilyBase});font-size:var(${fontSizeBase300});font-weight:var(${fontWeightRegular});line-height:var(${lineHeightBase300});max-width:400px}.label{display:flex;color:var(${colorNeutralForeground1});padding-bottom:var(${spacingVerticalXS});flex-shrink:0;padding-inline-end:var(${spacingHorizontalXS})}.label__hidden{display:none}.root{position:relative;box-sizing:border-box;height:32px;display:inline-flex;align-items:center;flex-direction:row;width:100%;padding:0 var(${spacingHorizontalMNudge});border:var(${strokeWidthThin}) solid var(${colorNeutralStroke1});border-bottom-color:var(${colorNeutralStrokeAccessible});border-radius:var(${borderRadiusMedium});gap:var(${spacingHorizontalXXS})}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,var(${borderRadiusMedium}));border-radius:0 0 var(${borderRadiusMedium}) var(${borderRadiusMedium});border-bottom:2px solid var(${colorCompoundBrandStroke});clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:var(${durationUltraFast});transition-delay:var(${curveAccelerateMid})}.control{width:100%;height:100%;box-sizing:border-box;color:var(${colorNeutralForeground1});border-radius:var(${borderRadiusMedium});background:var(${colorTransparentBackground});font-family:var(${fontFamilyBase});font-weight:var(${fontWeightRegular});font-size:var(${fontSizeBase300});border:none;background:transparent;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:var(${colorNeutralForeground4})}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:var(${colorNeutralForeground3});font-size:var(${fontSizeBase500})}:host ::slotted([slot='start']){padding-right:var(${spacingHorizontalXXS})}:host ::slotted([slot='end']){padding-left:var(${spacingHorizontalXXS});gap:var(${spacingHorizontalXS})}:host(:hover) .root{border-color:var(${colorNeutralStroke1Hover});border-bottom-color:var(${colorNeutralStrokeAccessibleHover})}:host(:active) .root{border-color:var(${colorNeutralStroke1Pressed})}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:var(${durationNormal});transition-delay:var(${curveDecelerateMid})}:host(:focus-within:active) .root:after{border-bottom-color:var(${colorCompoundBrandStrokePressed})}:host([appearance='outline']:focus-within) .root{border:var(${strokeWidthThin}) solid var(${colorNeutralStroke1})}:host(:focus-within) .control{color:var(${colorNeutralForeground1})}:host([disabled]) .root{background:var(${colorTransparentBackground});border:var(${strokeWidthThin}) solid var(${colorNeutralStrokeDisabled})}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:var(${colorNeutralForegroundDisabled})}::selection{color:var(${colorNeutralForegroundInverted});background-color:var(${colorNeutralBackgroundInverted})}:host([control-size='small']) .control{font-size:var(${fontSizeBase200});font-weight:var(${fontWeightRegular});line-height:var(${lineHeightBase200})}:host([control-size='small']) .root{height:24px;gap:var(${spacingHorizontalXXS});padding:0 var(${spacingHorizontalSNudge})}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:var(${fontSizeBase400})}:host([control-size='large']) .control{font-size:var(${fontSizeBase400});font-weight:var(${fontWeightRegular});line-height:var(${lineHeightBase400})}:host([control-size='large']) .root{height:40px;gap:var(${spacingHorizontalS});padding:0 var(${spacingHorizontalM})}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:var(${fontSizeBase600})}:host([appearance='underline']) .root{background:var(${colorTransparentBackground});border:0;border-radius:0;border-bottom:var(${strokeWidthThin}) solid var(${colorNeutralStrokeAccessible})}:host([appearance='underline']:hover) .root{border-bottom-color:var(${colorNeutralStrokeAccessibleHover})}:host([appearance='underline']:active) .root{border-bottom-color:var(${colorNeutralStrokeAccessiblePressed})}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:var(${colorNeutralStrokeAccessiblePressed})}:host([appearance='underline'][disabled]) .root{border-bottom-color:var(${colorNeutralStrokeDisabled})}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:var(${strokeWidthThin}) solid var(${colorTransparentStroke});box-shadow:var(${shadow2})}:host([appearance='filled-lighter']) .root{background:var(${colorNeutralBackground1})}:host([appearance='filled-darker']) .root{background:var(${colorNeutralBackground3})}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:var(${colorTransparentStrokeInteractive})}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:var(${colorTransparentStrokeInteractive});background:var(${colorNeutralBackground3})}`;
 
 const definition$1 = TextInput.compose({
   name: `${FluentDesignSystem.prefix}-text-input`,
@@ -12167,7 +11145,7 @@ const template = buttonTemplate$1();
 const styles = css`
   ${styles$p}
 
-  :host([aria-pressed="true"]) .control{border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host([aria-pressed='true']:hover) .control{border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host([aria-pressed='true']:active) .control{border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host([aria-pressed='true'][appearance='primary']) .control{border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host([aria-pressed='true'][appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([aria-pressed='true'][appearance='primary']:active) .control{background-color:${colorBrandBackgroundPressed}}:host([aria-pressed='true'][appearance='subtle']) .control{border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([aria-pressed='true'][appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host([aria-pressed='true'][appearance='subtle']:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host([aria-pressed='true'][appearance='outline']) .control,:host([aria-pressed='true'][appearance='transparent']) .control{background-color:${colorTransparentBackgroundSelected}}:host([aria-pressed='true'][appearance='outline']:hover) .control,:host([aria-pressed='true'][appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([aria-pressed='true'][appearance='outline']:active) .control,:host([aria-pressed='true'][appearance='transparent']:active) .control{background-color:${colorTransparentBackgroundPressed}}:host([aria-pressed='true'][appearance='transparent']) .control{border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host([aria-pressed='true'][appearance='transparent']:hover) .control{color:${colorNeutralForeground2BrandHover}}:host([aria-pressed='true'][appearance='transparent']:active) .control{color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+  :host([aria-pressed="true"]) .control{border-color:var(${colorNeutralStroke1});background-color:var(${colorNeutralBackground1Selected});color:var(${colorNeutralForeground1});border-width:var(${strokeWidthThin})}:host([aria-pressed='true']:hover) .control{border-color:var(${colorNeutralStroke1Hover});background-color:var(${colorNeutralBackground1Hover})}:host([aria-pressed='true']:active) .control{border-color:var(${colorNeutralStroke1Pressed});background-color:var(${colorNeutralBackground1Pressed})}:host([aria-pressed='true'][appearance='primary']) .control{border-color:transparent;background-color:var(${colorBrandBackgroundSelected});color:var(${colorNeutralForegroundOnBrand})}:host([aria-pressed='true'][appearance='primary']:hover) .control{background-color:var(${colorBrandBackgroundHover})}:host([aria-pressed='true'][appearance='primary']:active) .control{background-color:var(${colorBrandBackgroundPressed})}:host([aria-pressed='true'][appearance='subtle']) .control{border-color:transparent;background-color:var(${colorSubtleBackgroundSelected});color:var(${colorNeutralForeground2Selected})}:host([aria-pressed='true'][appearance='subtle']:hover) .control{background-color:var(${colorSubtleBackgroundHover});color:var(${colorNeutralForeground2Hover})}:host([aria-pressed='true'][appearance='subtle']:active) .control{background-color:var(${colorSubtleBackgroundPressed});color:var(${colorNeutralForeground2Pressed})}:host([aria-pressed='true'][appearance='outline']) .control,:host([aria-pressed='true'][appearance='transparent']) .control{background-color:var(${colorTransparentBackgroundSelected})}:host([aria-pressed='true'][appearance='outline']:hover) .control,:host([aria-pressed='true'][appearance='transparent']:hover) .control{background-color:var(${colorTransparentBackgroundHover})}:host([aria-pressed='true'][appearance='outline']:active) .control,:host([aria-pressed='true'][appearance='transparent']:active) .control{background-color:var(${colorTransparentBackgroundPressed})}:host([aria-pressed='true'][appearance='transparent']) .control{border-color:transparent;color:var(${colorNeutralForeground2BrandSelected})}:host([aria-pressed='true'][appearance='transparent']:hover) .control{color:var(${colorNeutralForeground2BrandHover})}:host([aria-pressed='true'][appearance='transparent']:active) .control{color:var(${colorNeutralForeground2BrandPressed})}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([aria-pressed='true']) .control,:host([aria-pressed='true'][appearance='primary']) .control,:host([aria-pressed='true'][appearance='subtle']) .control,:host([aria-pressed='true'][appearance='outline']) .control,:host([aria-pressed='true'][appearance='transparent']) .control,:host([aria-pressed='true'][appearance='transparent']) .control{background:SelectedItem;color:SelectedItemText}`));
 
 const definition = ToggleButton.compose({
@@ -12182,12 +11160,12 @@ const definition = ToggleButton.compose({
 const tokenNames = Object.keys(tokens);
 const setTheme = theme => {
   for (const t of tokenNames) {
-    tokens[t].withDefault(theme[t]);
+    document.body.style.setProperty(tokens[t], theme[t]);
   }
 };
 const setThemeFor = (element, theme) => {
   for (const t of tokenNames) {
-    tokens[t].setValueFor(element, theme[t]);
+    element.style.setProperty(tokens[t], theme[t]);
   }
 };