@fluentui/web-components 2.5.5 → 2.5.7

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.stories.js

@@ -7,6 +7,9 @@ export default {
             options: ['filled', 'outline'],
             control: { type: 'radio' },
         },
+        disabled: {
+            control: { type: 'boolean' },
+        },
         autocomplete: {
             options: ['inline', 'list', 'none', 'both'],
             control: { type: 'radio' },
@@ -20,7 +23,7 @@ export default {
         },
     },
 };
-const ComboboxTemplate = ({ appearance, autocomplete, position, required }) => `
+const ComboboxTemplate = ({ appearance, disabled, autocomplete, position, required }) => `
   <style>
     div.docs-story>div:first-child {
       height: 32em !important;
@@ -28,7 +31,8 @@ const ComboboxTemplate = ({ appearance, autocomplete, position, required }) => `
   </style>
   <fluent-combobox
     ${appearance ? `appearance="${appearance}"` : ''}
-    ${appearance ? `autocomplete="${autocomplete}"` : ''}
+    ${disabled ? 'disabled' : ''} 
+    ${autocomplete ? `autocomplete="${autocomplete}"` : ''}
     ${required ? 'required' : ''}
     ${position ? `position="${position}"` : ''}
     style="margin-bottom: 500px;"
@@ -52,6 +56,7 @@ export const Combobox = ComboboxTemplate.bind({});
 Combobox.args = {
     value: 'Christopher Eccleston',
     appearance: 'outline',
+    disabled: false,
 };
 const example = `
 <fluent-combobox>

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

@@ -1,41 +1,40 @@
 import { css } from '@microsoft/fast-element';
-import { disabledCursor, focusVisible } from '@microsoft/fast-foundation';
-import { selectFilledStyles, selectStyles } from '../select/select.styles';
+import { disabledCursor, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { baseSelectStyles } from '../select/select.styles';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { strokeWidth } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+import { inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles } from '../styles';
+const logicalControlSelector = '.control';
+const interactivitySelector = ':not([disabled]):not([open])';
 export const comboboxStyles = (context, definition) => css `
-    ${selectStyles(context, definition)}
+    ${baseSelectStyles(context, definition)}
+
+    ${inputStateStyles(context, definition, logicalControlSelector)}
 
     :host(:empty) .listbox {
-        display: none;
+      display: none;
     }
 
     :host([disabled]) *,
     :host([disabled]) {
-        cursor: ${disabledCursor};
-        user-select: none;
+      cursor: ${disabledCursor};
+      user-select: none;
     }
 
     :host(:active) .selected-value {
-        user-select: none;
+      user-select: none;
     }
 
     .selected-value {
-        -webkit-appearance: none;
-        background: transparent;
-        border: none;
-        color: inherit;
-        ${typeRampBase}
-        height: calc(100% - ${strokeWidth} * 1px));
-        margin: auto 0;
-        width: 100%;
-    }
-
-    .selected-value:hover,
-    .selected-value:${focusVisible},
-    .selected-value:disabled,
-    .selected-value:active {
-        outline: none;
+      -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(context, definition)));
+  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector, interactivitySelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector, interactivitySelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector, interactivitySelector)));

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/number-field/number-field.styles.js

@@ -1,20 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from "@microsoft/fast-web-utilities";
-import { inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles/index';
+import { baseInputStyles, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles/index';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { designUnit } from '../design-tokens';
-export const numberFieldFilledStyles = (context, definition) => css `
-    ${inputFilledStyles(context, definition, '.root')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        ${inputFilledForcedColorStyles(context, definition, '.root')}
-      `));
+const logicalControlSelector = '.root';
 export const numberFieldStyles = (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;
@@ -73,10 +68,4 @@ export const numberFieldStyles = (context, definition) => css `
     .step-up {
       padding-top: 3px;
     }
-  `.withBehaviors(appearanceBehavior('filled', numberFieldFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-        ${inputForcedColorStyles(context, definition, '.root')}
-        .step-up,
-        .step-down {
-          fill: ${SystemColors.FieldText};
-        }
-      `));
+  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));

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/search/search.styles.js

@@ -1,9 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { Button, DesignToken, 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 { controlCornerRadius, density, designUnit, neutralFillInputRecipe, neutralFillStealthRecipe, neutralForegroundRest } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
+const logicalControlSelector = '.root';
 const clearButtonHover = DesignToken.create("clear-button-hover").withDefault((target) => {
     const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
     const inputRecipe = neutralFillInputRecipe.getValueFor(target);
@@ -14,15 +15,13 @@ const clearButtonActive = DesignToken.create("clear-button-active").withDefault(
     const inputRecipe = neutralFillInputRecipe.getValueFor(target);
     return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).active;
 });
-export const searchFilledStyles = (context, definition) => css `
-    ${inputFilledStyles(context, definition, '.root')}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        ${inputFilledForcedColorStyles(context, definition, '.root')}
-      `));
 export const searchStyles = (context, definition) => css `
     ${display('inline-block')}
-    ${inputStyles(context, definition, '.root')}
-    ${inputStateStyles(context, definition, '.root')}
+
+    ${baseInputStyles(context, definition, logicalControlSelector)}
+
+    ${inputStateStyles(context, definition, logicalControlSelector)}
+
     .root {
       display: flex;
       flex-direction: row;
@@ -102,6 +101,4 @@ export const searchStyles = (context, definition) => css `
     ::slotted(${context.tagFor(Button)}) {
       margin-inline-end: 1px;
     }
-  `.withBehaviors(appearanceBehavior('filled', searchFilledStyles(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/select/select.stories.js

@@ -5,9 +5,9 @@ export default {
     component: fluentSelect,
     argTypes: {
         appearance: {
-            options: ['filled', 'outlined', 'stealth'],
+            options: ['filled', 'outline', 'stealth'],
             control: { type: 'radio' },
-            defaultValue: 'outlined',
+            defaultValue: 'outline',
         },
         disabled: {
             control: { type: 'boolean' },