@fluentui/web-components 2.5.5 → 2.5.6

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Wed, 07 Sep 2022 07:53:27 GMT",
+      "date": "Mon, 19 Sep 2022 07:45:53 GMT",
+      "tag": "@fluentui/web-components_v2.5.6",
+      "version": "2.5.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "47367562+bheston@users.noreply.github.com",
+            "package": "@fluentui/web-components",
+            "commit": "2420757404f54aba8e92cdbc41965a6fdbce8a3d",
+            "comment": "Standardized focus treatment to use `outline` instead of a combination of `border` and `box-shadow`"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 07 Sep 2022 07:54:43 GMT",
       "tag": "@fluentui/web-components_v2.5.5",
       "version": "2.5.5",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 07 Sep 2022 07:53:27 GMT and should not be manually modified.
+This log was last generated on Mon, 19 Sep 2022 07:45:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [2.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.6)
+
+Mon, 19 Sep 2022 07:45:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.5..@fluentui/web-components_v2.5.6)
+
+### Patches
+
+- Standardized focus treatment to use `outline` instead of a combination of `border` and `box-shadow` ([PR #24771](https://github.com/microsoft/fluentui/pull/24771) by 47367562+bheston@users.noreply.github.com)
+
 ## [2.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.5)
 
-Wed, 07 Sep 2022 07:53:27 GMT 
+Wed, 07 Sep 2022 07:54:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.4..@fluentui/web-components_v2.5.5)
 
 ### Patches

package/dist/dts/styles/focus.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.
+ *
+ * @public
+ */
+export declare const focusTreatmentBase: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Partial CSS for the focus treatment for tighter components with spacing constraints, like Checkbox
+ * and Radio, or plain text like Hypertext appearance Anchor or Breadcrumb Item.
+ *
+ * @public
+ */
+export declare const focusTreatmentTight: import("@microsoft/fast-element").CSSDirective;

package/dist/dts/styles/index.d.ts

@@ -1,4 +1,5 @@
 export * from './direction';
 export * from './elevation';
+export * from './focus';
 export * from './patterns/';
 export * from './size';

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

@@ -1,7 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { DesignToken, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, layerCornerRadius, neutralFillLayerAltRest, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillStealthRecipe, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, } from '../../design-tokens';
+import { controlCornerRadius, designUnit, layerCornerRadius, neutralFillLayerAltRest, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillStealthRecipe, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, } from '../../design-tokens';
+import { focusTreatmentBase } from '../../styles/focus';
 import { typeRampBase } from '../../styles/patterns/type-ramp';
 import { heightNumber } from '../../styles/size';
 const neutralFillStealthRestOnNeutralFillLayerRest = DesignToken.create('neutral-fill-stealth-rest-on-neutral-fill-layer-rest').withDefault((target) => {
@@ -61,18 +62,16 @@ export const accordionItemStyles = (context, definition) => css `
     .button::before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      top: calc(${strokeWidth} * -1px);
+      left: calc(${strokeWidth} * -1px);
+      right: calc(${strokeWidth} * -1px);
+      bottom: calc(${strokeWidth} * -1px);
       cursor: pointer;
     }
 
     .button:${focusVisible}::before {
-      outline: none;
-      border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
+      ${focusTreatmentBase}
       border-radius: calc(${layerCornerRadius} * 1px);
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
     }
 
     :host(.expanded) .button:${focusVisible}::before {
@@ -147,8 +146,7 @@ export const accordionItemStyles = (context, definition) => css `
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         .button:${focusVisible}::before {
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight};
+          outline-color: ${SystemColors.Highlight};
         }
         .icon {
           fill: ${SystemColors.ButtonText};

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

@@ -1,9 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { controlCornerRadius, focusStrokeOuter, focusStrokeWidth, neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, strokeWidth, } from '../design-tokens';
+import { controlCornerRadius, neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
 import { heightNumber } from '../styles/index';
+import { focusTreatmentTight } from '../styles/focus';
 export const breadcrumbItemStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       background: transparent;
@@ -13,7 +14,6 @@ export const breadcrumbItemStyles = (context, definition) => css `
       ${typeRampBase};
       min-width: calc(${heightNumber} * 1px);
       border-radius: calc(${controlCornerRadius} * 1px);
-      outline: none;
     }
 
     .listitem {
@@ -44,12 +44,8 @@ export const breadcrumbItemStyles = (context, definition) => css `
       color: ${neutralForegroundActive};
     }
 
-    .control:${focusVisible}::after {
-      content: '';
-      position: absolute;
-      inset: calc(${strokeWidth} * -1px);
-      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} inset;
-      border-radius: inherit;
+    .control:${focusVisible} {
+      ${focusTreatmentTight}
     }
 
     :host(:not([href])),
@@ -94,7 +90,7 @@ export const breadcrumbItemStyles = (context, definition) => css `
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
-        :host([href]) .control:${focusVisible}::after {
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.LinkText} inset;
+        .control:${focusVisible} {
+          outline-color: ${SystemColors.LinkText};
         }
       `));

package/dist/esm/checkbox/checkbox.styles.js

@@ -2,8 +2,9 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, controlCornerRadius, designUnit, disabledOpacity, 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 checkboxStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       align-items: center;
@@ -23,7 +24,6 @@ export const checkboxStyles = (context, definition) => css `
       border-radius: calc(${controlCornerRadius} * 1px);
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};
       background: ${neutralFillInputAltRest};
-      outline: none;
       cursor: pointer;
     }
 
@@ -74,9 +74,8 @@ export const checkboxStyles = (context, definition) => css `
     }
 
     :host(:${focusVisible}) .control {
-      box-shadow: 0 0 0 1px ${fillColor}, 0 0 0 3px ${focusStrokeOuter};
       background: ${neutralFillInputAltFocus};
-      border-color: ${focusStrokeOuter};
+      ${focusTreatmentTight}
     }
 
     :host(.checked) .control {
@@ -125,7 +124,7 @@ export const checkboxStyles = (context, definition) => css `
         }
         :host(:${focusVisible}) .control {
           forced-color-adjust: none;
-          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
+          outline-color: ${SystemColors.FieldText};
           background: ${SystemColors.Field};
           border-color: ${SystemColors.Highlight};
         }
@@ -138,9 +137,6 @@ export const checkboxStyles = (context, definition) => css `
           background: ${SystemColors.HighlightText};
           border-color: ${SystemColors.Highlight};
         }
