@fluentui/web-components 3.0.0-alpha.26 → 3.0.0-alpha.27

package/dist/web-components.js

@@ -8922,6 +8922,151 @@ function textFieldTemplate(options = {}) {
   })}></slot></label><div class="root" part="root">${startSlotTemplate(options)}<input class="control" part="control" id="control" @input="${x => x.handleTextInput()}" @change="${x => x.handleChange()}" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" name="${x => x.name}" minlength="${x => x.minlength}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" ?spellcheck="${x => x.spellcheck}" :value="${x => x.value}" type="${x => x.type}" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")} />${endSlotTemplate(options)}</div>`;
 }
 
+/**
+ * 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
@@ -9803,7 +9948,7 @@ const chevronRight20Filled = html.partial(`<svg
 >
   <path
     d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`);
 const chevronDown20Filled = html.partial(`<svg
@@ -9816,7 +9961,7 @@ const chevronDown20Filled = html.partial(`<svg
 >
   <path
     d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`);
 /**
@@ -9984,7 +10129,8 @@ const styles$n = css`
   ${display('inline-flex')}
 
   :host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle}:host .control{display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer}.content{display:inherit}:host(:hover) .control{background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active) .control{background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host .control:focus-visible{border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]) .control{min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS}}:host([size='small']) .control{min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]) .control{min-width:24px;max-width:24px}:host([size='large']) .control{min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]) .control{min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']) .control,:host([shape='circular']) .control:focus-visible{border-radius:${borderRadiusCircular}}:host([shape='square']) .control,:host([shape='square']) .control:focus-visible{border-radius:${borderRadiusNone}}:host([appearance='primary']) .control{background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover) .control{background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover) .control,:host([appearance='primary']:hover:active) .control{border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active) .control{background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']) .control:focus-visible{border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"])) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover) .control,:host(is:([disabled][appearance='primary'],[disabled-focusabale][appearance="primary"]):hover:active) .control{border-color:transparent}:host([appearance='outline']) .control{background-color:${colorTransparentBackground}}:host([appearance='outline']:hover) .control{background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active) .control{background-color:${colorTransparentBackgroundPressed}}:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"])) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover) .control,:host(is:([disabled][appearance='outline'],[disabled-focusabale][appearance="outline"]):hover:active) .control{background-color:${colorTransparentBackground}}:host([appearance='subtle']) .control{background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover) .control{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active) .control{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"])) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover) .control,:host(is:([disabled][appearance='subtle'],[disabled-focusabale][appearance="subtle"]):hover:active) .control{background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control{background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) .control{background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active) .control{background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']) .control,:host([appearance='transparent']:hover) .control,:host([appearance='transparent']:hover:active) .control{border-color:transparent}:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"])) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover) .control,:host(is:([disabled][appearance='transparent'],[disabled-focusabale][appearance="transparent"]):hover:active) .control{border-color:transparent;background-color:${colorTransparentBackground}}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover) .control,:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active)
-    .control{background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`;
+    .control{background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([appearance='transparent']:hover) .control{border-color:Highlight}`));
 
 // Need to support icon hover styles
 const styles$m = css`
@@ -10513,7 +10659,7 @@ const badgeFilledStyles = css.partial`
 
   :host([color='warning']) {
     background-color: ${colorPaletteYellowBackground3};
-    color: ${colorNeutralForeground1};
+    color: ${colorNeutralForeground1Static};
   }
 `;
 /**
@@ -10522,7 +10668,7 @@ const badgeFilledStyles = css.partial`
  */
 const badgeGhostStyles = css.partial`
   :host([appearance='ghost']) {
-    color: ${colorBrandBackground};
+    color: ${colorBrandForeground1};
     background-color: initial;
   }
 
@@ -11115,7 +11261,8 @@ const template$h = dividerTemplate();
 const styles$g = 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}}`;
