@fluentui/web-components 2.5.5 → 2.5.7

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

@@ -1,9 +1,10 @@
 import { css } from '@microsoft/fast-element';
-import { DesignToken, disabledCursor, focusVisible, } from '@microsoft/fast-foundation';
+import { DesignToken, disabledCursor, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { accentFillRest, controlCornerRadius, disabledOpacity, focusStrokeWidth, neutralFillInputFocus, neutralFillInputHover, neutralFillInputRecipe, neutralFillInputRest, neutralFillSecondaryHover, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralForegroundHintRecipe, neutralForegroundRest, neutralStrokeInputHover, neutralStrokeInputRest, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
+import { accentFillRest, controlCornerRadius, disabledOpacity, focusStrokeWidth, neutralFillInputFocus, neutralFillInputHover, neutralFillInputRecipe, neutralFillInputRest, neutralFillSecondaryFocus, neutralFillSecondaryHover, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralForegroundHintRecipe, neutralForegroundRest, neutralStrokeInputHover, neutralStrokeInputRest, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
 import { typeRampBase } from '../patterns/type-ramp';
 import { heightNumber } from '../size';
+import { focusTreatmentBase } from '../focus';
 const placeholderRest = DesignToken.create('input-placeholder-rest').withDefault((target) => {
     const baseRecipe = neutralFillInputRecipe.getValueFor(target);
     const hintRecipe = neutralForegroundHintRecipe.getValueFor(target);
@@ -25,24 +26,23 @@ 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
  */
-export const inputStyles = (context, definition, rootSelector) => css `
+export const baseInputStyles = (context, definition, logicalControlSelector) => css `
   :host {
     ${typeRampBase}
     color: ${neutralForegroundRest};
     fill: currentcolor;
-    outline: none;
     user-select: none;
     position: relative;
   }
 
-  ${rootSelector} {
+  ${logicalControlSelector} {
     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);
@@ -53,12 +53,6 @@ export const inputStyles = (context, definition, rootSelector) => css `
 
   .control {
     width: 100%;
-  }
-
-  .control:hover,
-  .control:${focusVisible},
-  .control:disabled,
-  .control:active {
     outline: none;
   }
 
@@ -75,25 +69,9 @@ export const inputStyles = (context, definition, rootSelector) => css `
     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([disabled]) ${logicalControlSelector},
+  :host([readonly]) ${logicalControlSelector},
+  :host([disabled]) .label,
   :host([readonly]) .label,
   :host([disabled]) .control,
   :host([readonly]) .control {
@@ -103,114 +81,147 @@ export const inputStyles = (context, definition, rootSelector) => css `
   :host([disabled]) {
     opacity: ${disabledOpacity};
   }
-
-  :host([disabled]) ${rootSelector} {
-    background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
-      border-box ${neutralStrokeRest};
+`;
+/**
+ * The styles for active and focus interactions for input controls.
+ *
+ * @internal
+ */
+export 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
  */
-export 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;
+export const inputOutlineStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css `
+  ${logicalControlSelector} {
+    background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
+      border-box ${neutralStrokeInputRest};
   }
 
-  :host(:not([disabled]):focus-within)::after {
-    left: 0;
-    width: 100%;
-    transform: none;
+  :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(: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);
+  :host(${interactivitySelector}:hover) .control::placeholder {
+    color: ${placeholderHover};
   }
 `;
 /**
+ * The visual styles for inputs with `appearance='filled'`.
+ *
  * @internal
  */
-export const inputFilledStyles = (context, definition, rootSelector) => css `
-  :host ${rootSelector} {
+export const inputFilledStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css `
+  ${logicalControlSelector} {
     background: ${neutralFillSecondaryRest};
-    border-color: transparent;
   }
 
-  :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector} {
+  :host(${interactivitySelector}:hover) ${logicalControlSelector} {
     background: ${neutralFillSecondaryHover};
-    border-color: transparent;
+  }
+
+  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
+    background: ${neutralFillSecondaryFocus};
+  }
+
+  :host([disabled]) ${logicalControlSelector} {
+    background: ${neutralFillSecondaryRest};
   }
 
   .control::placeholder {
     color: ${filledPlaceholderRest};
   }
 
-  :host(:hover:not([disabled]):not(:focus-within)) .control::placeholder {
+  :host(${interactivitySelector}:hover) .control::placeholder {
     color: ${filledPlaceholderHover};
   }
-
-  :host(:focus-within:not([disabled])) ${rootSelector} {
-    border-color: transparent;
-    box-shadow: none;
-  }
 `;
 /**
  * @internal
  */
-export const inputForcedColorStyles = (context, definition, rootSelector) => css `
-  :host ${rootSelector} {
-    background: ${SystemColors.Field};
-    border-color: ${SystemColors.FieldText};
+export const inputForcedColorStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css `
+  :host {
+    color: ${SystemColors.ButtonText};
   }
-  :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector} {
+
+  ${logicalControlSelector} {
+    background: ${SystemColors.ButtonFace};
+    border-color: ${SystemColors.ButtonText};
+  }
+
+  :host(${interactivitySelector}:hover) ${logicalControlSelector},
+  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
     border-color: ${SystemColors.Highlight};
   }
-  :host(:not([disabled]):active)::after,
-  :host(:not([disabled]):focus-within:not(:active))::after {
-    border-bottom-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]) ${rootSelector} {
-    border-color: ${SystemColors.GrayText};
-  }
+
   :host([disabled]) ::placeholder,
-  :host([disabled]) ::-webkit-input-placeholder,
-  :host([disabled]) .label {
+  :host([disabled]) ::-webkit-input-placeholder {
     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} {
-    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};
   }
 `;

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

@@ -2,8 +2,9 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { focusTreatmentTight } from '../styles/focus';
 export const switchStyles = (context, definition) => css `
     :host([hidden]) {
       display: none;
@@ -35,7 +36,6 @@ export const switchStyles = (context, definition) => css `
 
     .switch {
       position: relative;
-      outline: none;
       box-sizing: border-box;
       width: calc(((${heightNumber} / 2) + ${designUnit}) * 2px);
       height: calc(((${heightNumber} / 2) + ${designUnit}) * 1px);
@@ -56,9 +56,8 @@ export const switchStyles = (context, definition) => css `
     }
 
     :host(:${focusVisible}) .switch {
-      box-shadow: 0 0 0 1px ${fillColor}, 0 0 0 3px ${focusStrokeOuter};
+      ${focusTreatmentTight}
       background: ${neutralFillInputAltFocus};
-      border-color: ${focusStrokeOuter};
     }
 
     :host(.checked) .switch {
@@ -132,11 +131,6 @@ export const switchStyles = (context, definition) => css `
       fill: ${foregroundOnAccentActive};
     }
 
-    :host(.checked:${focusVisible}:not(.disabled)) .switch {
-      box-shadow: 0 0 0 1px ${fillColor}, 0 0 0 3px ${focusStrokeOuter};
-      border-color: transparent;
-    }
-
     .unchecked-message {
       display: block;
     }
@@ -197,15 +191,9 @@ export const switchStyles = (context, definition) => css `
         }
         :host(:${focusVisible}) .switch {
           forced-color-adjust: none;
-          background: ${SystemColors.Field};
+          background: ${SystemColors.Field}; 
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 1px ${SystemColors.Highlight}, 0 0 0 3px ${SystemColors.FieldText};
-        }
-        :host(.checked:${focusVisible}:not(.disabled)) .switch {
-          forced-color-adjust: none;
-          background: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
-          border-color: ${SystemColors.Field};
+          outline-color: ${SystemColors.FieldText};
         }
         :host(.disabled) {
           opacity: 1;

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

@@ -2,8 +2,9 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { heightNumber } from '../../styles';
-import { controlCornerRadius, density, designUnit, focusStrokeOuter, focusStrokeWidth, neutralForegroundRest, strokeWidth, } from '../../design-tokens';
+import { controlCornerRadius, density, designUnit, neutralForegroundRest, strokeWidth, } from '../../design-tokens';
 import { typeRampBase } from '../../styles/patterns/type-ramp';
+import { focusTreatmentBase } from '../../styles/focus';
 export const tabStyles = (context, definition) => css `
       ${display('inline-flex')} :host {
         box-sizing: border-box;
@@ -17,7 +18,6 @@ export const tabStyles = (context, definition) => css `
         justify-content: center;
         grid-row: 1 / 3;
         cursor: pointer;
-        outline: none;
       }
 
       :host([aria-selected='true']) {
@@ -30,8 +30,7 @@ export const tabStyles = (context, definition) => css `
       }
 
       :host(:${focusVisible}) {
-        border-color: ${focusStrokeOuter};
-        box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset;
+        ${focusTreatmentBase}
       }
 
       :host(.vertical) {
@@ -71,7 +70,6 @@ export const tabStyles = (context, definition) => css `
           }
           :host(:${focusVisible}) {
             background: transparent;
-            border-color: ${SystemColors.ButtonText};
-            box-shadow: none;
+            outline-color: ${SystemColors.ButtonText};
           }
         `));

package/dist/esm/text-area/text-area.stories.js

@@ -4,8 +4,8 @@ export default {
     component: fluentTextArea,
     argTypes: {
         appearance: {
-            defaultValue: 'outlined',
-            options: ['filled', 'outlined'],
+            defaultValue: 'outline',
+            options: ['filled', 'outline'],
             control: { type: 'radio' },
         },
         autoFocus: {

package/dist/esm/text-area/text-area.styles.js

@@ -1,19 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { heightNumber, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
+import { baseInputStyles, heightNumber, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { designUnit } from '../design-tokens';
-export const textAreaFilledStyles = (context, definition) => css `
-    ${inputFilledStyles(context, definition, '.control')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        ${inputFilledForcedColorStyles(context, definition, '.control')}
-      `));
+const logicalControlSelector = '.control';
 export const textAreaStyles = (context, definition) => css `
     ${display('inline-flex')}
 
-    ${inputStyles(context, definition, '.control')}
+    ${baseInputStyles(context, definition, logicalControlSelector)}
 
-    ${inputStateStyles(context, definition, '.control')}
+    ${inputStateStyles(context, definition, logicalControlSelector)}
 
     :host {
       flex-direction: column;
@@ -40,6 +36,4 @@ export const textAreaStyles = (context, definition) => css `
     :host(.resize-vertical) .control {
       resize: vertical;
     }
-  `.withBehaviors(appearanceBehavior('filled', textAreaFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-        ${inputForcedColorStyles(context, definition, '.control')}
-      `));
+  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));

package/dist/esm/text-field/text-field.styles.js

@@ -1,19 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
+import { baseInputStyles, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { designUnit } from '../design-tokens';
-export const textFieldFilledStyles = (context, definition) => css `
-    ${inputFilledStyles(context, definition, '.root')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        ${inputFilledForcedColorStyles(context, definition, '.root')}
-      `));
+const logicalControlSelector = '.root';
 export const textFieldStyles = (context, definition) => css `
     ${display('inline-block')}
 
-    ${inputStyles(context, definition, '.root')}
+    ${baseInputStyles(context, definition, logicalControlSelector)}
 
-    ${inputStateStyles(context, definition, '.root')}
+    ${inputStateStyles(context, definition, logicalControlSelector)}
 
     .root {
       display: flex;
@@ -49,6 +45,4 @@ export const textFieldStyles = (context, definition) => css `
       display: flex;
       margin-inline-end: 11px;
     }
-  `.withBehaviors(appearanceBehavior('filled', textFieldFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-        ${inputForcedColorStyles(context, definition, '.root')}
-      `));
+  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));

