@fluentui/web-components 2.5.5 → 2.5.7

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Wed, 07 Sep 2022 07:53:27 GMT",
+      "date": "Fri, 21 Oct 2022 07:43:28 GMT",
+      "tag": "@fluentui/web-components_v2.5.7",
+      "version": "2.5.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "47367562+bheston@users.noreply.github.com",
+            "package": "@fluentui/web-components",
+            "commit": "b63fc36cbcbe821d2e53d7924a3cc5aedb6a33a2",
+            "comment": "Cleaned up shared styles for button and input for improved reuse and color updates"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 10 Oct 2022 07:38:23 GMT",
+      "tag": "@fluentui/web-components_v2.5.6",
+      "version": "2.5.6",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "337a32b1a4f2e82235e193e115666aee659c650c",
+            "comment": "chore: migrate to webpack5 and apply single version policy"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 19 Sep 2022 07:47:29 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,30 @@
 # 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 Fri, 21 Oct 2022 07:43:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [2.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.7)
+
+Fri, 21 Oct 2022 07:43:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.6..@fluentui/web-components_v2.5.7)
+
+### Patches
+
+- Cleaned up shared styles for button and input for improved reuse and color updates ([PR #24929](https://github.com/microsoft/fluentui/pull/24929) by 47367562+bheston@users.noreply.github.com)
+
+## [2.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.6)
+
+Mon, 19 Sep 2022 07:47:29 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/combobox/combobox.stories.d.ts

@@ -8,6 +8,11 @@ declare const _default: {
                 type: string;
             };
         };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
         autocomplete: {
             options: string[];
             control: {

package/dist/dts/custom-elements.d.ts

@@ -1,4 +1,4 @@
-import type { Accordion, AnchoredRegion, Breadcrumb, DataGrid, Dialog, Divider, ListboxOption, RadioGroup, Skeleton, SliderLabel, Tabs, TextArea, TextField, TreeView } from '@microsoft/fast-foundation';
+import type { Accordion, AnchoredRegion, Breadcrumb, DataGrid, Dialog, Divider, ListboxOption, RadioGroup, Skeleton, SliderLabel, Tabs, TreeView } from '@microsoft/fast-foundation';
 /**
  * Export all custom element definitions
  */
@@ -93,40 +93,8 @@ export declare const allComponents: {
     fluentTabs: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Tabs>;
     fluentTab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Tab>;
     fluentTabPanel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").TabPanel>;
-    fluentTextArea: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-        baseName: string;
-        baseClass: typeof TextArea;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<TextArea, any>, import("@microsoft/fast-foundation").FoundationElementDefinition>;
-        styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-        shadowOptions: {
-            delegatesFocus: true;
-        };
-    }> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-        baseName: string;
-        baseClass: typeof TextArea;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<TextArea, any>, import("@microsoft/fast-foundation").FoundationElementDefinition>;
-        styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-        shadowOptions: {
-            delegatesFocus: true;
-        };
-    }, typeof import("./text-area/index").TextArea>;
-    fluentTextField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-        baseName: string;
-        baseClass: typeof TextField;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<TextField, any>, import("@microsoft/fast-foundation").TextFieldOptions>;
-        styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-        shadowOptions: {
-            delegatesFocus: true;
-        };
-    }> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-        baseName: string;
-        baseClass: typeof TextField;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<TextField, any>, import("@microsoft/fast-foundation").TextFieldOptions>;
-        styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-        shadowOptions: {
-            delegatesFocus: true;
-        };
-    }, typeof import("./text-field/index").TextField>;
+    fluentTextArea: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./text-area/index").TextArea>;
+    fluentTextField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./text-field/index").TextField>;
     fluentToolbar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./toolbar/index").Toolbar>;
     fluentTooltip: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./tooltip/index").Tooltip>;
     fluentTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TreeView>;

package/dist/dts/number-field/index.d.ts

@@ -26,7 +26,7 @@ export declare class NumberField extends FoundationNumberField {
  * Styles for NumberField
  * @public
  */
-export declare const numberFieldStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export declare const numberFieldStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: NumberFieldOptions) => import("@microsoft/fast-element").ElementStyles;
 /**
  * The Fluent Number Field Custom Element. Implements {@link @microsoft/fast-foundation#NumberField},
  * {@link @microsoft/fast-foundation#numberFieldTemplate}

package/dist/dts/number-field/number-field.styles.d.ts

@@ -1,4 +1,3 @@
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementDefinitionContext, NumberFieldOptions } from '@microsoft/fast-foundation';
-export declare const numberFieldFilledStyles: (context: ElementDefinitionContext, definition: NumberFieldOptions) => ElementStyles;
-export declare const numberFieldStyles: (context: any, definition: any) => ElementStyles;
+export declare const numberFieldStyles: (context: ElementDefinitionContext, definition: NumberFieldOptions) => ElementStyles;

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

@@ -35,4 +35,4 @@ export * from './search.template';
  * Styles for Search
  * @public
  */
-export declare const searchStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export declare const searchStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: SearchOptions) => import("@microsoft/fast-element").ElementStyles;

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

