@fluentui/web-components 2.5.6 → 2.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/CHANGELOG.json +46 -1
  2. package/CHANGELOG.md +20 -2
  3. package/dist/dts/combobox/combobox.stories.d.ts +5 -0
  4. package/dist/dts/custom-elements.d.ts +3 -35
  5. package/dist/dts/number-field/index.d.ts +1 -1
  6. package/dist/dts/number-field/number-field.styles.d.ts +1 -2
  7. package/dist/dts/search/index.d.ts +1 -1
  8. package/dist/dts/search/search.styles.d.ts +2 -3
  9. package/dist/dts/select/index.d.ts +1 -1
  10. package/dist/dts/select/select.styles.d.ts +11 -3
  11. package/dist/dts/styles/patterns/button.styles.d.ts +12 -6
  12. package/dist/dts/styles/patterns/input.styles.d.ts +13 -5
  13. package/dist/dts/text-area/index.d.ts +2 -18
  14. package/dist/dts/text-area/text-area.stories.d.ts +1 -17
  15. package/dist/dts/text-area/text-area.styles.d.ts +1 -2
  16. package/dist/dts/text-field/index.d.ts +2 -18
  17. package/dist/dts/text-field/text-field.stories.d.ts +1 -17
  18. package/dist/dts/text-field/text-field.styles.d.ts +1 -2
  19. package/dist/esm/anchor/anchor.styles.js +3 -10
  20. package/dist/esm/button/button.styles.js +14 -39
  21. package/dist/esm/combobox/combobox.stories.js +7 -2
  22. package/dist/esm/combobox/combobox.styles.js +22 -32
  23. package/dist/esm/number-field/number-field.styles.js +5 -16
  24. package/dist/esm/search/search.styles.js +8 -11
  25. package/dist/esm/select/select.stories.js +2 -2
  26. package/dist/esm/select/select.styles.js +35 -100
  27. package/dist/esm/styles/patterns/button.styles.js +190 -149
  28. package/dist/esm/styles/patterns/input.styles.js +112 -93
  29. package/dist/esm/text-area/text-area.styles.js +5 -11
  30. package/dist/esm/text-field/text-field.styles.js +5 -11
  31. package/dist/fluent-web-components.api.json +127 -397
  32. package/dist/web-components.d.ts +39 -90
  33. package/dist/web-components.js +148 -135
  34. package/dist/web-components.min.js +203 -233
  35. package/docs/api-report.md +38 -99
  36. package/karma.conf.js +3 -8
  37. package/package.json +29 -42
@@ -35,7 +35,6 @@ import { FlipperOptions } from '@microsoft/fast-foundation';
35
35
  import { FoundationElement } from '@microsoft/fast-foundation';
36
36
  import { FoundationElementDefinition } from '@microsoft/fast-foundation';
37
37
  import { FoundationElementRegistry } from '@microsoft/fast-foundation';
38
- import { FoundationElementTemplate } from '@microsoft/fast-foundation';
39
38
  import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation';
40
39
  import { HorizontalScrollOptions } from '@microsoft/fast-foundation';
41
40
  import { Listbox as Listbox_2 } from '@microsoft/fast-foundation';
@@ -66,7 +65,6 @@ import { TabPanel } from '@microsoft/fast-foundation';
66
65
  import { Tabs } from '@microsoft/fast-foundation';
67
66
  import { TextArea as TextArea_2 } from '@microsoft/fast-foundation';
68
67
  import { TextField as TextField_2 } from '@microsoft/fast-foundation';
69
- import { TextFieldOptions } from '@microsoft/fast-foundation';
70
68
  import { Toolbar as Toolbar_2 } from '@microsoft/fast-foundation';
71
69
  import { Tooltip as Tooltip_2 } from '@microsoft/fast-foundation';
72
70
  import { TreeItem } from '@microsoft/fast-foundation';
@@ -80,7 +78,7 @@ export declare const accentBaseColor: CSSDesignToken<Swatch>;
80
78
  /**
81
79
  * @internal
82
80
  */
83
- export declare const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
81
+ export declare const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
84
82
 
85
83
  /** @public */
86
84
  export declare const accentFillActive: CSSDesignToken<Swatch>;