-        :host(.checked:${focusVisible}) .control {
-          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
-        }
         :host(.checked) slot[name='checked-indicator'],
         :host(.checked) slot[name='indeterminate-indicator'] {
           fill: ${SystemColors.HighlightText};

package/dist/esm/combobox/combobox.styles.js

@@ -1,12 +1,27 @@
 import { css } from '@microsoft/fast-element';
-import { disabledCursor, focusVisible } from '@microsoft/fast-foundation';
+import { disabledCursor } from '@microsoft/fast-foundation';
 import { selectFilledStyles, selectStyles } from '../select/select.styles';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { strokeWidth } from '../design-tokens';
+import { neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralStrokeInputActive, neutralStrokeInputHover, neutralStrokeInputRest, strokeWidth } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
 export const comboboxStyles = (context, definition) => css `
     ${selectStyles(context, definition)}
 
+    :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;
     }
@@ -30,12 +45,6 @@ export const comboboxStyles = (context, definition) => css `
         height: calc(100% - ${strokeWidth} * 1px));
         margin: auto 0;
         width: 100%;
-    }
-
-    .selected-value:hover,
-    .selected-value:${focusVisible},
-    .selected-value:disabled,
-    .selected-value:active {
         outline: none;
     }
 `.withBehaviors(appearanceBehavior('filled', selectFilledStyles(context, definition)));

package/dist/esm/data-grid/data-grid-cell.styles.js

@@ -1,17 +1,17 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, neutralForegroundRest, } from '../design-tokens';
+import { controlCornerRadius, designUnit, focusStrokeWidth, neutralForegroundRest, strokeWidth, } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { focusTreatmentBase } from '../styles/focus';
 export const dataGridCellStyles = (context, definition) => css `
     :host {
-      padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);
+      padding: calc((${designUnit} + ${focusStrokeWidth} - ${strokeWidth}) * 1px) calc(((${designUnit} * 3) + ${focusStrokeWidth} - ${strokeWidth}) * 1px);
       color: ${neutralForegroundRest};
       box-sizing: border-box;
       ${typeRampBase}
