@fluentui/web-components 2.5.6 → 2.5.7

package/dist/web-components.js

@@ -24174,49 +24174,58 @@ const elevationShadowDialogSize = DesignToken.create('elevation-shadow-dialog-si
 const elevationShadowDialog = DesignToken.create('elevation-shadow-dialog').withDefault(element => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowDialogSize.getValueFor(element)));
 
 /**
+ * The base styles for button controls, without `appearance` visual differences.
+ *
  * @internal
  */
 
-const baseButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
-    ${display('inline-flex')} :host{position:relative;box-sizing:border-box;${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}{${focusTreatmentBase}}: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};outline-color:${SystemColors.Highlight}}: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;outline-color:${SystemColors.LinkText}}`));
+const baseButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
+    ${display('inline-flex')}
+    
+    :host{position:relative;box-sizing:border-box;${typeRampBase}
+      height:calc(${heightNumber} * 1px);min-width:calc(${heightNumber} * 1px);color:${neutralForegroundRest};border-radius:calc(${controlCornerRadius} * 1px);fill:currentcolor}.control{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;font-family:inherit}.control,.end,.start{font:inherit}.control.icon-only{padding:0;line-height:0}.control:${focusVisible}{${focusTreatmentBase}}.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}`;
 /**
  * @internal
  */
 
-const AccentButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
-    :host .control{background:padding-box linear-gradient(${accentFillRest},${accentFillRest}),border-box ${accentStrokeControlRest};color:${foregroundOnAccentRest}}:host .control${interactivitySelector}:hover{background:padding-box linear-gradient(${accentFillHover},${accentFillHover}),border-box ${accentStrokeControlHover};color:${foregroundOnAccentHover}}:host .control${interactivitySelector}:active{background:padding-box linear-gradient(${accentFillActive},${accentFillActive}),border-box ${accentStrokeControlActive};color:${foregroundOnAccentActive}}:host .control:${focusVisible}{${focusTreatmentBase}
-      box-shadow:0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${focusStrokeInner} inset !important}:host .control${nonInteractivitySelector}{background:${accentFillRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host .control{forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight};color:${SystemColors.Highlight}}:host .control:${focusVisible}{background:${SystemColors.Highlight};outline-color:${SystemColors.Highlight};box-shadow:0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important}:host([href]) .control{background:${SystemColors.LinkText};color:${SystemColors.HighlightText}}:host([href]) .control:hover{background:${SystemColors.ButtonFace};border-color:${SystemColors.LinkText};color:${SystemColors.LinkText};fill:currentcolor}:host([href]) .control:${focusVisible}{background:${SystemColors.LinkText};outline-color:${SystemColors.LinkText};box-shadow:0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important;color:${SystemColors.HighlightText};fill:currentcolor}`));
+const NeutralButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
+    .control{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeControlRest}}:host(${interactivitySelector}:hover) .control{background:padding-box linear-gradient(${neutralFillHover},${neutralFillHover}),border-box ${neutralStrokeControlHover}}:host(${interactivitySelector}:active) .control{background:padding-box linear-gradient(${neutralFillActive},${neutralFillActive}),border-box ${neutralStrokeControlActive}}:host(${nonInteractivitySelector}) .control{background:padding-box linear-gradient(${neutralFillRest},${neutralFillRest}),border-box ${neutralStrokeRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+        .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText}}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{forced-color-adjust:none;background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight};color:${SystemColors.Highlight}}:host(${nonInteractivitySelector}) .control{background:transparent;border-color:${SystemColors.GrayText};color:${SystemColors.GrayText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText}}:host([href]) .control{background:transparent;border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}:host([href]:hover) .control,:host([href]:active) .control{background:transparent;border-color:${SystemColors.CanvasText};color:${SystemColors.CanvasText}}`));
 /**
  * @internal
  */
 
