@fluentui/web-components 3.0.0-beta.21 → 3.0.0-beta.22

package/dist/web-components.js

@@ -1,3 +1,9 @@
+const FluentDesignSystem = Object.freeze({
+  prefix: "fluent",
+  shadowRootMode: "open",
+  registry: customElements
+});
+
 let kernelMode;
 const kernelAttr = "fast-kernel";
 try {
@@ -3519,8 +3525,8 @@ class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
   }
 }
 const forcedColorsStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(forced-colors)"));
-const darkModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: dark)"));
-const lightModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: light)"));
+MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: dark)"));
+MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: light)"));
 
 class StartEnd {}
 function endSlotTemplate(options) {
@@ -3592,239 +3598,9 @@ __decorateClass$q([attr({
 })], AccordionItem.prototype, "expandIconPosition", 2);
 applyMixins(AccordionItem, StartEnd);
 
-const AccordionExpandMode = {
-  single: "single",
-  multi: "multi"
-};
-
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
-  return result;
-};
-class Accordion extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.expandmode = AccordionExpandMode.multi;
-    this.activeItemIndex = 0;
-    this.change = () => {
-      this.$emit("change", this.activeid);
-    };
-    this.setItems = () => {
-      if (this.slottedAccordionItems.length === 0) {
-        return;
-      }
-      const children = Array.from(this.children);
-      this.removeItemListeners(children);
-      children.forEach(child => Observable.getNotifier(child).subscribe(this, "disabled"));
-      this.accordionItems = children.filter(child => !child.hasAttribute("disabled"));
-      this.accordionIds = this.getItemIds();
-      this.accordionItems.forEach((item, index) => {
-        if (item instanceof AccordionItem) {
-          item.addEventListener("click", this.activeItemChange);
-          item.addEventListener("keydown", this.handleItemKeyDown);
-          item.addEventListener("focus", this.handleItemFocus);
-          Observable.getNotifier(item).subscribe(this, "expanded");
-        }
-        const itemId = this.accordionIds[index];
-        item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
-        this.activeid = this.accordionIds[this.activeItemIndex];
-      });
-      if (this.isSingleExpandMode()) {
-        const expandedItem = this.findExpandedItem();
-        this.setSingleExpandMode(expandedItem);
-      }
-    };
-    this.removeItemListeners = oldValue => {
-      oldValue.forEach((item, index) => {
-        Observable.getNotifier(item).unsubscribe(this, "disabled");
-        Observable.getNotifier(item).unsubscribe(this, "expanded");
-        item.removeEventListener("click", this.activeItemChange);
-        item.removeEventListener("keydown", this.handleItemKeyDown);
-        item.removeEventListener("focus", this.handleItemFocus);
-      });
-    };
-    this.activeItemChange = event => {
-      if (event.defaultPrevented || event.target !== event.currentTarget) {
-        return;
-      }
-      event.preventDefault();
-      this.handleExpandedChange(event.target);
-    };
-    this.handleExpandedChange = item => {
-      if (item instanceof AccordionItem) {
-        this.activeid = item.getAttribute("id");
-        if (!this.isSingleExpandMode()) {
-          item.expanded = !item.expanded;
-          this.activeItemIndex = this.accordionItems.indexOf(item);
-        } else {
-          this.setSingleExpandMode(item);
-        }
-        this.change();
-      }
-    };
-    this.handleItemKeyDown = event => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      this.accordionIds = this.getItemIds();
-      switch (event.key) {
-        case keyArrowUp:
-          event.preventDefault();
-          this.adjust(-1);
-          break;
-        case keyArrowDown:
-          event.preventDefault();
-          this.adjust(1);
-          break;
-        case keyHome:
-          this.activeItemIndex = 0;
-          this.focusItem();
-          break;
-        case keyEnd:
-          this.activeItemIndex = this.accordionItems.length - 1;
-          this.focusItem();
-          break;
-      }
-    };
-    this.handleItemFocus = event => {
-      if (event.target === event.currentTarget) {
-        const focusedItem = event.target;
-        const focusedIndex = this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem);
-        if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
-          this.activeItemIndex = focusedIndex;
-          this.activeid = this.accordionIds[this.activeItemIndex];
-        }
-      }
-    };
-  }
-  expandmodeChanged(prev, next) {
-    if (!this.$fastController.isConnected) {
-      return;
-    }
-    const expandedItem = this.findExpandedItem();
-    if (!expandedItem) {
-      return;
-    }
-    if (next !== AccordionExpandMode.single) {
-      expandedItem?.expandbutton.removeAttribute("aria-disabled");
-    } else {
-      this.setSingleExpandMode(expandedItem);
-    }
-  }
-  /**
-   * @internal
-   */
-  slottedAccordionItemsChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected) {
-      this.setItems();
-    }
-  }
-  /**
-   * @internal
-   */
-  handleChange(source, propertyName) {
-    if (propertyName === "disabled") {
-      this.setItems();
-    } else if (propertyName === "expanded") {
-      if (source.expanded && this.isSingleExpandMode()) {
-        this.setSingleExpandMode(source);
-      }
-    }
-  }
-  findExpandedItem() {
-    if (this.accordionItems.length === 0) {
-      return null;
-    }
-    return this.accordionItems.find(item => item instanceof AccordionItem && item.expanded) ?? this.accordionItems[0];
-  }
-  setSingleExpandMode(expandedItem) {
-    if (this.accordionItems.length === 0) {
-      return;
-    }
-    const currentItems = Array.from(this.accordionItems);
-    this.activeItemIndex = currentItems.indexOf(expandedItem);
-    currentItems.forEach((item, index) => {
-      if (item instanceof AccordionItem) {
-        if (this.activeItemIndex === index) {
-          item.expanded = true;
-          item.expandbutton.setAttribute("aria-disabled", "true");
-        } else {
-          item.expanded = false;
-          if (!item.hasAttribute("disabled")) {
-            item.expandbutton.removeAttribute("aria-disabled");
-          }
-        }
-      }
-    });
-  }
-  getItemIds() {
-    return this.slottedAccordionItems.map(accordionItem => {
-      return accordionItem.id;
-    });
-  }
-  isSingleExpandMode() {
-    return this.expandmode === AccordionExpandMode.single;
-  }
-  adjust(adjustment) {
-    this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
-    this.focusItem();
-  }
-  focusItem() {
-    const element = this.accordionItems[this.activeItemIndex];
-    if (element instanceof AccordionItem) {
-      element.expandbutton.focus();
-    }
-  }
-}
-__decorateClass$p([attr({
-  attribute: "expand-mode"
-})], Accordion.prototype, "expandmode", 2);
-__decorateClass$p([observable], Accordion.prototype, "slottedAccordionItems", 2);
-
-function accordionTemplate() {
-  return html`<template><slot ${slotted({
-    property: "slottedAccordionItems",
-    filter: elements()
-  })}></slot></template>`;
-}
-const template$s = accordionTemplate();
-
-const styles$r = css`
-  ${display("flex")}
-
-  :host{flex-direction:column;width:100%;contain:content}`;
-
-const FluentDesignSystem = Object.freeze({
-  prefix: "fluent",
-  shadowRootMode: "open",
-  registry: customElements
-});
-
-const definition$s = Accordion.compose({
-  name: `${FluentDesignSystem.prefix}-accordion`,
-  template: template$s,
-  styles: styles$r
-});
-
-const AccordionItemSize = {
-  small: "small",
-  medium: "medium",
-  large: "large",
-  extraLarge: "extra-large"
-};
-const AccordionItemExpandIconPosition = {
-  start: "start",
-  end: "end"
-};
-
 const colorNeutralForeground1 = "var(--colorNeutralForeground1)";
 const colorNeutralForeground1Hover = "var(--colorNeutralForeground1Hover)";
 const colorNeutralForeground1Pressed = "var(--colorNeutralForeground1Pressed)";
-const colorNeutralForeground1Selected = "var(--colorNeutralForeground1Selected)";
 const colorNeutralForeground2 = "var(--colorNeutralForeground2)";
 const colorNeutralForeground2Hover = "var(--colorNeutralForeground2Hover)";
 const colorNeutralForeground2Pressed = "var(--colorNeutralForeground2Pressed)";
@@ -3835,20 +3611,8 @@ const colorNeutralForeground2BrandSelected = "var(--colorNeutralForeground2Brand
 const colorNeutralForeground3 = "var(--colorNeutralForeground3)";
 const colorNeutralForeground3Hover = "var(--colorNeutralForeground3Hover)";
 const colorNeutralForeground3Pressed = "var(--colorNeutralForeground3Pressed)";
-const colorNeutralForeground3Selected = "var(--colorNeutralForeground3Selected)";
-const colorNeutralForeground3BrandHover = "var(--colorNeutralForeground3BrandHover)";
-const colorNeutralForeground3BrandPressed = "var(--colorNeutralForeground3BrandPressed)";
-const colorNeutralForeground3BrandSelected = "var(--colorNeutralForeground3BrandSelected)";
 const colorNeutralForeground4 = "var(--colorNeutralForeground4)";
 const colorNeutralForegroundDisabled = "var(--colorNeutralForegroundDisabled)";
-const colorBrandForegroundLink = "var(--colorBrandForegroundLink)";
-const colorBrandForegroundLinkHover = "var(--colorBrandForegroundLinkHover)";
-const colorBrandForegroundLinkPressed = "var(--colorBrandForegroundLinkPressed)";
-const colorBrandForegroundLinkSelected = "var(--colorBrandForegroundLinkSelected)";
-const colorNeutralForeground2Link = "var(--colorNeutralForeground2Link)";
-const colorNeutralForeground2LinkHover = "var(--colorNeutralForeground2LinkHover)";
-const colorNeutralForeground2LinkPressed = "var(--colorNeutralForeground2LinkPressed)";
-const colorNeutralForeground2LinkSelected = "var(--colorNeutralForeground2LinkSelected)";
 const colorCompoundBrandForeground1 = "var(--colorCompoundBrandForeground1)";
 const colorCompoundBrandForeground1Hover = "var(--colorCompoundBrandForeground1Hover)";
 const colorCompoundBrandForeground1Pressed = "var(--colorCompoundBrandForeground1Pressed)";
@@ -3856,74 +3620,29 @@ const colorNeutralForegroundOnBrand = "var(--colorNeutralForegroundOnBrand)";
 const colorNeutralForegroundInverted = "var(--colorNeutralForegroundInverted)";
 const colorNeutralForegroundInvertedHover = "var(--colorNeutralForegroundInvertedHover)";
 const colorNeutralForegroundInvertedPressed = "var(--colorNeutralForegroundInvertedPressed)";
-const colorNeutralForegroundInvertedSelected = "var(--colorNeutralForegroundInvertedSelected)";
-const colorNeutralForegroundInverted2 = "var(--colorNeutralForegroundInverted2)";
 const colorNeutralForegroundStaticInverted = "var(--colorNeutralForegroundStaticInverted)";
-const colorNeutralForegroundInvertedLink = "var(--colorNeutralForegroundInvertedLink)";
-const colorNeutralForegroundInvertedLinkHover = "var(--colorNeutralForegroundInvertedLinkHover)";
-const colorNeutralForegroundInvertedLinkPressed = "var(--colorNeutralForegroundInvertedLinkPressed)";
-const colorNeutralForegroundInvertedLinkSelected = "var(--colorNeutralForegroundInvertedLinkSelected)";
-const colorNeutralForegroundInvertedDisabled = "var(--colorNeutralForegroundInvertedDisabled)";
 const colorBrandForeground1 = "var(--colorBrandForeground1)";
 const colorBrandForeground2 = "var(--colorBrandForeground2)";
-const colorBrandForeground2Hover = "var(--colorBrandForeground2Hover)";
-const colorBrandForeground2Pressed = "var(--colorBrandForeground2Pressed)";
 const colorNeutralForeground1Static = "var(--colorNeutralForeground1Static)";
-const colorBrandForegroundInverted = "var(--colorBrandForegroundInverted)";
-const colorBrandForegroundInvertedHover = "var(--colorBrandForegroundInvertedHover)";
-const colorBrandForegroundInvertedPressed = "var(--colorBrandForegroundInvertedPressed)";
-const colorBrandForegroundOnLight = "var(--colorBrandForegroundOnLight)";
-const colorBrandForegroundOnLightHover = "var(--colorBrandForegroundOnLightHover)";
-const colorBrandForegroundOnLightPressed = "var(--colorBrandForegroundOnLightPressed)";
-const colorBrandForegroundOnLightSelected = "var(--colorBrandForegroundOnLightSelected)";
 const colorNeutralBackground1 = "var(--colorNeutralBackground1)";
 const colorNeutralBackground1Hover = "var(--colorNeutralBackground1Hover)";
 const colorNeutralBackground1Pressed = "var(--colorNeutralBackground1Pressed)";
 const colorNeutralBackground1Selected = "var(--colorNeutralBackground1Selected)";
-const colorNeutralBackground2 = "var(--colorNeutralBackground2)";
-const colorNeutralBackground2Hover = "var(--colorNeutralBackground2Hover)";
-const colorNeutralBackground2Pressed = "var(--colorNeutralBackground2Pressed)";
-const colorNeutralBackground2Selected = "var(--colorNeutralBackground2Selected)";
 const colorNeutralBackground3 = "var(--colorNeutralBackground3)";
-const colorNeutralBackground3Hover = "var(--colorNeutralBackground3Hover)";
-const colorNeutralBackground3Pressed = "var(--colorNeutralBackground3Pressed)";
-const colorNeutralBackground3Selected = "var(--colorNeutralBackground3Selected)";
 const colorNeutralBackground4 = "var(--colorNeutralBackground4)";
-const colorNeutralBackground4Hover = "var(--colorNeutralBackground4Hover)";
-const colorNeutralBackground4Pressed = "var(--colorNeutralBackground4Pressed)";
-const colorNeutralBackground4Selected = "var(--colorNeutralBackground4Selected)";
 const colorNeutralBackground5 = "var(--colorNeutralBackground5)";
-const colorNeutralBackground5Hover = "var(--colorNeutralBackground5Hover)";
-const colorNeutralBackground5Pressed = "var(--colorNeutralBackground5Pressed)";
-const colorNeutralBackground5Selected = "var(--colorNeutralBackground5Selected)";
 const colorNeutralBackground6 = "var(--colorNeutralBackground6)";
 const colorNeutralBackgroundInverted = "var(--colorNeutralBackgroundInverted)";
-const colorNeutralBackgroundStatic = "var(--colorNeutralBackgroundStatic)";
-const colorNeutralBackgroundAlpha = "var(--colorNeutralBackgroundAlpha)";
-const colorNeutralBackgroundAlpha2 = "var(--colorNeutralBackgroundAlpha2)";
 const colorSubtleBackground = "var(--colorSubtleBackground)";
 const colorSubtleBackgroundHover = "var(--colorSubtleBackgroundHover)";
 const colorSubtleBackgroundPressed = "var(--colorSubtleBackgroundPressed)";
 const colorSubtleBackgroundSelected = "var(--colorSubtleBackgroundSelected)";
-const colorSubtleBackgroundLightAlphaHover = "var(--colorSubtleBackgroundLightAlphaHover)";
-const colorSubtleBackgroundLightAlphaPressed = "var(--colorSubtleBackgroundLightAlphaPressed)";
-const colorSubtleBackgroundLightAlphaSelected = "var(--colorSubtleBackgroundLightAlphaSelected)";
-const colorSubtleBackgroundInverted = "var(--colorSubtleBackgroundInverted)";
-const colorSubtleBackgroundInvertedHover = "var(--colorSubtleBackgroundInvertedHover)";
-const colorSubtleBackgroundInvertedPressed = "var(--colorSubtleBackgroundInvertedPressed)";
-const colorSubtleBackgroundInvertedSelected = "var(--colorSubtleBackgroundInvertedSelected)";
 const colorTransparentBackground = "var(--colorTransparentBackground)";
 const colorTransparentBackgroundHover = "var(--colorTransparentBackgroundHover)";
 const colorTransparentBackgroundPressed = "var(--colorTransparentBackgroundPressed)";
 const colorTransparentBackgroundSelected = "var(--colorTransparentBackgroundSelected)";
 const colorNeutralBackgroundDisabled = "var(--colorNeutralBackgroundDisabled)";
-const colorNeutralBackgroundInvertedDisabled = "var(--colorNeutralBackgroundInvertedDisabled)";
-const colorNeutralStencil1 = "var(--colorNeutralStencil1)";
-const colorNeutralStencil2 = "var(--colorNeutralStencil2)";
-const colorNeutralStencil1Alpha = "var(--colorNeutralStencil1Alpha)";
-const colorNeutralStencil2Alpha = "var(--colorNeutralStencil2Alpha)";
 const colorBackgroundOverlay = "var(--colorBackgroundOverlay)";
-const colorScrollbarOverlay = "var(--colorScrollbarOverlay)";
 const colorBrandBackground = "var(--colorBrandBackground)";
 const colorBrandBackgroundHover = "var(--colorBrandBackgroundHover)";
 const colorBrandBackgroundPressed = "var(--colorBrandBackgroundPressed)";
@@ -3933,242 +3652,107 @@ const colorCompoundBrandBackgroundHover = "var(--colorCompoundBrandBackgroundHov
 const colorCompoundBrandBackgroundPressed = "var(--colorCompoundBrandBackgroundPressed)";
 const colorBrandBackgroundStatic = "var(--colorBrandBackgroundStatic)";
 const colorBrandBackground2 = "var(--colorBrandBackground2)";
-const colorBrandBackground2Hover = "var(--colorBrandBackground2Hover)";
-const colorBrandBackground2Pressed = "var(--colorBrandBackground2Pressed)";
-const colorBrandBackground3Static = "var(--colorBrandBackground3Static)";
-const colorBrandBackground4Static = "var(--colorBrandBackground4Static)";
-const colorBrandBackgroundInverted = "var(--colorBrandBackgroundInverted)";
-const colorBrandBackgroundInvertedHover = "var(--colorBrandBackgroundInvertedHover)";
-const colorBrandBackgroundInvertedPressed = "var(--colorBrandBackgroundInvertedPressed)";
-const colorBrandBackgroundInvertedSelected = "var(--colorBrandBackgroundInvertedSelected)";
-const colorNeutralCardBackground = "var(--colorNeutralCardBackground)";
-const colorNeutralCardBackgroundHover = "var(--colorNeutralCardBackgroundHover)";
-const colorNeutralCardBackgroundPressed = "var(--colorNeutralCardBackgroundPressed)";
-const colorNeutralCardBackgroundSelected = "var(--colorNeutralCardBackgroundSelected)";
-const colorNeutralCardBackgroundDisabled = "var(--colorNeutralCardBackgroundDisabled)";
 const colorNeutralStrokeAccessible = "var(--colorNeutralStrokeAccessible)";
 const colorNeutralStrokeAccessibleHover = "var(--colorNeutralStrokeAccessibleHover)";
 const colorNeutralStrokeAccessiblePressed = "var(--colorNeutralStrokeAccessiblePressed)";
-const colorNeutralStrokeAccessibleSelected = "var(--colorNeutralStrokeAccessibleSelected)";
 const colorNeutralStroke1 = "var(--colorNeutralStroke1)";
 const colorNeutralStroke1Hover = "var(--colorNeutralStroke1Hover)";
 const colorNeutralStroke1Pressed = "var(--colorNeutralStroke1Pressed)";
-const colorNeutralStroke1Selected = "var(--colorNeutralStroke1Selected)";
 const colorNeutralStroke2 = "var(--colorNeutralStroke2)";
 const colorNeutralStroke3 = "var(--colorNeutralStroke3)";
-const colorNeutralStrokeSubtle = "var(--colorNeutralStrokeSubtle)";
-const colorNeutralStrokeOnBrand = "var(--colorNeutralStrokeOnBrand)";
 const colorNeutralStrokeOnBrand2 = "var(--colorNeutralStrokeOnBrand2)";
-const colorNeutralStrokeOnBrand2Hover = "var(--colorNeutralStrokeOnBrand2Hover)";
-const colorNeutralStrokeOnBrand2Pressed = "var(--colorNeutralStrokeOnBrand2Pressed)";
-const colorNeutralStrokeOnBrand2Selected = "var(--colorNeutralStrokeOnBrand2Selected)";
 const colorBrandStroke1 = "var(--colorBrandStroke1)";
 const colorBrandStroke2 = "var(--colorBrandStroke2)";
