@fluentui/web-components 2.4.0 → 2.5.2

package/dist/web-components.js

@@ -22314,6 +22314,19 @@ function neutralLayer4$1(palette, baseLayerLuminance, layerDelta) {
   return palette.get(neutralLayer1Index(palette, baseLayerLuminance) + layerDelta * -1 * 3);
 }
 
+/** @public */
+const StandardFontWeight = {
+  Thin: 100,
+  ExtraLight: 200,
+  Light: 300,
+  Normal: 400,
+  Medium: 500,
+  SemiBold: 600,
+  Bold: 700,
+  ExtraBold: 800,
+  Black: 900
+};
+
 const {
   create
 } = DesignToken;
@@ -22361,61 +22374,111 @@ const focusStrokeWidth = create('focus-stroke-width').withDefault(2); // Typogra
 
 /** @public */
 
-const bodyFont = create('body-font').withDefault('Segoe UI, sans-serif');
+const bodyFont = create('body-font').withDefault('"Segoe UI Variable", "Segoe UI", sans-serif');
+/** @public */
+
+const fontWeight = create('font-weight').withDefault(StandardFontWeight.Normal);
+
+function fontVariations(sizeToken) {
+  return element => {
+    const size = sizeToken.getValueFor(element);
+    const weight = fontWeight.getValueFor(element);
+
+    if (size.endsWith('px')) {
+      const px = Number.parseFloat(size.replace('px', ''));
+
+      if (px <= 12) {
+        return `"wght" ${weight}, "opsz" 8`;
+      } else if (px > 24) {
+        return `"wght" ${weight}, "opsz" 36`;
+      }
+    }
+
+    return `"wght" ${weight}, "opsz" 10.5`;
+  };
+}
 /** @public */
 
+
 const typeRampBaseFontSize = create('type-ramp-base-font-size').withDefault('14px');
 /** @public */
 
 const typeRampBaseLineHeight = create('type-ramp-base-line-height').withDefault('20px');
 /** @public */
 
+const typeRampBaseFontVariations = create('type-ramp-base-font-variations').withDefault(fontVariations(typeRampBaseFontSize));
+/** @public */
+
 const typeRampMinus1FontSize = create('type-ramp-minus-1-font-size').withDefault('12px');
 /** @public */
 
 const typeRampMinus1LineHeight = create('type-ramp-minus-1-line-height').withDefault('16px');
 /** @public */
 
+const typeRampMinus1FontVariations = create('type-ramp-minus-1-font-variations').withDefault(fontVariations(typeRampMinus1FontSize));
+/** @public */
+
 const typeRampMinus2FontSize = create('type-ramp-minus-2-font-size').withDefault('10px');
 /** @public */
 
 const typeRampMinus2LineHeight = create('type-ramp-minus-2-line-height').withDefault('14px');
 /** @public */
 
+const typeRampMinus2FontVariations = create('type-ramp-minus-2-font-variations').withDefault(fontVariations(typeRampMinus2FontSize));
+/** @public */
+
 const typeRampPlus1FontSize = create('type-ramp-plus-1-font-size').withDefault('16px');
 /** @public */
 
 const typeRampPlus1LineHeight = create('type-ramp-plus-1-line-height').withDefault('22px');
 /** @public */
 
+const typeRampPlus1FontVariations = create('type-ramp-plus-1-font-variations').withDefault(fontVariations(typeRampPlus1FontSize));
+/** @public */
+
 const typeRampPlus2FontSize = create('type-ramp-plus-2-font-size').withDefault('20px');
 /** @public */
 
 const typeRampPlus2LineHeight = create('type-ramp-plus-2-line-height').withDefault('26px');
 /** @public */
 
+const typeRampPlus2FontVariations = create('type-ramp-plus-2-font-variations').withDefault(fontVariations(typeRampPlus2FontSize));
+/** @public */
+
 const typeRampPlus3FontSize = create('type-ramp-plus-3-font-size').withDefault('24px');
 /** @public */
 
 const typeRampPlus3LineHeight = create('type-ramp-plus-3-line-height').withDefault('32px');
 /** @public */
 
+const typeRampPlus3FontVariations = create('type-ramp-plus-3-font-variations').withDefault(fontVariations(typeRampPlus3FontSize));
+/** @public */
+
 const typeRampPlus4FontSize = create('type-ramp-plus-4-font-size').withDefault('28px');
 /** @public */
 
 const typeRampPlus4LineHeight = create('type-ramp-plus-4-line-height').withDefault('36px');
 /** @public */
 
+const typeRampPlus4FontVariations = create('type-ramp-plus-4-font-variations').withDefault(fontVariations(typeRampPlus4FontSize));
+/** @public */
+
 const typeRampPlus5FontSize = create('type-ramp-plus-5-font-size').withDefault('32px');
 /** @public */
 
 const typeRampPlus5LineHeight = create('type-ramp-plus-5-line-height').withDefault('40px');
 /** @public */
 
+const typeRampPlus5FontVariations = create('type-ramp-plus-5-font-variations').withDefault(fontVariations(typeRampPlus5FontSize));
+/** @public */
+
 const typeRampPlus6FontSize = create('type-ramp-plus-6-font-size').withDefault('40px');
 /** @public */
 
-const typeRampPlus6LineHeight = create('type-ramp-plus-6-line-height').withDefault('52px'); // Color recipe values
+const typeRampPlus6LineHeight = create('type-ramp-plus-6-line-height').withDefault('52px');
+/** @public */
+
+const typeRampPlus6FontVariations = create('type-ramp-plus-6-font-variations').withDefault(fontVariations(typeRampPlus6FontSize)); // Color recipe values
 
 /** @public */
 
@@ -23197,8 +23260,91 @@ const neutralOutlineActive = neutralStrokeActive;
 
 const neutralOutlineFocus = neutralStrokeFocus;
 
+/** @public */
+
+const typeRampBase = cssPartial`
+  font-family: ${bodyFont};
+  font-size: ${typeRampBaseFontSize};
+  line-height: ${typeRampBaseLineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampBaseFontVariations};
+`;
+/** @public */
+
+const typeRampMinus1 = cssPartial`
+  font-family: ${bodyFont};
+  font-size: ${typeRampMinus1FontSize};
+  line-height: ${typeRampMinus1LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampMinus1FontVariations};
+`;
+/** @public */
+
+const typeRampMinus2 = cssPartial`
+  font-family: ${bodyFont};
+  font-size: ${typeRampMinus2FontSize};
+  line-height: ${typeRampMinus2LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampMinus2FontVariations};
+`;
+/** @public */
+
+const typeRampPlus1 = cssPartial`
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus1FontSize};
+  line-height: ${typeRampPlus1LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus1FontVariations};
+`;
+/** @public */
+
+const typeRampPlus2 = cssPartial`
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus2FontSize};
+  line-height: ${typeRampPlus2LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus2FontVariations};
+`;
+/** @public */
+
+const typeRampPlus3 = cssPartial`
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus3FontSize};
+  line-height: ${typeRampPlus3LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus3FontVariations};
+`;
+/** @public */
+
+const typeRampPlus4 = cssPartial`
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus4FontSize};
+  line-height: ${typeRampPlus4LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus4FontVariations};
+`;
+/** @public */
+
+const typeRampPlus5 = cssPartial`
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus5FontSize};
+  line-height: ${typeRampPlus5LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus5FontVariations};
+`;
+/** @public */
+
+const typeRampPlus6 = cssPartial`
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus6FontSize};
+  line-height: ${typeRampPlus6LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus6FontVariations};
+`;
+
 const accordionStyles$1 = (context, definition) => css`
-    ${display('flex')} :host{box-sizing:border-box;flex-direction:column;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};gap:calc(${designUnit} * 1px)}`;
+    ${display('flex')} :host{box-sizing:border-box;flex-direction:column;${typeRampBase}
+      color:${neutralForegroundRest};gap:calc(${designUnit} * 1px)}`;
 
 /**
  * A formula to retrieve the control height.
@@ -23225,7 +23371,7 @@ const neutralFillStealthActiveOnNeutralFillLayerRest = DesignToken.create('neutr
   return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).active;
 });
 const accordionItemStyles$1 = (context, definition) => css`