-const HypertextStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
-    :host{height:auto;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0}:host .control{display:inline;padding:0;background:transparent;border:none;box-shadow:none;line-height:1;text-decoration:underline 1px}:host .control:not([href]){background:transparent}:host .control${interactivitySelector}{background:transparent;color:${accentForegroundRest}}:host .control${interactivitySelector}:hover{background:transparent;color:${accentForegroundHover};text-decoration:none}:host .control${interactivitySelector}:active{background:transparent;color:${accentForegroundActive};text-decoration:none}:host .control:${focusVisible}{${focusTreatmentTight}}:host .control${nonInteractivitySelector}{background:transparent}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-      :host .control${interactivitySelector}:hover{color:${SystemColors.Highlight};fill:currentcolor}:host .control:${focusVisible}{color:${SystemColors.LinkText}}`));
+const AccentButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
+    .control{background:padding-box linear-gradient(${accentFillRest},${accentFillRest}),border-box ${accentStrokeControlRest};color:${foregroundOnAccentRest}}:host(${interactivitySelector}:hover) .control{background:padding-box linear-gradient(${accentFillHover},${accentFillHover}),border-box ${accentStrokeControlHover};color:${foregroundOnAccentHover}}:host(${interactivitySelector}:active) .control{background:padding-box linear-gradient(${accentFillActive},${accentFillActive}),border-box ${accentStrokeControlActive};color:${foregroundOnAccentActive}}:host(${nonInteractivitySelector}) .control{background:${accentFillRest}}.control:${focusVisible}{box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeInner} inset !important}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+        .control{forced-color-adjust:none;background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight};color:${SystemColors.Highlight}}:host(${nonInteractivitySelector}) .control{background:transparent;border-color:${SystemColors.GrayText};color:${SystemColors.GrayText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText};box-shadow:0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.HighlightText} inset !important}:host([href]) .control{background:${SystemColors.LinkText};color:${SystemColors.HighlightText}}:host([href]:hover) .control,:host([href]:active) .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}`));
 /**
  * @internal
  */
 
-const LightweightButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
-    :host{color:${accentForegroundRest}}:host .control{background:${neutralFillStealthRest}}:host .control${interactivitySelector}:hover{background:${neutralFillStealthHover};color:${accentForegroundHover}}:host .control${interactivitySelector}:active{background:${neutralFillStealthActive};color:${accentForegroundActive}}:host .control${nonInteractivitySelector}{background:${neutralFillStealthRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host .control{border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText}}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active,:host .control:${focusVisible}{border-color:${SystemColors.Highlight};background:${SystemColors.Highlight};color:${SystemColors.HighlightText}}:host([href]) .control{border-color:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}:host([href]) .control:hover,:host([href]) .control:${focusVisible}{background:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}`));
+const HypertextStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
+    :host{height:auto;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0}.control{display:inline;padding:0;border:none;box-shadow:none;line-height:1}:host(${interactivitySelector}) .control{color:${accentForegroundRest};text-decoration:underline 1px}:host(${interactivitySelector}:hover) .control{color:${accentForegroundHover};text-decoration:none}:host(${interactivitySelector}:active) .control{color:${accentForegroundActive};text-decoration:none}.control:${focusVisible}{${focusTreatmentTight}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+        :host(${interactivitySelector}) .control{color:${SystemColors.LinkText}}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{color:${SystemColors.CanvasText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText}}`));
 /**
  * @internal
  */
 
-const OutlineButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
-    :host .control{background:transparent !important;border-color:${neutralStrokeRest}}:host .control${interactivitySelector}:hover{border-color:${neutralStrokeHover}}:host .control${interactivitySelector}:active{border-color:${neutralStrokeActive}}:host .control${nonInteractivitySelector}{background:transparent !important;border-color:${neutralStrokeRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host .control${nonInteractivitySelector}{border-color:${SystemColors.ButtonText}}:host .control${interactivitySelector}:hover{border-color:${SystemColors.Highlight};color:${SystemColors.ButtonText}}:host([href]){border-color:${SystemColors.LinkText}}:host([href]) .control:hover{outline-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}`));
+const LightweightButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
+    :host{color:${accentForegroundRest}}.control{background:${neutralFillStealthRest}}:host(${interactivitySelector}:hover) .control{background:${neutralFillStealthHover};color:${accentForegroundHover}}:host(${interactivitySelector}:active) .control{background:${neutralFillStealthActive};color:${accentForegroundActive}}:host(${nonInteractivitySelector}) .control{background:${neutralFillStealthRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+        :host{color:${SystemColors.ButtonText}}.control{forced-color-adjust:none;background:transparent}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{background:transparent;border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText}}:host(${nonInteractivitySelector}) .control{background:transparent;color:${SystemColors.GrayText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText}}:host([href]) .control{color:${SystemColors.LinkText}}:host([href]:hover) .control,:host([href]:active) .control{border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}`));
 /**
  * @internal
  */
 
