@fluentui/web-components 2.5.5 → 2.5.6

package/dist/esm/styles/patterns/button.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 '../size';
-import { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, accentStrokeControlActive, accentStrokeControlHover, accentStrokeControlRest, controlCornerRadius, density, designUnit, focusStrokeInner, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, neutralStrokeHover, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, accentStrokeControlActive, accentStrokeControlHover, accentStrokeControlRest, controlCornerRadius, density, designUnit, focusStrokeInner, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, neutralStrokeHover, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
 import { typeRampBase } from '../../styles/patterns/type-ramp';
+import { focusTreatmentBase, focusTreatmentTight } from '../focus';
 /**
  * @internal
  */
@@ -11,7 +12,6 @@ export const baseButtonStyles = (context, definition, interactivitySelector = ''
     ${display('inline-flex')} :host {
       position: relative;
       box-sizing: border-box;
-      outline: none;
       ${typeRampBase}
       height: calc(${heightNumber} * 1px);
       min-width: calc(${heightNumber} * 1px);
@@ -63,8 +63,7 @@ export const baseButtonStyles = (context, definition, interactivitySelector = ''
     }
 
     :host .control:${focusVisible} {
-      border-color: ${focusStrokeOuter} !important;
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset !important;
+      ${focusTreatmentBase}
     }
 
     :host .control${nonInteractivitySelector} {
@@ -111,8 +110,7 @@ export const baseButtonStyles = (context, definition, interactivitySelector = ''
         :host(:${focusVisible}) .control {
           forced-color-adjust: none;
           background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.Highlight} !important;
-          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.Highlight} !important;
+          outline-color: ${SystemColors.Highlight};
         }
         :host([href]) .control {
           background: ${SystemColors.ButtonFace};
@@ -129,8 +127,7 @@ export const baseButtonStyles = (context, definition, interactivitySelector = ''
         }
         :host([href]) .control:${focusVisible}{
           forced-color-adjust: none;
-          border-color: ${SystemColors.LinkText} !important;
-          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText} !important;
+          outline-color: ${SystemColors.LinkText};
         }
     `));
 /**
@@ -156,8 +153,8 @@ export const AccentButtonStyles = (context, definition, interactivitySelector =
     }
 
     :host .control:${focusVisible} {
-      box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset,
-        0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${focusStrokeInner} inset !important;
+      ${focusTreatmentBase}
+      box-shadow: 0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${focusStrokeInner} inset !important;
     }
 
     :host .control${nonInteractivitySelector} {
@@ -177,8 +174,8 @@ export const AccentButtonStyles = (context, definition, interactivitySelector =
         }
         :host .control:${focusVisible} {
           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;
+          outline-color: ${SystemColors.Highlight};
+          box-shadow: 0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important;
         }
         :host([href]) .control {
           background: ${SystemColors.LinkText};
@@ -187,14 +184,13 @@ export const AccentButtonStyles = (context, definition, interactivitySelector =
         :host([href]) .control:hover {
           background: ${SystemColors.ButtonFace};
           border-color: ${SystemColors.LinkText};
-          box-shadow: none;
           color: ${SystemColors.LinkText};
           fill: currentcolor;
         }
         :host([href]) .control:${focusVisible} {
           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;
+          outline-color: ${SystemColors.LinkText};
+          box-shadow: 0 0 0 calc(((${focusStrokeWidth} + ${strokeWidth}) - ${strokeWidth}) * 1px) ${SystemColors.HighlightText} inset !important;
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
@@ -243,7 +239,7 @@ export const HypertextStyles = (context, definition, interactivitySelector = '',
     }
 
     :host .control:${focusVisible} {
-      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeOuter} !important;
+      ${focusTreatmentTight}
     }
 
     :host .control${nonInteractivitySelector} {
@@ -293,7 +289,6 @@ export const LightweightButtonStyles = (context, definition, interactivitySelect
         :host .control:${focusVisible} {
           border-color: ${SystemColors.Highlight};
           background: ${SystemColors.Highlight};
-          box-shadow: none;
           color: ${SystemColors.HighlightText};
         }
         :host([href]) .control {
@@ -303,7 +298,6 @@ export const LightweightButtonStyles = (context, definition, interactivitySelect
         :host([href]) .control:hover,
         :host([href]) .control:${focusVisible} {
           background: ${SystemColors.ButtonFace};
-          box-shadow: none;
           color: ${SystemColors.LinkText};
         }
       `));
@@ -340,7 +334,7 @@ export const OutlineButtonStyles = (context, definition, interactivitySelector =
           border-color: ${SystemColors.LinkText};
         }
         :host([href]) .control:hover {
-          box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${SystemColors.LinkText};
+          outline-color: ${SystemColors.LinkText};
           color: ${SystemColors.LinkText};
         }
       `));
@@ -375,7 +369,6 @@ export const StealthButtonStyles = (context, definition, interactivitySelector =
         :host .control:${focusVisible} {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.Highlight};
-          box-shadow: none !important;
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
@@ -387,7 +380,6 @@ export const StealthButtonStyles = (context, definition, interactivitySelector =
         :host([href]) .control:${focusVisible} {
           background: ${SystemColors.LinkText};
           border-color: ${SystemColors.LinkText};
-          box-shadow: none !important;
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }

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

@@ -1,5 +1,5 @@
 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 { typeRampBase } from '../patterns/type-ramp';
@@ -32,7 +32,6 @@ export const inputStyles = (context, definition, rootSelector) => css `
     ${typeRampBase}
     color: ${neutralForegroundRest};
     fill: currentcolor;
-    outline: none;
     user-select: none;
     position: relative;
   }
@@ -53,12 +52,6 @@ export const inputStyles = (context, definition, rootSelector) => css `
 
   .control {
     width: 100%;
-  }
-
-  .control:hover,
-  .control:${focusVisible},
-  .control:disabled,
-  .control:active {
     outline: none;
   }
 
@@ -164,7 +157,6 @@ export const inputFilledStyles = (context, definition, rootSelector) => css `
 
   :host(:focus-within:not([disabled])) ${rootSelector} {
     border-color: transparent;
-    box-shadow: none;
   }
 `;
 /**

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/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;
-  }
 `;

package/dist/fluent-web-components.api.json

@@ -10759,6 +10759,58 @@
             "endIndex": 4
           }
         },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!focusTreatmentBase:var",
+          "docComment": "/**\n * Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "focusTreatmentBase: "
+            },
+            {
+              "kind": "Content",
+              "text": "import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "CSSDirective",
+              "canonicalReference": "@microsoft/fast-element!CSSDirective:class"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "focusTreatmentBase",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!focusTreatmentTight:var",
+          "docComment": "/**\n * 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.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "focusTreatmentTight: "
+            },
+            {
+              "kind": "Content",
+              "text": "import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "CSSDirective",
+              "canonicalReference": "@microsoft/fast-element!CSSDirective:class"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "focusTreatmentTight",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!fontWeight:var",

package/dist/web-components.d.ts

@@ -1804,6 +1804,21 @@ export declare const focusStrokeOuterRecipe: DesignToken<ColorRecipe>;
 /** @public */
 export declare const focusStrokeWidth: CSSDesignToken<number>;
 
+/**
+ * Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.
+ *
+ * @public
+ */
+export declare const focusTreatmentBase: 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: CSSDirective;
+
 /** @public */
 export declare const fontWeight: CSSDesignToken<number>;