-const colorBrandStroke2Hover = "var(--colorBrandStroke2Hover)";
-const colorBrandStroke2Pressed = "var(--colorBrandStroke2Pressed)";
-const colorBrandStroke2Contrast = "var(--colorBrandStroke2Contrast)";
 const colorCompoundBrandStroke = "var(--colorCompoundBrandStroke)";
 const colorCompoundBrandStrokeHover = "var(--colorCompoundBrandStrokeHover)";
 const colorCompoundBrandStrokePressed = "var(--colorCompoundBrandStrokePressed)";
 const colorNeutralStrokeDisabled = "var(--colorNeutralStrokeDisabled)";
-const colorNeutralStrokeInvertedDisabled = "var(--colorNeutralStrokeInvertedDisabled)";
 const colorTransparentStroke = "var(--colorTransparentStroke)";
 const colorTransparentStrokeInteractive = "var(--colorTransparentStrokeInteractive)";
-const colorTransparentStrokeDisabled = "var(--colorTransparentStrokeDisabled)";
-const colorNeutralStrokeAlpha = "var(--colorNeutralStrokeAlpha)";
-const colorNeutralStrokeAlpha2 = "var(--colorNeutralStrokeAlpha2)";
 const colorStrokeFocus1 = "var(--colorStrokeFocus1)";
 const colorStrokeFocus2 = "var(--colorStrokeFocus2)";
-const colorNeutralShadowAmbient = "var(--colorNeutralShadowAmbient)";
-const colorNeutralShadowKey = "var(--colorNeutralShadowKey)";
-const colorNeutralShadowAmbientLighter = "var(--colorNeutralShadowAmbientLighter)";
-const colorNeutralShadowKeyLighter = "var(--colorNeutralShadowKeyLighter)";
-const colorNeutralShadowAmbientDarker = "var(--colorNeutralShadowAmbientDarker)";
-const colorNeutralShadowKeyDarker = "var(--colorNeutralShadowKeyDarker)";
-const colorBrandShadowAmbient = "var(--colorBrandShadowAmbient)";
-const colorBrandShadowKey = "var(--colorBrandShadowKey)";
 const colorPaletteRedBackground1 = "var(--colorPaletteRedBackground1)";
 const colorPaletteRedBackground2 = "var(--colorPaletteRedBackground2)";
 const colorPaletteRedBackground3 = "var(--colorPaletteRedBackground3)";
-const colorPaletteRedBorderActive = "var(--colorPaletteRedBorderActive)";
 const colorPaletteRedBorder1 = "var(--colorPaletteRedBorder1)";
-const colorPaletteRedBorder2 = "var(--colorPaletteRedBorder2)";
 const colorPaletteRedForeground1 = "var(--colorPaletteRedForeground1)";
 const colorPaletteRedForeground2 = "var(--colorPaletteRedForeground2)";
 const colorPaletteRedForeground3 = "var(--colorPaletteRedForeground3)";
-const colorPaletteRedForegroundInverted = "var(--colorPaletteRedForegroundInverted)";
 const colorPaletteGreenBackground1 = "var(--colorPaletteGreenBackground1)";
 const colorPaletteGreenBackground2 = "var(--colorPaletteGreenBackground2)";
 const colorPaletteGreenBackground3 = "var(--colorPaletteGreenBackground3)";
-const colorPaletteGreenBorderActive = "var(--colorPaletteGreenBorderActive)";
-const colorPaletteGreenBorder1 = "var(--colorPaletteGreenBorder1)";
 const colorPaletteGreenBorder2 = "var(--colorPaletteGreenBorder2)";
 const colorPaletteGreenForeground1 = "var(--colorPaletteGreenForeground1)";
 const colorPaletteGreenForeground2 = "var(--colorPaletteGreenForeground2)";
 const colorPaletteGreenForeground3 = "var(--colorPaletteGreenForeground3)";
-const colorPaletteGreenForegroundInverted = "var(--colorPaletteGreenForegroundInverted)";
 const colorPaletteDarkOrangeBackground1 = "var(--colorPaletteDarkOrangeBackground1)";
 const colorPaletteDarkOrangeBackground2 = "var(--colorPaletteDarkOrangeBackground2)";
 const colorPaletteDarkOrangeBackground3 = "var(--colorPaletteDarkOrangeBackground3)";
-const colorPaletteDarkOrangeBorderActive = "var(--colorPaletteDarkOrangeBorderActive)";
 const colorPaletteDarkOrangeBorder1 = "var(--colorPaletteDarkOrangeBorder1)";
-const colorPaletteDarkOrangeBorder2 = "var(--colorPaletteDarkOrangeBorder2)";
 const colorPaletteDarkOrangeForeground1 = "var(--colorPaletteDarkOrangeForeground1)";
-const colorPaletteDarkOrangeForeground2 = "var(--colorPaletteDarkOrangeForeground2)";
 const colorPaletteDarkOrangeForeground3 = "var(--colorPaletteDarkOrangeForeground3)";
 const colorPaletteYellowBackground1 = "var(--colorPaletteYellowBackground1)";
-const colorPaletteYellowBackground2 = "var(--colorPaletteYellowBackground2)";
 const colorPaletteYellowBackground3 = "var(--colorPaletteYellowBackground3)";
-const colorPaletteYellowBorderActive = "var(--colorPaletteYellowBorderActive)";
 const colorPaletteYellowBorder1 = "var(--colorPaletteYellowBorder1)";
-const colorPaletteYellowBorder2 = "var(--colorPaletteYellowBorder2)";
-const colorPaletteYellowForeground1 = "var(--colorPaletteYellowForeground1)";
 const colorPaletteYellowForeground2 = "var(--colorPaletteYellowForeground2)";
-const colorPaletteYellowForeground3 = "var(--colorPaletteYellowForeground3)";
-const colorPaletteYellowForegroundInverted = "var(--colorPaletteYellowForegroundInverted)";
-const colorPaletteBerryBackground1 = "var(--colorPaletteBerryBackground1)";
-const colorPaletteBerryBackground2 = "var(--colorPaletteBerryBackground2)";
-const colorPaletteBerryBackground3 = "var(--colorPaletteBerryBackground3)";
-const colorPaletteBerryBorderActive = "var(--colorPaletteBerryBorderActive)";
-const colorPaletteBerryBorder1 = "var(--colorPaletteBerryBorder1)";
-const colorPaletteBerryBorder2 = "var(--colorPaletteBerryBorder2)";
-const colorPaletteBerryForeground1 = "var(--colorPaletteBerryForeground1)";
-const colorPaletteBerryForeground2 = "var(--colorPaletteBerryForeground2)";
-const colorPaletteBerryForeground3 = "var(--colorPaletteBerryForeground3)";
-const colorPaletteMarigoldBackground1 = "var(--colorPaletteMarigoldBackground1)";
 const colorPaletteMarigoldBackground2 = "var(--colorPaletteMarigoldBackground2)";
-const colorPaletteMarigoldBackground3 = "var(--colorPaletteMarigoldBackground3)";
-const colorPaletteMarigoldBorderActive = "var(--colorPaletteMarigoldBorderActive)";
-const colorPaletteMarigoldBorder1 = "var(--colorPaletteMarigoldBorder1)";
-const colorPaletteMarigoldBorder2 = "var(--colorPaletteMarigoldBorder2)";
-const colorPaletteMarigoldForeground1 = "var(--colorPaletteMarigoldForeground1)";
 const colorPaletteMarigoldForeground2 = "var(--colorPaletteMarigoldForeground2)";
-const colorPaletteMarigoldForeground3 = "var(--colorPaletteMarigoldForeground3)";
-const colorPaletteLightGreenBackground1 = "var(--colorPaletteLightGreenBackground1)";
-const colorPaletteLightGreenBackground2 = "var(--colorPaletteLightGreenBackground2)";
-const colorPaletteLightGreenBackground3 = "var(--colorPaletteLightGreenBackground3)";
-const colorPaletteLightGreenBorderActive = "var(--colorPaletteLightGreenBorderActive)";
-const colorPaletteLightGreenBorder1 = "var(--colorPaletteLightGreenBorder1)";
-const colorPaletteLightGreenBorder2 = "var(--colorPaletteLightGreenBorder2)";
-const colorPaletteLightGreenForeground1 = "var(--colorPaletteLightGreenForeground1)";
-const colorPaletteLightGreenForeground2 = "var(--colorPaletteLightGreenForeground2)";
-const colorPaletteLightGreenForeground3 = "var(--colorPaletteLightGreenForeground3)";
 const colorPaletteAnchorBackground2 = "var(--colorPaletteAnchorBackground2)";
-const colorPaletteAnchorBorderActive = "var(--colorPaletteAnchorBorderActive)";
 const colorPaletteAnchorForeground2 = "var(--colorPaletteAnchorForeground2)";
 const colorPaletteBeigeBackground2 = "var(--colorPaletteBeigeBackground2)";
-const colorPaletteBeigeBorderActive = "var(--colorPaletteBeigeBorderActive)";
 const colorPaletteBeigeForeground2 = "var(--colorPaletteBeigeForeground2)";
 const colorPaletteBlueBackground2 = "var(--colorPaletteBlueBackground2)";
-const colorPaletteBlueBorderActive = "var(--colorPaletteBlueBorderActive)";
 const colorPaletteBlueForeground2 = "var(--colorPaletteBlueForeground2)";
 const colorPaletteBrassBackground2 = "var(--colorPaletteBrassBackground2)";
-const colorPaletteBrassBorderActive = "var(--colorPaletteBrassBorderActive)";
 const colorPaletteBrassForeground2 = "var(--colorPaletteBrassForeground2)";
 const colorPaletteBrownBackground2 = "var(--colorPaletteBrownBackground2)";
-const colorPaletteBrownBorderActive = "var(--colorPaletteBrownBorderActive)";
 const colorPaletteBrownForeground2 = "var(--colorPaletteBrownForeground2)";
 const colorPaletteCornflowerBackground2 = "var(--colorPaletteCornflowerBackground2)";
-const colorPaletteCornflowerBorderActive = "var(--colorPaletteCornflowerBorderActive)";
 const colorPaletteCornflowerForeground2 = "var(--colorPaletteCornflowerForeground2)";
 const colorPaletteCranberryBackground2 = "var(--colorPaletteCranberryBackground2)";
-const colorPaletteCranberryBorderActive = "var(--colorPaletteCranberryBorderActive)";
 const colorPaletteCranberryForeground2 = "var(--colorPaletteCranberryForeground2)";
 const colorPaletteDarkGreenBackground2 = "var(--colorPaletteDarkGreenBackground2)";
-const colorPaletteDarkGreenBorderActive = "var(--colorPaletteDarkGreenBorderActive)";
 const colorPaletteDarkGreenForeground2 = "var(--colorPaletteDarkGreenForeground2)";
 const colorPaletteDarkRedBackground2 = "var(--colorPaletteDarkRedBackground2)";
-const colorPaletteDarkRedBorderActive = "var(--colorPaletteDarkRedBorderActive)";
 const colorPaletteDarkRedForeground2 = "var(--colorPaletteDarkRedForeground2)";
 const colorPaletteForestBackground2 = "var(--colorPaletteForestBackground2)";
-const colorPaletteForestBorderActive = "var(--colorPaletteForestBorderActive)";
 const colorPaletteForestForeground2 = "var(--colorPaletteForestForeground2)";
 const colorPaletteGoldBackground2 = "var(--colorPaletteGoldBackground2)";
-const colorPaletteGoldBorderActive = "var(--colorPaletteGoldBorderActive)";
 const colorPaletteGoldForeground2 = "var(--colorPaletteGoldForeground2)";
 const colorPaletteGrapeBackground2 = "var(--colorPaletteGrapeBackground2)";
-const colorPaletteGrapeBorderActive = "var(--colorPaletteGrapeBorderActive)";
 const colorPaletteGrapeForeground2 = "var(--colorPaletteGrapeForeground2)";
 const colorPaletteLavenderBackground2 = "var(--colorPaletteLavenderBackground2)";
-const colorPaletteLavenderBorderActive = "var(--colorPaletteLavenderBorderActive)";
 const colorPaletteLavenderForeground2 = "var(--colorPaletteLavenderForeground2)";
 const colorPaletteLightTealBackground2 = "var(--colorPaletteLightTealBackground2)";
-const colorPaletteLightTealBorderActive = "var(--colorPaletteLightTealBorderActive)";
 const colorPaletteLightTealForeground2 = "var(--colorPaletteLightTealForeground2)";
 const colorPaletteLilacBackground2 = "var(--colorPaletteLilacBackground2)";
-const colorPaletteLilacBorderActive = "var(--colorPaletteLilacBorderActive)";
 const colorPaletteLilacForeground2 = "var(--colorPaletteLilacForeground2)";
 const colorPaletteMagentaBackground2 = "var(--colorPaletteMagentaBackground2)";
-const colorPaletteMagentaBorderActive = "var(--colorPaletteMagentaBorderActive)";
 const colorPaletteMagentaForeground2 = "var(--colorPaletteMagentaForeground2)";
 const colorPaletteMinkBackground2 = "var(--colorPaletteMinkBackground2)";
-const colorPaletteMinkBorderActive = "var(--colorPaletteMinkBorderActive)";
 const colorPaletteMinkForeground2 = "var(--colorPaletteMinkForeground2)";
 const colorPaletteNavyBackground2 = "var(--colorPaletteNavyBackground2)";
-const colorPaletteNavyBorderActive = "var(--colorPaletteNavyBorderActive)";
 const colorPaletteNavyForeground2 = "var(--colorPaletteNavyForeground2)";
 const colorPalettePeachBackground2 = "var(--colorPalettePeachBackground2)";
-const colorPalettePeachBorderActive = "var(--colorPalettePeachBorderActive)";
 const colorPalettePeachForeground2 = "var(--colorPalettePeachForeground2)";
 const colorPalettePinkBackground2 = "var(--colorPalettePinkBackground2)";
-const colorPalettePinkBorderActive = "var(--colorPalettePinkBorderActive)";
 const colorPalettePinkForeground2 = "var(--colorPalettePinkForeground2)";
 const colorPalettePlatinumBackground2 = "var(--colorPalettePlatinumBackground2)";
-const colorPalettePlatinumBorderActive = "var(--colorPalettePlatinumBorderActive)";
 const colorPalettePlatinumForeground2 = "var(--colorPalettePlatinumForeground2)";
 const colorPalettePlumBackground2 = "var(--colorPalettePlumBackground2)";
-const colorPalettePlumBorderActive = "var(--colorPalettePlumBorderActive)";
 const colorPalettePlumForeground2 = "var(--colorPalettePlumForeground2)";
 const colorPalettePumpkinBackground2 = "var(--colorPalettePumpkinBackground2)";
-const colorPalettePumpkinBorderActive = "var(--colorPalettePumpkinBorderActive)";
 const colorPalettePumpkinForeground2 = "var(--colorPalettePumpkinForeground2)";
 const colorPalettePurpleBackground2 = "var(--colorPalettePurpleBackground2)";
-const colorPalettePurpleBorderActive = "var(--colorPalettePurpleBorderActive)";
 const colorPalettePurpleForeground2 = "var(--colorPalettePurpleForeground2)";
 const colorPaletteRoyalBlueBackground2 = "var(--colorPaletteRoyalBlueBackground2)";
-const colorPaletteRoyalBlueBorderActive = "var(--colorPaletteRoyalBlueBorderActive)";
 const colorPaletteRoyalBlueForeground2 = "var(--colorPaletteRoyalBlueForeground2)";
 const colorPaletteSeafoamBackground2 = "var(--colorPaletteSeafoamBackground2)";
-const colorPaletteSeafoamBorderActive = "var(--colorPaletteSeafoamBorderActive)";
 const colorPaletteSeafoamForeground2 = "var(--colorPaletteSeafoamForeground2)";
 const colorPaletteSteelBackground2 = "var(--colorPaletteSteelBackground2)";
-const colorPaletteSteelBorderActive = "var(--colorPaletteSteelBorderActive)";
 const colorPaletteSteelForeground2 = "var(--colorPaletteSteelForeground2)";
 const colorPaletteTealBackground2 = "var(--colorPaletteTealBackground2)";
-const colorPaletteTealBorderActive = "var(--colorPaletteTealBorderActive)";
 const colorPaletteTealForeground2 = "var(--colorPaletteTealForeground2)";
-const colorStatusSuccessBackground1 = "var(--colorStatusSuccessBackground1)";
-const colorStatusSuccessBackground2 = "var(--colorStatusSuccessBackground2)";
-const colorStatusSuccessBackground3 = "var(--colorStatusSuccessBackground3)";
-const colorStatusSuccessForeground1 = "var(--colorStatusSuccessForeground1)";
-const colorStatusSuccessForeground2 = "var(--colorStatusSuccessForeground2)";
-const colorStatusSuccessForeground3 = "var(--colorStatusSuccessForeground3)";
-const colorStatusSuccessForegroundInverted = "var(--colorStatusSuccessForegroundInverted)";
-const colorStatusSuccessBorderActive = "var(--colorStatusSuccessBorderActive)";
-const colorStatusSuccessBorder1 = "var(--colorStatusSuccessBorder1)";
-const colorStatusSuccessBorder2 = "var(--colorStatusSuccessBorder2)";
-const colorStatusWarningBackground1 = "var(--colorStatusWarningBackground1)";
-const colorStatusWarningBackground2 = "var(--colorStatusWarningBackground2)";
-const colorStatusWarningBackground3 = "var(--colorStatusWarningBackground3)";
-const colorStatusWarningForeground1 = "var(--colorStatusWarningForeground1)";
-const colorStatusWarningForeground2 = "var(--colorStatusWarningForeground2)";
-const colorStatusWarningForeground3 = "var(--colorStatusWarningForeground3)";
-const colorStatusWarningForegroundInverted = "var(--colorStatusWarningForegroundInverted)";
-const colorStatusWarningBorderActive = "var(--colorStatusWarningBorderActive)";
-const colorStatusWarningBorder1 = "var(--colorStatusWarningBorder1)";
-const colorStatusWarningBorder2 = "var(--colorStatusWarningBorder2)";
-const colorStatusDangerBackground1 = "var(--colorStatusDangerBackground1)";
-const colorStatusDangerBackground2 = "var(--colorStatusDangerBackground2)";
-const colorStatusDangerBackground3 = "var(--colorStatusDangerBackground3)";
-const colorStatusDangerBackground3Hover = "var(--colorStatusDangerBackground3Hover)";
-const colorStatusDangerBackground3Pressed = "var(--colorStatusDangerBackground3Pressed)";
-const colorStatusDangerForeground1 = "var(--colorStatusDangerForeground1)";
-const colorStatusDangerForeground2 = "var(--colorStatusDangerForeground2)";
-const colorStatusDangerForeground3 = "var(--colorStatusDangerForeground3)";
-const colorStatusDangerForegroundInverted = "var(--colorStatusDangerForegroundInverted)";
-const colorStatusDangerBorderActive = "var(--colorStatusDangerBorderActive)";
-const colorStatusDangerBorder1 = "var(--colorStatusDangerBorder1)";
-const colorStatusDangerBorder2 = "var(--colorStatusDangerBorder2)";
 const borderRadiusNone = "var(--borderRadiusNone)";
 const borderRadiusSmall = "var(--borderRadiusSmall)";
 const borderRadiusMedium = "var(--borderRadiusMedium)";
@@ -4208,17 +3792,10 @@ const shadow8 = "var(--shadow8)";
 const shadow16 = "var(--shadow16)";
 const shadow28 = "var(--shadow28)";
 const shadow64 = "var(--shadow64)";
-const shadow2Brand = "var(--shadow2Brand)";
-const shadow4Brand = "var(--shadow4Brand)";
-const shadow8Brand = "var(--shadow8Brand)";
-const shadow16Brand = "var(--shadow16Brand)";
-const shadow28Brand = "var(--shadow28Brand)";
-const shadow64Brand = "var(--shadow64Brand)";
 const strokeWidthThin = "var(--strokeWidthThin)";
 const strokeWidthThick = "var(--strokeWidthThick)";
 const strokeWidthThicker = "var(--strokeWidthThicker)";
 const strokeWidthThickest = "var(--strokeWidthThickest)";