-    ${display('flex')} :host{box-sizing:border-box;font-family:${bodyFont};flex-direction:column;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};background:${neutralFillLayerRest};color:${neutralForegroundRest};border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-radius:calc(${layerCornerRadius} * 1px)}.region{display:none;padding:calc(${designUnit} * 2 * 1px);background:${neutralFillLayerAltRest}}.heading{display:grid;position:relative;grid-template-columns:auto 1fr auto auto;align-items:center}.button{appearance:none;border:none;background:none;grid-column:2;grid-row:1;outline:none;margin:calc(${designUnit} * 3 * 1px) 0;padding:0 calc(${designUnit} * 2 * 1px);text-align:left;color:inherit;cursor:pointer;font-family:inherit}.button::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.button:${focusVisible}::before{outline:none;border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};border-radius:calc(${layerCornerRadius} * 1px);box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}:host(.expanded) .button:${focusVisible}::before{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.expanded) .region{display:block;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-bottom-left-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px);border-bottom-right-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px)}.icon{display:flex;align-items:center;justify-content:center;grid-column:4;pointer-events:none;background:${neutralFillStealthRestOnNeutralFillLayerRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;width:calc(${heightNumber} * 1px);height:calc(${heightNumber} * 1px);margin:calc(${designUnit} * 2 * 1px)}.heading:hover .icon{background:${neutralFillStealthHoverOnNeutralFillLayerRest}}.heading:active .icon{background:${neutralFillStealthActiveOnNeutralFillLayerRest}}slot[name='collapsed-icon']{display:flex}:host(.expanded) slot[name='collapsed-icon']{display:none}slot[name='expanded-icon']{display:none}:host(.expanded) slot[name='expanded-icon']{display:flex}.start{display:flex;align-items:center;padding-inline-start:calc(${designUnit} * 2 * 1px);justify-content:center;grid-column:1}.end{display:flex;align-items:center;justify-content:center;grid-column:3}.icon,.start,.end{position:relative}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('flex')} :host{box-sizing:border-box;${typeRampBase};flex-direction:column;background:${neutralFillLayerRest};color:${neutralForegroundRest};border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-radius:calc(${layerCornerRadius} * 1px)}.region{display:none;padding:calc(${designUnit} * 2 * 1px);background:${neutralFillLayerAltRest}}.heading{display:grid;position:relative;grid-template-columns:auto 1fr auto auto;align-items:center}.button{appearance:none;border:none;background:none;grid-column:2;grid-row:1;outline:none;margin:calc(${designUnit} * 3 * 1px) 0;padding:0 calc(${designUnit} * 2 * 1px);text-align:left;color:inherit;cursor:pointer;font:inherit}.button::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.button:${focusVisible}::before{outline:none;border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};border-radius:calc(${layerCornerRadius} * 1px);box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}:host(.expanded) .button:${focusVisible}::before{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.expanded) .region{display:block;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-bottom-left-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px);border-bottom-right-radius:calc((${layerCornerRadius} - ${strokeWidth}) * 1px)}.icon{display:flex;align-items:center;justify-content:center;grid-column:4;pointer-events:none;background:${neutralFillStealthRestOnNeutralFillLayerRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;width:calc(${heightNumber} * 1px);height:calc(${heightNumber} * 1px);margin:calc(${designUnit} * 2 * 1px)}.heading:hover .icon{background:${neutralFillStealthHoverOnNeutralFillLayerRest}}.heading:active .icon{background:${neutralFillStealthActiveOnNeutralFillLayerRest}}slot[name='collapsed-icon']{display:flex}:host(.expanded) slot[name='collapsed-icon']{display:none}slot[name='expanded-icon']{display:none}:host(.expanded) slot[name='expanded-icon']{display:flex}.start{display:flex;align-items:center;padding-inline-start:calc(${designUnit} * 2 * 1px);justify-content:center;grid-column:1}.end{display:flex;align-items:center;justify-content:center;grid-column:3}.icon,.start,.end{position:relative}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .button:${focusVisible}::before{border-color:${SystemColors.Highlight};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight}}.icon{fill:${SystemColors.ButtonText}}`));
 
 /**
@@ -23493,7 +23639,8 @@ const elevationShadowDialog = DesignToken.create('elevation-shadow-dialog').with
  */
 
 const baseButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
-    ${display('inline-flex')} :host{position:relative;box-sizing:border-box;font-family:${bodyFont};outline:none;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};height:calc(${heightNumber} * 1px);min-width:calc(${heightNumber} * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;cursor:pointer}:host .control{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;flex-grow:1;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;padding:0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);white-space:nowrap;outline:none;text-decoration:none;color:inherit;border-radius:inherit;fill:inherit;cursor:inherit;font-family:inherit}.control,.end,.start{font:inherit}.control.icon-only{padding:0;line-height:0}:host .control${interactivitySelector}:hover{background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host .control${interactivitySelector}:active{background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host .control:${focusVisible}{border-color:${focusStrokeOuter} !important;box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset !important}:host .control${nonInteractivitySelector}{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeRest}}.control::-moz-focus-inner{border:0}.content{pointer-events:none}.start,.end{display:flex;pointer-events:none}.start{margin-inline-end:11px}.end{margin-inline-start:11px}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('inline-flex')} :host{position:relative;box-sizing:border-box;outline:none;${typeRampBase}
+      height:calc(${heightNumber} * 1px);min-width:calc(${heightNumber} * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor;cursor:pointer}:host .control{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;flex-grow:1;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;padding:0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);white-space:nowrap;outline:none;text-decoration:none;color:inherit;border-radius:inherit;fill:inherit;cursor:inherit;font-family:inherit}.control,.end,.start{font:inherit}.control.icon-only{padding:0;line-height:0}:host .control${interactivitySelector}:hover{background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host .control${interactivitySelector}:active{background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host .control:${focusVisible}{border-color:${focusStrokeOuter} !important;box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset !important}:host .control${nonInteractivitySelector}{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeRest}}.control::-moz-focus-inner{border:0}.content{pointer-events:none}.start,.end{display:flex;pointer-events:none}.start{margin-inline-end:11px}.end{margin-inline-start:11px}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText};fill:currentcolor}:host(:not([disabled])) .control:hover,:host .control${interactivitySelector}:hover,.control${interactivitySelector}:hover{forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}.control:${focusVisible},:host .control:${focusVisible},:host(:${focusVisible}) .control{forced-color-adjust:none;background:${SystemColors.ButtonFace};border-color:${SystemColors.Highlight} !important;box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight} !important}:host([href]) .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.LinkText};color:${SystemColors.LinkText};fill:currentcolor}:host([href]) .control:hover,:host(.neutral[href]) .control:hover{background:${SystemColors.LinkText};border-color:${SystemColors.LinkText} !important;color:${SystemColors.HighlightText};fill:currentcolor}:host([href]) .control:${focusVisible}{forced-color-adjust:none;border-color:${SystemColors.LinkText} !important;box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText} !important}`));
 /**
  * @internal
@@ -23556,7 +23703,9 @@ const filledPlaceholderHover = DesignToken.create('input-filled-placeholder-hove
  */
 
 const inputStyles = (context, definition, rootSelector) => css`
-  :host{font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};fill:currentcolor;outline:none;user-select:none;position:relative}${rootSelector}{box-sizing:border-box;position:relative;color:inherit;background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeInputRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);height:calc(${heightNumber} * 1px);font-family:inherit;font-size:inherit;line-height:inherit}.control{width:100%}.control:hover,.control:${focusVisible},.control:disabled,.control:active{outline:none}.label{display:block;color:${neutralForegroundRest};cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};margin-bottom:4px}.label__hidden{display:none;visibility:hidden}:host(:hover:not([disabled]):not(:focus-within)) ${rootSelector}{background:padding-box linear-gradient(${neutralFillInputHover},${neutralFillInputHover}),border-box ${neutralStrokeInputHover}}:host(:not([disabled]):focus-within) ${rootSelector}{background:padding-box linear-gradient(${neutralFillInputFocus},${neutralFillInputFocus}),border-box ${neutralStrokeInputRest}}.control::placeholder{color:${placeholderRest}}:host(:hover:not([disabled]):not(:focus-within)) .control::placeholder{color:${placeholderHover}}:host([disabled]) ${rootSelector},:host([readonly]) ${rootSelector},:host([disabled]) .label,:host([readonly]) .label,:host([disabled]) .control,:host([readonly]) .control{cursor:${disabledCursor}}:host([disabled]){opacity:${disabledOpacity}}:host([disabled]) ${rootSelector}{background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeRest}}`;
+  :host{${typeRampBase}
+    color:${neutralForegroundRest};fill:currentcolor;outline:none;user-select:none;position:relative}${rootSelector}{box-sizing:border-box;position:relative;color:inherit;background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeInputRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);height:calc(${heightNumber} * 1px);font-family:inherit;font-size:inherit;line-height:inherit}.control{width:100%}.control:hover,.control:${focusVisible},.control:disabled,.control:active{outline:none}.label{display:block;color:${neutralForegroundRest};cursor:pointer;${typeRampBase}
+    margin-bottom:4px}.label__hidden{display:none;visibility:hidden}:host(:hover:not([disabled]):not(:focus-within)) ${rootSelector}{background:padding-box linear-gradient(${neutralFillInputHover},${neutralFillInputHover}),border-box ${neutralStrokeInputHover}}:host(:not([disabled]):focus-within) ${rootSelector}{background:padding-box linear-gradient(${neutralFillInputFocus},${neutralFillInputFocus}),border-box ${neutralStrokeInputRest}}.control::placeholder{color:${placeholderRest}}:host(:hover:not([disabled]):not(:focus-within)) .control::placeholder{color:${placeholderHover}}:host([disabled]) ${rootSelector},:host([readonly]) ${rootSelector},:host([disabled]) .label,:host([readonly]) .label,:host([disabled]) .control,:host([readonly]) .control{cursor:${disabledCursor}}:host([disabled]){opacity:${disabledOpacity}}:host([disabled]) ${rootSelector}{background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeRest}}`;
 /**
  * @internal
  */
@@ -23701,7 +23850,7 @@ const fluentAnchoredRegion = AnchoredRegion.compose({
 const anchoredRegionStyles = anchoredRegionStyles$1;
 
 const badgeStyles$1 = (context, definition) => css`
-    ${display('inline-block')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampMinus1FontSize};line-height:${typeRampMinus1LineHeight}}.control{border-radius:calc(${controlCornerRadius} * 1px);padding:calc(((${designUnit} * 0.5) - ${strokeWidth}) * 1px) calc((${designUnit} - ${strokeWidth}) * 1px);border:calc(${strokeWidth} * 1px) solid transparent}:host(.lightweight) .control{background:transparent;color:${neutralForegroundRest};font-weight:600}:host(.accent) .control{background:${accentFillRest};color:${foregroundOnAccentRest}}:host(.neutral) .control{background:${neutralFillSecondaryRest};color:${neutralForegroundRest}}:host([circular]) .control{border-radius:100px;min-width:calc(${typeRampMinus1LineHeight} - calc(${designUnit} * 1px));display:flex;align-items:center;justify-content:center}`;
+    ${display('inline-block')} :host{box-sizing:border-box;${typeRampMinus1}}.control{border-radius:calc(${controlCornerRadius} * 1px);padding:calc(((${designUnit} * 0.5) - ${strokeWidth}) * 1px) calc((${designUnit} - ${strokeWidth}) * 1px);border:calc(${strokeWidth} * 1px) solid transparent}:host(.lightweight) .control{background:transparent;color:${neutralForegroundRest};font-weight:600}:host(.accent) .control{background:${accentFillRest};color:${foregroundOnAccentRest}}:host(.neutral) .control{background:${neutralFillSecondaryRest};color:${neutralForegroundRest}}:host([circular]) .control{border-radius:100px;min-width:calc(${typeRampMinus1LineHeight} - calc(${designUnit} * 1px));display:flex;align-items:center;justify-content:center}`;
 
 /**
  * The Fluent Badge class
@@ -23753,7 +23902,7 @@ const fluentBadge = Badge.compose({
 const badgeStyles = badgeStyles$1;
 
 const breadcrumbStyles$1 = (context, definition) => css`
-  ${display('inline-block')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight}}.list{display:flex}`;
+  ${display('inline-block')} :host{box-sizing:border-box;${typeRampBase}}.list{display:flex}`;
 
 /**
  * The Fluent Breadcrumb Element. Implements {@link @microsoft/fast-foundation#Breadcrumb},
@@ -23778,7 +23927,7 @@ const fluentBreadcrumb = Breadcrumb.compose({
 const breadcrumbStyles = breadcrumbStyles$1;
 
 const breadcrumbItemStyles$1 = (context, definition) => css`
-    ${display('inline-flex')} :host{background:transparent;color:${neutralForegroundRest};fill:currentcolor;box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};min-width:calc(${heightNumber} * 1px);border-radius:calc(${controlCornerRadius} * 1px);outline:none}.listitem{display:flex;align-items:center;border-radius:inherit}.control{position:relative;align-items:center;box-sizing:border-box;color:inherit;fill:inherit;cursor:pointer;display:flex;outline:none;text-decoration:none;white-space:nowrap;border-radius:inherit}.control:hover{color:${neutralForegroundHover}}.control:active{color:${neutralForegroundActive}}.control:${focusVisible}::after{content:'';position:absolute;inset:calc(${strokeWidth} * -1px);box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset;border-radius:inherit}:host(:not([href])),:host([aria-current]) .control{color:${neutralForegroundRest};fill:currentcolor;cursor:default}.start{display:flex;margin-inline-end:6px}.end{display:flex;margin-inline-start:6px}.separator{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('inline-flex')} :host{background:transparent;color:${neutralForegroundRest};fill:currentcolor;box-sizing:border-box;${typeRampBase};min-width:calc(${heightNumber} * 1px);border-radius:calc(${controlCornerRadius} * 1px);outline:none}.listitem{display:flex;align-items:center;border-radius:inherit}.control{position:relative;align-items:center;box-sizing:border-box;color:inherit;fill:inherit;cursor:pointer;display:flex;outline:none;text-decoration:none;white-space:nowrap;border-radius:inherit}.control:hover{color:${neutralForegroundHover}}.control:active{color:${neutralForegroundActive}}.control:${focusVisible}::after{content:'';position:absolute;inset:calc(${strokeWidth} * -1px);box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset;border-radius:inherit}:host(:not([href])),:host([aria-current]) .control{color:${neutralForegroundRest};fill:currentcolor;cursor:default}.start{display:flex;margin-inline-end:6px}.end{display:flex;margin-inline-start:6px}.separator{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host(:not([href])),.start,.end,.separator{background:${SystemColors.ButtonFace};color:${SystemColors.ButtonText};fill:currentcolor}.separator{fill:${SystemColors.ButtonText}}:host([href]){forced-color-adjust:none;background:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}:host([href]) .control:hover{background:${SystemColors.LinkText};color:${SystemColors.HighlightText};fill:currentcolor}:host([href]) .control:${focusVisible}::after{box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.LinkText} inset}`));
 
 /**
@@ -23921,7 +24070,8 @@ const rtlStyles = css`
  */
 
 const calendarStyles = (context, definition) => css`
-${display("inline-block")} :host{--calendar-cell-size:calc((${baseHeightMultiplier} + 2 + ${density}) * ${designUnit} * 1px);--calendar-gap:2px;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest}}.title{padding:calc(${designUnit} * 2px);font-weight:600}.days{text-align:center}.week-days,.week{display:grid;grid-template-columns:repeat(7,1fr);grid-gap:var(--calendar-gap);border:0;padding:0}.day,.week-day{border:0;width:var(--calendar-cell-size);height:var(--calendar-cell-size);line-height:var(--calendar-cell-size);padding:0;box-sizing:initial}.week-day{font-weight:600}.day{border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px)}.interact .day{cursor:pointer}.date{height:100%}.inactive .date,.inactive.disabled::before{color:${neutralForegroundHint}}.disabled::before{content:'';display:inline-block;width:calc(var(--calendar-cell-size) * .8);height:calc(${strokeWidth} * 1px);background:currentColor;position:absolute;margin-top:calc(var(--calendar-cell-size) / 2);transform-origin:center;z-index:1}.selected{color:${accentFillRest};border:1px solid ${accentFillRest};background:${fillColor}}.selected + .selected{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-width:0;padding-inline-start:calc(var(--calendar-gap) + (${strokeWidth} + ${controlCornerRadius}) * 1px);margin-inline-start:calc((${controlCornerRadius} * -1px) - var(--calendar-gap))}.today.disabled::before{color:${foregroundOnAccentRest}}.today .date{color:${foregroundOnAccentRest};background:${accentFillRest};border-radius:50%;position:relative}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+${display("inline-block")} :host{--calendar-cell-size:calc((${baseHeightMultiplier} + 2 + ${density}) * ${designUnit} * 1px);--calendar-gap:2px;${typeRampBase}
+  color:${neutralForegroundRest}}.title{padding:calc(${designUnit} * 2px);font-weight:600}.days{text-align:center}.week-days,.week{display:grid;grid-template-columns:repeat(7,1fr);grid-gap:var(--calendar-gap);border:0;padding:0}.day,.week-day{border:0;width:var(--calendar-cell-size);height:var(--calendar-cell-size);line-height:var(--calendar-cell-size);padding:0;box-sizing:initial}.week-day{font-weight:600}.day{border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px)}.interact .day{cursor:pointer}.date{height:100%}.inactive .date,.inactive.disabled::before{color:${neutralForegroundHint}}.disabled::before{content:'';display:inline-block;width:calc(var(--calendar-cell-size) * .8);height:calc(${strokeWidth} * 1px);background:currentColor;position:absolute;margin-top:calc(var(--calendar-cell-size) / 2);transform-origin:center;z-index:1}.selected{color:${accentFillRest};border:1px solid ${accentFillRest};background:${fillColor}}.selected + .selected{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-width:0;padding-inline-start:calc(var(--calendar-gap) + (${strokeWidth} + ${controlCornerRadius}) * 1px);margin-inline-start:calc((${controlCornerRadius} * -1px) - var(--calendar-gap))}.today.disabled::before{color:${foregroundOnAccentRest}}.today .date{color:${foregroundOnAccentRest};background:${accentFillRest};border-radius:50%;position:relative}`.withBehaviors(forcedColorsStylesheetBehavior(css`
           .day.selected{color:${SystemColors.Highlight}}.today .date{background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}`), new DirectionalStyleSheetBehavior(ltrStyles, rtlStyles));
 
 /**
@@ -24047,9 +24197,10 @@ const checkboxStyles$1 = (context, definition) => css`
  * Chromium likes to select label text or the default slot when
  * the checkbox is clicked. Maybe there is a better solution here?
  */