package/dist/esm/toolbar/toolbar.styles.js

@@ -1,7 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { designUnit, fillColor, focusStrokeWidth, neutralStrokeFocus, strokeWidth } from '../design-tokens';
+import { designUnit, fillColor } from '../design-tokens';
+import { focusTreatmentBase } from '../styles/focus';
 export const toolbarStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       --toolbar-item-gap: calc(${designUnit} * 1px);
@@ -13,7 +14,7 @@ export const toolbarStyles = (context, definition) => css `
     }
 
     :host(${focusVisible}) {
-      outline: calc(${strokeWidth} * 1px) solid ${neutralStrokeFocus};
+      ${focusTreatmentBase}
     }
 
     .positioning-region {
@@ -65,7 +66,7 @@ export const toolbarStyles = (context, definition) => css `
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         :host(:${focusVisible}) {
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.Highlight};
+          outline-color: ${SystemColors.Highlight};
           color: ${SystemColors.ButtonText};
           forced-color-adjust: none;
         }

package/dist/esm/tree-item/tree-item.styles.js

@@ -2,8 +2,9 @@ import { css, cssPartial } from '@microsoft/fast-element';
 import { DesignToken, disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
-import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralFillStealthRest, neutralForegroundRest, strokeWidth, } from '../design-tokens';
+import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, disabledOpacity, focusStrokeWidth, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralFillStealthRest, neutralForegroundRest, strokeWidth, } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { focusTreatmentBase } from '../styles/focus';
 const ltr = css `
   .expand-collapse-button svg {
     transform: rotate(0deg);
@@ -55,14 +56,6 @@ export const treeItemStyles = (context, definition) => css `
       --tree-item-nested-width: 0;
     }
 
