@fluentui/web-components 2.0.1 → 2.1.2

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 (39) hide show
  1. package/CHANGELOG.json +61 -1
  2. package/CHANGELOG.md +38 -2
  3. package/dist/dts/anchor/anchor.stories.d.ts +1 -1
  4. package/dist/dts/badge/badge.stories.d.ts +1 -1
  5. package/dist/dts/button/button.stories.d.ts +1 -1
  6. package/dist/dts/calendar/calendar.stories.d.ts +86 -0
  7. package/dist/dts/calendar/calendar.styles.d.ts +7 -0
  8. package/dist/dts/calendar/index.d.ts +18 -0
  9. package/dist/dts/custom-elements.d.ts +13 -11
  10. package/dist/dts/menu/menu.stories.d.ts +1 -1
  11. package/dist/dts/text-area/text-area.stories.d.ts +1 -1
  12. package/dist/dts/text-field/text-field.stories.d.ts +1 -1
  13. package/dist/dts/tooltip/tooltip.stories.d.ts +1 -1
  14. package/dist/esm/accordion/accordion-item/accordion-item.styles.js +6 -5
  15. package/dist/esm/calendar/calendar.stories.js +115 -0
  16. package/dist/esm/calendar/calendar.styles.js +133 -0
  17. package/dist/esm/calendar/index.js +31 -0
  18. package/dist/esm/checkbox/checkbox.styles.js +0 -1
  19. package/dist/esm/custom-elements.js +3 -1
  20. package/dist/esm/divider/divider.styles.js +1 -2
  21. package/dist/esm/flipper/flipper.styles.js +0 -1
  22. package/dist/esm/listbox/listbox.styles.js +5 -1
  23. package/dist/esm/listbox-option/listbox-option.styles.js +0 -1
  24. package/dist/esm/menu/menu.styles.js +9 -2
  25. package/dist/esm/menu-item/menu-item.styles.js +1 -2
  26. package/dist/esm/progress/progress/progress.styles.js +0 -1
  27. package/dist/esm/progress/progress-ring/progress-ring.styles.js +0 -1
  28. package/dist/esm/radio/radio.styles.js +0 -1
  29. package/dist/esm/radio-group/radio-group.styles.js +0 -2
  30. package/dist/esm/slider/slider.styles.js +0 -1
  31. package/dist/esm/switch/switch.styles.js +3 -3
  32. package/dist/esm/tabs/tabs.stories.js +56 -2
  33. package/dist/esm/tabs/tabs.styles.js +1 -0
  34. package/dist/fluent-web-components.api.json +141 -12
  35. package/dist/web-components.d.ts +12 -0
  36. package/dist/web-components.js +700 -20
  37. package/dist/web-components.min.js +147 -143
  38. package/docs/api-report.md +12 -7
  39. package/package.json +1 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,67 @@
2
2
  "name": "@fluentui/web-components",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 02 Nov 2021 07:34:50 GMT",
