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

package/dist/web-components.js

@@ -3410,6 +3410,69 @@ const whitespaceFilter = value => {
   return value.nodeType !== Node.TEXT_NODE || !!((_a = value.nodeValue) == null ? void 0 : _a.trim().length);
 };
 
+const hidden = `:host([hidden]){display:none}`;
+function display(displayValue) {
+  return `${hidden}:host{display:${displayValue}}`;
+}
+
+class MatchMediaBehavior {
+  constructor(query) {
+    this.listenerCache = /* @__PURE__ */new WeakMap();
+    this.query = query;
+  }
+  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);
+  }
+  disconnectedCallback(controller) {
+    const listener = this.listenerCache.get(controller);
+    if (listener) {
+      this.query.removeEventListener("change", listener);
+    }
+  }
+}
+class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+  constructor(query, styles) {
+    super(query);
+    this.styles = styles;
+  }
+  static with(query) {
+    return styles => {
+      return new MatchMediaStyleSheetBehavior(query, 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;
+      }
+    };
+  }
+  removedCallback(controller) {
+    controller.removeStyles(this.styles);
+  }
+}
+const forcedColorsStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(forced-colors)"));
+const darkModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: dark)"));
+const lightModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: light)"));
+
 class StartEnd {}
 function endSlotTemplate(options) {
   return html`<slot name="end" ${ref("end")}>${staticallyCompose(options.end)}</slot>`.inline();
@@ -3672,166 +3735,6 @@ function accordionTemplate() {
 }
 const template$s = accordionTemplate();
 
-/**
- * An abstract behavior to react to media queries. Implementations should implement
- * the `constructListener` method to perform some action based on media query changes.
- *
- * @public
- */
-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 = 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);
-    }
-    // Invoke immediately to add if the query currently matches
-    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);
-    }
-  }
-}
-/**
- * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
- * styles are applied while the a query matches the environment and that styles are not applied if the query does
- * not match the environment.
- *
- * @public
- */
-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 "@microsoft/fast-foundation";
-   *
-   * 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);
-  }
-}
-/**
- * This can be used to construct a behavior to apply a forced-colors only stylesheet.
- * @public
- */
-const forcedColorsStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia("(forced-colors)"));
-/**
- * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
- * @public
- */
-MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: dark)"));
-/**
- * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
- * @public
- */
-MatchMediaStyleSheetBehavior.with(window.matchMedia("(prefers-color-scheme: light)"));
-
-/**
- * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
- * @public
- */
-const hidden = `:host([hidden]){display:none}`;
-/**
- * Applies a CSS display property.
- * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
- * @param display - The CSS display property value
- * @public
- */
-function display(displayValue) {
-  return `${hidden}:host{display:${displayValue}}`;
-}
-
 const styles$r = css`
   ${display("flex")}
 
@@ -4779,6 +4682,12 @@ const ButtonType = {
   reset: "reset",
   button: "button"
 };
+const ButtonFormTarget = {
+  blank: "_blank",
+  self: "_self",
+  parent: "_parent",
+  top: "_top"
+};
 
 const AnchorButtonAppearance = ButtonAppearance;
 const AnchorButtonShape = ButtonShape;
@@ -4798,19 +4707,14 @@ const template$q = anchorTemplate();
 const styles$p = css`
   ${display("inline-flex")}
 