-      border: transparent calc(${focusStrokeWidth} * 1px) solid;
+      border: transparent calc(${strokeWidth} * 1px) solid;
       overflow: hidden;
-      outline: none;
       white-space: nowrap;
       border-radius: calc(${controlCornerRadius} * 1px);
     }
@@ -21,19 +21,16 @@ export const dataGridCellStyles = (context, definition) => css `
     }
 
     :host(:${focusVisible}) {
-      border-color: ${focusStrokeOuter};
+      ${focusTreatmentBase}
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         :host {
           forced-color-adjust: none;
-          border-color: transparent;
           background: ${SystemColors.Field};
           color: ${SystemColors.FieldText};
         }
 
         :host(:${focusVisible}) {
-          border-color: ${SystemColors.FieldText};
-          box-shadow: 0 0 0 2px inset ${SystemColors.Field};
-          color: ${SystemColors.FieldText};
+          outline-color: ${SystemColors.FieldText};
         }
       `));

package/dist/esm/flipper/flipper.styles.js

@@ -2,7 +2,8 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
-import { controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillRest, neutralFillStrongActive, neutralFillStrongHover, neutralFillStrongRest, neutralStrokeControlRest, } from '../design-tokens';
+import { controlCornerRadius, designUnit, disabledOpacity, neutralFillRest, neutralFillStrongActive, neutralFillStrongHover, neutralFillStrongRest, neutralStrokeControlRest, strokeWidth, } from '../design-tokens';
+import { focusTreatmentBase } from '../styles/focus';
 export const flipperStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       height: calc((${heightNumber} + ${designUnit}) * 1px);
@@ -13,9 +14,8 @@ export const flipperStyles = (context, definition) => css `
       background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
         border-box ${neutralStrokeControlRest};
       box-sizing: border-box;
-      border: calc(${focusStrokeWidth} * 1px) solid transparent;
+      border: calc(${strokeWidth} * 1px) solid transparent;
       border-radius: calc(${controlCornerRadius} * 1px);
-      outline: none;
       padding: 0;
     }
 
@@ -43,7 +43,7 @@ export const flipperStyles = (context, definition) => css `
     }
 
     :host(:${focusVisible}) {
-      border-color: ${focusStrokeOuter};
+      ${focusTreatmentBase}
     }
 
     :host::-moz-focus-inner {
@@ -79,7 +79,6 @@ export const flipperStyles = (context, definition) => css `
         }
         :host(:${focusVisible}) {
           forced-color-adjust: none;
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.ButtonFace}, 0 0 0 4px ${SystemColors.ButtonText};
+          outline-color: ${SystemColors.Highlight};
         }
       `));

package/dist/esm/listbox/listbox.styles.js

@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display, ListboxOption } from '@microsoft/fast-foundation';
-import { controlCornerRadius, designUnit, focusStrokeOuter, neutralStrokeRest, strokeWidth, } from '../design-tokens';
+import { controlCornerRadius, designUnit, neutralStrokeRest, strokeWidth, } from '../design-tokens';
+import { focusTreatmentBase } from '../styles/focus';
 export const listboxStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
@@ -8,7 +9,6 @@ export const listboxStyles = (context, definition) => css `
       box-sizing: border-box;
       flex-direction: column;
       padding: calc(${designUnit} * 1px) 0;
-      outline: none;
     }
 
     ::slotted(${context.tagFor(ListboxOption)}) {
@@ -16,7 +16,6 @@ export const listboxStyles = (context, definition) => css `
     }
 
     :host(:focus-within:not([disabled])) {
-      border-color: ${focusStrokeOuter};
-      box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
+      ${focusTreatmentBase}
     }
   `;

package/dist/esm/listbox-option/listbox-option.styles.js

@@ -2,24 +2,24 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles/size';
-import { accentFillRest, controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthFocus, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, } from '../design-tokens';
+import { accentFillRest, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthFocus, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, strokeWidth, } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { focusTreatmentBase } from '../styles/focus';
 export const optionStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       position: relative;
       ${typeRampBase}
       background: ${neutralFillStealthRest};
       border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${focusStrokeWidth} * 1px) solid transparent;
+      border: calc(${strokeWidth} * 1px) solid transparent;
       box-sizing: border-box;
       color: ${neutralForegroundRest};
       cursor: pointer;
       fill: currentcolor;
       height: calc(${heightNumber} * 1px);
-      outline: none;
       overflow: hidden;
       align-items: center;
-      padding: 0 calc(${designUnit} * 2.25px);
+      padding: 0 calc(((${designUnit} * 3) - ${strokeWidth} - 1) * 1px);
       user-select: none;
       white-space: nowrap;
     }
@@ -28,7 +28,7 @@ export const optionStyles = (context, definition) => css `
       content: '';
       display: block;
       position: absolute;