-const spacingHorizontalNone = "var(--spacingHorizontalNone)";
 const spacingHorizontalXXS = "var(--spacingHorizontalXXS)";
 const spacingHorizontalXS = "var(--spacingHorizontalXS)";
 const spacingHorizontalSNudge = "var(--spacingHorizontalSNudge)";
@@ -4226,25 +3803,17 @@ const spacingHorizontalS = "var(--spacingHorizontalS)";
 const spacingHorizontalMNudge = "var(--spacingHorizontalMNudge)";
 const spacingHorizontalM = "var(--spacingHorizontalM)";
 const spacingHorizontalL = "var(--spacingHorizontalL)";
-const spacingHorizontalXL = "var(--spacingHorizontalXL)";
 const spacingHorizontalXXL = "var(--spacingHorizontalXXL)";
-const spacingHorizontalXXXL = "var(--spacingHorizontalXXXL)";
-const spacingVerticalNone = "var(--spacingVerticalNone)";
 const spacingVerticalXXS = "var(--spacingVerticalXXS)";
 const spacingVerticalXS = "var(--spacingVerticalXS)";
 const spacingVerticalSNudge = "var(--spacingVerticalSNudge)";
 const spacingVerticalS = "var(--spacingVerticalS)";
 const spacingVerticalMNudge = "var(--spacingVerticalMNudge)";
-const spacingVerticalM = "var(--spacingVerticalM)";
 const spacingVerticalL = "var(--spacingVerticalL)";
-const spacingVerticalXL = "var(--spacingVerticalXL)";
 const spacingVerticalXXL = "var(--spacingVerticalXXL)";
-const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
 const durationUltraFast = "var(--durationUltraFast)";
 const durationFaster = "var(--durationFaster)";
-const durationFast = "var(--durationFast)";
 const durationNormal = "var(--durationNormal)";
-const durationGentle = "var(--durationGentle)";
 const durationSlow = "var(--durationSlow)";
 const durationSlower = "var(--durationSlower)";
 const durationUltraSlow = "var(--durationUltraSlow)";
@@ -4258,447 +3827,7 @@ const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 const curveEasyEase = "var(--curveEasyEase)";
 const curveLinear = "var(--curveLinear)";
 
-var tokens = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    colorNeutralForeground1: colorNeutralForeground1,
-    colorNeutralForeground1Hover: colorNeutralForeground1Hover,
-    colorNeutralForeground1Pressed: colorNeutralForeground1Pressed,
-    colorNeutralForeground1Selected: colorNeutralForeground1Selected,
-    colorNeutralForeground2: colorNeutralForeground2,
-    colorNeutralForeground2Hover: colorNeutralForeground2Hover,
-    colorNeutralForeground2Pressed: colorNeutralForeground2Pressed,
-    colorNeutralForeground2Selected: colorNeutralForeground2Selected,
-    colorNeutralForeground2BrandHover: colorNeutralForeground2BrandHover,
-    colorNeutralForeground2BrandPressed: colorNeutralForeground2BrandPressed,
-    colorNeutralForeground2BrandSelected: colorNeutralForeground2BrandSelected,
-    colorNeutralForeground3: colorNeutralForeground3,
-    colorNeutralForeground3Hover: colorNeutralForeground3Hover,
-    colorNeutralForeground3Pressed: colorNeutralForeground3Pressed,
-    colorNeutralForeground3Selected: colorNeutralForeground3Selected,
-    colorNeutralForeground3BrandHover: colorNeutralForeground3BrandHover,
-    colorNeutralForeground3BrandPressed: colorNeutralForeground3BrandPressed,
-    colorNeutralForeground3BrandSelected: colorNeutralForeground3BrandSelected,
-    colorNeutralForeground4: colorNeutralForeground4,
-    colorNeutralForegroundDisabled: colorNeutralForegroundDisabled,
-    colorBrandForegroundLink: colorBrandForegroundLink,
-    colorBrandForegroundLinkHover: colorBrandForegroundLinkHover,
-    colorBrandForegroundLinkPressed: colorBrandForegroundLinkPressed,
-    colorBrandForegroundLinkSelected: colorBrandForegroundLinkSelected,
-    colorNeutralForeground2Link: colorNeutralForeground2Link,
-    colorNeutralForeground2LinkHover: colorNeutralForeground2LinkHover,
-    colorNeutralForeground2LinkPressed: colorNeutralForeground2LinkPressed,
-    colorNeutralForeground2LinkSelected: colorNeutralForeground2LinkSelected,
-    colorCompoundBrandForeground1: colorCompoundBrandForeground1,
-    colorCompoundBrandForeground1Hover: colorCompoundBrandForeground1Hover,
-    colorCompoundBrandForeground1Pressed: colorCompoundBrandForeground1Pressed,
-    colorNeutralForegroundOnBrand: colorNeutralForegroundOnBrand,
-    colorNeutralForegroundInverted: colorNeutralForegroundInverted,
-    colorNeutralForegroundInvertedHover: colorNeutralForegroundInvertedHover,
-    colorNeutralForegroundInvertedPressed: colorNeutralForegroundInvertedPressed,
-    colorNeutralForegroundInvertedSelected: colorNeutralForegroundInvertedSelected,
-    colorNeutralForegroundInverted2: colorNeutralForegroundInverted2,
-    colorNeutralForegroundStaticInverted: colorNeutralForegroundStaticInverted,
-    colorNeutralForegroundInvertedLink: colorNeutralForegroundInvertedLink,
-    colorNeutralForegroundInvertedLinkHover: colorNeutralForegroundInvertedLinkHover,
-    colorNeutralForegroundInvertedLinkPressed: colorNeutralForegroundInvertedLinkPressed,
-    colorNeutralForegroundInvertedLinkSelected: colorNeutralForegroundInvertedLinkSelected,
-    colorNeutralForegroundInvertedDisabled: colorNeutralForegroundInvertedDisabled,
-    colorBrandForeground1: colorBrandForeground1,
-    colorBrandForeground2: colorBrandForeground2,
-    colorBrandForeground2Hover: colorBrandForeground2Hover,
-    colorBrandForeground2Pressed: colorBrandForeground2Pressed,
-    colorNeutralForeground1Static: colorNeutralForeground1Static,
-    colorBrandForegroundInverted: colorBrandForegroundInverted,
-    colorBrandForegroundInvertedHover: colorBrandForegroundInvertedHover,
-    colorBrandForegroundInvertedPressed: colorBrandForegroundInvertedPressed,
-    colorBrandForegroundOnLight: colorBrandForegroundOnLight,
-    colorBrandForegroundOnLightHover: colorBrandForegroundOnLightHover,
-    colorBrandForegroundOnLightPressed: colorBrandForegroundOnLightPressed,
-    colorBrandForegroundOnLightSelected: colorBrandForegroundOnLightSelected,
-    colorNeutralBackground1: colorNeutralBackground1,
-    colorNeutralBackground1Hover: colorNeutralBackground1Hover,
-    colorNeutralBackground1Pressed: colorNeutralBackground1Pressed,
-    colorNeutralBackground1Selected: colorNeutralBackground1Selected,
-    colorNeutralBackground2: colorNeutralBackground2,
-    colorNeutralBackground2Hover: colorNeutralBackground2Hover,
-    colorNeutralBackground2Pressed: colorNeutralBackground2Pressed,
-    colorNeutralBackground2Selected: colorNeutralBackground2Selected,
-    colorNeutralBackground3: colorNeutralBackground3,
-    colorNeutralBackground3Hover: colorNeutralBackground3Hover,
-    colorNeutralBackground3Pressed: colorNeutralBackground3Pressed,
-    colorNeutralBackground3Selected: colorNeutralBackground3Selected,
-    colorNeutralBackground4: colorNeutralBackground4,
-    colorNeutralBackground4Hover: colorNeutralBackground4Hover,
-    colorNeutralBackground4Pressed: colorNeutralBackground4Pressed,
-    colorNeutralBackground4Selected: colorNeutralBackground4Selected,
-    colorNeutralBackground5: colorNeutralBackground5,
-    colorNeutralBackground5Hover: colorNeutralBackground5Hover,
-    colorNeutralBackground5Pressed: colorNeutralBackground5Pressed,
-    colorNeutralBackground5Selected: colorNeutralBackground5Selected,
-    colorNeutralBackground6: colorNeutralBackground6,
-    colorNeutralBackgroundInverted: colorNeutralBackgroundInverted,
-    colorNeutralBackgroundStatic: colorNeutralBackgroundStatic,
-    colorNeutralBackgroundAlpha: colorNeutralBackgroundAlpha,
-    colorNeutralBackgroundAlpha2: colorNeutralBackgroundAlpha2,
-    colorSubtleBackground: colorSubtleBackground,
-    colorSubtleBackgroundHover: colorSubtleBackgroundHover,
-    colorSubtleBackgroundPressed: colorSubtleBackgroundPressed,
-    colorSubtleBackgroundSelected: colorSubtleBackgroundSelected,
-    colorSubtleBackgroundLightAlphaHover: colorSubtleBackgroundLightAlphaHover,
-    colorSubtleBackgroundLightAlphaPressed: colorSubtleBackgroundLightAlphaPressed,
-    colorSubtleBackgroundLightAlphaSelected: colorSubtleBackgroundLightAlphaSelected,
-    colorSubtleBackgroundInverted: colorSubtleBackgroundInverted,
-    colorSubtleBackgroundInvertedHover: colorSubtleBackgroundInvertedHover,
-    colorSubtleBackgroundInvertedPressed: colorSubtleBackgroundInvertedPressed,
-    colorSubtleBackgroundInvertedSelected: colorSubtleBackgroundInvertedSelected,
-    colorTransparentBackground: colorTransparentBackground,
-    colorTransparentBackgroundHover: colorTransparentBackgroundHover,
-    colorTransparentBackgroundPressed: colorTransparentBackgroundPressed,
-    colorTransparentBackgroundSelected: colorTransparentBackgroundSelected,
-    colorNeutralBackgroundDisabled: colorNeutralBackgroundDisabled,
-    colorNeutralBackgroundInvertedDisabled: colorNeutralBackgroundInvertedDisabled,
-    colorNeutralStencil1: colorNeutralStencil1,
-    colorNeutralStencil2: colorNeutralStencil2,
-    colorNeutralStencil1Alpha: colorNeutralStencil1Alpha,
-    colorNeutralStencil2Alpha: colorNeutralStencil2Alpha,
-    colorBackgroundOverlay: colorBackgroundOverlay,
-    colorScrollbarOverlay: colorScrollbarOverlay,
-    colorBrandBackground: colorBrandBackground,
-    colorBrandBackgroundHover: colorBrandBackgroundHover,
-    colorBrandBackgroundPressed: colorBrandBackgroundPressed,
-    colorBrandBackgroundSelected: colorBrandBackgroundSelected,
-    colorCompoundBrandBackground: colorCompoundBrandBackground,
-    colorCompoundBrandBackgroundHover: colorCompoundBrandBackgroundHover,
-    colorCompoundBrandBackgroundPressed: colorCompoundBrandBackgroundPressed,
-    colorBrandBackgroundStatic: colorBrandBackgroundStatic,
-    colorBrandBackground2: colorBrandBackground2,
-    colorBrandBackground2Hover: colorBrandBackground2Hover,
-    colorBrandBackground2Pressed: colorBrandBackground2Pressed,
-    colorBrandBackground3Static: colorBrandBackground3Static,
-    colorBrandBackground4Static: colorBrandBackground4Static,
-    colorBrandBackgroundInverted: colorBrandBackgroundInverted,
-    colorBrandBackgroundInvertedHover: colorBrandBackgroundInvertedHover,
-    colorBrandBackgroundInvertedPressed: colorBrandBackgroundInvertedPressed,
-    colorBrandBackgroundInvertedSelected: colorBrandBackgroundInvertedSelected,
-    colorNeutralCardBackground: colorNeutralCardBackground,
-    colorNeutralCardBackgroundHover: colorNeutralCardBackgroundHover,
-    colorNeutralCardBackgroundPressed: colorNeutralCardBackgroundPressed,
-    colorNeutralCardBackgroundSelected: colorNeutralCardBackgroundSelected,
-    colorNeutralCardBackgroundDisabled: colorNeutralCardBackgroundDisabled,
-    colorNeutralStrokeAccessible: colorNeutralStrokeAccessible,
-    colorNeutralStrokeAccessibleHover: colorNeutralStrokeAccessibleHover,
-    colorNeutralStrokeAccessiblePressed: colorNeutralStrokeAccessiblePressed,
-    colorNeutralStrokeAccessibleSelected: colorNeutralStrokeAccessibleSelected,
-    colorNeutralStroke1: colorNeutralStroke1,
-    colorNeutralStroke1Hover: colorNeutralStroke1Hover,
-    colorNeutralStroke1Pressed: colorNeutralStroke1Pressed,
-    colorNeutralStroke1Selected: colorNeutralStroke1Selected,
-    colorNeutralStroke2: colorNeutralStroke2,
-    colorNeutralStroke3: colorNeutralStroke3,
-    colorNeutralStrokeSubtle: colorNeutralStrokeSubtle,
-    colorNeutralStrokeOnBrand: colorNeutralStrokeOnBrand,
-    colorNeutralStrokeOnBrand2: colorNeutralStrokeOnBrand2,
-    colorNeutralStrokeOnBrand2Hover: colorNeutralStrokeOnBrand2Hover,
-    colorNeutralStrokeOnBrand2Pressed: colorNeutralStrokeOnBrand2Pressed,
-    colorNeutralStrokeOnBrand2Selected: colorNeutralStrokeOnBrand2Selected,
-    colorBrandStroke1: colorBrandStroke1,
-    colorBrandStroke2: colorBrandStroke2,
-    colorBrandStroke2Hover: colorBrandStroke2Hover,
-    colorBrandStroke2Pressed: colorBrandStroke2Pressed,
-    colorBrandStroke2Contrast: colorBrandStroke2Contrast,
-    colorCompoundBrandStroke: colorCompoundBrandStroke,
-    colorCompoundBrandStrokeHover: colorCompoundBrandStrokeHover,
-    colorCompoundBrandStrokePressed: colorCompoundBrandStrokePressed,
-    colorNeutralStrokeDisabled: colorNeutralStrokeDisabled,
-    colorNeutralStrokeInvertedDisabled: colorNeutralStrokeInvertedDisabled,
-    colorTransparentStroke: colorTransparentStroke,
-    colorTransparentStrokeInteractive: colorTransparentStrokeInteractive,
-    colorTransparentStrokeDisabled: colorTransparentStrokeDisabled,
-    colorNeutralStrokeAlpha: colorNeutralStrokeAlpha,
-    colorNeutralStrokeAlpha2: colorNeutralStrokeAlpha2,
-    colorStrokeFocus1: colorStrokeFocus1,
-    colorStrokeFocus2: colorStrokeFocus2,
-    colorNeutralShadowAmbient: colorNeutralShadowAmbient,
-    colorNeutralShadowKey: colorNeutralShadowKey,
-    colorNeutralShadowAmbientLighter: colorNeutralShadowAmbientLighter,
-    colorNeutralShadowKeyLighter: colorNeutralShadowKeyLighter,
-    colorNeutralShadowAmbientDarker: colorNeutralShadowAmbientDarker,
-    colorNeutralShadowKeyDarker: colorNeutralShadowKeyDarker,
-    colorBrandShadowAmbient: colorBrandShadowAmbient,
-    colorBrandShadowKey: colorBrandShadowKey,
-    colorPaletteRedBackground1: colorPaletteRedBackground1,
-    colorPaletteRedBackground2: colorPaletteRedBackground2,
-    colorPaletteRedBackground3: colorPaletteRedBackground3,
-    colorPaletteRedBorderActive: colorPaletteRedBorderActive,
-    colorPaletteRedBorder1: colorPaletteRedBorder1,
-    colorPaletteRedBorder2: colorPaletteRedBorder2,
-    colorPaletteRedForeground1: colorPaletteRedForeground1,
-    colorPaletteRedForeground2: colorPaletteRedForeground2,
-    colorPaletteRedForeground3: colorPaletteRedForeground3,
-    colorPaletteRedForegroundInverted: colorPaletteRedForegroundInverted,
-    colorPaletteGreenBackground1: colorPaletteGreenBackground1,
-    colorPaletteGreenBackground2: colorPaletteGreenBackground2,
-    colorPaletteGreenBackground3: colorPaletteGreenBackground3,
-    colorPaletteGreenBorderActive: colorPaletteGreenBorderActive,
-    colorPaletteGreenBorder1: colorPaletteGreenBorder1,
-    colorPaletteGreenBorder2: colorPaletteGreenBorder2,
-    colorPaletteGreenForeground1: colorPaletteGreenForeground1,
-    colorPaletteGreenForeground2: colorPaletteGreenForeground2,
-    colorPaletteGreenForeground3: colorPaletteGreenForeground3,
-    colorPaletteGreenForegroundInverted: colorPaletteGreenForegroundInverted,
-    colorPaletteDarkOrangeBackground1: colorPaletteDarkOrangeBackground1,
-    colorPaletteDarkOrangeBackground2: colorPaletteDarkOrangeBackground2,
-    colorPaletteDarkOrangeBackground3: colorPaletteDarkOrangeBackground3,
-    colorPaletteDarkOrangeBorderActive: colorPaletteDarkOrangeBorderActive,
-    colorPaletteDarkOrangeBorder1: colorPaletteDarkOrangeBorder1,
-    colorPaletteDarkOrangeBorder2: colorPaletteDarkOrangeBorder2,
-    colorPaletteDarkOrangeForeground1: colorPaletteDarkOrangeForeground1,
-    colorPaletteDarkOrangeForeground2: colorPaletteDarkOrangeForeground2,
-    colorPaletteDarkOrangeForeground3: colorPaletteDarkOrangeForeground3,
-    colorPaletteYellowBackground1: colorPaletteYellowBackground1,
-    colorPaletteYellowBackground2: colorPaletteYellowBackground2,
-    colorPaletteYellowBackground3: colorPaletteYellowBackground3,
-    colorPaletteYellowBorderActive: colorPaletteYellowBorderActive,
-    colorPaletteYellowBorder1: colorPaletteYellowBorder1,
-    colorPaletteYellowBorder2: colorPaletteYellowBorder2,
-    colorPaletteYellowForeground1: colorPaletteYellowForeground1,
-    colorPaletteYellowForeground2: colorPaletteYellowForeground2,
-    colorPaletteYellowForeground3: colorPaletteYellowForeground3,
-    colorPaletteYellowForegroundInverted: colorPaletteYellowForegroundInverted,
-    colorPaletteBerryBackground1: colorPaletteBerryBackground1,
-    colorPaletteBerryBackground2: colorPaletteBerryBackground2,
-    colorPaletteBerryBackground3: colorPaletteBerryBackground3,
-    colorPaletteBerryBorderActive: colorPaletteBerryBorderActive,
-    colorPaletteBerryBorder1: colorPaletteBerryBorder1,
-    colorPaletteBerryBorder2: colorPaletteBerryBorder2,
-    colorPaletteBerryForeground1: colorPaletteBerryForeground1,
-    colorPaletteBerryForeground2: colorPaletteBerryForeground2,
-    colorPaletteBerryForeground3: colorPaletteBerryForeground3,
-    colorPaletteMarigoldBackground1: colorPaletteMarigoldBackground1,
-    colorPaletteMarigoldBackground2: colorPaletteMarigoldBackground2,
-    colorPaletteMarigoldBackground3: colorPaletteMarigoldBackground3,
-    colorPaletteMarigoldBorderActive: colorPaletteMarigoldBorderActive,
-    colorPaletteMarigoldBorder1: colorPaletteMarigoldBorder1,
-    colorPaletteMarigoldBorder2: colorPaletteMarigoldBorder2,
-    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,
-    colorPaletteBrassBorderActive: colorPaletteBrassBorderActive,
-    colorPaletteBrassForeground2: colorPaletteBrassForeground2,
-    colorPaletteBrownBackground2: colorPaletteBrownBackground2,
-    colorPaletteBrownBorderActive: colorPaletteBrownBorderActive,
-    colorPaletteBrownForeground2: colorPaletteBrownForeground2,
-    colorPaletteCornflowerBackground2: colorPaletteCornflowerBackground2,
-    colorPaletteCornflowerBorderActive: colorPaletteCornflowerBorderActive,
-    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,
-    colorPaletteGrapeBorderActive: colorPaletteGrapeBorderActive,
-    colorPaletteGrapeForeground2: colorPaletteGrapeForeground2,
-    colorPaletteLavenderBackground2: colorPaletteLavenderBackground2,
-    colorPaletteLavenderBorderActive: colorPaletteLavenderBorderActive,
-    colorPaletteLavenderForeground2: colorPaletteLavenderForeground2,
-    colorPaletteLightTealBackground2: colorPaletteLightTealBackground2,
-    colorPaletteLightTealBorderActive: colorPaletteLightTealBorderActive,
-    colorPaletteLightTealForeground2: colorPaletteLightTealForeground2,
-    colorPaletteLilacBackground2: colorPaletteLilacBackground2,
-    colorPaletteLilacBorderActive: colorPaletteLilacBorderActive,
-    colorPaletteLilacForeground2: colorPaletteLilacForeground2,
-    colorPaletteMagentaBackground2: colorPaletteMagentaBackground2,
-    colorPaletteMagentaBorderActive: colorPaletteMagentaBorderActive,
-    colorPaletteMagentaForeground2: colorPaletteMagentaForeground2,
-    colorPaletteMinkBackground2: colorPaletteMinkBackground2,
-    colorPaletteMinkBorderActive: colorPaletteMinkBorderActive,
-    colorPaletteMinkForeground2: colorPaletteMinkForeground2,
-    colorPaletteNavyBackground2: colorPaletteNavyBackground2,
-    colorPaletteNavyBorderActive: colorPaletteNavyBorderActive,
-    colorPaletteNavyForeground2: colorPaletteNavyForeground2,
-    colorPalettePeachBackground2: colorPalettePeachBackground2,
-    colorPalettePeachBorderActive: colorPalettePeachBorderActive,
-    colorPalettePeachForeground2: colorPalettePeachForeground2,
-    colorPalettePinkBackground2: colorPalettePinkBackground2,
-    colorPalettePinkBorderActive: colorPalettePinkBorderActive,
-    colorPalettePinkForeground2: colorPalettePinkForeground2,
-    colorPalettePlatinumBackground2: colorPalettePlatinumBackground2,
-    colorPalettePlatinumBorderActive: colorPalettePlatinumBorderActive,
-    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,
-    colorStatusSuccessBackground1: colorStatusSuccessBackground1,
-    colorStatusSuccessBackground2: colorStatusSuccessBackground2,
-    colorStatusSuccessBackground3: colorStatusSuccessBackground3,
-    colorStatusSuccessForeground1: colorStatusSuccessForeground1,
-    colorStatusSuccessForeground2: colorStatusSuccessForeground2,
-    colorStatusSuccessForeground3: colorStatusSuccessForeground3,
-    colorStatusSuccessForegroundInverted: colorStatusSuccessForegroundInverted,
-    colorStatusSuccessBorderActive: colorStatusSuccessBorderActive,
-    colorStatusSuccessBorder1: colorStatusSuccessBorder1,
-    colorStatusSuccessBorder2: colorStatusSuccessBorder2,
-    colorStatusWarningBackground1: colorStatusWarningBackground1,
-    colorStatusWarningBackground2: colorStatusWarningBackground2,
-    colorStatusWarningBackground3: colorStatusWarningBackground3,
-    colorStatusWarningForeground1: colorStatusWarningForeground1,
-    colorStatusWarningForeground2: colorStatusWarningForeground2,
-    colorStatusWarningForeground3: colorStatusWarningForeground3,
-    colorStatusWarningForegroundInverted: colorStatusWarningForegroundInverted,
-    colorStatusWarningBorderActive: colorStatusWarningBorderActive,
-    colorStatusWarningBorder1: colorStatusWarningBorder1,
-    colorStatusWarningBorder2: colorStatusWarningBorder2,
-    colorStatusDangerBackground1: colorStatusDangerBackground1,
-    colorStatusDangerBackground2: colorStatusDangerBackground2,
-    colorStatusDangerBackground3: colorStatusDangerBackground3,
-    colorStatusDangerBackground3Hover: colorStatusDangerBackground3Hover,
-    colorStatusDangerBackground3Pressed: colorStatusDangerBackground3Pressed,
-    colorStatusDangerForeground1: colorStatusDangerForeground1,
-    colorStatusDangerForeground2: colorStatusDangerForeground2,
-    colorStatusDangerForeground3: colorStatusDangerForeground3,
-    colorStatusDangerForegroundInverted: colorStatusDangerForegroundInverted,
-    colorStatusDangerBorderActive: colorStatusDangerBorderActive,
-    colorStatusDangerBorder1: colorStatusDangerBorder1,
-    colorStatusDangerBorder2: colorStatusDangerBorder2,
-    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,
-    shadow16: shadow16,
-    shadow28: shadow28,
-    shadow64: shadow64,
-    shadow2Brand: shadow2Brand,
-    shadow4Brand: shadow4Brand,
-    shadow8Brand: shadow8Brand,
-    shadow16Brand: shadow16Brand,
-    shadow28Brand: shadow28Brand,
-    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,
-    durationGentle: durationGentle,
-    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`
+const styles$r = 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}`;
@@ -4732,33 +3861,249 @@ const chevronDown20Filled = html.partial(`<svg
 function accordionItemTemplate(options = {}) {
   return html`<div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" ${ref("expandbutton")} ?disabled="${x => x.disabled ? "true" : void 0}" aria-expanded="${x => x.expanded}" aria-controls="${x => x.id}-panel" id="${x => x.id}" @click="${(x, c) => x.clickHandler(c.event)}"><span class="heading-content" part="heading-content"><slot name="heading"></slot></span></button>${startSlotTemplate(options)} ${endSlotTemplate(options)}<span class="icon" part="icon" aria-hidden="true"><slot name="expanded-icon">${staticallyCompose(options.expandedIcon)}</slot><slot name="collapsed-icon">${staticallyCompose(options.collapsedIcon)}</slot><span></div><div class="region" part="region" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
 }