@@ -227,40 +225,8 @@ export declare const allComponents: {
227
225
  fluentTabs: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof Tabs>;
228
226
  fluentTab: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tab>;
229
227
  fluentTabPanel: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TabPanel>;
230
- fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition< {
231
- baseName: string;
232
- baseClass: typeof TextArea_2;
233
- template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
234
- styles: (context: any, definition: any) => ElementStyles;
235
- shadowOptions: {
236
- delegatesFocus: true;
237
- };
238
- }> | undefined) => FoundationElementRegistry< {
239
- baseName: string;
240
- baseClass: typeof TextArea_2;
241
- template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
242
- styles: (context: any, definition: any) => ElementStyles;
243
- shadowOptions: {
244
- delegatesFocus: true;
245
- };
246
- }, TextArea>;
247
- fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition< {
248
- baseName: string;
249
- baseClass: typeof TextField_2;
250
- template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
251
- styles: (context: any, definition: any) => ElementStyles;
252
- shadowOptions: {
253
- delegatesFocus: true;
254
- };
255
- }> | undefined) => FoundationElementRegistry< {
256
- baseName: string;
257
- baseClass: typeof TextField_2;
258
- template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
259
- styles: (context: any, definition: any) => ElementStyles;
260
- shadowOptions: {
261
- delegatesFocus: true;
262
- };
263
- }, TextField>;
228
+ fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TextArea>;
229
+ fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, TextField>;
264
230
  fluentToolbar: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Toolbar>;
265
231
  fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tooltip>;
266
232
  fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TreeView>;
@@ -349,9 +315,11 @@ export declare type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | str
349
315
  export declare const badgeStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
350
316
 
351
317
  /**
318
+ * The base styles for button controls, without `appearance` visual differences.
319
+ *
352
320
  * @internal
353
321
  */
354
- export declare const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
322
+ export declare const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
355
323
 
356
324
  /** @public */
357
325
  export declare const baseHeightMultiplier: CSSDesignToken<number>;
@@ -359,6 +327,13 @@ export declare const baseHeightMultiplier: CSSDesignToken<number>;
359
327
  /** @public */
360
328
  export declare const baseHorizontalSpacingMultiplier: CSSDesignToken<number>;
361
329
 
330
+ /**
331
+ * The base styles for input controls, without `appearance` visual differences.
332
+ *
333
+ * @internal
334
+ */
335
+ export declare const baseInputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
336
+
362
337
  /** @public */
363
338
  export declare const baseLayerLuminance: CSSDesignToken<number>;
364
339
 
@@ -1693,23 +1668,7 @@ export declare const fluentTabs: (overrideDefinition?: OverrideFoundationElement
1693
1668
  *
1694
1669
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
1695
1670
  */
1696
- export declare const fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition< {
1697
- baseName: string;
1698
- baseClass: typeof TextArea_2;
1699
- template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
1700
- styles: (context: any, definition: any) => ElementStyles;
1701
- shadowOptions: {
1702
- delegatesFocus: true;
1703
- };
1704
- }> | undefined) => FoundationElementRegistry< {
1705
- baseName: string;
1706
- baseClass: typeof TextArea_2;
1707
- template: FoundationElementTemplate<ViewTemplate<TextArea_2, any>, FoundationElementDefinition>;
1708
- styles: (context: any, definition: any) => ElementStyles;
1709
- shadowOptions: {
1710
- delegatesFocus: true;
1711
- };
1712
- }, typeof TextArea>;
1671
+ export declare const fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TextArea>;
1713
1672
 
1714
1673
  /**
1715
1674
  * The Fluent Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField},
@@ -1722,23 +1681,7 @@ delegatesFocus: true;
1722
1681
  *
1723
1682
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
1724
1683
  */
1725
- export declare const fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition< {
1726
- baseName: string;
1727
- baseClass: typeof TextField_2;
1728
- template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
1729
- styles: (context: any, definition: any) => ElementStyles;
1730
- shadowOptions: {
1731
- delegatesFocus: true;
1732
- };
1733
- }> | undefined) => FoundationElementRegistry< {
1734
- baseName: string;
1735
- baseClass: typeof TextField_2;
1736
- template: FoundationElementTemplate<ViewTemplate<TextField_2, any>, TextFieldOptions>;
1737
- styles: (context: any, definition: any) => ElementStyles;
1738
- shadowOptions: {
1739
- delegatesFocus: true;
1740
- };
1741
- }, typeof TextField>;
1684
+ export declare const fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TextField>;
1742
1685
 
1743
1686
  /**
1744
1687
  * The Fluent Toolbar Custom Element. Implements {@link @microsoft/fast-foundation#Toolbar},
@@ -1885,32 +1828,33 @@ export declare const horizontalScrollStyles: (context: ElementDefinitionContext,
1885
1828
  /**
1886
1829
  * @internal
1887
1830
  */
1888
- export declare const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
1889
-
1890
- /**
1891
- * @internal
1892
- */
1893
- export declare const inputFilledForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
1831
+ export declare const HypertextStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
1894
1832
 
1895
1833
  /**
1834
+ * The visual styles for inputs with `appearance='filled'`.
1835
+ *
1896
1836
  * @internal
1897
1837
  */
1898
- export declare const inputFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
1838
+ export declare const inputFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
1899
1839
 
1900
1840
  /**
1901
1841
  * @internal
1902
1842
  */
