@fluentui/web-components 2.5.6 → 2.5.7
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.
- package/CHANGELOG.json +31 -1
- package/CHANGELOG.md +11 -2
- package/dist/dts/combobox/combobox.stories.d.ts +5 -0
- package/dist/dts/custom-elements.d.ts +3 -35
- package/dist/dts/number-field/index.d.ts +1 -1
- package/dist/dts/number-field/number-field.styles.d.ts +1 -2
- package/dist/dts/search/index.d.ts +1 -1
- package/dist/dts/search/search.styles.d.ts +2 -3
- package/dist/dts/select/index.d.ts +1 -1
- package/dist/dts/select/select.styles.d.ts +11 -3
- package/dist/dts/styles/patterns/button.styles.d.ts +12 -6
- package/dist/dts/styles/patterns/input.styles.d.ts +13 -5
- package/dist/dts/text-area/index.d.ts +2 -18
- package/dist/dts/text-area/text-area.stories.d.ts +1 -17
- package/dist/dts/text-area/text-area.styles.d.ts +1 -2
- package/dist/dts/text-field/index.d.ts +2 -18
- package/dist/dts/text-field/text-field.stories.d.ts +1 -17
- package/dist/dts/text-field/text-field.styles.d.ts +1 -2
- package/dist/esm/anchor/anchor.styles.js +3 -10
- package/dist/esm/button/button.styles.js +14 -39
- package/dist/esm/combobox/combobox.stories.js +7 -2
- package/dist/esm/combobox/combobox.styles.js +22 -32
- package/dist/esm/number-field/number-field.styles.js +5 -16
- package/dist/esm/search/search.styles.js +8 -11
- package/dist/esm/select/select.stories.js +2 -2
- package/dist/esm/select/select.styles.js +35 -100
- package/dist/esm/styles/patterns/button.styles.js +190 -149
- package/dist/esm/styles/patterns/input.styles.js +112 -93
- package/dist/esm/text-area/text-area.styles.js +5 -11
- package/dist/esm/text-field/text-field.styles.js +5 -11
- package/dist/fluent-web-components.api.json +127 -397
- package/dist/web-components.d.ts +39 -90
- package/dist/web-components.js +99 -100
- package/dist/web-components.min.js +93 -123
- package/docs/api-report.md +38 -99
- package/karma.conf.js +3 -8
- package/package.json +27 -40
package/dist/web-components.d.ts
CHANGED
|
@@ -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
|
|
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
|
-
|
|
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
|
|
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
|
|
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,
|
|
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,
|
|
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
|
|
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
|
|
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
|
|
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:
|
|
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
|
|
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:
|
|
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:
|
|
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
|
|
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:
|
|
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:
|
|
2838
|
+
export declare const textFieldStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
|
|
2890
2839
|
|
|
2891
2840
|
/**
|
|
2892
2841
|
* The Fluent toolbar class
|