-      left: 0;
+      left: calc((${focusStrokeWidth} - ${strokeWidth}) * 1px);
       top: calc((${heightNumber} / 4) - ${focusStrokeWidth} * 1px);
       width: 3px;
       height: calc((${heightNumber} / 2) * 1px);
@@ -54,7 +54,7 @@ export const optionStyles = (context, definition) => css `
     }
 
     :host(:${focusVisible}) {
-      border-color: ${focusStrokeOuter};
+      ${focusTreatmentBase}
       background: ${neutralFillStealthFocus};
     }
 
@@ -127,4 +127,7 @@ export const optionStyles = (context, definition) => css `
           fill: currentcolor;
           opacity: 1;
         }
+        :host(:${focusVisible}) {
+          outline-color: ${SystemColors.CanvasText};
+        }
       `));

package/dist/esm/menu/menu.styles.js

@@ -9,7 +9,7 @@ export const menuStyles = (context, definition) => css `
       border: calc(${strokeWidth} * 1px) solid transparent;
       border-radius: calc(${layerCornerRadius} * 1px);
       box-shadow: ${elevationShadowFlyout};
-      padding: calc(${designUnit} * 1px) 0;
+      padding: calc((${designUnit} - ${strokeWidth}) * 1px) 0;
       max-width: 368px;
       min-width: 64px;
     }

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

@@ -2,14 +2,14 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
-import { controlCornerRadius, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, } from '../design-tokens';
+import { controlCornerRadius, disabledOpacity, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { focusTreatmentBase } from '../styles/focus';
 export const menuItemStyles = (context, definition) => css `
     ${display('grid')} :host {
       contain: layout;
       overflow: visible;
       ${typeRampBase}
-      outline: none;
       box-sizing: border-box;
       height: calc(${heightNumber} * 1px);
       grid-template-columns: minmax(32px, auto) 1fr minmax(32px, auto);
@@ -64,8 +64,7 @@ export const menuItemStyles = (context, definition) => css `
     }
 
     :host(:${focusVisible}) {
-      border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
+      ${focusTreatmentBase}
     }
 
     :host(:not([disabled]):hover) {
@@ -151,7 +150,6 @@ export const menuItemStyles = (context, definition) => css `
       justify-content: center;
       position: relative;
       box-sizing: border-box;
-      outline: none;
     }
 
     :host .checkbox-indicator,
@@ -197,13 +195,11 @@ export const menuItemStyles = (context, definition) => css `
         }
         :host(.expanded) {
           background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.Highlight};
           color: ${SystemColors.HighlightText};
         }
         :host(:${focusVisible}) {
           background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc(${strokeWidth} * 1px) inset ${SystemColors.HighlightText};
+          outline-color: ${SystemColors.ButtonText};
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
@@ -219,7 +215,7 @@ export const menuItemStyles = (context, definition) => css `
           opacity: 1;
         }
         :host([disabled]:${focusVisible}) {
-          border-color: ${SystemColors.GrayText};
+          outline-color: ${SystemColors.GrayText};
         }
         :host .expanded-toggle,
         :host .checkbox,

package/dist/esm/progress/progress/progress.styles.js

@@ -5,7 +5,6 @@ import { accentFillRest, designUnit, neutralForegroundHint, neutralStrokeStrongR
 export const progressStyles = (context, definition) => css `
     ${display('flex')} :host {
       align-items: center;
-      outline: none;
       height: calc((${strokeWidth} * 3) * 1px);
     }
 

package/dist/esm/progress/progress-ring/progress-ring.styles.js

@@ -6,7 +6,6 @@ import { accentFillRest, neutralForegroundHint } from '../../design-tokens';
 export const progressRingStyles = (context, definition) => css `
     ${display('flex')} :host {
       align-items: center;
-      outline: none;
       height: calc(${heightNumber} * 1px);
       width: calc(${heightNumber} * 1px);
     }

package/dist/esm/radio/radio.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 { heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, designUnit, disabledOpacity, 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 radioStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       --input-size: calc((${heightNumber} / 2) + ${designUnit});
@@ -27,7 +28,6 @@ export const radioStyles = (context, definition) => css `
       border-radius: 50%;
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};
       background: ${neutralFillInputAltRest};
