@fluentui/web-components 3.0.0-rc.17 → 3.0.0-rc.19

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 (46) hide show
  1. package/CHANGELOG.md +24 -2
  2. package/custom-elements.json +26 -53
  3. package/dist/esm/compound-button/compound-button.template.d.ts +3 -1
  4. package/dist/esm/compound-button/compound-button.template.js +7 -2
  5. package/dist/esm/compound-button/compound-button.template.js.map +1 -1
  6. package/dist/esm/define-all.d.ts +42 -0
  7. package/dist/esm/define-all.js +43 -0
  8. package/dist/esm/define-all.js.map +1 -0
  9. package/dist/esm/dialog/dialog.d.ts +37 -9
  10. package/dist/esm/dialog/dialog.js +87 -45
  11. package/dist/esm/dialog/dialog.js.map +1 -1
  12. package/dist/esm/dialog/dialog.template.js +5 -3
  13. package/dist/esm/dialog/dialog.template.js.map +1 -1
  14. package/dist/esm/drawer/drawer.d.ts +36 -7
  15. package/dist/esm/drawer/drawer.js +74 -42
  16. package/dist/esm/drawer/drawer.js.map +1 -1
  17. package/dist/esm/drawer/drawer.template.js +5 -3
  18. package/dist/esm/drawer/drawer.template.js.map +1 -1
  19. package/dist/esm/index-all-rollup.d.ts +2 -0
  20. package/dist/esm/index-all-rollup.js +9 -0
  21. package/dist/esm/index-all-rollup.js.map +1 -0
  22. package/dist/esm/index-rollup.d.ts +1 -43
  23. package/dist/esm/index-rollup.js +6 -43
  24. package/dist/esm/index-rollup.js.map +1 -1
  25. package/dist/esm/index.d.ts +1 -1
  26. package/dist/esm/index.js +1 -1
  27. package/dist/esm/index.js.map +1 -1
  28. package/dist/esm/menu-list/menu-list.base.js +7 -1
  29. package/dist/esm/menu-list/menu-list.base.js.map +1 -1
  30. package/dist/esm/theme/index.d.ts +1 -1
  31. package/dist/esm/theme/index.js +1 -1
  32. package/dist/esm/theme/index.js.map +1 -1
  33. package/dist/esm/theme/set-theme.d.ts +0 -5
  34. package/dist/esm/theme/set-theme.js +0 -7
  35. package/dist/esm/theme/set-theme.js.map +1 -1
  36. package/dist/esm/tree/tree.base.js +3 -0
  37. package/dist/esm/tree/tree.base.js.map +1 -1
  38. package/dist/esm/tree/tree.js +1 -1
  39. package/dist/esm/tree/tree.js.map +1 -1
  40. package/dist/esm/tree/tree.template.js +1 -1
  41. package/dist/web-components-all.js +14970 -0
  42. package/dist/web-components-all.min.js +47 -0
  43. package/dist/web-components.d.ts +74 -22
  44. package/dist/web-components.js +6014 -5407
  45. package/dist/web-components.min.js +21 -546
  46. package/package.json +18 -5
package/CHANGELOG.md CHANGED
@@ -1,12 +1,34 @@
1
1
  # Change Log - @fluentui/web-components
2
2
 