-    :host(:focus) > .positioning-region {
-      outline: none;
-    }
-
-    :host(:focus) .content-region {
-      outline: none;
-    }
-
     .positioning-region {
       display: flex;
       position: relative;
@@ -74,8 +67,7 @@ export const treeItemStyles = (context, definition) => css `
     }
 
     :host(:${focusVisible}) .positioning-region {
-      border-color: ${focusStrokeOuter};
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset;
+      ${focusTreatmentBase}
     }
 
     .positioning-region::before {
@@ -114,7 +106,6 @@ export const treeItemStyles = (context, definition) => css `
       background: none;
       border: none;
       border-radius: calc(${controlCornerRadius} * 1px);
-      outline: none;
       ${
 /* Width and Height should be based off calc(glyph-size-number + (design-unit * 4) * 1px) -
     update when density story is figured out */ ''} width: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);
@@ -220,8 +211,7 @@ export const treeItemStyles = (context, definition) => css `
         }
         :host(:${focusVisible}) .positioning-region {
           forced-color-adjust: none;
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 2px inset ${SystemColors.ButtonFace};
+          outline-color: ${SystemColors.ButtonFace};
         }
         :host([disabled]),
         :host([disabled]) .content-region,

package/dist/esm/tree-view/tree-view.styles.js

@@ -11,8 +11,4 @@ export const treeViewStyles = (context, definition) => css `
     min-width: fit-content;
     font-size: 0;
   }
-
-  :host:focus-visible {
-    outline: none;
-  }
 `;