-  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle}:host .control{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}.content{display:inherit}:host(:hover) .control{background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active) .control{background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host .control:focus-visible{border-color:${colorTransparentStroke};outline:${strokeWidthThick}) solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]) .control{min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS}}:host([size='small']) .control{min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]) .control{min-width:24px;max-width:24px}:host([size='large']) .control{min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]) .control{min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']) .control,:host([shape='circular']) .control:focus-visible{border-radius:${borderRadiusCircular}}:host([shape='square']) .control,:host([shape='square']) .control:focus-visible{border-radius:${borderRadiusNone}}:host([appearance='primary']) .control{background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover) .control,:host([appearance='primary']:hover:active) .control{border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active) .control{background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']) .control:focus-visible{border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active) .control{border-color:transparent}:host([appearance='outline']) .control{background-color:${colorTransparentBackground}}:host([appearance='outline']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active) .control{background-color:${colorTransparentBackgroundPressed}}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active) .control{background-color:${colorTransparentBackground}}:host([appearance='subtle']) .control{background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active) .control{background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control{background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active) .control{background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control,:host([appearance='transparent']:hover) .control,:host([appearance='transparent']:hover:active) .control{border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active) .control{border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active)
+  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle}:host .control{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}.content{display:inherit;text-align:center}:host(:hover) .control{background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active) .control{background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host .control:focus-visible{border-color:${colorTransparentStroke};outline:${strokeWidthThick}) solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]) .control{min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS}}:host([size='small']) .control{min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]) .control{min-width:24px;max-width:24px}:host([size='large']) .control{min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]) .control{min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']) .control,:host([shape='circular']) .control:focus-visible{border-radius:${borderRadiusCircular}}:host([shape='square']) .control,:host([shape='square']) .control:focus-visible{border-radius:${borderRadiusNone}}:host([appearance='primary']) .control{background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover) .control,:host([appearance='primary']:hover:active) .control{border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active) .control{background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']) .control:focus-visible{border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active) .control{border-color:transparent}:host([appearance='outline']) .control{background-color:${colorTransparentBackground}}:host([appearance='outline']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active) .control{background-color:${colorTransparentBackgroundPressed}}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active) .control{background-color:${colorTransparentBackground}}:host([appearance='subtle']) .control{background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active) .control{background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control{background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active) .control{background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control,:host([appearance='transparent']:hover) .control,:host([appearance='transparent']:hover:active) .control{border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active) .control{border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active)
     .control{background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
     :host([appearance='transparent']:hover) .control{border-color:Highlight}`));
 
-const styles$o = css`
-  ${styles$p}
-
-  .content{text-align:center}`;
-
 const definition$q = AnchorButton.compose({
   name: `${FluentDesignSystem.prefix}-anchor-button`,
   template: template$q,
-  styles: styles$o,
+  styles: styles$p,
   shadowOptions: {
     delegatesFocus: true
   }
@@ -4997,13 +4901,13 @@ const animations = {
   normalEase: curveEasyEase,
   nullEasing: curveLinear
 };
-const styles$n = css`
+const styles$o = css`
   ${display("inline-flex")} :host{position:relative;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin}) ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick}) ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow}),${durationSlower};transition-delay:${animations.fastEase}),${animations.nullEasing})}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
 
 const definition$p = Avatar.compose({
   name: `${FluentDesignSystem.prefix}-avatar`,
   template: template$p,
-  styles: styles$n
+  styles: styles$o
 });
 
 const BadgeAppearance = {
@@ -5311,7 +5215,7 @@ const badgeTintStyles = css.partial`
   }
 `;
 
-const styles$m = css`
+const styles$n = css`
   :host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded'][size='tiny']),:host([shape='rounded'][size='extra-small']),:host([shape='rounded'][size='small']){border-radius:${borderRadiusSmall}}${badgeSizeStyles}
   ${badgeFilledStyles}
   ${badgeGhostStyles}
@@ -5323,71 +5227,265 @@ const styles$m = css`
 const definition$o = Badge.compose({
   name: `${FluentDesignSystem.prefix}-badge`,
   template: template$o,
-  styles: styles$m
+  styles: styles$n
 });
 
-const proxySlotName = "form-associated-proxy";
-const ElementInternalsKey = "ElementInternals";
-const supportsElementInternals = ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
-const InternalsMap = /* @__PURE__ */new WeakMap();
-function FormAssociated(BaseCtor) {
-  const C = class extends BaseCtor {
-    constructor(...args) {
-      super(...args);
-      this.dirtyValue = false;
-      this.initialValue = "";
-      this.disabled = false;
-      this.proxyEventsToBlock = ["change", "click"];
-      this.proxyInitialized = false;
-      this.required = false;
-      this.initialValue = this.initialValue || "";
-      if (!this.elementInternals) {
-        this.formResetCallback = this.formResetCallback.bind(this);
-      }
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
+var __decorateClass$l = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(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$l(target, key, result);
+  return result;
+};
+class Button extends FASTElement {
+  constructor() {
+    super();
+    this.disabledFocusable = false;
+    this.elementInternals = this.attachInternals();
+    this.iconOnly = false;
+    this.elementInternals.role = "button";
+  }
+  disabledFocusableChanged(previous, next) {
+    if (this.$fastController.isConnected) {
+      this.elementInternals.ariaDisabled = `${!!next}`;
     }
-    static get formAssociated() {
-      return supportsElementInternals;
+  }
+  get form() {
+    return this.elementInternals.form;
+  }
+  get labels() {
+    return Object.freeze(Array.from(this.elementInternals.labels));
+  }
+  typeChanged(previous, next) {
+    var _a, _b, _c;
+    if (next !== ButtonType.submit) {
+      (_a = this.formSubmissionFallbackControl) == null ? void 0 : _a.remove();
+      (_c = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector('slot[name="internal"]')) == null ? void 0 : _c.remove();
     }
-    get validity() {
-      return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
+  }
+  clickHandler(e) {
+    if (e && this.disabledFocusable) {
+      e.stopImmediatePropagation();
+      return;
     }
-    get form() {
-      return this.elementInternals ? this.elementInternals.form : this.proxy.form;
+    this.press();
+    return true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
+  }
+  createAndInsertFormSubmissionFallbackControl() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const internalSlot = (_a = this.formSubmissionFallbackControlSlot) != null ? _a : document.createElement("slot");
+    internalSlot.setAttribute("name", "internal");
+    (_b = this.shadowRoot) == null ? void 0 : _b.appendChild(internalSlot);
+    this.formSubmissionFallbackControlSlot = internalSlot;
+    const fallbackControl = (_c = this.formSubmissionFallbackControl) != null ? _c : document.createElement("button");
+    fallbackControl.style.display = "none";
+    fallbackControl.setAttribute("type", "submit");
+    fallbackControl.setAttribute("slot", "internal");
+    if (this.formNoValidate) {
+      fallbackControl.toggleAttribute("formnovalidate", true);
     }
-    get validationMessage() {
-      return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
+    if ((_d = this.elementInternals.form) == null ? void 0 : _d.id) {
+      fallbackControl.setAttribute("form", this.elementInternals.form.id);
     }
-    get willValidate() {
-      return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
+    if (this.name) {
+      fallbackControl.setAttribute("name", this.name);
     }
-    get labels() {
-      if (this.elementInternals) {
-        return Object.freeze(Array.from(this.elementInternals.labels));
-      } else if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {
-        const parentLabels = this.proxy.labels;
-        const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
-        const labels = parentLabels ? forLabels.concat(Array.from(parentLabels)) : forLabels;
-        return Object.freeze(labels);
-      } else {
-        return emptyArray;
-      }
+    if (this.value) {
+      fallbackControl.setAttribute("value", this.value);
     }
-    valueChanged(previous, next) {
-      this.dirtyValue = true;
-      if (this.proxy instanceof HTMLElement) {
-        this.proxy.value = this.value;
-      }
-      this.currentValue = this.value;
-      this.setFormValue(this.value);
-      this.validate();
+    if (this.formAction) {
+      fallbackControl.setAttribute("formaction", (_e = this.formAction) != null ? _e : "");
     }
-    currentValueChanged() {
-      this.value = this.currentValue;
+    if (this.formEnctype) {
+      fallbackControl.setAttribute("formenctype", (_f = this.formEnctype) != null ? _f : "");
     }
-    initialValueChanged(previous, next) {
-      if (!this.dirtyValue) {
-        this.value = this.initialValue;
-        this.dirtyValue = false;
+    if (this.formMethod) {
+      fallbackControl.setAttribute("formmethod", (_g = this.formMethod) != null ? _g : "");
+    }
+    if (this.formTarget) {
+      fallbackControl.setAttribute("formtarget", (_h = this.formTarget) != null ? _h : "");
+    }
+    this.append(fallbackControl);
+    this.formSubmissionFallbackControl = fallbackControl;
+  }
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
+  }
+  keypressHandler(e) {
+    if (e && this.disabledFocusable) {
+      e.stopImmediatePropagation();
+      return;
+    }
+    if (e.key === keyEnter || e.key === keySpace) {
+      this.press();
+      return;
+    }
+    return true;
+  }
+  press() {
+    switch (this.type) {
+      case ButtonType.reset:
+        {
+          this.resetForm();
+          break;
+        }
+      case ButtonType.submit:
+        {
+          this.submitForm();
+          break;
+        }
+    }
+  }
+  resetForm() {
+    var _a;
+    (_a = this.elementInternals.form) == null ? void 0 : _a.reset();
+  }
+  submitForm() {
+    var _a;
+    if (!this.elementInternals.form || this.disabled || this.type !== ButtonType.submit) {
+      return;
+    }
+    if (!this.name && !this.formAction && !this.formEnctype && !this.form && !this.formMethod && !this.formNoValidate && !this.formTarget) {
+      this.elementInternals.form.requestSubmit();
+      return;
+    }
+    try {
+      this.elementInternals.setFormValue((_a = this.value) != null ? _a : "");
+      this.elementInternals.form.requestSubmit(this);
+    } catch (e) {
+      this.createAndInsertFormSubmissionFallbackControl();
+      this.elementInternals.setFormValue(null);
+      this.elementInternals.form.requestSubmit(this.formSubmissionFallbackControl);
+    }
+  }
+}
+Button.formAssociated = true;
+__decorateClass$l([attr], Button.prototype, "appearance", 2);
+__decorateClass$l([attr({
+  mode: "boolean"
+})], Button.prototype, "autofocus", 2);
+__decorateClass$l([observable], Button.prototype, "defaultSlottedContent", 2);
+__decorateClass$l([attr({
+  mode: "boolean"
+})], Button.prototype, "disabled", 2);
+__decorateClass$l([attr({
+  attribute: "disabled-focusable",
+  mode: "boolean"
+})], Button.prototype, "disabledFocusable", 2);
+__decorateClass$l([attr({
+  attribute: "formaction"
+})], Button.prototype, "formAction", 2);
+__decorateClass$l([attr({
+  attribute: "form"
+})], Button.prototype, "formAttribute", 2);
+__decorateClass$l([attr({
+  attribute: "formenctype"
+})], Button.prototype, "formEnctype", 2);
+__decorateClass$l([attr({
+  attribute: "formmethod"
+})], Button.prototype, "formMethod", 2);
+__decorateClass$l([attr({
+  attribute: "formnovalidate",
+  mode: "boolean"
+})], Button.prototype, "formNoValidate", 2);
+__decorateClass$l([attr({
+  attribute: "formtarget"
+})], Button.prototype, "formTarget", 2);
+__decorateClass$l([attr({
+  attribute: "icon-only",
+  mode: "boolean"
+})], Button.prototype, "iconOnly", 2);
+__decorateClass$l([attr], Button.prototype, "name", 2);
+__decorateClass$l([attr], Button.prototype, "shape", 2);
+__decorateClass$l([attr], Button.prototype, "size", 2);
+__decorateClass$l([attr], Button.prototype, "type", 2);
+__decorateClass$l([attr], Button.prototype, "value", 2);
+applyMixins(Button, StartEnd);
+
+function buttonTemplate$1(options = {}) {
+  return html`<template tabindex="${x => x.disabled ? -1 : 0}" @click="${(x, c) => x.clickHandler(c.event)}" @keypress="${(x, c) => x.keypressHandler(c.event)}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</template>`;
+}
+const template$n = buttonTemplate$1();
+
+const styles$m = css`
+  ${display("inline-flex")}
+
+  :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick}) solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${borderRadiusCircular}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])),:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover),:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active){border-color:transparent}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])),:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover),:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active){background-color:${colorTransparentBackground}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])),:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover),:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active){background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])),:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover),:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active){border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([appearance='transparent']:hover){border-color:Highlight}`));
+
+const definition$n = Button.compose({
+  name: `${FluentDesignSystem.prefix}-button`,
+  template: template$n,
+  styles: styles$m
+});
+
+const proxySlotName = "form-associated-proxy";
+const ElementInternalsKey = "ElementInternals";
+const supportsElementInternals = ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
+const InternalsMap = /* @__PURE__ */new WeakMap();
+function FormAssociated(BaseCtor) {
+  const C = class extends BaseCtor {
+    constructor(...args) {
+      super(...args);
+      this.dirtyValue = false;
+      this.initialValue = "";
+      this.disabled = false;
+      this.proxyEventsToBlock = ["change", "click"];
+      this.proxyInitialized = false;
+      this.required = false;
+      this.initialValue = this.initialValue || "";
+      if (!this.elementInternals) {
+        this.formResetCallback = this.formResetCallback.bind(this);
+      }
+    }
+    static get formAssociated() {
+      return supportsElementInternals;
+    }
+    get validity() {
+      return this.elementInternals ? this.elementInternals.validity : this.proxy.validity;
+    }
+    get form() {
+      return this.elementInternals ? this.elementInternals.form : this.proxy.form;
+    }
+    get validationMessage() {
+      return this.elementInternals ? this.elementInternals.validationMessage : this.proxy.validationMessage;
+    }
+    get willValidate() {
+      return this.elementInternals ? this.elementInternals.willValidate : this.proxy.willValidate;
+    }
+    get labels() {
+      if (this.elementInternals) {
+        return Object.freeze(Array.from(this.elementInternals.labels));
+      } else if (this.proxy instanceof HTMLElement && this.proxy.ownerDocument && this.id) {
+        const parentLabels = this.proxy.labels;
+        const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
+        const labels = parentLabels ? forLabels.concat(Array.from(parentLabels)) : forLabels;
+        return Object.freeze(labels);
+      } else {
+        return emptyArray;
+      }
+    }
+    valueChanged(previous, next) {
+      this.dirtyValue = true;
+      if (this.proxy instanceof HTMLElement) {
+        this.proxy.value = this.value;
+      }
+      this.currentValue = this.value;
+      this.setFormValue(this.value);
+      this.validate();
+    }
+    currentValueChanged() {
+      this.value = this.currentValue;
+    }
+    initialValueChanged(previous, next) {
+      if (!this.dirtyValue) {
+        this.value = this.initialValue;
+        this.dirtyValue = false;
       }
     }
     disabledChanged(previous, next) {
@@ -5589,158 +5687,6 @@ function CheckableFormAssociated(BaseCtor) {
   return D;
 }
 
-class _Button extends FASTElement {}
-class FormAssociatedButton extends FormAssociated(_Button) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
-var __decorateClass$l = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(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$l(target, key, result);
-  return result;
-};
-class Button extends FormAssociatedButton {
-  constructor() {
-    super(...arguments);
-    this.iconOnly = false;
-    this.disabledFocusable = false;
-    this.handleDisabledFocusableClick = e => {
-      if (e && this.disabledFocusable) {
-        e.stopImmediatePropagation();
-        return;
-      }
-    };
-    this.handleSubmission = () => {
-      if (!this.form) {
-        return;
-      }
-      const attached = this.proxy.isConnected;
-      if (!attached) {
-        this.attachProxy();
-      }
-      typeof this.form.requestSubmit === "function" ? this.form.requestSubmit(this.proxy) : this.proxy.click();
-      if (!attached) {
-        this.detachProxy();
-      }
-    };
-    this.handleFormReset = () => {
-      var _a;
-      (_a = this.form) == null ? void 0 : _a.reset();
-    };
-  }
-  formactionChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formAction = this.formaction;
-    }
-  }
-  formenctypeChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formEnctype = this.formenctype;
-    }
-  }
-  formmethodChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formMethod = this.formmethod;
-    }
-  }
-  formnovalidateChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formNoValidate = this.formnovalidate;
-    }
-  }
-  formtargetChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formTarget = this.formtarget;
-    }
-  }
-  typeChanged(previous, next) {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.type = this.type;
-    }
-    next === ButtonType.submit && this.addEventListener("click", this.handleSubmission);
-    previous === ButtonType.submit && this.removeEventListener("click", this.handleSubmission);
-    next === ButtonType.reset && this.addEventListener("click", this.handleFormReset);
-    previous === ButtonType.reset && this.removeEventListener("click", this.handleFormReset);
-  }
-  disabledFocusableChanged(prev, next) {
-    if (!this.$fastController.isConnected) {
-      return;
-    }
-    if (this.disabledFocusable) {
-      this.setAttribute("aria-disabled", "true");
-    } else {
-      this.removeAttribute("aria-disabled");
-    }
-  }
-  validate() {
-    super.validate(this.control);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.proxy.setAttribute("type", this.type);
-    this.addEventListener("click", this.handleDisabledFocusableClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this.handleDisabledFocusableClick);
-  }
-}
-__decorateClass$l([attr({
-  mode: "boolean"
-})], Button.prototype, "autofocus", 2);
-__decorateClass$l([attr({
-  attribute: "form"
-})], Button.prototype, "formId", 2);
-__decorateClass$l([attr], Button.prototype, "formaction", 2);
-__decorateClass$l([attr], Button.prototype, "formenctype", 2);
-__decorateClass$l([attr], Button.prototype, "formmethod", 2);
-__decorateClass$l([attr({
-  mode: "boolean"
-})], Button.prototype, "formnovalidate", 2);
-__decorateClass$l([attr], Button.prototype, "formtarget", 2);
-__decorateClass$l([attr], Button.prototype, "type", 2);
-__decorateClass$l([attr], Button.prototype, "appearance", 2);
-__decorateClass$l([attr], Button.prototype, "shape", 2);
-__decorateClass$l([attr], Button.prototype, "size", 2);
-__decorateClass$l([attr({
-  attribute: "icon-only",
-  mode: "boolean"
-})], Button.prototype, "iconOnly", 2);
-__decorateClass$l([attr({
-  attribute: "disabled-focusable",
-  mode: "boolean"
-})], Button.prototype, "disabledFocusable", 2);
-__decorateClass$l([observable], Button.prototype, "defaultSlottedContent", 2);
-class DelegatesARIAButton {}
-__decorateClass$l([attr({
-  attribute: "aria-expanded"
-})], DelegatesARIAButton.prototype, "ariaExpanded", 2);
-__decorateClass$l([attr({
-  attribute: "aria-pressed"
-})], DelegatesARIAButton.prototype, "ariaPressed", 2);
-applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
-applyMixins(Button, StartEnd, DelegatesARIAButton);
-
-function buttonTemplate$1(options = {}) {
-  return html`<button class="control" part="control" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" form="${x => x.formId}" formaction="${x => x.formaction}" formenctype="${x => x.formenctype}" formmethod="${x => x.formmethod}" ?formnovalidate="${x => x.formnovalidate}" formtarget="${x => x.formtarget}" name="${x => x.name}" type="${x => x.type}" value="${x => x.value}" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-expanded="${x => x.ariaExpanded}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-pressed="${x => x.ariaPressed}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")}>${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot></span>${endSlotTemplate(options)}</button>`;
-}
-const template$n = buttonTemplate$1();
-
-const definition$n = Button.compose({
-  name: `${FluentDesignSystem.prefix}-button`,
-  template: template$n,
-  styles: styles$p,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-
 class _Checkbox extends FASTElement {}
 class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
   constructor() {
@@ -5848,25 +5794,22 @@ const CompoundButtonShape = ButtonShape;
 const CompoundButtonSize = ButtonSize;
 
 function buttonTemplate(options = {}) {
-  return html`<button class="control" part="control" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" form="${x => x.formId}" formaction="${x => x.formaction}" formenctype="${x => x.formenctype}" formmethod="${x => x.formmethod}" ?formnovalidate="${x => x.formnovalidate}" formtarget="${x => x.formtarget}" name="${x => x.name}" type="${x => x.type}" value="${x => x.value}" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-expanded="${x => x.ariaExpanded}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-pressed="${x => x.ariaPressed}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")}>${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</button>`;
+  return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? -1 : 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
 }
 const template$l = buttonTemplate();
 
 const styles$k = css`
-  ${styles$p}
+  ${styles$m}
 
-  :host .control,:host(:is([size])) .control{gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:hover,[appearance='primary']:active))
+  :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']:hover,[appearance='primary']:active))
     ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='subtle'],[appearance='subtle']:hover,[appearance='subtle']:active))
     ::slotted([slot='description']),:host([appearance='transparent']) ::slotted([slot='description']){color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is([disabled],[disabled][appearance],[disabled-focusable],[disabled-focusable][appearance]))
-    ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']) .control{padding:8px;padding-bottom:10px}:host([icon-only]) .control{min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']) .control{min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']) .control{min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']) .control{padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
+    ::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}}`;
 
 const definition$l = CompoundButton.compose({
   name: `${FluentDesignSystem.prefix}-compound-button`,
   template: template$l,
-  styles: styles$k,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  styles: styles$k
 });
 
 var __defProp$j = Object.defineProperty;
@@ -5969,32 +5912,99 @@ const definition$k = CounterBadge.compose({
 });
 
 /*!
-* tabbable 5.2.0
+* tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
-var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
+// NOTE: separate `:not()` selectors has broader browser support than the newer
+//  `:not([inert], [inert] *)` (Feb 2023)
+// CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes
+//  the entire query to fail, resulting in no nodes found, which will break a lot
+//  of things... so we have to rely on JS to identify nodes inside an inert container
+var candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable="false"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];
 var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
-var matches = typeof Element === 'undefined' ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+var NoElement = typeof Element === 'undefined';
+var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
+  var _element$getRootNode;
+  return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
+} : function (element) {
+  return element === null || element === void 0 ? void 0 : element.ownerDocument;
+};
+
+/**
+ * Determines if a node is inert or in an inert ancestor.
+ * @param {Element} [node]
+ * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
+ *  see if any of them are inert. If false, only `node` itself is considered.
+ * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
+ *  False if `node` is falsy.
+ */
+var isInert = function isInert(node, lookUp) {
+  var _node$getAttribute;
+  if (lookUp === void 0) {
+    lookUp = true;
+  }
+  // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`
+  //  JS API property; we have to check the attribute, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's an active element
+  var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');
+  var inert = inertAtt === '' || inertAtt === 'true';
+
+  // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`
+  //  if it weren't for `matches()` not being a function on shadow roots; the following
+  //  code works for any kind of node
+  // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`
+  //  so it likely would not support `:is([inert] *)` either...
+  var result = inert || lookUp && node && isInert(node.parentNode); // recursive
+
+  return result;
+};
+
+/**
+ * Determines if a node's content is editable.
+ * @param {Element} [node]
+ * @returns True if it's content-editable; false if it's not or `node` is falsy.
+ */
 var isContentEditable = function isContentEditable(node) {
-  return node.contentEditable === 'true';
-};
-var getTabindex = function getTabindex(node) {
-  var tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
-  if (!isNaN(tabindexAttr)) {
-    return tabindexAttr;
-  } // Browsers do not return `tabIndex` correctly for contentEditable nodes;
-  // so if they don't have a tabindex attribute specifically set, assume it's 0.
-
-  if (isContentEditable(node)) {
-    return 0;
-  } // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
-  //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
-  //  yet they are still part of the regular tab order; in FF, they get a default
-  //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
-  //  order, consider their tab index to be 0.
-
-  if ((node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
-    return 0;
+  var _node$getAttribute2;
+  // CAREFUL: JSDom does not support the `HTMLElement.isContentEditable` API so we have
+  //  to use the attribute directly to check for this, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's a non-editable element
+  var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, 'contenteditable');
+  return attValue === '' || attValue === 'true';
+};
+
+/**
+ * @private
+ * Determines if the node has an explicitly specified `tabindex` attribute.
+ * @param {HTMLElement} node
+ * @returns {boolean} True if so; false if not.
+ */
+var hasTabIndex = function hasTabIndex(node) {
+  return !isNaN(parseInt(node.getAttribute('tabindex'), 10));
+};
+
+/**
+ * Determine the tab index of a given node.
+ * @param {HTMLElement} node
+ * @returns {number} Tab order (negative, 0, or positive number).
+ * @throws {Error} If `node` is falsy.
+ */
+var getTabIndex = function getTabIndex(node) {
+  if (!node) {
+    throw new Error('No node provided');
+  }
+  if (node.tabIndex < 0) {
+    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+    // yet they are still part of the regular tab order; in FF, they get a default
+    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+    // order, consider their tab index to be 0.
+    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
+    // so if they don't have a tabindex attribute specifically set, assume it's 0.
+    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
+      return 0;
+    }
   }
   return node.tabIndex;
 };
@@ -6021,7 +6031,7 @@ var isTabbableRadio = function isTabbableRadio(node) {
   if (!node.name) {
     return true;
   }
-  var radioScope = node.form || node.ownerDocument;
+  var radioScope = node.form || getRootNode(node);
   var queryRadios = function queryRadios(name) {
     return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
   };
@@ -6046,7 +6056,68 @@ var isRadio = function isRadio(node) {
 var isNonTabbableRadio = function isNonTabbableRadio(node) {
   return isRadio(node) && !isTabbableRadio(node);
 };
-var isHidden = function isHidden(node, displayCheck) {
+
+// determines if a node is ultimately attached to the window's document
+var isNodeAttached = function isNodeAttached(node) {
+  var _nodeRoot;
+  // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
+  //  (but NOT _the_ document; see second 'If' comment below for more).
+  // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
+  //  is attached, and the one we need to check if it's in the document or not (because the
+  //  shadow, and all nodes it contains, is never considered in the document since shadows
+  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
+  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
+  //  visibility, including all the nodes it contains). The host could be any normal node,
+  //  or a custom element (i.e. web component). Either way, that's the one that is considered
+  //  part of the document, not the shadow root, nor any of its children (i.e. the node being
+  //  tested).
+  // To further complicate things, we have to look all the way up until we find a shadow HOST
+  //  that is attached (or find none) because the node might be in nested shadows...
+  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
+  //  document (per the docs) and while it's a Document-type object, that document does not
+  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
+  //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
+  //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
+  //  node is actually detached.
+  // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible
+  //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed
+  //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then
+  //  `ownerDocument` will be `null`, hence the optional chaining on it.
+  var nodeRoot = node && getRootNode(node);
+  var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
+
+  // in some cases, a detached node will return itself as the root instead of a document or
+  //  shadow root object, in which case, we shouldn't try to look further up the host chain
+  var attached = false;
+  if (nodeRoot && nodeRoot !== node) {
+    var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
+    attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
+    while (!attached && nodeRootHost) {
+      var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
+      // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
+      //  which means we need to get the host's host and check if that parent host is contained
+      //  in (i.e. attached to) the document
+      nodeRoot = getRootNode(nodeRootHost);
+      nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
+      attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
+    }
+  }
+  return attached;
+};
+var isZeroArea = function isZeroArea(node) {
+  var _node$getBoundingClie = node.getBoundingClientRect(),
+    width = _node$getBoundingClie.width,
+    height = _node$getBoundingClie.height;
+  return width === 0 && height === 0;
+};
+var isHidden = function isHidden(node, _ref) {
+  var displayCheck = _ref.displayCheck,
+    getShadowRoot = _ref.getShadowRoot;
+  // NOTE: visibility will be `undefined` if node is detached from the document
+  //  (see notes about this further down), which means we will consider it visible
+  //  (this is legacy behavior from a very long way back)
+  // NOTE: we check this regardless of `displayCheck="none"` because this is a
+  //  _visibility_ check, not a _display_ check
   if (getComputedStyle(node).visibility === 'hidden') {
     return true;
   }
@@ -6055,30 +6126,128 @@ var isHidden = function isHidden(node, displayCheck) {
   if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
     return true;
   }
-  if (!displayCheck || displayCheck === 'full') {
-    while (node) {
-      if (getComputedStyle(node).display === 'none') {
+  if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {
+    if (typeof getShadowRoot === 'function') {
+      // figure out if we should consider the node to be in an undisclosed shadow and use the
+      //  'non-zero-area' fallback
+      var originalNode = node;
+      while (node) {
+        var parentElement = node.parentElement;
+        var rootNode = getRootNode(node);
+        if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
+        ) {
+          // node has an undisclosed shadow which means we can only treat it as a black box, so we
+          //  fall back to a non-zero-area test
+          return isZeroArea(node);
+        } else if (node.assignedSlot) {
+          // iterate up slot
+          node = node.assignedSlot;
+        } else if (!parentElement && rootNode !== node.ownerDocument) {
+          // cross shadow boundary
+          node = rootNode.host;
+        } else {
+          // iterate up normal dom
+          node = parentElement;
+        }
+      }
+      node = originalNode;
+    }
+    // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
+    //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
+    //  it might be a falsy value, which means shadow DOM support is disabled
+
+    // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
+    //  now we can just test to see if it would normally be visible or not, provided it's
+    //  attached to the main document.
+    // NOTE: We must consider case where node is inside a shadow DOM and given directly to
+    //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
+
+    if (isNodeAttached(node)) {
+      // this works wherever the node is: if there's at least one client rect, it's
+      //  somehow displayed; it also covers the CSS 'display: contents' case where the
+      //  node itself is hidden in place of its contents; and there's no need to search
+      //  up the hierarchy either
+      return !node.getClientRects().length;
+    }
+
+    // Else, the node isn't attached to the document, which means the `getClientRects()`
+    //  API will __always__ return zero rects (this can happen, for example, if React
+    //  is used to render nodes onto a detached tree, as confirmed in this thread:
+    //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
+    //
+    // It also means that even window.getComputedStyle(node).display will return `undefined`
+    //  because styles are only computed for nodes that are in the document.
+    //
+    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
+    //  somehow. Though it was never stated officially, anyone who has ever used tabbable
+    //  APIs on nodes in detached containers has actually implicitly used tabbable in what
+    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
+    //  considering __everything__ to be visible because of the innability to determine styles.
+    //
+    // v6.0.0: As of this major release, the default 'full' option __no longer treats detached
+    //  nodes as visible with the 'none' fallback.__
+    if (displayCheck !== 'legacy-full') {
+      return true; // hidden
+    }
+    // else, fallback to 'none' mode and consider the node visible
+  } else if (displayCheck === 'non-zero-area') {
+    // NOTE: Even though this tests that the node's client rect is non-zero to determine
+    //  whether it's displayed, and that a detached node will __always__ have a zero-area
+    //  client rect, we don't special-case for whether the node is attached or not. In
+    //  this mode, we do want to consider nodes that have a zero area to be hidden at all
+    //  times, and that includes attached or not.
+    return isZeroArea(node);
+  }
+
+  // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume
+  //  it's visible
+  return false;
+};
+
+// form fields (nested) inside a disabled fieldset are not focusable/tabbable
+//  unless they are in the _first_ <legend> element of the top-most disabled
+//  fieldset
+var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
+  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
+    var parentNode = node.parentElement;
+    // check if `node` is contained in a disabled <fieldset>
+    while (parentNode) {
+      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
+        // look for the first <legend> among the children of the disabled <fieldset>
+        for (var i = 0; i < parentNode.children.length; i++) {
+          var child = parentNode.children.item(i);
+          // when the first <legend> (in document order) is found
+          if (child.tagName === 'LEGEND') {
+            // if its parent <fieldset> is not nested in another disabled <fieldset>,
+            // return whether `node` is a descendant of its first <legend>
+            return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);
+          }
+        }
+        // the disabled <fieldset> containing `node` has no <legend>
         return true;
       }
-      node = node.parentElement;
+      parentNode = parentNode.parentElement;
     }
-  } else if (displayCheck === 'non-zero-area') {
-    var _node$getBoundingClie = node.getBoundingClientRect(),
-      width = _node$getBoundingClie.width,
-      height = _node$getBoundingClie.height;
-    return width === 0 && height === 0;
   }
+
+  // else, node's tabbable/focusable state should not be affected by a fieldset's
+  //  enabled/disabled state
   return false;
 };
 var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
-  if (node.disabled || isHiddenInput(node) || isHidden(node, options.displayCheck) || /* For a details element with a summary, the summary element gets the focused  */
-  isDetailsWithSummary(node)) {
+  if (node.disabled ||
+  // we must do an inert look up to filter out any elements inside an inert ancestor
+  //  because we're limited in the type of selectors we can use in JSDom (see related
+  //  note related to `candidateSelectors`)
+  isInert(node) || isHiddenInput(node) || isHidden(node, options) ||
+  // For a details element with a summary, the summary element gets the focus
+  isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
     return false;
   }
   return true;
 };
 var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
-  if (!isNodeMatchingSelectorFocusable(options, node) || isNonTabbableRadio(node) || getTabindex(node) < 0) {
+  if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
     return false;
   }
   return true;
@@ -6298,45 +6467,200 @@ const _Dialog = class extends FASTElement {
     });
   }
 };
-let Dialog = _Dialog;
-__decorateClass$i([observable], Dialog.prototype, "dialog", 2);
-__decorateClass$i([observable], Dialog.prototype, "titleAction", 2);
-__decorateClass$i([observable], Dialog.prototype, "defaultTitleAction", 2);
-__decorateClass$i([attr({
-  attribute: "aria-describedby"
-})], Dialog.prototype, "ariaDescribedby", 2);
-__decorateClass$i([attr({
-  attribute: "aria-labelledby"
-})], Dialog.prototype, "ariaLabelledby", 2);
-__decorateClass$i([attr({
-  attribute: "modal-type"
-})], Dialog.prototype, "modalType", 2);
-__decorateClass$i([attr({
+let Dialog = _Dialog;
+__decorateClass$i([observable], Dialog.prototype, "dialog", 2);
+__decorateClass$i([observable], Dialog.prototype, "titleAction", 2);
+__decorateClass$i([observable], Dialog.prototype, "defaultTitleAction", 2);
+__decorateClass$i([attr({
+  attribute: "aria-describedby"
+})], Dialog.prototype, "ariaDescribedby", 2);
+__decorateClass$i([attr({
+  attribute: "aria-labelledby"
+})], Dialog.prototype, "ariaLabelledby", 2);
+__decorateClass$i([attr({
+  attribute: "modal-type"
+})], Dialog.prototype, "modalType", 2);
+__decorateClass$i([attr({
+  mode: "boolean"
+})], Dialog.prototype, "open", 2);
+__decorateClass$i([attr({
+  mode: "boolean",
+  attribute: "no-title-action"
+})], Dialog.prototype, "noTitleAction", 2);
+
+const dismissed16Regular = html.partial(`
+  <svg
+    fill="currentColor"
+    aria-hidden="true"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+      fill="currentColor"
+    ></path>
+  </svg>`);
+const template$j = html`<template ?open="${x => x.open}"><dialog role="${x => x.modalType === DialogModalType.alert ? "alertdialog" : "dialog"}" modal-type="${x => x.modalType}" class="dialog" part="dialog" aria-modal="${x => x.modalType === DialogModalType.modal || x.modalType === DialogModalType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @keydown="${(x, c) => x.handleKeydown(c.event)}" @click="${(x, c) => x.handleClick(c.event)}" ${ref("dialog")}><div class="root" part="root"><div class="title" part="title"><slot name="title"></slot><slot ${slotted({
+  property: "titleAction",
+  filter: elements()
+})} name="title-action"></slot>${when(x => x.modalType === DialogModalType.nonModal && x.titleAction.length === 0 && !x.noTitleAction, html`<fluent-button tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.dismiss()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button>`)}</div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div></div></dialog></template>`;
+
+const styles$i = css`
+  ${display("flex")}
+
+  :host{--dialog-backdrop:${colorBackgroundOverlay}}dialog{background:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorTransparentStroke};z-index:2;margin:auto auto;max-width:100%;width:100vw;border-radius:${borderRadiusXLarge};box-shadow:${shadow64};max-height:100vh;height:fit-content;overflow:unset;position:fixed;inset:0;padding:0}dialog::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}.root{box-sizing:border-box;display:flex;flex-direction:column;overflow:unset;max-height:calc(100vh - 48px);padding:${spacingVerticalXXL} ${spacingHorizontalXXL}}.title{font-size:${fontSizeBase500};line-height:${lineHeightBase500};font-weight:${fontWeightSemibold};font-family:${fontFamilyBase};color:${colorNeutralForeground1};margin-bottom:${spacingVerticalS};display:flex;justify-content:space-between;align-items:flex-start;column-gap:8px}.content{vertical-align:top;min-height:32px;color:${colorNeutralForeground1};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};font-family:${fontFamilyBase};overflow-y:auto;box-sizing:border-box}.actions{display:flex;grid-column-start:1;flex-direction:column;max-width:100vw;row-gap:${spacingVerticalS};padding-top:${spacingVerticalXXL};justify-self:stretch;width:100%}::slotted([slot='action']){width:100%}@media screen and (min-width:480px){::slotted([slot='action']){width:fit-content}dialog{max-width:600px;width:100%}.actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;column-gap:${spacingHorizontalS};padding-top:${spacingVerticalS};box-sizing:border-box}}`;
+
+const definition$j = Dialog.compose({
+  name: `${FluentDesignSystem.prefix}-dialog`,
+  template: template$j,
+  styles: styles$i
+});
+
+const DividerRole = {
+  separator: "separator",
+  presentation: "presentation"
+};
+const DividerOrientation = Orientation;
+const DividerAlignContent = {
+  center: "center",
+  start: "start",
+  end: "end"
+};
+const DividerAppearance = {
+  strong: "strong",
+  brand: "brand",
+  subtle: "subtle",
+  default: "default"
+};
+
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(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$h(target, key, result);
+  return result;
+};
+class Divider extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.role = DividerRole.separator;
+    this.orientation = DividerOrientation.horizontal;
+  }
+}
+__decorateClass$h([attr], Divider.prototype, "role", 2);
+__decorateClass$h([attr], Divider.prototype, "orientation", 2);
+__decorateClass$h([attr({
+  attribute: "align-content"
+})], Divider.prototype, "alignContent", 2);
+__decorateClass$h([attr], Divider.prototype, "appearance", 2);
+__decorateClass$h([attr({
+  mode: "boolean"
+})], Divider.prototype, "inset", 2);
+
+function dividerTemplate() {
+  return html`<template role="${x => x.role}" aria-orientation="${x => x.role !== DividerRole.presentation ? x.orientation : void 0}"><slot></slot></template>`;
+}
+const template$i = dividerTemplate();
+
+const styles$h = css`
+  ${display("flex")}
+
+  :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical']){flex-direction:column;align-items:center}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
+
+const definition$i = Divider.compose({
+  name: `${FluentDesignSystem.prefix}-divider`,
+  template: template$i,
+  styles: styles$h
+});
+
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(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$g(target, key, result);
+  return result;
+};
+class Image extends FASTElement {}
+__decorateClass$g([attr({
+  mode: "boolean"
+})], Image.prototype, "block", 2);
+__decorateClass$g([attr({
+  mode: "boolean"
+})], Image.prototype, "bordered", 2);
+__decorateClass$g([attr({
+  mode: "boolean"
+})], Image.prototype, "shadow", 2);
+__decorateClass$g([attr], Image.prototype, "fit", 2);
+__decorateClass$g([attr], Image.prototype, "shape", 2);
+
+const ImageFit = {
+  none: "none",
+  center: "center",
+  contain: "contain",
+  cover: "cover",
+  default: "default"
+};
+const ImageShape = {
+  circular: "circular",
+  rounded: "rounded",
+  square: "square"
+};
+
+const template$h = html`<slot></slot>`;
+
+const styles$g = css`
+  :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$h = Image.compose({
+  name: `${FluentDesignSystem.prefix}-image`,
+  template: template$h,
+  styles: styles$g
+});
+
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(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$f(target, key, result);
+  return result;
+};
+class Label extends FASTElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.required = false;
+  }
+}
+__decorateClass$f([attr], Label.prototype, "size", 2);
+__decorateClass$f([attr], Label.prototype, "weight", 2);
+__decorateClass$f([attr({
   mode: "boolean"
-})], Dialog.prototype, "open", 2);
-__decorateClass$i([attr({
-  mode: "boolean",
-  attribute: "no-title-action"
-})], Dialog.prototype, "noTitleAction", 2);
+})], Label.prototype, "disabled", 2);
+__decorateClass$f([attr({
+  mode: "boolean"
+})], Label.prototype, "required", 2);
 