@@ -1,4 +1,3 @@
 import { ElementStyles } from '@microsoft/fast-element';
-import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const searchFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-export declare const searchStyles: (context: any, definition: any) => ElementStyles;
+import { ElementDefinitionContext, SearchOptions } from '@microsoft/fast-foundation';
+export declare const searchStyles: (context: ElementDefinitionContext, definition: SearchOptions) => ElementStyles;

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

@@ -41,4 +41,4 @@ export declare const fluentSelect: (overrideDefinition?: import("@microsoft/fast
  * Styles for Select
  * @public
  */
-export declare const selectStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export declare const selectStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: SelectOptions) => import("@microsoft/fast-element").ElementStyles;

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

@@ -1,5 +1,13 @@
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementDefinitionContext, SelectOptions } from '@microsoft/fast-foundation';
-export declare const selectFilledStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;
-export declare const selectStealthStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;
-export declare const selectStyles: (context: any, definition: any) => ElementStyles;
+/**
+ * The base styles for a select and combobox, without `appearance` visual differences.
+ *
+ * @internal
+ */
+export declare const baseSelectStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;
+/**
+ * @internal
+ */
+export declare const baseSelectForcedColorStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;
+export declare const selectStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;

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/dts/styles/patterns/button.styles.d.ts

@@ -1,25 +1,31 @@
 import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 /**
+ * The base styles for button controls, without `appearance` visual differences.
+ *
  * @internal
  */
-export declare const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
+export declare const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
 /**
  * @internal
  */
-export declare const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
+export declare const NeutralButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
 /**
  * @internal
  */
-export declare const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
+export declare const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
 /**
  * @internal
  */
-export declare const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
+export declare const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
 /**
  * @internal
  */
-export declare const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
+export declare const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
 /**
  * @internal
  */
-export declare const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
+export declare const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;
+/**
+ * @internal
+ */
+export declare const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => import("@microsoft/fast-element").ElementStyles;

package/dist/dts/styles/patterns/input.styles.d.ts

@@ -1,22 +1,30 @@
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 /**
+ * The base styles for input controls, without `appearance` visual differences.
+ *
  * @internal
  */
-export declare const inputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export declare const baseInputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
 /**
+ * The styles for active and focus interactions for input controls.
+ *
  * @internal
  */
-export declare const inputStateStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export declare const inputStateStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
 /**
+ * The visual styles for inputs with `appearance='outline'`.
+ *
  * @internal
  */
-export declare const inputFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export declare const inputOutlineStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
 /**
+ * The visual styles for inputs with `appearance='filled'`.
+ *
  * @internal
  */
-export declare const inputForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export declare const inputFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
 /**
  * @internal
  */
-export declare const inputFilledForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
+export declare const inputForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;

package/dist/dts/text-area/index.d.ts

@@ -37,25 +37,9 @@ export declare class TextArea extends FoundationTextArea {
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export declare const fluentTextArea: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    baseClass: typeof FoundationTextArea;
-    template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<FoundationTextArea, any>, import("@microsoft/fast-foundation").FoundationElementDefinition>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-    shadowOptions: {
-        delegatesFocus: true;
-    };
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    baseClass: typeof FoundationTextArea;
-    template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<FoundationTextArea, any>, import("@microsoft/fast-foundation").FoundationElementDefinition>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-    shadowOptions: {
-        delegatesFocus: true;
-    };
-}, typeof TextArea>;
+export declare const fluentTextArea: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TextArea>;
 /**
  * Styles for TextArea
  * @public
  */
-export declare const textAreaStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export declare const textAreaStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles;

package/dist/dts/text-area/text-area.stories.d.ts