-''} user-select:none}.control{position:relative;width:calc((${heightNumber} / 2 + ${designUnit}) * 1px);height:calc((${heightNumber} / 2 + ${designUnit}) * 1px);box-sizing:border-box;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};background:${neutralFillInputAltRest};outline:none;cursor:pointer}.label__hidden{display:none;visibility:hidden}.label{font-family:${bodyFont};color:${neutralForegroundRest};${
+''} user-select:none}.control{position:relative;width:calc((${heightNumber} / 2 + ${designUnit}) * 1px);height:calc((${heightNumber} / 2 + ${designUnit}) * 1px);box-sizing:border-box;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};background:${neutralFillInputAltRest};outline:none;cursor:pointer}.label__hidden{display:none;visibility:hidden}.label{${typeRampBase}
+      color:${neutralForegroundRest};${
 /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */
-''} padding-inline-start:calc(${designUnit} * 2px + 2px);margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight}}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${neutralForegroundRest};opacity:0;pointer-events:none}slot[name='indeterminate-indicator']{position:absolute;top:0}:host(.checked) slot[name='checked-indicator'],:host(.checked) slot[name='indeterminate-indicator']{fill:${foregroundOnAccentRest}}:host(:not(.disabled):hover) .control{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .control{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:${focusVisible}) .control{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}:host(.checked) .control{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .control{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .control{background:${accentFillActive};border-color:transparent}:host(.disabled) .label,:host(.readonly) .label,:host(.readonly) .control,:host(.disabled) .control{cursor:${disabledCursor}}:host(.checked:not(.indeterminate)) slot[name='checked-indicator'],:host(.indeterminate) slot[name='indeterminate-indicator']{opacity:1}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+''} padding-inline-start:calc(${designUnit} * 2px + 2px);margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${neutralForegroundRest};opacity:0;pointer-events:none}slot[name='indeterminate-indicator']{position:absolute;top:0}:host(.checked) slot[name='checked-indicator'],:host(.checked) slot[name='indeterminate-indicator']{fill:${foregroundOnAccentRest}}:host(:not(.disabled):hover) .control{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .control{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:${focusVisible}) .control{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}:host(.checked) .control{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .control{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .control{background:${accentFillActive};border-color:transparent}:host(.disabled) .label,:host(.readonly) .label,:host(.readonly) .control,:host(.disabled) .control{cursor:${disabledCursor}}:host(.checked:not(.indeterminate)) slot[name='checked-indicator'],:host(.indeterminate) slot[name='indeterminate-indicator']{opacity:1}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .control{border-color:${SystemColors.FieldText};background:${SystemColors.Field}}:host(:not(.disabled):hover) .control,:host(:not(.disabled):active) .control{border-color:${SystemColors.Highlight};background:${SystemColors.Field}}slot[name='checked-indicator'],slot[name='indeterminate-indicator']{fill:${SystemColors.FieldText}}:host(:${focusVisible}) .control{forced-color-adjust:none;box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText};background:${SystemColors.Field};border-color:${SystemColors.Highlight}}:host(.checked) .control{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight}}:host(.checked:not(.disabled):hover) .control,:host(.checked:not(.disabled):active) .control{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight}}:host(.checked:${focusVisible}) .control{box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText}}:host(.checked) slot[name='checked-indicator'],:host(.checked) slot[name='indeterminate-indicator']{fill:${SystemColors.HighlightText}}:host(.checked:hover ) .control slot[name='checked-indicator'],:host(.checked:hover ) .control slot[name='indeterminate-indicator']{fill:${SystemColors.Highlight}}:host(.disabled){opacity:1}:host(.disabled) .control{border-color:${SystemColors.GrayText};background:${SystemColors.Field}}:host(.disabled) slot[name='checked-indicator'],:host(.checked.disabled:hover) .control slot[name='checked-indicator'],:host(.disabled) slot[name='indeterminate-indicator'],:host(.checked.disabled:hover) .control slot[name='indeterminate-indicator']{fill:${SystemColors.GrayText}}`));
 
 /**
@@ -24090,13 +24241,15 @@ const selectFilledStyles = (context, definition) => css`
 const selectStealthStyles = (context, definition) => css`
   :host{background:${neutralFillStealthRest};border-color:transparent}:host(:not([disabled]):not([open]):hover){background:${neutralFillStealthHover};border-color:transparent}:host(:not([disabled]):not([open]):active){background:${neutralFillStealthActive};border-color:transparent}`;
 const selectStyles$1 = (context, definition) => css`
-    ${display('inline-flex')} :host{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;color:${neutralForegroundRest};fill:currentcolor;font-family:${bodyFont};height:calc(${heightNumber} * 1px);position:relative;user-select:none;min-width:250px;vertical-align:top}:host .listbox{box-shadow:${elevationShadowFlyout};background:${fillColor};border-radius:calc(${layerCornerRadius} * 1px);box-sizing:border-box;display:inline-flex;flex-direction:column;left:0;max-height:calc(var(--max-height) - (${heightNumber} * 1px));padding:calc((${designUnit} - ${strokeWidth} ) * 1px) 0;overflow-y:auto;position:absolute;width:100%;z-index:1;margin:1px 0;border:calc(${strokeWidth} * 1px) solid transparent}:host .listbox[hidden]{display:none}:host .control{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:${typeRampBaseFontSize};font-family:inherit;min-height:100%;line-height:${typeRampBaseLineHeight};padding:0 calc(${designUnit} * 2.25px);width:100%}:host(:not([disabled]):not([open]):hover){background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host(:not([disabled]):not([open]):active){background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host(:${focusVisible}){border-color:${focusStrokeOuter};outline:none;box-shadow:0 0 0 1px inset ${focusStrokeOuter}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}:host([disabled]) .control{cursor:${disabledCursor};user-select:none}:host([open][position='above']) .listbox{bottom:calc((${heightNumber} + ${designUnit} * 2) * 1px)}:host([open][position='below']) .listbox{top:calc((${heightNumber} + ${designUnit} * 2) * 1px)}.selected-value{font-family:inherit;flex:1 1 auto;text-align:start}.indicator{flex:0 0 auto;margin-inline-start:1em}slot[name='listbox']{display:none;width:100%}:host([open]) slot[name='listbox']{display:flex;position:absolute}.start{margin-inline-end:11px}.end{margin-inline-start:11px}.start,.end,.indicator,::slotted(svg){display:flex}::slotted([role='option']){flex:0 0 auto}`.withBehaviors(appearanceBehavior('filled', selectFilledStyles()), appearanceBehavior('stealth', selectStealthStyles()), forcedColorsStylesheetBehavior(css`
+    ${display('inline-flex')} :host{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;color:${neutralForegroundRest};fill:currentcolor;font-family:${bodyFont};height:calc(${heightNumber} * 1px);position:relative;user-select:none;min-width:250px;vertical-align:top}:host .listbox{box-shadow:${elevationShadowFlyout};background:${fillColor};border-radius:calc(${layerCornerRadius} * 1px);box-sizing:border-box;display:inline-flex;flex-direction:column;left:0;max-height:calc(var(--max-height) - (${heightNumber} * 1px));padding:calc((${designUnit} - ${strokeWidth} ) * 1px) 0;overflow-y:auto;position:absolute;width:100%;z-index:1;margin:1px 0;border:calc(${strokeWidth} * 1px) solid transparent}:host .listbox[hidden]{display:none}:host .control{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;${typeRampBase}
+      min-height:100%;padding:0 calc(${designUnit} * 2.25px);width:100%}:host(:not([disabled]):not([open]):hover){background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host(:not([disabled]):not([open]):active){background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host(:${focusVisible}){border-color:${focusStrokeOuter};outline:none;box-shadow:0 0 0 1px inset ${focusStrokeOuter}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}:host([disabled]) .control{cursor:${disabledCursor};user-select:none}:host([open][position='above']) .listbox{bottom:calc((${heightNumber} + ${designUnit} * 2) * 1px)}:host([open][position='below']) .listbox{top:calc((${heightNumber} + ${designUnit} * 2) * 1px)}.selected-value{font-family:inherit;flex:1 1 auto;text-align:start}.indicator{flex:0 0 auto;margin-inline-start:1em}slot[name='listbox']{display:none;width:100%}:host([open]) slot[name='listbox']{display:flex;position:absolute}.start{margin-inline-end:11px}.end{margin-inline-start:11px}.start,.end,.indicator,::slotted(svg){display:flex}::slotted([role='option']){flex:0 0 auto}`.withBehaviors(appearanceBehavior('filled', selectFilledStyles()), appearanceBehavior('stealth', selectStealthStyles()), forcedColorsStylesheetBehavior(css`
       :host{background:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host(:not([disabled]):not([open]):hover){background:transparent}:host(:not([disabled]):hover){border-color:${SystemColors.Highlight}}:host(:${focusVisible}){forced-color-adjust:none;border-color:${SystemColors.Highlight};box-shadow:0 0 0 1px inset ${SystemColors.Highlight}}:host([open]) .listbox{background:${SystemColors.ButtonFace};border-color:${SystemColors.CanvasText}}.start,.end,.indicator,::slotted(svg){fill:${SystemColors.FieldText}}:host([disabled]){border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};opacity:1}:host([disabled]) .start,:host([disabled]) .end,:host([disabled]) .indicator,:host([disabled]) ::slotted(svg){fill:${SystemColors.GrayText}}`));
 
 const comboboxStyles$1 = (context, definition) => css`
     ${selectStyles$1()}
 
-    :host(:empty) .listbox{display:none}:host([disabled]) *,:host([disabled]){cursor:${disabledCursor};user-select:none}:host(:active) .selected-value{user-select:none}.selected-value{-webkit-appearance:none;background:transparent;border:none;color:inherit;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};height:calc(100% - ${strokeWidth} * 1px));margin:auto 0;width:100%}.selected-value:hover,.selected-value:${focusVisible},.selected-value:disabled,.selected-value:active{outline:none}`.withBehaviors(appearanceBehavior('filled', selectFilledStyles()));
+    :host(:empty) .listbox{display:none}:host([disabled]) *,:host([disabled]){cursor:${disabledCursor};user-select:none}:host(:active) .selected-value{user-select:none}.selected-value{-webkit-appearance:none;background:transparent;border:none;color:inherit;${typeRampBase}
+        height:calc(100% - ${strokeWidth} * 1px));margin:auto 0;width:100%}.selected-value:hover,.selected-value:${focusVisible},.selected-value:disabled,.selected-value:active{outline:none}`.withBehaviors(appearanceBehavior('filled', selectFilledStyles()));
 
 /**
  * The Fluent combobox class
@@ -24175,7 +24328,8 @@ const dataGridRowStyles$1 = (context, definition) => css`
         :host{}`));
 
 const dataGridCellStyles$1 = (context, definition) => css`
-    :host{padding:calc(${designUnit} * 1px) calc(${designUnit} * 3px);color:${neutralForegroundRest};box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};font-weight:400;border:transparent calc(${focusStrokeWidth} * 1px) solid;overflow:hidden;outline:none;white-space:nowrap;border-radius:calc(${controlCornerRadius} * 1px)}:host(.column-header){font-weight:600}:host(:${focusVisible}){border-color:${focusStrokeOuter}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{padding:calc(${designUnit} * 1px) calc(${designUnit} * 3px);color:${neutralForegroundRest};box-sizing:border-box;${typeRampBase}
+      border:transparent calc(${focusStrokeWidth} * 1px) solid;overflow:hidden;outline:none;white-space:nowrap;border-radius:calc(${controlCornerRadius} * 1px)}:host(.column-header){font-weight:600}:host(:${focusVisible}){border-color:${focusStrokeOuter}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host{forced-color-adjust:none;border-color:transparent;background:${SystemColors.Field};color:${SystemColors.FieldText}}:host(:${focusVisible}){border-color:${SystemColors.FieldText};box-shadow:0 0 0 2px inset ${SystemColors.Field};color:${SystemColors.FieldText}}`));
 
 /**
@@ -24807,7 +24961,8 @@ const fluentListbox = Listbox.compose({
 const listboxStyles = listboxStyles$1;
 
 const optionStyles = (context, definition) => css`
-    ${display('inline-flex')} :host{position:relative;font-family:${bodyFont};background:${neutralFillStealthRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${focusStrokeWidth} * 1px) solid transparent;box-sizing:border-box;color:${neutralForegroundRest};cursor:pointer;fill:currentcolor;font-size:${typeRampBaseFontSize};height:calc(${heightNumber} * 1px);line-height:${typeRampBaseLineHeight};outline:none;overflow:hidden;align-items:center;padding:0 calc(${designUnit} * 2.25px);user-select:none;white-space:nowrap}:host::before{content:'';display:block;position:absolute;left:0;top:calc((${heightNumber} / 4) - ${focusStrokeWidth} * 1px);width:3px;height:calc((${heightNumber} / 2) * 1px);background:transparent;border-radius:calc(${controlCornerRadius} * 1px)}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active){background:${neutralFillStealthActive}}:host(:not([disabled]):active)::before{background:${accentFillRest};height:calc(((${heightNumber} / 2) - 6) * 1px)}:host([aria-selected='true'])::before{background:${accentFillRest}}:host(:${focusVisible}){border-color:${focusStrokeOuter};background:${neutralFillStealthFocus}}:host([aria-selected='true']){background:${neutralFillSecondaryRest}}:host(:not([disabled])[aria-selected='true']:hover){background:${neutralFillSecondaryHover}}:host(:not([disabled])[aria-selected='true']:active){background:${neutralFillSecondaryActive}}:host(:not([disabled]):not([aria-selected='true']):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):not([aria-selected='true']):active){background:${neutralFillStealthActive}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end,::slotted(svg){display:flex}::slotted([slot='end']){margin-inline-start:1ch}::slotted([slot='start']){margin-inline-end:1ch}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('inline-flex')} :host{position:relative;${typeRampBase}
+      background:${neutralFillStealthRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${focusStrokeWidth} * 1px) solid transparent;box-sizing:border-box;color:${neutralForegroundRest};cursor:pointer;fill:currentcolor;height:calc(${heightNumber} * 1px);outline:none;overflow:hidden;align-items:center;padding:0 calc(${designUnit} * 2.25px);user-select:none;white-space:nowrap}:host::before{content:'';display:block;position:absolute;left:0;top:calc((${heightNumber} / 4) - ${focusStrokeWidth} * 1px);width:3px;height:calc((${heightNumber} / 2) * 1px);background:transparent;border-radius:calc(${controlCornerRadius} * 1px)}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active){background:${neutralFillStealthActive}}:host(:not([disabled]):active)::before{background:${accentFillRest};height:calc(((${heightNumber} / 2) - 6) * 1px)}:host([aria-selected='true'])::before{background:${accentFillRest}}:host(:${focusVisible}){border-color:${focusStrokeOuter};background:${neutralFillStealthFocus}}:host([aria-selected='true']){background:${neutralFillSecondaryRest}}:host(:not([disabled])[aria-selected='true']:hover){background:${neutralFillSecondaryHover}}:host(:not([disabled])[aria-selected='true']:active){background:${neutralFillSecondaryActive}}:host(:not([disabled]):not([aria-selected='true']):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):not([aria-selected='true']):active){background:${neutralFillStealthActive}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end,::slotted(svg){display:flex}::slotted([slot='end']){margin-inline-start:1ch}::slotted([slot='start']){margin-inline-end:1ch}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host(:not([disabled]):not([aria-selected="true"]):hover),:host(:not([disabled])[aria-selected="true"]:hover),:host([aria-selected="true"]){forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(:not([disabled]):active)::before,:host([aria-selected='true'])::before{background:${SystemColors.HighlightText}}:host([disabled]),:host([disabled]:not([aria-selected='true']):hover){background:${SystemColors.Canvas};color:${SystemColors.GrayText};fill:currentcolor;opacity:1}`));
 
 /**
@@ -24876,7 +25031,8 @@ const fluentMenu = Menu.compose({
 const menuStyles = menuStyles$1;
 
 const menuItemStyles$1 = (context, definition) => css`
-    ${display('grid')} :host{contain:layout;overflow:visible;font-family:${bodyFont};outline:none;box-sizing:border-box;height:calc(${heightNumber} * 1px);grid-template-columns:minmax(32px,auto) 1fr minmax(32px,auto);grid-template-rows:auto;justify-items:center;align-items:center;padding:0;white-space:nowrap;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent}:host(.indent-0){grid-template-columns:auto 1fr minmax(32px,auto)}:host(.indent-0) .content{grid-column:1;grid-row:1;margin-inline-start:10px}:host(.indent-0) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2){grid-template-columns:minmax(32px,auto) minmax(32px,auto) 1fr minmax(32px,auto) minmax(32px,auto)}:host(.indent-2) .content{grid-column:3;grid-row:1;margin-inline-start:10px}:host(.indent-2) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2) .start{grid-column:2}:host(.indent-2) .end{grid-column:4}:host(:${focusVisible}){border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active),:host(.expanded){background:${neutralFillStealthActive};color:${neutralForegroundRest}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end{display:flex;justify-content:center}:host(.indent-0[aria-haspopup='menu']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-1[aria-haspopup='menu']),:host(.indent-1[role='menuitemcheckbox']),:host(.indent-1[role='menuitemradio']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-2:not([aria-haspopup='menu'])) .end{grid-column:5}:host .input-container,:host .expand-collapse-glyph-container{display:none}:host([aria-haspopup='menu']) .expand-collapse-glyph-container,:host([role='menuitemcheckbox']) .input-container,:host([role='menuitemradio']) .input-container{display:grid}:host([aria-haspopup='menu']) .content,:host([role='menuitemcheckbox']) .content,:host([role='menuitemradio']) .content{grid-column-start:3}:host([aria-haspopup='menu'].indent-0) .content{grid-column-start:1}:host([aria-haspopup='menu']) .end,:host([role='menuitemcheckbox']) .end,:host([role='menuitemradio']) .end{grid-column-start:4}:host .expand-collapse,:host .checkbox,:host .radio{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;outline:none}:host .checkbox-indicator,:host .radio-indicator,slot[name='checkbox-indicator'],slot[name='radio-indicator']{display:none}::slotted([slot='end']:not(svg)){margin-inline-end:10px;color:${neutralForegroundHint}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) slot[name='checkbox-indicator'],:host([aria-checked='true']) .radio-indicator,:host([aria-checked='true']) slot[name='radio-indicator']{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('grid')} :host{contain:layout;overflow:visible;${typeRampBase}
+      outline:none;box-sizing:border-box;height:calc(${heightNumber} * 1px);grid-template-columns:minmax(32px,auto) 1fr minmax(32px,auto);grid-template-rows:auto;justify-items:center;align-items:center;padding:0;white-space:nowrap;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent}:host(.indent-0){grid-template-columns:auto 1fr minmax(32px,auto)}:host(.indent-0) .content{grid-column:1;grid-row:1;margin-inline-start:10px}:host(.indent-0) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2){grid-template-columns:minmax(32px,auto) minmax(32px,auto) 1fr minmax(32px,auto) minmax(32px,auto)}:host(.indent-2) .content{grid-column:3;grid-row:1;margin-inline-start:10px}:host(.indent-2) .expand-collapse-glyph-container{grid-column:5;grid-row:1}:host(.indent-2) .start{grid-column:2}:host(.indent-2) .end{grid-column:4}:host(:${focusVisible}){border:calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter}}:host(:not([disabled]):hover){background:${neutralFillStealthHover}}:host(:not([disabled]):active),:host(.expanded){background:${neutralFillStealthActive};color:${neutralForegroundRest}}:host([disabled]){cursor:${disabledCursor};opacity:${disabledOpacity}}.content{grid-column-start:2;justify-self:start;overflow:hidden;text-overflow:ellipsis}.start,.end{display:flex;justify-content:center}:host(.indent-0[aria-haspopup='menu']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-1[aria-haspopup='menu']),:host(.indent-1[role='menuitemcheckbox']),:host(.indent-1[role='menuitemradio']){display:grid;grid-template-columns:minmax(32px,auto) auto 1fr minmax(32px,auto) minmax(32px,auto);align-items:center;min-height:32px}:host(.indent-2:not([aria-haspopup='menu'])) .end{grid-column:5}:host .input-container,:host .expand-collapse-glyph-container{display:none}:host([aria-haspopup='menu']) .expand-collapse-glyph-container,:host([role='menuitemcheckbox']) .input-container,:host([role='menuitemradio']) .input-container{display:grid}:host([aria-haspopup='menu']) .content,:host([role='menuitemcheckbox']) .content,:host([role='menuitemradio']) .content{grid-column-start:3}:host([aria-haspopup='menu'].indent-0) .content{grid-column-start:1}:host([aria-haspopup='menu']) .end,:host([role='menuitemcheckbox']) .end,:host([role='menuitemradio']) .end{grid-column-start:4}:host .expand-collapse,:host .checkbox,:host .radio{display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;outline:none}:host .checkbox-indicator,:host .radio-indicator,slot[name='checkbox-indicator'],slot[name='radio-indicator']{display:none}::slotted([slot='end']:not(svg)){margin-inline-end:10px;color:${neutralForegroundHint}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) slot[name='checkbox-indicator'],:host([aria-checked='true']) .radio-indicator,:host([aria-checked='true']) slot[name='radio-indicator']{display:flex}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host,::slotted([slot='end']:not(svg)){forced-color-adjust:none;color:${SystemColors.ButtonText};fill:currentcolor}:host(:not([disabled]):hover){background:${SystemColors.Highlight};color:${SystemColors.HighlightText};fill:currentcolor}:host(:hover) .start,:host(:hover) .end,:host(:hover)::slotted(svg),:host(:active) .start,:host(:active) .end,:host(:active)::slotted(svg),:host(:hover) ::slotted([slot='end']:not(svg)),:host(:${focusVisible}) ::slotted([slot='end']:not(svg)){color:${SystemColors.HighlightText};fill:currentcolor}:host(.expanded){background:${SystemColors.Highlight};border-color:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(:${focusVisible}){background:${SystemColors.Highlight};border-color:${SystemColors.ButtonText};box-shadow:0 0 0 calc(${strokeWidth} * 1px) inset ${SystemColors.HighlightText};color:${SystemColors.HighlightText};fill:currentcolor}:host([disabled]),:host([disabled]:hover),:host([disabled]:hover) .start,:host([disabled]:hover) .end,:host([disabled]:hover)::slotted(svg),:host([disabled]:${focusVisible}){background:${SystemColors.ButtonFace};color:${SystemColors.GrayText};fill:currentcolor;opacity:1}:host([disabled]:${focusVisible}){border-color:${SystemColors.GrayText}}:host .expanded-toggle,:host .checkbox,:host .radio{border-color:${SystemColors.ButtonText};background:${SystemColors.HighlightText}}:host([checked]) .checkbox,:host([checked]) .radio{background:${SystemColors.HighlightText};border-color:${SystemColors.HighlightText}}:host(:hover) .expanded-toggle,:host(:hover) .checkbox,:host(:hover) .radio,:host(:${focusVisible}) .expanded-toggle,:host(:${focusVisible}) .checkbox,:host(:${focusVisible}) .radio,:host([checked]:hover) .checkbox,:host([checked]:hover) .radio,:host([checked]:${focusVisible}) .checkbox,:host([checked]:${focusVisible}) .radio{border-color:${SystemColors.HighlightText}}:host([aria-checked='true']){background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host([aria-checked='true']) .checkbox-indicator,:host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),:host([aria-checked='true']) ::slotted([slot='radio-indicator']){fill:${SystemColors.Highlight}}:host([aria-checked='true']) .radio-indicator{background:${SystemColors.Highlight}}`), new DirectionalStyleSheetBehavior(css`
         .expand-collapse-glyph-container{transform:rotate(0deg)}`, css`
         .expand-collapse-glyph-container{transform:rotate(180deg)}`));
@@ -25087,9 +25243,10 @@ const radioStyles = (context, definition) => css`
  * Chromium likes to select label text or the default slot when
  * the radio button is clicked. Maybe there is a better solution here?
  */
-''} user-select:none;position:relative;flex-direction:row;transition:all 0.2s ease-in-out}.control{position:relative;width:calc(var(--input-size) * 1px);height:calc(var(--input-size) * 1px);box-sizing:border-box;border-radius:50%;border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};background:${neutralFillInputAltRest};outline:none;cursor:pointer}.label__hidden{display:none;visibility:hidden}.label{font-family:${bodyFont};color:${neutralForegroundRest};${
+''} user-select:none;position:relative;flex-direction:row;transition:all 0.2s ease-in-out}.control{position:relative;width:calc(var(--input-size) * 1px);height:calc(var(--input-size) * 1px);box-sizing:border-box;border-radius:50%;border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};background:${neutralFillInputAltRest};outline:none;cursor:pointer}.label__hidden{display:none;visibility:hidden}.label{${typeRampBase}
+      color:${neutralForegroundRest};${
 /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */
-''} padding-inline-start:calc(${designUnit} * 2px + 2px);margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight}}.control,slot[name='checked-indicator']{flex-shrink:0}slot[name='checked-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${foregroundOnAccentRest};opacity:0;pointer-events:none}:host(:not(.disabled):hover) .control{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .control{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:not(.disabled):active) slot[name='checked-indicator']{opacity:1}:host(:${focusVisible}) .control{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}:host(.checked) .control{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .control{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .control{background:${accentFillActive};border-color:transparent}:host(.disabled) .label,:host(.readonly) .label,:host(.readonly) .control,:host(.disabled) .control{cursor:${disabledCursor}}:host(.checked) slot[name='checked-indicator']{opacity:1}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+''} padding-inline-start:calc(${designUnit} * 2px + 2px);margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}.control,slot[name='checked-indicator']{flex-shrink:0}slot[name='checked-indicator']{display:flex;align-items:center;justify-content:center;width:100%;height:100%;fill:${foregroundOnAccentRest};opacity:0;pointer-events:none}:host(:not(.disabled):hover) .control{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .control{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:not(.disabled):active) slot[name='checked-indicator']{opacity:1}:host(:${focusVisible}) .control{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}:host(.checked) .control{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .control{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .control{background:${accentFillActive};border-color:transparent}:host(.disabled) .label,:host(.readonly) .label,:host(.readonly) .control,:host(.disabled) .control{cursor:${disabledCursor}}:host(.checked) slot[name='checked-indicator']{opacity:1}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .control{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(:not(.disabled):hover) .control,:host(:not(.disabled):active) .control{border-color:${SystemColors.Highlight}}:host(:${focusVisible}) .control{forced-color-adjust:none;box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText};background:${SystemColors.Field};border-color:${SystemColors.Highlight}}:host(.checked:not(.disabled):hover) .control,:host(.checked:not(.disabled):active) .control{border-color:${SystemColors.Highlight};background:${SystemColors.Highlight}}:host(.checked:${focusVisible}) .control{box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText}}:host(.checked) slot[name='checked-indicator']{fill:${SystemColors.Highlight}}:host(.checked:hover) .control slot[name='checked-indicator']{fill:${SystemColors.HighlightText}}:host(.disabled){opacity:1}:host(.disabled) .label{color:${SystemColors.GrayText}}:host(.disabled) .control,:host(.checked.disabled) .control{background:${SystemColors.Field};border-color:${SystemColors.GrayText}}:host(.disabled) slot[name='checked-indicator'],:host(.checked.disabled) slot[name='checked-indicator']{fill:${SystemColors.GrayText}}`));
 
 /**
@@ -25172,7 +25329,8 @@ const searchStyles$1 = (context, definition) => css`
     ${display('inline-block')}
     ${inputStyles(context, definition, '.root')}
     ${inputStateStyles()}
-    .root{display:flex;flex-direction:row}.control{-webkit-appearance:none;color:inherit;background:transparent;border:0;height:calc(100% - 4px);margin-top:auto;margin-bottom:auto;padding:0 calc(${designUnit} * 2px + 1px);font-family:inherit;font-size:inherit;line-height:inherit}.clear-button{display:inline-flex;align-items:center;margin:1px;height:calc(100% - 2px);opacity:0;background:transparent;color:${neutralForegroundRest};fill:currentcolor;border:none;border-radius:calc(${controlCornerRadius} * 1px);min-width:calc(${heightNumber} * 1px);font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};outline:none;font-family:${bodyFont};padding:0 calc((10 + (${designUnit} * 2 * ${density})) * 1px)}.clear-button:hover{background:${clearButtonHover}}.clear-button:active{background:${clearButtonActive}}:host(:hover:not([disabled],[readOnly])) .clear-button,:host(:active:not([disabled],[readOnly])) .clear-button,:host(:focus-within:not([disabled],[readOnly])) .clear-button{opacity:1}:host(:hover:not([disabled],[readOnly])) .clear-button__hidden,:host(:active:not([disabled],[readOnly])) .clear-button__hidden,:host(:focus-within:not([disabled],[readOnly])) .clear-button__hidden{opacity:0}.control::-webkit-search-cancel-button{-webkit-appearance:none}.input-wrapper{display:flex;position:relative;width:100%}.start,.end{display:flex;margin:1px;align-items:center}.start{display:flex;margin-inline-start:11px}::slotted([slot="end"]){height:100%}.clear-button__hidden{opacity:0}.end{margin-inline-end:11px}::slotted(${context.tagFor(Button$1)}){margin-inline-end:1px}`.withBehaviors(appearanceBehavior('filled', searchFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css`
+    .root{display:flex;flex-direction:row}.control{-webkit-appearance:none;color:inherit;background:transparent;border:0;height:calc(100% - 4px);margin-top:auto;margin-bottom:auto;padding:0 calc(${designUnit} * 2px + 1px);font-family:inherit;font-size:inherit;line-height:inherit}.clear-button{display:inline-flex;align-items:center;margin:1px;height:calc(100% - 2px);opacity:0;background:transparent;color:${neutralForegroundRest};fill:currentcolor;border:none;border-radius:calc(${controlCornerRadius} * 1px);min-width:calc(${heightNumber} * 1px);${typeRampBase}
+      outline:none;padding:0 calc((10 + (${designUnit} * 2 * ${density})) * 1px)}.clear-button:hover{background:${clearButtonHover}}.clear-button:active{background:${clearButtonActive}}:host(:hover:not([disabled],[readOnly])) .clear-button,:host(:active:not([disabled],[readOnly])) .clear-button,:host(:focus-within:not([disabled],[readOnly])) .clear-button{opacity:1}:host(:hover:not([disabled],[readOnly])) .clear-button__hidden,:host(:active:not([disabled],[readOnly])) .clear-button__hidden,:host(:focus-within:not([disabled],[readOnly])) .clear-button__hidden{opacity:0}.control::-webkit-search-cancel-button{-webkit-appearance:none}.input-wrapper{display:flex;position:relative;width:100%}.start,.end{display:flex;margin:1px;align-items:center}.start{display:flex;margin-inline-start:11px}::slotted([slot="end"]){height:100%}.clear-button__hidden{opacity:0}.end{margin-inline-end:11px}::slotted(${context.tagFor(Button$1)}){margin-inline-end:1px}`.withBehaviors(appearanceBehavior('filled', searchFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css`
         ${inputForcedColorStyles(context, definition, '.root')}
       `));
 
@@ -25353,7 +25511,7 @@ const fluentSlider = Slider.compose({
 const sliderStyles = sliderStyles$1;
 
 const sliderLabelStyles$1 = (context, definition) => css`
-    ${display('block')} :host{font-family:${bodyFont}}.root{position:absolute;display:grid}:host(.horizontal){align-self:start;grid-row:2;margin-top:-4px}:host(.vertical){justify-self:start;grid-column:2;margin-left:2px}.container{display:grid;justify-self:center}:host(.horizontal) .container{grid-template-rows:auto auto;grid-template-columns:0}:host(.vertical) .container{grid-template-columns:auto auto;grid-template-rows:0;min-width:calc(var(--thumb-size) * 1px);height:calc(var(--thumb-size) * 1px)}.label{justify-self:center;align-self:center;white-space:nowrap;max-width:30px;margin:2px 0}.mark{width:calc(${strokeWidth} * 1px);height:calc(${designUnit} * 1px);background:${neutralStrokeStrongRest};justify-self:center}:host(.vertical) .mark{transform:rotate(90deg);align-self:center}:host(.vertical) .label{margin-left:calc((${designUnit} / 2) * 2px);align-self:center}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    ${display('block')} :host{${typeRampMinus1}}.root{position:absolute;display:grid}:host(.horizontal){align-self:start;grid-row:2;margin-top:-4px}:host(.vertical){justify-self:start;grid-column:2;margin-left:2px}.container{display:grid;justify-self:center}:host(.horizontal) .container{grid-template-rows:auto auto;grid-template-columns:0}:host(.vertical) .container{grid-template-columns:auto auto;grid-template-rows:0;min-width:calc(var(--thumb-size) * 1px);height:calc(var(--thumb-size) * 1px)}.label{justify-self:center;align-self:center;white-space:nowrap;max-width:30px;margin:2px 0}.mark{width:calc(${strokeWidth} * 1px);height:calc(${designUnit} * 1px);background:${neutralStrokeStrongRest};justify-self:center}:host(.vertical) .mark{transform:rotate(90deg);align-self:center}:host(.vertical) .label{margin-left:calc((${designUnit} / 2) * 2px);align-self:center}:host(.disabled){opacity:${disabledOpacity}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .mark{forced-color-adjust:none;background:${SystemColors.FieldText}}:host(.disabled){forced-color-adjust:none;opacity:1}:host(.disabled) .label{color:${SystemColors.GrayText}}:host(.disabled) .mark{background:${SystemColors.GrayText}}`));
 
 /**
@@ -25384,7 +25542,8 @@ const switchStyles$1 = (context, definition) => css`
  * Chromium likes to select label text or the default slot when
  * the checkbox is clicked. Maybe there is a better solution here?
  */
-''} user-select:none}:host(.disabled){opacity:${disabledOpacity}}:host(.disabled) .label,:host(.readonly) .label,:host(.disabled) .switch,:host(.readonly) .switch,:host(.disabled) .status-message,:host(.readonly) .status-message{cursor:${disabledCursor}}.switch{position:relative;outline:none;box-sizing:border-box;width:calc(((${heightNumber} / 2) + ${designUnit}) * 2px);height:calc(((${heightNumber} / 2) + ${designUnit}) * 1px);background:${neutralFillInputAltRest};border-radius:calc(${heightNumber} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};cursor:pointer}:host(:not(.disabled):hover) .switch{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .switch{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:${focusVisible}) .switch{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}:host(.checked) .switch{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .switch{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .switch{background:${accentFillActive};border-color:transparent}slot[name='switch']{position:absolute;display:flex;border:1px solid transparent;fill:${neutralForegroundRest};transition:all 0.2s ease-in-out}.status-message{color:${neutralForegroundRest};cursor:pointer;font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight}}.label__hidden{display:none;visibility:hidden}.label{color:${neutralForegroundRest};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}::slotted([slot="checked-message"]),::slotted([slot="unchecked-message"]){margin-inline-start:calc(${designUnit} * 2px + 2px)}:host(.checked) .switch{background:${accentFillRest}}:host(.checked) .switch slot[name='switch']{fill:${foregroundOnAccentRest};filter:drop-shadow(0px 1px 1px rgba(0,0,0,0.15))}:host(.checked:not(.disabled)) .switch:hover{background:${accentFillHover}}:host(.checked:not(.disabled)) .switch:hover slot[name='switch']{fill:${foregroundOnAccentHover}}:host(.checked:not(.disabled)) .switch:active{background:${accentFillActive}}:host(.checked:not(.disabled)) .switch:active slot[name='switch']{fill:${foregroundOnAccentActive}}:host(.checked:${focusVisible}:not(.disabled)) .switch{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};border-color:transparent}.unchecked-message{display:block}.checked-message{display:none}:host(.checked) .unchecked-message{display:none}:host(.checked) .checked-message{display:block}`.withBehaviors(new DirectionalStyleSheetBehavior(css`
+''} user-select:none}:host(.disabled){opacity:${disabledOpacity}}:host(.disabled) .label,:host(.readonly) .label,:host(.disabled) .switch,:host(.readonly) .switch,:host(.disabled) .status-message,:host(.readonly) .status-message{cursor:${disabledCursor}}.switch{position:relative;outline:none;box-sizing:border-box;width:calc(((${heightNumber} / 2) + ${designUnit}) * 2px);height:calc(((${heightNumber} / 2) + ${designUnit}) * 1px);background:${neutralFillInputAltRest};border-radius:calc(${heightNumber} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};cursor:pointer}:host(:not(.disabled):hover) .switch{background:${neutralFillInputAltHover};border-color:${neutralStrokeStrongHover}}:host(:not(.disabled):active) .switch{background:${neutralFillInputAltActive};border-color:${neutralStrokeStrongActive}}:host(:${focusVisible}) .switch{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};background:${neutralFillInputAltFocus};border-color:${focusStrokeOuter}}:host(.checked) .switch{background:${accentFillRest};border-color:transparent}:host(.checked:not(.disabled):hover) .switch{background:${accentFillHover};border-color:transparent}:host(.checked:not(.disabled):active) .switch{background:${accentFillActive};border-color:transparent}slot[name='switch']{position:absolute;display:flex;border:1px solid transparent;fill:${neutralForegroundRest};transition:all 0.2s ease-in-out}.status-message{color:${neutralForegroundRest};cursor:pointer;${typeRampBase}}.label__hidden{display:none;visibility:hidden}.label{color:${neutralForegroundRest};${typeRampBase}
+      margin-inline-end:calc(${designUnit} * 2px + 2px);cursor:pointer}::slotted([slot="checked-message"]),::slotted([slot="unchecked-message"]){margin-inline-start:calc(${designUnit} * 2px + 2px)}:host(.checked) .switch{background:${accentFillRest}}:host(.checked) .switch slot[name='switch']{fill:${foregroundOnAccentRest};filter:drop-shadow(0px 1px 1px rgba(0,0,0,0.15))}:host(.checked:not(.disabled)) .switch:hover{background:${accentFillHover}}:host(.checked:not(.disabled)) .switch:hover slot[name='switch']{fill:${foregroundOnAccentHover}}:host(.checked:not(.disabled)) .switch:active{background:${accentFillActive}}:host(.checked:not(.disabled)) .switch:active slot[name='switch']{fill:${foregroundOnAccentActive}}:host(.checked:${focusVisible}:not(.disabled)) .switch{box-shadow:0 0 0 1px ${fillColor},0 0 0 3px ${focusStrokeOuter};border-color:transparent}.unchecked-message{display:block}.checked-message{display:none}:host(.checked) .unchecked-message{display:none}:host(.checked) .checked-message{display:block}`.withBehaviors(new DirectionalStyleSheetBehavior(css`
         slot[name='switch']{left:0}:host(.checked) slot[name='switch']{left:100%;transform:translateX(-100%)}`, css`
         slot[name='switch']{right:0}:host(.checked) slot[name='switch']{right:100%;transform:translateX(100%)}`), forcedColorsStylesheetBehavior(css`
         :host(:not(.disabled)) .switch slot[name='switch']{forced-color-adjust:none;fill:${SystemColors.FieldText}}.switch{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(.checked) .switch{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight}}:host(:not(.disabled):hover) .switch,:host(:not(.disabled):active) .switch,:host(.checked:not(.disabled):hover) .switch{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight}}:host(.checked:not(.disabled)) .switch slot[name="switch"]{fill:${SystemColors.HighlightText}}:host(.checked:not(.disabled):hover) .switch slot[name='switch']{fill:${SystemColors.Highlight}}:host(:${focusVisible}) .switch{forced-color-adjust:none;background:${SystemColors.Field};border-color:${SystemColors.Highlight};box-shadow:0 0 0 1px ${SystemColors.Highlight},0 0 0 3px ${SystemColors.FieldText}}:host(.checked:${focusVisible}:not(.disabled)) .switch{forced-color-adjust:none;background:${SystemColors.Highlight};box-shadow:0 0 0 1px ${SystemColors.Field},0 0 0 3px ${SystemColors.FieldText};border-color:${SystemColors.Field}}:host(.disabled){opacity:1}:host(.disabled) slot[name='switch']{forced-color-adjust:none;fill:${SystemColors.GrayText}}:host(.disabled) .switch{background:${SystemColors.Field};border-color:${SystemColors.GrayText}}.status-message,.label{color:${SystemColors.FieldText}}`));
@@ -25417,11 +25576,13 @@ const fluentSwitch = Switch.compose({
 const switchStyles = switchStyles$1;
 
 const tabsStyles$1 = (context, definition) => css`