-const template$r = accordionItemTemplate({
+const template$s = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
   expandedIcon: chevronDown20Filled
 });
 
-const definition$r = AccordionItem.compose({
+const definition$s = AccordionItem.compose({
   name: `${FluentDesignSystem.prefix}-accordion-item`,
-  template: template$r,
-  styles: styles$q
+  template: template$s,
+  styles: styles$r
 });
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
-var __decorateClass$o = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+definition$s.define(FluentDesignSystem.registry);
+
+const AccordionExpandMode = {
+  single: "single",
+  multi: "multi"
+};
+
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
-class AnchorButton extends FASTElement {
+class Accordion extends FASTElement {
   constructor() {
     super(...arguments);
-    this.iconOnly = false;
-    this.disabled = false;
-    this.disabledFocusable = false;
-    /**
-     * Prevents disabledFocusable click events
+    this.expandmode = AccordionExpandMode.multi;
+    this.activeItemIndex = 0;
+    this.change = () => {
+      this.$emit("change", this.activeid);
+    };
+    this.setItems = () => {
+      if (this.slottedAccordionItems.length === 0) {
+        return;
+      }
+      const children = Array.from(this.children);
+      this.removeItemListeners(children);
+      children.forEach(child => Observable.getNotifier(child).subscribe(this, "disabled"));
+      this.accordionItems = children.filter(child => !child.hasAttribute("disabled"));
+      this.accordionIds = this.getItemIds();
+      this.accordionItems.forEach((item, index) => {
+        if (item instanceof AccordionItem) {
+          item.addEventListener("click", this.activeItemChange);
+          item.addEventListener("keydown", this.handleItemKeyDown);
+          item.addEventListener("focus", this.handleItemFocus);
+          Observable.getNotifier(item).subscribe(this, "expanded");
+        }
+        const itemId = this.accordionIds[index];
+        item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
+        this.activeid = this.accordionIds[this.activeItemIndex];
+      });
+      if (this.isSingleExpandMode()) {
+        const expandedItem = this.findExpandedItem();
+        this.setSingleExpandMode(expandedItem);
+      }
+    };
+    this.removeItemListeners = oldValue => {
+      oldValue.forEach((item, index) => {
+        Observable.getNotifier(item).unsubscribe(this, "disabled");
+        Observable.getNotifier(item).unsubscribe(this, "expanded");
+        item.removeEventListener("click", this.activeItemChange);
+        item.removeEventListener("keydown", this.handleItemKeyDown);
+        item.removeEventListener("focus", this.handleItemFocus);
+      });
+    };
+    this.activeItemChange = event => {
+      if (event.defaultPrevented || event.target !== event.currentTarget) {
+        return;
+      }
+      event.preventDefault();
+      this.handleExpandedChange(event.target);
+    };
+    this.handleExpandedChange = item => {
+      if (item instanceof AccordionItem) {
+        this.activeid = item.getAttribute("id");
+        if (!this.isSingleExpandMode()) {
+          item.expanded = !item.expanded;
+          this.activeItemIndex = this.accordionItems.indexOf(item);
+        } else {
+          this.setSingleExpandMode(item);
+        }
+        this.change();
+      }
+    };
+    this.handleItemKeyDown = event => {
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      this.accordionIds = this.getItemIds();
+      switch (event.key) {
+        case keyArrowUp:
+          event.preventDefault();
+          this.adjust(-1);
+          break;
+        case keyArrowDown:
+          event.preventDefault();
+          this.adjust(1);
+          break;
+        case keyHome:
+          this.activeItemIndex = 0;
+          this.focusItem();
+          break;
+        case keyEnd:
+          this.activeItemIndex = this.accordionItems.length - 1;
+          this.focusItem();
+          break;
+      }
+    };
+    this.handleItemFocus = event => {
+      if (event.target === event.currentTarget) {
+        const focusedItem = event.target;
+        const focusedIndex = this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem);
+        if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
+          this.activeItemIndex = focusedIndex;
+          this.activeid = this.accordionIds[this.activeItemIndex];
+        }
+      }
+    };
+  }
+  expandmodeChanged(prev, next) {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+    const expandedItem = this.findExpandedItem();
+    if (!expandedItem) {
+      return;
+    }
+    if (next !== AccordionExpandMode.single) {
+      expandedItem?.expandbutton.removeAttribute("aria-disabled");
+    } else {
+      this.setSingleExpandMode(expandedItem);
+    }
+  }
+  /**
+   * @internal
+   */
+  slottedAccordionItemsChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected) {
+      this.setItems();
+    }
+  }
+  /**
+   * @internal
+   */
+  handleChange(source, propertyName) {
+    if (propertyName === "disabled") {
+      this.setItems();
+    } else if (propertyName === "expanded") {
+      if (source.expanded && this.isSingleExpandMode()) {
+        this.setSingleExpandMode(source);
+      }
+    }
+  }
+  findExpandedItem() {
+    if (this.accordionItems.length === 0) {
+      return null;
+    }
+    return this.accordionItems.find(item => item instanceof AccordionItem && item.expanded) ?? this.accordionItems[0];
+  }
+  setSingleExpandMode(expandedItem) {
+    if (this.accordionItems.length === 0) {
+      return;
+    }
+    const currentItems = Array.from(this.accordionItems);
+    this.activeItemIndex = currentItems.indexOf(expandedItem);
+    currentItems.forEach((item, index) => {
+      if (item instanceof AccordionItem) {
+        if (this.activeItemIndex === index) {
+          item.expanded = true;
+          item.expandbutton.setAttribute("aria-disabled", "true");
+        } else {
+          item.expanded = false;
+          if (!item.hasAttribute("disabled")) {
+            item.expandbutton.removeAttribute("aria-disabled");
+          }
+        }
+      }
+    });
+  }
+  getItemIds() {
+    return this.slottedAccordionItems.map(accordionItem => {
+      return accordionItem.id;
+    });
+  }
+  isSingleExpandMode() {
+    return this.expandmode === AccordionExpandMode.single;
+  }
+  adjust(adjustment) {
+    this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
+    this.focusItem();
+  }
+  focusItem() {
+    const element = this.accordionItems[this.activeItemIndex];
+    if (element instanceof AccordionItem) {
+      element.expandbutton.focus();
+    }
+  }
+}
+__decorateClass$p([attr({
+  attribute: "expand-mode"
+})], Accordion.prototype, "expandmode", 2);
+__decorateClass$p([observable], Accordion.prototype, "slottedAccordionItems", 2);
+
+const styles$q = css`
+  ${display("flex")}
+
+  :host{flex-direction:column;width:100%;contain:content}`;
+
+function accordionTemplate() {
+  return html`<template><slot ${slotted({
+    property: "slottedAccordionItems",
+    filter: elements()
+  })}></slot></template>`;
+}
+const template$r = accordionTemplate();
+
+const definition$r = Accordion.compose({
+  name: `${FluentDesignSystem.prefix}-accordion`,
+  template: template$r,
+  styles: styles$q
+});
+
+definition$r.define(FluentDesignSystem.registry);
+
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
+var __decorateClass$o = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$o(target, key, result);
+  return result;
+};
+class AnchorButton extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.iconOnly = false;
+    this.disabled = false;
+    this.disabledFocusable = false;
+    /**
+     * Prevents disabledFocusable click events
      */
     this.handleDisabledFocusableClick = e => {
       if (e && this.disabled || this.disabledFocusable) {
@@ -4825,44 +4170,6 @@ __decorateClass$o([attr({
 applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
 applyMixins(AnchorButton, StartEnd, DelegatesARIALink);
 
-const ButtonAppearance = {
-  primary: "primary",
-  outline: "outline",
-  subtle: "subtle",
-  secondary: "secondary",
-  transparent: "transparent"
-};
-const ButtonShape = {
-  circular: "circular",
-  rounded: "rounded",
-  square: "square"
-};
-const ButtonSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
-const ButtonType = {
-  submit: "submit",
-  reset: "reset",
-  button: "button"
-};
-
-const AnchorButtonAppearance = ButtonAppearance;
-const AnchorButtonShape = ButtonShape;
-const AnchorButtonSize = ButtonSize;
-const AnchorTarget = {
-  _self: "_self",
-  _blank: "_blank",
-  _parent: "_parent",
-  _top: "_top"
-};
-
-function anchorTemplate(options = {}) {
-  return html`<a class="control" part="control" download="${x => x.download}" href="${x => x.href}" hreflang="${x => x.hreflang}" ping="${x => x.ping}" referrerpolicy="${x => x.referrerpolicy}" rel="${x => x.rel}" target="${x => x.target}" type="${x => x.type}" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-expanded="${x => x.ariaExpanded}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")}>${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</a>`;
-}
-const template$q = anchorTemplate();
-
 const styles$p = css`
   ${display("inline-flex")}
 
@@ -4871,6 +4178,11 @@ const styles$p = css`
     .control{background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='transparent']:hover) .control{border-color:Highlight}`));
 
+function anchorTemplate(options = {}) {
+  return html`<a class="control" part="control" download="${x => x.download}" href="${x => x.href}" hreflang="${x => x.hreflang}" ping="${x => x.ping}" referrerpolicy="${x => x.referrerpolicy}" rel="${x => x.rel}" target="${x => x.target}" type="${x => x.type}" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-expanded="${x => x.ariaExpanded}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")}>${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</a>`;
+}
+const template$q = anchorTemplate();
+
 const definition$q = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
   template: template$q,
@@ -4880,6 +4192,8 @@ const definition$q = AnchorButton.compose({
   }
 });
 
+definition$q.define(FluentDesignSystem.registry);
+
 const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
 const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
 const PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
@@ -4921,19 +4235,6 @@ function getInitials(displayName, isRtl, options) {
   return getInitialsLatin(displayName, isRtl, options?.firstInitialOnly);
 }
 
-const AvatarActive = {
-  active: "active",
-  inactive: "inactive"
-};
-const AvatarShape = {
-  circular: "circular",
-  square: "square"
-};
-const AvatarAppearance = {
-  ring: "ring",
-  shadow: "shadow",
-  ringShadow: "ring-shadow"
-};
 const AvatarNamedColor = {
   darkRed: "dark-red",
   cranberry: "cranberry",
@@ -4972,22 +4273,6 @@ const AvatarColor = {
   colorful: "colorful",
   ...AvatarNamedColor
 };
-const AvatarSize = {
-  _16: 16,
-  _20: 20,
-  _24: 24,
-  _28: 28,
-  _32: 32,
-  _36: 36,
-  _40: 40,
-  _48: 48,
-  _56: 56,
-  _64: 64,
-  _72: 72,
-  _96: 96,
-  _120: 120,
-  _128: 128
-};
 
 var __defProp$n = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
@@ -5053,12 +4338,6 @@ const getHashCode = str => {
   return hashCode;
 };
 
-const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
-function avatarTemplate() {
-  return html`<template role="img" data-color=${x => x.generateColor()}><slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot></template>`;
-}
-const template$p = avatarTemplate();
-
 const animations = {
   fastOutSlowInMax: curveDecelerateMax,
   fastOutSlowInMid: curveDecelerateMid,
@@ -5073,12 +4352,20 @@ const animations = {
 const styles$o = 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}}`;
 
+const defaultIconTemplate = html`<svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="default-icon" fill="currentcolor" aria-hidden="true"><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
+function avatarTemplate() {
+  return html`<template role="img" data-color=${x => x.generateColor()}><slot>${x => x.name || x.initials ? x.generateInitials() : defaultIconTemplate}</slot><slot name="badge"></slot></template>`;
+}
+const template$p = avatarTemplate();
+
 const definition$p = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
   template: template$p,
   styles: styles$o
 });
 
+definition$p.define(FluentDesignSystem.registry);
+
 const BadgeAppearance = {
   filled: "filled",
   ghost: "ghost",
@@ -5095,19 +4382,6 @@ const BadgeColor = {
   success: "success",
   warning: "warning"
 };
-const BadgeShape = {
-  circular: "circular",
-  rounded: "rounded",
-  square: "square"
-};
-const BadgeSize = {
-  tiny: "tiny",
-  extraSmall: "extra-small",
-  small: "small",
-  medium: "medium",
-  large: "large",
-  extraLarge: "extra-large"
-};
 
 var __defProp$m = Object.defineProperty;
 var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
@@ -5130,11 +4404,6 @@ __decorateClass$m([attr], Badge.prototype, "shape", 2);
 __decorateClass$m([attr], Badge.prototype, "size", 2);
 applyMixins(Badge, StartEnd);
 
-function badgeTemplate(options = {}) {
-  return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
-}
-const template$o = badgeTemplate();
-
 const textPadding = spacingHorizontalXXS;
 const badgeBaseStyles = css.partial`
   ${display("inline-flex")} :host {
@@ -5497,12 +4766,25 @@ const styles$n = css`
 `.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}`));
 
+function badgeTemplate(options = {}) {
+  return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
+}
+const template$o = badgeTemplate();
+
 const definition$o = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
   template: template$o,
   styles: styles$n
 });
 
+definition$o.define(FluentDesignSystem.registry);
+
+const ButtonType = {
+  submit: "submit",
+  reset: "reset",
+  button: "button"
+};
+
 var __defProp$l = Object.defineProperty;
 var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
 var __decorateClass$l = (decorators, target, key, kind) => {
@@ -5754,23 +5036,25 @@ __decorateClass$l([attr], Button.prototype, "type", 2);
 __decorateClass$l([attr], Button.prototype, "value", 2);
 applyMixins(Button, StartEnd);
 
-function buttonTemplate$1(options = {}) {
-  return html`<template tabindex="${x => x.disabled ? -1 : 0}" @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
-}
-const template$n = buttonTemplate$1();
-
 const styles$m = css`
   ${display("inline-flex")}
 
   :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align: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;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(: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]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};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]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${borderRadiusCircular}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary'])),:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary']):hover),:host(:is([disabled][appearance='primary'],[disabled-focusabale][appearance='primary']):hover:active){border-color:transparent}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline'])),:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline']):hover),:host(:is([disabled][appearance='outline'],[disabled-focusabale][appearance='outline']):hover:active){background-color:${colorTransparentBackground}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle'])),:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle']):hover),:host(:is([disabled][appearance='subtle'],[disabled-focusabale][appearance='subtle']):hover:active){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']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent'])),:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent']):hover),:host(:is([disabled][appearance='transparent'],[disabled-focusabale][appearance='transparent']):hover:active){border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='transparent']:hover){border-color:Highlight}`));
 
+function buttonTemplate$1(options = {}) {
+  return html`<template tabindex="${x => x.disabled ? -1 : 0}" @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
+}
+const template$n = buttonTemplate$1();
+
 const definition$n = Button.compose({
   name: `${FluentDesignSystem.prefix}-button`,
   template: template$n,
   styles: styles$m
 });
 
+definition$n.define(FluentDesignSystem.registry);
+
 const proxySlotName = "form-associated-proxy";
 const ElementInternalsKey = "ElementInternals";
 const supportsElementInternals = ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
@@ -6272,19 +5556,6 @@ __decorateClass$k([attr({
 __decorateClass$k([observable], Checkbox.prototype, "defaultSlottedNodes", 2);
 __decorateClass$k([observable], Checkbox.prototype, "indeterminate", 2);
 
-const CheckboxShape = {
-  circular: "circular",
-  square: "square"
-};
-const CheckboxSize = {
-  medium: "medium",
-  large: "large"
-};
-const CheckboxLabelPosition = {
-  before: "before",
-  after: "after"
-};
-
 const checkedIndicator = html.partial(`
     <div class="checked-indicator">
         <svg fill="currentColor"
@@ -6319,16 +5590,9 @@ const definition$m = Checkbox.compose({
   styles: styles$l
 });
 
-class CompoundButton extends Button {}
-
-const CompoundButtonAppearance = ButtonAppearance;
-const CompoundButtonShape = ButtonShape;
-const CompoundButtonSize = ButtonSize;
+definition$m.define(FluentDesignSystem.registry);
 
-function buttonTemplate(options = {}) {
-  return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? -1 : 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
-}
-const template$l = buttonTemplate();
+class CompoundButton extends Button {}
 
 const styles$k = css`
   ${styles$m}
@@ -6338,12 +5602,19 @@ const styles$k = css`
     ::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']){padding:8px;padding-bottom:10px}:host([icon-only]){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
 
+function buttonTemplate(options = {}) {
+  return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? -1 : 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
+}
+const template$l = buttonTemplate();
+
 const definition$l = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
   template: template$l,
   styles: styles$k
 });
 
+definition$l.define(FluentDesignSystem.registry);
+
 var __defProp$j = Object.defineProperty;
 var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
 var __decorateClass$j = (decorators, target, key, kind) => {
@@ -6400,40 +5671,6 @@ __decorateClass$j([attr({
 })], CounterBadge.prototype, "dot", 2);
 applyMixins(CounterBadge, StartEnd);
 
-const CounterBadgeAppearance = {
-  filled: "filled",
-  ghost: "ghost"
-};
-const CounterBadgeColor = {
-  brand: "brand",
-  danger: "danger",
-  important: "important",
-  informative: "informative",
-  severe: "severe",
-  subtle: "subtle",
-  success: "success",
-  warning: "warning"
-};
-const CounterBadgeShape = {
-  circular: "circular",
-  rounded: "rounded"
-};
-const CounterBadgeSize = {
-  tiny: "tiny",
-  extraSmall: "extra-small",
-  small: "small",
-  medium: "medium",
-  large: "large",
-  extraLarge: "extra-large"
-};
-
-function composeTemplate(options = {}) {
-  return badgeTemplate({
-    defaultContent: html`${x => x.setCount()}`
-  });
-}
-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}
   ${badgeFilledStyles}
@@ -6442,12 +5679,21 @@ const styles$j = css`
 
   :host([dot]),:host([dot][appearance][size]){min-width:auto;width:6px;height:6px;padding:0}`;
 
+function composeTemplate(options = {}) {
+  return badgeTemplate({
+    defaultContent: html`${x => x.setCount()}`
+  });
+}
+const template$k = composeTemplate();
+
 const definition$k = CounterBadge.compose({
   name: `${FluentDesignSystem.prefix}-counter-badge`,
   template: template$k,
   styles: styles$j
 });
 
+definition$k.define(FluentDesignSystem.registry);
+
 /*!
 * tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
@@ -6818,7 +6064,7 @@ const _Dialog = class _Dialog extends FASTElement {
   constructor() {
     super(...arguments);
     /**
-     * @private
+     * @internal
      * Indicates whether focus is being trapped within the dialog
      */
     this.isTrappingFocus = false;
@@ -6827,7 +6073,7 @@ const _Dialog = class _Dialog extends FASTElement {
     this.open = false;
     this.noTitleAction = false;
     /**
-     * @private
+     * @internal
      * Indicates whether focus should be trapped within the dialog
      */
     this.trapFocus = false;
@@ -6864,7 +6110,7 @@ const _Dialog = class _Dialog extends FASTElement {
       }
     };
     /**
-     * @private
+     * @internal
      * Handles keydown events on the document
      * @param e - The keydown event
      */
@@ -6878,7 +6124,7 @@ const _Dialog = class _Dialog extends FASTElement {
       }
     };
     /**
-     * @private
+     * @internal
      * Handles tab keydown events
      * @param e - The keydown event
      */