+  :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}`));
 
 /**
  * The Fluent Divider Element
@@ -11466,7 +11613,8 @@ const styles$b = css`
       to right,${colorBrandBackground2} 0%,${colorCompoundBrandBackground} 50%,${colorBrandBackground2}
     );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:40%;animation:indeterminate-1 3s infinite}.indeterminate-indicator-2{position:absolute;opacity:0;height:100%;background:linear-gradient(
       to right,${colorBrandBackground2} 0%,${colorCompoundBrandBackground} 50%,${colorBrandBackground2}
-    );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:60%;animation:indeterminate-2 3s infinite}@keyframes indeterminate-1{0%{opacity:1;transform:translateX(-100%)}70%{opacity:1;transform:translateX(300%)}70.01%{opacity:0}100%{opacity:0;transform:translateX(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translateX(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translateX(-150%)}100%{transform:translateX(166.66%);opacity:1}}`;
+    );border-radius:${borderRadiusMedium};animation-timing-function:cubic-bezier(0.4,0,0.6,1);width:60%;animation:indeterminate-2 3s infinite}@keyframes indeterminate-1{0%{opacity:1;transform:translateX(-100%)}70%{opacity:1;transform:translateX(300%)}70.01%{opacity:0}100%{opacity:0;transform:translateX(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translateX(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translateX(-150%)}100%{transform:translateX(166.66%);opacity:1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .progress{background-color:HighlightText}.determinate,:host([validation-state='success']) .determinate,:host([validation-state='warning']) .determinate,:host([validation-state='error']) .determinate,:host([validation-state='success']) ..indeterminate-indicator-1,:host([validation-state='success']) ..indeterminate-indicator-2,:host([validation-state='warning']) .indeterminate-indicator-1,:host([validation-state='warning']) .indeterminate-indicator-2,:host([validation-state='error']) .indeterminate-indicator-1,:host([validation-state='error']) .indeterminate-indicator-2{background-color:Highlight}`));
 
 const template$b = progressTemplate({
   indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
@@ -11499,7 +11647,8 @@ class Radio extends FASTRadio {}
 const styles$a = css`
   ${display('inline-grid')}
 
-  :host{grid-auto-flow:column;grid-template-columns:max-content;gap:${spacingHorizontalXS};align-items:center;height:32px;cursor:pointer;outline:none;position:relative;user-select:none;color:blue;color:var(--state-color,${colorNeutralForeground3});padding-inline-end:${spacingHorizontalS};--control-border-color:${colorNeutralStrokeAccessible};--checked-indicator-background-color:${colorCompoundBrandForeground1};--state-color:${colorNeutralForeground3}}:host([disabled]){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}.label{cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label__hidden{display:none}.control{box-sizing:border-box;align-items:center;border:1px solid var(--control-border-color,${colorNeutralStrokeAccessible});border-radius:${borderRadiusCircular};display:flex;height:16px;justify-content:center;margin:${spacingVerticalS} ${spacingHorizontalS};position:relative;width:16px;justify-self:center}.checked-indicator{border-radius:${borderRadiusCircular};height:10px;opacity:0;width:10px}:host([aria-checked='false']:hover) .control{color:${colorNeutralForeground2}}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host(:hover) .control{border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .control{border-color:${colorNeutralStrokeAccessiblePressed}}:host([aria-checked='true']) .checked-indicator{opacity:1}:host([aria-checked='true']) .control{border-color:var(--control-border-color,${colorNeutralStrokeAccessible})}:host([aria-checked='true']) .checked-indicator{background-color:var(--checked-indicator-background-color,${colorCompoundBrandForeground1})}:host([aria-checked='true']:hover) .control{border-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:hover) .checked-indicator{background-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:active) .control{border-color:${colorCompoundBrandStrokePressed}}:host([aria-checked='true']:active) .checked-indicator{background:${colorCompoundBrandForeground1Pressed}}:host([disabled]){color:${colorNeutralForegroundDisabled};pointer-events:none}:host([disabled]) .control{pointer-events:none;border-color:${colorNeutralForegroundDisabled}}:host([disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}`;
+  :host{grid-auto-flow:column;grid-template-columns:max-content;gap:${spacingHorizontalXS};align-items:center;height:32px;cursor:pointer;outline:none;position:relative;user-select:none;color:blue;color:var(--state-color,${colorNeutralForeground3});padding-inline-end:${spacingHorizontalS};--control-border-color:${colorNeutralStrokeAccessible};--checked-indicator-background-color:${colorCompoundBrandForeground1};--state-color:${colorNeutralForeground3}}:host([disabled]){--control-border-color:${colorNeutralForegroundDisabled};--checked-indicator-background-color:${colorNeutralForegroundDisabled};--state-color:${colorNeutralForegroundDisabled}}.label{cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300}}.label__hidden{display:none}.control{box-sizing:border-box;align-items:center;border:1px solid var(--control-border-color,${colorNeutralStrokeAccessible});border-radius:${borderRadiusCircular};display:flex;height:16px;justify-content:center;margin:${spacingVerticalS} ${spacingHorizontalS};position:relative;width:16px;justify-self:center}.checked-indicator{border-radius:${borderRadiusCircular};height:10px;opacity:0;width:10px}:host([aria-checked='false']:hover) .control{color:${colorNeutralForeground2}}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}:host(:hover) .control{border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .control{border-color:${colorNeutralStrokeAccessiblePressed}}:host([aria-checked='true']) .checked-indicator{opacity:1}:host([aria-checked='true']) .control{border-color:var(--control-border-color,${colorNeutralStrokeAccessible})}:host([aria-checked='true']) .checked-indicator{background-color:var(--checked-indicator-background-color,${colorCompoundBrandForeground1})}:host([aria-checked='true']:hover) .control{border-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:hover) .checked-indicator{background-color:${colorCompoundBrandStrokeHover}}:host([aria-checked='true']:active) .control{border-color:${colorCompoundBrandStrokePressed}}:host([aria-checked='true']:active) .checked-indicator{background:${colorCompoundBrandForeground1Pressed}}:host([disabled]){color:${colorNeutralForegroundDisabled};pointer-events:none}:host([disabled]) .control{pointer-events:none;border-color:${colorNeutralForegroundDisabled}}:host([disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host .control{border-color:InactiveBorder}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='true']:active) .checked-indicator,:host([aria-checked='true']:hover) .checked-indicator{background-color:Highlight;border-color:ActiveBorder}`));
 
 const template$a = radioTemplate({
   checkedIndicator: html`<div part="checked-indicator" class="checked-indicator"></div>`
@@ -11626,7 +11775,8 @@ const SliderSize = {
 const styles$8 = css`
   ${display('inline-grid')} :host{--thumb-size:18px;--thumb-padding:3px;--thumb-translate:calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);--track-overhang:-2px;--track-width:4px;--fast-slider-height:calc(var(--thumb-size) * 10);--slider-direction:90deg;align-items:center;box-sizing:border-box;outline:none;cursor:pointer;user-select:none;border-radius:${borderRadiusSmall};touch-action:pan-y;min-width:calc(var(--thumb-size) * 1px);width:100%}:host([size='small']){--thumb-size:14px;--track-width:2px;--thumb-padding:3px}:host([orientation='vertical']){--slider-direction:0deg;height:160px;min-height:var(--thumb-size);touch-action:pan-x;padding:8px 0;width:auto;min-width:auto}:host([disabled]:hover){cursor:initial}:host(:focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.thumb-cursor:focus{outline:0}.thumb-container{position:absolute;height:var(--thumb-size);width:var(--thumb-size);transition:all 0.2s ease}.thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.5))}:host([size='small']) .thumb-container{transform:translateX(calc(var(--thumb-size) * 0.5)) translateY(calc(var(--thumb-translate) * -1.35))}:host([orientation='vertical']) .thumb-container{transform:translateX(calc(var(--thumb-translate) * -1.5)) translateY(calc(var(--thumb-size) * -0.5))}:host([orientation='vertical'][size='small']) .thumb-container{transform:translateX(calc(var(--thumb-translate) * -1.35)) translateY(calc(var(--thumb-size) * -0.5))}.thumb-cursor{height:var(--thumb-size);width:var(--thumb-size);background-color:${colorBrandBackground};border-radius:${borderRadiusCircular};box-shadow:inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1},0 0 0 1px ${colorNeutralStroke1}}.thumb-cursor:hover{background-color:${colorCompoundBrandBackgroundHover}}.thumb-cursor:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([disabled]) .thumb-cursor{background-color:${colorNeutralForegroundDisabled};box-shadow:inset 0 0 0 var(--thumb-padding) ${colorNeutralBackground1},0 0 0 1px ${colorNeutralStrokeDisabled}}.positioning-region{position:relative;display:grid}:host([orientation='horizontal']) .positioning-region{margin:0 8px;grid-template-rows:var(--thumb-size) var(--thumb-size)}:host([orientation='vertical']) .positioning-region{margin:8px 0;height:100%;grid-template-columns:var(--thumb-size) var(--thumb-size)}.track{align-self:start;position:absolute;background-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};overflow:hidden}:host([step]) .track::after{content:'';position:absolute;border-radius:${borderRadiusMedium};width:100%;inset:0 2px;background-image:repeating-linear-gradient(
       var(--slider-direction),#0000 0%,#0000 calc(var(--step-rate) - 1px),${colorNeutralBackground1} calc(var(--step-rate) - 1px),${colorNeutralBackground1} var(--step-rate)
-    )}:host([orientation='vertical'][step]) .track::after{inset:-2px 0}:host([disabled]) .track{background-color:${colorNeutralBackgroundDisabled}}:host([orientation='horizontal']) .track{right:var(--track-overhang);left:var(--track-overhang);align-self:start;height:var(--track-width);grid-row:2 / auto}:host([orientation='vertical']) .track{top:var(--track-overhang);bottom:var(--track-overhang);width:var(--track-width);height:100%;grid-column:2 / auto}.track-start{background-color:${colorCompoundBrandBackground};position:absolute;height:100%;left:0;border-radius:${borderRadiusMedium}}:host([disabled]) .track-start{background-color:${colorNeutralForegroundDisabled}}:host(:hover) .track-start{background-color:${colorCompoundBrandBackgroundHover}}:host([disabled]:hover) .track-start{background-color:${colorNeutralForegroundDisabled}}.track-start:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([orientation='vertical']) .track-start{height:auto;width:100%;bottom:0}`;
+    )}:host([orientation='vertical'][step]) .track::after{inset:-2px 0}:host([disabled]) .track{background-color:${colorNeutralBackgroundDisabled}}:host([orientation='horizontal']) .track{right:var(--track-overhang);left:var(--track-overhang);align-self:start;height:var(--track-width);grid-row:2 / auto}:host([orientation='vertical']) .track{top:var(--track-overhang);bottom:var(--track-overhang);width:var(--track-width);height:100%;grid-column:2 / auto}.track-start{background-color:${colorCompoundBrandBackground};position:absolute;height:100%;left:0;border-radius:${borderRadiusMedium}}:host([disabled]) .track-start{background-color:${colorNeutralForegroundDisabled}}:host(:hover) .track-start{background-color:${colorCompoundBrandBackgroundHover}}:host([disabled]:hover) .track-start{background-color:${colorNeutralForegroundDisabled}}.track-start:active{background-color:${colorCompoundBrandBackgroundPressed}}:host([orientation='vertical']) .track-start{height:auto;width:100%;bottom:0}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .track:hover,.track:active,.track{background:WindowText}.thumb-cursor:hover,.thumb-cursor:active,.thumb-cursor{background:ButtonText}:host(:hover) .track-start,.track-start:active,.track-start{background:Highlight}`));
 
 const template$8 = sliderTemplate({
   thumb: `<div class="thumb-cursor" tabindex="0"></div>`
@@ -11739,7 +11889,8 @@ const template$6 = switchTemplate({
 const styles$6 = css`
   ${display('inline-flex')}
 
-  :host{align-items:center;flex-direction:row-reverse;outline:none;user-select:none;contain:content}:host([label-position='before']){flex-direction:row}:host([label-position='above']){flex-direction:column;align-items:flex-start}:host([disabled]) .label,:host([readonly]) .label,:host([readonly]) .switch,:host([disabled]) .switch{cursor:not-allowed}.label{position:relative;color:${colorNeutralForeground1};line-height:${lineHeightBase300};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};font-family:${fontFamilyBase};padding:${spacingVerticalXS} ${spacingHorizontalXS};cursor:pointer}.label__hidden{display:none}.switch{display:flex;align-items:center;padding:0 ${spacingHorizontalXXS};box-sizing:border-box;width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};outline:none;cursor:pointer;margin:${spacingVerticalS} ${spacingHorizontalS}}:host(:hover) .switch{background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .switch{border-color:${colorNeutralStrokeAccessiblePressed}}:host([disabled]) .switch,:host([readonly]) .switch{border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host([aria-checked='true']) .switch{background:${colorCompoundBrandBackground}}:host([aria-checked='true']:hover) .switch{background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host([aria-checked='true']:active) .switch{background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host([aria-checked='true'][disabled]) .switch{background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:transform}:host([aria-checked='true']) .checked-indicator{background-color:${colorNeutralForegroundInverted};transform:translateX(20px)}:host([aria-checked='true']:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host([aria-checked='true']:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host([disabled]) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host([aria-checked='true'][disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}`;
+  :host{align-items:center;flex-direction:row-reverse;outline:none;user-select:none;contain:content}:host([label-position='before']){flex-direction:row}:host([label-position='above']){flex-direction:column;align-items:flex-start}:host([disabled]) .label,:host([readonly]) .label,:host([readonly]) .switch,:host([disabled]) .switch{cursor:not-allowed}.label{position:relative;color:${colorNeutralForeground1};line-height:${lineHeightBase300};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};font-family:${fontFamilyBase};padding:${spacingVerticalXS} ${spacingHorizontalXS};cursor:pointer}.label__hidden{display:none}.switch{display:flex;align-items:center;padding:0 ${spacingHorizontalXXS};box-sizing:border-box;width:40px;height:20px;background-color:${colorTransparentBackground};border:1px solid ${colorNeutralStrokeAccessible};border-radius:${borderRadiusCircular};outline:none;cursor:pointer;margin:${spacingVerticalS} ${spacingHorizontalS}}:host(:hover) .switch{background:none;border-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .switch{border-color:${colorNeutralStrokeAccessiblePressed}}:host([disabled]) .switch,:host([readonly]) .switch{border:1px solid ${colorNeutralStrokeDisabled};background-color:none;pointer:default}:host([aria-checked='true']) .switch{background:${colorCompoundBrandBackground}}:host([aria-checked='true']:hover) .switch{background:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandBackgroundHover}}:host([aria-checked='true']:active) .switch{background:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandBackgroundPressed}}:host([aria-checked='true'][disabled]) .switch{background:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}.checked-indicator{height:14px;width:14px;border-radius:50%;background-color:${colorNeutralForeground3};transition-duration:${durationNormal};transition-timing-function:${curveEasyEase};transition-property:transform}:host([aria-checked='true']) .checked-indicator{background-color:${colorNeutralForegroundInverted};transform:translateX(20px)}:host([aria-checked='true']:hover) .checked-indicator{background:${colorNeutralForegroundInvertedHover}}:host([aria-checked='true']:active) .checked-indicator{background:${colorNeutralForegroundInvertedPressed}}:host(:hover) .checked-indicator{background-color:${colorNeutralForeground3Hover}}:host(:active) .checked-indicator{background-color:${colorNeutralForeground3Pressed}}:host([disabled]) .checked-indicator,:host([readonly]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host([aria-checked='true'][disabled]) .checked-indicator{background:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .switch{border-color:InactiveBorder}:host([aria-checked='true']) .switch,:host([aria-checked='true']:active) .switch,:host([aria-checked='true']:hover) .switch{background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host([aria-checked='true']) .checked-indicator,:host([aria-checked='true']:hover) .checked-indicator,:host([aria-checked='true']:active) .checked-indicator{background-color:ButtonFace}`));
 
 /**
  * The Fluent Switch Element.
@@ -11949,7 +12100,8 @@ const template$4 = tabTemplate({});
 const styles$4 = css`
   ${display('inline-flex')}
 
-  :host{position:relative;flex-direction:column;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-size:${fontSizeBase300};color:${colorNeutralForeground2};fill:currentcolor;grid-row:1;padding:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium}}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:${colorNeutralForeground1};font-weight:${fontWeightSemibold}}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:${lineHeightBase300};font-weight:${fontWeightSemibold}}:host([aria-selected='true'])::after{background-color:${colorCompoundBrandStroke};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:${colorNeutralStroke1Hover};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:${colorNeutralForegroundDisabled}}::slotted([slot='start']),::slotted([slot='end']){display:flex}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}:host([disabled]){cursor:not-allowed;fill:${colorNeutralForegroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}`;
+  :host{position:relative;flex-direction:column;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-size:${fontSizeBase300};color:${colorNeutralForeground2};fill:currentcolor;grid-row:1;padding:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium}}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:${colorNeutralForeground1};font-weight:${fontWeightSemibold}}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:${lineHeightBase300};font-weight:${fontWeightSemibold}}:host([aria-selected='true'])::after{background-color:${colorCompoundBrandStroke};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:${colorNeutralStroke1Hover};border-radius:${borderRadiusCircular};content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:${colorNeutralForegroundDisabled}}::slotted([slot='start']),::slotted([slot='end']){display:flex}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}:host([disabled]){cursor:not-allowed;fill:${colorNeutralForegroundDisabled};color:${colorNeutralForegroundDisabled}}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:${borderRadiusSmall};box-shadow:0 0 0 3px ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([aria-selected='true'])::after{background-color:Highlight}`));
 
 const definition$4 = Tab.compose({
   name: `${FluentDesignSystem.prefix}-tab`,
@@ -12307,7 +12459,8 @@ const template = buttonTemplate$1();
 const styles = css`
   ${styles$n}
 
-  :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}}`;
+  :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}`));
 
 /**
  * The Fluent Toggle Button Element. Implements {@link @microsoft/fast-foundation#Button },