@fluentui/web-components 3.0.0-rc.14 → 3.0.0-rc.16

package/dist/web-components.js

@@ -1,9 +1,23 @@
 const FluentDesignSystem = Object.freeze({
   prefix: "fluent",
   shadowRootMode: "open",
-  registry: customElements
+  registry: globalThis.customElements
 });
 
+function isCustomElement(tagSuffix) {
+  return element => {
+    if (element?.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    return element.tagName.toLowerCase().endsWith(tagSuffix);
+  };
+}
+
+function isAccordionItem(element, tagName2 = "-accordion-item") {
+  return isCustomElement(tagName2)(element);
+}
+const tagName$F = `${FluentDesignSystem.prefix}-accordion-item`;
+
 let kernelMode;
 const kernelAttr = "fast-kernel";
 try {
@@ -3943,180 +3957,6 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
   compose
 });
 
-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 ARIAGlobalStatesAndProperties {}
-__decorateClass$P([attr({
-  attribute: "aria-atomic"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", 2);
-__decorateClass$P([attr({
-  attribute: "aria-busy"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", 2);
-__decorateClass$P([attr({
-  attribute: "aria-controls"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaControls", 2);
-__decorateClass$P([attr({
-  attribute: "aria-current"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", 2);
-__decorateClass$P([attr({
-  attribute: "aria-describedby"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", 2);
-__decorateClass$P([attr({
-  attribute: "aria-details"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", 2);
-__decorateClass$P([attr({
-  attribute: "aria-disabled"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", 2);
-__decorateClass$P([attr({
-  attribute: "aria-errormessage"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", 2);
-__decorateClass$P([attr({
-  attribute: "aria-flowto"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", 2);
-__decorateClass$P([attr({
-  attribute: "aria-haspopup"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", 2);
-__decorateClass$P([attr({
-  attribute: "aria-hidden"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", 2);
-__decorateClass$P([attr({
-  attribute: "aria-invalid"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", 2);
-__decorateClass$P([attr({
-  attribute: "aria-keyshortcuts"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", 2);
-__decorateClass$P([attr({
-  attribute: "aria-label"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", 2);
-__decorateClass$P([attr({
-  attribute: "aria-labelledby"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", 2);
-__decorateClass$P([attr({
-  attribute: "aria-live"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaLive", 2);
-__decorateClass$P([attr({
-  attribute: "aria-owns"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", 2);
-__decorateClass$P([attr({
-  attribute: "aria-relevant"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", 2);
-__decorateClass$P([attr({
-  attribute: "aria-roledescription"
-})], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", 2);
-
-const numberLikeStringConverter = {
-  fromView(value) {
-    const valueAsNumber = parseFloat(value);
-    return Number.isNaN(valueAsNumber) ? "" : valueAsNumber.toString();
-  },
-  toView(value) {
-    const valueAsNumber = parseFloat(value);
-    return Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber.toString();
-  }
-};
-
-/**
- * Standard orientation values
- */
-const Orientation = {
-  horizontal: "horizontal",
-  vertical: "vertical"
-};
-
-/**
- * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
- *
- * @param array - the array to test
- * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
- */
-function findLastIndex(array, predicate) {
-  let k = array.length;
-  while (k--) {
-    if (predicate(array[k], k, array)) {
-      return k;
-    }
-  }
-  return -1;
-}
-
-/**
- * A test that ensures that all arguments are HTML Elements
- */
-function isHTMLElement(...args) {
-  return args.every(arg => arg instanceof HTMLElement);
-}
-
-/**
- * String values for use with KeyboardEvent.key
- */
-const keyArrowDown = "ArrowDown";
-const keyArrowLeft = "ArrowLeft";
-const keyArrowRight = "ArrowRight";
-const keyArrowUp = "ArrowUp";
-const keyEnd = "End";
-const keyEnter = "Enter";
-const keyEscape = "Escape";
-const keyHome = "Home";
-const keySpace = " ";
-const keyTab = "Tab";
-
-/**
- * Expose ltr and rtl strings
- */
-var Direction;
-(function (Direction) {
-  Direction["ltr"] = "ltr";
-  Direction["rtl"] = "rtl";
-})(Direction || (Direction = {}));
-
-/**
- * This method keeps a given value within the bounds of a min and max value. If the value
- * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
- * the maximum will be returned. Otherwise, the value is returned un-changed.
- */
-function wrapInBounds(min, max, value) {
-  if (value < min) {
-    return max;
-  } else if (value > max) {
-    return min;
-  }
-  return value;
-}
-/**
- * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
- * If value is greater than max, max will be returned.
- */
-function limit(min, max, value) {
-  return Math.min(Math.max(value, min), max);
-}
-
-let uniqueIdCounter$1 = 0;
-/**
- * Generates a unique ID based on incrementing a counter.
- */
-function uniqueId$1(prefix = "") {
-  return `${prefix}${uniqueIdCounter$1++}`;
-}
-
-const getDirection = rootNode => {
-  return rootNode.closest("[dir]")?.dir === "rtl" ? Direction.rtl : Direction.ltr;
-};
-
-function isCustomElement(tagSuffix) {
-  return element => {
-    if (element?.nodeType !== Node.ELEMENT_NODE) {
-      return false;
-    }
-    return element.tagName.toLowerCase().endsWith(tagSuffix);
-  };
-}
-
 function staticallyCompose(item) {
   if (!item) {
     return InlineTemplateDirective.empty;
@@ -4130,136 +3970,6 @@ function staticallyCompose(item) {
   return item;
 }
 
-const whitespaceFilter = value => value.nodeType !== Node.TEXT_NODE || !!value.nodeValue?.trim().length;
-
-const hidden = `:host([hidden]){display:none}`;
-function display(displayValue) {
-  return `${hidden}:host{display:${displayValue}}`;
-}
-
-class MatchMediaBehavior {
-  /**
-   *
-   * @param query - The media query to operate from.
-   */
-  constructor(query) {
-    /**
-     * The behavior needs to operate on element instances but elements might share a behavior instance.
-     * To ensure proper attachment / detachment per instance, we construct a listener for
-     * each bind invocation and cache the listeners by element reference.
-     */
-    this.listenerCache = /* @__PURE__ */new WeakMap();
-    this.query = query;
-  }
-  /**
-   * Binds the behavior to the element.
-   * @param controller - The host controller orchestrating this behavior.
-   */
-  connectedCallback(controller) {
-    const {
-      query
-    } = this;
-    let listener = this.listenerCache.get(controller);
-    if (!listener) {
-      listener = this.constructListener(controller);
-      this.listenerCache.set(controller, listener);
-    }
-    listener.bind(query)();
-    query.addEventListener("change", listener);
-  }
-  /**
-   * Unbinds the behavior from the element.
-   * @param controller - The host controller orchestrating this behavior.
-   */
-  disconnectedCallback(controller) {
-    const listener = this.listenerCache.get(controller);
-    if (listener) {
-      this.query.removeEventListener("change", listener);
-    }
-  }
-}
-class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
-  /**
-   * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
-   * @param query - The media query to operate from.
-   * @param styles - The styles to coordinate with the query.
-   */
-  constructor(query, styles) {
-    super(query);
-    this.styles = styles;
-  }
-  /**
-   * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
-   * a provided query.
-   * @param query - The media query to operate from.
-   *
-   * @public
-   * @example
-   *
-   * ```ts
-   * import { css } from "@microsoft/fast-element";
-   * import { MatchMediaStyleSheetBehavior } from "@fluentui/web-components";
-   *
-   * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
-   *   window.matchMedia("(orientation: landscape)")
-   * );
-   *
-   * const styles = css`
-   *   :host {
-   *     width: 200px;
-   *     height: 400px;
-   *   }
-   * `
-   * .withBehaviors(landscapeBehavior(css`
-   *   :host {
-   *     width: 400px;
-   *     height: 200px;
-   *   }
-   * `))
-   * ```
-   */
-  static with(query) {
-    return styles => {
-      return new MatchMediaStyleSheetBehavior(query, styles);
-    };
-  }
-  /**
-   * Constructs a match-media listener for a provided element.
-   * @param source - the element for which to attach or detach styles.
-   */
-  constructListener(controller) {
-    let attached = false;
-    const styles = this.styles;
-    return function listener() {
-      const {
-        matches
-      } = this;
-      if (matches && !attached) {
-        controller.addStyles(styles);
-        attached = matches;
-      } else if (!matches && attached) {
-        controller.removeStyles(styles);
-        attached = matches;
-      }
-    };
-  }
-  /**
-   * Unbinds the behavior from the element.
-   * @param controller - The host controller orchestrating this behavior.
-   * @internal
-   */
-  removedCallback(controller) {
-    controller.removeStyles(this.styles);
-  }
-}
-const forcedColorsStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(forced-colors)"));
-MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: dark)"));
-MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: light)"));
-
-const AnchorPositioningCSSSupported = CSS.supports("anchor-name: --a");
-const AnchorPositioningHTMLSupported = "anchor" in HTMLElement.prototype;
-const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
-
 class StartEnd {}
 function endSlotTemplate(options) {
   return html`<slot name="end" ${ref("end")}>${staticallyCompose(options.end)}</slot>`.inline();
@@ -4302,7 +4012,6 @@ class BaseAccordionItem extends FASTElement {
     this.headinglevel = 2;
     this.expanded = false;
     this.disabled = false;
-    this.id = uniqueId$1("accordion-");
   }
 }
 __decorateClass$O([attr({
@@ -4316,7 +4025,7 @@ __decorateClass$O([attr({
 __decorateClass$O([attr({
   mode: "boolean"
 })], BaseAccordionItem.prototype, "disabled", 2);
-__decorateClass$O([attr], BaseAccordionItem.prototype, "id", 2);
+__decorateClass$O([observable], BaseAccordionItem.prototype, "expandbutton", 2);
 
 var __defProp$N = Object.defineProperty;
 var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
@@ -4341,6 +4050,11 @@ __decorateClass$N([attr({
 })], AccordionItem.prototype, "block", 2);
 applyMixins(AccordionItem, StartEnd);
 
+const hidden = `:host([hidden]){display:none}`;
+function display(displayValue) {
+  return `${hidden}:host{display:${displayValue}}`;
+}
+
 const colorNeutralForeground1 = "var(--colorNeutralForeground1)";
 const colorNeutralForeground1Hover = "var(--colorNeutralForeground1Hover)";
 const colorNeutralForeground1Pressed = "var(--colorNeutralForeground1Pressed)";
@@ -4621,7 +4335,7 @@ const chevronDown20Filled = html.partial(`<svg
   />
 </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}"><slot name="heading"></slot></button>${startSlotTemplate(options)}<slot name="marker-expanded">${staticallyCompose(options.expandedIcon)}</slot><slot name="marker-collapsed">${staticallyCompose(options.collapsedIcon)}</slot></div><div class="content" part="content" id="${x => x.id}-panel" role="region" aria-labelledby="${x => x.id}"><slot></slot></div>`;
+  return html`<div class="heading" part="heading" role="heading" aria-level="${x => x.headinglevel}"><button class="button" part="button" id="control" aria-controls="panel" aria-expanded="${x => x.expanded}" ?disabled="${x => x.disabled}" ${ref("expandbutton")}><slot name="heading"></slot></button>${startSlotTemplate(options)}<slot name="marker-expanded">${staticallyCompose(options.expandedIcon)}</slot><slot name="marker-collapsed">${staticallyCompose(options.collapsedIcon)}</slot></div><div class="content" part="content" id="panel" role="region" aria-labelledby="control"><slot></slot></div>`;
 }
 const template$F = accordionItemTemplate({
   collapsedIcon: chevronRight20Filled,
@@ -4629,13 +4343,19 @@ const template$F = accordionItemTemplate({
 });
 
 const definition$F = AccordionItem.compose({
-  name: `${FluentDesignSystem.prefix}-accordion-item`,
+  name: tagName$F,
   template: template$F,
   styles: styles$E
 });
 
 definition$F.define(FluentDesignSystem.registry);
 
+const AccordionExpandMode = {
+  single: "single",
+  multi: "multi"
+};
+const tagName$E = `${FluentDesignSystem.prefix}-accordion`;
+
 function requestIdleCallback(callback, options) {
   if ("requestIdleCallback" in globalThis) {
     return globalThis.requestIdleCallback(callback, options);
@@ -4671,15 +4391,6 @@ function waitForConnectedDescendants(target, callback, options) {
   scheduleCheck();
 }
 
-function isAccordionItem(element, tagName = "-accordion-item") {
-  return isCustomElement(tagName)(element);
-}
-
-const AccordionExpandMode = {
-  single: "single",
-  multi: "multi"
-};
-
 var __defProp$M = Object.defineProperty;
 var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
 var __decorateClass$M = (decorators, target, key, kind) => {
@@ -4700,7 +4411,6 @@ class Accordion extends FASTElement {
     /**
      * Resets event listeners and sets the `accordionItems` property
      * then rebinds event listeners to each non-disabled item
-     * @returns {void}
      */
     this.setItems = () => {
       waitForConnectedDescendants(this, () => {
@@ -4723,7 +4433,7 @@ class Accordion extends FASTElement {
     };
     /**
      * Removes event listeners from the previous accordion items
-     * @param oldValue An array of the previous accordion items
+     * @param oldValue - An array of the previous accordion items
      */
     this.removeItemListeners = oldValue => {
       oldValue.forEach((item, index) => {
@@ -4734,7 +4444,7 @@ class Accordion extends FASTElement {
     };
     /**
      * Changes the expanded state of the accordion item
-     * @param evt Click event
+     * @param evt - Click event
      * @returns
      */
     this.expandedChangedHandler = evt => {
@@ -4787,7 +4497,6 @@ class Accordion extends FASTElement {
   }
   /**
    * Find the first expanded item in the accordion
-   * @returns {void}
    */
   findExpandedItem() {
     if (!this.accordionItems || this.accordionItems?.length === 0) {
@@ -4797,15 +4506,14 @@ class Accordion extends FASTElement {
   }
   /**
    * Checks if the accordion is in single expand mode
-   * @returns {boolean}
+   * @returns true if the accordion is in single expand mode.
    */
   isSingleExpandMode() {
     return this.expandmode === AccordionExpandMode.single;
   }
   /**
    * Controls the behavior of the accordion in single expand mode
-   * @param expandedItem The item to expand in single expand mode
-   * @returns {void}
+   * @param expandedItem - The item to expand in single expand mode
    */
   setSingleExpandMode(expandedItem) {
     if (this.accordionItems.length === 0) {
@@ -4852,13 +4560,55 @@ function accordionTemplate() {
 const template$E = accordionTemplate();
 
 const definition$E = Accordion.compose({
-  name: `${FluentDesignSystem.prefix}-accordion`,
+  name: tagName$E,
   template: template$E,
   styles: styles$D
 });
 
 definition$E.define(FluentDesignSystem.registry);
 
+const ButtonAppearance = {
+  primary: "primary",
+  outline: "outline",
+  subtle: "subtle",
+  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 tagName$D = `${FluentDesignSystem.prefix}-button`;
+
+const AnchorButtonAppearance = ButtonAppearance;
+const AnchorButtonShape = ButtonShape;
+const AnchorButtonSize = ButtonSize;
+const AnchorAttributes = {
+  download: "download",
+  href: "href",
+  hreflang: "hreflang",
+  ping: "ping",
+  referrerpolicy: "referrerpolicy",
+  rel: "rel",
+  target: "target",
+  type: "type"
+};
+const tagName$C = `${FluentDesignSystem.prefix}-anchor-button`;
+
+const AnchorPositioningCSSSupported = CSS.supports("anchor-name: --a");
+const AnchorPositioningHTMLSupported = "anchor" in HTMLElement.prototype;
+const CustomStatesSetSupported = CSS.supports("selector(:state(g))");
+
 const statesMap = /* @__PURE__ */new Map();
 function stateSelector(state) {
   return statesMap.get(state) ?? statesMap.set(state, CustomStatesSetSupported ? `:state(${state})` : `[state--${state}]`).get(state);
@@ -4896,41 +4646,80 @@ function swapStates(elementInternals, prev = "", next = "", States, prefix = "")
   }
 }
 
-const ButtonAppearance = {
-  primary: "primary",
-  outline: "outline",
-  subtle: "subtle",
-  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"
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+  horizontal: "horizontal",
+  vertical: "vertical"
 };
 
-const AnchorButtonAppearance = ButtonAppearance;
-const AnchorButtonShape = ButtonShape;
-const AnchorButtonSize = ButtonSize;
-const AnchorAttributes = {
-  download: "download",
-  href: "href",
-  hreflang: "hreflang",
-  ping: "ping",
-  referrerpolicy: "referrerpolicy",
-  rel: "rel",
-  target: "target",
-  type: "type"
-};
+/**
+ * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
+ *
+ * @param array - the array to test
+ * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
+ */
+function findLastIndex(array, predicate) {
+  let k = array.length;
+  while (k--) {
+    if (predicate(array[k], k, array)) {
+      return k;
+    }
+  }
+  return -1;
+}
+
+/**
+ * A test that ensures that all arguments are HTML Elements
+ */
+function isHTMLElement(...args) {
+  return args.every(arg => arg instanceof HTMLElement);
+}
+
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowDown = "ArrowDown";
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+const keyArrowUp = "ArrowUp";
+const keyEnd = "End";
+const keyEnter = "Enter";
+const keyEscape = "Escape";
+const keyHome = "Home";
+const keySpace = " ";
+const keyTab = "Tab";
+
+/**
+ * Expose ltr and rtl strings
+ */
+var Direction;
+(function (Direction) {
+  Direction["ltr"] = "ltr";
+  Direction["rtl"] = "rtl";
+})(Direction || (Direction = {}));
+
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+  return Math.min(Math.max(value, min), max);
+}
+
+let uniqueIdCounter$1 = 0;
+/**
+ * Generates a unique ID based on incrementing a counter.
+ */
+function uniqueId$1(prefix = "") {
+  return `${prefix}${uniqueIdCounter$1++}`;
+}
 
 var __defProp$L = Object.defineProperty;
 var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
@@ -4995,11 +4784,12 @@ class BaseAnchor extends FASTElement {
    * @internal
    */
   clickHandler(e) {
+    if (e.composedPath()[0] === this.internalProxyAnchor) {
+      e.stopImmediatePropagation();
+      return true;
+    }
     if (this.href) {
-      const newTab = !this.isMac ? e.ctrlKey : e.metaKey;
-      if (newTab) {
-        e.preventDefault();
-      }
+      const newTab = e.ctrlKey || e.metaKey;
       this.handleNavigation(newTab);
     }
     return true;
@@ -5023,7 +4813,7 @@ class BaseAnchor extends FASTElement {
   }
   /**
    * Handles navigation based on input
-   * If the metaKey is pressed, opens the href in a new window, if false, uses the click on the proxy
+   * If a modified activation requests a new tab, opens the href in a new window.
    * @internal
    */
   handleNavigation(newTab) {
@@ -5044,8 +4834,7 @@ class BaseAnchor extends FASTElement {
   }
   createProxyElement() {
     const proxy = this.internalProxyAnchor ?? document.createElement("a");
-    proxy.ariaHidden = "true";
-    proxy.tabIndex = -1;
+    proxy.inert = true;
     return proxy;
   }
 }
@@ -5120,14 +4909,12 @@ const baseButtonStyles = css`
 const styles$C = css`
   ${baseButtonStyles}
 
-  :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}:host([appearance='primary']:is(:disabled,[disabled-focusable])),:host([appearance='primary']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host([appearance='outline']:is(:disabled,[disabled-focusable])),:host([appearance='outline']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host([appearance='subtle']:is(:disabled,[disabled-focusable])),:host([appearance='subtle']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='transparent']:is(:disabled,[disabled-focusable])),:host([appearance='transparent']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{background-color:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight !important}:host([appearance='primary']:not(:is(:hover,:focus-visible))){background-color:Highlight;color:HighlightText;forced-color-adjust:none}:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])){background-color:ButtonFace;color:GrayText;border-color:ButtonText}`));
+  :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}:host([appearance='primary']:is(:disabled,[disabled-focusable])),:host([appearance='primary']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host([appearance='outline']:is(:disabled,[disabled-focusable])),:host([appearance='outline']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host([appearance='subtle']:is(:disabled,[disabled-focusable])),:host([appearance='subtle']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='transparent']:is(:disabled,[disabled-focusable])),:host([appearance='transparent']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent;background-color:${colorTransparentBackground}}@media (forced-colors:active){:host{background-color:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight !important}:host([appearance='primary']:not(:is(:hover,:focus-visible))){background-color:Highlight;color:HighlightText;forced-color-adjust:none}:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])){background-color:ButtonFace;color:GrayText;border-color:ButtonText}}`;
 
 const styles$B = css`
   ${baseButtonStyles}
 
-  ::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{border-color:LinkText;color:LinkText}`));
+  ::slotted(a){position:absolute;inset:0}@media (forced-colors:active){:host{border-color:LinkText;color:LinkText}}`;
 
 function anchorTemplate$1(options = {}) {
   return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
@@ -5135,13 +4922,53 @@ function anchorTemplate$1(options = {}) {
 const template$D = anchorTemplate$1();
 
 const definition$D = AnchorButton.compose({
-  name: `${FluentDesignSystem.prefix}-anchor-button`,
+  name: tagName$C,
   template: template$D,
   styles: styles$B
 });
 
 definition$D.define(FluentDesignSystem.registry);
 
+const AvatarNamedColor = {
+  darkRed: "dark-red",
+  cranberry: "cranberry",
+  red: "red",
+  pumpkin: "pumpkin",
+  peach: "peach",
+  marigold: "marigold",
+  gold: "gold",
+  brass: "brass",
+  brown: "brown",
+  forest: "forest",
+  seafoam: "seafoam",
+  darkGreen: "dark-green",
+  lightTeal: "light-teal",
+  teal: "teal",
+  steel: "steel",
+  blue: "blue",
+  royalBlue: "royal-blue",
+  cornflower: "cornflower",
+  navy: "navy",
+  lavender: "lavender",
+  purple: "purple",
+  grape: "grape",
+  lilac: "lilac",
+  pink: "pink",
+  magenta: "magenta",
+  plum: "plum",
+  beige: "beige",
+  mink: "mink",
+  platinum: "platinum",
+  anchor: "anchor"
+};
+const AvatarColor = {
+  neutral: "neutral",
+  brand: "brand",
+  colorful: "colorful",
+  ...AvatarNamedColor
+};
+const tagName$B = `${FluentDesignSystem.prefix}-avatar`;
+
 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;
@@ -5303,45 +5130,6 @@ __decorateClass$J([observable], BaseAvatar.prototype, "slottedDefaults", 2);
 __decorateClass$J([attr], BaseAvatar.prototype, "name", 2);
 __decorateClass$J([attr], BaseAvatar.prototype, "initials", 2);
 
-const AvatarNamedColor = {
-  darkRed: "dark-red",
-  cranberry: "cranberry",
-  red: "red",
-  pumpkin: "pumpkin",
-  peach: "peach",
-  marigold: "marigold",
-  gold: "gold",
-  brass: "brass",
-  brown: "brown",
-  forest: "forest",
-  seafoam: "seafoam",
-  darkGreen: "dark-green",
-  lightTeal: "light-teal",
-  teal: "teal",
-  steel: "steel",
-  blue: "blue",
-  royalBlue: "royal-blue",
-  cornflower: "cornflower",
-  navy: "navy",
-  lavender: "lavender",
-  purple: "purple",
-  grape: "grape",
-  lilac: "lilac",
-  pink: "pink",
-  magenta: "magenta",
-  plum: "plum",
-  beige: "beige",
-  mink: "mink",
-  platinum: "platinum",
-  anchor: "anchor"
-};
-const AvatarColor = {
-  neutral: "neutral",
-  brand: "brand",
-  colorful: "colorful",
-  ...AvatarNamedColor
-};
-
 var __defProp$I = Object.defineProperty;
 var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
 var __decorateClass$I = (decorators, target, key, kind) => {
@@ -5444,7 +5232,7 @@ function avatarTemplate() {
 const template$C = avatarTemplate();
 
 const definition$C = Avatar.compose({
-  name: `${FluentDesignSystem.prefix}-avatar`,
+  name: tagName$B,
   template: template$C,
   styles: styles$A
 });
@@ -5467,6 +5255,7 @@ const BadgeColor = {
   success: "success",
   warning: "warning"
 };
+const tagName$A = `${FluentDesignSystem.prefix}-badge`;
 
 var __defProp$H = Object.defineProperty;
 var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
@@ -5737,109 +5526,6 @@ const badgeTintStyles = css.partial`
   }
 `;
 
-const typographyBody1Styles = css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase300};
-  line-height: ${lineHeightBase300};
-  font-weight: ${fontWeightRegular};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase300};
-  line-height: ${lineHeightBase300};
-  font-weight: ${fontWeightSemibold};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase300};
-  line-height: ${lineHeightBase300};
-  font-weight: ${fontWeightBold};
-`;
-const typographyBody2Styles = css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase400};
-  line-height: ${lineHeightBase400};
-  font-weight: ${fontWeightRegular};
-`;
-const typographyCaption1Styles = css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase200};
-  line-height: ${lineHeightBase200};
-  font-weight: ${fontWeightRegular};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase200};
-  line-height: ${lineHeightBase200};
-  font-weight: ${fontWeightSemibold};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase200};
-  line-height: ${lineHeightBase200};
-  font-weight: ${fontWeightBold};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase100};
-  line-height: ${lineHeightBase100};
-  font-weight: ${fontWeightRegular};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase100};
-  line-height: ${lineHeightBase100};
-  font-weight: ${fontWeightSemibold};
-`;
-const typographySubtitle1Styles = css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase500};
-  line-height: ${lineHeightBase500};
-  font-weight: ${fontWeightSemibold};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase400};
-  line-height: ${lineHeightBase400};
-  font-weight: ${fontWeightSemibold};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase400};
-  line-height: ${lineHeightBase400};
-  font-weight: ${fontWeightBold};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeHero800};
-  line-height: ${lineHeightHero800};
-  font-weight: ${fontWeightSemibold};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeHero700};
-  line-height: ${lineHeightHero700};
-  font-weight: ${fontWeightSemibold};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeBase600};
-  line-height: ${lineHeightBase600};
-  font-weight: ${fontWeightSemibold};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeHero900};
-  line-height: ${lineHeightHero900};
-  font-weight: ${fontWeightSemibold};
-`;
-css.partial`
-  font-family: ${fontFamilyBase};
-  font-size: ${fontSizeHero1000};
-  line-height: ${lineHeightHero1000};
-  font-weight: ${fontWeightSemibold};
-`;
-
 const styles$z = css`
   :host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeTintStyles}
   ${badgeOutlineStyles}
@@ -5847,8 +5533,8 @@ const styles$z = css`
   ${badgeFilledStyles}
   ${badgeSizeStyles}
   ${badgeBaseStyles}
-`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}`));
+
+  @media (forced-colors:active){:host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}}`;
 
 function badgeTemplate(options = {}) {
   return html` ${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)} `;
@@ -5856,7 +5542,7 @@ function badgeTemplate(options = {}) {
 const template$B = badgeTemplate();
 
 const definition$B = Badge.compose({
-  name: `${FluentDesignSystem.prefix}-badge`,
+  name: tagName$A,
   template: template$B,
   styles: styles$z
 });
@@ -6158,13 +5844,15 @@ function buttonTemplate$1(options = {}) {
 const template$A = buttonTemplate$1();
 
 const definition$A = Button.compose({
-  name: `${FluentDesignSystem.prefix}-button`,
+  name: tagName$D,
   template: template$A,
   styles: styles$C
 });
 
 definition$A.define(FluentDesignSystem.registry);
 
+const tagName$z = `${FluentDesignSystem.prefix}-checkbox`;
+
 var __defProp$E = Object.defineProperty;
 var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
 var __decorateClass$E = (decorators, target, key, kind) => {
@@ -6629,8 +6317,7 @@ const valueMissingState = stateSelector("value-missing");
 const styles$y = css`
   ${display("inline-flex")}
 
-  :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not([disabled]):hover),:host(${checkedState}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState}:not([disabled]):hover),:host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator{background-color:Highlight}:host([disabled]){border-color:GrayText}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:GrayText}:host([disabled]),:host([disabled]${checkedState}) .checked-indicator{color:GrayText}`));
+  :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size) / 2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}@media (forced-colors:active){:host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not([disabled]):hover),:host(${checkedState}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState}:not([disabled]):hover),:host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator{background-color:Highlight}:host([disabled]){border-color:GrayText}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:GrayText}:host([disabled]),:host([disabled]${checkedState}) .checked-indicator{color:GrayText}}`;
 
 const checkedIndicator$2 = html.partial(/* html */
 `
@@ -6658,13 +6345,15 @@ const template$z = checkboxTemplate({
 });
 
 const definition$z = Checkbox.compose({
-  name: `${FluentDesignSystem.prefix}-checkbox`,
+  name: tagName$z,
   template: template$z,
   styles: styles$y
 });
 
 definition$z.define(FluentDesignSystem.registry);
 
+const tagName$y = `${FluentDesignSystem.prefix}-compound-button`;
+
 class CompoundButton extends Button {}
 
 const styles$x = css`
@@ -6672,9 +6361,8 @@ const styles$x = css`
 
   :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='transparent'],[appearance='subtle'],[appearance='subtle']:is(:hover,:active)))
     ::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}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([appearance='primary']:not(:hover,:focus-visible,:disabled,[disabled-focusable]))
-      ::slotted([slot='description']){color:HighlightText}`));
+    ::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}}@media (forced-colors:active){:host([appearance='primary']:not(:hover,:focus-visible,:disabled,[disabled-focusable]))
+      ::slotted([slot='description']){color:HighlightText}}`;
 
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? null : x.tabIndex ?? 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
@@ -6682,13 +6370,15 @@ function buttonTemplate(options = {}) {
 const template$y = buttonTemplate();
 
 const definition$y = CompoundButton.compose({
-  name: `${FluentDesignSystem.prefix}-compound-button`,
+  name: tagName$y,
   template: template$y,
   styles: styles$x
 });
 
 definition$y.define(FluentDesignSystem.registry);
 
+const tagName$x = `${FluentDesignSystem.prefix}-counter-badge`;
+
 var __defProp$C = Object.defineProperty;
 var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
 var __decorateClass$C = (decorators, target, key, kind) => {
@@ -6768,7 +6458,7 @@ function composeTemplate(options = {}) {
 const template$x = composeTemplate();
 
 const definition$x = CounterBadge.compose({
-  name: `${FluentDesignSystem.prefix}-counter-badge`,
+  name: tagName$x,
   template: template$x,
   styles: styles$w
 });
@@ -6780,12 +6470,13 @@ const DialogType = {
   nonModal: "non-modal",
   alert: "alert"
 };
-function isDialog(element, tagName = "-dialog") {
+function isDialog(element, tagName2 = "-dialog") {
   if (element?.nodeType !== Node.ELEMENT_NODE) {
     return false;
   }
-  return element.tagName.toLowerCase().endsWith(tagName);
+  return element.tagName.toLowerCase().endsWith(tagName2);
 }
+const tagName$w = `${FluentDesignSystem.prefix}-dialog`;
 
 var __defProp$B = Object.defineProperty;
 var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
@@ -6905,17 +6596,18 @@ __decorateClass$B([attr], Dialog.prototype, "type", 2);
 const template$w = html`<dialog class="dialog" part="dialog" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
 
 const styles$v = css`
-  @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    @layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}`));
+  @layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}@media (forced-colors:active){@layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}}`;
 
 const definition$w = Dialog.compose({
-  name: `${FluentDesignSystem.prefix}-dialog`,
+  name: tagName$w,
   template: template$w,
   styles: styles$v
 });
 
 definition$w.define(FluentDesignSystem.registry);
 
+const tagName$v = `${FluentDesignSystem.prefix}-dialog-body`;
+
 class DialogBody extends FASTElement {
   /**
    * Handles click event for the close slot
@@ -6942,7 +6634,7 @@ const styles$u = css`
   :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL}}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL}}::slotted([slot='title-action']){margin-inline-start:auto}::slotted([slot='title']){font:inherit;padding:0;margin:0}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}@media (min-height:480px){.title{position:sticky;z-index:1}.actions{position:sticky;z-index:2}`;
 
 const definition$v = DialogBody.compose({
-  name: `${FluentDesignSystem.prefix}-dialog-body`,
+  name: tagName$v,
   template: template$v,
   styles: styles$u
 });
@@ -6960,6 +6652,7 @@ const DividerRole = {
   presentation: "presentation"
 };
 const DividerOrientation = Orientation;
+const tagName$u = `${FluentDesignSystem.prefix}-divider`;
 
 var __defProp$A = Object.defineProperty;
 var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
@@ -7041,11 +6734,10 @@ const template$u = dividerTemplate();
 const styles$t = css`
   ${display("flex")}
 
-  :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){align-items:center;flex-direction:column;height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
+  :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){align-items:center;flex-direction:column;height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}@media (forced-colors:active){:host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}}`;
 
 const definition$u = Divider.compose({
-  name: `${FluentDesignSystem.prefix}-divider`,
+  name: tagName$u,
   template: template$u,
   styles: styles$t
 });
@@ -7067,6 +6759,7 @@ const DrawerType = {
   modal: "modal",
   inline: "inline"
 };
+const tagName$t = `${FluentDesignSystem.prefix}-drawer`;
 
 var __defProp$y = Object.defineProperty;
 var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
@@ -7162,7 +6855,6 @@ class Drawer extends FASTElement {
    * Handles click events on the drawer.
    */
   clickHandler(event) {
-    event.preventDefault();
     if (this.dialog.open && event.target === this.dialog) {
       this.hide();
     }
@@ -7219,13 +6911,15 @@ function drawerTemplate() {
 const template$t = drawerTemplate();
 
 const definition$t = Drawer.compose({
-  name: `${FluentDesignSystem.prefix}-drawer`,
+  name: tagName$t,
   template: template$t,
   styles: styles$s
 });
 
 definition$t.define(FluentDesignSystem.registry);
 
+const tagName$s = `${FluentDesignSystem.prefix}-drawer-body`;
+
 class DrawerBody extends FASTElement {
   /**
    * Handles click event for the close slot
@@ -7244,6 +6938,109 @@ class DrawerBody extends FASTElement {
   }
 }
 
+const typographyBody1Styles = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase300};
+  line-height: ${lineHeightBase300};
+  font-weight: ${fontWeightRegular};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase300};
+  line-height: ${lineHeightBase300};
+  font-weight: ${fontWeightSemibold};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase300};
+  line-height: ${lineHeightBase300};
+  font-weight: ${fontWeightBold};
+`;
+const typographyBody2Styles = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase400};
+  line-height: ${lineHeightBase400};
+  font-weight: ${fontWeightRegular};
+`;
+const typographyCaption1Styles = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase200};
+  line-height: ${lineHeightBase200};
+  font-weight: ${fontWeightRegular};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase200};
+  line-height: ${lineHeightBase200};
+  font-weight: ${fontWeightSemibold};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase200};
+  line-height: ${lineHeightBase200};
+  font-weight: ${fontWeightBold};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase100};
+  line-height: ${lineHeightBase100};
+  font-weight: ${fontWeightRegular};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase100};
+  line-height: ${lineHeightBase100};
+  font-weight: ${fontWeightSemibold};
+`;
+const typographySubtitle1Styles = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase500};
+  line-height: ${lineHeightBase500};
+  font-weight: ${fontWeightSemibold};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase400};
+  line-height: ${lineHeightBase400};
+  font-weight: ${fontWeightSemibold};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase400};
+  line-height: ${lineHeightBase400};
+  font-weight: ${fontWeightBold};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero800};
+  line-height: ${lineHeightHero800};
+  font-weight: ${fontWeightSemibold};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero700};
+  line-height: ${lineHeightHero700};
+  font-weight: ${fontWeightSemibold};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase600};
+  line-height: ${lineHeightBase600};
+  font-weight: ${fontWeightSemibold};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero900};
+  line-height: ${lineHeightHero900};
+  font-weight: ${fontWeightSemibold};
+`;
+css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero1000};
+  line-height: ${lineHeightHero1000};
+  font-weight: ${fontWeightSemibold};
+`;
+
 const styles$r = css`
   ${display("grid")}
   :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}::slotted([slot='title']){font:inherit;padding:0;margin:0}`;
@@ -7254,26 +7051,45 @@ function drawerBodyTemplate() {
 const template$s = drawerBodyTemplate();
 
 const definition$s = DrawerBody.compose({
-  name: `${FluentDesignSystem.prefix}-drawer-body`,
+  name: tagName$s,
   template: template$s,
   styles: styles$r
 });
 
 definition$s.define(FluentDesignSystem.registry);
 
-function isListbox(element, tagName = "-listbox") {
+const DropdownAppearance = {
+  filledDarker: "filled-darker",
+  filledLighter: "filled-lighter",
+  outline: "outline",
+  transparent: "transparent"
+};
+const DropdownType = {
+  combobox: "combobox",
+  dropdown: "dropdown",
+  select: "select"
+};
+const tagName$r = `${FluentDesignSystem.prefix}-dropdown`;
+
+function isListbox(element, tagName2 = "-listbox") {
   if (element?.nodeType !== Node.ELEMENT_NODE) {
     return false;
   }
-  return element.tagName.toLowerCase().endsWith(tagName);
+  return element.tagName.toLowerCase().endsWith(tagName2);
 }
+const tagName$q = `${FluentDesignSystem.prefix}-listbox`;
 
-function isDropdownOption(value, tagName = "-option") {
+function isDropdownOption(value, tagName2 = "-option") {
   if (value?.nodeType !== Node.ELEMENT_NODE) {
     return false;
   }
-  return value.tagName.toLowerCase().endsWith(tagName);
+  return value.tagName.toLowerCase().endsWith(tagName2);
 }
+const tagName$p = `${FluentDesignSystem.prefix}-option`;
+
+const getDirection = rootNode => {
+  return rootNode.closest("[dir]")?.dir === "rtl" ? Direction.rtl : Direction.ltr;
+};
 
 function getLanguage(rootNode) {
   return rootNode.closest("[lang]")?.lang ?? "en";
@@ -7285,18 +7101,6 @@ function uniqueId(prefix = "id-") {
   return document.getElementById(str) ? uniqueId(prefix) : str;
 }
 
-const DropdownAppearance = {
-  filledDarker: "filled-darker",
-  filledLighter: "filled-lighter",
-  outline: "outline",
-  transparent: "transparent"
-};
-const DropdownType = {
-  combobox: "combobox",
-  dropdown: "dropdown",
-  select: "select"
-};
-
 const dropdownIndicatorTemplate = html`<svg class="chevron-down-20-regular" aria-hidden="true" slot="indicator" viewBox="0 0 20 20" ${ref("indicator")}><path d="M15.85 7.65a.5.5 0 0 1 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.16a.5.5 0 0 1 .7 0" fill="currentColor" /></svg>`;
 const dropdownInputTemplate = html`<input @input="${(x, c) => x.inputHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-labelledby="${x => x.ariaLabelledBy}" aria-expanded="${x => x.open}" aria-haspopup="listbox" placeholder="${x => x.placeholder}" role="combobox" ?disabled="${x => x.disabled}" type="${x => x.type}" value="${x => x.valueAttribute}" slot="control" ${ref("control")} />`;
 const dropdownButtonTemplate = html`<button aria-activedescendant="${x => x.activeDescendant}" aria-controls="${x => x.listbox?.id ?? null}" aria-expanded="${x => x.open}" aria-haspopup="listbox" role="combobox" ?disabled="${x => x.disabled}" type="button" slot="control" ${ref("control")}>${x => x.displayValue}</button>`;
@@ -8111,7 +7915,7 @@ const styles$q = css`
   :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted(:not([slot]):not([popover])),::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){color:GrayText}`;
 
 const definition$r = Dropdown.compose({
-  name: `${FluentDesignSystem.prefix}-dropdown`,
+  name: tagName$r,
   template: template$r,
   styles: styles$q
 });
@@ -8136,6 +7940,7 @@ const ValidationFlags = {
   valueMissing: "value-missing",
   valid: "valid"
 };
+const tagName$o = `${FluentDesignSystem.prefix}-field`;
 
 var __defProp$v = Object.defineProperty;
 var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
@@ -8355,7 +8160,7 @@ const template$q = html`<template @click="${(x, c) => x.clickHandler(c.event)}"
 })}></slot></template>`;
 
 const definition$q = Field.compose({
-  name: `${FluentDesignSystem.prefix}-field`,
+  name: tagName$o,
   template: template$q,
   styles: styles$p,
   shadowOptions: {
@@ -8365,6 +8170,8 @@ const definition$q = Field.compose({
 
 definition$q.define(FluentDesignSystem.registry);
 
+const tagName$n = `${FluentDesignSystem.prefix}-image`;
+
 var __defProp$t = Object.defineProperty;
 var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
 var __decorateClass$t = (decorators, target, key, kind) => {
@@ -8392,13 +8199,15 @@ const styles$o = css`
   :host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
 
 const definition$p = Image.compose({
-  name: `${FluentDesignSystem.prefix}-image`,
+  name: tagName$n,
   template: template$p,
   styles: styles$o
 });
 
 definition$p.define(FluentDesignSystem.registry);
 
+const tagName$m = `${FluentDesignSystem.prefix}-label`;
+
 var __defProp$s = Object.defineProperty;
 var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
 var __decorateClass$s = (decorators, target, key, kind) => {
@@ -8434,13 +8243,15 @@ function labelTemplate() {
 const template$o = labelTemplate();
 
 const definition$o = Label.compose({
-  name: `${FluentDesignSystem.prefix}-label`,
+  name: tagName$m,
   template: template$o,
   styles: styles$n
 });
 
 definition$o.define(FluentDesignSystem.registry);
 
+const tagName$l = `${FluentDesignSystem.prefix}-link`;
+
 var __defProp$r = Object.defineProperty;
 var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
 var __decorateClass$r = (decorators, target, key, kind) => {
@@ -8463,8 +8274,7 @@ __decorateClass$r([attr({
 const styles$m = css`
   ${display("inline")}
 
-  :host{position:relative;box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};overflow:inherit;text-align:start;text-decoration:none;text-decoration-thickness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host([appearance='subtle']:hover){color:${colorNeutralForeground2LinkHover}}:host([appearance='subtle']:active){color:${colorNeutralForeground2LinkPressed}}}:host([appearance='subtle']){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host([inline]){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{color:LinkText}`));
+  :host{position:relative;box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};overflow:inherit;text-align:start;text-decoration:none;text-decoration-thickness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host([appearance='subtle']:hover){color:${colorNeutralForeground2LinkHover}}:host([appearance='subtle']:active){color:${colorNeutralForeground2LinkPressed}}}:host([appearance='subtle']){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host([inline]){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}@media (forced-colors:active){:host{color:LinkText}}`;
 
 function anchorTemplate() {
   return html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot></slot></template>`;
@@ -8472,7 +8282,7 @@ function anchorTemplate() {
 const template$n = anchorTemplate();
 
 const definition$n = Link.compose({
-  name: `${FluentDesignSystem.prefix}-link`,
+  name: tagName$l,
   template: template$n,
   styles: styles$m
 });
@@ -8666,13 +8476,15 @@ function listboxTemplate() {
 const template$m = listboxTemplate();
 
 const definition$m = Listbox.compose({
-  name: `${FluentDesignSystem.prefix}-listbox`,
+  name: tagName$q,
   template: template$m,
   styles: styles$l
 });
 
 definition$m.define(FluentDesignSystem.registry);
 
+const tagName$k = `${FluentDesignSystem.prefix}-menu-button`;
+
 class MenuButton extends Button {}
 
 const template$l = buttonTemplate$1({
@@ -8685,7 +8497,7 @@ const template$l = buttonTemplate$1({
 });
 
 const definition$l = MenuButton.compose({
-  name: `${FluentDesignSystem.prefix}-menu-button`,
+  name: tagName$k,
   template: template$l,
   styles: styles$C
 });
@@ -8711,12 +8523,13 @@ const MenuItemRole = {
   [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
   [MenuItemRole.menuitemradio]: "menuitemradio"
 });
-function isMenuItem(element, tagName = "-menu-item") {
+function isMenuItem(element, tagName2 = "-menu-item") {
   if (element?.nodeType !== Node.ELEMENT_NODE) {
     return false;
   }
-  return element.tagName.toLowerCase().endsWith(tagName);
+  return element.tagName.toLowerCase().endsWith(tagName2);
 }
+const tagName$j = `${FluentDesignSystem.prefix}-menu-item`;
 
 var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
@@ -8798,16 +8611,25 @@ class MenuItem extends FASTElement {
      * Setup required ARIA on open/close
      * @internal
      */
-    this.toggleHandler = e => {
-      if (e instanceof ToggleEvent && e.newState === "open") {
-        this.setAttribute("tabindex", "-1");
+    this.handleToggle = e => {
+      if (!(e instanceof ToggleEvent)) {
+        return;
+      }
+      if (e.newState === "open") {
         this.elementInternals.ariaExpanded = "true";
         this.setSubmenuPosition();
       }
-      if (e instanceof ToggleEvent && e.newState === "closed") {
+      if (e.newState === "closed") {
         this.elementInternals.ariaExpanded = "false";
-        this.setAttribute("tabindex", "0");
       }
+      this.submenu?.setAttribute("focusgroup", e.newState === "open" ? "menu" : "none");
+    };
+    /** @internal */
+    this.handleSubmenuFocusOut = e => {
+      if (e.relatedTarget && this.submenu?.contains(e.relatedTarget)) {
+        return;
+      }
+      this.submenu?.togglePopover(false);
     };
     /**
      * @internal
@@ -8894,11 +8716,14 @@ class MenuItem extends FASTElement {
    * @internal
    */
   slottedSubmenuChanged(prev, next) {
-    this.submenu?.removeEventListener("toggle", this.toggleHandler);
+    this.submenu?.removeEventListener("toggle", this.handleToggle);
+    this.submenu?.removeEventListener("focusout", this.handleSubmenuFocusOut);
     if (next.length) {
       this.submenu = next[0];
       this.submenu.toggleAttribute("popover", true);
-      this.submenu.addEventListener("toggle", this.toggleHandler);
+      this.submenu.setAttribute("focusgroup", "none");
+      this.submenu.addEventListener("toggle", this.handleToggle);
+      this.submenu.addEventListener("focusout", this.handleSubmenuFocusOut);
       this.elementInternals.ariaHasPopup = "menu";
       toggleState(this.elementInternals, "submenu", true);
     } else {
@@ -8929,28 +8754,512 @@ applyMixins(MenuItem, StartEnd);
 const styles$k = css`
   ${display("grid")}
 
-  :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline,block-start,block-end;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host(${disabledState}),:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:GrayText}`));
+  :host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline,block-start,block-end;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}@media (forced-colors:active){:host(${disabledState}),:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:GrayText}}`;
+
+const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" 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 class="submenu-glyph" fill="currentColor" 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 = {}) {
+  return html`<template tabindex="0" @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}" @click="${(x, c) => x.handleMenuItemClick(c.event)}" @mouseover="${(x, c) => x.handleMouseOver(c.event)}" @mouseout="${(x, c) => x.handleMouseOut(c.event)}" @toggle="${(x, c) => x.handleToggle(c.event)}"><slot name="indicator">${staticallyCompose(options.indicator)}</slot>${startSlotTemplate(options)}<div part="content" class="content"><slot></slot></div>${endSlotTemplate(options)}<slot name="submenu-glyph">${staticallyCompose(options.submenuGlyph)}</slot><slot name="submenu" ${slotted({
+    property: "slottedSubmenu"
+  })}></slot></template>`;
+}
+const template$k = menuItemTemplate({
+  indicator: Checkmark16Filled,
+  submenuGlyph: chevronRight16Filled
+});
+
+const definition$k = MenuItem.compose({
+  name: tagName$j,
+  template: template$k,
+  styles: styles$k
+});
+
+definition$k.define(FluentDesignSystem.registry);
+
+const tagName$i = `${FluentDesignSystem.prefix}-menu-list`;
+
+//#region src/constants.js
+/** @enum {string} */
+var DatasetName = {
+  INFERRED_ROLE: "data-fg-ir",
+  ITEM: "data-fg-item",
+  AUTHOR_TABINDEX: "data-fg-ati",
+  SEGMENT: "data-fg-seg",
+  SEGMENT_START: "data-fg-segs"
+};
+/** @enum {string} */
+var BehaviorToken = {
+  TOOLBAR: "toolbar",
+  TABLIST: "tablist",
+  RADIOGROUP: "radiogroup",
+  LISTBOX: "listbox",
+  MENU: "menu",
+  MENUBAR: "menubar",
+  NONE: "none"
+};
+
+//#region src/shadow-utils/index-shadowless.js
+function nodeContains(node, otherNode) {
+  return node.contains(otherNode);
+}
+
+/**
+* Whether the current user agent supports focusgroup.
+*
+* @returns {boolean}
+*/
+function supportsFocusGroup() {
+  return "focusgroup" in (globalThis?.HTMLElement?.prototype ?? {});
+}
+/**
+* Gets the navigation direction (“forward” or “backward”) based on:
+*
+* - The key that the user just pressed
+* - The owner element’s writing mode and direction
+* - The current focus group’s directional limit (“inline”, “block”, none)
+*
+* @param {KeyboardEvent} event - The keyboard event object.
+* @param {HTMLElement} owner - The owner element.
+* @param {("inline" | "block" | undefined)} axis - The directional limitation.
+* @returns {("forward" | "backward" | "start" | "end" | null)} Returns `null`
+*     if there shouldn’t be navigation, e.g. when directional limit applies.
+*/
+function getNavigationDirection(event, owner, axis) {
+  const FORWARD = "forward";
+  const BACKWARD = "backward";
+  const BLOCK = "block";
+  const INLINE = "inline";
+  if (isKeyConflictElement(event.composedPath()[0])) return event.key === "Tab" ? event.shiftKey ? BACKWARD : FORWARD : null;
+  if (event.shiftKey || event.ctrlKey || event.metaKey) return null;
+  const {
+    writingMode,
+    direction
+  } = window.getComputedStyle(owner);
+  const isVertical = !writingMode.startsWith("horizontal-");
+  const isRtl = direction === "rtl";
+  const horizontal = isVertical ? BLOCK : INLINE;
+  const vertical = isVertical ? INLINE : BLOCK;
+  const isHorizontalReversed = isVertical ? writingMode.endsWith("-rl") !== isRtl : isRtl;
+  const isVerticalReversed = isVertical && isRtl;
+  const action = {
+    ArrowUp: {
+      axis: vertical,
+      dir: isVerticalReversed ? FORWARD : BACKWARD
+    },
+    ArrowDown: {
+      axis: vertical,
+      dir: isVerticalReversed ? BACKWARD : FORWARD
+    },
+    ArrowLeft: {
+      axis: horizontal,
+      dir: isHorizontalReversed ? FORWARD : BACKWARD
+    },
+    ArrowRight: {
+      axis: horizontal,
+      dir: isHorizontalReversed ? BACKWARD : FORWARD
+    },
+    Home: {
+      dir: "start"
+    },
+    End: {
+      dir: "end"
+    }
+  }[event.key];
+  if (!action || axis && action.axis && action.axis !== axis) return null;
+  return action.dir;
+}
+/**
+* Whether a given element has keyboard conflicts with navigation keys, in which
+* case they should be considered as segmentors.
+*
+* @param {HTMLElement} element
+* @returns {boolean}
+*/
+function isKeyConflictElement(el) {
+  return el?.nodeType === Node.ELEMENT_NODE && (["INPUT", "TEXTAREA", "SELECT"].includes(el.nodeName) && !["checkbox", "radio"].includes(el.getAttribute("type")) || el.isContentEditable || ["AUDIO", "VIDEO"].includes(el.nodeName) && el.hasAttribute("controls") || ["IFRAME", "OBJECT"].includes(el.nodeName));
+}
+
+//#region src/global-state.js
+/**
+* @type {{ o: Set<MutationObserver>, m?: Map<HTMLElement, *>, g?: MutationObserver, b: boolean }}
+* @global
+*/
+globalThis.__FOCUSGROUP_POLYFILL__ ??= {
+  o: /* @__PURE__ */new Set(),
+  b: false
+};
+var state = globalThis.__FOCUSGROUP_POLYFILL__;
+
+//#region src/observer-registry.js
+/** @type {Set<MutationObserver>} */
+var observers = state.o;
+/**
+* Flushes all globally registered focusgroup MutationObservers by calling
+* `takeRecords()` on each, discarding any pending mutation records that were
+* caused by polyfill-managed attribute writes. This prevents infinite
+* cross-group loops between nested focusgroups whose subtrees overlap.
+*/
+function flushAllObservers() {
+  for (const observer of observers) observer.takeRecords();
+}
+
+//#region src/focusgroup.js
+/**
+* @import {
+*   FocusGroupItemCollection,
+*   FocusGroupOptions,
+*   FocusGroupUpdateInfo,
+* } from "./focusgroup-items.js"
+* @import {FocusGroupDefinition} from "./utils.js"
+*/
+var FocusGroup = class {
+  /**
+  * The focus group owner element.
+  * @type {HTMLElement!}
+  */
+  #owner;
+  /**
+  * The items collection — exposes the focus group's items and answers
+  * queries about them. Reconciliation is triggered externally via
+  * `FocusGroup#update()`.
+  * @type {FocusGroupItemCollection}
+  */
+  #items;
+  /**
+  * The focus group behavior.
+  * @type {BehaviorToken!}
+  */
+  #behavior = BehaviorToken.NONE;
+  /**
+  * The focus group navigation axis limitation.
+  * @type {("inline" | "block" | undefined)}
+  */
+  #axis = void 0;
+  /**
+  * Whether the focus group wraps. Defaults to `false`.
+  * @type {boolean}
+  */
+  #wrap = false;
+  /**
+  * Whether the focus group remembers the previously focused element.
+  * Defaults to `true`.
+  * @type {boolean}
+  */
+  #memory = true;
+  /**
+  * The focus group start element (initial tab stop after decoration).
+  * @type {HTMLElement}
+  */
+  #start;
+  /**
+  * The current item — the most recently focused item within the group.
+  * Serves as the keyboard-navigation cursor while focus is inside, and (in
+  * memory mode) as the tab stop to restore on re-entry. Updated by
+  * `#handleFocusin`, plus directly by `#handleKeydown` for shadow-internal
+  * navigation (where focus events don't cross the shadow boundary).
+  * Cleared in nomemory mode on focusout and when validation fails after
+  * re-decoration.
+  * @type {HTMLElement|null}
+  */
+  #current = null;
+  /**
+  * Whether the owner currently has `tabindex=0` set as a Tab-entry proxy so
+  * sequential focus navigation can reach a tab stop inside a shadow root.
+  * @type {boolean}
+  */
+  #ownerIsProxy = false;
+  /**
+  * The owner's original `tabindex` attribute value (or `null` if it had no
+  * `tabindex`), saved before the polyfill sets `tabindex=0` for proxy duty.
+  * @type {string|null}
+  */
+  #ownerTabindexBeforeProxy = null;
+  /**
+  * The abort controller for when `disconnect()` is called.
+  * @type {AbortController}
+  */
+  #abort = new AbortController();
+  /**
+  * Optional owner-decoration hook injected via `options.decorateOwner`.
+  * Called with `(owner, behavior)` on decoration and `(owner, null)` on
+  * undecoration. When absent, no owner decoration happens.
+  * @type {((element: HTMLElement, behavior: BehaviorToken|null) => void) | undefined}
+  */
+  #decorateOwner;
+  /**
+  * Optional item-decoration hook injected via `options.decorateItem`.
+  * Called with `(item, behavior)` on decoration and `(item, null)` on
+  * undecoration. When absent, no item decoration happens.
+  * @type {((element: HTMLElement, behavior: BehaviorToken|null) => void) | undefined}
+  */
+  #decorateItem;
+  /**
+  * @param {HTMLElement!} owner - The focus group owner element.
+  * @param {FocusGroupItemCollection} items - The items collection providing
+  *     item discovery and queries.
+  * @param {FocusGroupOptions} [options]
+  */
+  constructor(owner, items, options = {}) {
+    if (supportsFocusGroup() || !owner) return;
+    this.#owner = owner;
+    this.#items = items;
+    this.#decorateOwner = options.decorateOwner;
+    this.#decorateItem = options.decorateItem;
+    this.#updateDefinition(options.definition);
+    this.#decorateOwner?.(this.#owner, this.#behavior);
+    this.#decorateItems();
+    const opts = {
+      signal: this.#abort.signal
+    };
+    this.#owner.addEventListener("keydown", this.#handleKeydown.bind(this), opts);
+    this.#owner.addEventListener("focusin", this.#handleFocusin.bind(this), opts);
+    this.#owner.addEventListener("focusout", this.#handleFocusout.bind(this), opts);
+  }
+  /**
+  * Tears down the focus group: disables the owner proxy, removes all event
+  * listeners (via the abort signal), then disconnects the items collection
+  * if it supports it.
+  *
+  * Ordering matters: owner-proxy teardown can trigger `flushAllObservers()`,
+  * which expects the items' observer to still be in the global registry.
+  * The items' own `disconnect()` is therefore called last.
+  *
+  * NOTE: This method does not undecorate the elements. Call it only after
+  * the focusgroup owner has been removed from the DOM.
+  */
+  disconnect() {
+    this.#disableFocusabilityProxy();
+    this.#abort.abort();
+    this.#items?.disconnect?.();
+    this.#owner = null;
+  }
+  /**
+  * Reconciles decoration state in response to relevant changes. Call this
+  * whenever the focus group should refresh — e.g. items were added or
+  * removed, the owner's `focusgroup` attribute changed, or an author set
+  * `tabindex` on a decorated item.
+  *
+  * The polyfill's default `TreeWalkerItemCollection` calls this from a
+  * `MutationObserver`. App-supplied collections (or app code that knows
+  * when its model changed) can call it directly.
+  *
+  * @param {FocusGroupUpdateInfo} [info]
+  */
+  update(info = {}) {
+    if (!this.#owner) return;
+    if (info.definition !== void 0) {
+      this.#updateDefinition(info.definition);
+      this.#decorateOwner?.(this.#owner, this.#behavior);
+    }
+    if (info.authorTabindexChanges) for (const el of info.authorTabindexChanges) el.setAttribute(DatasetName.AUTHOR_TABINDEX, el.getAttribute("tabindex") ?? "none");
+    this.#undecorateItems();
+    this.#decorateItems();
+  }
+  /** @param {FocusGroupDefinition} [def] */
+  #updateDefinition(def) {
+    this.#behavior = def?.behavior ?? BehaviorToken.NONE;
+    this.#wrap = def?.wrap ?? false;
+    this.#axis = def?.axis;
+    this.#memory = def?.memory ?? true;
+    if (!this.#memory) this.#current = null;
+  }
+  #decorateItems() {
+    if (this.#behavior === BehaviorToken.NONE) {
+      this.#undecorateItems();
+      return;
+    }
+    this.#items.decorate?.();
+    for (const {
+      element,
+      segmentBoundary
+    } of this.#items.items()) {
+      this.#decorateItem?.(element, this.#behavior);
+      element.setAttribute(DatasetName.AUTHOR_TABINDEX, element.getAttribute("tabindex") ?? "none");
+      element.tabIndex = segmentBoundary ? 0 : -1;
+    }
+    if (!this.#current?.isConnected || !(this.#items.isItem?.(this.#current) ?? this.#items.contains(this.#current))) this.#current = null;
+    const startItem = this.#current ?? this.#items.start ?? this.#items.first?.() ?? null;
+    if (startItem) {
+      startItem.tabIndex = 0;
+      this.#start = startItem;
+      this.#disableFocusabilityProxy();
+      this.#enableFocusabilityProxy(startItem);
+    }
+    this.#items.flush?.();
+  }
+  #undecorateItems() {
+    this.#disableFocusabilityProxy();
+    let undecorated = false;
+    for (const {
+      element
+    } of this.#items.items()) {
+      undecorated = true;
+      this.#decorateItem?.(element, null);
+      const authorTabIndex = element.getAttribute(DatasetName.AUTHOR_TABINDEX);
+      if (authorTabIndex) {
+        if (authorTabIndex === "none") element.removeAttribute("tabindex");else element.setAttribute("tabindex", authorTabIndex);
+        element.removeAttribute(DatasetName.AUTHOR_TABINDEX);
+      }
+    }
+    this.#items.undecorate?.();
+    if (undecorated) this.#items.flush?.();
+  }
+  /** @param {KeyboardEvent} evt */
+  #handleKeydown(evt) {
+    const current = evt.composedPath()[0];
+    if (evt.defaultPrevented || current === this.#owner) return;
+    if (!this.#items.contains(current)) return;
+    evt.stopPropagation();
+    let target;
+    switch (getNavigationDirection(evt, current, this.#axis)) {
+      case "start":
+        target = this.#items.first();
+        break;
+      case "end":
+        target = this.#items.last();
+        break;
+      case "forward":
+        target = this.#items.next(current);
+        if (!target && this.#wrap) target = this.#items.first();
+        break;
+      case "backward":
+        target = this.#items.previous(current);
+        if (!target && this.#wrap) target = this.#items.last();
+        break;
+    }
+    if (target && target !== current) {
+      this.#advanceFocus(current, target, true);
+      this.#current = target;
+      evt.preventDefault();
+    }
+  }
+  /** @param {FocusEvent} evt */
+  #handleFocusin(evt) {
+    const target = evt.composedPath()[0];
+    if (target === this.#owner && this.#ownerIsProxy && (!evt.relatedTarget || !nodeContains(this.#owner, evt.relatedTarget))) {
+      const tabStop = this.#current || this.#start;
+      this.#disableFocusabilityProxy();
+      if (tabStop) tabStop.focus();
+      evt.stopPropagation();
+      return;
+    }
+    if (!this.#items.contains(target)) return;
+    if (this.#ownerIsProxy) this.#disableFocusabilityProxy();
+    const prev = this.#current;
+    this.#current = target;
+    if (prev === target) return;
+    if (target.tabIndex < 0) {
+      const transferFrom = prev ?? this.#start;
+      if (transferFrom) this.#advanceFocus(transferFrom, target);
+    }
+  }
+  /** @param {FocusEvent} evt */
+  #handleFocusout(evt) {
+    if (!evt.relatedTarget || !nodeContains(this.#owner, evt.relatedTarget)) {
+      const tabStop = this.#memory ? this.#current || this.#start : this.#start;
+      if (tabStop) this.#enableFocusabilityProxy(tabStop);
+    }
+    if (evt.relatedTarget && this.#owner.contains(evt.relatedTarget) || this.#memory || !this.#start) return;
+    if (!this.#memory && this.#start) {
+      const prev = this.#current;
+      this.#current = null;
+      const nextStart = this.#items.start ?? this.#items.first?.() ?? null;
+      if (prev !== this.#start || nextStart !== this.#start) {
+        for (const {
+          element,
+          segmentBoundary
+        } of this.#items.items()) element.tabIndex = segmentBoundary ? 0 : -1;
+        if (nextStart) {
+          nextStart.tabIndex = 0;
+          this.#start = nextStart;
+        }
+        this.#items.flush?.();
+      }
+    }
+    const tabStop = this.#memory ? this.#current || this.#start : this.#start;
+    if (tabStop) this.#enableFocusabilityProxy(tabStop);
+  }
+  /**
+  * If the tab stop is inside a shadow DOM, sets `tabindex=0` on the
+  * focusgroup owner so the browser's Tab navigation can land on it, at
+  * which point `#handleFocusin` will redirect focus to the real tab stop.
+  * @param {HTMLElement} tabStop - The actual focusable tab stop element.
+  */
+  #enableFocusabilityProxy(tabStop) {
+    const rootNode = (tabStop.assignedSlot ?? tabStop).getRootNode();
+    const hasFocusableHost = rootNode instanceof ShadowRoot && rootNode.host.hasAttribute(DatasetName.AUTHOR_TABINDEX);
+    if (this.#ownerIsProxy || !hasFocusableHost) return;
+    this.#ownerTabindexBeforeProxy = this.#owner.getAttribute("tabindex");
+    this.#owner.tabIndex = 0;
+    this.#ownerIsProxy = true;
+    flushAllObservers();
+  }
+  /** Undoes `#enableFocusabilityProxy`. */
+  #disableFocusabilityProxy() {
+    if (!this.#ownerIsProxy) return;
+    if (this.#ownerTabindexBeforeProxy !== null) this.#owner.setAttribute("tabindex", this.#ownerTabindexBeforeProxy);else this.#owner.removeAttribute("tabindex");
+    this.#ownerIsProxy = false;
+    this.#ownerTabindexBeforeProxy = null;
+    this.#items.flush?.();
+    flushAllObservers();
+  }
+  /**
+  * Advances the focusgroup's active tab stop from one item to another. Sets
+  * the target's `tabindex` to `0` and optionally calls `focus()` on it. The
+  * previous item's `tabindex` is set to `-1` unless it belongs to a different
+  * segment (in which case it remains `0` as a segment tab stop). Also disables
+  * the owner proxy.
+  *
+  * @param {HTMLElement} prev - The currently focused item.
+  * @param {HTMLElement} next - The item to receive focus.
+  * @param {boolean} [shouldCallFocus=false] - Whether to programmatically
+  *     call `focus()` on the target element.
+  */
+  #advanceFocus(prev, next, shouldCallFocus = false) {
+    next.tabIndex = 0;
+    if (shouldCallFocus) next.focus();
+    prev.tabIndex = this.#items.sameSegment?.(prev, next) ?? true ? -1 : 0;
+    this.#disableFocusabilityProxy();
+    flushAllObservers();
+  }
+};
 
-const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" 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 class="submenu-glyph" fill="currentColor" 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 = {}) {
-  return html`<template @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}" @click="${(x, c) => x.handleMenuItemClick(c.event)}" @mouseover="${(x, c) => x.handleMouseOver(c.event)}" @mouseout="${(x, c) => x.handleMouseOut(c.event)}" @toggle="${(x, c) => x.toggleHandler(c.event)}"><slot name="indicator">${staticallyCompose(options.indicator)}</slot>${startSlotTemplate(options)}<div part="content" class="content"><slot></slot></div>${endSlotTemplate(options)}<slot name="submenu-glyph">${staticallyCompose(options.submenuGlyph)}</slot><slot name="submenu" ${slotted({
-    property: "slottedSubmenu"
-  })}></slot></template>`;
+class ArrayItemCollection {
+  constructor(getItems, getStart) {
+    this.getItems = getItems;
+    this.getStart = getStart;
+  }
+  get start() {
+    return this.getStart?.() ?? null;
+  }
+  first() {
+    return this.getItems()[0] ?? null;
+  }
+  last() {
+    const items = this.getItems();
+    return items[items.length - 1] ?? null;
+  }
+  next(current) {
+    const items = this.getItems();
+    const i = items.indexOf(current);
+    return i === -1 ? null : items[i + 1] ?? null;
+  }
+  previous(current) {
+    const items = this.getItems();
+    const i = items.indexOf(current);
+    return i <= 0 ? null : items[i - 1] ?? null;
+  }
+  *items() {
+    for (const element of this.getItems()) {
+      yield {
+        element
+      };
+    }
+  }
+  contains(element) {
+    return this.getItems().includes(element);
+  }
 }
-const template$k = menuItemTemplate({
-  indicator: Checkmark16Filled,
-  submenuGlyph: chevronRight16Filled
-});
-
-const definition$k = MenuItem.compose({
-  name: `${FluentDesignSystem.prefix}-menu-item`,
-  template: template$k,
-  styles: styles$k
-});
-
-definition$k.define(FluentDesignSystem.registry);
 
 var __defProp$o = Object.defineProperty;
 var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
@@ -8969,52 +9278,27 @@ const _BaseMenuList = class _BaseMenuList extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
-    /**
-     * 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) {
-        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");
-      }
-    };
     /**
      * Handle change from child MenuItem element and set radio group behavior
      */
     this.changedMenuItemHandler = e => {
-      if (this.menuItems === void 0) {
+      if (this.menuChildren === void 0) {
         return;
       }
       const changedMenuItem = e.target;
-      const changeItemIndex = this.menuItems.indexOf(changedMenuItem);
+      const changeItemIndex = this.menuChildren.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 item = this.menuChildren[i];
           const role = item.role;
           if (role === MenuItemRole.menuitemradio) {
             item.checked = false;
@@ -9023,9 +9307,9 @@ const _BaseMenuList = class _BaseMenuList extends FASTElement {
             break;
           }
         }
-        const maxIndex = this.menuItems.length - 1;
+        const maxIndex = this.menuChildren.length - 1;
         for (let i = changeItemIndex + 1; i <= maxIndex; ++i) {
-          const item = this.menuItems[i];
+          const item = this.menuChildren[i];
           const role = item.role;
           if (role === MenuItemRole.menuitemradio) {
             item.checked = false;
@@ -9036,22 +9320,10 @@ const _BaseMenuList = class _BaseMenuList extends FASTElement {
         }
       }
     };
-    /**
-     * check if the item is a menu item
-     */
-    this.isMenuItemElement = el => {
-      return isMenuItem(el) || isHTMLElement(el) && !!el.role && el.role in _BaseMenuList.focusableElementRoles;
-    };
-    /**
-     * check if the item is focusable
-     */
-    this.isFocusableElement = el => {
-      return this.isMenuItemElement(el);
-    };
     this.elementInternals.role = "menu";
   }
   itemsChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected && this.menuItems !== void 0) {
+    if (this.$fastController.isConnected && this.menuChildren !== void 0) {
       this.setItems();
     }
   }
@@ -9070,8 +9342,7 @@ const _BaseMenuList = class _BaseMenuList extends FASTElement {
    */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeItemListeners();
-    this.menuItems = void 0;
+    this.menuChildren = void 0;
     this.removeEventListener("change", this.changedMenuItemHandler);
   }
   /**
@@ -9080,37 +9351,7 @@ const _BaseMenuList = class _BaseMenuList extends FASTElement {
    * @public
    */
   focus() {
-    this.setFocus(0, 1);
-  }
-  /**
-   * @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);
-      Observable.getNotifier(item).unsubscribe(this, "hidden");
-    });
+    this.menuItems?.find(item => !item.disabled)?.focus();
   }
   static elementIndent(el) {
     const role = el.role;
@@ -9122,24 +9363,13 @@ const _BaseMenuList = class _BaseMenuList extends FASTElement {
   }
   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("focus", this.handleItemFocus);
-    });
-    const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
-    const indent = filteredMenuListItems?.reduce((accum, current) => {
+    this.menuChildren = children.filter(child => !child.hasAttribute("hidden"));
+    this.menuItems = this.menuChildren?.filter(this.isMenuItemElement);
+    const indent = this.menuItems?.reduce((accum, current) => {
       const elementValue = _BaseMenuList.elementIndent(current);
       return Math.max(accum, elementValue);
     }, 0);
-    filteredMenuListItems?.forEach(item => {
+    this.menuItems?.forEach(item => {
       item.dataset.indent = `${indent}`;
     });
   }
@@ -9151,30 +9381,38 @@ const _BaseMenuList = class _BaseMenuList extends FASTElement {
       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;
-    }
+  /**
+   * check if the item is a menu item
+   */
+  isMenuItemElement(el) {
+    return isMenuItem(el) || isHTMLElement(el) && !!el.role && el.role in _BaseMenuList.focusableElementRoles;
   }
 };
 _BaseMenuList.focusableElementRoles = MenuItemRole;
 __decorateClass$o([observable], _BaseMenuList.prototype, "items", 2);
 let BaseMenuList = _BaseMenuList;
 
-class MenuList extends BaseMenuList {}
+class MenuList extends BaseMenuList {
+  disconnectedCallback() {
+    this.fg?.disconnect();
+    super.disconnectedCallback();
+  }
+  setItems() {
+    super.setItems();
+    this.fgItems ?? (this.fgItems = new ArrayItemCollection(() => this.menuItems?.filter(i => !i.hidden) ?? []));
+    if (!this.fg) {
+      this.fg = new FocusGroup(this, this.fgItems, {
+        definition: {
+          behavior: "menu",
+          axis: "block",
+          wrap: true
+        }
+      });
+    } else {
+      this.fg.update();
+    }
+  }
+}
 
 const styles$j = css`
   ${display("flex")}
@@ -9182,18 +9420,20 @@ const styles$j = css`
   :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$1() {
-  return html`<template slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}" @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}" @focusout="${(x, c) => x.handleFocusOut(c.event)}"><slot ${slotted("items")}></slot></template>`;
+  return html`<template focusgroup="menu" slot="${x => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}"><slot ${slotted("items")}></slot></template>`;
 }
 const template$j = menuTemplate$1();
 
 const definition$j = MenuList.compose({
-  name: `${FluentDesignSystem.prefix}-menu-list`,
+  name: tagName$i,
   template: template$j,
   styles: styles$j
 });
 
 definition$j.define(FluentDesignSystem.registry);
 
+const tagName$h = `${FluentDesignSystem.prefix}-menu`;
+
 var __defProp$n = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
 var __decorateClass$n = (decorators, target, key, kind) => {
@@ -9251,9 +9491,10 @@ class Menu extends FASTElement {
      */
     this.toggleHandler = e => {
       if (e.type === "toggle" && e.newState) {
-        const newState = e.newState === "open";
-        this._trigger?.setAttribute("aria-expanded", `${newState}`);
-        this._open = newState;
+        const open = e.newState === "open";
+        this._trigger?.setAttribute("aria-expanded", `${open}`);
+        this._menuList?.setAttribute("focusgroup", open ? "menu" : "none");
+        this._open = open;
         if (this._open) {
           this.focusMenuList();
         }
@@ -9549,13 +9790,15 @@ function menuTemplate() {
 const template$i = menuTemplate();
 
 const definition$i = Menu.compose({
-  name: `${FluentDesignSystem.prefix}-menu`,
+  name: tagName$h,
   template: template$i,
   styles: styles$i
 });
 
 definition$i.define(FluentDesignSystem.registry);
 
+const tagName$g = `${FluentDesignSystem.prefix}-message-bar`;
+
 var __defProp$m = Object.defineProperty;
 var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
 var __decorateClass$m = (decorators, target, key, kind) => {
@@ -9598,7 +9841,7 @@ function messageBarTemplate() {
 const template$h = messageBarTemplate();
 
 const definition$h = MessageBar.compose({
-  name: `${FluentDesignSystem.prefix}-message-bar`,
+  name: tagName$g,
   template: template$h,
   styles: styles$h,
   shadowOptions: {
@@ -9891,7 +10134,7 @@ const template$g = dropdownOptionTemplate({
 });
 
 const definition$g = DropdownOption.compose({
-  name: `${FluentDesignSystem.prefix}-option`,
+  name: tagName$p,
   template: template$g,
   styles: styles$g
 });
@@ -9903,6 +10146,7 @@ const ProgressBarValidationState = {
   warning: "warning",
   error: "error"
 };
+const tagName$f = `${FluentDesignSystem.prefix}-progress-bar`;
 
 var __defProp$k = Object.defineProperty;
 var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
@@ -10031,8 +10275,7 @@ const styles$f = css`
 
   :host{width:100%;height:2px;overflow-x:hidden;background-color:${colorNeutralBackground6};border-radius:${borderRadiusMedium};contain:content;@supports (width:attr(value type(<number>))){--max:attr(max type(<number>),100);--min:attr(min type(<number>),0);--value:attr(value type(<number>),0);--indicator-width:clamp(0%,calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%),100%)}}:host([thickness='large']){height:4px}:host([shape='square']){border-radius:${borderRadiusNone}}.indicator{background-color:${colorCompoundBrandBackground};border-radius:inherit;height:100%}:host([value]) .indicator{transition:all 0.2s ease-in-out;@supports (width:attr(value type(<number>))){width:var(--indicator-width)}}:host(:not([value])) .indicator{position:relative;width:33%;background-image:linear-gradient(
       to right,${colorNeutralBackground6} 0%,${colorTransparentBackground} 50%,${colorNeutralBackground6} 100%
-    );animation-name:indeterminate;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite}:host([validation-state='error']) .indicator{background-color:${colorPaletteRedBackground3}}:host([validation-state='warning']) .indicator{background-color:${colorPaletteDarkOrangeBackground3}}:host([validation-state='success']) .indicator{background-color:${colorPaletteGreenBackground3}}@layer animations{@media (prefers-reduced-motion:no-preference){:host([value]){transition:none}:host(:not([value])) .indicator{animation-duration:0.01ms;animation-iteration-count:1}}}@keyframes indeterminate{0%{inset-inline-start:-33%}100%{inset-inline-start:100%}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{background-color:CanvasText}.indicator,:host(:is([validation-state='success'],[validation-state='warning'],[validation-state='error'])) .indicator{background-color:Highlight}`));
+    );animation-name:indeterminate;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite}:host([validation-state='error']) .indicator{background-color:${colorPaletteRedBackground3}}:host([validation-state='warning']) .indicator{background-color:${colorPaletteDarkOrangeBackground3}}:host([validation-state='success']) .indicator{background-color:${colorPaletteGreenBackground3}}@layer animations{@media (prefers-reduced-motion:no-preference){:host([value]){transition:none}:host(:not([value])) .indicator{animation-duration:0.01ms;animation-iteration-count:1}}}@keyframes indeterminate{0%{inset-inline-start:-33%}100%{inset-inline-start:100%}}@media (forced-colors:active){:host{background-color:CanvasText}.indicator,:host(:is([validation-state='success'],[validation-state='warning'],[validation-state='error'])) .indicator{background-color:Highlight}}`;
 
 function progressTemplate() {
   return html`<div class="indicator" part="indicator" ${ref("indicator")}></div>`;
@@ -10040,26 +10283,20 @@ function progressTemplate() {
 const template$f = progressTemplate();
 
 const definition$f = ProgressBar.compose({
-  name: `${FluentDesignSystem.prefix}-progress-bar`,
+  name: tagName$f,
   template: template$f,
   styles: styles$f
 });
 
 definition$f.define(FluentDesignSystem.registry);
 
-function isRadio(element, tagName = "-radio") {
-  return isCustomElement(tagName)(element);
-}
+const RadioGroupOrientation = Orientation;
+const tagName$e = `${FluentDesignSystem.prefix}-radio-group`;
 
-function getRootActiveElement(element) {
-  const rootNode = element.getRootNode();
-  if (rootNode instanceof ShadowRoot) {
-    return rootNode.activeElement;
-  }
-  return document.activeElement;
+function isRadio(element, tagName2 = "-radio") {
+  return isCustomElement(tagName2)(element);
 }
-
-const RadioGroupOrientation = Orientation;
+const tagName$d = `${FluentDesignSystem.prefix}-radio`;
 
 var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
@@ -10072,6 +10309,7 @@ var __decorateClass$i = (decorators, target, key, kind) => {
 class BaseRadioGroup extends FASTElement {
   constructor() {
     super();
+    this.isNavigating = false;
     /**
      * Indicates that the value has been changed by the user.
      */
@@ -10111,7 +10349,6 @@ class BaseRadioGroup extends FASTElement {
       this.radios?.forEach(radio => {
         radio.disabled = !!radio.disabledAttribute || !!this.disabled;
       });
-      this.restrictFocus();
     }
   }
   /**
@@ -10170,18 +10407,13 @@ class BaseRadioGroup extends FASTElement {
       }
       radio.name = this.name ?? radio.name;
       radio.disabled = !!this.disabled || !!radio.disabledAttribute;
+      radio.toggleAttribute("focusgroupstart", radio.checked && !radio.disabled);
     });
     if (!this.dirtyState && this.initialValue) {
       this.value = this.initialValue;
     }
     if (!this.value ||
     // This logic covers the case when the RadioGroup doesn't have a `value`
-    // attribute, but does have a checked child Radio. Without this condition,
-    // the checked Radio's value will be assigned to `this.value`, and
-    // `checkedIndex` will be the checked Radio's index, but `this.checkedIndex`
-    // will remain `undefined`, which would cause the RadioGroup to add
-    // `tabindex=-1` to the checked Radio, and effectively makes the whole
-    // RadioGroup unfocusable.
     this.value && typeof this.checkedIndex !== "number" && checkedIndex >= 0) {
       this.checkedIndex = checkedIndex;
     }
@@ -10189,9 +10421,6 @@ class BaseRadioGroup extends FASTElement {
     if (radioIds) {
       this.setAttribute("aria-owns", radioIds);
     }
-    Updates.enqueue(() => {
-      this.restrictFocus();
-    });
   }
   /**
    *
@@ -10341,6 +10570,12 @@ class BaseRadioGroup extends FASTElement {
   focus() {
     this.enabledRadios[Math.max(0, this.checkedIndex)]?.focus();
   }
+  formResetCallback() {
+    this.dirtyState = false;
+    this.checkedIndex = -1;
+    this.setFormValue(this.value);
+    this.setValidity();
+  }
   /**
    * Enables tabbing through the radio group when the group receives focus.
    *
@@ -10348,37 +10583,20 @@ class BaseRadioGroup extends FASTElement {
    * @internal
    */
   focusinHandler(e) {
-    if (!this.disabled) {
-      this.enabledRadios.forEach(radio => {
-        radio.tabIndex = 0;
+    if (!this.disabled && (this.isNavigating || this.value)) {
+      this.radios?.forEach(radio => {
+        if (radio.disabled && radio.checked) {
+          radio.checked = false;
+        }
       });
+      const index = this.enabledRadios.indexOf(e.target);
+      if (index > -1) {
+        this.checkRadio(index, true);
+      }
+      this.isNavigating = false;
     }
     return true;
   }
-  /**
-   * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
-   *
-   * @param e - the focusout event
-   * @internal
-   */
-  focusoutHandler(e) {
-    if (this.radios?.includes(e.relatedTarget) && this.radios?.some(x => x.checked)) {
-      this.restrictFocus();
-    }
-    return true;
-  }
-  formResetCallback() {
-    this.dirtyState = false;
-    this.checkedIndex = -1;
-    this.setFormValue(this.value);
-    this.setValidity();
-  }
-  getEnabledIndexInBounds(index, upperBound = this.enabledRadios.length) {
-    if (upperBound === 0) {
-      return -1;
-    }
-    return (index + upperBound) % upperBound;
-  }
   /**
    * Handles keydown events for the radio group.
    *
@@ -10386,47 +10604,20 @@ class BaseRadioGroup extends FASTElement {
    * @internal
    */
   keydownHandler(e) {
-    const isRtl = getDirection(this) === "rtl";
-    const checkedIndex = this.enabledRadios.findIndex(x => x === getRootActiveElement(this)) ?? this.checkedIndex;
-    let increment = 0;
     switch (e.key) {
-      case "ArrowLeft":
-        {
-          increment = isRtl ? 1 : -1;
-          break;
-        }
-      case "ArrowUp":
-        {
-          increment = -1;
-          break;
-        }
-      case "ArrowRight":
-        {
-          increment = isRtl ? -1 : 1;
-          break;
-        }
-      case "ArrowDown":
-        {
-          increment = 1;
-          break;
-        }
-      case "Tab":
-        {
-          this.restrictFocus();
-          break;
-        }
-      case " ":
-        {
-          this.checkRadio();
-          break;
-        }
-    }
-    if (!increment) {
-      return true;
+      case keyArrowUp:
+      case keyArrowDown:
+      case keyArrowLeft:
+      case keyArrowRight:
+      case keyHome:
+      case keyEnd:
+        this.isNavigating = true;
+        break;
+      case keySpace:
+        this.checkRadio();
+        break;
     }
-    const nextIndex = checkedIndex + increment;
-    this.checkRadio(this.getEnabledIndexInBounds(nextIndex), true);
-    this.enabledRadios[this.checkedIndex]?.focus();
+    return true;
   }
   /**
    *
@@ -10447,22 +10638,6 @@ class BaseRadioGroup extends FASTElement {
   reportValidity() {
     return this.elementInternals.reportValidity();
   }
-  /**
-   * Resets the `tabIndex` for all child radios when the radio group loses focus.
-   *
-   * @internal
-   */
-  restrictFocus() {
-    let activeIndex = Math.max(this.checkedIndex, 0);
-    const focusedRadioIndex = this.enabledRadios.indexOf(getRootActiveElement(this));
-    if (focusedRadioIndex !== -1) {
-      activeIndex = focusedRadioIndex;
-    }
-    activeIndex = this.getEnabledIndexInBounds(activeIndex);
-    this.enabledRadios.forEach((item, index) => {
-      item.tabIndex = index === activeIndex ? 0 : -1;
-    });
-  }
   /**
    * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
    *
@@ -10543,7 +10718,27 @@ __decorateClass$i([attr({
 })], BaseRadioGroup.prototype, "required", 2);
 __decorateClass$i([observable], BaseRadioGroup.prototype, "slottedRadios", 2);
 
-class RadioGroup extends BaseRadioGroup {}
+class RadioGroup extends BaseRadioGroup {
+  disconnectedCallback() {
+    this.fg?.disconnect();
+    super.disconnectedCallback();
+  }
+  radiosChanged(prev, next) {
+    super.radiosChanged(prev, next);
+    this.fgItems ?? (this.fgItems = new ArrayItemCollection(() => this.enabledRadios?.filter(r => !r.hidden) ?? [], () => this.enabledRadios?.find(r => r.checked) ?? null));
+    if (!this.fg) {
+      this.fg = new FocusGroup(this, this.fgItems, {
+        definition: {
+          behavior: "radiogroup",
+          axis: void 0,
+          wrap: true
+        }
+      });
+    } else {
+      this.fg.update();
+    }
+  }
+}
 
 const styles$e = css`
   ${display("flex")}
@@ -10551,12 +10746,12 @@ const styles$e = css`
   :host{-webkit-tap-highlight-color:transparent;cursor:pointer;gap:${spacingVerticalL}}:host([orientation='vertical']){flex-direction:column;justify-content:flex-start}:host([orientation='horizontal']){flex-direction:row}::slotted(*){color:${colorNeutralForeground3}}::slotted(:hover){color:${colorNeutralForeground2}}::slotted(:active){color:${colorNeutralForeground1}}::slotted(${disabledState}){color:${colorNeutralForegroundDisabled}}::slotted(${checkedState}){color:${colorNeutralForeground1}}:host([slot='input']){margin:${spacingVerticalS} ${spacingHorizontalS}}`;
 
 function radioGroupTemplate() {
-  return html`<template @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @focusout="${(x, c) => x.focusoutHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot ${slotted("slottedRadios")}></slot></template>`;
+  return html`<template focusgroup="radiogroup wrap" @disabled="${(x, c) => x.disabledRadioHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><slot ${slotted("slottedRadios")}></slot></template>`;
 }
 const template$e = radioGroupTemplate();
 
 const definition$e = RadioGroup.compose({
-  name: `${FluentDesignSystem.prefix}-radio-group`,
+  name: tagName$e,
   template: template$e,
   styles: styles$e
 });
@@ -10588,7 +10783,7 @@ class Radio extends BaseCheckbox {
    * @internal
    * @override
    * @remarks
-   * To make a group of radio controls required, see {@link RadioGroup.required}.
+   * To make a group of radio controls required, see `RadioGroup.required`.
    */
   requiredChanged() {
     return;
@@ -10632,8 +10827,7 @@ class Radio extends BaseCheckbox {
 const styles$d = css`
   ${display("inline-flex")}
 
-  :host{--size:16px;aspect-ratio:1;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};box-sizing:border-box;position:relative;width:var(--size)}:host([size='large']){--size:20px}.checked-indicator{aspect-ratio:1;border-radius:${borderRadiusCircular};color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute;width:calc(var(--size) * 0.625)}:host(:not([slot='input']))::after{content:'' / '';position:absolute;display:block;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(${checkedState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}) .checked-indicator{background-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover) .checked-indicator{background-color:${colorCompoundBrandBackgroundHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:active) .checked-indicator{background-color:${colorCompoundBrandBackgroundPressed}}:host(:focus-visible){outline:none}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host(${checkedState}${disabledState}) .checked-indicator{background-color:${colorNeutralStrokeDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not(${disabledState}):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.checked-indicator{color:HighlightText}:host(${checkedState}) .checked-indicator{background-color:FieldText}:host(${checkedState}:not(${disabledState}):hover) .checked-indicator{background-color:Highlight}:host(${disabledState}){border-color:GrayText;color:GrayText}:host(${disabledState}${checkedState}) .checked-indicator{background-color:GrayText}`));
+  :host{--size:16px;aspect-ratio:1;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};box-sizing:border-box;position:relative;width:var(--size)}:host([size='large']){--size:20px}.checked-indicator{aspect-ratio:1;border-radius:${borderRadiusCircular};color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute;width:calc(var(--size) * 0.625)}:host(:not([slot='input']))::after{content:'' / '';position:absolute;display:block;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(${checkedState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}) .checked-indicator{background-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover) .checked-indicator{background-color:${colorCompoundBrandBackgroundHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:active) .checked-indicator{background-color:${colorCompoundBrandBackgroundPressed}}:host(:focus-visible){outline:none}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host(${checkedState}${disabledState}) .checked-indicator{background-color:${colorNeutralStrokeDisabled}}@media (forced-colors:active){:host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not(${disabledState}):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.checked-indicator{color:HighlightText}:host(${checkedState}) .checked-indicator{background-color:FieldText}:host(${checkedState}:not(${disabledState}):hover) .checked-indicator{background-color:Highlight}:host(${disabledState}){border-color:GrayText;color:GrayText}:host(${disabledState}${checkedState}) .checked-indicator{background-color:GrayText}}`;
 
 const checkedIndicator = html.partial(/* html */
 `
@@ -10647,13 +10841,15 @@ const template$d = radioTemplate({
 });
 
 const definition$d = Radio.compose({
-  name: `${FluentDesignSystem.prefix}-radio`,
+  name: tagName$d,
   template: template$d,
   styles: styles$d
 });
 
 definition$d.define(FluentDesignSystem.registry);
 
+const tagName$c = `${FluentDesignSystem.prefix}-rating-display`;
+
 var __defProp$h = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
 var __decorateClass$h = (decorators, target, key, kind) => {
@@ -10813,17 +11009,33 @@ const styles$c = css`
       var(--_mask-inline-size) * var(--_value) - var(--_icon-gradient-stop-visual-adjustment)
     );background-image:linear-gradient(
       var(--_icon-gradient-degree),var(--_icon-color-value) var(--_icon-gradient-stop),var(--_icon-color-empty) calc(var(--_icon-gradient-stop) + 0.5px)
-    );block-size:var(--_icon-size);display:grid;inline-size:calc(var(--_max) * var(--_mask-inline-size) - ${spacingHorizontalXXS} / 2);mask-image:var(--_mask-image-filled);mask-repeat:repeat no-repeat;mask-size:var(--_mask-inline-size) var(--_icon-size);mask-position:var(--_mask-position-x) center}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host([size='small']) .value-label,:host([size='small']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host([size='large']) .value-label,:host([size='large']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host([size='small']) .count-label::before,:host([size='small']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host([size='large']) .count-label::before,:host([size='large']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    .display{--_icon-color-value:CanvasText;--_icon-color-empty:Canvas;--_icon-gradient-stop-visual-adjustment:0.5px;forced-color-adjust:none}.display::before{background-color:var(--_icon-color-value);content:'';grid-area:1 / 1 / -1 / -1;mask:inherit;mask-image:var(--_mask-image-outlined)}`));
+    );block-size:var(--_icon-size);display:grid;inline-size:calc(var(--_max) * var(--_mask-inline-size) - ${spacingHorizontalXXS} / 2);mask-image:var(--_mask-image-filled);mask-repeat:repeat no-repeat;mask-size:var(--_mask-inline-size) var(--_icon-size);mask-position:var(--_mask-position-x) center}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host([size='small']) .value-label,:host([size='small']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host([size='large']) .value-label,:host([size='large']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host([size='small']) .count-label::before,:host([size='small']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host([size='large']) .count-label::before,:host([size='large']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}@media (forced-colors:active){.display{--_icon-color-value:CanvasText;--_icon-color-empty:Canvas;--_icon-gradient-stop-visual-adjustment:0.5px;forced-color-adjust:none}.display::before{background-color:var(--_icon-color-value);content:'';grid-area:1 / 1 / -1 / -1;mask:inherit;mask-image:var(--_mask-image-outlined)}}`;
 
 const definition$c = RatingDisplay.compose({
-  name: `${FluentDesignSystem.prefix}-rating-display`,
+  name: tagName$c,
   template: template$c,
   styles: styles$c
 });
 
 definition$c.define(FluentDesignSystem.registry);
 
+const SliderOrientation = Orientation;
+const SliderMode = {
+  singleValue: "single-value"
+};
+const tagName$b = `${FluentDesignSystem.prefix}-slider`;
+
+const numberLikeStringConverter = {
+  fromView(value) {
+    const valueAsNumber = parseFloat(value);
+    return Number.isNaN(valueAsNumber) ? "" : valueAsNumber.toString();
+  },
+  toView(value) {
+    const valueAsNumber = parseFloat(value);
+    return Number.isNaN(valueAsNumber) ? void 0 : valueAsNumber.toString();
+  }
+};
+
 function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   let pct = limit(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
   if (direction === Direction.rtl) {
@@ -10832,11 +11044,6 @@ function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
   return pct;
 }
 
-const SliderOrientation = Orientation;
-const SliderMode = {
-  singleValue: "single-value"
-};
-
 var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
 var __decorateClass$f = (decorators, target, key, kind) => {
@@ -11414,8 +11621,7 @@ const styles$b = css`
       var(--slider-direction),var(--rail-color) 0%,var(--rail-color) 50%,var(--track-color) 50.1%,var(--track-color) 100%
     );border-radius:var(--border-radius);content:'';grid-row:1 / -1;grid-column:1 / -1}.track{position:relative;background-color:var(--track-color);grid-row:2 / 2;grid-column:2 / 2;forced-color-adjust:none;overflow:hidden}:host([orientation='vertical'])::after,:host([orientation='vertical']) .track{height:100%;width:var(--track-size)}.track::before{content:'';position:absolute;height:100%;border-radius:inherit;inset-inline-start:0;width:var(--slider-progress)}:host(:dir(rtl)) .track::before{width:calc(100% - var(--slider-progress))}:host([orientation='vertical']) .track::before{width:100%;bottom:0;height:var(--slider-progress)}:host([step]) .track::after{content:'';position:absolute;border-radius:inherit;inset:var(--step-marker-inset);background-image:repeating-linear-gradient(
       var(--slider-direction),#0000 0%,#0000 calc(var(--step-rate) - 1px),${colorNeutralBackground1} calc(var(--step-rate) - 1px),${colorNeutralBackground1} var(--step-rate)
-    )}.thumb-container{position:absolute;grid-row:2 / 2;grid-column:2 / 2;transform:translateX(-50%);left:var(--slider-thumb)}:host([orientation='vertical']) .thumb-container{transform:translateY(50%);left:unset;bottom:var(--slider-thumb)}:host(:not(:active)) :is(.thumb-container,.track::before){transition:all 0.2s ease}.thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:${borderRadiusCircular};box-shadow:0 0 0 calc(var(--thumb-size) * 0.2) ${colorNeutralBackground1} inset;border:calc(var(--thumb-size) * 0.05) solid ${colorNeutralStroke1};box-sizing:border-box}.thumb,.track::before{background-color:var(--rail-color)}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    .track:hover,.track:active,.track{background:WindowText}.thumb:hover,.thumb:active,.thumb{background:ButtonText}:host(:hover) .track::before,:host(:active) .track::before,.track::before{background:Highlight}`));
+    )}.thumb-container{position:absolute;grid-row:2 / 2;grid-column:2 / 2;transform:translateX(-50%);left:var(--slider-thumb)}:host([orientation='vertical']) .thumb-container{transform:translateY(50%);left:unset;bottom:var(--slider-thumb)}:host(:not(:active)) :is(.thumb-container,.track::before){transition:all 0.2s ease}.thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:${borderRadiusCircular};box-shadow:0 0 0 calc(var(--thumb-size) * 0.2) ${colorNeutralBackground1} inset;border:calc(var(--thumb-size) * 0.05) solid ${colorNeutralStroke1};box-sizing:border-box}.thumb,.track::before{background-color:var(--rail-color)}@media (forced-colors:active){.track:hover,.track:active,.track{background:WindowText}.thumb:hover,.thumb:active,.thumb{background:ButtonText}:host(:hover) .track::before,:host(:active) .track::before,.track::before{background:Highlight}}`;
 
 function sliderTemplate(options = {}) {
   return html`<template @pointerdown="${(x, c) => x.handlePointerDown(c.event)}" @keydown="${(x, c) => x.handleKeydown(c.event)}"><div ${ref("track")} part="track-container" class="track" style="${x => x.position}"></div><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event)}"><slot name="thumb">${staticallyCompose(options.thumb)}</slot></div></template>`;
@@ -11425,13 +11631,15 @@ const template$b = sliderTemplate({
 });
 
 const definition$b = Slider.compose({
-  name: `${FluentDesignSystem.prefix}-slider`,
+  name: tagName$b,
   template: template$b,
   styles: styles$b
 });
 
 definition$b.define(FluentDesignSystem.registry);
 
+const tagName$a = `${FluentDesignSystem.prefix}-spinner`;
+
 class BaseSpinner extends FASTElement {
   constructor() {
     super();
@@ -11460,19 +11668,20 @@ __decorateClass$e([attr], Spinner.prototype, "appearance", 2);
 const styles$a = css`
   ${display("inline-flex")}
 
-  :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host([size='tiny']){--indicatorSize:${strokeWidthThick};--size:20px}:host([size='extra-small']){--indicatorSize:${strokeWidthThick};--size:24px}:host([size='small']){--indicatorSize:${strokeWidthThick};--size:28px}:host([size='large']){--indicatorSize:${strokeWidthThicker};--size:36px}:host([size='extra-large']){--indicatorSize:${strokeWidthThicker};--size:40px}:host([size='huge']){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host([appearance='inverted']) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;right:50%}.end{overflow:hidden;left:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-right-color:currentcolor}:host([appearance='inverted']) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    .background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-right-color:Highlight}`));
+  :host{--duration:1.5s;--indicatorSize:${strokeWidthThicker};--size:32px;height:var(--size);width:var(--size);contain:strict;content-visibility:auto}:host([size='tiny']){--indicatorSize:${strokeWidthThick};--size:20px}:host([size='extra-small']){--indicatorSize:${strokeWidthThick};--size:24px}:host([size='small']){--indicatorSize:${strokeWidthThick};--size:28px}:host([size='large']){--indicatorSize:${strokeWidthThicker};--size:36px}:host([size='extra-large']){--indicatorSize:${strokeWidthThicker};--size:40px}:host([size='huge']){--indicatorSize:${strokeWidthThickest};--size:44px}.progress,.background,.spinner,.start,.end,.indicator{position:absolute;inset:0}.progress,.spinner,.indicator{animation:none var(--duration) infinite ${curveEasyEase}}.progress{animation-timing-function:linear;animation-name:spin-linear}.background{border:var(--indicatorSize) solid ${colorBrandStroke2};border-radius:50%}:host([appearance='inverted']) .background{border-color:rgba(255,255,255,0.2)}.spinner{animation-name:spin-swing}.start{overflow:hidden;right:50%}.end{overflow:hidden;left:50%}.indicator{color:${colorBrandStroke1};box-sizing:border-box;border-radius:50%;border:var(--indicatorSize) solid transparent;border-block-start-color:currentcolor;border-right-color:currentcolor}:host([appearance='inverted']) .indicator{color:${colorNeutralStrokeOnBrand2}}.start .indicator{rotate:135deg;inset:0 -100% 0 0;animation-name:spin-start}.end .indicator{rotate:135deg;inset:0 0 0 -100%;animation-name:spin-end}@keyframes spin-linear{100%{transform:rotate(360deg)}}@keyframes spin-swing{0%{transform:rotate(-135deg)}50%{transform:rotate(0deg)}100%{transform:rotate(225deg)}}@keyframes spin-start{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}}@keyframes spin-end{0%,100%{transform:rotate(0deg)}50%{transform:rotate(70deg)}}@media (forced-colors:active){.background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-right-color:Highlight}}`;
 
 const template$a = html`<slot name="indicator"><div class="background"></div><div class="progress"><div class="spinner"><div class="start"><div class="indicator"></div></div><div class="end"><div class="indicator"></div></div></div></div></slot>`;
 
 const definition$a = Spinner.compose({
-  name: `${FluentDesignSystem.prefix}-spinner`,
+  name: tagName$a,
   template: template$a,
   styles: styles$a
 });
 
 definition$a.define(FluentDesignSystem.registry);
 
+const tagName$9 = `${FluentDesignSystem.prefix}-switch`;
+
 class Switch extends BaseCheckbox {
   constructor() {
     super();
@@ -11490,17 +11699,24 @@ const template$9 = switchTemplate({
 const styles$9 = css`
   ${display("inline-flex")}
 
-  :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${spacingHorizontalXXS};width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular}}:host(:enabled){cursor:pointer}:host(:hover){background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(:disabled),:host([readonly]){border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host(${checkedState}){background:${colorCompoundBrandBackground};border-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover){background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host(${checkedState}:active){background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host(${checkedState}:disabled){background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host(${checkedState}) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}:host(${checkedState}:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host(${checkedState}:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(${checkedState}:disabled) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};outline-offset:1px;box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{border-color:InactiveBorder}:host(${checkedState}),:host(${checkedState}:active),:host(${checkedState}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${checkedState}) .checked-indicator,:host(${checkedState}:hover) .checked-indicator,:host(${checkedState}:active) .checked-indicator{background-color:ButtonFace}:host(:disabled) .checked-indicator,:host(${checkedState}:disabled) .checked-indicator{background-color:GrayText}`));
+  :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${spacingHorizontalXXS};width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular}}:host(:enabled){cursor:pointer}:host(:hover){background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(:disabled),:host([readonly]){border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host(${checkedState}){background:${colorCompoundBrandBackground};border-color:${colorCompoundBrandBackground}}:host(${checkedState}:hover){background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host(${checkedState}:active){background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host(${checkedState}:disabled){background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:margin-inline-start}:host(${checkedState}) .checked-indicator{background-color:${colorNeutralForegroundInverted};margin-inline-start:calc(100% - 14px)}:host(${checkedState}:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host(${checkedState}:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(${checkedState}:disabled) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};outline-offset:1px;box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media (forced-colors:active){:host{border-color:InactiveBorder}:host(${checkedState}),:host(${checkedState}:active),:host(${checkedState}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${checkedState}) .checked-indicator,:host(${checkedState}:hover) .checked-indicator,:host(${checkedState}:active) .checked-indicator{background-color:ButtonFace}:host(:disabled) .checked-indicator,:host(${checkedState}:disabled) .checked-indicator{background-color:GrayText}}`;
 
 const definition$9 = Switch.compose({
-  name: `${FluentDesignSystem.prefix}-switch`,
+  name: tagName$9,
   template: template$9,
   styles: styles$9
 });
 
 definition$9.define(FluentDesignSystem.registry);
 
+function isTab(element, tagName2 = "-tab") {
+  if (element?.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+  return element.tagName.toLowerCase().endsWith(tagName2);
+}
+const tagName$8 = `${FluentDesignSystem.prefix}-tab`;
+
 var __defProp$d = Object.defineProperty;
 var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
 var __decorateClass$d = (decorators, target, key, kind) => {
@@ -11520,12 +11736,13 @@ class Tab extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "tab";
   }
+  disabledChanged(prev, next) {
+    this.setDisabledSideEffect(next);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.slot || (this.slot = "tab");
-    if (this.disabled) {
-      this.setAttribute("aria-disabled", "true");
-    }
+    this.setDisabledSideEffect(this.disabled);
     if (this.styles) {
       this.$fastController.removeStyles(this.styles);
     }
@@ -11533,6 +11750,14 @@ class Tab extends FASTElement {
       :host{--textContent:'${this.textContent}'}`;
     this.$fastController.addStyles(this.styles);
   }
+  setDisabledSideEffect(disabled) {
+    if (disabled) {
+      this.setAttribute("aria-disabled", "true");
+    } else {
+      this.removeAttribute("aria-disabled");
+    }
+    this.tabIndex = disabled && this.getAttribute("aria-selected") !== "true" ? -1 : 0;
+  }
 }
 __decorateClass$d([attr({
   mode: "boolean"
@@ -11540,46 +11765,29 @@ __decorateClass$d([attr({
 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>`;
+  return html`<template slot="tab" role="tab">${startSlotTemplate(options)}<span class="tab-content"><slot></slot></span>${endSlotTemplate(options)}</template>`;
 }
 const template$8 = tabTemplate({});
 
 const styles$8 = css`
   ${display("inline-flex")}
 
-  :host{position:relative;flex-direction:row;align-items:center;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};gap:4px}: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}: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}}:host([data-hasIndent]){display:grid;grid-template-columns:20px 1fr auto}:host([data-hasIndent]) .tab-content{grid-column:2}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([aria-selected='true'])::after{background-color:Highlight}`));
+  :host{position:relative;flex-direction:row;align-items:center;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};gap:4px}: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}@supports (anchor-name:--a) and (text-size-adjust:auto){:host([aria-selected='true'])::after{background-color:transparent}:host([aria-selected='true']:hover)::after{background-color:${colorNeutralStroke1Hover}}}:host([aria-selected='true'][disabled])::after{background-color:${colorNeutralForegroundDisabled}}::slotted([slot='start']),::slotted([slot='end']){display:flex}:host([disabled]){cursor:not-allowed;fill:${colorNeutralForegroundDisabled};color:${colorNeutralForegroundDisabled};pointer-events:none}: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}}:host([data-hasIndent]){display:grid;grid-template-columns:20px 1fr auto}:host([data-hasIndent]) .tab-content{grid-column:2}@media (forced-colors:active){:host([aria-selected='true'])::after{background-color:Highlight}}`;
 
 const definition$8 = Tab.compose({
-  name: `${FluentDesignSystem.prefix}-tab`,
+  name: tagName$8,
   template: template$8,
   styles: styles$8
 });
 
 definition$8.define(FluentDesignSystem.registry);
 
-function isTab(element, tagName = "-tab") {
-  if (element?.nodeType !== Node.ELEMENT_NODE) {
-    return false;
-  }
-  return element.tagName.toLowerCase().endsWith(tagName);
-}
-
-const isARIADisabledElement = el => {
-  return el.getAttribute("aria-disabled") === "true" || el.elementInternals?.ariaDisabled === "true";
-};
-const isHiddenElement = el => {
-  return el.hasAttribute("hidden");
-};
-const isFocusableElement = el => {
-  return !isARIADisabledElement(el) && !isHiddenElement(el);
-};
-
 const TablistAppearance = {
   subtle: "subtle",
   transparent: "transparent"
 };
 const TablistOrientation = Orientation;
+const tagName$7 = `${FluentDesignSystem.prefix}-tablist`;
 
 var __defProp$c = Object.defineProperty;
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
@@ -11600,84 +11808,23 @@ class BaseTablist extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.disabled = false;
     this.orientation = TablistOrientation.horizontal;
-    this.prevActiveTabIndex = 0;
-    this.activeTabIndex = 0;
+    this.tabs = [];
     this.tabPanelMap = /* @__PURE__ */new WeakMap();
-    this.change = () => {
-      this.$emit("change", this.activetab);
-    };
-    this.handleTabClick = event => {
-      const selectedTab = event.currentTarget;
-      if (selectedTab.disabled || this.disabled) {
-        return;
-      }
-      if (selectedTab.nodeType === Node.ELEMENT_NODE && isFocusableElement(selectedTab)) {
-        this.prevActiveTabIndex = this.activeTabIndex;
-        this.activeTabIndex = this.tabs.indexOf(selectedTab);
-        this.setComponent();
-      }
-    };
-    this.handleTabKeyDown = event => {
-      if (this.disabled) {
-        return;
-      }
-      const dir = getDirection(this);
-      switch (event.key) {
-        case keyArrowLeft:
-          if (!this.isHorizontal()) {
-            return;
-          }
-          event.preventDefault();
-          this.adjust(dir === "ltr" ? -1 : 1);
-          break;
-        case keyArrowRight:
-          if (!this.isHorizontal()) {
-            return;
-          }
-          event.preventDefault();
-          this.adjust(dir === "ltr" ? 1 : -1);
-          break;
-        case keyArrowUp:
-          if (this.isHorizontal()) {
-            return;
-          }
-          event.preventDefault();
-          this.adjust(-1);
-          break;
-        case keyArrowDown:
-          if (this.isHorizontal()) {
-            return;
-          }
-          event.preventDefault();
-          this.adjust(1);
-          break;
-        case keyHome:
-          event.preventDefault();
-          this.adjust(-this.activeTabIndex);
-          break;
-        case keyEnd:
-          event.preventDefault();
-          this.adjust(this.tabs.filter(t => isFocusableElement(t)).length - this.activeTabIndex - 1);
-          break;
-      }
+    this.change = () => {
+      this.$emit("change", this.activetab);
     };
     this.elementInternals.role = "tablist";
     this.elementInternals.ariaOrientation = this.orientation ?? TablistOrientation.horizontal;
   }
-  /**
-   * Handles disabled changes
-   * @param prev - previous value
-   * @param next - next value
-   *
-   * @internal
-   */
+  /** @internal */
   disabledChanged(prev, next) {
-    toggleState(this.elementInternals, "disabled", next);
-    this.setTabs();
+    if (this.elementInternals) {
+      toggleState(this.elementInternals, "disabled", next);
+    }
+    this.setTabs({
+      forceDisabled: true
+    });
   }
-  /**
-   * @internal
-   */
   orientationChanged(prev, next) {
     if (this.elementInternals) {
       this.elementInternals.ariaOrientation = next ?? TablistOrientation.horizontal;
@@ -11685,54 +11832,56 @@ class BaseTablist extends FASTElement {
     }
     this.setTabs();
   }
-  /**
-   * @internal
-   */
+  /** @internal */
   activeidChanged(oldValue, newValue) {
     if (this.tabs?.length > 0) {
-      this.prevActiveTabIndex = this.tabs.findIndex(item => item.id === oldValue);
-      this.setTabs();
-      if (oldValue) {
-        const prevActiveTab = this.tabs[this.prevActiveTabIndex];
-        const prevActivePanel = this.tabPanelMap.get(prevActiveTab);
-        if (prevActivePanel) {
-          prevActivePanel.hidden = true;
-        }
-      }
-      if (newValue && this.activetab) {
-        const activePanel = this.tabPanelMap.get(this.activetab);
-        if (activePanel) {
-          activePanel.hidden = false;
-        }
-      }
-      if (oldValue !== newValue) {
-        this.change();
-      }
+      this.changeTab(oldValue, newValue);
     }
   }
-  /**
-   * Updates the tabs property when content in the tabs slot changes.
-   * @internal
-   */
+  /** @internal */
   slottedTabsChanged(prev, next) {
     this.tabs = next?.filter(tab => isTab(tab)) ?? [];
   }
-  /**
-   * @internal
-   */
+  /** @internal */
   tabsChanged(prev, next) {
-    if (prev?.length) {
-      prev.forEach(tab => {
-        tab.removeEventListener("click", this.handleTabClick);
-        tab.removeEventListener("keydown", this.handleTabKeyDown);
+    if (this.tabs?.length > 0) {
+      this.setTabs({
+        connectToPanel: true
       });
     }
-    if (this.tabs.length > 0) {
-      this.tabIds = this.getTabIds();
-      this.setTabs();
-      for (const tab of this.tabs) {
+  }
+  /**
+   * Function that is invoked whenever the selected tab or the tab collection changes.
+   */
+  setTabs({
+    connectToPanel = false,
+    forceDisabled = false
+  } = {}) {
+    if (!this.tabs) {
+      return;
+    }
+    const hasStartSlot = this.tabs.some(tab => !!tab.querySelector("[slot='start']"));
+    const rootNode = this.getRootNode();
+    let firstEnabledTabId = "";
+    for (const tab of this.tabs) {
+      if (tab.slot !== "tab") {
+        continue;
+      }
+      tab.id || (tab.id = uniqueId$1("tab-"));
+      if (forceDisabled) {
+        tab.disabled = this.disabled;
+      } else {
+        tab.disabled = tab.disabled || this.disabled;
+      }
+      if (!firstEnabledTabId && !tab.disabled) {
+        firstEnabledTabId = tab.id;
+      }
+      const isSelected = this.activeid === tab.id;
+      tab.toggleAttribute("focusgroupstart", isSelected);
+      tab.setAttribute("aria-selected", isSelected.toString());
+      tab.toggleAttribute("data-hasIndent", hasStartSlot && this.orientation === TablistOrientation.vertical);
+      if (connectToPanel) {
         const ariaControls = tab.getAttribute("aria-controls") ?? "";
-        const rootNode = this.getRootNode();
         const panel = rootNode.getElementById(ariaControls);
         if (ariaControls && panel) {
           panel.role ?? (panel.role = "tabpanel");
@@ -11741,84 +11890,43 @@ class BaseTablist extends FASTElement {
         }
       }
     }
+    if (!this.disabled) {
+      if (this.activeid) {
+        this.changeTab(void 0, this.activeid);
+      } else if (firstEnabledTabId) {
+        this.activeid = firstEnabledTabId;
+      }
+    }
   }
-  getActiveIndex() {
-    const id = this.activeid;
-    if (id !== void 0) {
-      return this.tabIds.indexOf(this.activeid) === -1 ? 0 : this.tabIds.indexOf(this.activeid);
-    } else {
-      return 0;
+  /** @internal */
+  handleFocusIn(event) {
+    const target = event.target;
+    if (!isTab(target) || target.disabled) {
+      return;
     }
+    this.activeid = target.id;
   }
-  /**
-   * Function that is invoked whenever the selected tab or the tab collection changes.
-   *
-   * @public
-   */
-  setTabs() {
-    this.activeTabIndex = this.getActiveIndex();
-    const hasStartSlot = this.tabs?.some(tab => !!tab.querySelector("[slot='start']"));
-    this.tabs?.forEach((tab, index) => {
-      if (tab.slot === "tab") {
-        const isActiveTab = this.activeTabIndex === index && isFocusableElement(tab);
-        const tabId = this.tabIds[index];
-        if (!tab.disabled) {
-          this.disabled ? tab.setAttribute("aria-disabled", "true") : tab.removeAttribute("aria-disabled");
-        }
-        tab.setAttribute("id", tabId);
-        tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
-        tab.addEventListener("click", this.handleTabClick);
-        tab.addEventListener("keydown", this.handleTabKeyDown);
-        tab.setAttribute("tabindex", isActiveTab && !this.disabled ? "0" : "-1");
-        if (isActiveTab) {
-          this.activetab = tab;
-          this.activeid = tabId;
-        }
-        if (hasStartSlot && this.orientation === TablistOrientation.vertical) {
-          tab.setAttribute("data-hasIndent", "");
-        }
+  changeTab(oldId, newId) {
+    const rootNode = this.getRootNode();
+    const prevTab = oldId ? rootNode.getElementById(oldId) : null;
+    const nextTab = rootNode.getElementById(newId);
+    if (!isTab(nextTab) || !this.contains(nextTab)) {
+      return;
+    }
+    if (prevTab) {
+      prevTab.setAttribute("aria-selected", "false");
+      const prevPanel = this.tabPanelMap.get(prevTab);
+      if (prevPanel) {
+        prevPanel.hidden = true;
       }
-    });
-  }
-  getTabIds() {
-    return this.tabs?.map(tab => {
-      return tab.getAttribute("id") ?? `tab-${uniqueId$1()}`;
-    }) ?? [];
-  }
-  setComponent() {
-    if (this.activeTabIndex !== this.prevActiveTabIndex) {
-      this.activeid = this.tabIds[this.activeTabIndex];
-      this.focusTab();
     }
-  }
-  isHorizontal() {
-    return this.orientation === TablistOrientation.horizontal;
-  }
-  /**
-   * The adjust method for FASTTabs
-   * @public
-   * @remarks
-   * This method allows the active index to be adjusted by numerical increments
-   */
-  adjust(adjustment) {
-    const focusableTabs = this.tabs.filter(t => isFocusableElement(t));
-    const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-    const nextTabIndex = wrapInBounds(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
-    const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
-    if (nextIndex > -1) {
-      this.activateTabByIndex(this.tabs, nextIndex);
-    }
-  }
-  activateTabByIndex(group, index) {
-    const tab = group[index];
-    this.activetab = tab;
-    this.prevActiveTabIndex = this.activeTabIndex;
-    this.activeTabIndex = index;
-    tab.focus();
-    this.setComponent();
-  }
-  focusTab() {
-    this.tabs[this.activeTabIndex].focus();
+    nextTab.setAttribute("aria-selected", "true");
+    const nextPanel = this.tabPanelMap.get(nextTab);
+    if (nextPanel) {
+      nextPanel.hidden = false;
+    }
+    this.activetab = nextTab;
+    this.change();
   }
   /**
    * @internal
@@ -11826,7 +11934,6 @@ class BaseTablist extends FASTElement {
   connectedCallback() {
     super.connectedCallback();
     waitForConnectedDescendants(this, () => {
-      this.tabIds = this.getTabIds();
       this.setTabs();
     }, {
       shallow: true
@@ -11852,154 +11959,41 @@ var __decorateClass$b = (decorators, target, key, kind) => {
 class Tablist extends BaseTablist {
   constructor() {
     super(...arguments);
-    /**
-     * activeTabData
-     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-     */
-    this.activeTabData = {
-      x: 0,
-      y: 0,
-      height: 0,
-      width: 0
-    };
-    /**
-     * previousActiveTabData
-     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
-     */
-    this.previousActiveTabData = {
-      x: 0,
-      y: 0,
-      height: 0,
-      width: 0
-    };
-    /**
-     * activeTabOffset
-     * Used to position the active indicator for animations of the active indicator on active tab changes.
-     */
-    this.activeTabOffset = 0;
-    /**
-     * activeTabScale
-     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
-     */
-    this.activeTabScale = 1;
     this.appearance = TablistAppearance.transparent;
   }
-  /**
-   * calculateAnimationProperties
-   *
-   * Recalculates the active tab offset and scale.
-   * These values will be applied to css variables that control the tab active indicator position animations
-   */
-  calculateAnimationProperties(tab) {
-    this.activeTabOffset = this.getTabPosition(tab);
-    this.activeTabScale = this.getTabScale(tab);
-  }
-  /**
-   * getSelectedTabPosition - gets the x or y coordinates of the tab
-   */
-  getTabPosition(tab) {
-    if (this.orientation === TablistOrientation.horizontal) {
-      return this.previousActiveTabData.x - (tab.getBoundingClientRect().x - this.getBoundingClientRect().x);
-    } else return this.previousActiveTabData.y - (tab.getBoundingClientRect().y - this.getBoundingClientRect().y);
-  }
-  /**
-   * getSelectedTabScale - gets the scale of the tab
-   */
-  getTabScale(tab) {
-    if (this.orientation === TablistOrientation.horizontal) {
-      return this.previousActiveTabData.width / tab.getBoundingClientRect().width;
-    } else return this.previousActiveTabData.height / tab.getBoundingClientRect().height;
-  }
-  /**
-   * Calculates and applies updated values to CSS variables.
-   *
-   * @param tab - the tab element to apply the updated values to
-   * @internal
-   */
-  applyUpdatedCSSValues(tab) {
-    this.calculateAnimationProperties(tab);
-    this.setAnimationVars();
-  }
-  /**
-   * 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");
-    this.applyUpdatedCSSValues(tab);
-    this.previousActiveTabData = this.activeTabData;
-    this.applyUpdatedCSSValues(tab);
-    tab.setAttribute("data-animate", "true");
-  }
-  /**
-   * 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) {
-      const tabs = this.tabs;
-      const activeTab = this.activetab || tabs[0];
-      const activeRect = activeTab?.getBoundingClientRect();
-      const parentRect = this.getBoundingClientRect();
-      this.activeTabData = {
-        x: activeRect.x - parentRect.x,
-        y: activeRect.y - parentRect.y,
-        height: activeRect.height,
-        width: activeRect.width
-      };
-      if (this.previousActiveTabData?.x !== this.activeTabData?.x && this.previousActiveTabData?.y !== this.activeTabData?.y) {
-        this.previousActiveTabData = this.activeTabData;
-      }
-    }
-  }
-  /**
-   * Sets the css variables for the active tab indicator.
-   * @internal
-   */
-  setAnimationVars() {
-    this.style.setProperty("--tabIndicatorOffset", `${this.activeTabOffset}px`);
-    this.style.setProperty("--tabIndicatorScale", `${this.activeTabScale}`);
-  }
-  /**
-   * Initiates the active tab indicator animation loop when activeid changes.
-   * @param oldValue - the previous tabId
-   * @param newValue - the new tabId
-   */
-  activeidChanged(oldValue, newValue) {
-    super.activeidChanged(oldValue, newValue);
-    this.setTabData();
-    if (this.activetab) {
-      this.animationLoop(this.activetab);
-    }
+  disconnectedCallback() {
+    this.fg?.disconnect();
+    super.disconnectedCallback();
   }
-  /**
-   * Initiates the active tab indicator animation loop when tabs change.
-   */
   tabsChanged(prev, next) {
     super.tabsChanged(prev, next);
-    this.setTabData();
-    if (this.activetab) {
-      this.animationLoop(this.activetab);
+    this.fgItems ?? (this.fgItems = new ArrayItemCollection(() => this.tabs?.filter(t => (t.getAttribute("aria-selected") === "true" || !t.disabled) && !t.hidden) ?? [], () => this.activetab ?? null));
+    if (!this.fg) {
+      this.fg = new FocusGroup(this, this.fgItems, {
+        definition: {
+          behavior: "tablist",
+          axis: void 0,
+          memory: false,
+          wrap: true
+        }
+      });
+    } else {
+      this.fg.update();
     }
   }
 }
 __decorateClass$b([attr], Tablist.prototype, "appearance", 2);
 __decorateClass$b([attr], Tablist.prototype, "size", 2);
 
-const template$7 = html`<template role="tablist"><slot name="tab" ${slotted("slottedTabs")}></slot></template>`;
+const template$7 = html`<template role="tablist" focusgroup="tablist inline block" @focusin="${(x, c) => x.handleFocusIn(c.event)}"><slot name="tab" ${slotted("slottedTabs")}></slot></template>`;
 
 const styles$7 = css`
   ${display("flex")}
 
-  :host{--tabPaddingInline:inherit;--tabPaddingBlock:inherit;--tabIndicatorInsetInline:0;--tabIndicatorInsetBlock:0;box-sizing:border-box;color:${colorNeutralForeground2};flex-direction:row}:host([orientation='vertical']){flex-direction:column}:host([orientation='vertical']) ::slotted([role='tab']){justify-content:flex-start}:host ::slotted([slot='tab'][data-animate='true'])::after{transition-property:transform;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax}}:host ::slotted([slot='tab'])::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted([slot='tab'])::after{width:${strokeWidthThicker};height:unset;margin-block-start:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted([slot='tab'])::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock);position:absolute;margin-top:auto}:host ::slotted([slot='tab'])::before{inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock)}:host ::slotted([slot='tab'][aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}:host ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left}:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host(:where([size='small'],[size='large'])) ::slotted([slot='tab']){padding-inline:var(--tabPaddingInline);padding-block:var(--tabPaddingBlock)}:host([size='small']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalSNudge};--tabPaddingInline:${spacingHorizontalSNudge};font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='large']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalL};--tabPaddingInline:${spacingHorizontalMNudge};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host ::slotted([slot='tab'])::after,:host ::slotted([slot='tab'])::before,:host ::slotted([slot='tab']:hover)::after{inset-inline:var(--tabIndicatorInsetInline)}:host ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host([size='small']) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalSNudge}}:host([size='large']) ::slotted([slot='tab']){--tabIndicatorInsetInline:${spacingHorizontalMNudge}}:host([orientation='vertical']) ::slotted([slot='tab']){padding-block:var(--tabPaddingBlock)}:host([orientation='vertical']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host([orientation='vertical'][size='small']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalXXS}}:host([orientation='vertical'][size='large']) ::slotted([slot='tab']){--tabPaddingBlock:${spacingVerticalS}}:host([orientation='vertical']) ::slotted([slot='tab'])::after,:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab']:hover)::after{inset-inline:0;inset-block:var(--tabIndicatorInsetBlock)}:host([orientation='vertical']){--tabIndicatorInsetBlock:${spacingVerticalS}}:host([orientation='vertical'][size='small']){--tabIndicatorInsetBlock:${spacingVerticalSNudge}}:host([orientation='vertical'][size='large']){--tabIndicatorInsetBlock:${spacingVerticalMNudge}}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:hover):before{content:unset}:host([appearance='subtle']) ::slotted([slot='tab']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted([slot='tab']:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}`;
+  :host{--tabPaddingInline:${spacingHorizontalMNudge};--tabPaddingBlock:${spacingHorizontalM};--tabIndicatorInsetInline:var(--tabPaddingInline);--tabIndicatorInsetBlock:0;box-sizing:border-box;color:${colorNeutralForeground2};flex-direction:row;position:relative}:host([size='small']){--tabPaddingBlock:${spacingVerticalSNudge};--tabPaddingInline:${spacingHorizontalSNudge}}:host([size='large']){--tabPaddingBlock:${spacingVerticalL};--tabPaddingInline:${spacingHorizontalMNudge}}:host([orientation='vertical']){--tabPaddingBlock:${spacingVerticalS};--tabIndicatorInsetBlock:${spacingVerticalS};flex-direction:column}:host([orientation='vertical'][size='small']){--tabPaddingBlock:${spacingVerticalXXS};--tabIndicatorInsetBlock:${spacingVerticalSNudge}}:host([orientation='vertical'][size='large']){--tabPaddingBlock:${spacingVerticalS};--tabIndicatorInsetBlock:${spacingVerticalMNudge}}::slotted([slot='tab']){padding-inline:var(--tabPaddingInline);padding-block:var(--tabPaddingBlock)}:host([orientation='vertical']) ::slotted([role='tab']){justify-content:flex-start}:host ::slotted([slot='tab'])::after{height:${strokeWidthThicker};margin-block-start:auto}:host([orientation='vertical']) ::slotted([slot='tab'])::after{width:${strokeWidthThicker};height:unset;margin-block-start:unset}:host ::slotted([slot='tab'])::before{height:${strokeWidthThicker};border-radius:${borderRadiusCircular};content:'';inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock);position:absolute;margin-top:auto}:host ::slotted([slot='tab'])::before{inset-inline:var(--tabIndicatorInsetInline);inset-block:var(--tabIndicatorInsetBlock)}:host ::slotted([slot='tab'][aria-selected='true'])::before{background-color:${colorNeutralForegroundDisabled}}:host ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:${strokeWidthThicker};margin-block-start:auto;transform-origin:left}:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after{height:unset;width:${strokeWidthThicker};margin-inline-end:auto;transform-origin:top}:host([size='small']) ::slotted([slot='tab']){font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='large']) ::slotted([slot='tab']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host ::slotted([slot='tab'])::after,:host ::slotted([slot='tab'])::before,:host ::slotted([slot='tab']:hover)::after{inset-inline:var(--tabIndicatorInsetInline)}:host([orientation='vertical']) ::slotted([slot='tab'])::after,:host([orientation='vertical']) ::slotted([slot='tab'])::before,:host([orientation='vertical']) ::slotted([slot='tab']:hover)::after{inset-inline:0;inset-block:var(--tabIndicatorInsetBlock)}:host([disabled]){cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']){pointer-events:none;cursor:not-allowed;color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:after){background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after{background-color:${colorNeutralForegroundDisabled}}:host([disabled]) ::slotted([slot='tab']:hover):before{content:unset}:host([appearance='subtle']) ::slotted([slot='tab']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground1Hover};fill:${colorCompoundBrandForeground1Hover}}:host([appearance='subtle']) ::slotted([slot='tab']:active){background-color:${colorSubtleBackgroundPressed};fill:${colorSubtleBackgroundPressed};color:${colorNeutralForeground1}}@supports (anchor-name:--a) and (text-size-adjust:auto){::slotted([slot='tab'][aria-selected='true']){anchor-name:--tab}:host::after{background-color:${colorCompoundBrandStroke};content:'';inline-size:100%;inset:auto auto anchor(end) anchor(center);position:absolute;position-anchor:--tab;transform:translateX(-50%);transition-property:inset-inline,width;transition-duration:${durationSlow};transition-timing-function:${curveDecelerateMax};z-index:3;border-radius:${borderRadiusCircular};width:calc(anchor-size() - var(--tabIndicatorInsetInline) * 2);height:${strokeWidthThicker}}:host([orientation='vertical'])::after{inset:anchor(center) anchor(end) auto 0;transform:translateY(-50%);transition-property:inset-block,height;width:${strokeWidthThicker};height:calc(anchor-size() - var(--tabIndicatorInsetBlock) * 2)}:host(:dir(rtl)[orientation='vertical'])::after{inset:anchor(center) anchor(start) auto 0}:host([disabled])::after{background-color:${colorNeutralForegroundDisabled}}}`;
 
 const definition$7 = Tablist.compose({
-  name: `${FluentDesignSystem.prefix}-tablist`,
+  name: tagName$7,
   template: template$7,
   styles: styles$7
 });
@@ -12017,6 +12011,9 @@ const TextAreaResize = {
   horizontal: "horizontal",
   vertical: "vertical"
 };
+const tagName$6 = `${FluentDesignSystem.prefix}-textarea`;
+
+const whitespaceFilter = value => value.nodeType !== Node.TEXT_NODE || !!value.nodeValue?.trim().length;
 
 var __defProp$a = Object.defineProperty;
 var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
@@ -12507,8 +12504,7 @@ __decorateClass$9([attr], TextArea.prototype, "size", 2);
 const styles$6 = css`
   ${display("inline-block")}
 
-  :host{--font-size:${fontSizeBase300};--line-height:${lineHeightBase300};--padding-inline:${spacingHorizontalMNudge};--padding-block:${spacingVerticalSNudge};--min-block-size:52px;--block-size:var(--min-block-size);--inline-size:18rem;--border-width:${strokeWidthThin};--control-padding-inline:${spacingHorizontalXXS};--color:${colorNeutralForeground1};--background-color:${colorNeutralBackground1};--border-color:${colorNeutralStroke1};--border-block-end-color:${colorNeutralStrokeAccessible};--placeholder-color:${colorNeutralForeground4};--focus-indicator-color:${colorCompoundBrandStroke};--box-shadow:none;--contain-size:size;--resize:none;color:var(--color);font-family:${fontFamilyBase};font-size:var(--font-size);font-weight:${fontWeightRegular};line-height:var(--line-height);position:relative}:host(:hover){--border-color:${colorNeutralStroke1Hover};--border-block-end-color:${colorNeutralStrokeAccessibleHover}}:host(:active){--border-color:${colorNeutralStroke1Pressed};--border-block-end-color:${colorNeutralStrokeAccessiblePressed}}:host(:focus-within){outline:none}:host([block]:not([hidden])){display:block}:host([size='small']){--font-size:${fontSizeBase200};--line-height:${lineHeightBase200};--min-block-size:40px;--padding-block:${spacingVerticalXS};--padding-inline:${spacingHorizontalSNudge};--control-padding-inline:${spacingHorizontalXXS}}:host([size='large']){--font-size:${fontSizeBase400};--line-height:${lineHeightBase400};--min-block-size:64px;--padding-block:${spacingVerticalS};--padding-inline:${spacingHorizontalM};--control-padding-inline:${spacingHorizontalSNudge}}:host([resize='both']:not(:disabled)){--resize:both}:host([resize='horizontal']:not(:disabled)){--resize:horizontal}:host([resize='vertical']:not(:disabled)){--resize:vertical}:host([auto-resize]){--block-size:auto;--contain-size:inline-size}:host([appearance='filled-darker']){--background-color:${colorNeutralBackground3};--border-color:var(--background-color);--border-block-end-color:var(--border-color)}:host([appearance='filled-lighter']){--border-color:var(--background-color);--border-block-end-color:var(--border-color)}:host([appearance='filled-darker'][display-shadow]),:host([appearance='filled-lighter'][display-shadow]){--box-shadow:${shadow2}}:host(${userInvalidState}){--border-color:${colorPaletteRedBorder2};--border-block-end-color:${colorPaletteRedBorder2}}:host(:disabled){--color:${colorNeutralForegroundDisabled};--background-color:${colorTransparentBackground};--border-color:${colorNeutralStrokeDisabled};--border-block-end-color:var(--border-color);--box-shadow:none;--placeholder-color:${colorNeutralForegroundDisabled};cursor:no-drop;user-select:none}.root{background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-block-end-color:var(--border-block-end-color);border-radius:${borderRadiusMedium};box-sizing:border-box;box-shadow:var(--box-shadow);contain:paint layout style var(--contain-size);display:grid;grid-template:1fr / 1fr;inline-size:var(--inline-size);min-block-size:var(--min-block-size);block-size:var(--block-size);overflow:hidden;padding:var(--padding-block) var(--padding-inline);position:relative;resize:var(--resize)}:host([block]) .root{inline-size:auto}.root::after{border-bottom:2px solid var(--focus-indicator-color);border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};box-sizing:border-box;clip-path:inset(calc(100% - 2px) 1px 0px);content:'';height:max(2px,${borderRadiusMedium});inset:auto -1px 0;position:absolute;transform:scaleX(0);transition-delay:${curveAccelerateMid};transition-duration:${durationUltraFast};transition-property:transform}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host([readonly]) .root::after,:host(:disabled) .root::after{content:none}label{color:var(--color);display:flex;inline-size:fit-content;padding-block-end:${spacingVerticalXS};padding-inline-end:${spacingHorizontalXS}}:host(:empty) label,label[hidden]{display:none}.auto-sizer,.control{box-sizing:border-box;font:inherit;grid-column:1 / -1;grid-row:1 / -1;letter-space:inherit;padding:0 var(--control-padding-inline)}.auto-sizer{display:none;padding-block-end:2px;pointer-events:none;visibility:hidden;white-space:pre-wrap}:host([auto-resize]) .auto-sizer{display:block}.control{appearance:none;background-color:transparent;border:0;color:inherit;field-sizing:content;max-block-size:100%;outline:0;resize:none;text-align:inherit}.control:disabled{cursor:inherit}.control::placeholder{color:var(--placeholder-color)}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host{--border-color:FieldText;--border-block-end-color:FieldText;--focus-indicator-color:Highlight;--placeholder-color:FieldText}:host(:hover),:host(:active),:host(:focus-within){--border-color:Highlight;--border-block-end-color:Highlight}:host(:disabled){--color:GrayText;--border-color:GrayText;--border-block-end-color:GrayText;--placeholder-color:GrayText}`));
+  :host{--font-size:${fontSizeBase300};--line-height:${lineHeightBase300};--padding-inline:${spacingHorizontalMNudge};--padding-block:${spacingVerticalSNudge};--min-block-size:52px;--block-size:var(--min-block-size);--inline-size:18rem;--border-width:${strokeWidthThin};--control-padding-inline:${spacingHorizontalXXS};--color:${colorNeutralForeground1};--background-color:${colorNeutralBackground1};--border-color:${colorNeutralStroke1};--border-block-end-color:${colorNeutralStrokeAccessible};--placeholder-color:${colorNeutralForeground4};--focus-indicator-color:${colorCompoundBrandStroke};--box-shadow:none;--contain-size:size;--resize:none;color:var(--color);font-family:${fontFamilyBase};font-size:var(--font-size);font-weight:${fontWeightRegular};line-height:var(--line-height);position:relative}:host(:hover){--border-color:${colorNeutralStroke1Hover};--border-block-end-color:${colorNeutralStrokeAccessibleHover}}:host(:active){--border-color:${colorNeutralStroke1Pressed};--border-block-end-color:${colorNeutralStrokeAccessiblePressed}}:host(:focus-within){outline:none}:host([block]:not([hidden])){display:block}:host([size='small']){--font-size:${fontSizeBase200};--line-height:${lineHeightBase200};--min-block-size:40px;--padding-block:${spacingVerticalXS};--padding-inline:${spacingHorizontalSNudge};--control-padding-inline:${spacingHorizontalXXS}}:host([size='large']){--font-size:${fontSizeBase400};--line-height:${lineHeightBase400};--min-block-size:64px;--padding-block:${spacingVerticalS};--padding-inline:${spacingHorizontalM};--control-padding-inline:${spacingHorizontalSNudge}}:host([resize='both']:not(:disabled)){--resize:both}:host([resize='horizontal']:not(:disabled)){--resize:horizontal}:host([resize='vertical']:not(:disabled)){--resize:vertical}:host([auto-resize]){--block-size:auto;--contain-size:inline-size}:host([appearance='filled-darker']){--background-color:${colorNeutralBackground3};--border-color:var(--background-color);--border-block-end-color:var(--border-color)}:host([appearance='filled-lighter']){--border-color:var(--background-color);--border-block-end-color:var(--border-color)}:host([appearance='filled-darker'][display-shadow]),:host([appearance='filled-lighter'][display-shadow]){--box-shadow:${shadow2}}:host(${userInvalidState}){--border-color:${colorPaletteRedBorder2};--border-block-end-color:${colorPaletteRedBorder2}}:host(:disabled){--color:${colorNeutralForegroundDisabled};--background-color:${colorTransparentBackground};--border-color:${colorNeutralStrokeDisabled};--border-block-end-color:var(--border-color);--box-shadow:none;--placeholder-color:${colorNeutralForegroundDisabled};cursor:no-drop;user-select:none}.root{background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-block-end-color:var(--border-block-end-color);border-radius:${borderRadiusMedium};box-sizing:border-box;box-shadow:var(--box-shadow);contain:paint layout style var(--contain-size);display:grid;grid-template:1fr / 1fr;inline-size:var(--inline-size);min-block-size:var(--min-block-size);block-size:var(--block-size);overflow:hidden;padding:var(--padding-block) var(--padding-inline);position:relative;resize:var(--resize)}:host([block]) .root{inline-size:auto}.root::after{border-bottom:2px solid var(--focus-indicator-color);border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};box-sizing:border-box;clip-path:inset(calc(100% - 2px) 1px 0px);content:'';height:max(2px,${borderRadiusMedium});inset:auto -1px 0;position:absolute;transform:scaleX(0);transition-delay:${curveAccelerateMid};transition-duration:${durationUltraFast};transition-property:transform}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host([readonly]) .root::after,:host(:disabled) .root::after{content:none}label{color:var(--color);display:flex;inline-size:fit-content;padding-block-end:${spacingVerticalXS};padding-inline-end:${spacingHorizontalXS}}:host(:empty) label,label[hidden]{display:none}.auto-sizer,.control{box-sizing:border-box;font:inherit;grid-column:1 / -1;grid-row:1 / -1;letter-space:inherit;padding:0 var(--control-padding-inline)}.auto-sizer{display:none;padding-block-end:2px;pointer-events:none;visibility:hidden;white-space:pre-wrap}:host([auto-resize]) .auto-sizer{display:block}.control{appearance:none;background-color:transparent;border:0;color:inherit;field-sizing:content;max-block-size:100%;outline:0;resize:none;text-align:inherit}.control:disabled{cursor:inherit}.control::placeholder{color:var(--placeholder-color)}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}@media (forced-colors:active){:host{--border-color:FieldText;--border-block-end-color:FieldText;--focus-indicator-color:Highlight;--placeholder-color:FieldText}:host(:hover),:host(:active),:host(:focus-within){--border-color:Highlight;--border-block-end-color:Highlight}:host(:disabled){--color:GrayText;--border-color:GrayText;--border-block-end-color:GrayText;--placeholder-color:GrayText}}`;
 
 function textAreaTemplate() {
   return html`<template><label ${ref("labelEl")} for="control" part="label"><slot name="label" ${slotted("labelSlottedNodes")}></slot></label><div class="root" part="root" ${ref("rootEl")}><textarea ${ref("controlEl")} id="control" class="control" part="control" ?required="${x => x.required}" ?disabled="${x => x.disabled}" ?readonly="${x => x.readOnly}" ?spellcheck="${x => x.spellcheck}" autocomplete="${x => x.autocomplete}" maxlength="${x => x.maxLength}" minlength="${x => x.minLength}" placeholder="${x => x.placeholder}" @change="${x => x.handleControlChange()}" @select="${x => x.handleControlSelect()}" @input="${x => x.handleControlInput()}"></textarea></div><div hidden><slot ${slotted("defaultSlottedNodes")}></slot></div></template>`;
@@ -12516,7 +12512,7 @@ function textAreaTemplate() {
 const template$6 = textAreaTemplate();
 
 const definition$6 = TextArea.compose({
-  name: `${FluentDesignSystem.prefix}-textarea`,
+  name: tagName$6,
   template: template$6,
   styles: styles$6,
   shadowOptions: {
@@ -12534,6 +12530,7 @@ const TextInputType = {
   url: "url"
 };
 const ImplicitSubmissionBlockingTypes = ["date", "datetime-local", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week"];
+const tagName$5 = `${FluentDesignSystem.prefix}-text-input`;
 
 var __defProp$8 = Object.defineProperty;
 var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
@@ -12957,7 +12954,7 @@ function textInputTemplate(options = {}) {
 const template$5 = textInputTemplate();
 
 const definition$5 = TextInput.compose({
-  name: `${FluentDesignSystem.prefix}-text-input`,
+  name: tagName$5,
   template: template$5,
   styles: styles$5,
   shadowOptions: {
@@ -12967,6 +12964,8 @@ const definition$5 = TextInput.compose({
 
 definition$5.define(FluentDesignSystem.registry);
 
+const tagName$4 = `${FluentDesignSystem.prefix}-text`;
+
 var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
 var __decorateClass$6 = (decorators, target, key, kind) => {
@@ -13023,13 +13022,15 @@ const styles$4 = css`
 const template$4 = html`<slot></slot>`;
 
 const definition$4 = Text.compose({
-  name: `${FluentDesignSystem.prefix}-text`,
+  name: tagName$4,
   template: template$4,
   styles: styles$4
 });
 
 definition$4.define(FluentDesignSystem.registry);
 
+const tagName$3 = `${FluentDesignSystem.prefix}-toggle-button`;
+
 var __defProp$5 = Object.defineProperty;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
 var __decorateClass$5 = (decorators, target, key, kind) => {
@@ -13092,21 +13093,36 @@ __decorateClass$5([attr({
 const styles$3 = css`
   ${styles$C}
 
-  :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}[appearance='primary']:not(:focus-visible)){border-color:transparent}:host(${pressedState}[appearance='primary']){background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}[appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}[appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}[appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}[appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}[appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}[appearance='outline']),:host(${pressedState}[appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}[appearance='outline']:hover),:host(${pressedState}[appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}[appearance='outline']:active),:host(${pressedState}[appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}[appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}[appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}[appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host(${pressedState}),:host(
+  :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}[appearance='primary']:not(:focus-visible)){border-color:transparent}:host(${pressedState}[appearance='primary']){background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}[appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}[appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}[appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}[appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}[appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}[appearance='outline']),:host(${pressedState}[appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}[appearance='outline']:hover),:host(${pressedState}[appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}[appearance='outline']:active),:host(${pressedState}[appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}[appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}[appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}[appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}@media (forced-colors:active){:host(${pressedState}),:host(
         ${pressedState}:is([appearance='primary'],[appearance='subtle'],[appearance='outline'],[appearance='transparent'])
-      ){background:SelectedItem;color:SelectedItemText}`));
+      ){background:SelectedItem;color:SelectedItemText}}`;
 
 const template$3 = buttonTemplate$1();
 
 const definition$3 = ToggleButton.compose({
-  name: `${FluentDesignSystem.prefix}-toggle-button`,
+  name: tagName$3,
   template: template$3,
   styles: styles$3
 });
 
 definition$3.define(FluentDesignSystem.registry);
 
+const TooltipPositioningOption = {
+  "above-start": "block-start span-inline-end",
+  above: "block-start",
+  "above-end": "block-start span-inline-start",
+  "below-start": "block-end span-inline-end",
+  below: "block-end",
+  "below-end": "block-end span-inline-start",
+  "before-top": "inline-start span-block-end",
+  before: "inline-start",
+  "before-bottom": "inline-start span-block-start",
+  "after-top": "inline-end span-block-end",
+  after: "inline-end",
+  "after-bottom": "inline-end span-block-start"
+};
+const tagName$2 = `${FluentDesignSystem.prefix}-tooltip`;
+
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
 var __decorateClass$4 = (decorators, target, key, kind) => {
@@ -13200,7 +13216,7 @@ class Tooltip extends FASTElement {
   }
   /**
    * Shows the tooltip
-   * @param delay Number of milliseconds to delay showing the tooltip
+   * @param delay - Number of milliseconds to delay showing the tooltip
    * @internal
    */
   showTooltip(delay = this.defaultDelay) {
@@ -13211,7 +13227,7 @@ class Tooltip extends FASTElement {
   }
   /**
    * Hide the tooltip
-   * @param delay Number of milliseconds to delay hiding the tooltip
+   * @param delay - Number of milliseconds to delay hiding the tooltip
    * @internal
    */
   hideTooltip(delay = this.defaultDelay) {
@@ -13285,21 +13301,6 @@ __decorateClass$4([attr({
 __decorateClass$4([attr], Tooltip.prototype, "positioning", 2);
 __decorateClass$4([attr], Tooltip.prototype, "anchor", 2);
 
-const TooltipPositioningOption = {
-  "above-start": "block-start span-inline-end",
-  above: "block-start",
-  "above-end": "block-start span-inline-start",
-  "below-start": "block-end span-inline-end",
-  below: "block-end",
-  "below-end": "block-end span-inline-start",
-  "before-top": "inline-start span-block-end",
-  before: "inline-start",
-  "before-bottom": "inline-start span-block-start",
-  "after-top": "inline-end span-block-end",
-  after: "inline-end",
-  "after-bottom": "inline-end span-block-start"
-};
-
 const styles$2 = css`
   ${display("inline-flex")}
 
@@ -13308,13 +13309,15 @@ const styles$2 = css`
 const template$2 = html`<template popover aria-hidden="true"><slot></slot></template>`;
 
 const definition$2 = Tooltip.compose({
-  name: `${FluentDesignSystem.prefix}-tooltip`,
+  name: tagName$2,
   template: template$2,
   styles: styles$2
 });
 
 definition$2.define(FluentDesignSystem.registry);
 
+const tagName$1 = `${FluentDesignSystem.prefix}-tree`;
+
 const TreeItemAppearance = {
   subtle: "subtle",
   subtleAlpha: "subtle-alpha",
@@ -13324,12 +13327,13 @@ const TreeItemSize = {
   small: "small",
   medium: "medium"
 };
-function isTreeItem(element, tagName = "-tree-item") {
+function isTreeItem(element, tagName2 = "-tree-item") {
   if (element?.nodeType !== Node.ELEMENT_NODE) {
     return false;
   }
-  return element.tagName.toLowerCase().endsWith(tagName);
+  return element.tagName.toLowerCase().endsWith(tagName2);
 }
+const tagName = `${FluentDesignSystem.prefix}-tree-item`;
 
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
@@ -13343,12 +13347,6 @@ class BaseTree extends FASTElement {
   constructor() {
     super();
     this.currentSelected = null;
-    /**
-     * The tree item that is designated to be in the tab queue.
-     *
-     * @internal
-     */
-    this.currentFocused = null;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -13366,10 +13364,6 @@ class BaseTree extends FASTElement {
   defaultSlotChanged() {
     this.handleDefaultSlotChange();
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.tabIndex = Number(this.getAttribute("tabindex") ?? 0) < 0 ? -1 : 0;
-  }
   /** @internal */
   childTreeItemsChanged() {
     this.updateCurrentSelected();
@@ -13380,9 +13374,6 @@ class BaseTree extends FASTElement {
   updateCurrentSelected() {
     const selectedItem = this.querySelector(`[selected]`);
     this.currentSelected = selectedItem;
-    if (this.currentFocused === null || !this.contains(this.currentFocused)) {
-      this.currentFocused = this.getValidFocusableItem();
-    }
   }
   /**
    * KeyDown handler
@@ -13397,22 +13388,7 @@ class BaseTree extends FASTElement {
     if (!isTreeItem(item) || this.childTreeItems.length < 1) {
       return true;
     }
-    const elements = this.getVisibleNodes();
     switch (e.key) {
-      case keyHome:
-        {
-          if (elements.length) {
-            elements[0].focus();
-          }
-          return;
-        }
-      case keyEnd:
-        {
-          if (elements.length) {
-            elements[elements.length - 1].focus();
-          }
-          return;
-        }
       case keyArrowLeft:
         {
           if (item?.childTreeItems?.length && item.expanded) {
@@ -13427,22 +13403,10 @@ class BaseTree extends FASTElement {
           if (item?.childTreeItems?.length) {
             if (!item.expanded) {
               item.expanded = true;
-            } else {
-              this.focusNextNode(1, item);
             }
           }
           return;
         }
-      case keyArrowDown:
-        {
-          this.focusNextNode(1, item);
-          return;
-        }
-      case keyArrowUp:
-        {
-          this.focusNextNode(-1, item);
-          return;
-        }
       case keyEnter:
         {
           this.clickHandler(e);
@@ -13456,38 +13420,6 @@ class BaseTree extends FASTElement {
     }
     return true;
   }
-  /**
-   * Handle focus events
-   *
-   * @internal
-   */
-  focusHandler(e) {
-    if (this.childTreeItems.length < 1) {
-      return;
-    }
-    if (e.target === this) {
-      this.currentFocused = this.getValidFocusableItem();
-      if (this.currentFocused && this.currentFocused.tabIndex < 0) {
-        this.currentFocused.tabIndex = 0;
-      }
-      this.currentFocused?.focus();
-      return;
-    }
-    if (this.contains(e.target)) {
-      this.setAttribute("tabindex", "-1");
-      this.currentFocused = e.target;
-    }
-  }
-  /**
-   * Handle blur events
-   *
-   * @internal
-   */
-  blurHandler(e) {
-    if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
-      this.setAttribute("tabindex", "0");
-    }
-  }
   /**
    * Handles click events bubbling up
    *
@@ -13527,40 +13459,28 @@ class BaseTree extends FASTElement {
       this.currentSelected = null;
     }
   }
-  /**
-   * checks if there are any nested tree items
-   */
-  getValidFocusableItem() {
-    const elements = this.getVisibleNodes();
-    let focusIndex = elements.findIndex(el => el.selected);
-    if (focusIndex === -1) {
-      focusIndex = elements.findIndex(el => isTreeItem(el));
-    }
-    if (focusIndex !== -1) {
-      return elements[focusIndex];
-    }
-    return null;
-  }
-  getVisibleNodes() {
-    return Array.from(this.querySelectorAll("*")).filter(node => isTreeItem(node) && node.offsetParent !== null);
-  }
-  /**
-   * Move focus to a tree item based on its offset from the provided item
-   */
-  focusNextNode(delta, item) {
-    const visibleNodes = this.getVisibleNodes();
-    if (!visibleNodes.length) {
-      return;
-    }
-    const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-    if (isHTMLElement(focusItem)) {
-      focusItem.focus();
-    }
-  }
   /** @internal */
   handleDefaultSlotChange() {
     this.childTreeItems = this.defaultSlot.assignedElements().filter(el => isTreeItem(el));
   }
+  /**
+   * All descendant tree items in DOM order, recursively flattened from
+   * `childTreeItems`.
+   */
+  get descendantTreeItems() {
+    const result = [];
+    const visit = items => {
+      if (!items) {
+        return;
+      }
+      for (const item of items) {
+        result.push(item);
+        visit(item.childTreeItems);
+      }
+    };
+    visit(this.childTreeItems);
+    return result;
+  }
 }
 __decorateClass$3([observable], BaseTree.prototype, "currentSelected", 2);
 __decorateClass$3([observable], BaseTree.prototype, "defaultSlot", 2);
@@ -13593,6 +13513,22 @@ class Tree extends BaseTree {
   childTreeItemsChanged() {
     super.childTreeItemsChanged();
     this.updateSizeAndAppearance();
+    this.fgItems ?? (this.fgItems = new ArrayItemCollection(() => this.descendantTreeItems.filter(i => !i.isHidden), () => this.currentSelected ?? null));
+    if (!this.fg) {
+      this.fg = new FocusGroup(this, this.fgItems, {
+        definition: {
+          behavior: "menu",
+          axis: "block",
+          memory: false
+        }
+      });
+    } else {
+      this.fg.update();
+    }
+  }
+  disconnectedCallback() {
+    this.fg?.disconnect();
+    super.disconnectedCallback();
   }
   /**
    * 1. Update the child items' size based on the tree's size
@@ -13607,6 +13543,10 @@ class Tree extends BaseTree {
       item.appearance = this.appearance;
     });
   }
+  /** @internal */
+  itemToggleHandler() {
+    this.fg?.update();
+  }
 }
 __decorateClass$2([attr], Tree.prototype, "size", 2);
 __decorateClass$2([attr], Tree.prototype, "appearance", 2);
@@ -13616,10 +13556,10 @@ const styles$1 = css`
 
   :host{outline:none}`;
 
-const template$1 = html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusHandler(c.event)}" @focusout="${(x, c) => x.blurHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}"><slot ${ref("defaultSlot")} @slotchange="${x => x.handleDefaultSlotChange()}"></slot></template>`;
+const template$1 = html`<template focusgroup="menu nowrap nomemory" @click="${(x, c) => x.clickHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}" @toggle="${(x, c) => x.itemToggleHandler()}"><slot ${ref("defaultSlot")} @slotchange="${x => x.handleDefaultSlotChange()}"></slot></template>`;
 
 const definition$1 = Tree.compose({
-  name: `${FluentDesignSystem.prefix}-tree`,
+  name: tagName$1,
   template: template$1,
   styles: styles$1
 });
@@ -13672,6 +13612,20 @@ class BaseTreeItem extends FASTElement {
     toggleState(this.elementInternals, "expanded", next);
     if (this.childTreeItems && this.childTreeItems.length > 0) {
       this.elementInternals.ariaExpanded = next ? "true" : "false";
+      requestAnimationFrame(() => {
+        const walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT, node => isTreeItem(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);
+        while (walker.nextNode()) {
+          const item = walker.currentNode;
+          if (next) {
+            item.removeAttribute("focusgroup");
+          } else {
+            if (item.selected) {
+              item.selected = false;
+            }
+            item.setAttribute("focusgroup", "none");
+          }
+        }
+      });
     }
   }
   /**
@@ -13682,7 +13636,6 @@ class BaseTreeItem extends FASTElement {
    * @internal
    */
   selectedChanged(prev, next) {
-    this.updateTabindexBySelected();
     this.$emit("change");
     toggleState(this.elementInternals, "selected", next);
     this.elementInternals.ariaSelected = next ? "true" : "false";
@@ -13704,12 +13657,6 @@ class BaseTreeItem extends FASTElement {
     this.empty = this.childTreeItems?.length === 0;
     this.updateChildTreeItems();
   }
-  connectedCallback() {
-    super.connectedCallback();
-    Updates.enqueue(() => {
-      this.updateTabindexBySelected();
-    });
-  }
   /**
    * Updates the childrens indent
    *
@@ -13744,14 +13691,25 @@ class BaseTreeItem extends FASTElement {
     }
   }
   /**
-   * Whether the tree is nested
+   * Whether the tree item is nested
    * @internal
    */
   get isNestedItem() {
     return isTreeItem(this.parentElement);
   }
-  updateTabindexBySelected() {
-    this.tabIndex = this.selected ? 0 : -1;
+  /**
+   * Whether the tree item is nested in a collapsed tree item.
+   * @internal
+   */
+  get isHidden() {
+    let parent = this.parentElement;
+    while (isTreeItem(parent)) {
+      if (!parent.expanded) {
+        return true;
+      }
+      parent = parent.parentElement;
+    }
+    return false;
   }
   /** @internal */
   handleItemSlotChange() {
@@ -13837,10 +13795,10 @@ const styles = css`
       ${colorStrokeFocus2} inset}.positioning-region{display:flex;align-items:center;justify-content:space-between;cursor:pointer;height:${spacingVerticalXXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalXXL});padding-inline-end:${spacingVerticalS};border-radius:${borderRadiusMedium};background-color:${colorSubtleBackground};color:${colorNeutralForeground2};gap:${spacingHorizontalXS}}@media (prefers-contrast:more){:host(:focus-visible) .positioning-region{outline:1px solid ${colorStrokeFocus2}}}.content{display:flex;align-items:center;gap:${spacingHorizontalXS}}.chevron{display:flex;align-items:center;flex-shrink:0;justify-content:center;width:${spacingHorizontalXXL};height:${spacingVerticalXXL};transition:transform ${durationFaster} ${curveEasyEaseMax};transform:rotate(0deg)}.chevron:dir(rtl){transform:rotate(180deg)}.chevron svg{inline-size:12px;block-size:12px}.aside{display:flex;align-items:center}.positioning-region:hover{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}.positioning-region:active{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}::slotted([slot='start']),::slotted([slot='end']),::slotted(:not([slot])){display:flex;align-items:center;min-width:0}::slotted([slot='start']){flex-shrink:0}::slotted(:not([slot])){padding-inline:${spacingHorizontalXXS}}.items{display:none}:host([expanded]) .items{display:block}:host([empty]) .chevron,:host([empty]) .items{visibility:hidden}:host([selected]) .positioning-region{background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([selected]) .content,:host([selected]) .chevron{color:${colorNeutralForeground3Selected}}:host([size='small']) .positioning-region{height:${spacingVerticalXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalM})}:host([appearance='subtle-alpha']) .positioning-region:hover{background-color:${colorSubtleBackgroundLightAlphaHover}}:host([appearance='subtle-alpha']) .positioning-region:active{background-color:${colorSubtleBackgroundLightAlphaPressed}}:host([appearance='subtle-alpha'][selected]) .positioning-region{background-color:${colorSubtleBackgroundLightAlphaSelected};color:${colorNeutralForeground2Selected}}:host([appearance='transparent']) .positioning-region{background-color:${colorTransparentBackground}}:host([appearance='transparent']) .positioning-region:hover{background-color:${colorTransparentBackgroundHover}}:host([appearance='transparent']) .positioning-region:active{background-color:${colorTransparentBackgroundPressed}}:host([appearance='transparent'][selected]) .positioning-region{background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([expanded]) .chevron{transform:rotate(90deg)}`;
 
 const chevronIcon = html`<svg viewBox="0 0 12 12" fill="currentColor"><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`;
-const template = html`<template slot="${x => x.isNestedItem ? "item" : void 0}"><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron" aria-hidden="true"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><slot></slot><slot name="end"></slot></div><div class="aside" part="aside"><slot name="aside"></slot></div></div><div role="group" class="items" part="items"><slot name="item" ${ref("itemSlot")} @slotchange="${x => x.handleItemSlotChange()}"></slot></div></template>`;
+const template = html`<template slot="${x => x.isNestedItem ? "item" : void 0}" tabindex="0" ?focusgroupstart="${x => x.selected}"><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron" aria-hidden="true"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><slot></slot><slot name="end"></slot></div><div class="aside" part="aside"><slot name="aside"></slot></div></div><div role="group" class="items" part="items"><slot name="item" ${ref("itemSlot")} @slotchange="${x => x.handleItemSlotChange()}"></slot></div></template>`;
 
 const definition = TreeItem.compose({
-  name: `${FluentDesignSystem.prefix}-tree-item`,
+  name: tagName,
   template: template,
   styles: styles
 });