-      ${display('grid')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};color:${neutralForegroundRest};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${heightNumber} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${controlCornerRadius} * 1px);justify-self:center;background:${accentFillRest}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${focusStrokeWidth} * 1px);border-radius:calc(${controlCornerRadius} * 1px);align-self:center;background:${accentFillRest}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+      ${display('grid')} :host{box-sizing:border-box;${typeRampBase}
+        color:${neutralForegroundRest};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}.tablist{display:grid;grid-template-rows:calc(${heightNumber} * 1px);auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end}.start,.end{align-self:center}.activeIndicator{grid-row:2;grid-column:1;width:20px;height:3px;border-radius:calc(${controlCornerRadius} * 1px);justify-self:center;background:${accentFillRest}}.activeIndicatorTransition{transition:transform 0.2s ease-in-out}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host(.vertical){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host(.vertical) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host(.vertical) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host(.vertical) .end{grid-row:3}:host(.vertical) .activeIndicator{grid-column:1;grid-row:1;width:3px;height:20px;margin-inline-start:calc(${focusStrokeWidth} * 1px);border-radius:calc(${controlCornerRadius} * 1px);align-self:center;background:${accentFillRest}}:host(.vertical) .activeIndicatorTransition{transition:transform 0.2s linear}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         .activeIndicator,:host(.vertical) .activeIndicator{background:${SystemColors.Highlight}}`));
 
 const tabStyles$1 = (context, definition) => css`
-      ${display('inline-flex')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};font-weight:400;line-height:${typeRampBaseLineHeight};height:calc((${heightNumber} + (${designUnit} * 2)) * 1px);padding:0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent;align-items:center;justify-content:center;grid-row:1 / 3;cursor:pointer;outline:none}:host([aria-selected='true']){z-index:2}:host(:hover),:host(:active){color:${neutralForegroundRest}}:host(:${focusVisible}){border-color:${focusStrokeOuter};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset}:host(.vertical){justify-content:start;grid-column:1 / 3}:host(.vertical[aria-selected='true']){z-index:2}:host(.vertical:hover),:host(.vertical:active){color:${neutralForegroundRest}}:host(.vertical:hover[aria-selected='true']){}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+      ${display('inline-flex')} :host{box-sizing:border-box;${typeRampBase}
+        height:calc((${heightNumber} + (${designUnit} * 2)) * 1px);padding:0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid transparent;align-items:center;justify-content:center;grid-row:1 / 3;cursor:pointer;outline:none}:host([aria-selected='true']){z-index:2}:host(:hover),:host(:active){color:${neutralForegroundRest}}:host(:${focusVisible}){border-color:${focusStrokeOuter};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset}:host(.vertical){justify-content:start;grid-column:1 / 3}:host(.vertical[aria-selected='true']){z-index:2}:host(.vertical:hover),:host(.vertical:active){color:${neutralForegroundRest}}:host(.vertical:hover[aria-selected='true']){}`.withBehaviors(forcedColorsStylesheetBehavior(css`
           :host{forced-color-adjust:none;border-color:transparent;color:${SystemColors.ButtonText};fill:currentcolor}:host(:hover),:host(.vertical:hover),:host([aria-selected='true']:hover){background:transparent;color:${SystemColors.Highlight};fill:currentcolor}:host([aria-selected='true']){background:transparent;color:${SystemColors.Highlight};fill:currentcolor}:host(:${focusVisible}){background:transparent;border-color:${SystemColors.ButtonText};box-shadow:none}`));
 
 /**
@@ -25447,7 +25608,8 @@ const fluentTab = Tab.compose({
 const tabStyles = tabStyles$1;
 
 const tabPanelStyles$1 = (context, definition) => css`