5
+ "date": "Fri, 10 Dec 2021 07:28:51 GMT",
6
+ "tag": "@fluentui/web-components_v2.1.2",
7
+ "version": "2.1.2",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "robarb@microsoft.com",
12
+ "package": "@fluentui/web-components",
13
+ "commit": "89deee5b2a8a5da67a557cd6b19fe9c51ab36de1",
14
+ "comment": "fix: z-index in accordion header renders above content"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Thu, 02 Dec 2021 07:36:29 GMT",
21
+ "tag": "@fluentui/web-components_v2.1.1",
22
+ "version": "2.1.1",
23
+ "comments": {
24
+ "patch": [
25
+ {
26
+ "author": "jes@microsoft.com",
27
+ "package": "@fluentui/web-components",
28
+ "commit": "a69b283c2eb799c0edc5276d9d1094d1f3d4e4ac",
29
+ "comment": "fix: tabpanel shifting in vertical layout"
30
+ }
31
+ ]
32
+ }
33
+ },
34
+ {
35
+ "date": "Tue, 23 Nov 2021 07:27:34 GMT",
36
+ "tag": "@fluentui/web-components_v2.1.0",
37
+ "version": "2.1.0",
38
+ "comments": {
39
+ "minor": [
40
+ {
41
+ "author": "jes@microsoft.com",
42
+ "package": "@fluentui/web-components",
43
+ "commit": "2dbe9eadd8ae071bbb056ad15461c1c7ea8d9430",
44
+ "comment": "fix: remove margins from host elements"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Tue, 09 Nov 2021 07:38:11 GMT",
51
+ "tag": "@fluentui/web-components_v2.0.2",
52
+ "version": "2.0.2",
53
+ "comments": {
54
+ "patch": [
55
+ {
56
+ "author": "robarb@microsoft.com",
57
+ "package": "@fluentui/web-components",
58
+ "commit": "55a9400f93758ad7cb37789aa524a6eb6b2a5322",
59
+ "comment": "FluentUI calendar component"
60
+ }
61
+ ]
62
+ }
63
+ },
64
+ {
65
+ "date": "Tue, 02 Nov 2021 07:37:01 GMT",
6
66
  "tag": "@fluentui/web-components_v2.0.1",
7
67
  "version": "2.0.1",
8
68
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,48 @@
1
1
  # Change Log - @fluentui/web-components
2
2
 
3
- This log was last generated on Tue, 02 Nov 2021 07:34:50 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 10 Dec 2021 07:28:51 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [2.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.1.2)
8
+
9
+ Fri, 10 Dec 2021 07:28:51 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.1.1..@fluentui/web-components_v2.1.2)
11
+
12
+ ### Patches
13
+
14
+ - fix: z-index in accordion header renders above content ([PR #20587](https://github.com/microsoft/fluentui/pull/20587) by robarb@microsoft.com)
15
+
16
+ ## [2.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.1.1)
17
+
18
+ Thu, 02 Dec 2021 07:36:29 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.1.0..@fluentui/web-components_v2.1.1)
20
+
21
+ ### Patches
22
+
23
+ - fix: tabpanel shifting in vertical layout ([PR #20641](https://github.com/microsoft/fluentui/pull/20641) by jes@microsoft.com)
24
+
25
+ ## [2.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.1.0)
26
+
27
+ Tue, 23 Nov 2021 07:27:34 GMT
28
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.0.2..@fluentui/web-components_v2.1.0)
29
+
30
+ ### Minor changes
31
+
32
+ - fix: remove margins from host elements ([PR #20710](https://github.com/microsoft/fluentui/pull/20710) by jes@microsoft.com)
33
+
34
+ ## [2.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.0.2)
35
+
36
+ Tue, 09 Nov 2021 07:38:11 GMT
37
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.0.1..@fluentui/web-components_v2.0.2)
38
+
39
+ ### Patches
40
+
41
+ - FluentUI calendar component ([PR #20356](https://github.com/microsoft/fluentui/pull/20356) by robarb@microsoft.com)
42
+
7
43
  ## [2.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.0.1)
8
44
 
9
- Tue, 02 Nov 2021 07:34:50 GMT
45
+ Tue, 02 Nov 2021 07:37:01 GMT
10
46
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.0.0..@fluentui/web-components_v2.0.1)
11
47
 
12
48
  ### Patches
@@ -1,6 +1,6 @@
1
1
  declare const _default: {
2
2
  title: string;
3
- 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(".").Anchor>;
3
+ 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").Anchor>;
4
4
  argTypes: {
5
5
  appearance: {
6
6
  options: string[];
@@ -1,6 +1,6 @@
1
1
  declare const _default: {
2
2
  title: string;
3
- 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(".").Badge>;
3
+ 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").Badge>;
4
4
  argTypes: {
5
5
  appearance: {
6
6
  options: string[];
@@ -1,6 +1,6 @@
1
1
  declare const _default: {
2
2
  title: string;
3
- 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(".").Button>;
3
+ 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").Button>;
4
4
  argTypes: {
5
5
  appearance: {
6
6
  description: string;
@@ -0,0 +1,86 @@
1
+ import './index';
2
+ declare const _default: {
3
+ title: string;
4
+ component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").CalendarOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").CalendarOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
5
+ argTypes: {
6
+ month: {
7
+ description: string;
8
+ control: {
9
+ type: string;
10
+ };
11
+ options: string[];
12
+ default: string;
13
+ };
14
+ year: {
15
+ description: string;
16
+ control: {
17
+ type: string;
18
+ };
19
+ options: string[];
20
+ default: string;
21
+ };
22
+ locale: {
23
+ control: {
24
+ type: string;
25
+ };
26
+ options: string[];
27
+ default: string;
28
+ description: string;
29
+ };
30
+ dayFormat: {
31
+ description: string;
32
+ options: string[];
33
+ control: {
34
+ type: string;
35
+ };
36
+ default: string;
37
+ };
38
+ weekdayFormat: {
39
+ description: string;
40
+ options: string[];
41
+ control: {
42
+ type: string;
43
+ };
44
+ default: string;
45
+ };
46
+ monthFormat: {
47
+ description: string;
48
+ options: string[];
49
+ control: {
50
+ type: string;
51
+ };
52
+ default: string;
53
+ };
54
+ yearFormat: {
55
+ description: string;
56
+ options: string[];
57
+ control: {
58
+ type: string;
59
+ };
60
+ default: string;
61
+ };
62
+ disabledDates: {
63
+ description: string;
64
+ options: any;
65
+ control: {
66
+ type: string;
67
+ };
68
+ };
69
+ selectedDates: {
70
+ description: string;
71
+ options: any;
72
+ control: {
73
+ type: string;
74
+ };
75
+ };
76
+ readonly: {
77
+ description: string;
78
+ control: {
79
+ type: string;
80
+ };
81
+ default: boolean;
82
+ };
83
+ };
84
+ };
85
+ export default _default;
86
+ export declare const Calendar: any;
@@ -0,0 +1,7 @@
1
+ import { ElementStyles } from "@microsoft/fast-element";
2
+ import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ /**
4
+ * Styles for calendar
5
+ * @public
6
+ */
7
+ export declare const calendarStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
@@ -0,0 +1,18 @@
1
+ import { CalendarOptions, Calendar as FoundationCalendar } from '@microsoft/fast-foundation';
2
+ import { calendarStyles as styles } from './calendar.styles';
3
+ /**
4
+ * Updated Calendar class that is readonly by default
5
+ */
6
+ export declare class Calendar extends FoundationCalendar {
7
+ readonly: boolean;
8
+ }
9
+ /**
10
+ * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar},
11
+ * {@link @microsoft/fast-foundation#calendarTemplate}
12
+ *
13
+ * @public
14
+ * @remarks
15
+ * HTML Element \<fluent-calendar\>
16
+ */
17
+ export declare const fluentCalendar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<CalendarOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<CalendarOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
18
+ export { styles as calendarStyles };
@@ -9,6 +9,7 @@ import { fluentBadge } from './badge/index';
9
9
  import { fluentBreadcrumb } from './breadcrumb/index';
10
10
  import { fluentBreadcrumbItem } from './breadcrumb-item/index';
11
11
  import { fluentButton } from './button/index';
12
+ import { fluentCalendar } from './calendar/index';
12
13
  import { fluentCard } from './card/index';
13
14
  import { fluentCheckbox } from './checkbox/index';
14
15
  import { fluentCombobox } from './combobox/index';
@@ -38,7 +39,7 @@ import { fluentToolbar } from './toolbar/index';
38
39
  import { fluentTooltip } from './tooltip/index';
39
40
  import { fluentTreeView } from './tree-view/index';
40
41
  import { fluentTreeItem } from './tree-item/index';
41
- export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
42
+ export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCalendar, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
42
43
  /**
43
44
  * All Fluent UI Web Components
44
45
  * @public
@@ -46,13 +47,14 @@ export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegio
46
47
  export declare const allComponents: {
47
48
  fluentAccordion: (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").Accordion>;
48
49
  fluentAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").AccordionItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").AccordionItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
49
- fluentAnchor: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./anchor").Anchor>;
50
+ fluentAnchor: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./anchor/index").Anchor>;
50
51
  fluentAnchoredRegion: (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").AnchoredRegion>;
51
- fluentBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./badge").Badge>;
52
+ fluentBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./badge/index").Badge>;
52
53
  fluentBreadcrumb: (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").Breadcrumb>;
53
54
  fluentBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").BreadcrumbItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").BreadcrumbItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
54
- fluentButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./button").Button>;
55
- fluentCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./card").Card>;
55
+ fluentButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./button/index").Button>;
56
+ fluentCalendar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").CalendarOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").CalendarOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
57
+ fluentCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./card/index").Card>;
56
58
  fluentCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").CheckboxOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").CheckboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
57
59
  fluentCombobox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").ComboboxOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").ComboboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
58
60
  fluentDataGrid: (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").DataGrid>;
@@ -66,14 +68,14 @@ export declare const allComponents: {
66
68
  baseName: string;
67
69
  template: import("@microsoft/fast-element").ViewTemplate<any, any>;
68
70
  styles: import("@microsoft/fast-element").ElementStyles;
69
- }, typeof import("./design-system-provider").DesignSystemProvider>;
71
+ }, typeof import("./design-system-provider/index").DesignSystemProvider>;
70
72
  fluentDialog: (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").Dialog>;
71
73
  fluentDivider: (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").Divider>;
72
74
  fluentFlipper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FlipperOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FlipperOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
73
75
  fluentHorizontalScroll: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").HorizontalScrollOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").HorizontalScrollOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
74
76
  fluentListbox: (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").Listbox>;
75
77
  fluentOption: (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").ListboxOption>;
76
- fluentMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./menu").Menu>;
78
+ fluentMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./menu/index").Menu>;
77
79
  fluentMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").MenuItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").MenuItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
78
80
  fluentNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").NumberFieldOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").NumberFieldOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
79
81
  fluentProgress: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").ProgressOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").ProgressOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -88,10 +90,10 @@ export declare const allComponents: {
88
90
  fluentTabs: (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").Tabs>;
89
91
  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>;
90
92
  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>;
91
- 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").TextArea>;
92
- 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").TextField>;
93
- 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").Toolbar>;
94
- 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").Tooltip>;
93
+ 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>;
94
+ 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>;
95
+ 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>;
96
+ 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>;
95
97
  fluentTreeView: (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").TreeView>;
96
98
  fluentTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").TreeItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").TreeItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
97
99
  register(container?: Container | undefined, ...rest: any[]): void;
@@ -1,6 +1,6 @@
1
1
  declare const _default: {
2
2
  title: string;
3
- 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(".").Menu>;
3
+ 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").Menu>;
4
4
  };
5
5
  export default _default;
6
6
  export declare const Menu: any;
@@ -1,6 +1,6 @@
1
1
  declare const _default: {
2
2
  title: string;
3
- 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(".").TextArea>;
3
+ 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>;
4
4
  argTypes: {
5
5
  appearance: {
6
6
  defaultValue: string;
@@ -1,6 +1,6 @@
1
1
  declare const _default: {
2
2
  title: string;
3
- 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(".").TextField>;
3
+ 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>;
4
4
  argTypes: {
5
5
  appearance: {
6
6
  options: string[];
@@ -1,6 +1,6 @@
1
1
  declare const _default: {
2
2
  title: string;
3
- components: (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>;
3
+ components: (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").Tooltip>;
4
4
  argTypes: {
5
5
  position: {
6
6
  options: string[];
@@ -42,7 +42,6 @@ export const accordionItemStyles = (context, definition) => css `
42
42
  position: relative;
43
43
  grid-template-columns: auto 1fr auto auto;
44
44
  align-items: center;
45
- z-index: 2;
46
45
  }
47
46
 
48
47
  .button {
@@ -67,7 +66,6 @@ export const accordionItemStyles = (context, definition) => css `
67
66
  left: 0;
68
67
  right: 0;
69
68
  bottom: 0;
70
- z-index: 1;
71
69
  cursor: pointer;
72
70
  }
73
71
 
@@ -95,7 +93,6 @@ export const accordionItemStyles = (context, definition) => css `
95
93
  align-items: center;
96
94
  justify-content: center;
97
95
  grid-column: 4;
98
- z-index: 2;
99
96
  pointer-events: none;
100
97
  background: ${neutralFillStealthRestOnNeutralFillLayerRest};
101
98
  border-radius: calc(${controlCornerRadius} * 1px);
@@ -135,7 +132,6 @@ export const accordionItemStyles = (context, definition) => css `
135
132
  padding-inline-start: calc(${designUnit} * 2 * 1px);
136
133
  justify-content: center;
137
134
  grid-column: 1;
138
- z-index: 2;
139
135
  }
140
136
 
141
137
  .end {
@@ -143,7 +139,12 @@ export const accordionItemStyles = (context, definition) => css `
143
139
  align-items: center;
144
140
  justify-content: center;
145
141
  grid-column: 3;
146
- z-index: 2;
142
+ }
143
+
144
+ .icon,
145
+ .start,
146
+ .end {
147
+ position: relative;
147
148
  }
148
149
  `.withBehaviors(forcedColorsStylesheetBehavior(css `
149
150
  .button:${focusVisible}::before {
@@ -0,0 +1,115 @@
1
+ import './index';
2
+ import { fluentCalendar } from './index';
3
+ const now = new Date();
4
+ const years = new Array(9).fill(null).map((_, index) => (now.getFullYear() - 4 + index).toString());
5
+ const groupsToDates = matrix => matrix.map(days => days.map(day => `${now.getMonth() + 1}-${day}-${now.getFullYear()}`).join(','));
6
+ const disabledDates = groupsToDates([
7
+ [1, 2, 3, 4, now.getDate()],
8
+ [6, 7, 10, 18],
9
+ [8, 17, 24, 25],
10
+ [4, 11, 18, 25],
11
+ ]);
12
+ export default {
13
+ title: 'Components/Calendar',
14
+ component: fluentCalendar,
15
+ argTypes: {
16
+ month: {
17
+ description: 'Month of the calendar to display.',
18
+ control: { type: 'select' },
19
+ options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
20
+ default: 'The current month',
21
+ },
22
+ year: {
23
+ description: 'Year of the calendar to display.',
24
+ control: { type: 'select' },
25
+ options: years,
26
+ default: 'The current year',
27
+ },
28
+ locale: {
29
+ control: { type: 'select' },
30
+ options: ['en-US', 'fr-FR', 'de-DE', 'th-TH-u-ca-buddhist-nu-thai', 'ar-XE-u-ca-islamic-nu-arab'],
31
+ default: 'en-US',
32
+ description: 'Locale information which can include market (language and country), calendar type and numbering type.',
33
+ },
34
+ dayFormat: {
35
+ description: 'Formatting for the numbered days.',
36
+ options: ['2-digit', 'numeric'],
37
+ control: { type: 'select' },
38
+ default: 'numeric',
39
+ },
40
+ weekdayFormat: {
41
+ description: 'Formatting for the weekday titles.',
42
+ options: ['long', 'narrow', 'short'],
43
+ control: { type: 'select' },
44
+ default: 'short',
45
+ },
46
+ monthFormat: {
47
+ description: 'Formatting for the month name in the title.',
48
+ options: ['2-digit', 'long', 'narrow', 'numeric', 'short'],
49
+ control: { type: 'select' },
50
+ default: 'long',
51
+ },
52
+ yearFormat: {
53
+ description: 'Formatting for the year in the title.',
54
+ options: ['2-digit', 'numeric'],
55
+ control: { type: 'select' },
56
+ default: 'numeric',
57
+ },
58
+ disabledDates: {
59
+ description: 'Dates to be shown as disabled.',
60
+ options: disabledDates,
61
+ control: { type: 'select' },
62
+ },
63
+ selectedDates: {
64
+ description: 'Dates to be shown as selected',
65
+ options: disabledDates,
66
+ control: { type: 'select' },
67
+ },
68
+ readonly: {
69
+ description: 'A readonly version of the calendar without AT interactions.',
70
+ control: { type: 'boolean' },
71
+ default: true,
72
+ },
73
+ },
74
+ };
75
+ const CalendarTemplate = ({ month, year, locale, dayFormat, weekdayFormat, monthFormat, yearFormat, disabledDates, selectedDates, readonly, }) => `
76
+ <style>
77
+ div.docs-story > div:first-child {
78
+ height: 22em !important;
79
+ }
80
+ </style>
81
+ <fluent-calendar
82
+ ${month ? `month="${month}"` : ''}
83
+ ${year ? `year="${year}"` : ''}
84
+ ${locale ? `locale="${locale}"` : ''}
85
+ ${dayFormat ? `day-format="${dayFormat}"` : ''}
86
+ ${weekdayFormat ? `weekday-format="${weekdayFormat}"` : ''}
87
+ ${monthFormat ? `month-format="${monthFormat}"` : ''}
88
+ ${yearFormat ? `year-format="${yearFormat}"` : ''}
89
+ ${disabledDates ? `disabled-dates="${disabledDates}"` : ''}
90
+ ${selectedDates ? `selected-dates="${selectedDates}"` : ''}
91
+ ${readonly === false ? `readonly="false"` : ''}
92
+ ></fluent-calendar>
93
+ `;
94
+ export const Calendar = CalendarTemplate.bind({});
95
+ Calendar.args = {
96
+ label: 'Calendar',
97
+ month: (now.getMonth() + 1).toString(),
98
+ year: now.getFullYear().toString(),
99
+ locale: 'en-US',
100
+ readonly: true,
101
+ dayFormat: 'numeric',
102
+ weekdayFormat: 'short',
103
+ monthFormat: 'long',
104
+ yearFormat: 'numeric',
105
+ };
106
+ const example = `
107
+ <fluent-calendar></fluent-calendar>
108
+ `;
109
+ Calendar.parameters = {
110
+ docs: {
111
+ source: {
112
+ code: example,
113
+ },
114
+ },
115
+ };