1903
- export declare const inputForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
1843
+ export declare const inputForcedColorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
1904
1844
 
1905
1845
  /**
1846
+ * The visual styles for inputs with `appearance='outline'`.
1847
+ *
1906
1848
  * @internal
1907
1849
  */
1908
- export declare const inputStateStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
1850
+ export declare const inputOutlineStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string, interactivitySelector?: string) => ElementStyles;
1909
1851
 
1910
1852
  /**
1853
+ * The styles for active and focus interactions for input controls.
1854
+ *
1911
1855
  * @internal
1912
1856
  */
1913
- export declare const inputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, rootSelector: string) => ElementStyles;
1857
+ export declare const inputStateStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
1914
1858
 
1915
1859
  /** @public */
1916
1860
  export declare interface InteractiveColorRecipe {
@@ -1952,7 +1896,7 @@ export declare const layerCornerRadius: CSSDesignToken<number>;
1952
1896
  /**
1953
1897
  * @internal
1954
1898
  */
1955
- export declare const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
1899
+ export declare const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
1956
1900
 
1957
1901
  export declare class Listbox extends Listbox_2 {
1958
1902
  }
@@ -1991,6 +1935,11 @@ export declare const menuStyles: (context: ElementDefinitionContext, definition:
1991
1935
  /** @public */
1992
1936
  export declare const neutralBaseColor: CSSDesignToken<Swatch>;
1993
1937
 
1938
+ /**
1939
+ * @internal
1940
+ */
1941
+ export declare const NeutralButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
1942
+
1994
1943
  /** @public @deprecated Use neutralFillInverseActive */
1995
1944
  export declare const neutralContrastFillActive: CSSDesignToken<Swatch>;
1996
1945
 
@@ -2512,7 +2461,7 @@ export declare type NumberFieldAppearance = 'filled' | 'outline';
2512
2461
  * Styles for NumberField
2513
2462
  * @public
2514
2463
  */
2515
- export declare const numberFieldStyles: (context: any, definition: any) => ElementStyles;
2464
+ export declare const numberFieldStyles: (context: ElementDefinitionContext, definition: NumberFieldOptions) => ElementStyles;
2516
2465
 
2517
2466
  /**
2518
2467
  * Styles for Option
@@ -2523,7 +2472,7 @@ export declare const OptionStyles: (context: ElementDefinitionContext, definitio
2523
2472
  /**
2524
2473
  * @internal
2525
2474
  */
2526
- export declare const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
2475
+ export declare const OutlineButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
2527
2476
 
2528
2477
  /** @public @deprecated Use strokeWidth */
2529
2478
  export declare const outlineWidth: CSSDesignToken<number>;
@@ -2676,7 +2625,7 @@ export declare type SearchAppearance = 'filled' | 'outline';
2676
2625
  * Styles for Search
2677
2626
  * @public
2678
2627
  */
2679
- export declare const searchStyles: (context: any, definition: any) => ElementStyles;
2628
+ export declare const searchStyles: (context: ElementDefinitionContext, definition: SearchOptions) => ElementStyles;
2680
2629
 
2681
2630
  /**
2682
2631
  * @public
@@ -2716,7 +2665,7 @@ export declare type SelectAppearance = 'filled' | 'outline' | 'stealth';
2716
2665
  * Styles for Select
2717
2666
  * @public
2718
2667
  */
2719
- export declare const selectStyles: (context: any, definition: any) => ElementStyles;
2668
+ export declare const selectStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;
2720
2669
 
2721
2670
  export { Skeleton }
2722
2671
 
@@ -2755,7 +2704,7 @@ export declare enum StandardLuminance {
2755
2704
  /**
2756
2705
  * @internal
2757
2706
  */
2758
- export declare const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles;
2707
+ export declare const StealthButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
2759
2708
 
2760
2709
  /** @public */
2761
2710
  export declare const strokeWidth: CSSDesignToken<number>;
@@ -2851,7 +2800,7 @@ export declare type TextAreaAppearance = 'filled' | 'outline';
2851
2800
  * Styles for TextArea
2852
2801
  * @public
2853
2802
  */
2854
- export declare const textAreaStyles: (context: any, definition: any) => ElementStyles;
2803
+ export declare const textAreaStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
2855
2804
 
2856
2805
  /**
2857
2806
  * The Fluent text field class
@@ -2886,7 +2835,7 @@ export declare type TextFieldAppearance = 'filled' | 'outline';
2886
2835
  * Styles for TextField
2887
2836
  * @public
2888
2837
  */
2889
- export declare const textFieldStyles: (context: any, definition: any) => ElementStyles;
2838
+ export declare const textFieldStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
2890
2839
 
2891
2840
  /**
2892
2841
  * The Fluent toolbar class