@@ -1,22 +1,6 @@
 declare const _default: {
     title: string;
-    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-        baseName: string;
-        baseClass: typeof import("@microsoft/fast-foundation").TextArea;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<import("@microsoft/fast-foundation").TextArea, any>, import("@microsoft/fast-foundation").FoundationElementDefinition>;
-        styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-        shadowOptions: {
-            delegatesFocus: true;
-        };
-    }> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-        baseName: string;
-        baseClass: typeof import("@microsoft/fast-foundation").TextArea;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<import("@microsoft/fast-foundation").TextArea, any>, import("@microsoft/fast-foundation").FoundationElementDefinition>;
-        styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-        shadowOptions: {
-            delegatesFocus: true;
-        };
-    }, typeof import("./index").TextArea>;
+    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./index").TextArea>;
     argTypes: {
         appearance: {
             defaultValue: string;

package/dist/dts/text-area/text-area.styles.d.ts

@@ -1,4 +1,3 @@
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const textAreaFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-export declare const textAreaStyles: (context: any, definition: any) => ElementStyles;
+export declare const textAreaStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;

package/dist/dts/text-field/index.d.ts

@@ -37,25 +37,9 @@ export declare class TextField extends FoundationTextField {
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
-export declare const fluentTextField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    baseClass: typeof FoundationTextField;
-    template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<FoundationTextField, any>, import("@microsoft/fast-foundation").TextFieldOptions>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-    shadowOptions: {
-        delegatesFocus: true;
-    };
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    baseClass: typeof FoundationTextField;
-    template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<FoundationTextField, any>, import("@microsoft/fast-foundation").TextFieldOptions>;
-    styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-    shadowOptions: {
-        delegatesFocus: true;
-    };
-}, typeof TextField>;
+export declare const fluentTextField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TextField>;
 /**
  * Styles for TextField
  * @public
  */
-export declare const textFieldStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
+export declare const textFieldStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles;

package/dist/dts/text-field/text-field.stories.d.ts

@@ -1,22 +1,6 @@
 declare const _default: {
     title: string;
-    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-        baseName: string;
-        baseClass: typeof import("@microsoft/fast-foundation").TextField;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<import("@microsoft/fast-foundation").TextField, any>, import("@microsoft/fast-foundation").TextFieldOptions>;
-        styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-        shadowOptions: {
-            delegatesFocus: true;
-        };
-    }> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-        baseName: string;
-        baseClass: typeof import("@microsoft/fast-foundation").TextField;
-        template: import("@microsoft/fast-foundation").FoundationElementTemplate<import("@microsoft/fast-element").ViewTemplate<import("@microsoft/fast-foundation").TextField, any>, import("@microsoft/fast-foundation").TextFieldOptions>;
-        styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;
-        shadowOptions: {
-            delegatesFocus: true;
-        };
-    }, typeof import("./index").TextField>;
+    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./index").TextField>;
     argTypes: {
         appearance: {
             options: string[];

package/dist/dts/text-field/text-field.styles.d.ts

@@ -1,4 +1,3 @@
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const textFieldFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
-export declare const textFieldStyles: (context: any, definition: any) => ElementStyles;
+export declare const textFieldStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;

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

@@ -1,12 +1,5 @@
-import { css } from '@microsoft/fast-element';
-import { AccentButtonStyles, baseButtonStyles, HypertextStyles, LightweightButtonStyles, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';
+import { AccentButtonStyles, baseButtonStyles, HypertextStyles, LightweightButtonStyles, NeutralButtonStyles, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';
 import { appearanceBehavior } from '../utilities/behaviors';
 const interactivitySelector = '[href]';
-const nonInteractivitySelector = ':not([href])';
-export const anchorStyles = (context, definition) => css `
-    :host .control:not([href]) {
-      cursor: default;
-    }
-
-    ${baseButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-  `.withBehaviors(appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('hypertext', HypertextStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)));
+export const anchorStyles = (context, definition) => baseButtonStyles(context, definition, interactivitySelector)
+    .withBehaviors(appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector)), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector)), appearanceBehavior('hypertext', HypertextStyles(context, definition, interactivitySelector)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector)));

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

@@ -1,49 +1,24 @@
 import { css } from '@microsoft/fast-element';
-import { disabledCursor, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from "@microsoft/fast-web-utilities";
-import { AccentButtonStyles, baseButtonStyles, LightweightButtonStyles, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';
+import { disabledCursor, } from '@microsoft/fast-foundation';
+import { AccentButtonStyles, baseButtonStyles, LightweightButtonStyles, NeutralButtonStyles, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { disabledOpacity } from '../design-tokens';
 const interactivitySelector = ':not([disabled])';
 const nonInteractivitySelector = '[disabled]';
 export const buttonStyles = (context, definition) => css `
-    :host([disabled]) {
-      opacity: ${disabledOpacity};
+    :host(${interactivitySelector}) .control {
+      cursor: pointer;
+    }
+
+    :host(${nonInteractivitySelector}) .control {
       cursor: ${disabledCursor};
     }
 
+    @media (forced-colors: none) {
+      :host(${nonInteractivitySelector}) .control {
+        opacity: ${disabledOpacity};
+      }
+    }
+
     ${baseButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host([disabled]) {
-          opacity: 1;
-        }
-        :host([disabled]) .control {
-          border-color: ${SystemColors.GrayText};
-          color: ${SystemColors.GrayText};
-          fill: currentcolor;
-        }
-      `), appearanceBehavior('accent', css `
-      ${AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},
-      `.withBehaviors(forcedColorsStylesheetBehavior(css `
-            :host([disabled]) .control {
-              background: ${SystemColors.ButtonFace};
-            }
-          `))), appearanceBehavior('lightweight', css `
-      ${LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},
-      `.withBehaviors(forcedColorsStylesheetBehavior(css `
-            :host([disabled]) .control {
-              border-color: ${SystemColors.ButtonFace};
-            }
-          `))), appearanceBehavior('outline', css `
-      ${OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-      `.withBehaviors(forcedColorsStylesheetBehavior(css `
-            :host([disabled]) .control {
-              border-color: ${SystemColors.GrayText};
-            }
-          `))), appearanceBehavior('stealth', css `
-      ${StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-      `.withBehaviors(forcedColorsStylesheetBehavior(css `
-            :host([disabled]) .control {
-              border-color: ${SystemColors.ButtonFace};
-            }
-          `))));
+  `.withBehaviors(appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)));