@@ -6902,7 +6148,7 @@ const _Dialog = class _Dialog extends FASTElement {
       return;
     };
     /**
-     * @private
+     * @internal
      * Gets the bounds of the tab queue
      * @returns (HTMLElement | SVGElement)[]
      */
@@ -6911,7 +6157,7 @@ const _Dialog = class _Dialog extends FASTElement {
       return _Dialog.reduceTabbableItems(bounds, this);
     };
     /**
-     * @private
+     * @internal
      * Focuses the first element in the tab queue
      */
     this.focusFirstElement = () => {
@@ -6925,7 +6171,7 @@ const _Dialog = class _Dialog extends FASTElement {
       }
     };
     /**
-     * @private
+     * @internal
      * Determines if focus should be forced
      * @param currentFocusElement - The currently focused element
      * @returns boolean
@@ -6934,7 +6180,7 @@ const _Dialog = class _Dialog extends FASTElement {
       return this.isTrappingFocus && !this.contains(currentFocusElement);
     };
     /**
-     * @private
+     * @internal
      * Determines if focus should be trapped
      * @returns boolean
      */
@@ -6942,7 +6188,7 @@ const _Dialog = class _Dialog extends FASTElement {
       return this.trapFocus && this.dialog.open;
     };
     /**
-     * @private
+     * @internal
      * Handles focus events on the document
      * @param e - The focus event
      */
@@ -6953,7 +6199,7 @@ const _Dialog = class _Dialog extends FASTElement {
       }
     };
     /**
-     * @private
+     * @internal
      * Updates the state of focus trapping
      * @param shouldTrapFocusOverride - Optional override for whether focus should be trapped
      */
@@ -7082,7 +6328,7 @@ const _Dialog = class _Dialog extends FASTElement {
     return true;
   }
   /**
-   * @private
+   * @internal
    * Reduces the list of tabbable items
    * @param elements - The current list of elements
    * @param element - The element to consider adding to the list
@@ -7099,7 +6345,7 @@ const _Dialog = class _Dialog extends FASTElement {
     return Array.from(element.children).reduce((elements2, currentElement) => _Dialog.reduceTabbableItems(elements2, currentElement), elements);
   }
   /**
-   * @private
+   * @internal
    * Determines if an element is a focusable FASTElement
    * @param element - The element to check
    * @returns boolean
@@ -7108,7 +6354,7 @@ const _Dialog = class _Dialog extends FASTElement {
     return !!element.$fastController?.definition.shadowOptions?.delegatesFocus;
   }
   /**
-   * @private
+   * @internal
    * Determines if an element has a tabbable shadow
    * @param element - The element to check
    * @returns boolean
@@ -7170,6 +6416,8 @@ const definition$j = Dialog.compose({
   styles: styles$i
 });
 
+definition$j.define(FluentDesignSystem.registry);
+
 const DividerRole = {
   /**
    * The divider semantically separates content
@@ -7181,17 +6429,6 @@ const DividerRole = {
   presentation: "presentation"
 };
 const DividerOrientation = Orientation;
-const DividerAlignContent = {
-  center: "center",
-  start: "start",
-  end: "end"
-};
-const DividerAppearance = {
-  strong: "strong",
-  brand: "brand",
-  subtle: "subtle",
-  default: "default"
-};
 
 var __defProp$h = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
@@ -7235,6 +6472,8 @@ const definition$i = Divider.compose({
   styles: styles$h
 });
 
+definition$i.define(FluentDesignSystem.registry);
+
 var __defProp$g = Object.defineProperty;
 var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
 var __decorateClass$g = (decorators, target, key, kind) => {
@@ -7256,19 +6495,6 @@ __decorateClass$g([attr({
 __decorateClass$g([attr], Image.prototype, "fit", 2);
 __decorateClass$g([attr], Image.prototype, "shape", 2);
 
-const ImageFit = {
-  none: "none",
-  center: "center",
-  contain: "contain",
-  cover: "cover",
-  default: "default"
-};
-const ImageShape = {
-  circular: "circular",
-  rounded: "rounded",
-  square: "square"
-};
-
 const template$h = html`<slot></slot>`;
 
 const styles$g = css`
@@ -7280,6 +6506,8 @@ const definition$h = Image.compose({
   styles: styles$g
 });
 
+definition$h.define(FluentDesignSystem.registry);
+
 var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
 var __decorateClass$f = (decorators, target, key, kind) => {
@@ -7304,16 +6532,6 @@ __decorateClass$f([attr({
   mode: "boolean"
 })], Label.prototype, "required", 2);
 
-const LabelSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
-const LabelWeight = {
-  regular: "regular",
-  semibold: "semibold"
-};
-
 const styles$f = css`
   ${display("flex")}
 
@@ -7330,6 +6548,27 @@ const definition$g = Label.compose({
   styles: styles$f
 });
 
+definition$g.define(FluentDesignSystem.registry);
+
+class MenuButton extends Button {}
+
+const template$f = buttonTemplate$1({
+  end: html.partial( /* html */
+  `
+    <svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor"></path>
+    </svg>
+  `)
+});
+
+const definition$f = MenuButton.compose({
+  name: `${FluentDesignSystem.prefix}-menu-button`,
+  template: template$f,
+  styles: styles$m
+});
+
+definition$f.define(FluentDesignSystem.registry);
+
 function t(t) {
   return t.split("-")[1];
 }
@@ -8245,6 +7484,26 @@ const z = (t, n, o) => {
   });
 };
 