-const dismissed16Regular = html.partial(`
-  <svg
-    fill="currentColor"
-    aria-hidden="true"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
-      fill="currentColor"
-    ></path>
-  </svg>`);
-const template$j = html`<template ?open="${x => x.open}"><dialog role="${x => x.modalType === DialogModalType.alert ? "alertdialog" : "dialog"}" modal-type="${x => x.modalType}" class="dialog" part="dialog" aria-modal="${x => x.modalType === DialogModalType.modal || x.modalType === DialogModalType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @keydown="${(x, c) => x.handleKeydown(c.event)}" @click="${(x, c) => x.handleClick(c.event)}" ${ref("dialog")}><div class="root" part="root"><div class="title" part="title"><slot name="title"></slot><slot ${slotted({
-  property: "titleAction",
-  filter: elements()
-})} name="title-action"></slot>${when(x => x.modalType === DialogModalType.nonModal && x.titleAction.length === 0 && !x.noTitleAction, html`<fluent-button tabindex="0" part="title-action" class="title-action" appearance="transparent" icon-only @click=${x => x.dismiss()} ${ref("defaultTitleAction")}>${dismissed16Regular}</fluent-button>`)}</div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div></div></dialog></template>`;
+const styles$f = css`
+  ${display("flex")}
+
+  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};color:${colorNeutralForeground1}}.asterisk{color:${colorPaletteRedForeground1};margin-left:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400};font-weight:${fontWeightSemibold}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
+
+function labelTemplate() {
+  return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
+}
+const template$g = labelTemplate();
+
+const definition$g = Label.compose({
+  name: `${FluentDesignSystem.prefix}-label`,
+  template: template$g,
+  styles: styles$f
+});
 
 function t(t) {
   return t.split("-")[1];
@@ -7253,161 +7577,6 @@ const z = (t, n, o) => {
   });
 };
 
-const styles$i = css`
-  ${display("flex")}
-
-  :host{--dialog-backdrop:${colorBackgroundOverlay}}dialog{background:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorTransparentStroke};z-index:2;margin:auto auto;max-width:100%;width:100vw;border-radius:${borderRadiusXLarge};box-shadow:${shadow64};max-height:100vh;height:fit-content;overflow:unset;position:fixed;inset:0;padding:0}dialog::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}.root{box-sizing:border-box;display:flex;flex-direction:column;overflow:unset;max-height:calc(100vh - 48px);padding:${spacingVerticalXXL} ${spacingHorizontalXXL}}.title{font-size:${fontSizeBase500};line-height:${lineHeightBase500};font-weight:${fontWeightSemibold};font-family:${fontFamilyBase};color:${colorNeutralForeground1};margin-bottom:${spacingVerticalS};display:flex;justify-content:space-between;align-items:flex-start;column-gap:8px}.content{vertical-align:top;min-height:32px;color:${colorNeutralForeground1};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};font-family:${fontFamilyBase};overflow-y:auto;box-sizing:border-box}.actions{display:flex;grid-column-start:1;flex-direction:column;max-width:100vw;row-gap:${spacingVerticalS};padding-top:${spacingVerticalXXL};justify-self:stretch;width:100%}::slotted([slot='action']){width:100%}@media screen and (min-width:480px){::slotted([slot='action']){width:fit-content}dialog{max-width:600px;width:100%}.actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;column-gap:${spacingHorizontalS};padding-top:${spacingVerticalS};box-sizing:border-box}}`;
-
-const definition$j = Dialog.compose({
-  name: `${FluentDesignSystem.prefix}-dialog`,
-  template: template$j,
-  styles: styles$i
-});
-
-const DividerRole = {
-  separator: "separator",
-  presentation: "presentation"
-};
-const DividerOrientation = Orientation;
-const DividerAlignContent = {
-  center: "center",
-  start: "start",
-  end: "end"
-};
-const DividerAppearance = {
-  strong: "strong",
-  brand: "brand",
-  subtle: "subtle",
-  default: "default"
-};
-
-var __defProp$h = Object.defineProperty;
-var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
-var __decorateClass$h = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(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$h(target, key, result);
-  return result;
-};
-class Divider extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.role = DividerRole.separator;
-    this.orientation = DividerOrientation.horizontal;
-  }
-}
-__decorateClass$h([attr], Divider.prototype, "role", 2);
-__decorateClass$h([attr], Divider.prototype, "orientation", 2);
-__decorateClass$h([attr({
-  attribute: "align-content"
-})], Divider.prototype, "alignContent", 2);
-__decorateClass$h([attr], Divider.prototype, "appearance", 2);
-__decorateClass$h([attr({
-  mode: "boolean"
-})], Divider.prototype, "inset", 2);
-
-function dividerTemplate() {
-  return html`<template role="${x => x.role}" aria-orientation="${x => x.role !== DividerRole.presentation ? x.orientation : void 0}"><slot></slot></template>`;
-}
-const template$i = dividerTemplate();
-
-const styles$h = css`
-  ${display("flex")}
-
-  :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical']){flex-direction:column;align-items:center}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}`));
-
-const definition$i = Divider.compose({
-  name: `${FluentDesignSystem.prefix}-divider`,
-  template: template$i,
-  styles: styles$h
-});
-
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(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$g(target, key, result);
-  return result;
-};
-class Image extends FASTElement {}
-__decorateClass$g([attr({
-  mode: "boolean"
-})], Image.prototype, "block", 2);
-__decorateClass$g([attr({
-  mode: "boolean"
-})], Image.prototype, "bordered", 2);
-__decorateClass$g([attr({
-  mode: "boolean"
-})], Image.prototype, "shadow", 2);
-__decorateClass$g([attr], Image.prototype, "fit", 2);
-__decorateClass$g([attr], Image.prototype, "shape", 2);
-
-const ImageFit = {
-  none: "none",
-  center: "center",
-  contain: "contain",
-  cover: "cover",
-  default: "default"
-};
-const ImageShape = {
-  circular: "circular",
-  rounded: "rounded",
-  square: "square"
-};
-
-const template$h = html`<slot></slot>`;
-
-const styles$g = css`
-  :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$h = Image.compose({
-  name: `${FluentDesignSystem.prefix}-image`,
-  template: template$h,
-  styles: styles$g
-});
-
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(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$f(target, key, result);
-  return result;
-};
-class Label extends FASTElement {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.required = false;
-  }
-}
-__decorateClass$f([attr], Label.prototype, "size", 2);
-__decorateClass$f([attr], Label.prototype, "weight", 2);
-__decorateClass$f([attr({
-  mode: "boolean"
-})], Label.prototype, "disabled", 2);
-__decorateClass$f([attr({
-  mode: "boolean"
-})], Label.prototype, "required", 2);
-
-const styles$f = css`
-  ${display("flex")}
-
-  :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-weight:${fontWeightRegular};color:${colorNeutralForeground1}}.asterisk{color:${colorPaletteRedForeground1};margin-left:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400};font-weight:${fontWeightSemibold}}:host([weight='semibold']){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
-
-function labelTemplate() {
-  return html`<slot></slot><span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>`;
-}
-const template$g = labelTemplate();
-
-const definition$g = Label.compose({
-  name: `${FluentDesignSystem.prefix}-label`,
-  template: template$g,
-  styles: styles$f
-});
-
 var __defProp$e = Object.defineProperty;
 var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
 var __decorateClass$e = (decorators, target, key, kind) => {
@@ -7694,16 +7863,17 @@ const MenuButtonShape = ButtonShape;
 const MenuButtonSize = ButtonSize;
 
 const template$e = buttonTemplate$1({
-  end: html.partial(`<svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor"></path></svg>`)
+  end: html.partial(`
+    <svg slot="end" fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z" fill="currentColor"></path>
+    </svg>
+  `)
 });
 
 const definition$e = MenuButton.compose({
   name: `${FluentDesignSystem.prefix}-menu-button`,
   template: template$e,
-  styles: styles$p,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  styles: styles$m
 });
 
 const MenuItemRole = {
@@ -9846,64 +10016,33 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 class ToggleButton extends Button {
-  constructor() {
-    super();
-    this.dirtyChecked = false;
-    this.checkedAttribute = false;
-    this.defaultChecked = false;
-    this.checked = false;
-    this.currentChecked = false;
-    this.handleToggleButtonClick = e => {
-      if (!this.disabled && !this.disabledFocusable) {
-        this.checked = !this.checked;
-      }
-    };
-    this.dirtyChecked = false;
-  }
-  checkedAttributeChanged() {
-    this.defaultChecked = this.checkedAttribute;
-  }
-  defaultCheckedChanged() {
-    if (!this.dirtyChecked) {
-      this.checked = this.defaultChecked;
-      this.dirtyChecked = false;
-    }
+  pressedChanged() {
+    this.setPressedState();
   }
-  checkedChanged(prev, next) {
-    if (!this.$fastController.isConnected) {
-      return;
-    }
-    if (!this.dirtyChecked) {
-      this.dirtyChecked = true;
-    }
-    this.currentChecked = this.checked;
-    this.setAttribute("aria-pressed", `${this.currentChecked}`);
-    if (prev !== void 0) {
-      this.$emit("change");
-    }
+  mixedChanged() {
+    this.setPressedState();
   }
-  currentCheckedChanged(prev, next) {
-    this.checked = this.currentChecked;
+  press() {
+    this.pressed = !this.pressed;
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("click", this.handleToggleButtonClick);
+    this.setPressedState();
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this.handleToggleButtonClick);
+  setPressedState() {
+    if (this.$fastController.isConnected) {
+      const ariaPressed = `${this.mixed ? "mixed" : !!this.pressed}`;
+      this.elementInternals.ariaPressed = ariaPressed;
+      this.setAttribute("aria-pressed", ariaPressed);
+    }
   }
 }
 __decorateClass([attr({
-  attribute: "checked",
   mode: "boolean"
-})], ToggleButton.prototype, "checkedAttribute", 2);
-__decorateClass([observable], ToggleButton.prototype, "defaultChecked", 2);
-__decorateClass([observable], ToggleButton.prototype, "checked", 2);
+})], ToggleButton.prototype, "pressed", 2);
 __decorateClass([attr({
-  attribute: "current-checked",
   mode: "boolean"
-})], ToggleButton.prototype, "currentChecked", 2);
+})], ToggleButton.prototype, "mixed", 2);
 
 const ToggleButtonAppearance = ButtonAppearance;
 const ToggleButtonShape = ButtonShape;
