@fluentui/web-components 2.5.6 → 2.5.7

package/CHANGELOG.json

@@ -2,7 +2,37 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Mon, 19 Sep 2022 07:45:53 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": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 19 Sep 2022 07:45:53 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:45:53 GMT 
+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

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/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/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/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)));

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,50 +1,40 @@
 import { css } from '@microsoft/fast-element';
-import { disabledCursor } 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 { neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralStrokeInputActive, neutralStrokeInputHover, neutralStrokeInputRest, strokeWidth } from '../design-tokens';
+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)}
 
-    :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};
-    }
+    ${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%;
-        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/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)));