+const MenuItemRole = {
+  /**
+   * The menu item has a "menuitem" role
+   */
+  menuitem: "menuitem",
+  /**
+   * The menu item has a "menuitemcheckbox" role
+   */
+  menuitemcheckbox: "menuitemcheckbox",
+  /**
+   * The menu item has a "menuitemradio" role
+   */
+  menuitemradio: "menuitemradio"
+};
+({
+  [MenuItemRole.menuitem]: "menuitem",
+  [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
+  [MenuItemRole.menuitemradio]: "menuitemradio"
+});
+
 var __defProp$e = Object.defineProperty;
 var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
 var __decorateClass$e = (decorators, target, key, kind) => {
@@ -8253,512 +7512,90 @@ var __decorateClass$e = (decorators, target, key, kind) => {
   if (kind && result) __defProp$e(target, key, result);
   return result;
 };
-class Menu extends FASTElement {
+class MenuItem extends FASTElement {
   constructor() {
     super(...arguments);
-    this.openOnHover = false;
-    this.openOnContext = false;
-    this.closeOnScroll = false;
-    this.persistOnItemClick = false;
-    this.open = false;
-    this.slottedMenuList = [];
-    this.slottedTriggers = [];
+    this.role = MenuItemRole.menuitem;
+    this.checked = false;
+    this.focusSubmenuOnLoad = false;
     /**
-     * Toggles the open state of the menu.
-     * @public
+     * @internal
      */
-    this.toggleMenu = () => {
-      if (this.open) {
-        this.closeMenu();
-      } else {
-        this.openMenu();
+    this.handleMenuItemKeyDown = e => {
+      if (e.defaultPrevented) {
+        return false;
+      }
+      switch (e.key) {
+        case keyEnter:
+        case keySpace:
+          this.invoke();
+          return false;
+        case keyArrowRight:
+          this.expanded && this.submenu ? this.submenu.focus() : this.expandAndFocus();
+          return false;
+        case keyEscape:
+          if (this.expanded) {
+            this.closeSubMenu();
+            return false;
+          }
+          break;
+        case keyArrowLeft:
+          if (this.expanded) {
+            this.closeSubMenu();
+            return false;
+          }
       }
+      return true;
     };
     /**
-     * Closes the menu.
-     * @public
+     * @internal
      */
-    this.closeMenu = () => {
-      this.open = false;
-      if (this.closeOnScroll) {
-        document.removeEventListener("scroll", this.closeMenu);
+    this.handleMenuItemClick = e => {
+      if (e.defaultPrevented || this.disabled) {
+        return false;
       }
+      this.invoke();
+      return false;
     };
     /**
-     * Opens the menu.
-     * @public
+     * @internal
      */
-    this.openMenu = e => {
-      this.open = true;
-      if (e && this.openOnContext) {
-        e.preventDefault();
+    this.submenuLoaded = () => {
+      if (!this.focusSubmenuOnLoad) {
+        return;
       }
-      if (this.closeOnScroll) {
-        document.addEventListener("scroll", this.closeMenu);
+      this.focusSubmenuOnLoad = false;
+      if (this.submenu) {
+        this.submenu.focus();
+        this.setAttribute("tabindex", "-1");
       }
     };
     /**
-     * The task to set the positioning of the menu.
-     * @protected
+     * @internal
      */
-    this.setPositioningTask = () => {
-      this.setPositioning();
+    this.handleMouseOver = e => {
+      if (this.disabled || !this.hasSubmenu || this.expanded) {
+        return false;
+      }
+      this.expanded = true;
+      return false;
     };
     /**
-     * Handles keyboard interaction for the trigger.
-     * Toggles the menu when the Space or Enter key is pressed.
-     * If the menu is open, focuses on the menu list.
-     * @public
-     * @param {KeyboardEvent} e - the keyboard event
+     * @internal
      */
-    this.handleTriggerKeydown = e => {
-      if (e.defaultPrevented) {
-        return;
-      }
-      const key = e.key;
-      switch (key) {
-        case keySpace:
-        case keyEnter:
-          e.preventDefault();
-          this.toggleMenu();
-          if (this.open) {
-            this.focusMenuList();
-          }
-          break;
-        default:
-          return true;
+    this.handleMouseOut = e => {
+      if (!this.expanded || this.contains(document.activeElement)) {
+        return false;
       }
+      this.expanded = false;
+      return false;
     };
     /**
-     * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
-     * @private
-     * @param {Event} e - The event triggered on document click.
+     * @internal
      */
-    this.handleDocumentClick = e => {
-      if (e && !e.composedPath().includes(this._menuList) && !e.composedPath().includes(this._trigger)) {
-        this.closeMenu();
-      }
-    };
-  }
-  /**
-   * Called when the element is connected to the DOM.
-   * Sets up the component.
-   * @public
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    Updates.enqueue(() => this.setComponent());
-  }
-  /**
-   * Called when the element is disconnected from the DOM.
-   * Removes event listeners.
-   * @public
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.cleanup?.();
-    this.removeListeners();
-  }
-  /**
-   * Sets the component.
-   * Sets the trigger and menu list elements and adds event listeners.
-   * @public
-   */
-  setComponent() {
-    if (this.$fastController.isConnected && this.slottedMenuList.length && this.slottedTriggers.length) {
-      this._trigger = this.slottedTriggers[0];
-      this._menuList = this.slottedMenuList[0];
-      this._trigger.setAttribute("aria-haspopup", "true");
-      this._trigger.setAttribute("aria-expanded", `${this.open}`);
-      this.addListeners();
-    }
-  }
-  /**
-   * Focuses on the menu list.
-   * @public
-   */
-  focusMenuList() {
-    if (this.open && this._menuList) {
-      Updates.enqueue(() => {
-        this._menuList.focus();
-      });
-    }
-  }
-  /**
-   * Focuses on the menu trigger.
-   * @public
-   */
-  focusTrigger() {
-    if (!this.open && this._trigger) {
-      Updates.enqueue(() => {
-        this._trigger.focus();
-      });
-    }
-  }
-  /**
-   * Called whenever the open state changes.
-   * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
-   * Sets menu list position
-   * emits openChanged event
-   * @public
-   * @param {boolean} oldValue - The previous value of 'open'.
-   * @param {boolean} newValue - The new value of 'open'.
-   */
-  openChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected && this._trigger instanceof HTMLElement) {
-      this._trigger.setAttribute("aria-expanded", `${this.open}`);
-      if (this._menuList && this.open) {
-        Updates.enqueue(this.setPositioningTask);
-      }
-    }
-    this.cleanup?.();
-    this.$emit("onOpenChange", {
-      open: newValue
-    });
-  }
-  /**
-   * Called whenever the 'openOnHover' property changes.
-   * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
-   * @public
-   * @param {boolean} oldValue - The previous value of 'openOnHover'.
-   * @param {boolean} newValue - The new value of 'openOnHover'.
-   */
-  openOnHoverChanged(oldValue, newValue) {
-    if (newValue) {
-      this._trigger?.addEventListener("mouseover", this.openMenu);
-    } else {
-      this._trigger?.removeEventListener("mouseover", this.openMenu);
-    }
-  }
-  /**
-   * Called whenever the 'persistOnItemClick' property changes.
-   * Adds or removes a 'click' event listener to the menu list based on the new value.
-   * @public
-   * @param {boolean} oldValue - The previous value of 'persistOnItemClick'.
-   * @param {boolean} newValue - The new value of 'persistOnItemClick'.
-   */
-  persistOnItemClickChanged(oldValue, newValue) {
-    if (!newValue) {
-      this._menuList?.addEventListener("click", this.closeMenu);
-    } else {
-      this._menuList?.removeEventListener("click", this.closeMenu);
-    }
-  }
-  /**
-   * Called whenever the 'openOnContext' property changes.
-   * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
-   * @public
-   * @param {boolean} oldValue - The previous value of 'openOnContext'.
-   * @param {boolean} newValue - The new value of 'openOnContext'.
-   */
-  openOnContextChanged(oldValue, newValue) {
-    if (newValue) {
-      this._trigger?.addEventListener("contextmenu", this.openMenu);
-    } else {
-      this._trigger?.removeEventListener("contextmenu", this.openMenu);
-    }
-  }
-  /**
-   * Called whenever the 'closeOnScroll' property changes.
-   * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
-   * @public
-   * @param {boolean} oldValue - The previous value of 'closeOnScroll'.
-   * @param {boolean} newValue - The new value of 'closeOnScroll'.
-   */
-  closeOnScrollChanged(oldValue, newValue) {
-    if (newValue) {
-      document.addEventListener("scroll", this.closeMenu);
-    } else {
-      document.removeEventListener("scroll", this.closeMenu);
-    }
-  }
-  /**
-   * Sets the positioning of the menu.
-   * @protected
-   */
-  setPositioning() {
-    if (this.$fastController.isConnected && this._menuList && this.open && this._trigger) {
-      this.cleanup = P(this, this.positioningContainer, async () => {
-        const {
-          middlewareData,
-          x,
-          y
-        } = await z(this._trigger, this.positioningContainer, {
-          placement: "bottom",
-          strategy: "fixed",
-          middleware: [b$1(), k({
-            apply: ({
-              availableHeight,
-              rects
-            }) => {
-              this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
-                maxHeight: `${availableHeight}px`,
-                width: `${rects.reference.width}px`
-              });
-            }
-          }), P$1()]
-        });
-        if (middlewareData.hide?.referenceHidden) {
-          this.open = false;
-          return;
-        }
-        this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
-          position: "fixed",
-          top: "0",
-          left: "0",
-          transform: `translate(${x}px, ${y}px)`
-        });
-      });
-    }
-  }
-  /**
-   * Adds event listeners.
-   * Adds click and keydown event listeners to the trigger and a click event listener to the document.
-   * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
-   * @public
-   */
-  addListeners() {
-    document.addEventListener("click", this.handleDocumentClick);
-    this._trigger?.addEventListener("keydown", this.handleTriggerKeydown);
-    if (!this.persistOnItemClick) {
-      this._menuList?.addEventListener("click", this.closeMenu);
-    }
-    if (this.openOnHover) {
-      this._trigger?.addEventListener("mouseover", this.openMenu);
-    } else if (this.openOnContext) {
-      this._trigger?.addEventListener("contextmenu", this.openMenu);
-    } else {
-      this._trigger?.addEventListener("click", this.toggleMenu);
-    }
-  }
-  /**
-   * Removes event listeners.
-   * Removes click and keydown event listeners from the trigger and a click event listener from the document.
-   * Also removes 'mouseover' event listeners from the trigger.
-   * @private
-   */
-  removeListeners() {
-    document.removeEventListener("click", this.handleDocumentClick);
-    this._trigger?.removeEventListener("keydown", this.handleTriggerKeydown);
-    if (!this.persistOnItemClick) {
-      this._menuList?.removeEventListener("click", this.closeMenu);
-    }
-    if (this.openOnHover) {
-      this._trigger?.removeEventListener("mouseover", this.openMenu);
-    }
-    if (this.openOnContext) {
-      this._trigger?.removeEventListener("contextmenu", this.openMenu);
-    } else {
-      this._trigger?.removeEventListener("click", this.toggleMenu);
-    }
-  }
-  /**
-   * Handles keyboard interaction for the menu.
-   * Closes the menu and focuses on the trigger when the Escape key is pressed.
-   * Closes the menu when the Tab key is pressed.
-   * @public
-   * @param {KeyboardEvent} e - the keyboard event
-   */
-  handleMenuKeydown(e) {
-    if (e.defaultPrevented) {
-      return;
-    }
-    const key = e.key;
-    switch (key) {
-      case keyEscape:
-        e.preventDefault();
-        if (this.open) {
-          this.closeMenu();
-          this.focusTrigger();
-        }
-        break;
-      case keyTab:
-        if (this.open) {
-          this.closeMenu();
-        }
-        if (e.shiftKey) {
-          this.focusTrigger();
-        }
-      default:
-        return true;
-    }
-  }
-}
-__decorateClass$e([observable, attr({
-  attribute: "open-on-hover",
-  mode: "boolean"
-})], Menu.prototype, "openOnHover", 2);
-__decorateClass$e([observable, attr({
-  attribute: "open-on-context",
-  mode: "boolean"
-})], Menu.prototype, "openOnContext", 2);
-__decorateClass$e([observable, attr({
-  attribute: "close-on-scroll",
-  mode: "boolean"
-})], Menu.prototype, "closeOnScroll", 2);
-__decorateClass$e([observable, attr({
-  attribute: "persist-on-item-click",
-  mode: "boolean"
-})], Menu.prototype, "persistOnItemClick", 2);
-__decorateClass$e([observable, attr({
-  mode: "boolean"
-})], Menu.prototype, "open", 2);
-__decorateClass$e([observable], Menu.prototype, "slottedMenuList", 2);
-__decorateClass$e([observable], Menu.prototype, "slottedTriggers", 2);
-
-function menuTemplate$1() {
-  return html`<template ?open-on-hover="${x => x.openOnHover}" ?open-on-context="${x => x.openOnContext}" ?close-on-scroll="${x => x.closeOnScroll}" ?persist-on-item-click="${x => x.persistOnItemClick}" @keydown="${(x, c) => x.handleMenuKeydown(c.event)}"><slot name="trigger" ${slotted({
-    property: "slottedTriggers",
-    filter: elements()
-  })}></slot><span ${ref("positioningContainer")} part="positioning-container" class="positioning-container" ?hidden="${x => !x.open}"><slot ${slotted({
-    property: "slottedMenuList",
-    filter: elements()
-  })}></slot></span></template>`;
-}
-const template$f = menuTemplate$1();
-
-const styles$e = css`
-  :host{position:relative;z-index:var(--z-index-menu,1)}.positioning-container{position:fixed;top:0;left:0;transform:translate(0,0)}`;
-
-const definition$f = Menu.compose({
-  name: `${FluentDesignSystem.prefix}-menu`,
-  template: template$f,
-  styles: styles$e
-});
-
-class MenuButton extends Button {}
-
-const MenuButtonAppearance = ButtonAppearance;
-const MenuButtonShape = ButtonShape;
-const MenuButtonSize = ButtonSize;
-
-const template$e = buttonTemplate$1({
-  end: html.partial( /* html */
-  `
-    <svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor"></path>
-    </svg>
-  `)
-});
-
-const definition$e = MenuButton.compose({
-  name: `${FluentDesignSystem.prefix}-menu-button`,
-  template: template$e,
-  styles: styles$m
-});
-
-const MenuItemRole = {
-  /**
-   * The menu item has a "menuitem" role
-   */
-  menuitem: "menuitem",
-  /**
-   * The menu item has a "menuitemcheckbox" role
-   */
-  menuitemcheckbox: "menuitemcheckbox",
-  /**
-   * The menu item has a "menuitemradio" role
-   */
-  menuitemradio: "menuitemradio"
-};
-const roleForMenuItem = {
-  [MenuItemRole.menuitem]: "menuitem",
-  [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
-  [MenuItemRole.menuitemradio]: "menuitemradio"
-};
-
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
-  return result;
-};
-class MenuItem extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.role = MenuItemRole.menuitem;
-    this.checked = false;
-    this.focusSubmenuOnLoad = false;
-    /**
-     * @internal
-     */
-    this.handleMenuItemKeyDown = e => {
-      if (e.defaultPrevented) {
-        return false;
-      }
-      switch (e.key) {
-        case keyEnter:
-        case keySpace:
-          this.invoke();
-          return false;
-        case keyArrowRight:
-          this.expanded && this.submenu ? this.submenu.focus() : this.expandAndFocus();
-          return false;
-        case keyEscape:
-          if (this.expanded) {
-            this.closeSubMenu();
-            return false;
-          }
-          break;
-        case keyArrowLeft:
-          if (this.expanded) {
-            this.closeSubMenu();
-            return false;
-          }
-      }
-      return true;
-    };
-    /**
-     * @internal
-     */
-    this.handleMenuItemClick = e => {
-      if (e.defaultPrevented || this.disabled) {
-        return false;
-      }
-      this.invoke();
-      return false;
-    };
-    /**
-     * @internal
-     */
-    this.submenuLoaded = () => {
-      if (!this.focusSubmenuOnLoad) {
-        return;
-      }
-      this.focusSubmenuOnLoad = false;
-      if (this.submenu) {
-        this.submenu.focus();
-        this.setAttribute("tabindex", "-1");
-      }
-    };
-    /**
-     * @internal
-     */
-    this.handleMouseOver = e => {
-      if (this.disabled || !this.hasSubmenu || this.expanded) {
-        return false;
-      }
-      this.expanded = true;
-      return false;
-    };
-    /**
-     * @internal
-     */
-    this.handleMouseOut = e => {
-      if (!this.expanded || this.contains(document.activeElement)) {
-        return false;
-      }
-      this.expanded = false;
-      return false;
-    };
-    /**
-     * @internal
-     */
-    this.closeSubMenu = () => {
-      this.expanded = false;
-      this.focus();
+    this.closeSubMenu = () => {
+      this.expanded = false;
+      this.focus();
     };
     /**
      * @internal
@@ -8877,23 +7714,28 @@ class MenuItem extends FASTElement {
     });
   }
 }
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   mode: "boolean"
 })], MenuItem.prototype, "disabled", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   mode: "boolean"
 })], MenuItem.prototype, "expanded", 2);
-__decorateClass$d([attr], MenuItem.prototype, "role", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr], MenuItem.prototype, "role", 2);
+__decorateClass$e([attr({
   mode: "boolean"
 })], MenuItem.prototype, "checked", 2);
-__decorateClass$d([attr({
+__decorateClass$e([attr({
   mode: "boolean"
 })], MenuItem.prototype, "hidden", 2);
-__decorateClass$d([observable], MenuItem.prototype, "slottedSubmenu", 2);
-__decorateClass$d([observable], MenuItem.prototype, "submenu", 2);
+__decorateClass$e([observable], MenuItem.prototype, "slottedSubmenu", 2);
+__decorateClass$e([observable], MenuItem.prototype, "submenu", 2);
 applyMixins(MenuItem, StartEnd);
 
+const styles$e = 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}`;
+
 const Checkmark16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
 const chevronRight16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
 function menuItemTemplate(options = {}) {
@@ -8902,23 +7744,287 @@ function menuItemTemplate(options = {}) {
     filter: elements("[role='menu']")
   })}></slot></span></template>`;
 }
-const template$d = menuItemTemplate({
+const template$e = menuItemTemplate({
   checkboxIndicator: Checkmark16Filled,
   expandCollapseGlyph: chevronRight16Filled,
   radioIndicator: Checkmark16Filled
 });
 
+const definition$e = MenuItem.compose({
+  name: `${FluentDesignSystem.prefix}-menu-item`,
+  template: template$e,
+  styles: styles$e
+});
+
+definition$e.define(FluentDesignSystem.registry);
+
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$d(target, key, result);
+  return result;
+};
+const _MenuList = class _MenuList extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.expandedItem = null;
+    /**
+     * The index of the focusable element in the items array
+     * defaults to -1
+     */
+    this.focusIndex = -1;
+    /**
+     * @internal
+     */
+    this.isNestedMenu = () => {
+      return this.parentElement !== null && isHTMLElement(this.parentElement) && this.parentElement.getAttribute("role") === "menuitem";
+    };
+    /**
+     * if focus is moving out of the menu, reset to a stable initial state
+     * @internal
+     */
+    this.handleFocusOut = e => {
+      if (!this.contains(e.relatedTarget) && this.menuItems !== void 0) {
+        this.collapseExpandedItem();
+        const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
+        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+        this.menuItems[focusIndex].setAttribute("tabindex", "0");
+        this.focusIndex = focusIndex;
+      }
+    };
+    this.handleItemFocus = e => {
+      const targetItem = e.target;
+      if (this.menuItems !== void 0 && targetItem !== this.menuItems[this.focusIndex]) {
+        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+        this.focusIndex = this.menuItems.indexOf(targetItem);
+        targetItem.setAttribute("tabindex", "0");
+      }
+    };
+    this.handleExpandedChanged = e => {
+      if (e.defaultPrevented || e.target === null || this.menuItems === void 0 || this.menuItems.indexOf(e.target) < 0) {
+        return;
+      }
+      e.preventDefault();
+      const changedItem = e.target;
+      if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
+        this.expandedItem = null;
+        return;
+      }
+      if (changedItem.expanded) {
+        if (this.expandedItem !== null && this.expandedItem !== changedItem) {
+          this.expandedItem.expanded = false;
+        }
+        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+        this.expandedItem = changedItem;
+        this.focusIndex = this.menuItems.indexOf(changedItem);
+        changedItem.setAttribute("tabindex", "0");
+      }
+    };
+    /**
+     * handle change from child element
+     */
+    this.changeHandler = e => {
+      if (this.menuItems === void 0) {
+        return;
+      }
+      const changedMenuItem = e.target;
+      const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+      if (changeItemIndex === -1) {
+        return;
+      }
+      if (changedMenuItem.role === "menuitemradio" && changedMenuItem.checked === true) {
+        for (let i = changeItemIndex - 1; i >= 0; --i) {
+          const item = this.menuItems[i];
+          const role = item.getAttribute("role");
+          if (role === MenuItemRole.menuitemradio) {
+            item.checked = false;
+          }
+          if (role === "separator") {
+            break;
+          }
+        }
+        const maxIndex = this.menuItems.length - 1;
+        for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
+          const item = this.menuItems[i];
+          const role = item.getAttribute("role");
+          if (role === MenuItemRole.menuitemradio) {
+            item.checked = false;
+          }
+          if (role === "separator") {
+            break;
+          }
+        }
+      }
+    };
+    /**
+     * check if the item is a menu item
+     */
+    this.isMenuItemElement = el => {
+      return el instanceof MenuItem || isHTMLElement(el) && el.getAttribute("role") in _MenuList.focusableElementRoles;
+    };
+    /**
+     * check if the item is focusable
+     */
+    this.isFocusableElement = el => {
+      return this.isMenuItemElement(el);
+    };
+  }
+  itemsChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected && this.menuItems !== void 0) {
+      this.setItems();
+    }
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    Updates.enqueue(() => {
+      this.setItems();
+    });
+    this.addEventListener("change", this.changeHandler);
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeItemListeners();
+    this.menuItems = void 0;
+    this.removeEventListener("change", this.changeHandler);
+  }
+  /**
+   * Focuses the first item in the menu.
+   *
+   * @public
+   */
+  focus() {
+    this.setFocus(0, 1);
+  }
+  /**
+   * Collapses any expanded menu items.
+   *
+   * @public
+   */
+  collapseExpandedItem() {
+    if (this.expandedItem !== null) {
+      this.expandedItem.expanded = false;
+      this.expandedItem = null;
+    }
+  }
+  /**
+   * @internal
+   */
+  handleMenuKeyDown(e) {
+    if (e.defaultPrevented || this.menuItems === void 0) {
+      return;
+    }
+    switch (e.key) {
+      case keyArrowDown:
+        this.setFocus(this.focusIndex + 1, 1);
+        return;
+      case keyArrowUp:
+        this.setFocus(this.focusIndex - 1, -1);
+        return;
+      case keyEnd:
+        this.setFocus(this.menuItems.length - 1, -1);
+        return;
+      case keyHome:
+        this.setFocus(0, 1);
+        return;
+      default:
+        return true;
+    }
+  }
+  removeItemListeners(items = this.items) {
+    items.forEach(item => {
+      item.removeEventListener("focus", this.handleItemFocus);
+      item.removeEventListener("expanded-changed", this.handleExpandedChanged);
+      Observable.getNotifier(item).unsubscribe(this, "hidden");
+    });
+  }
+  static elementIndent(el) {
+    const role = el.getAttribute("role");
+    const startSlot = el.querySelector("[slot=start]");
+    if (role && role !== MenuItemRole.menuitem) {
+      return startSlot ? 2 : 1;
+    }
+    return startSlot ? 1 : 0;
+  }
+  setItems() {
+    const children = Array.from(this.children);
+    this.removeItemListeners(children);
+    children.forEach(child => Observable.getNotifier(child).subscribe(this, "hidden"));
+    const newItems = children.filter(child => !child.hasAttribute("hidden"));
+    this.menuItems = newItems;
+    const menuItems = this.menuItems.filter(this.isMenuItemElement);
+    if (menuItems.length) {
+      this.focusIndex = 0;
+    }
+    menuItems.forEach((item, index) => {
+      item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+      item.addEventListener("expanded-change", this.handleExpandedChanged);
+      item.addEventListener("focus", this.handleItemFocus);
+    });
+    const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
+    filteredMenuListItems?.forEach((item, index) => {
+      const indent = filteredMenuListItems?.reduce((accum, current) => {
+        const elementValue = _MenuList.elementIndent(current);
+        return Math.max(accum, elementValue);
+      }, 0);
+      if (item instanceof MenuItem) {
+        item.setAttribute("data-indent", `${indent}`);
+      }
+    });
+  }
+  handleChange(source, propertyName) {
+    if (propertyName === "hidden") {
+      this.setItems();
+    }
+  }
+  setFocus(focusIndex, adjustment) {
+    if (this.menuItems === void 0) {
+      return;
+    }
+    while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
+      const child = this.menuItems[focusIndex];
+      if (this.isFocusableElement(child)) {
+        if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
+          this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+        }
+        this.focusIndex = focusIndex;
+        child.setAttribute("tabindex", "0");
+        child.focus();
+        break;
+      }
+      focusIndex += adjustment;
+    }
+  }
+};
+_MenuList.focusableElementRoles = MenuItemRole;
+__decorateClass$d([observable], _MenuList.prototype, "items", 2);
+let MenuList = _MenuList;
+
 const styles$d = css`
-  ${display("grid")}
+  ${display("flex")}
 
-  :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{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}`;
 
-const definition$d = MenuItem.compose({
-  name: `${FluentDesignSystem.prefix}-menu-item`,
+function menuTemplate$1() {
+  return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" role="menu" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot ${slotted("items")}></slot></template>`;
+}
+const template$d = menuTemplate$1();
+
+const definition$d = MenuList.compose({
+  name: `${FluentDesignSystem.prefix}-menu-list`,
   template: template$d,
   styles: styles$d
 });
 
+definition$d.define(FluentDesignSystem.registry);
+
 var __defProp$c = Object.defineProperty;
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
 var __decorateClass$c = (decorators, target, key, kind) => {
@@ -8927,263 +8033,383 @@ var __decorateClass$c = (decorators, target, key, kind) => {
   if (kind && result) __defProp$c(target, key, result);
   return result;
 };
-const _MenuList = class _MenuList extends FASTElement {
+class Menu extends FASTElement {
   constructor() {
     super(...arguments);
-    this.expandedItem = null;
+    this.openOnHover = false;
+    this.openOnContext = false;
+    this.closeOnScroll = false;
+    this.persistOnItemClick = false;
+    this.open = false;
+    this.slottedMenuList = [];
+    this.slottedTriggers = [];
     /**
-     * The index of the focusable element in the items array
-     * defaults to -1
+     * Toggles the open state of the menu.
+     * @public
      */
-    this.focusIndex = -1;
+    this.toggleMenu = () => {
+      if (this.open) {
+        this.closeMenu();
+      } else {
+        this.openMenu();
+      }
+    };
     /**
-     * @internal
+     * Closes the menu.
+     * @public
      */
-    this.isNestedMenu = () => {
-      return this.parentElement !== null && isHTMLElement(this.parentElement) && this.parentElement.getAttribute("role") === "menuitem";
+    this.closeMenu = () => {
+      this.open = false;
+      if (this.closeOnScroll) {
+        document.removeEventListener("scroll", this.closeMenu);
+      }
     };
     /**
-     * if focus is moving out of the menu, reset to a stable initial state
-     * @internal
+     * Opens the menu.
+     * @public
      */
-    this.handleFocusOut = e => {
-      if (!this.contains(e.relatedTarget) && this.menuItems !== void 0) {
-        this.collapseExpandedItem();
-        const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
-        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        this.menuItems[focusIndex].setAttribute("tabindex", "0");
-        this.focusIndex = focusIndex;
+    this.openMenu = e => {
+      this.open = true;
+      if (e && this.openOnContext) {
+        e.preventDefault();
       }
-    };
-    this.handleItemFocus = e => {
-      const targetItem = e.target;
-      if (this.menuItems !== void 0 && targetItem !== this.menuItems[this.focusIndex]) {
-        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        this.focusIndex = this.menuItems.indexOf(targetItem);
-        targetItem.setAttribute("tabindex", "0");
+      if (this.closeOnScroll) {
+        document.addEventListener("scroll", this.closeMenu);
       }
     };
-    this.handleExpandedChanged = e => {
-      if (e.defaultPrevented || e.target === null || this.menuItems === void 0 || this.menuItems.indexOf(e.target) < 0) {
-        return;
-      }
-      e.preventDefault();
-      const changedItem = e.target;
-      if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
-        this.expandedItem = null;
-        return;
-      }
-      if (changedItem.expanded) {
-        if (this.expandedItem !== null && this.expandedItem !== changedItem) {
-          this.expandedItem.expanded = false;
-        }
-        this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
-        this.expandedItem = changedItem;
-        this.focusIndex = this.menuItems.indexOf(changedItem);
-        changedItem.setAttribute("tabindex", "0");
-      }
+    /**
+     * The task to set the positioning of the menu.
+     * @internal
+     */
+    this.setPositioningTask = () => {
+      this.setPositioning();
     };
     /**
-     * handle change from child element
+     * Handles keyboard interaction for the trigger. Toggles the menu when the Space or Enter key is pressed. If the menu
+     * is open, focuses on the menu list.
+     *
+     * @param e - the keyboard event
+     * @public
      */
-    this.changeHandler = e => {
-      if (this.menuItems === void 0) {
-        return;
-      }
-      const changedMenuItem = e.target;
-      const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
-      if (changeItemIndex === -1) {
+    this.handleTriggerKeydown = e => {
+      if (e.defaultPrevented) {
         return;
       }
-      if (changedMenuItem.role === "menuitemradio" && changedMenuItem.checked === true) {
-        for (let i = changeItemIndex - 1; i >= 0; --i) {
-          const item = this.menuItems[i];
-          const role = item.getAttribute("role");
-          if (role === MenuItemRole.menuitemradio) {
-            item.checked = false;
-          }
-          if (role === "separator") {
-            break;
-          }
-        }
-        const maxIndex = this.menuItems.length - 1;
-        for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
-          const item = this.menuItems[i];
-          const role = item.getAttribute("role");
-          if (role === MenuItemRole.menuitemradio) {
-            item.checked = false;
-          }
-          if (role === "separator") {
-            break;
+      const key = e.key;
+      switch (key) {
+        case keySpace:
+        case keyEnter:
+          e.preventDefault();
+          this.toggleMenu();
+          if (this.open) {
+            this.focusMenuList();
           }
-        }
+          break;
+        default:
+          return true;
       }
     };
     /**
-     * check if the item is a menu item
-     */
-    this.isMenuItemElement = el => {
-      return el instanceof MenuItem || isHTMLElement(el) && el.getAttribute("role") in _MenuList.focusableElementRoles;
-    };
-    /**
-     * check if the item is focusable
+     * Handles document click events to close the menu when a click occurs outside of the menu or the trigger.
+     * @internal
+     * @param e - The event triggered on document click.
      */
-    this.isFocusableElement = el => {
-      return this.isMenuItemElement(el);
+    this.handleDocumentClick = e => {
+      if (e && !e.composedPath().includes(this._menuList) && !e.composedPath().includes(this._trigger)) {
+        this.closeMenu();
+      }
     };
   }
-  itemsChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected && this.menuItems !== void 0) {
-      this.setItems();
-    }
-  }
   /**
-   * @internal
+   * Called when the element is connected to the DOM.
+   * Sets up the component.
+   * @public
    */
   connectedCallback() {
     super.connectedCallback();
-    Updates.enqueue(() => {
-      this.setItems();
+    Updates.enqueue(() => this.setComponent());
+  }
+  /**
+   * Called when the element is disconnected from the DOM.
+   * Removes event listeners.
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanup?.();
+    this.removeListeners();
+  }
+  /**
+   * Sets the component.
+   * Sets the trigger and menu list elements and adds event listeners.
+   * @public
+   */
+  setComponent() {
+    if (this.$fastController.isConnected && this.slottedMenuList.length && this.slottedTriggers.length) {
+      this._trigger = this.slottedTriggers[0];
+      this._menuList = this.slottedMenuList[0];
+      this._trigger.setAttribute("aria-haspopup", "true");
+      this._trigger.setAttribute("aria-expanded", `${this.open}`);
+      this.addListeners();
+    }
+  }
+  /**
+   * Focuses on the menu list.
+   * @public
+   */
+  focusMenuList() {
+    if (this.open && this._menuList) {
+      Updates.enqueue(() => {
+        this._menuList.focus();
+      });
+    }
+  }
+  /**
+   * Focuses on the menu trigger.
+   * @public
+   */
+  focusTrigger() {
+    if (!this.open && this._trigger) {
+      Updates.enqueue(() => {
+        this._trigger.focus();
+      });
+    }
+  }
+  /**
+   * Called whenever the open state changes.
+   * Updates the 'aria-expanded' attribute and sets the positioning of the menu.
+   * Sets menu list position
+   * emits openChanged event
+   *
+   * @param oldValue - The previous value of 'open'.
+   * @param newValue - The new value of 'open'.
+   * @public
+   */
+  openChanged(oldValue, newValue) {
+    if (this.$fastController.isConnected && this._trigger instanceof HTMLElement) {
+      this._trigger.setAttribute("aria-expanded", `${this.open}`);
+      if (this._menuList && this.open) {
+        Updates.enqueue(this.setPositioningTask);
+      }
+    }
+    this.cleanup?.();
+    this.$emit("onOpenChange", {
+      open: newValue
     });
-    this.addEventListener("change", this.changeHandler);
   }
   /**
-   * @internal
+   * Called whenever the 'openOnHover' property changes.
+   * Adds or removes a 'mouseover' event listener to the trigger based on the new value.
+   *
+   * @param oldValue - The previous value of 'openOnHover'.
+   * @param newValue - The new value of 'openOnHover'.
+   * @public
+   */
+  openOnHoverChanged(oldValue, newValue) {
+    if (newValue) {
+      this._trigger?.addEventListener("mouseover", this.openMenu);
+    } else {
+      this._trigger?.removeEventListener("mouseover", this.openMenu);
+    }
+  }
+  /**
+   * Called whenever the 'persistOnItemClick' property changes.
+   * Adds or removes a 'click' event listener to the menu list based on the new value.
+   * @public
+   * @param oldValue - The previous value of 'persistOnItemClick'.
+   * @param newValue - The new value of 'persistOnItemClick'.
    */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeItemListeners();
-    this.menuItems = void 0;
-    this.removeEventListener("change", this.changeHandler);
+  persistOnItemClickChanged(oldValue, newValue) {
+    if (!newValue) {
+      this._menuList?.addEventListener("click", this.closeMenu);
+    } else {
+      this._menuList?.removeEventListener("click", this.closeMenu);
+    }
   }
   /**
-   * Focuses the first item in the menu.
-   *
+   * Called whenever the 'openOnContext' property changes.
+   * Adds or removes a 'contextmenu' event listener to the trigger based on the new value.
    * @public
+   * @param oldValue - The previous value of 'openOnContext'.
+   * @param newValue - The new value of 'openOnContext'.
    */
-  focus() {
-    this.setFocus(0, 1);
+  openOnContextChanged(oldValue, newValue) {
+    if (newValue) {
+      this._trigger?.addEventListener("contextmenu", this.openMenu);
+    } else {
+      this._trigger?.removeEventListener("contextmenu", this.openMenu);
+    }
   }
   /**
-   * Collapses any expanded menu items.
-   *
+   * Called whenever the 'closeOnScroll' property changes.
+   * Adds or removes a 'closeOnScroll' event listener to the trigger based on the new value.
    * @public
+   * @param oldValue - The previous value of 'closeOnScroll'.
+   * @param newValue - The new value of 'closeOnScroll'.
    */
-  collapseExpandedItem() {
-    if (this.expandedItem !== null) {
-      this.expandedItem.expanded = false;
-      this.expandedItem = null;
+  closeOnScrollChanged(oldValue, newValue) {
+    if (newValue) {
+      document.addEventListener("scroll", this.closeMenu);
+    } else {
+      document.removeEventListener("scroll", this.closeMenu);
     }
   }
   /**
+   * Sets the positioning of the menu.
    * @internal
    */
-  handleMenuKeyDown(e) {
-    if (e.defaultPrevented || this.menuItems === void 0) {
-      return;
-    }
-    switch (e.key) {
-      case keyArrowDown:
-        this.setFocus(this.focusIndex + 1, 1);
-        return;
-      case keyArrowUp:
-        this.setFocus(this.focusIndex - 1, -1);
-        return;
-      case keyEnd:
-        this.setFocus(this.menuItems.length - 1, -1);
-        return;
-      case keyHome:
-        this.setFocus(0, 1);
-        return;
-      default:
-        return true;
+  setPositioning() {
+    if (this.$fastController.isConnected && this._menuList && this.open && this._trigger) {
+      this.cleanup = P(this, this.positioningContainer, async () => {
+        const {
+          middlewareData,
+          x,
+          y
+        } = await z(this._trigger, this.positioningContainer, {
+          placement: "bottom",
+          strategy: "fixed",
+          middleware: [b$1(), k({
+            apply: ({
+              availableHeight,
+              rects
+            }) => {
+              this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
+                maxHeight: `${availableHeight}px`,
+                width: `${rects.reference.width}px`
+              });
+            }
+          }), P$1()]
+        });
+        if (middlewareData.hide?.referenceHidden) {
+          this.open = false;
+          return;
+        }
+        this.positioningContainer?.style && Object.assign(this.positioningContainer.style, {
+          position: "fixed",
+          top: "0",
+          left: "0",
+          transform: `translate(${x}px, ${y}px)`
+        });
+      });
     }
   }
-  removeItemListeners(items = this.items) {
-    items.forEach(item => {
-      item.removeEventListener("focus", this.handleItemFocus);
-      item.removeEventListener("expanded-changed", this.handleExpandedChanged);
-      Observable.getNotifier(item).unsubscribe(this, "hidden");
-    });
-  }
-  static elementIndent(el) {
-    const role = el.getAttribute("role");
-    const startSlot = el.querySelector("[slot=start]");
-    if (role && role !== MenuItemRole.menuitem) {
-      return startSlot ? 2 : 1;
+  /**
+   * Adds event listeners.
+   * Adds click and keydown event listeners to the trigger and a click event listener to the document.
+   * If 'openOnHover' is true, adds a 'mouseover' event listener to the trigger.
+   * @public
+   */
+  addListeners() {
+    document.addEventListener("click", this.handleDocumentClick);
+    this._trigger?.addEventListener("keydown", this.handleTriggerKeydown);
+    if (!this.persistOnItemClick) {
+      this._menuList?.addEventListener("click", this.closeMenu);
     }
-    return startSlot ? 1 : 0;
-  }
-  setItems() {
-    const children = Array.from(this.children);
-    this.removeItemListeners(children);
-    children.forEach(child => Observable.getNotifier(child).subscribe(this, "hidden"));
-    const newItems = children.filter(child => !child.hasAttribute("hidden"));
-    this.menuItems = newItems;
-    const menuItems = this.menuItems.filter(this.isMenuItemElement);
-    if (menuItems.length) {
-      this.focusIndex = 0;
+    if (this.openOnHover) {
+      this._trigger?.addEventListener("mouseover", this.openMenu);
+    } else if (this.openOnContext) {
+      this._trigger?.addEventListener("contextmenu", this.openMenu);
+    } else {
+      this._trigger?.addEventListener("click", this.toggleMenu);
     }
-    menuItems.forEach((item, index) => {
-      item.setAttribute("tabindex", index === 0 ? "0" : "-1");
-      item.addEventListener("expanded-change", this.handleExpandedChanged);
-      item.addEventListener("focus", this.handleItemFocus);
-    });
-    const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
-    filteredMenuListItems?.forEach((item, index) => {
-      const indent = filteredMenuListItems?.reduce((accum, current) => {
-        const elementValue = _MenuList.elementIndent(current);
-        return Math.max(accum, elementValue);
-      }, 0);
-      if (item instanceof MenuItem) {
-        item.setAttribute("data-indent", `${indent}`);
-      }
-    });
   }
-  handleChange(source, propertyName) {
-    if (propertyName === "hidden") {
-      this.setItems();
+  /**
+   * Removes event listeners.
+   * Removes click and keydown event listeners from the trigger and a click event listener from the document.
+   * Also removes 'mouseover' event listeners from the trigger.
+   * @internal
+   */
+  removeListeners() {
+    document.removeEventListener("click", this.handleDocumentClick);
+    this._trigger?.removeEventListener("keydown", this.handleTriggerKeydown);
+    if (!this.persistOnItemClick) {
+      this._menuList?.removeEventListener("click", this.closeMenu);
+    }
+    if (this.openOnHover) {
+      this._trigger?.removeEventListener("mouseover", this.openMenu);
+    }
+    if (this.openOnContext) {
+      this._trigger?.removeEventListener("contextmenu", this.openMenu);
+    } else {
+      this._trigger?.removeEventListener("click", this.toggleMenu);
     }
   }
-  setFocus(focusIndex, adjustment) {
-    if (this.menuItems === void 0) {
+  /**
+   * Handles keyboard interaction for the menu. Closes the menu and focuses on the trigger when the Escape key is
+   * pressed. Closes the menu when the Tab key is pressed.
+   *
+   * @param e - the keyboard event
+   * @public
+   */
+  handleMenuKeydown(e) {
+    if (e.defaultPrevented) {
       return;
     }
-    while (focusIndex >= 0 && focusIndex < this.menuItems.length) {
-      const child = this.menuItems[focusIndex];
-      if (this.isFocusableElement(child)) {
-        if (this.focusIndex > -1 && this.menuItems.length >= this.focusIndex - 1) {
-          this.menuItems[this.focusIndex].setAttribute("tabindex", "-1");
+    const key = e.key;
+    switch (key) {
+      case keyEscape:
+        e.preventDefault();
+        if (this.open) {
+          this.closeMenu();
+          this.focusTrigger();
         }
-        this.focusIndex = focusIndex;
-        child.setAttribute("tabindex", "0");
-        child.focus();
         break;
-      }
-      focusIndex += adjustment;
+      case keyTab:
+        if (this.open) {
+          this.closeMenu();
+        }
+        if (e.shiftKey) {
+          this.focusTrigger();
+        }
+      default:
+        return true;
     }
   }
-};
-_MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$c([observable], _MenuList.prototype, "items", 2);
-let MenuList = _MenuList;
-
-function menuTemplate() {
-  return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" role="menu" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot ${slotted("items")}></slot></template>`;
 }
-const template$c = menuTemplate();
+__decorateClass$c([observable, attr({
+  attribute: "open-on-hover",
+  mode: "boolean"
+})], Menu.prototype, "openOnHover", 2);
+__decorateClass$c([observable, attr({
+  attribute: "open-on-context",
+  mode: "boolean"
+})], Menu.prototype, "openOnContext", 2);
+__decorateClass$c([observable, attr({
+  attribute: "close-on-scroll",
+  mode: "boolean"
+})], Menu.prototype, "closeOnScroll", 2);
+__decorateClass$c([observable, attr({
+  attribute: "persist-on-item-click",
+  mode: "boolean"
+})], Menu.prototype, "persistOnItemClick", 2);
+__decorateClass$c([observable, attr({
+  mode: "boolean"
+})], Menu.prototype, "open", 2);
+__decorateClass$c([observable], Menu.prototype, "slottedMenuList", 2);
+__decorateClass$c([observable], Menu.prototype, "slottedTriggers", 2);
 
 const styles$c = css`
-  ${display("flex")}
+  :host{position:relative;z-index:var(--z-index-menu,1)}.positioning-container{position:fixed;top:0;left:0;transform:translate(0,0)}`;
 
-  :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}`;
+function menuTemplate() {
+  return html`<template ?open-on-hover="${x => x.openOnHover}" ?open-on-context="${x => x.openOnContext}" ?close-on-scroll="${x => x.closeOnScroll}" ?persist-on-item-click="${x => x.persistOnItemClick}" @keydown="${(x, c) => x.handleMenuKeydown(c.event)}"><slot name="trigger" ${slotted({
+    property: "slottedTriggers",
+    filter: elements()
+  })}></slot><span ${ref("positioningContainer")} part="positioning-container" class="positioning-container" ?hidden="${x => !x.open}"><slot ${slotted({
+    property: "slottedMenuList",
+    filter: elements()
+  })}></slot></span></template>`;
+}
+const template$c = menuTemplate();
 
-const definition$c = MenuList.compose({
-  name: `${FluentDesignSystem.prefix}-menu-list`,
+const definition$c = Menu.compose({
+  name: `${FluentDesignSystem.prefix}-menu`,
   template: template$c,
   styles: styles$c
 });
 
+definition$c.define(FluentDesignSystem.registry);
+
 var __defProp$b = Object.defineProperty;
 var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
 var __decorateClass$b = (decorators, target, key, kind) => {
@@ -9251,24 +8477,10 @@ class ProgressBar extends BaseProgress {
   }
 }
 __decorateClass$a([attr], ProgressBar.prototype, "thickness", 2);
-__decorateClass$a([attr], ProgressBar.prototype, "shape", 2);
-__decorateClass$a([attr({
-  attribute: "validation-state"
-})], ProgressBar.prototype, "validationState", 2);
-
-const ProgressBarThickness = {
-  medium: "medium",
-  large: "large"
-};
-const ProgressBarShape = {
-  rounded: "rounded",
-  square: "square"
-};
-const ProgressBarValidationState = {
-  success: "success",
-  warning: "warning",
-  error: "error"
-};
+__decorateClass$a([attr], ProgressBar.prototype, "shape", 2);
+__decorateClass$a([attr({
+  attribute: "validation-state"
+})], ProgressBar.prototype, "validationState", 2);
 
 const styles$b = css`
   ${display("flex")}
@@ -9300,6 +8512,8 @@ const definition$b = ProgressBar.compose({
   styles: styles$b
 });
 
+definition$b.define(FluentDesignSystem.registry);
+
 class _Radio extends FASTElement {}
 class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
   constructor() {
@@ -9383,28 +8597,6 @@ class Radio extends FormAssociatedRadio {
 __decorateClass$9([observable], Radio.prototype, "name", 2);
 __decorateClass$9([observable], Radio.prototype, "defaultSlottedNodes", 2);
 
-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 .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}`));
-
-function radioTemplate(options = {}) {
-  return html`<template role="radio" aria-checked="${x => x.checked}" aria-required="${x => x.required}" aria-disabled="${x => x.disabled}" @keypress="${(x, c) => x.keypressHandler(c.event)}"><div part="control" class="control"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot></div><label part="label" class="${x => ["label", !x.defaultSlottedNodes?.length && "label__hidden"].filter(Boolean).join(" ")}"><slot ${slotted({
-    property: "defaultSlottedNodes",
-    filter: whitespaceFilter
-  })}></slot></label></template>`;
-}
-const template$a = radioTemplate({
-  checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`
-});
-
-const definition$a = Radio.compose({
-  name: `${FluentDesignSystem.prefix}-radio`,
-  template: template$a,
-  styles: styles$a
-});
-
 const RadioGroupOrientation = Orientation;
 
 var __defProp$8 = Object.defineProperty;
@@ -9732,7 +8924,7 @@ __decorateClass$8([attr], RadioGroup.prototype, "orientation", 2);
 __decorateClass$8([observable], RadioGroup.prototype, "childItems", 2);
 __decorateClass$8([observable], RadioGroup.prototype, "slottedRadioButtons", 2);
 
-const styles$9 = css`
+const styles$a = 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}`;
@@ -9743,19 +8935,41 @@ function radioGroupTemplate() {
     filter: elements("[role=radio]")
   })}></slot></div></template>`;
 }
-const template$9 = radioGroupTemplate();
+const template$a = radioGroupTemplate();
 
-const definition$9 = RadioGroup.compose({
+const definition$a = RadioGroup.compose({
   name: `${FluentDesignSystem.prefix}-radio-group`,
+  template: template$a,
+  styles: styles$a
+});
+
+definition$a.define(FluentDesignSystem.registry);
+
+const styles$9 = 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 .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}`));
+
+function radioTemplate(options = {}) {
+  return html`<template role="radio" aria-checked="${x => x.checked}" aria-required="${x => x.required}" aria-disabled="${x => x.disabled}" @keypress="${(x, c) => x.keypressHandler(c.event)}"><div part="control" class="control"><slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot></div><label part="label" class="${x => ["label", !x.defaultSlottedNodes?.length && "label__hidden"].filter(Boolean).join(" ")}"><slot ${slotted({
+    property: "defaultSlottedNodes",
+    filter: whitespaceFilter
+  })}></slot></label></template>`;
+}
+const template$9 = radioTemplate({
+  checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`
+});
+
+const definition$9 = Radio.compose({
+  name: `${FluentDesignSystem.prefix}-radio`,
   template: template$9,
   styles: styles$9
 });
 
-const SliderSize = {
-  small: "small",
-  medium: "medium"
-};
-const SliderOrientation = Orientation;
+definition$9.define(FluentDesignSystem.registry);
+
+Orientation;
 const SliderMode = {
   singleValue: "single-value"
 };
@@ -10155,6 +9369,8 @@ const definition$8 = Slider.compose({
   styles: styles$8
 });
 
+definition$8.define(FluentDesignSystem.registry);
+
 var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
 var __decorateClass$6 = (decorators, target, key, kind) => {
@@ -10178,33 +9394,21 @@ class Spinner extends FASTElement {
 __decorateClass$6([attr], Spinner.prototype, "size", 2);
 __decorateClass$6([attr], Spinner.prototype, "appearance", 2);
 
-const SpinnerAppearance = {
-  primary: "primary",
-  inverted: "inverted"
-};
-const SpinnerSize = {
-  tiny: "tiny",
-  extraSmall: "extra-small",
-  small: "small",
-  medium: "medium",
-  large: "large",
-  extraLarge: "extra-large",
-  huge: "huge"
-};
-
-const template$7 = html`<slot name="indicator"><svg class="progress" part="progress" viewBox="0 0 16 16"><circle class="background" cx="8px" cy="8px" r="7px"></circle><circle class="indicator" cx="8px" cy="8px" r="7px"></circle></svg></slot>`;
-
 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)}.indicator{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']) .indicator{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)}}`;
 
+const template$7 = html`<slot name="indicator"><svg class="progress" part="progress" viewBox="0 0 16 16"><circle class="background" cx="8px" cy="8px" r="7px"></circle><circle class="indicator" cx="8px" cy="8px" r="7px"></circle></svg></slot>`;
+
 const definition$7 = Spinner.compose({
   name: `${FluentDesignSystem.prefix}-spinner`,
   template: template$7,
   styles: styles$7
 });
 
+definition$7.define(FluentDesignSystem.registry);
+
 class _Switch extends FASTElement {}
 class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
   constructor() {
@@ -10271,12 +9475,6 @@ __decorateClass$5([attr({
 })], Switch.prototype, "readOnly", 2);
 __decorateClass$5([observable], Switch.prototype, "defaultSlottedNodes", 2);
 
-const SwitchLabelPosition = {
-  above: "above",
-  after: "after",
-  before: "before"
-};
-
 function switchTemplate(options = {}) {
   return html`<template role="switch" aria-checked="${x => x.checked}" aria-disabled="${x => x.disabled}" aria-readonly="${x => x.readOnly}" tabindex="${x => x.disabled ? null : 0}" @keypress="${(x, c) => x.keypressHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><label part="label" class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"><slot ${slotted("defaultSlottedNodes")}></slot></label><div part="switch" class="switch"><slot name="switch">${staticallyCompose(options.switch)}</slot></div></template>`;
 }
@@ -10296,6 +9494,28 @@ const definition$6 = Switch.compose({
   styles: styles$6
 });
 
+definition$6.define(FluentDesignSystem.registry);
+
+class TabPanel extends FASTElement {}
+
+function tabPanelTemplate() {
+  return html`<template slot="tabpanel" role="tabpanel"><slot></slot></template>`;
+}
+const template$5 = tabPanelTemplate();
+
+const styles$5 = css`
+  ${display("block")}
+
+  :host{box-sizing:border-box;padding:${spacingHorizontalM} ${spacingHorizontalMNudge}}`;
+
+const definition$5 = TabPanel.compose({
+  name: `${FluentDesignSystem.prefix}-tab-panel`,
+  template: template$5,
+  styles: styles$5
+});
+
+definition$5.define(FluentDesignSystem.registry);
+
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
 var __decorateClass$4 = (decorators, target, key, kind) => {
@@ -10323,47 +9543,26 @@ applyMixins(Tab, StartEnd);
 function tabTemplate(options = {}) {
   return html`<template slot="tab" role="tab" aria-disabled="${x => x.disabled}">${startSlotTemplate(options)}<span class="tab-content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
-const template$5 = tabTemplate({});
+const template$4 = tabTemplate({});
 
-const styles$5 = css`
+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([aria-selected='true'])::after{background-color:Highlight}`));
 
-const definition$5 = Tab.compose({
+const definition$4 = Tab.compose({
   name: `${FluentDesignSystem.prefix}-tab`,
-  template: template$5,
-  styles: styles$5
-});
-
-class TabPanel extends FASTElement {}
-
-function tabPanelTemplate() {
-  return html`<template slot="tabpanel" role="tabpanel"><slot></slot></template>`;
-}
-const template$4 = tabPanelTemplate();
-
-const styles$4 = css`
-  ${display("block")}
-
-  :host{box-sizing:border-box;padding:${spacingHorizontalM} ${spacingHorizontalMNudge}}`;
-
-const definition$4 = TabPanel.compose({
-  name: `${FluentDesignSystem.prefix}-tab-panel`,
   template: template$4,
   styles: styles$4
 });
 
+definition$4.define(FluentDesignSystem.registry);
+
 const TabsAppearance = {
   subtle: "subtle",
   transparent: "transparent"
 };
-const TabsSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
 const TabsOrientation = Orientation;
 
 var __defProp$3 = Object.defineProperty;
@@ -10681,10 +9880,10 @@ class Tabs extends BaseTabs {
     } else return this.previousActiveTabData.height / tab.getBoundingClientRect().height;
   }
   /**
-   * applyUpdatedCSSValues
+   * Calculates and applies updated values to CSS variables.
    *
-   * calculates and applies updated values to CSS variables
-   * @param tab
+   * @param tab - the tab element to apply the updated values to
+   * @internal
    */
   applyUpdatedCSSValues(tab) {
     this.calculateAnimationProperties(tab);
@@ -10692,9 +9891,11 @@ class Tabs extends BaseTabs {
     this.setTabOffsetCSSVar();
   }
   /**
-   * animationLoop
-   * runs through all the operations required for setting the tab active indicator to its starting location, ending location, and applying the animated css class to the tab.
-   * @param tab
+   * Runs through all the operations required for setting the tab active indicator to its starting location, ending
+   * location, and applying the animated css class to the tab.
+   *
+   * @param tab - the tab element to apply the updated values to
+   * @internal
    */
   animationLoop(tab) {
     tab.setAttribute("data-animate", "false");
@@ -10704,8 +9905,10 @@ class Tabs extends BaseTabs {
     tab.setAttribute("data-animate", "true");
   }
   /**
-   * setTabData
-   * sets the data from the active tab onto the class. used for making all the animation calculations for the active tab indicator.
+   * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
+   * tab indicator.
+   *
+   * @internal
    */
   setTabData() {
     if (this.tabs && this.tabs.length > 0) {
@@ -10769,102 +9972,8 @@ const definition$3 = Tabs.compose({
   styles: styles$3
 });
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$2(target, key, result);
-  return result;
-};
-class Text extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.nowrap = false;
-    this.truncate = false;
-    this.italic = false;
-    this.underline = false;
-    this.strikethrough = false;
-    this.block = false;
-  }
-}
-__decorateClass$2([attr({
-  mode: "boolean"
-})], Text.prototype, "nowrap", 2);
-__decorateClass$2([attr({
-  mode: "boolean"
-})], Text.prototype, "truncate", 2);
-__decorateClass$2([attr({
-  mode: "boolean"
-})], Text.prototype, "italic", 2);
-__decorateClass$2([attr({
-  mode: "boolean"
-})], Text.prototype, "underline", 2);
-__decorateClass$2([attr({
-  mode: "boolean"
-})], Text.prototype, "strikethrough", 2);
-__decorateClass$2([attr({
-  mode: "boolean"
-})], Text.prototype, "block", 2);
-__decorateClass$2([attr], Text.prototype, "size", 2);
-__decorateClass$2([attr], Text.prototype, "font", 2);
-__decorateClass$2([attr], Text.prototype, "weight", 2);
-__decorateClass$2([attr], Text.prototype, "align", 2);
-
-const TextSize = {
-  _100: "100",
-  _200: "200",
-  _300: "300",
-  _400: "400",
-  _500: "500",
-  _600: "600",
-  _700: "700",
-  _800: "800",
-  _900: "900",
-  _1000: "1000"
-};
-const TextFont = {
-  base: "base",
-  numeric: "numeric",
-  monospace: "monospace"
-};
-const TextWeight = {
-  medium: "medium",
-  regular: "regular",
-  semibold: "semibold",
-  bold: "bold"
-};
-const TextAlign = {
-  start: "start",
-  end: "end",
-  center: "center",
-  justify: "justify"
-};
-
-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}`;
-
-const definition$2 = Text.compose({
-  name: `${FluentDesignSystem.prefix}-text`,
-  template: template$2,
-  styles: styles$2
-});
+definition$3.define(FluentDesignSystem.registry);
 
-const TextInputControlSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
-const TextInputAppearance = {
-  outline: "outline",
-  underline: "underline",
-  filledLighter: "filled-lighter",
-  filledDarker: "filled-darker"
-};
 const TextInputType = {
   email: "email",
   password: "password",
@@ -10874,12 +9983,12 @@ const TextInputType = {
 };
 const ImplicitSubmissionBlockingTypes = ["date", "datetime-local", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week"];
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
 class TextInput extends FASTElement {
@@ -11132,60 +10241,60 @@ class TextInput extends FASTElement {
  * @public
  */
 TextInput.formAssociated = true;
-__decorateClass$1([attr], TextInput.prototype, "appearance", 2);
-__decorateClass$1([attr], TextInput.prototype, "autocomplete", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr], TextInput.prototype, "appearance", 2);
+__decorateClass$2([attr], TextInput.prototype, "autocomplete", 2);
+__decorateClass$2([attr({
   mode: "boolean"
 })], TextInput.prototype, "autofocus", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   attribute: "control-size"
 })], TextInput.prototype, "controlSize", 2);
-__decorateClass$1([observable], TextInput.prototype, "defaultSlottedNodes", 2);
-__decorateClass$1([attr], TextInput.prototype, "dirname", 2);
-__decorateClass$1([attr({
+__decorateClass$2([observable], TextInput.prototype, "defaultSlottedNodes", 2);
+__decorateClass$2([attr], TextInput.prototype, "dirname", 2);
+__decorateClass$2([attr({
   mode: "boolean"
 })], TextInput.prototype, "disabled", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   attribute: "form"
 })], TextInput.prototype, "formAttribute", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   attribute: "value",
   mode: "fromView"
 })], TextInput.prototype, "initialValue", 2);
-__decorateClass$1([attr], TextInput.prototype, "list", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr], TextInput.prototype, "list", 2);
+__decorateClass$2([attr({
   converter: nullableNumberConverter
 })], TextInput.prototype, "maxlength", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   converter: nullableNumberConverter
 })], TextInput.prototype, "minlength", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   mode: "boolean"
 })], TextInput.prototype, "multiple", 2);
-__decorateClass$1([attr], TextInput.prototype, "name", 2);
-__decorateClass$1([attr], TextInput.prototype, "pattern", 2);
-__decorateClass$1([attr], TextInput.prototype, "placeholder", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr], TextInput.prototype, "name", 2);
+__decorateClass$2([attr], TextInput.prototype, "pattern", 2);
+__decorateClass$2([attr], TextInput.prototype, "placeholder", 2);
+__decorateClass$2([attr({
   attribute: "readonly",
   mode: "boolean"
 })], TextInput.prototype, "readonly", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   mode: "boolean"
 })], TextInput.prototype, "required", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   converter: nullableNumberConverter
 })], TextInput.prototype, "size", 2);
-__decorateClass$1([attr({
+__decorateClass$2([attr({
   converter: {
     fromView: value => typeof value === "string" ? ["true", ""].includes(value.trim().toLowerCase()) : null,
     toView: value => value.toString()
   }
 })], TextInput.prototype, "spellcheck", 2);
-__decorateClass$1([attr], TextInput.prototype, "type", 2);
-__decorateClass$1([observable], TextInput.prototype, "controlLabel", 2);
+__decorateClass$2([attr], TextInput.prototype, "type", 2);
+__decorateClass$2([observable], TextInput.prototype, "controlLabel", 2);
 applyMixins(TextInput, StartEnd);
 
-const styles$1 = css`
+const styles$2 = 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],:host(:empty) .label{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}}`;
@@ -11196,14 +10305,73 @@ function textInputTemplate(options = {}) {
     filter: whitespaceFilter
   })}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @change="${(x, c) => x.changeHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" ?autofocus="${x => x.autofocus}" autocomplete="${x => x.autocomplete}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" ?multiple="${x => x.multiple}" name="${x => x.name}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readonly}" ?required="${x => x.required}" size="${x => x.size}" spellcheck="${x => x.spellcheck}" type="${x => x.type}" value="${x => x.initialValue}" ${ref("control")} />${endSlotTemplate(options)}</div>`;
 }
-const template$1 = textInputTemplate();
+const template$2 = textInputTemplate();
 
-const definition$1 = TextInput.compose({
+const definition$2 = TextInput.compose({
   name: `${FluentDesignSystem.prefix}-text-input`,
+  template: template$2,
+  styles: styles$2
+});
+
+definition$2.define(FluentDesignSystem.registry);
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$1(target, key, result);
+  return result;
+};
+class Text extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.nowrap = false;
+    this.truncate = false;
+    this.italic = false;
+    this.underline = false;
+    this.strikethrough = false;
+    this.block = false;
+  }
+}
+__decorateClass$1([attr({
+  mode: "boolean"
+})], Text.prototype, "nowrap", 2);
+__decorateClass$1([attr({
+  mode: "boolean"
+})], Text.prototype, "truncate", 2);
+__decorateClass$1([attr({
+  mode: "boolean"
+})], Text.prototype, "italic", 2);
+__decorateClass$1([attr({
+  mode: "boolean"
+})], Text.prototype, "underline", 2);
+__decorateClass$1([attr({
+  mode: "boolean"
+})], Text.prototype, "strikethrough", 2);
+__decorateClass$1([attr({
+  mode: "boolean"
+})], Text.prototype, "block", 2);
+__decorateClass$1([attr], Text.prototype, "size", 2);
+__decorateClass$1([attr], Text.prototype, "font", 2);
+__decorateClass$1([attr], Text.prototype, "weight", 2);
+__decorateClass$1([attr], Text.prototype, "align", 2);
+
+const styles$1 = 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}`;
+
+const template$1 = html`<slot></slot>`;
+
+const definition$1 = Text.compose({
+  name: `${FluentDesignSystem.prefix}-text`,
   template: template$1,
   styles: styles$1
 });
 
+definition$1.define(FluentDesignSystem.registry);
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -11263,34 +10431,18 @@ __decorateClass([attr({
   mode: "boolean"
 })], ToggleButton.prototype, "mixed", 2);
 
-const ToggleButtonAppearance = ButtonAppearance;
-const ToggleButtonShape = ButtonShape;
-const ToggleButtonSize = ButtonSize;
-
-const template = buttonTemplate$1();
-
 const styles = css`
   ${styles$m}
 
   :host([aria-pressed='true']){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host([aria-pressed='true']:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host([aria-pressed='true']:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host([aria-pressed='true'][appearance='primary']){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host([aria-pressed='true'][appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([aria-pressed='true'][appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host([aria-pressed='true'][appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([aria-pressed='true'][appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host([aria-pressed='true'][appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host([aria-pressed='true'][appearance='outline']:hover),:host([aria-pressed='true'][appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host([aria-pressed='true'][appearance='outline']:active),:host([aria-pressed='true'][appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host([aria-pressed='true'][appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host([aria-pressed='true'][appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host([aria-pressed='true'][appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([aria-pressed='true']),:host([aria-pressed='true'][appearance='primary']),:host([aria-pressed='true'][appearance='subtle']),:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background:SelectedItem;color:SelectedItemText}`));
 
+const template = buttonTemplate$1();
+
 const definition = ToggleButton.compose({
   name: `${FluentDesignSystem.prefix}-toggle-button`,
   template,
   styles
 });
 
-const tokenNames = Object.keys(tokens);
-const setTheme = theme => {
-  for (const t of tokenNames) {
-    document.body.style.setProperty(`--${t}`, theme[t]);
-  }
-};
-const setThemeFor = (element, theme) => {
-  for (const t of tokenNames) {
-    element.style.setProperty(`--${t}`, theme[t]);
-  }
-};
-
-export { Accordion, AccordionExpandMode, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$q as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$q as AnchorButtonTemplate, AnchorTarget, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$p as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$o as AvatarStyles, template$p as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$o as BadgeDefinition, BadgeShape, BadgeSize, styles$n as BadgeStyles, template$o as BadgeTemplate, Button, ButtonAppearance, definition$n as ButtonDefinition, ButtonShape, ButtonSize, styles$m as ButtonStyles, template$n as ButtonTemplate, ButtonType, Checkbox, definition$m as CheckboxDefinition, CheckboxLabelPosition, CheckboxShape, CheckboxSize, styles$l as CheckboxStyles, template$m as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$l as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$k as CompoundButtonStyles, template$l as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$k as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$j as CounterBadgeStyles, template$k as CounterBadgeTemplate, Dialog, definition$j as DialogDefinition, DialogModalType, styles$i as DialogStyles, template$j as DialogTemplate, Divider, DividerAlignContent, DividerAppearance, definition$i as DividerDefinition, DividerOrientation, DividerRole, styles$h as DividerStyles, template$i as DividerTemplate, FluentDesignSystem, Image, definition$h as ImageDefinition, ImageFit, ImageShape, styles$g as ImageStyles, template$h as ImageTemplate, Label, definition$g as LabelDefinition, LabelSize, styles$f as LabelStyles, template$g as LabelTemplate, LabelWeight, Menu, MenuButton, MenuButtonAppearance, definition$e as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$m as MenuButtonStyles, template$e as MenuButtonTemplate, definition$f as MenuDefinition, MenuItem, definition$d as MenuItemDefinition, MenuItemRole, styles$d as MenuItemStyles, template$d as MenuItemTemplate, MenuList, definition$c as MenuListDefinition, styles$c as MenuListStyles, template$c as MenuListTemplate, styles$e as MenuStyles, template$f as MenuTemplate, ProgressBar, definition$b as ProgressBarDefinition, ProgressBarShape, styles$b as ProgressBarStyles, template$b as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$a as RadioDefinition, RadioGroup, definition$9 as RadioGroupDefinition, RadioGroupOrientation, styles$9 as RadioGroupStyles, template$9 as RadioGroupTemplate, styles$a as RadioStyles, template$a as RadioTemplate, Slider, definition$8 as SliderDefinition, SliderMode, SliderOrientation, SliderSize, styles$8 as SliderStyles, template$8 as SliderTemplate, Spinner, SpinnerAppearance, definition$7 as SpinnerDefinition, SpinnerSize, styles$7 as SpinnerStyles, template$7 as SpinnerTemplate, Switch, definition$6 as SwitchDefinition, SwitchLabelPosition, styles$6 as SwitchStyles, template$6 as SwitchTemplate, Tab, definition$5 as TabDefinition, TabPanel, definition$4 as TabPanelDefinition, styles$4 as TabPanelStyles, template$4 as TabPanelTemplate, styles$5 as TabStyles, template$5 as TabTemplate, Tabs, TabsAppearance, definition$3 as TabsDefinition, TabsOrientation, TabsSize, styles$3 as TabsStyles, template$3 as TabsTemplate, Text, TextAlign, definition$2 as TextDefinition, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$1 as TextInputDefinition, styles$1 as TextInputStyles, template$1 as TextInputTemplate, TextInputType, TextSize, styles$2 as TextStyles, template$2 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles as ToggleButtonStyles, template as ToggleButtonTemplate, definition$s as accordionDefinition, definition$r as accordionItemDefinition, styles$q as accordionItemStyles, template$r as accordionItemTemplate, styles$r as accordionStyles, template$s as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackground2Hover, colorBrandBackground2Pressed, colorBrandBackground3Static, colorBrandBackground4Static, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForeground2Hover, colorBrandForeground2Pressed, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorBrandStroke2Contrast, colorBrandStroke2Hover, colorBrandStroke2Pressed, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundAlpha, colorNeutralBackgroundAlpha2, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralCardBackground, colorNeutralCardBackgroundDisabled, colorNeutralCardBackgroundHover, colorNeutralCardBackgroundPressed, colorNeutralCardBackgroundSelected, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeAlpha, colorNeutralStrokeAlpha2, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorNeutralStrokeSubtle, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStatusDangerBackground1, colorStatusDangerBackground2, colorStatusDangerBackground3, colorStatusDangerBackground3Hover, colorStatusDangerBackground3Pressed, colorStatusDangerBorder1, colorStatusDangerBorder2, colorStatusDangerBorderActive, colorStatusDangerForeground1, colorStatusDangerForeground2, colorStatusDangerForeground3, colorStatusDangerForegroundInverted, colorStatusSuccessBackground1, colorStatusSuccessBackground2, colorStatusSuccessBackground3, colorStatusSuccessBorder1, colorStatusSuccessBorder2, colorStatusSuccessBorderActive, colorStatusSuccessForeground1, colorStatusSuccessForeground2, colorStatusSuccessForeground3, colorStatusSuccessForegroundInverted, colorStatusWarningBackground1, colorStatusWarningBackground2, colorStatusWarningBackground3, colorStatusWarningBorder1, colorStatusWarningBorder2, colorStatusWarningBorderActive, colorStatusWarningForeground1, colorStatusWarningForeground2, colorStatusWarningForeground3, colorStatusWarningForegroundInverted, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, darkModeStylesheetBehavior, display, durationFast, durationFaster, durationGentle, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, forcedColorsStylesheetBehavior, getDirection, lightModeStylesheetBehavior, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, roleForMenuItem, setTheme, setThemeFor, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin };
+definition.define(FluentDesignSystem.registry);