-const StealthButtonStyles = (context, definition, interactivitySelector = '', nonInteractivitySelector = '') => css`
-    :host .control{background:${neutralFillStealthRest}}:host .control${interactivitySelector}:hover{background:${neutralFillStealthHover}}:host .control${interactivitySelector}:active{background:${neutralFillStealthActive}}:host .control${nonInteractivitySelector}{background:${neutralFillStealthRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host .control{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonFace};color:${SystemColors.ButtonText};fill:currentcolor}:host .control${interactivitySelector}:hover,:host .control${interactivitySelector}:active,:host .control:${focusVisible}{background:${SystemColors.Highlight};border-color:${SystemColors.Highlight};color:${SystemColors.HighlightText};fill:currentcolor}:host([href]) .control{border-color:${SystemColors.ButtonFace};color:${SystemColors.LinkText}}:host([href]) .control:hover,:host([href]) .control:${focusVisible}{background:${SystemColors.LinkText};border-color:${SystemColors.LinkText};color:${SystemColors.HighlightText};fill:currentcolor}`));
+const OutlineButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
+    .control{background:transparent !important;border-color:${neutralStrokeRest}}:host(${interactivitySelector}:hover) .control{border-color:${neutralStrokeHover}}:host(${interactivitySelector}:active) .control{border-color:${neutralStrokeActive}}:host(${nonInteractivitySelector}) .control{background:transparent !important;border-color:${neutralStrokeRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+        .control{border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText}}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{background:${SystemColors.HighlightText};border-color:${SystemColors.Highlight};color:${SystemColors.Highlight}}:host(${nonInteractivitySelector}) .control{border-color:${SystemColors.GrayText};color:${SystemColors.GrayText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText}}:host([href]) .control{border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}:host([href]:hover) .control,:host([href]:active) .control{border-color:${SystemColors.CanvasText};color:${SystemColors.CanvasText}}`));
+/**
+ * @internal
+ */
+
+const StealthButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css`
+    .control{background:${neutralFillStealthRest}}:host(${interactivitySelector}:hover) .control{background:${neutralFillStealthHover}}:host(${interactivitySelector}:active) .control{background:${neutralFillStealthActive}}:host(${nonInteractivitySelector}) .control{background:${neutralFillStealthRest}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+        .control{forced-color-adjust:none;background:transparent;color:${SystemColors.ButtonText}}:host(${interactivitySelector}:hover) .control,:host(${interactivitySelector}:active) .control{background:transparent;border-color:${SystemColors.ButtonText};color:${SystemColors.ButtonText}}:host(${nonInteractivitySelector}) .control{background:transparent;color:${SystemColors.GrayText}}.control:${focusVisible}{outline-color:${SystemColors.CanvasText}}:host([href]) .control{color:${SystemColors.LinkText}}:host([href]:hover) .control,:host([href]:active) .control{background:transparent;border-color:${SystemColors.LinkText};color:${SystemColors.LinkText}}`));
 
 const placeholderRest = DesignToken.create('input-placeholder-rest').withDefault(target => {
   const baseRecipe = neutralFillInputRecipe.getValueFor(target);
@@ -24239,37 +24248,46 @@ const filledPlaceholderHover = DesignToken.create('input-filled-placeholder-hove
   return hintRecipe.evaluate(target, baseRecipe.evaluate(target).hover);
 });
 /**
+ * The base styles for input controls, without `appearance` visual differences.
+ *
  * @internal
  */
 
-const inputStyles = (context, definition, rootSelector) => css`
+const baseInputStyles = (context, definition, logicalControlSelector) => css`
   :host{${typeRampBase}
-    color:${neutralForegroundRest};fill:currentcolor;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%;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}}`;
+    color:${neutralForegroundRest};fill:currentcolor;user-select:none;position:relative}${logicalControlSelector}{box-sizing:border-box;position:relative;color:inherit;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%;outline:none}.label{display:block;color:${neutralForegroundRest};cursor:pointer;${typeRampBase}
+    margin-bottom:4px}.label__hidden{display:none;visibility:hidden}:host([disabled]) ${logicalControlSelector},:host([readonly]) ${logicalControlSelector},:host([disabled]) .label,:host([readonly]) .label,:host([disabled]) .control,:host([readonly]) .control{cursor:${disabledCursor}}:host([disabled]){opacity:${disabledOpacity}}`;
 /**
+ * The styles for active and focus interactions for input controls.
+ *
  * @internal
  */
 
-const inputStateStyles = (context, definition, rootSelector) => css`
-  :host(:not([disabled]):active)::after{left:50%;width:40%;transform:translateX(-50%);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not([disabled]):focus-within)::after{left:0;width:100%;transform:none}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{content:'';position:absolute;height:calc(${focusStrokeWidth} * 1px);bottom:0;border-bottom:calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};border-bottom-left-radius:calc(${controlCornerRadius} * 1px);border-bottom-right-radius:calc(${controlCornerRadius} * 1px);z-index:2;transition:all 300ms cubic-bezier(0.1,0.9,0.2,1)}`;
+const inputStateStyles = (context, definition, logicalControlSelector) => css`
+  @media (forced-colors:none){:host(:not([disabled]):active)::after{left:50%;width:40%;transform:translateX(-50%);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not([disabled]):focus-within)::after{left:0;width:100%;transform:none}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{content:'';position:absolute;height:calc(${focusStrokeWidth} * 1px);bottom:0;border-bottom:calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};border-bottom-left-radius:calc(${controlCornerRadius} * 1px);border-bottom-right-radius:calc(${controlCornerRadius} * 1px);z-index:2;transition:all 300ms cubic-bezier(0.1,0.9,0.2,1)}}`;
 /**
+ * The visual styles for inputs with `appearance='outline'`.
+ *
  * @internal
  */
 
-const inputFilledStyles = (context, definition, rootSelector) => css`
-  :host ${rootSelector}{background:${neutralFillSecondaryRest};border-color:transparent}:host(:hover:not([disabled]):not(:focus-within)) ${rootSelector}{background:${neutralFillSecondaryHover};border-color:transparent}.control::placeholder{color:${filledPlaceholderRest}}:host(:hover:not([disabled]):not(:focus-within)) .control::placeholder{color:${filledPlaceholderHover}}:host(:focus-within:not([disabled])) ${rootSelector}{border-color:transparent}`;
+const inputOutlineStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css`
+  ${logicalControlSelector}{background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeInputRest}}:host(${interactivitySelector}:hover) ${logicalControlSelector}{background:padding-box linear-gradient(${neutralFillInputHover},${neutralFillInputHover}),border-box ${neutralStrokeInputHover}}:host(:not([disabled]):focus-within) ${logicalControlSelector}{background:padding-box linear-gradient(${neutralFillInputFocus},${neutralFillInputFocus}),border-box ${neutralStrokeInputRest}}:host([disabled]) ${logicalControlSelector}{background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeRest}}.control::placeholder{color:${placeholderRest}}:host(${interactivitySelector}:hover) .control::placeholder{color:${placeholderHover}}`;
 /**
+ * The visual styles for inputs with `appearance='filled'`.
+ *
  * @internal
  */
 
-const inputForcedColorStyles = (context, definition, rootSelector) => css`
-  :host ${rootSelector}{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(:hover:not([disabled]):not(:focus-within)) ${rootSelector}{border-color:${SystemColors.Highlight}}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{border-bottom-color:${SystemColors.Highlight}}:host([disabled]){opacity:1}:host([disabled]) ${rootSelector}{border-color:${SystemColors.GrayText}}:host([disabled]) ::placeholder,:host([disabled]) ::-webkit-input-placeholder,:host([disabled]) .label{color:${SystemColors.GrayText};fill:currentcolor}`;
+const inputFilledStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css`
+  ${logicalControlSelector}{background:${neutralFillSecondaryRest}}:host(${interactivitySelector}:hover) ${logicalControlSelector}{background:${neutralFillSecondaryHover}}:host(:not([disabled]):focus-within) ${logicalControlSelector}{background:${neutralFillSecondaryFocus}}:host([disabled]) ${logicalControlSelector}{background:${neutralFillSecondaryRest}}.control::placeholder{color:${filledPlaceholderRest}}:host(${interactivitySelector}:hover) .control::placeholder{color:${filledPlaceholderHover}}`;
 /**
  * @internal
  */
 
-const inputFilledForcedColorStyles = (context, definition, rootSelector) => css`
-  :host ${rootSelector},:host(:hover:not([disabled])) ${rootSelector},:host(:active:not([disabled])) ${rootSelector},:host(:focus-within:not([disabled])) ${rootSelector}{background:${SystemColors.Field};border-color:${SystemColors.FieldText}}:host(:not([disabled]):active)::after,:host(:not([disabled]):focus-within:not(:active))::after{border-bottom-color:${SystemColors.Highlight}}:host([disabled]) ${rootSelector}{border-color:${SystemColors.GrayText}}`;
+const inputForcedColorStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css`
+  :host{color:${SystemColors.ButtonText}}${logicalControlSelector}{background:${SystemColors.ButtonFace};border-color:${SystemColors.ButtonText}}:host(${interactivitySelector}:hover) ${logicalControlSelector},:host(:not([disabled]):focus-within) ${logicalControlSelector}{border-color:${SystemColors.Highlight}}:host([disabled]) ${logicalControlSelector}{opacity:1;background:${SystemColors.ButtonFace};border-color:${SystemColors.GrayText}}.control::placeholder,:host(${interactivitySelector}:hover) .control::placeholder{color:${SystemColors.CanvasText}}:host(:not([disabled]):focus) ${logicalControlSelector}{${focusTreatmentBase}
+    outline-color:${SystemColors.Highlight}}:host([disabled]){opacity:1;color:${SystemColors.GrayText}}:host([disabled]) ::placeholder,:host([disabled]) ::-webkit-input-placeholder{color:${SystemColors.GrayText}}`;
 
 /**
  * Behavior that will conditionally apply a stylesheet based on the elements
@@ -24285,11 +24303,8 @@ function appearanceBehavior(value, styles) {
   return new PropertyStyleSheetBehavior('appearance', value, styles);
 }
 
-const interactivitySelector$1 = '[href]';
-const nonInteractivitySelector$1 = ':not([href])';
-const anchorStyles$1 = (context, definition) => css`
-    :host .control:not([href]){cursor:default}${baseButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)}
-  `.withBehaviors(appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)), appearanceBehavior('hypertext', HypertextStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector$1)));
+const interactivitySelector$3 = '[href]';
+const anchorStyles$1 = (context, definition) => baseButtonStyles().withBehaviors(appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector$3)), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector$3)), appearanceBehavior('hypertext', HypertextStyles(context, definition, interactivitySelector$3)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector$3)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector$3)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector$3)));
 
 /**
  * The Fluent version of Anchor
@@ -24500,22 +24515,11 @@ const fluentBreadcrumbItem = BreadcrumbItem.compose({
 
 const breadcrumbItemStyles = breadcrumbItemStyles$1;
 
-const interactivitySelector = ':not([disabled])';
-const nonInteractivitySelector = '[disabled]';
+const interactivitySelector$2 = ':not([disabled])';
+const nonInteractivitySelector$1 = '[disabled]';
 const buttonStyles$1 = (context, definition) => css`