@@ -9912,18 +10051,15 @@ const ToggleButtonSize = ButtonSize;
 const template = buttonTemplate$1();
 
 const styles = css`
-  ${styles$p}
+  ${styles$m}
 
-  :host([aria-pressed="true"]) .control{border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host([aria-pressed='true']:hover) .control{border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host([aria-pressed='true']:active) .control{border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host([aria-pressed='true'][appearance='primary']) .control{border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host([aria-pressed='true'][appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([aria-pressed='true'][appearance='primary']:active) .control{background-color:${colorBrandBackgroundPressed}}:host([aria-pressed='true'][appearance='subtle']) .control{border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([aria-pressed='true'][appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host([aria-pressed='true'][appearance='subtle']:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host([aria-pressed='true'][appearance='outline']) .control,:host([aria-pressed='true'][appearance='transparent']) .control{background-color:${colorTransparentBackgroundSelected}}:host([aria-pressed='true'][appearance='outline']:hover) .control,:host([aria-pressed='true'][appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([aria-pressed='true'][appearance='outline']:active) .control,:host([aria-pressed='true'][appearance='transparent']:active) .control{background-color:${colorTransparentBackgroundPressed}}:host([aria-pressed='true'][appearance='transparent']) .control{border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host([aria-pressed='true'][appearance='transparent']:hover) .control{color:${colorNeutralForeground2BrandHover}}:host([aria-pressed='true'][appearance='transparent']:active) .control{color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([aria-pressed='true']) .control,:host([aria-pressed='true'][appearance='primary']) .control,:host([aria-pressed='true'][appearance='subtle']) .control,:host([aria-pressed='true'][appearance='outline']) .control,:host([aria-pressed='true'][appearance='transparent']) .control,:host([aria-pressed='true'][appearance='transparent']) .control{background:SelectedItem;color:SelectedItemText}`));
+  :host([aria-pressed='true']){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host([aria-pressed='true']:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host([aria-pressed='true']:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host([aria-pressed='true'][appearance='primary']){border-color:transparent;background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host([aria-pressed='true'][appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([aria-pressed='true'][appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host([aria-pressed='true'][appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([aria-pressed='true'][appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host([aria-pressed='true'][appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host([aria-pressed='true'][appearance='outline']:hover),:host([aria-pressed='true'][appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host([aria-pressed='true'][appearance='outline']:active),:host([aria-pressed='true'][appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host([aria-pressed='true'][appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host([aria-pressed='true'][appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host([aria-pressed='true'][appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([aria-pressed='true']),:host([aria-pressed='true'][appearance='primary']),:host([aria-pressed='true'][appearance='subtle']),:host([aria-pressed='true'][appearance='outline']),:host([aria-pressed='true'][appearance='transparent']){background:SelectedItem;color:SelectedItemText}`));
 
 const definition = ToggleButton.compose({
   name: `${FluentDesignSystem.prefix}-toggle-button`,
   template,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  styles
 });
 
 const tokenNames = Object.keys(tokens);
@@ -9938,4 +10074,4 @@ const setThemeFor = (element, theme) => {
   }
 };
 
-export { Accordion, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$q as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$q as AnchorButtonTemplate, AnchorTarget, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$p as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$n as AvatarStyles, template$p as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$o as BadgeDefinition, BadgeShape, BadgeSize, styles$m as BadgeStyles, template$o as BadgeTemplate, BaseTabs, Button, ButtonAppearance, definition$n as ButtonDefinition, ButtonShape, ButtonSize, styles$p as ButtonStyles, template$n as ButtonTemplate, ButtonType, Checkbox, definition$m as CheckboxDefinition, CheckboxLabelPosition, CheckboxShape, CheckboxSize, styles$l as CheckboxStyles, template$m as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$l as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$k as CompoundButtonStyles, template$l as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$k as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$j as CounterBadgeStyles, template$k as CounterBadgeTemplate, DelegatesARIAButton, DelegatesARIALink, DelegatesARIATextbox, Dialog, definition$j as DialogDefinition, styles$i as DialogStyles, template$j as DialogTemplate, Divider, DividerAlignContent, DividerAppearance, definition$i as DividerDefinition, DividerOrientation, DividerRole, styles$h as DividerStyles, template$i as DividerTemplate, FluentDesignSystem, Image, definition$h as ImageDefinition, ImageFit, ImageShape, styles$g as ImageStyles, template$h as ImageTemplate, Label, definition$g as LabelDefinition, styles$f as LabelStyles, template$g as LabelTemplate, Menu, MenuButton, MenuButtonAppearance, definition$e as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$p as MenuButtonStyles, template$e as MenuButtonTemplate, definition$f as MenuDefinition, MenuItem, definition$d as MenuItemDefinition, MenuItemRole, styles$d as MenuItemStyles, template$d as MenuItemTemplate, MenuList, definition$c as MenuListDefinition, styles$c as MenuListStyles, template$c as MenuListTemplate, styles$e as MenuStyles, template$f as MenuTemplate, ProgressBar, definition$b as ProgressBarDefinition, ProgressBarShape, styles$b as ProgressBarStyles, template$b as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$a as RadioDefinition, RadioGroup, definition$9 as RadioGroupDefinition, styles$9 as RadioGroupStyles, template$9 as RadioGroupTemplate, styles$a as RadioStyles, template$a as RadioTemplate, Slider, definition$8 as SliderDefinition, SliderMode, SliderOrientation, SliderSize, styles$8 as SliderStyles, template$8 as SliderTemplate, Spinner, SpinnerAppearance, definition$7 as SpinnerDefinition, SpinnerSize, styles$7 as SpinnerStyles, template$7 as SpinnerTemplate, Switch, definition$6 as SwitchDefinition, SwitchLabelPosition, styles$6 as SwitchStyles, template$6 as SwitchTemplate, Tab, definition$4 as TabDefinition, TabPanel, definition$3 as TabPanelDefinition, styles$3 as TabPanelStyles, template$3 as TabPanelTemplate, styles$4 as TabStyles, template$4 as TabTemplate, Tabs, TabsAppearance, definition$5 as TabsDefinition, TabsOrientation, TabsSize, styles$5 as TabsStyles, template$5 as TabsTemplate, Text, TextAlign, definition$2 as TextDefinition, TextFieldType, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$1 as TextInputDefinition, styles$1 as TextInputStyles, template$1 as TextInputTemplate, TextSize, styles$2 as TextStyles, template$2 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles as ToggleButtonStyles, template as ToggleButtonTemplate, definition$s as accordionDefinition, definition$r as accordionItemDefinition, styles$q as accordionItemStyles, template$r as accordionItemTemplate, styles$r as accordionStyles, template$s as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, durationFast, durationFaster, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, roleForMenuItem, setTheme, setThemeFor, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin };
+export { Accordion, AccordionItem, AccordionItemExpandIconPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$q as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$q as AnchorButtonTemplate, AnchorTarget, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$p as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$o as AvatarStyles, template$p as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$o as BadgeDefinition, BadgeShape, BadgeSize, styles$n as BadgeStyles, template$o as BadgeTemplate, BaseTabs, Button, ButtonAppearance, definition$n as ButtonDefinition, ButtonFormTarget, ButtonShape, ButtonSize, styles$m as ButtonStyles, template$n as ButtonTemplate, ButtonType, Checkbox, definition$m as CheckboxDefinition, CheckboxLabelPosition, CheckboxShape, CheckboxSize, styles$l as CheckboxStyles, template$m as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$l as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$k as CompoundButtonStyles, template$l as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$k as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$j as CounterBadgeStyles, template$k as CounterBadgeTemplate, DelegatesARIALink, DelegatesARIATextbox, Dialog, definition$j as DialogDefinition, styles$i as DialogStyles, template$j as DialogTemplate, Divider, DividerAlignContent, DividerAppearance, definition$i as DividerDefinition, DividerOrientation, DividerRole, styles$h as DividerStyles, template$i as DividerTemplate, FluentDesignSystem, Image, definition$h as ImageDefinition, ImageFit, ImageShape, styles$g as ImageStyles, template$h as ImageTemplate, Label, definition$g as LabelDefinition, styles$f as LabelStyles, template$g as LabelTemplate, MatchMediaBehavior, MatchMediaStyleSheetBehavior, Menu, MenuButton, MenuButtonAppearance, definition$e as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$m as MenuButtonStyles, template$e as MenuButtonTemplate, definition$f as MenuDefinition, MenuItem, definition$d as MenuItemDefinition, MenuItemRole, styles$d as MenuItemStyles, template$d as MenuItemTemplate, MenuList, definition$c as MenuListDefinition, styles$c as MenuListStyles, template$c as MenuListTemplate, styles$e as MenuStyles, template$f as MenuTemplate, ProgressBar, definition$b as ProgressBarDefinition, ProgressBarShape, styles$b as ProgressBarStyles, template$b as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$a as RadioDefinition, RadioGroup, definition$9 as RadioGroupDefinition, styles$9 as RadioGroupStyles, template$9 as RadioGroupTemplate, styles$a as RadioStyles, template$a as RadioTemplate, Slider, definition$8 as SliderDefinition, SliderMode, SliderOrientation, SliderSize, styles$8 as SliderStyles, template$8 as SliderTemplate, Spinner, SpinnerAppearance, definition$7 as SpinnerDefinition, SpinnerSize, styles$7 as SpinnerStyles, template$7 as SpinnerTemplate, Switch, definition$6 as SwitchDefinition, SwitchLabelPosition, styles$6 as SwitchStyles, template$6 as SwitchTemplate, Tab, definition$4 as TabDefinition, TabPanel, definition$3 as TabPanelDefinition, styles$3 as TabPanelStyles, template$3 as TabPanelTemplate, styles$4 as TabStyles, template$4 as TabTemplate, Tabs, TabsAppearance, definition$5 as TabsDefinition, TabsOrientation, TabsSize, styles$5 as TabsStyles, template$5 as TabsTemplate, Text, TextAlign, definition$2 as TextDefinition, TextFieldType, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$1 as TextInputDefinition, styles$1 as TextInputStyles, template$1 as TextInputTemplate, TextSize, styles$2 as TextStyles, template$2 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles as ToggleButtonStyles, template as ToggleButtonTemplate, definition$s as accordionDefinition, definition$r as accordionItemDefinition, styles$q as accordionItemStyles, template$r as accordionItemTemplate, styles$r as accordionStyles, template$s as accordionTemplate, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackgroundDisabled, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundStatic, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeDisabled, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, darkModeStylesheetBehavior, display, durationFast, durationFaster, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, forcedColorsStylesheetBehavior, getDirection, hidden, lightModeStylesheetBehavior, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, roleForMenuItem, setTheme, setThemeFor, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin };