@fluentui/web-components 2.0.0 → 2.1.1

package/dist/esm/select/select.styles.js

@@ -4,7 +4,7 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { elevationShadowFlyout } from '../styles/elevation';
 import { heightNumber } from '../styles/size';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, focusStrokeWidth, layerCornerRadius, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, layerCornerRadius, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 export const selectFilledStyles = (context, definition) => css `
   :host {
     background: ${neutralFillSecondaryRest};
@@ -20,7 +20,21 @@ export const selectFilledStyles = (context, definition) => css `
     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};
+      }
+      :host(:${focusVisible}) {
+        forced-color-adjust: none;
+        background: transparent;
+        border-color: ${SystemColors.Highlight};
+        box-shadow: 0 0 0 1px inset ${SystemColors.Highlight};
+      }
+    `));
 export const selectStealthStyles = (context, definition) => css `
   :host {
     background: ${neutralFillStealthRest};
@@ -63,12 +77,13 @@ export const selectStyles = (context, definition) => css `
       flex-direction: column;
       left: 0;
       max-height: calc(var(--max-height) - (${heightNumber} * 1px));
-      padding: calc(${designUnit} * 1px) 0;
+      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] {
@@ -162,55 +177,37 @@ export const selectStyles = (context, definition) => css `
       flex: 0 0 auto;
     }
   `.withBehaviors(appearanceBehavior('filled', selectFilledStyles(context, definition)), appearanceBehavior('stealth', selectStealthStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-        :host([disabled]) {
-          border-color: ${SystemColors.GrayText};
-          background-color: ${SystemColors.ButtonFace};
-          color: ${SystemColors.GrayText};
-          opacity: 1;
-          forced-color-adjust: none;
-        }
-
-        :host([disabled]:hover) {
-          background: ${SystemColors.ButtonFace};
-        }
-
-        :host([disabled]) .control {
-          color: ${SystemColors.GrayText};
-          border-color: ${SystemColors.GrayText};
-        }
-
-        :host(:not([disabled]):hover) {
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.Highlight};
-        }
-
-        :host(:${focusVisible}) {
-          forced-color-adjust: none;
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 1px inset ${SystemColors.Highlight};
-          color: ${SystemColors.ButtonText};
-          fill: currentcolor;
-        }
-
-        :host([open]) .listbox {
-          background: ${SystemColors.ButtonFace};
-          border: 1px solid ${SystemColors.ButtonText};
-        }
-
-        :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-
-        ::slotted([role='option']:not([aria-selected='true']):not([disabled]):hover) {
-          forced-color-adjust: none;
-          color: ${SystemColors.ButtonText};
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.Highlight};
-          box-shadow: none;
-        }
-      `));
+      :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};
+      }
+    `));

package/dist/esm/skeleton/skeleton.styles.js

@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { SystemColors } from "@microsoft/fast-web-utilities";
 import { controlCornerRadius, neutralFillSecondaryHover, neutralFillSecondaryRest } from '../design-tokens';
 export const skeletonStyles = (context, definition) => css `
     ${display('block')} :host {
@@ -69,4 +70,8 @@ export const skeletonStyles = (context, definition) => css `
         transform: translateX(100%);
       }
     }
-  `;
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        :host{
+          background-color: ${SystemColors.CanvasText};
+        }
+      `));

package/dist/esm/slider/slider.styles.js

@@ -11,7 +11,6 @@ export const sliderStyles = (context, definition) => css `
       --track-width: ${designUnit};
       align-items: center;
       width: 100%;
-      margin: calc(${designUnit} * 1px) 0;
       user-select: none;
       box-sizing: border-box;
       border-radius: calc(${controlCornerRadius} * 1px);
@@ -142,10 +141,15 @@ export const sliderStyles = (context, definition) => css `
           forced-color-adjust: none;
           background: ${SystemColors.FieldText};
         }
+        .thumb-cursor::after,
+        :host(:not(.disabled)) .thumb-cursor:hover::after,
+        :host(:not(.disabled)) .thumb-cursor:active::after {
+          background: ${SystemColors.Field};
+        }
         :host(:${focusVisible}) .thumb-cursor {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
         }
         :host(.disabled) {
           opacity: 1;

package/dist/esm/styles/patterns/button.styles.js

@@ -94,50 +94,44 @@ export const baseButtonStyles = (context, definition, interactivitySelector = ''
       margin-inline-start: 11px;
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host,
         :host .control {
-          background-color: ${SystemColors.ButtonFace};
+          background: ${SystemColors.ButtonFace};
           border-color: ${SystemColors.ButtonText};
           color: ${SystemColors.ButtonText};
           fill: currentcolor;
         }
-
-        :host .control${interactivitySelector}:hover {
+        :host(:not([disabled])) .control:hover,
+        :host .control${interactivitySelector}:hover,
+        .control${interactivitySelector}:hover {
           forced-color-adjust: none;
-          background-color: ${SystemColors.Highlight};
+          background: ${SystemColors.Highlight};
           color: ${SystemColors.HighlightText};
         }
-
         .control:${focusVisible},
         :host .control:${focusVisible},
         :host(:${focusVisible}) .control {
           forced-color-adjust: none;
-          background-color: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.ButtonText};
-          color: ${SystemColors.HighlightText};
-        }
-
-        .control${interactivitySelector}:hover,
-        :host .control:hover {
-          border-color: ${SystemColors.ButtonText};
+          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,
-        :host(.outline[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;
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.LinkText};
-          box-shadow: 0 0 0 1px ${SystemColors.LinkText} inset;
-          color: ${SystemColors.LinkText};
-          fill: currentcolor;
+          border-color: ${SystemColors.LinkText} !important;
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText} !important;
         }
     `));
 /**
@@ -176,24 +170,21 @@ export const AccentButtonStyles = (context, definition, interactivitySelector =
           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} {
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 2px ${SystemColors.HighlightText} inset;
+          background: ${SystemColors.Highlight};
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight} inset,
+            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};
@@ -201,10 +192,12 @@ export const AccentButtonStyles = (context, definition, interactivitySelector =
           color: ${SystemColors.LinkText};
           fill: currentcolor;
         }
-
         :host([href]) .control:${focusVisible} {
-          border-color: ${SystemColors.LinkText};
-          box-shadow: 0 0 0 2px ${SystemColors.HighlightText} inset;
+          background: ${SystemColors.LinkText};
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText} inset,
+            0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important;
+          color: ${SystemColors.HighlightText};
+          fill: currentcolor;
         }
       `));
 /**
@@ -230,7 +223,7 @@ export const HypertextStyles = (context, definition, interactivitySelector = '',
     }
 
     :host .control:not([href]) {
-      background-color: transparent;
+      background: transparent;
     }
 
     :host .control${interactivitySelector} {
@@ -258,9 +251,13 @@ export const HypertextStyles = (context, definition, interactivitySelector = '',
       background: transparent;
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host .control:${focusVisible} {
-          color: ${SystemColors.LinkText};
-        }
+      :host .control${interactivitySelector}:hover {
+        color: ${SystemColors.Highlight};
+        fill: currentcolor;
+      }
+      :host .control:${focusVisible} {
+        color: ${SystemColors.LinkText};
+      }
       `));
 /**
  * @internal
@@ -288,17 +285,22 @@ export const LightweightButtonStyles = (context, definition, interactivitySelect
       background: ${neutralFillStealthRest};
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
+        :host .control {
+          border-color: ${SystemColors.ButtonFace};
           color: ${SystemColors.ButtonText};
         }
         :host .control${interactivitySelector}:hover,
         :host .control${interactivitySelector}:active,
         :host .control:${focusVisible} {
-          forced-color-adjust: none;
-          background: ${SystemColors.ButtonFace};
-          color: ${SystemColors.Highlight};
+          border-color: ${SystemColors.Highlight};
+          background: ${SystemColors.Highlight};
+          box-shadow: none;
+          color: ${SystemColors.HighlightText};
+        }
+        :host([href]) .control {
+          border-color: ${SystemColors.ButtonFace};
+          color: ${SystemColors.LinkText};
         }
-
         :host([href]) .control:hover,
         :host([href]) .control:${focusVisible} {
           background: ${SystemColors.ButtonFace};
@@ -328,12 +330,20 @@ export const OutlineButtonStyles = (context, definition, interactivitySelector =
       border-color: ${neutralStrokeRest};
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
+        :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 {
+          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText};
+          color: ${SystemColors.LinkText};
+        }
       `));
 /**
  * @internal
@@ -355,43 +365,31 @@ export const StealthButtonStyles = (context, definition, interactivitySelector =
       background: ${neutralFillStealthRest};
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host,
         :host .control {
-          forced-color-adjust: none;
           background: ${SystemColors.ButtonFace};
-          border-color: transparent;
+          border-color: ${SystemColors.ButtonFace};
           color: ${SystemColors.ButtonText};
           fill: currentcolor;
         }
-
         :host .control${interactivitySelector}:hover,
-        :host .control${interactivitySelector}:active {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.Highlight};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-
+        :host .control${interactivitySelector}:active,
         :host .control:${focusVisible} {
           background: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 1px ${SystemColors.Highlight};
+          border-color: ${SystemColors.Highlight};
+          box-shadow: none !important;
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
-
         :host([href]) .control {
+          border-color: ${SystemColors.ButtonFace};
           color: ${SystemColors.LinkText};
         }
-
-        :host(:hover[href]) .control,
-        :host(:${focusVisible}[href]) .control {
+        :host([href]) .control:hover,
+        :host([href]) .control:${focusVisible} {
           background: ${SystemColors.LinkText};
           border-color: ${SystemColors.LinkText};
+          box-shadow: none !important;
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
-
-        :host(:${focusVisible}[href]) .control {
-          box-shadow: 0 0 0 1px ${SystemColors.LinkText};
-        }
       `));

package/dist/esm/styles/patterns/input.styles.js

@@ -133,7 +133,7 @@ export const inputStateStyles = (context, definition, rootSelector) => css `
   :host(:not([disabled]):focus-within:not(:active))::after {
     content: '';
     position: absolute;
-    height: 100%;
+    height: calc(${focusStrokeWidth} * 1px);
     bottom: 0;
     border-bottom: calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};
     border-bottom-left-radius: calc(${controlCornerRadius} * 1px);
@@ -173,49 +173,38 @@ export const inputFilledStyles = (context, definition, rootSelector) => css `
  * @internal
  */
 export const inputForcedColorStyles = (context, definition, rootSelector) => css `
-  ${rootSelector} {
-    forced-color-adjust: none;
-    background: ${SystemColors.ButtonFace};
-    border-color: ${SystemColors.ButtonText};
-  }
-  :host(:hover:not([disabled])) ${rootSelector} {
-    background: ${SystemColors.ButtonFace};
-    border-color: ${SystemColors.Highlight};
+  :host ${rootSelector} {
+    background: ${SystemColors.Field};
+    border-color: ${SystemColors.FieldText};
   }
-  :host(:focus-within:not([disabled])) ${rootSelector} {
+  :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector} {
     border-color: ${SystemColors.Highlight};
-    box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset;
   }
-  .control,
-  ::placeholder,
-  ::-webkit-input-placeholder {
-    color: ${SystemColors.FieldText};
+  :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};
-    background: ${SystemColors.Field};
   }
   :host([disabled]) ::placeholder,
   :host([disabled]) ::-webkit-input-placeholder,
   :host([disabled]) .label {
     color: ${SystemColors.GrayText};
+    fill: currentcolor;
   }
 `;
 /**
  * @internal
  */
 export const inputFilledForcedColorStyles = (context, definition, rootSelector) => css `
-  :host
-    ${rootSelector},
-    :host(:hover:not([disabled]))
-    ${rootSelector},
-    :host(:active:not([disabled]))
-    ${rootSelector},
-    :host(:focus-within:not([disabled]))
-    ${rootSelector} {
+  :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};
   }
@@ -225,6 +214,5 @@ export const inputFilledForcedColorStyles = (context, definition, rootSelector)
   }
   :host([disabled]) ${rootSelector} {
     border-color: ${SystemColors.GrayText};
-    background: ${SystemColors.Field};
   }
 `;

package/dist/esm/switch/switch.stories.js

@@ -15,10 +15,9 @@ const SwitchTemplate = ({ checked, disabled, label }) => `
 <fluent-switch
   ${checked ? 'checked' : ''}
   ${disabled ? 'disabled' : ''}
->
+>${label}
   <span slot="checked-message">On</span>
   <span slot="unchecked-message">Off</span>
-  <label for="direction-switch">Captions:</label>
 </fluent-switch>
 `;
 export const Switch = SwitchTemplate.bind({});

package/dist/esm/switch/switch.styles.js

@@ -12,7 +12,6 @@ export const switchStyles = (context, definition) => css `
       align-items: center;
       outline: none;
       font-family: ${bodyFont};
-      margin: calc(${designUnit} * 1px) 0;
       ${
 /*
  * Chromium likes to select label text or the default slot when
@@ -104,8 +103,9 @@ export const switchStyles = (context, definition) => css `
       cursor: pointer;
     }
 
-    .status-message {
-      margin-inline-start: calc(${designUnit} * 2px + 2px);
+    ::slotted([slot="checked-message"]),
+    ::slotted([slot="unchecked-message"]) {
+        margin-inline-start: calc(${designUnit} * 2px + 2px);
     }
 
     :host(.checked) .switch {
@@ -172,47 +172,48 @@ export const switchStyles = (context, definition) => css `
           transform: translateX(100%);
         }
       `), forcedColorsStylesheetBehavior(css `
-        slot[name='switch'],
-        :host(:not(.disabled)) .switch:active slot[name='switch'] {
+        :host(:not(.disabled)) .switch slot[name='switch'] {
           forced-color-adjust: none;
-          background: ${SystemColors.FieldText};
+          fill: ${SystemColors.FieldText};
         }
         .switch {
-          forced-color-adjust: none;
           background: ${SystemColors.Field};
           border-color: ${SystemColors.FieldText};
         }
-        :host(:not(.disabled)) .switch:hover {
-          background: ${SystemColors.HighlightText};
-          border-color: ${SystemColors.Highlight};
-        }
         :host(.checked) .switch {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.Highlight};
         }
-        :host(.checked:not(.disabled)) .switch:hover,
-        :host(:not(.disabled)) .switch:active {
+        :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) slot[name='switch'] {
-          background: ${SystemColors.HighlightText};
+        :host(.checked:not(.disabled)) .switch slot[name="switch"] {
+          fill: ${SystemColors.HighlightText};
         }
-        :host(.checked:not(.disabled)) .switch:hover slot[name='switch'] {
-          background: ${SystemColors.Highlight};
+        :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 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
+          box-shadow: 0 0 0 1px ${SystemColors.Highlight}, 0 0 0 3px ${SystemColors.FieldText};
         }
         :host(.checked:${focusVisible}:not(.disabled)) .switch {
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
+          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'] {
-          background: ${SystemColors.GrayText};
+          forced-color-adjust: none;
+          fill: ${SystemColors.GrayText};
         }
         :host(.disabled) .switch {
           background: ${SystemColors.Field};

package/dist/esm/tabs/tab/tab.styles.js

@@ -62,16 +62,17 @@ export const tabStyles = (context, definition) => css `
           :host(:hover),
           :host(.vertical:hover),
           :host([aria-selected='true']:hover) {
-            background: ${SystemColors.Highlight};
-            color: ${SystemColors.HighlightText};
+            background: transparent;
+            color: ${SystemColors.Highlight};
             fill: currentcolor;
           }
           :host([aria-selected='true']) {
-            background: ${SystemColors.HighlightText};
+            background: transparent;
             color: ${SystemColors.Highlight};
             fill: currentcolor;
           }
           :host(:${focusVisible}) {
+            background: transparent;
             border-color: ${SystemColors.ButtonText};
             box-shadow: none;
           }