-    :host([disabled]){opacity:${disabledOpacity};cursor:${disabledCursor}}${baseButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css`
-        :host([disabled]){opacity:1}:host([disabled]) .control{border-color:${SystemColors.GrayText};color:${SystemColors.GrayText};fill:currentcolor}`), appearanceBehavior('accent', css`
-      ${AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},`.withBehaviors(forcedColorsStylesheetBehavior(css`
-            :host([disabled]) .control{background:${SystemColors.ButtonFace}}`))), appearanceBehavior('lightweight', css`
-      ${LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},`.withBehaviors(forcedColorsStylesheetBehavior(css`
-            :host([disabled]) .control{border-color:${SystemColors.ButtonFace}}`))), appearanceBehavior('outline', css`
-      ${OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-      `.withBehaviors(forcedColorsStylesheetBehavior(css`
-            :host([disabled]) .control{border-color:${SystemColors.GrayText}}`))), appearanceBehavior('stealth', css`
-      ${StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-      `.withBehaviors(forcedColorsStylesheetBehavior(css`
-            :host([disabled]) .control{border-color:${SystemColors.ButtonFace}}`))));
+    :host(${interactivitySelector$2}) .control{cursor:pointer}:host(${nonInteractivitySelector$1}) .control{cursor:${disabledCursor}}@media (forced-colors:none){:host(${nonInteractivitySelector$1}) .control{opacity:${disabledOpacity}}}${baseButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)}
+  `.withBehaviors(appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector$2, nonInteractivitySelector$1)));
 
 /**
  * The Fluent button class
@@ -24775,21 +24779,37 @@ const fluentCheckbox = Checkbox.compose({
 
 const checkboxStyles = checkboxStyles$1;
 
-const selectFilledStyles = (context, definition) => css`
-  :host{background:${neutralFillSecondaryRest};border-color:transparent}:host(:not([disabled]):not([open]):hover){background:${neutralFillSecondaryHover};border-color:transparent}:host(:not([disabled]):not([open]):active){background:${neutralFillSecondaryActive};border-color:transparent}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-      :host(:not([disabled]):not([open]):hover){background:transparent}:host(:not([disabled]):not([open]):hover),:host(:not([disabled]):not([open]):active){border-color:${SystemColors.Highlight}}`));
-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;${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}){${focusTreatmentBase}}: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;outline-color:${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 logicalControlSelector$5 = '.control';
+const interactivitySelector$1 = ':not([disabled]):not([open])';
+const nonInteractivitySelector = '[disabled]';
+/**
+ * The base styles for a select and combobox, without `appearance` visual differences.
+ *
+ * @internal
+ */
+
+const baseSelectStyles = (context, definition) => css`
+    ${display('inline-flex')}
+    
+    :host{border-radius:calc(${controlCornerRadius} * 1px);box-sizing:border-box;color:${neutralForegroundRest};fill:currentcolor;font-family:${bodyFont};position:relative;user-select:none;min-width:250px;vertical-align:top}.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);overflow-y:auto;position:absolute;width:100%;z-index:1;margin:1px 0;border:calc(${strokeWidth} * 1px) solid transparent}.listbox[hidden]{display:none}.control{border:calc(${strokeWidth} * 1px) solid transparent;border-radius:calc(${controlCornerRadius} * 1px);height:calc(${heightNumber} * 1px);align-items:center;box-sizing:border-box;cursor:pointer;display:flex;${typeRampBase}
+      min-height:100%;padding:0 calc(${designUnit} * 2.25px);width:100%}:host(:${focusVisible}){${focusTreatmentBase}}:host([disabled]) .control{cursor:${disabledCursor};opacity:${disabledOpacity};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}`;
+/**
+ * @internal
+ */
 
+const baseSelectForcedColorStyles = (context, definition) => css`
+    :host([open]) .listbox{background:${SystemColors.ButtonFace};border-color:${SystemColors.CanvasText}}`;
+const selectStyles$1 = (context, definition) => baseSelectStyles().withBehaviors(appearanceBehavior('outline', NeutralButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$5, interactivitySelector$1).withBehaviors(forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$5, interactivitySelector$1)))), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector$1, nonInteractivitySelector)), forcedColorsStylesheetBehavior(baseSelectForcedColorStyles()));
+
+const logicalControlSelector$4 = '.control';
+const interactivitySelector = ':not([disabled]):not([open])';
 const comboboxStyles$1 = (context, definition) => css`