3
- This log was last generated on Wed, 06 May 2026 19:08:27 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 13 May 2026 04:08:24 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [3.0.0-rc.19](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.19)
8
+
9
+ Wed, 13 May 2026 04:08:24 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.18..@fluentui/web-components_v3.0.0-rc.19)
11
+
12
+ ### Changes
13
+
14
+ - fix: remove hoisted peer dependency entries ([PR #36184](https://github.com/microsoft/fluentui/pull/36184) by 863023+radium-v@users.noreply.github.com)
15
+ - fix: enhance accessibility attributes for drawer component ([PR #36191](https://github.com/microsoft/fluentui/pull/36191) by 863023+radium-v@users.noreply.github.com)
16
+ - fix keyboard navigation regressions for tree and menu-list ([PR #36118](https://github.com/microsoft/fluentui/pull/36118) by machi@microsoft.com)
17
+ - fix: synchronize compound-button template with button template ([PR #36191](https://github.com/microsoft/fluentui/pull/36191) by 863023+radium-v@users.noreply.github.com)
18
+ - fix: enhance accessibility attributes for dialog component ([PR #36191](https://github.com/microsoft/fluentui/pull/36191) by 863023+radium-v@users.noreply.github.com)
19
+
20
+ ## [3.0.0-rc.18](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.18)
21
+
22
+ Mon, 11 May 2026 04:09:08 GMT
23
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.17..@fluentui/web-components_v3.0.0-rc.18)
24
+
25
+ ### Changes
26
+
27
+ - fix: migrate to esbuild for CDN bundle, enable setTheme on globalThis ([PR #36113](https://github.com/microsoft/fluentui/pull/36113) by 13071055+chrisdholt@users.noreply.github.com)
28
+
7
29
  ## [3.0.0-rc.17](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.17)
8
30
 
9
- Wed, 06 May 2026 19:08:27 GMT
31
+ Wed, 06 May 2026 19:08:42 GMT
10
32
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.16..@fluentui/web-components_v3.0.0-rc.17)
11
33
 
12
34
  ### Changes
@@ -13402,11 +13402,6 @@
13402
13402
  "privacy": "public",
13403
13403
  "description": "The dialog element"
13404
13404
  },
13405
- {
13406
- "kind": "method",
13407
- "name": "dialogChanged",
13408
- "privacy": "protected"
13409
- },
13410
13405
  {
13411
13406
  "kind": "field",
13412
13407
  "name": "ariaDescribedby",
@@ -13448,32 +13443,13 @@
13448
13443
  },
13449
13444
  {
13450
13445
  "kind": "method",
13451
- "name": "typeChanged",
13452
- "privacy": "protected",
13446
+ "name": "emitBeforeToggle",
13447
+ "privacy": "public",
13453
13448
  "return": {
13454
13449
  "type": {
13455
13450
  "text": "void"
13456
13451
  }
13457
13452
  },
13458
- "parameters": [
13459
- {
13460
- "name": "prev",
13461
- "type": {
13462
- "text": "DialogType | undefined"
13463
- }
13464
- },
13465
- {
13466
- "name": "next",
13467
- "type": {
13468
- "text": "DialogType"
13469
- }
13470
- }
13471
- ]
13472
- },
13473
- {
13474
- "kind": "field",
13475
- "name": "emitBeforeToggle",
13476
- "privacy": "public",
13477
13453
  "description": "Method to emit an event before the dialog's open state changes\nHTML spec proposal: https://github.com/whatwg/html/issues/9733"
13478
13454
  },
13479
13455
  {
@@ -13894,14 +13870,6 @@
13894
13870
  }
13895
13871
  ],
13896
13872
  "members": [
13897
- {
13898
- "kind": "field",
13899
- "name": "roleAttrObserver",
13900
- "type": {
13901
- "text": "MutationObserver"
13902
- },
13903
- "privacy": "protected"
13904
- },
13905
13873
  {
13906
13874
  "kind": "field",
13907
13875
  "name": "type",
@@ -13914,11 +13882,6 @@
13914
13882
  "text": "'inline' | 'modal' | 'non-modal'"
13915
13883
  }
13916
13884
  },
13917
- {
13918
- "kind": "method",
13919
- "name": "typeChanged",
13920
- "privacy": "protected"
13921
- },
13922
13885
  {
13923
13886
  "kind": "field",
13924
13887
  "name": "ariaLabelledby",
@@ -13949,6 +13912,14 @@
13949
13912
  "text": "'start' | 'end'"
13950
13913
  }
13951
13914
  },
13915
+ {
13916
+ "kind": "field",
13917
+ "name": "role",
13918
+ "type": {
13919
+ "text": "string | null"
13920
+ },
13921
+ "privacy": "public"
13922
+ },
13952
13923
  {
13953
13924
  "kind": "field",
13954
13925
  "name": "size",
@@ -14027,16 +13998,6 @@
14027
13998
  "name": "cancelHandler",
14028
13999
  "privacy": "public",
14029
14000
  "description": "Handles cancel events on the drawer."
14030
- },
14031
- {
14032
- "kind": "method",
14033
- "name": "observeRoleAttr",
14034
- "privacy": "protected"
14035
- },
14036
- {
14037
- "kind": "method",
14038
- "name": "updateDialogRole",
14039
- "privacy": "protected"
14040
14001
  }
14041
14002
  ],
14042
14003
  "events": [
@@ -27952,6 +27913,12 @@
27952
27913
  }
27953
27914
  ]
27954
27915
  },
27916
+ {
27917
+ "kind": "javascript-module",
27918
+ "path": "src/define-all.ts",
27919
+ "declarations": [],
27920
+ "exports": []
27921
+ },
27955
27922
  {
27956
27923
  "kind": "javascript-module",
27957
27924
  "path": "src/theme/set-theme.ts",
@@ -27993,19 +27960,25 @@
27993
27960
  },
27994
27961
  {
27995
27962
  "kind": "javascript-module",
27996
- "path": "src/index-rollup.ts",
27963
+ "path": "src/index-all-rollup.ts",
27997
27964
  "declarations": [],
27998
27965
  "exports": [
27999
27966
  {
28000
27967
  "kind": "js",
28001
- "name": "setTheme",
27968
+ "name": "*",
28002
27969
  "declaration": {
28003
- "name": "setTheme",
28004
- "module": "./theme/set-theme.js"
27970
+ "name": "*",
27971
+ "module": "src/index.js"
28005
27972
  }
28006
27973
  }
28007
27974
  ]
28008
27975
  },
27976
+ {
27977
+ "kind": "javascript-module",
27978
+ "path": "src/index-rollup.ts",
27979
+ "declarations": [],
27980
+ "exports": []
27981
+ },
28009
27982
  {
28010
27983
  "kind": "javascript-module",
28011
27984
  "path": "src/patterns/aria-globals.ts",
@@ -2,12 +2,14 @@ import { type ElementViewTemplate } from '@microsoft/fast-element';
2
2
  import type { CompoundButton } from './compound-button.js';
3
3
  import type { CompoundButtonOptions } from './compound-button.options.js';
4
4
  /**
5
- * The template for the Compound Button component.
5
+ * Generates a template for the Button component.
6
+ *
6
7
  * @public
7
8
  */
8
9
  export declare function buttonTemplate<T extends CompoundButton>(options?: CompoundButtonOptions): ElementViewTemplate<T>;
9
10
  /**
10
11
  * The template for the Button component.
12
+ *
11
13
  * @public
12
14
  */
13
15
  export declare const template: ElementViewTemplate<CompoundButton>;
@@ -1,12 +1,16 @@
1
1
  import { html, slotted } from '@microsoft/fast-element';
2
2
  import { endSlotTemplate, startSlotTemplate } from '../patterns/start-end.js';
3
3
  /**
4
- * The template for the Compound Button component.
4
+ * Generates a template for the Button component.
5
+ *
5
6
  * @public
6
7
  */
7
8
  export function buttonTemplate(options = {}) {
8
9
  return html `
9
- <template ?disabled="${x => x.disabled}" tabindex="${x => (x.disabled ? null : x.tabIndex ?? 0)}">
10
+ <template
11
+ @click="${(x, c) => x.clickHandler(c.event)}"
12
+ @keypress="${(x, c) => x.keypressHandler(c.event)}"
13
+ >
10
14
  ${startSlotTemplate(options)}
11
15
  <span class="content" part="content">
12
16
  <slot ${slotted('defaultSlottedContent')}></slot>
@@ -18,6 +22,7 @@ export function buttonTemplate(options = {}) {
18
22
  }
19
23
  /**
20
24
  * The template for the Button component.
25
+ *
21
26
  * @public
22
27
  */
23
28
  export const template = buttonTemplate();
@@ -1 +1 @@
1
- {"version":3,"file":"compound-button.template.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAI9E;;;GAGG;AACH,MAAM,UAAU,cAAc,CAA2B,UAAiC,EAAE;IAC1F,OAAO,IAAI,CAAG;2BACW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC;QAC3F,iBAAiB,CAAC,OAAO,CAAC;;gBAElB,OAAO,CAAC,uBAAuB,CAAC;;;QAGxC,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwC,cAAc,EAAE,CAAC"}
1
+ {"version":3,"file":"compound-button.template.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAI9E;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAA2B,UAAiC,EAAE;IAC1F,OAAO,IAAI,CAAG;;gBAEA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;mBAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;;QAEhE,iBAAiB,CAAC,OAAO,CAAC;;gBAElB,OAAO,CAAC,uBAAuB,CAAC;;;QAGxC,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwC,cAAc,EAAE,CAAC"}
@@ -0,0 +1,42 @@
1
+ import './accordion-item/define.js';
2
+ import './accordion/define.js';
3
+ import './anchor-button/define.js';
4
+ import './avatar/define.js';
5
+ import './badge/define.js';
6
+ import './button/define.js';
7
+ import './checkbox/define.js';
8
+ import './compound-button/define.js';
9
+ import './counter-badge/define.js';
10
+ import './dialog/define.js';
11
+ import './dialog-body/define.js';
12
+ import './divider/define.js';
13
+ import './drawer/define.js';
14
+ import './drawer-body/define.js';
15
+ import './dropdown/define.js';
16
+ import './field/define.js';
17
+ import './image/define.js';
18
+ import './label/define.js';
19
+ import './link/define.js';
20
+ import './listbox/define.js';
21
+ import './menu-button/define.js';
22
+ import './menu-item/define.js';
23
+ import './menu-list/define.js';
24
+ import './menu/define.js';
25
+ import './message-bar/define.js';
26
+ import './option/define.js';
27
+ import './progress-bar/define.js';
28
+ import './radio-group/define.js';
29
+ import './radio/define.js';
30
+ import './rating-display/define.js';
31
+ import './slider/define.js';
32
+ import './spinner/define.js';
33
+ import './switch/define.js';
34
+ import './tab/define.js';
35
+ import './tablist/define.js';
36
+ import './textarea/define.js';
37
+ import './text-input/define.js';
38
+ import './text/define.js';
39
+ import './toggle-button/define.js';
40
+ import './tooltip/define.js';
41
+ import './tree/define.js';
42
+ import './tree-item/define.js';
@@ -0,0 +1,43 @@
1
+ import './accordion-item/define.js';
2
+ import './accordion/define.js';
3
+ import './anchor-button/define.js';
4
+ import './avatar/define.js';
5
+ import './badge/define.js';
6
+ import './button/define.js';
7
+ import './checkbox/define.js';
8
+ import './compound-button/define.js';
9
+ import './counter-badge/define.js';
10
+ import './dialog/define.js';
11
+ import './dialog-body/define.js';
12
+ import './divider/define.js';
13
+ import './drawer/define.js';
14
+ import './drawer-body/define.js';
15
+ import './dropdown/define.js';
16
+ import './field/define.js';
17
+ import './image/define.js';
18
+ import './label/define.js';
19
+ import './link/define.js';
20
+ import './listbox/define.js';
21
+ import './menu-button/define.js';
22
+ import './menu-item/define.js';
23
+ import './menu-list/define.js';
24
+ import './menu/define.js';
25
+ import './message-bar/define.js';
26
+ import './option/define.js';
27
+ import './progress-bar/define.js';
28
+ import './radio-group/define.js';
29
+ import './radio/define.js';
30
+ import './rating-display/define.js';
31
+ import './slider/define.js';
32
+ import './spinner/define.js';
33
+ import './switch/define.js';
34
+ import './tab/define.js';
35
+ import './tablist/define.js';
36
+ import './textarea/define.js';
37
+ import './text-input/define.js';
38
+ import './text/define.js';
39
+ import './toggle-button/define.js';
40
+ import './tooltip/define.js';
41
+ import './tree/define.js';
42
+ import './tree-item/define.js';
43
+ //# sourceMappingURL=define-all.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"define-all.js","sourceRoot":"","sources":["../../src/define-all.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AACjC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,uBAAuB,CAAC"}
@@ -14,7 +14,6 @@ export declare class Dialog extends FASTElement {
14
14
  * @public
15
15
  */
16
16
  dialog: HTMLDialogElement;
17
- protected dialogChanged(): void;
18
17
  /**
19
18
  * The ID of the element that describes the dialog
20
19
  *
@@ -39,14 +38,49 @@ export declare class Dialog extends FASTElement {
39
38
  * @public
40
39
  */
41
40
  type: DialogType;
42
- protected typeChanged(prev: DialogType | undefined, next: DialogType): void;
41
+ /**
42
+ * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
43
+ * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
44
+ *
45
+ * @internal
46
+ */
47
+ get dialogDescribedby(): string | undefined;
48
+ /**
49
+ * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
50
+ * ensure that the dialog's accessible name is properly announced by assistive technologies.
51
+ *
52
+ * @internal
53
+ */
54
+ get dialogLabel(): string | null | undefined;
55
+ /**
56
+ * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
57
+ * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
58
+ *
59
+ * @internal
60
+ */
61
+ get dialogLabelledby(): string | undefined;
62
+ /**
63
+ * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
64
+ * the modal state will be true, otherwise it will be undefined.
65
+ *
66
+ * @internal
67
+ */
68
+ get dialogModal(): boolean | undefined;
69
+ /**
70
+ * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
71
+ * be 'alertdialog', otherwise it will be undefined.
72
+ *
73
+ * @internal
74
+ */
75
+ get dialogRole(): string | undefined;
76
+ connectedCallback(): void;
43
77
  /**
44
78
  * Method to emit an event before the dialog's open state changes
45
79
  * HTML spec proposal: https://github.com/whatwg/html/issues/9733
46
80
  *
47
81
  * @public
48
82
  */
49
- emitBeforeToggle: () => void;
83
+ emitBeforeToggle(): void;
50
84
  /**
51
85
  * Method to emit an event after the dialog's open state changes
52
86
  * HTML spec proposal: https://github.com/whatwg/html/issues/9733
@@ -74,10 +108,4 @@ export declare class Dialog extends FASTElement {
74
108
  * @returns boolean
75
109
  */
76
110
  clickHandler(event: Event): boolean;
77
- /**
78
- * Updates the internal dialog element's attributes based on its type.
79
- *
80
- * @internal
81
- */
82
- protected updateDialogAttributes(): void;
83
111
  }
@@ -1,5 +1,5 @@
1
1
  import { __decorate } from "tslib";
2
- import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
2
+ import { attr, FASTElement, observable, Updates, volatile } from '@microsoft/fast-element';
3
3
  import { DialogType } from './dialog.options.js';
4
4
  /**
5
5
  * A Dialog Custom HTML Element.
@@ -11,24 +11,6 @@ import { DialogType } from './dialog.options.js';
11
11
  export class Dialog extends FASTElement {
12
12
  constructor() {
13
13
  super(...arguments);
14
- /**
15
- * The type of the dialog modal
16
- *
17
- * @public
18
- */
19
- this.type = DialogType.modal;
20
- /**
21
- * Method to emit an event before the dialog's open state changes
22
- * HTML spec proposal: https://github.com/whatwg/html/issues/9733
23
- *
24
- * @public
25
- */
26
- this.emitBeforeToggle = () => {
27
- this.$emit('beforetoggle', {
28
- oldState: this.dialog.open ? 'open' : 'closed',
29
- newState: this.dialog.open ? 'closed' : 'open',
30
- });
31
- };
32
14
  /**
33
15
  * Method to emit an event after the dialog's open state changes
34
16
  * HTML spec proposal: https://github.com/whatwg/html/issues/9733
@@ -42,11 +24,78 @@ export class Dialog extends FASTElement {
42
24
  });
43
25
  };
44
26
  }
45
- dialogChanged() {
46
- this.updateDialogAttributes();
27
+ /**
28
+ * The `aria-describedby` attribute value for the dialog, which is determined by the `ariaDescribedby` property. This
29
+ * is used to ensure that the dialog's accessible description is properly announced by assistive technologies.
30
+ *
31
+ * @internal
32
+ */
33
+ get dialogDescribedby() {
34
+ if (this.dialog) {
35
+ return this.ariaDescribedby;
36
+ }
37
+ }
38
+ /**
39
+ * The `aria-label` attribute value for the dialog, which is determined by the `ariaLabel` property. This is used to
40
+ * ensure that the dialog's accessible name is properly announced by assistive technologies.
41
+ *
42
+ * @internal
43
+ */
44
+ get dialogLabel() {
45
+ if (this.dialog) {
46
+ return this.ariaLabel;
47
+ }
47
48
  }
48
- typeChanged(prev, next) {
49
- this.updateDialogAttributes();
49
+ /**
50
+ * The `aria-labelledby` attribute value for the dialog, which is determined by the `ariaLabelledby` property. This is
51
+ * used to ensure that the dialog's accessible name is properly announced by assistive technologies.
52
+ *
53
+ * @internal
54
+ */
55
+ get dialogLabelledby() {
56
+ if (this.dialog) {
57
+ return this.ariaLabelledby;
58
+ }
59
+ }
60
+ /**
61
+ * The modal state of the dialog, which is determined by the `type` property. If the dialog is not a non-modal dialog,
62
+ * the modal state will be true, otherwise it will be undefined.
63
+ *
64
+ * @internal
65
+ */
66
+ get dialogModal() {
67
+ if (this.dialog && this.type !== DialogType.nonModal) {
68
+ return true;
69
+ }
70
+ }
71
+ /**
72
+ * The role of the dialog, which is determined by the `type` property. If the dialog is an alert dialog, the role will
73
+ * be 'alertdialog', otherwise it will be undefined.
74
+ *
75
+ * @internal
76
+ */
77
+ get dialogRole() {
78
+ if (this.dialog && this.type === DialogType.alert) {
79
+ return 'alertdialog';
80
+ }
81
+ }
82
+ connectedCallback() {
83
+ super.connectedCallback();
84
+ Updates.enqueue(() => {
85
+ this.type = this.type ?? DialogType.modal;
86
+ });
87
+ }
88
+ /**
89
+ * Method to emit an event before the dialog's open state changes
90
+ * HTML spec proposal: https://github.com/whatwg/html/issues/9733
91
+ *
92
+ * @public
93
+ */
94
+ emitBeforeToggle() {
95
+ this.$emit('beforetoggle', {
96
+ oldState: this.dialog.open ? 'open' : 'closed',
97
+ newState: this.dialog.open ? 'closed' : 'open',
98
+ });
50
99
  }
51
100
  /**
52
101
  * Method to show the dialog
@@ -88,28 +137,6 @@ export class Dialog extends FASTElement {
88
137
  }
89
138
  return true;
90
139
  }
91
- /**
92
- * Updates the internal dialog element's attributes based on its type.
93
- *
94
- * @internal
95
- */
96
- updateDialogAttributes() {
97
- if (!this.dialog) {
98
- return;
99
- }
100
- if (this.type === DialogType.alert) {
101
- this.dialog.setAttribute('role', 'alertdialog');
102
- }
103
- else {
104
- this.dialog.removeAttribute('role');
105
- }
106
- if (this.type !== DialogType.nonModal) {
107
- this.dialog.setAttribute('aria-modal', 'true');
108
- }
109
- else {
110
- this.dialog.removeAttribute('aria-modal');
111
- }
112
- }
113
140
  }
114
141
  __decorate([
115
142
  observable
@@ -126,4 +153,19 @@ __decorate([
126
153
  __decorate([
127
154
  attr
128
155
  ], Dialog.prototype, "type", void 0);
156
+ __decorate([
157
+ volatile
158
+ ], Dialog.prototype, "dialogDescribedby", null);
159
+ __decorate([
160
+ volatile
161
+ ], Dialog.prototype, "dialogLabel", null);
162
+ __decorate([
163
+ volatile
164
+ ], Dialog.prototype, "dialogLabelledby", null);
165
+ __decorate([
166
+ volatile
167
+ ], Dialog.prototype, "dialogModal", null);
168
+ __decorate([
169
+ volatile
170
+ ], Dialog.prototype, "dialogRole", null);
129
171
  //# sourceMappingURL=dialog.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"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"}
@@ -7,9 +7,11 @@ export const template = html `
7
7
  <dialog
8
8
  class="dialog"
9
9
  part="dialog"
10
- aria-describedby="${x => x.ariaDescribedby}"
11
- aria-labelledby="${x => x.ariaLabelledby}"
12
- aria-label="${x => x.ariaLabel}"
10
+ aria-modal="${x => x.dialogModal}"
11
+ aria-describedby="${x => x.dialogDescribedby}"
12
+ aria-labelledby="${x => x.dialogLabelledby}"
13
+ aria-label="${x => x.dialogLabel}"
14
+ role="${x => x.dialogRole}"
13
15
  @click="${(x, c) => x.clickHandler(c.event)}"
14
16
  @cancel="${x => x.hide()}"
15
17
  ${ref('dialog')}
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;wBAIjC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;uBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;kBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;cACpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;CAIlB,CAAC"}
1
+ {"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;kBAIvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;wBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;uBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;kBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;YACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;CAIlB,CAAC"}