-  ${display('block')} :host{box-sizing:border-box;font-family:${bodyFont};font-size:${typeRampBaseFontSize};font-weight:400;line-height:${typeRampBaseLineHeight};padding:0 calc((6 + (${designUnit} * 2 * ${density})) * 1px)}`;
+  ${display('block')} :host{box-sizing:border-box;${typeRampBase}
+    padding:0 calc((6 + (${designUnit} * 2 * ${density})) * 1px)}`;
 
 /**
  * The Fluent Tab Panel Custom Element. Implements {@link @microsoft/fast-foundation#TabPanel},
@@ -25676,7 +25838,8 @@ const fluentToolbar = Toolbar.compose({
 });
 
 const tooltipStyles = (context, definition) => css`
-    :host{position:relative;contain:layout;overflow:visible;height:0;width:0;z-index:10000}.tooltip{box-sizing:border-box;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};background:${fillColor};color:${neutralForegroundRest};padding:4px 12px;height:fit-content;width:fit-content;font-family:${bodyFont};font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};white-space:nowrap;box-shadow:${elevationShadowTooltip}}fluent-anchored-region{display:flex;justify-content:center;align-items:center;overflow:visible;flex-direction:row}fluent-anchored-region.right,fluent-anchored-region.left{flex-direction:column}fluent-anchored-region.top .tooltip::after,fluent-anchored-region.bottom .tooltip::after,fluent-anchored-region.left .tooltip::after,fluent-anchored-region.right .tooltip::after{content:'';width:12px;height:12px;background:${fillColor};border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-left:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};position:absolute}fluent-anchored-region.top .tooltip::after{transform:translateX(-50%) rotate(225deg);bottom:5px;left:50%}fluent-anchored-region.top .tooltip{margin-bottom:12px}fluent-anchored-region.bottom .tooltip::after{transform:translateX(-50%) rotate(45deg);top:5px;left:50%}fluent-anchored-region.bottom .tooltip{margin-top:12px}fluent-anchored-region.left .tooltip::after{transform:translateY(-50%) rotate(135deg);top:50%;right:5px}fluent-anchored-region.left .tooltip{margin-right:12px}fluent-anchored-region.right .tooltip::after{transform:translateY(-50%) rotate(-45deg);top:50%;left:5px}fluent-anchored-region.right .tooltip{margin-left:12px}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host{position:relative;contain:layout;overflow:visible;height:0;width:0;z-index:10000}.tooltip{box-sizing:border-box;border-radius:calc(${controlCornerRadius} * 1px);border:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};background:${fillColor};color:${neutralForegroundRest};padding:4px 12px;height:fit-content;width:fit-content;${typeRampBase}
+      white-space:nowrap;box-shadow:${elevationShadowTooltip}}fluent-anchored-region{display:flex;justify-content:center;align-items:center;overflow:visible;flex-direction:row}fluent-anchored-region.right,fluent-anchored-region.left{flex-direction:column}fluent-anchored-region.top .tooltip::after,fluent-anchored-region.bottom .tooltip::after,fluent-anchored-region.left .tooltip::after,fluent-anchored-region.right .tooltip::after{content:'';width:12px;height:12px;background:${fillColor};border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};border-left:calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};position:absolute}fluent-anchored-region.top .tooltip::after{transform:translateX(-50%) rotate(225deg);bottom:5px;left:50%}fluent-anchored-region.top .tooltip{margin-bottom:12px}fluent-anchored-region.bottom .tooltip::after{transform:translateX(-50%) rotate(45deg);top:5px;left:50%}fluent-anchored-region.bottom .tooltip{margin-top:12px}fluent-anchored-region.left .tooltip::after{transform:translateY(-50%) rotate(135deg);top:50%;right:5px}fluent-anchored-region.left .tooltip{margin-right:12px}fluent-anchored-region.right .tooltip::after{transform:translateY(-50%) rotate(-45deg);top:50%;left:5px}fluent-anchored-region.right .tooltip{margin-left:12px}`.withBehaviors(forcedColorsStylesheetBehavior(css`
         :host([disabled]){opacity:1}fluent-anchored-region.top .tooltip::after,fluent-anchored-region.bottom .tooltip::after,fluent-anchored-region.left .tooltip::after,fluent-anchored-region.right .tooltip::after{content:'';width:unset;height:unset}`));
 
 /**
@@ -25752,7 +25915,7 @@ const selectedExpandCollapseHover = DesignToken.create('tree-item-expand-collaps
   return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;
 });
 const treeItemStyles$1 = (context, definition) => css`
-    ${display('block')} :host{contain:content;position:relative;outline:none;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;font-family:${bodyFont};--expand-collapse-button-size:calc(${heightNumber} * 1px);--tree-item-nested-width:0}:host(:focus) > .positioning-region{outline:none}:host(:focus) .content-region{outline:none}.positioning-region{display:flex;position:relative;box-sizing:border-box;background:${neutralFillStealthRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);height:calc((${heightNumber} + 1) * 1px)}:host(:${focusVisible}) .positioning-region{border-color:${focusStrokeOuter};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset}.positioning-region::before{content:'';display:block;width:var(--tree-item-nested-width);flex-shrink:0}:host(:not([disabled])) .positioning-region:hover{background:${neutralFillStealthHover}}:host(:not([disabled])) .positioning-region:active{background:${neutralFillStealthActive}}.content-region{display:inline-flex;align-items:center;white-space:nowrap;width:100%;height:calc(${heightNumber} * 1px);margin-inline-start:calc(${designUnit} * 2px + 8px);font-size:${typeRampBaseFontSize};line-height:${typeRampBaseLineHeight};font-weight:400}.items{display:none;${
+    ${display('block')} :host{contain:content;position:relative;outline:none;color:${neutralForegroundRest};fill:currentcolor;cursor:pointer;font-family:${bodyFont};--expand-collapse-button-size:calc(${heightNumber} * 1px);--tree-item-nested-width:0}:host(:focus) > .positioning-region{outline:none}:host(:focus) .content-region{outline:none}.positioning-region{display:flex;position:relative;box-sizing:border-box;background:${neutralFillStealthRest};border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);height:calc((${heightNumber} + 1) * 1px)}:host(:${focusVisible}) .positioning-region{border-color:${focusStrokeOuter};box-shadow:0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset}.positioning-region::before{content:'';display:block;width:var(--tree-item-nested-width);flex-shrink:0}:host(:not([disabled])) .positioning-region:hover{background:${neutralFillStealthHover}}:host(:not([disabled])) .positioning-region:active{background:${neutralFillStealthActive}}.content-region{display:inline-flex;align-items:center;white-space:nowrap;width:100%;height:calc(${heightNumber} * 1px);margin-inline-start:calc(${designUnit} * 2px + 8px);${typeRampBase}}.items{display:none;${
 /* Font size should be based off calc(1em + (design-unit + glyph-size-number) * 1px) -
     update when density story is figured out */
 ''} font-size:calc(1em + (${designUnit} + 16) * 1px)}.expand-collapse-button{background:none;border:none;border-radius:calc(${controlCornerRadius} * 1px);outline:none;${
@@ -25887,4 +26050,4 @@ function provideFluentDesignSystem(element) {
 
 const FluentDesignSystem = provideFluentDesignSystem().register(allComponents);
 
-export { AccentButtonStyles, Accordion, AccordionItem, Anchor, AnchoredRegion, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Combobox, DataGrid, DataGridCell, DataGridRow, DesignSystemProvider, Dialog, DirectionalStyleSheetBehavior, Divider, Flipper, FluentDesignSystem, HorizontalScroll, HypertextStyles, LightweightButtonStyles, Listbox, Menu, MenuItem, NumberField, OptionStyles, OutlineButtonStyles, PaletteRGB, Progress, ProgressRing, Radio, RadioGroup, RadioStyles, Search, Select, Skeleton, Slider, SliderLabel, StandardLuminance, StealthButtonStyles, SwatchRGB, Switch, Tab, TabPanel, Tabs, TextArea, TextField, Toolbar, Tooltip, TreeItem, TreeView, accentBaseColor, accentFillActive, accentFillActiveDelta, accentFillFocus, accentFillFocusDelta, accentFillHover, accentFillHoverDelta, accentFillRecipe, accentFillRest, accentFillRestDelta, accentForegroundActive, accentForegroundActiveDelta, accentForegroundCut, accentForegroundCutLarge, accentForegroundFocus, accentForegroundFocusDelta, accentForegroundHover, accentForegroundHoverDelta, accentForegroundRecipe, accentForegroundRest, accentForegroundRestDelta, accentPalette, accentStrokeControlActive, accentStrokeControlFocus, accentStrokeControlHover, accentStrokeControlRecipe, accentStrokeControlRest, accordionItemStyles, accordionStyles, allComponents, ambientShadow, anchorStyles, anchoredRegionStyles, badgeStyles, baseButtonStyles, baseHeightMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, bodyFont, breadcrumbItemStyles, breadcrumbStyles, buttonStyles, cardStyles, checkboxStyles, comboboxStyles, controlCornerRadius, cornerRadius, dataGridCellStyles, dataGridRowStyles, dataGridStyles, density, designUnit, dialogStyles, direction, directionalShadow, disabledOpacity, dividerStyles, elevatedCornerRadius, elevation, elevationShadowCardActive, elevationShadowCardActiveSize, elevationShadowCardFocus, elevationShadowCardFocusSize, elevationShadowCardHover, elevationShadowCardHoverSize, elevationShadowCardRest, elevationShadowCardRestSize, elevationShadowDialog, elevationShadowDialogSize, elevationShadowFlyout, elevationShadowFlyoutSize, elevationShadowRecipe, elevationShadowTooltip, elevationShadowTooltipSize, fillColor, flipperStyles, fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCalendar, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentMenu, fluentMenuItem, fluentNumberField, fluentOption, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTab, fluentTabPanel, fluentTabs, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeItem, fluentTreeView, focusOutlineWidth, focusStrokeInner, focusStrokeInnerRecipe, focusStrokeOuter, focusStrokeOuterRecipe, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentActiveLarge, foregroundOnAccentFocus, foregroundOnAccentFocusLarge, foregroundOnAccentHover, foregroundOnAccentHoverLarge, foregroundOnAccentLargeRecipe, foregroundOnAccentRecipe, foregroundOnAccentRest, foregroundOnAccentRestLarge, heightNumber, horizontalScrollStyles, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, isDark, layerCornerRadius, listboxStyles, menuItemStyles, menuStyles, neutralBaseColor, neutralContrastFillActive, neutralContrastFillActiveDelta, neutralContrastFillFocus, neutralContrastFillFocusDelta, neutralContrastFillHover, neutralContrastFillHoverDelta, neutralContrastFillRest, neutralContrastFillRestDelta, neutralDivider, neutralDividerRestDelta, neutralFillActive, neutralFillActiveDelta, neutralFillCard, neutralFillCardDelta, neutralFillFocus, neutralFillFocusDelta, neutralFillHover, neutralFillHoverDelta, neutralFillInputActive, neutralFillInputActiveDelta, neutralFillInputAltActive, neutralFillInputAltActiveDelta, neutralFillInputAltFocus, neutralFillInputAltFocusDelta, neutralFillInputAltHover, neutralFillInputAltHoverDelta, neutralFillInputAltRecipe, neutralFillInputAltRest, neutralFillInputAltRestDelta, neutralFillInputFocus, neutralFillInputFocusDelta, neutralFillInputHover, neutralFillInputHoverDelta, neutralFillInputRecipe, neutralFillInputRest, neutralFillInputRestDelta, neutralFillInverseActive, neutralFillInverseActiveDelta, neutralFillInverseFocus, neutralFillInverseFocusDelta, neutralFillInverseHover, neutralFillInverseHoverDelta, neutralFillInverseRecipe, neutralFillInverseRest, neutralFillInverseRestDelta, neutralFillLayerActive, neutralFillLayerActiveDelta, neutralFillLayerAltRecipe, neutralFillLayerAltRest, neutralFillLayerAltRestDelta, neutralFillLayerHover, neutralFillLayerHoverDelta, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillLayerRestDelta, neutralFillRecipe, neutralFillRest, neutralFillRestDelta, neutralFillSecondaryActive, neutralFillSecondaryActiveDelta, neutralFillSecondaryFocus, neutralFillSecondaryFocusDelta, neutralFillSecondaryHover, neutralFillSecondaryHoverDelta, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillSecondaryRestDelta, neutralFillStealthActive, neutralFillStealthActiveDelta, neutralFillStealthFocus, neutralFillStealthFocusDelta, neutralFillStealthHover, neutralFillStealthHoverDelta, neutralFillStealthRecipe, neutralFillStealthRest, neutralFillStealthRestDelta, neutralFillStrongActive, neutralFillStrongActiveDelta, neutralFillStrongFocus, neutralFillStrongFocusDelta, neutralFillStrongHover, neutralFillStrongHoverDelta, neutralFillStrongRecipe, neutralFillStrongRest, neutralFillStrongRestDelta, neutralFillToggleActive, neutralFillToggleActiveDelta, neutralFillToggleFocus, neutralFillToggleFocusDelta, neutralFillToggleHover, neutralFillToggleHoverDelta, neutralFillToggleRest, neutralFillToggleRestDelta, neutralFocus, neutralFocusInnerAccent, neutralForegroundActive, neutralForegroundFocus, neutralForegroundHint, neutralForegroundHintRecipe, neutralForegroundHover, neutralForegroundRecipe, neutralForegroundRest, neutralLayer1, neutralLayer1Recipe, neutralLayer2, neutralLayer2Recipe, neutralLayer3, neutralLayer3Recipe, neutralLayer4, neutralLayer4Recipe, neutralLayerCardContainer, neutralLayerCardContainerRecipe, neutralLayerFloating, neutralLayerFloatingRecipe, neutralLayerL1, neutralLayerL2, neutralLayerL3, neutralLayerL4, neutralOutlineActive, neutralOutlineFocus, neutralOutlineHover, neutralOutlineRest, neutralPalette, neutralStrokeActive, neutralStrokeActiveDelta, neutralStrokeControlActive, neutralStrokeControlActiveDelta, neutralStrokeControlFocus, neutralStrokeControlFocusDelta, neutralStrokeControlHover, neutralStrokeControlHoverDelta, neutralStrokeControlRecipe, neutralStrokeControlRest, neutralStrokeControlRestDelta, neutralStrokeDividerRecipe, neutralStrokeDividerRest, neutralStrokeDividerRestDelta, neutralStrokeFocus, neutralStrokeFocusDelta, neutralStrokeHover, neutralStrokeHoverDelta, neutralStrokeInputActive, neutralStrokeInputFocus, neutralStrokeInputHover, neutralStrokeInputRecipe, neutralStrokeInputRest, neutralStrokeLayerActive, neutralStrokeLayerActiveDelta, neutralStrokeLayerHover, neutralStrokeLayerHoverDelta, neutralStrokeLayerRecipe, neutralStrokeLayerRest, neutralStrokeLayerRestDelta, neutralStrokeRecipe, neutralStrokeRest, neutralStrokeRestDelta, neutralStrokeStrongActive, neutralStrokeStrongActiveDelta, neutralStrokeStrongFocus, neutralStrokeStrongFocusDelta, neutralStrokeStrongHover, neutralStrokeStrongHoverDelta, neutralStrokeStrongRecipe, neutralStrokeStrongRest, numberFieldStyles, outlineWidth, progressRingStyles, progressStyles, provideFluentDesignSystem, radioGroupStyles, searchStyles, searchTemplate, selectStyles, skeletonStyles, sliderLabelStyles, sliderStyles, strokeWidth, switchStyles, tabPanelStyles, tabStyles, tabsStyles, textAreaStyles, textFieldStyles, treeItemStyles, treeViewStyles, typeRampBaseFontSize, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6LineHeight };
+export { AccentButtonStyles, Accordion, AccordionItem, Anchor, AnchoredRegion, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Combobox, DataGrid, DataGridCell, DataGridRow, DesignSystemProvider, Dialog, DirectionalStyleSheetBehavior, Divider, Flipper, FluentDesignSystem, HorizontalScroll, HypertextStyles, LightweightButtonStyles, Listbox, Menu, MenuItem, NumberField, OptionStyles, OutlineButtonStyles, PaletteRGB, Progress, ProgressRing, Radio, RadioGroup, RadioStyles, Search, Select, Skeleton, Slider, SliderLabel, StandardLuminance, StealthButtonStyles, SwatchRGB, Switch, Tab, TabPanel, Tabs, TextArea, TextField, Toolbar, Tooltip, TreeItem, TreeView, accentBaseColor, accentFillActive, accentFillActiveDelta, accentFillFocus, accentFillFocusDelta, accentFillHover, accentFillHoverDelta, accentFillRecipe, accentFillRest, accentFillRestDelta, accentForegroundActive, accentForegroundActiveDelta, accentForegroundCut, accentForegroundCutLarge, accentForegroundFocus, accentForegroundFocusDelta, accentForegroundHover, accentForegroundHoverDelta, accentForegroundRecipe, accentForegroundRest, accentForegroundRestDelta, accentPalette, accentStrokeControlActive, accentStrokeControlFocus, accentStrokeControlHover, accentStrokeControlRecipe, accentStrokeControlRest, accordionItemStyles, accordionStyles, allComponents, ambientShadow, anchorStyles, anchoredRegionStyles, badgeStyles, baseButtonStyles, baseHeightMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, bodyFont, breadcrumbItemStyles, breadcrumbStyles, buttonStyles, cardStyles, checkboxStyles, comboboxStyles, controlCornerRadius, cornerRadius, dataGridCellStyles, dataGridRowStyles, dataGridStyles, density, designUnit, dialogStyles, direction, directionalShadow, disabledOpacity, dividerStyles, elevatedCornerRadius, elevation, elevationShadowCardActive, elevationShadowCardActiveSize, elevationShadowCardFocus, elevationShadowCardFocusSize, elevationShadowCardHover, elevationShadowCardHoverSize, elevationShadowCardRest, elevationShadowCardRestSize, elevationShadowDialog, elevationShadowDialogSize, elevationShadowFlyout, elevationShadowFlyoutSize, elevationShadowRecipe, elevationShadowTooltip, elevationShadowTooltipSize, fillColor, flipperStyles, fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCalendar, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentMenu, fluentMenuItem, fluentNumberField, fluentOption, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTab, fluentTabPanel, fluentTabs, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeItem, fluentTreeView, focusOutlineWidth, focusStrokeInner, focusStrokeInnerRecipe, focusStrokeOuter, focusStrokeOuterRecipe, focusStrokeWidth, fontWeight, foregroundOnAccentActive, foregroundOnAccentActiveLarge, foregroundOnAccentFocus, foregroundOnAccentFocusLarge, foregroundOnAccentHover, foregroundOnAccentHoverLarge, foregroundOnAccentLargeRecipe, foregroundOnAccentRecipe, foregroundOnAccentRest, foregroundOnAccentRestLarge, heightNumber, horizontalScrollStyles, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, isDark, layerCornerRadius, listboxStyles, menuItemStyles, menuStyles, neutralBaseColor, neutralContrastFillActive, neutralContrastFillActiveDelta, neutralContrastFillFocus, neutralContrastFillFocusDelta, neutralContrastFillHover, neutralContrastFillHoverDelta, neutralContrastFillRest, neutralContrastFillRestDelta, neutralDivider, neutralDividerRestDelta, neutralFillActive, neutralFillActiveDelta, neutralFillCard, neutralFillCardDelta, neutralFillFocus, neutralFillFocusDelta, neutralFillHover, neutralFillHoverDelta, neutralFillInputActive, neutralFillInputActiveDelta, neutralFillInputAltActive, neutralFillInputAltActiveDelta, neutralFillInputAltFocus, neutralFillInputAltFocusDelta, neutralFillInputAltHover, neutralFillInputAltHoverDelta, neutralFillInputAltRecipe, neutralFillInputAltRest, neutralFillInputAltRestDelta, neutralFillInputFocus, neutralFillInputFocusDelta, neutralFillInputHover, neutralFillInputHoverDelta, neutralFillInputRecipe, neutralFillInputRest, neutralFillInputRestDelta, neutralFillInverseActive, neutralFillInverseActiveDelta, neutralFillInverseFocus, neutralFillInverseFocusDelta, neutralFillInverseHover, neutralFillInverseHoverDelta, neutralFillInverseRecipe, neutralFillInverseRest, neutralFillInverseRestDelta, neutralFillLayerActive, neutralFillLayerActiveDelta, neutralFillLayerAltRecipe, neutralFillLayerAltRest, neutralFillLayerAltRestDelta, neutralFillLayerHover, neutralFillLayerHoverDelta, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillLayerRestDelta, neutralFillRecipe, neutralFillRest, neutralFillRestDelta, neutralFillSecondaryActive, neutralFillSecondaryActiveDelta, neutralFillSecondaryFocus, neutralFillSecondaryFocusDelta, neutralFillSecondaryHover, neutralFillSecondaryHoverDelta, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillSecondaryRestDelta, neutralFillStealthActive, neutralFillStealthActiveDelta, neutralFillStealthFocus, neutralFillStealthFocusDelta, neutralFillStealthHover, neutralFillStealthHoverDelta, neutralFillStealthRecipe, neutralFillStealthRest, neutralFillStealthRestDelta, neutralFillStrongActive, neutralFillStrongActiveDelta, neutralFillStrongFocus, neutralFillStrongFocusDelta, neutralFillStrongHover, neutralFillStrongHoverDelta, neutralFillStrongRecipe, neutralFillStrongRest, neutralFillStrongRestDelta, neutralFillToggleActive, neutralFillToggleActiveDelta, neutralFillToggleFocus, neutralFillToggleFocusDelta, neutralFillToggleHover, neutralFillToggleHoverDelta, neutralFillToggleRest, neutralFillToggleRestDelta, neutralFocus, neutralFocusInnerAccent, neutralForegroundActive, neutralForegroundFocus, neutralForegroundHint, neutralForegroundHintRecipe, neutralForegroundHover, neutralForegroundRecipe, neutralForegroundRest, neutralLayer1, neutralLayer1Recipe, neutralLayer2, neutralLayer2Recipe, neutralLayer3, neutralLayer3Recipe, neutralLayer4, neutralLayer4Recipe, neutralLayerCardContainer, neutralLayerCardContainerRecipe, neutralLayerFloating, neutralLayerFloatingRecipe, neutralLayerL1, neutralLayerL2, neutralLayerL3, neutralLayerL4, neutralOutlineActive, neutralOutlineFocus, neutralOutlineHover, neutralOutlineRest, neutralPalette, neutralStrokeActive, neutralStrokeActiveDelta, neutralStrokeControlActive, neutralStrokeControlActiveDelta, neutralStrokeControlFocus, neutralStrokeControlFocusDelta, neutralStrokeControlHover, neutralStrokeControlHoverDelta, neutralStrokeControlRecipe, neutralStrokeControlRest, neutralStrokeControlRestDelta, neutralStrokeDividerRecipe, neutralStrokeDividerRest, neutralStrokeDividerRestDelta, neutralStrokeFocus, neutralStrokeFocusDelta, neutralStrokeHover, neutralStrokeHoverDelta, neutralStrokeInputActive, neutralStrokeInputFocus, neutralStrokeInputHover, neutralStrokeInputRecipe, neutralStrokeInputRest, neutralStrokeLayerActive, neutralStrokeLayerActiveDelta, neutralStrokeLayerHover, neutralStrokeLayerHoverDelta, neutralStrokeLayerRecipe, neutralStrokeLayerRest, neutralStrokeLayerRestDelta, neutralStrokeRecipe, neutralStrokeRest, neutralStrokeRestDelta, neutralStrokeStrongActive, neutralStrokeStrongActiveDelta, neutralStrokeStrongFocus, neutralStrokeStrongFocusDelta, neutralStrokeStrongHover, neutralStrokeStrongHoverDelta, neutralStrokeStrongRecipe, neutralStrokeStrongRest, numberFieldStyles, outlineWidth, progressRingStyles, progressStyles, provideFluentDesignSystem, radioGroupStyles, searchStyles, searchTemplate, selectStyles, skeletonStyles, sliderLabelStyles, sliderStyles, strokeWidth, switchStyles, tabPanelStyles, tabStyles, tabsStyles, textAreaStyles, textFieldStyles, treeItemStyles, treeViewStyles, typeRampBase, typeRampBaseFontSize, typeRampBaseFontVariations, typeRampBaseLineHeight, typeRampMinus1, typeRampMinus1FontSize, typeRampMinus1FontVariations, typeRampMinus1LineHeight, typeRampMinus2, typeRampMinus2FontSize, typeRampMinus2FontVariations, typeRampMinus2LineHeight, typeRampPlus1, typeRampPlus1FontSize, typeRampPlus1FontVariations, typeRampPlus1LineHeight, typeRampPlus2, typeRampPlus2FontSize, typeRampPlus2FontVariations, typeRampPlus2LineHeight, typeRampPlus3, typeRampPlus3FontSize, typeRampPlus3FontVariations, typeRampPlus3LineHeight, typeRampPlus4, typeRampPlus4FontSize, typeRampPlus4FontVariations, typeRampPlus4LineHeight, typeRampPlus5, typeRampPlus5FontSize, typeRampPlus5FontVariations, typeRampPlus5LineHeight, typeRampPlus6, typeRampPlus6FontSize, typeRampPlus6FontVariations, typeRampPlus6LineHeight };