-    ${selectStyles$1()}
+    ${baseSelectStyles()}
+
+    ${inputStateStyles()}
 
-    :host{background:padding-box linear-gradient(${neutralFillInputRest},${neutralFillInputRest}),border-box ${neutralStrokeInputRest}}:host(:not([disabled]):not([open]):hover){background:padding-box linear-gradient(${neutralFillInputHover},${neutralFillInputHover}),border-box ${neutralStrokeInputHover}}:host(:not([disabled]):not([open]):active){background:padding-box linear-gradient(${neutralFillInputActive},${neutralFillInputActive}),border-box ${neutralStrokeInputActive}}: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%;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%;outline:none}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$4, interactivitySelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$4, interactivitySelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$4, interactivitySelector)));
 
 /**
  * The Fluent combobox class
@@ -25615,21 +25635,15 @@ const fluentMenuItem = MenuItem.compose({
 
 const menuItemStyles = menuItemStyles$1;
 
-const numberFieldFilledStyles = (context, definition) => css`
-    ${inputFilledStyles(context, definition, '.root')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css`
-        ${inputFilledForcedColorStyles(context, definition, '.root')}
-      `));
+const logicalControlSelector$3 = '.root';
 const numberFieldStyles$1 = (context, definition) => css`
     ${display('inline-block')}
 
-    ${inputStyles(context, definition, '.root')}
+    ${baseInputStyles(context, definition, logicalControlSelector$3)}
 
     ${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}.start,.end{margin:auto;fill:currentcolor}.start{display:flex;margin-inline-start:11px}.end{display:flex;margin-inline-end:11px}.controls{opacity:0;position:relative;top:-1px;z-index:3}:host(:hover:not([disabled])) .controls,:host(:focus-within:not([disabled])) .controls{opacity:1}.step-up,.step-down{display:flex;padding:0 8px;cursor:pointer}.step-up{padding-top:3px}`.withBehaviors(appearanceBehavior('filled', numberFieldFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css`
-        ${inputForcedColorStyles(context, definition, '.root')}
-        .step-up,.step-down{fill:${SystemColors.FieldText}}`));
+    .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}.start,.end{margin:auto;fill:currentcolor}.start{display:flex;margin-inline-start:11px}.end{display:flex;margin-inline-end:11px}.controls{opacity:0;position:relative;top:-1px;z-index:3}:host(:hover:not([disabled])) .controls,:host(:focus-within:not([disabled])) .controls{opacity:1}.step-up,.step-down{display:flex;padding:0 8px;cursor:pointer}.step-up{padding-top:3px}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$3)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$3)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$3)));
 
 /**
  * The Fluent number field class
@@ -25852,6 +25866,7 @@ const searchTemplate = (context, definition) => html`<template class=" ${x => x.
   filter: whitespaceFilter
 })}></slot></label><div class="root" part="root" ${ref('root')}>${startSlotTemplate(context, definition)}<div class="input-wrapper" part="input-wrapper"><input class="control" part="control" id="control" @input="${x => x.handleTextInput()}" @change="${x => x.handleChange()}" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" ?spellcheck="${x => x.spellcheck}" :value="${x => x.value}" type="search" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref('control')} /><slot name="clear-button"><button class="clear-button ${x => x.value ? '' : 'clear-button__hidden'}" part="clear-button" tabindex="-1" @click=${x => x.handleClearInput()}><slot name="clear-glyph"><svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="m2.09 2.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L6 5.29l3.15-3.14a.5.5 0 1 1 .7.7L6.71 6l3.14 3.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L6 6.71 2.85 9.85a.5.5 0 0 1-.7-.7L5.29 6 2.15 2.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z" /></svg></slot></button></slot></div>${endSlotTemplate(context, definition)}</div></template>`;
 
+const logicalControlSelector$2 = '.root';
 const clearButtonHover = DesignToken.create("clear-button-hover").withDefault(target => {
   const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
   const inputRecipe = neutralFillInputRecipe.getValueFor(target);
@@ -25862,19 +25877,15 @@ const clearButtonActive = DesignToken.create("clear-button-active").withDefault(
   const inputRecipe = neutralFillInputRecipe.getValueFor(target);
   return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).active;
 });
-const searchFilledStyles = (context, definition) => css`
-    ${inputFilledStyles(context, definition, '.root')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css`
-        ${inputFilledForcedColorStyles(context, definition, '.root')}
-      `));
 const searchStyles$1 = (context, definition) => css`
     ${display('inline-block')}
-    ${inputStyles(context, definition, '.root')}
+
+    ${baseInputStyles(context, definition, logicalControlSelector$2)}
+
     ${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);${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')}
-      `));
+      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('outline', inputOutlineStyles(context, definition, logicalControlSelector$2)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$2)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$2)));
 
 /**
  * The Fluent search class
@@ -26198,21 +26209,15 @@ const fluentTabs = Tabs.compose({
 
 const tabsStyles = tabsStyles$1;
 
-const textAreaFilledStyles = (context, definition) => css`
-    ${inputFilledStyles(context, definition, '.control')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css`
-        ${inputFilledForcedColorStyles(context, definition, '.control')}
-      `));
+const logicalControlSelector$1 = '.control';
 const textAreaStyles$1 = (context, definition) => css`
     ${display('inline-flex')}
 
-    ${inputStyles(context, definition, '.control')}
+    ${baseInputStyles(context, definition, logicalControlSelector$1)}
 
     ${inputStateStyles()}
 
-    :host{flex-direction:column;vertical-align:bottom}.control{height:calc((${heightNumber} * 2) * 1px);padding:calc(${designUnit} * 1.5px) calc(${designUnit} * 2px + 1px)}:host .control{resize:none}:host(.resize-both) .control{resize:both}:host(.resize-horizontal) .control{resize:horizontal}:host(.resize-vertical) .control{resize:vertical}`.withBehaviors(appearanceBehavior('filled', textAreaFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css`
-        ${inputForcedColorStyles(context, definition, '.control')}
-      `));
+    :host{flex-direction:column;vertical-align:bottom}.control{height:calc((${heightNumber} * 2) * 1px);padding:calc(${designUnit} * 1.5px) calc(${designUnit} * 2px + 1px)}:host .control{resize:none}:host(.resize-both) .control{resize:both}:host(.resize-horizontal) .control{resize:horizontal}:host(.resize-vertical) .control{resize:vertical}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$1)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$1)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$1)));
 
 /**
  * The Fluent TextArea class
@@ -26274,21 +26279,15 @@ const fluentTextArea = TextArea.compose({
 
 const textAreaStyles = textAreaStyles$1;
 
-const textFieldFilledStyles = (context, definition) => css`
-    ${inputFilledStyles(context, definition, '.root')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css`
-        ${inputFilledForcedColorStyles(context, definition, '.root')}
-      `));
+const logicalControlSelector = '.root';
 const textFieldStyles$1 = (context, definition) => css`
     ${display('inline-block')}
 
-    ${inputStyles(context, definition, '.root')}
+    ${baseInputStyles(context, definition, logicalControlSelector)}
 
     ${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}.start,.end{display:flex;margin:auto}.start{display:flex;margin-inline-start:11px}.end{display:flex;margin-inline-end:11px}`.withBehaviors(appearanceBehavior('filled', textFieldFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css`
-        ${inputForcedColorStyles(context, definition, '.root')}
-      `));
+    .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}.start,.end{display:flex;margin:auto}.start{display:flex;margin-inline-start:11px}.end{display:flex;margin-inline-end:11px}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));
 
 /**
  * The Fluent text field class
@@ -26593,4 +26592,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, focusTreatmentBase, focusTreatmentTight, 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 };
+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, NeutralButtonStyles, 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, baseInputStyles, 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, focusTreatmentBase, focusTreatmentTight, fontWeight, foregroundOnAccentActive, foregroundOnAccentActiveLarge, foregroundOnAccentFocus, foregroundOnAccentFocusLarge, foregroundOnAccentHover, foregroundOnAccentHoverLarge, foregroundOnAccentLargeRecipe, foregroundOnAccentRecipe, foregroundOnAccentRest, foregroundOnAccentRestLarge, heightNumber, horizontalScrollStyles, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, 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 };