-      outline: none;
       cursor: pointer;
     }
 
@@ -76,9 +76,8 @@ export const radioStyles = (context, definition) => css `
     }
 
     :host(:${focusVisible}) .control {
-      box-shadow: 0 0 0 1px ${fillColor}, 0 0 0 3px ${focusStrokeOuter};
+      ${focusTreatmentTight}
       background: ${neutralFillInputAltFocus};
-      border-color: ${focusStrokeOuter};
     }
 
     :host(.checked) .control {
@@ -121,18 +120,14 @@ export const radioStyles = (context, definition) => css `
         }
         :host(:${focusVisible}) .control {
           forced-color-adjust: none;
-          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
           background: ${SystemColors.Field};
-          border-color: ${SystemColors.Highlight};
+          outline-color: ${SystemColors.FieldText};
         }
         :host(.checked:not(.disabled):hover) .control,
         :host(.checked:not(.disabled):active) .control {
           border-color: ${SystemColors.Highlight};
           background: ${SystemColors.Highlight};
         }
-        :host(.checked:${focusVisible}) .control {
-          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
-        }
         :host(.checked) slot[name='checked-indicator'] {
           fill: ${SystemColors.Highlight};
         }

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

@@ -4,8 +4,9 @@ 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, layerCornerRadius, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, strokeWidth, } from '../design-tokens';
+import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, layerCornerRadius, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, strokeWidth, } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { focusTreatmentBase } from '../styles/focus';
 export const selectFilledStyles = (context, definition) => css `
   :host {
     background: ${neutralFillSecondaryRest};
@@ -29,12 +30,6 @@ export const selectFilledStyles = (context, definition) => css `
       :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 {
@@ -113,9 +108,7 @@ export const selectStyles = (context, definition) => css `
     }
 
     :host(:${focusVisible}) {
-      border-color: ${focusStrokeOuter};
-      outline: none;
-      box-shadow: 0 0 0 1px inset ${focusStrokeOuter};
+      ${focusTreatmentBase}
     }
 
     :host([disabled]) {
@@ -188,8 +181,7 @@ export const selectStyles = (context, definition) => css `
       }
       :host(:${focusVisible}) {
         forced-color-adjust: none;
-        border-color: ${SystemColors.Highlight};
-        box-shadow: 0 0 0 1px inset ${SystemColors.Highlight};
+        outline-color: ${SystemColors.Highlight};
       }
       :host([open]) .listbox {
         background: ${SystemColors.ButtonFace};

package/dist/esm/styles/focus.js

@@ -0,0 +1,21 @@
+import { cssPartial } from '@microsoft/fast-element';
+import { focusStrokeOuter, focusStrokeWidth, strokeWidth } from '../design-tokens';
+/**
+ * Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.
+ *
+ * @public
+ */
+export const focusTreatmentBase = cssPartial `
+  outline: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
+  outline-offset: calc(${focusStrokeWidth} * -1px);
+`;
+/**
+ * Partial CSS for the focus treatment for tighter components with spacing constraints, like Checkbox
+ * and Radio, or plain text like Hypertext appearance Anchor or Breadcrumb Item.
+ *
+ * @public
+ */
+export const focusTreatmentTight = cssPartial `
+  outline: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
+  outline-offset: calc(${strokeWidth} * 1px);
+`;

package/dist/esm/styles/index.js

@@ -1,4 +1,5 @@
 export * from './direction';
 export * from './elevation';
+export * from './focus';
 export * from './patterns/';
 export * from './size';