@fluentui/web-components 3.0.0-rc.25 → 3.0.0-rc.27

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 (207) hide show
  1. package/CHANGELOG.md +21 -2
  2. package/README.md +26 -0
  3. package/custom-elements.json +723 -356
  4. package/dist/esm/accordion/accordion.d.ts +1 -1
  5. package/dist/esm/accordion/accordion.js +1 -1
  6. package/dist/esm/accordion/accordion.styles.css +11 -7
  7. package/dist/esm/accordion/accordion.template.html +4 -3
  8. package/dist/esm/accordion-item/accordion-item.d.ts +2 -2
  9. package/dist/esm/accordion-item/accordion-item.js +2 -0
  10. package/dist/esm/accordion-item/accordion-item.js.map +1 -1
  11. package/dist/esm/accordion-item/accordion-item.styles.css +174 -170
  12. package/dist/esm/accordion-item/accordion-item.template.html +38 -31
  13. package/dist/esm/anchor-button/anchor-button.d.ts +2 -2
  14. package/dist/esm/anchor-button/anchor-button.js +2 -0
  15. package/dist/esm/anchor-button/anchor-button.js.map +1 -1
  16. package/dist/esm/anchor-button/anchor-button.styles.css +224 -223
  17. package/dist/esm/anchor-button/anchor-button.template.html +8 -11
  18. package/dist/esm/avatar/avatar.d.ts +2 -0
  19. package/dist/esm/avatar/avatar.js +3 -1
  20. package/dist/esm/avatar/avatar.js.map +1 -1
  21. package/dist/esm/avatar/avatar.styles.css +475 -470
  22. package/dist/esm/avatar/avatar.template.html +10 -14
  23. package/dist/esm/badge/badge.d.ts +6 -1
  24. package/dist/esm/badge/badge.js +6 -1
  25. package/dist/esm/badge/badge.js.map +1 -1
  26. package/dist/esm/badge/badge.styles.css +264 -266
  27. package/dist/esm/badge/badge.template.html +5 -2
  28. package/dist/esm/button/button.base.d.ts +0 -9
  29. package/dist/esm/button/button.base.js +2 -3
  30. package/dist/esm/button/button.base.js.map +1 -1
  31. package/dist/esm/button/button.styles.css +260 -259
  32. package/dist/esm/button/button.template.html +8 -10
  33. package/dist/esm/checkbox/checkbox.base.d.ts +3 -9
  34. package/dist/esm/checkbox/checkbox.base.js +5 -3
  35. package/dist/esm/checkbox/checkbox.base.js.map +1 -1
  36. package/dist/esm/checkbox/checkbox.d.ts +2 -2
  37. package/dist/esm/checkbox/checkbox.js +2 -2
  38. package/dist/esm/checkbox/checkbox.styles.css +146 -142
  39. package/dist/esm/checkbox/checkbox.template.html +21 -16
  40. package/dist/esm/compound-button/compound-button.d.ts +3 -0
  41. package/dist/esm/compound-button/compound-button.js +3 -0
  42. package/dist/esm/compound-button/compound-button.js.map +1 -1
  43. package/dist/esm/compound-button/compound-button.styles.css +363 -365
  44. package/dist/esm/compound-button/compound-button.template.html +9 -11
  45. package/dist/esm/counter-badge/counter-badge.d.ts +3 -0
  46. package/dist/esm/counter-badge/counter-badge.js +3 -0
  47. package/dist/esm/counter-badge/counter-badge.js.map +1 -1
  48. package/dist/esm/counter-badge/counter-badge.styles.css +177 -177
  49. package/dist/esm/counter-badge/counter-badge.template.html +5 -2
  50. package/dist/esm/dialog/dialog.d.ts +4 -0
  51. package/dist/esm/dialog/dialog.js +4 -0
  52. package/dist/esm/dialog/dialog.js.map +1 -1
  53. package/dist/esm/dialog/dialog.styles.css +65 -66
  54. package/dist/esm/dialog/dialog.template.html +18 -15
  55. package/dist/esm/dialog-body/dialog-body.d.ts +9 -0
  56. package/dist/esm/dialog-body/dialog-body.js +9 -0
  57. package/dist/esm/dialog-body/dialog-body.js.map +1 -1
  58. package/dist/esm/dialog-body/dialog-body.styles.css +81 -76
  59. package/dist/esm/dialog-body/dialog-body.styles.js +1 -0
  60. package/dist/esm/dialog-body/dialog-body.styles.js.map +1 -1
  61. package/dist/esm/dialog-body/dialog-body.template.html +2 -1
  62. package/dist/esm/divider/divider.styles.css +105 -101
  63. package/dist/esm/divider/divider.template.html +6 -1
  64. package/dist/esm/drawer/drawer.d.ts +3 -4
  65. package/dist/esm/drawer/drawer.js +3 -4
  66. package/dist/esm/drawer/drawer.js.map +1 -1
  67. package/dist/esm/drawer/drawer.styles.css +124 -120
  68. package/dist/esm/drawer/drawer.styles.js +16 -17
  69. package/dist/esm/drawer/drawer.styles.js.map +1 -1
  70. package/dist/esm/drawer/drawer.template.html +5 -2
  71. package/dist/esm/drawer-body/drawer-body.styles.css +29 -26
  72. package/dist/esm/drawer-body/drawer-body.template.html +5 -2
  73. package/dist/esm/dropdown/dropdown.base.d.ts +3 -1
  74. package/dist/esm/dropdown/dropdown.base.js +5 -1
  75. package/dist/esm/dropdown/dropdown.base.js.map +1 -1
  76. package/dist/esm/dropdown/dropdown.styles.css +192 -190
  77. package/dist/esm/dropdown/dropdown.styles.js +1 -0
  78. package/dist/esm/dropdown/dropdown.styles.js.map +1 -1
  79. package/dist/esm/dropdown/dropdown.template.html +26 -19
  80. package/dist/esm/field/field.d.ts +7 -0
  81. package/dist/esm/field/field.js +7 -0
  82. package/dist/esm/field/field.js.map +1 -1
  83. package/dist/esm/field/field.styles.css +125 -121
  84. package/dist/esm/field/field.template.html +3 -2
  85. package/dist/esm/image/image.d.ts +2 -0
  86. package/dist/esm/image/image.js +2 -0
  87. package/dist/esm/image/image.js.map +1 -1
  88. package/dist/esm/image/image.styles.css +49 -50
  89. package/dist/esm/image/image.template.html +6 -1
  90. package/dist/esm/label/label.d.ts +3 -0
  91. package/dist/esm/label/label.js +3 -0
  92. package/dist/esm/label/label.js.map +1 -1
  93. package/dist/esm/label/label.styles.css +34 -30
  94. package/dist/esm/label/label.template.html +5 -2
  95. package/dist/esm/link/link.styles.css +58 -54
  96. package/dist/esm/link/link.template.html +4 -7
  97. package/dist/esm/listbox/listbox.styles.css +40 -36
  98. package/dist/esm/listbox/listbox.template.html +4 -6
  99. package/dist/esm/menu/menu.styles.css +56 -52
  100. package/dist/esm/menu/menu.template.html +6 -5
  101. package/dist/esm/menu-button/menu-button.styles.css +260 -259
  102. package/dist/esm/menu-button/menu-button.template.html +23 -14
  103. package/dist/esm/menu-item/menu-item.d.ts +1 -1
  104. package/dist/esm/menu-item/menu-item.js +3 -1
  105. package/dist/esm/menu-item/menu-item.js.map +1 -1
  106. package/dist/esm/menu-item/menu-item.styles.css +141 -137
  107. package/dist/esm/menu-item/menu-item.template.html +48 -17
  108. package/dist/esm/menu-list/menu-list.styles.css +19 -15
  109. package/dist/esm/menu-list/menu-list.template.html +4 -3
  110. package/dist/esm/message-bar/message-bar.d.ts +2 -0
  111. package/dist/esm/message-bar/message-bar.js +2 -0
  112. package/dist/esm/message-bar/message-bar.js.map +1 -1
  113. package/dist/esm/message-bar/message-bar.styles.css +83 -84
  114. package/dist/esm/message-bar/message-bar.template.html +7 -2
  115. package/dist/esm/option/option.d.ts +3 -0
  116. package/dist/esm/option/option.js +3 -0
  117. package/dist/esm/option/option.js.map +1 -1
  118. package/dist/esm/option/option.styles.css +117 -114
  119. package/dist/esm/option/option.template.html +17 -14
  120. package/dist/esm/progress-bar/progress-bar.base.d.ts +3 -3
  121. package/dist/esm/progress-bar/progress-bar.d.ts +1 -0
  122. package/dist/esm/progress-bar/progress-bar.js +1 -0
  123. package/dist/esm/progress-bar/progress-bar.js.map +1 -1
  124. package/dist/esm/progress-bar/progress-bar.styles.css +83 -79
  125. package/dist/esm/progress-bar/progress-bar.template.html +4 -1
  126. package/dist/esm/radio/radio.d.ts +3 -2
  127. package/dist/esm/radio/radio.js +3 -2
  128. package/dist/esm/radio/radio.js.map +1 -1
  129. package/dist/esm/radio/radio.styles.css +100 -96
  130. package/dist/esm/radio/radio.template.html +6 -9
  131. package/dist/esm/radio-group/radio-group.base.d.ts +2 -0
  132. package/dist/esm/radio-group/radio-group.base.js +2 -0
  133. package/dist/esm/radio-group/radio-group.base.js.map +1 -1
  134. package/dist/esm/radio-group/radio-group.d.ts +1 -0
  135. package/dist/esm/radio-group/radio-group.js +1 -0
  136. package/dist/esm/radio-group/radio-group.js.map +1 -1
  137. package/dist/esm/radio-group/radio-group.styles.css +45 -41
  138. package/dist/esm/radio-group/radio-group.template.html +11 -10
  139. package/dist/esm/rating-display/rating-display.styles.css +136 -134
  140. package/dist/esm/rating-display/rating-display.template.html +5 -2
  141. package/dist/esm/slider/slider.d.ts +1 -1
  142. package/dist/esm/slider/slider.js +3 -1
  143. package/dist/esm/slider/slider.js.map +1 -1
  144. package/dist/esm/slider/slider.styles.css +186 -182
  145. package/dist/esm/slider/slider.template.html +13 -15
  146. package/dist/esm/spinner/spinner.styles.css +155 -151
  147. package/dist/esm/spinner/spinner.template.html +16 -11
  148. package/dist/esm/switch/switch.d.ts +1 -0
  149. package/dist/esm/switch/switch.js +1 -0
  150. package/dist/esm/switch/switch.js.map +1 -1
  151. package/dist/esm/switch/switch.styles.css +112 -108
  152. package/dist/esm/switch/switch.template.html +9 -8
  153. package/dist/esm/tab/tab.js +2 -0
  154. package/dist/esm/tab/tab.js.map +1 -1
  155. package/dist/esm/tab/tab.styles.css +112 -108
  156. package/dist/esm/tab/tab.template.html +6 -5
  157. package/dist/esm/tablist/tablist.d.ts +1 -0
  158. package/dist/esm/tablist/tablist.js +1 -0
  159. package/dist/esm/tablist/tablist.js.map +1 -1
  160. package/dist/esm/tablist/tablist.styles.css +194 -190
  161. package/dist/esm/tablist/tablist.template.html +2 -5
  162. package/dist/esm/text/text.d.ts +2 -0
  163. package/dist/esm/text/text.js +2 -0
  164. package/dist/esm/text/text.js.map +1 -1
  165. package/dist/esm/text/text.styles.css +105 -101
  166. package/dist/esm/text/text.template.html +6 -1
  167. package/dist/esm/text-input/text-input.base.d.ts +4 -16
  168. package/dist/esm/text-input/text-input.base.js +7 -17
  169. package/dist/esm/text-input/text-input.base.js.map +1 -1
  170. package/dist/esm/text-input/text-input.d.ts +2 -0
  171. package/dist/esm/text-input/text-input.js +2 -0
  172. package/dist/esm/text-input/text-input.js.map +1 -1
  173. package/dist/esm/text-input/text-input.styles.css +199 -195
  174. package/dist/esm/text-input/text-input.template.html +34 -36
  175. package/dist/esm/text-input/text-input.template.js +1 -5
  176. package/dist/esm/text-input/text-input.template.js.map +1 -1
  177. package/dist/esm/textarea/textarea.base.d.ts +2 -2
  178. package/dist/esm/textarea/textarea.base.js +4 -2
  179. package/dist/esm/textarea/textarea.base.js.map +1 -1
  180. package/dist/esm/textarea/textarea.styles.css +254 -250
  181. package/dist/esm/textarea/textarea.template.html +28 -27
  182. package/dist/esm/toggle-button/toggle-button.styles.css +360 -357
  183. package/dist/esm/toggle-button/toggle-button.template.html +8 -10
  184. package/dist/esm/tooltip/tooltip.d.ts +2 -0
  185. package/dist/esm/tooltip/tooltip.js +2 -0
  186. package/dist/esm/tooltip/tooltip.js.map +1 -1
  187. package/dist/esm/tooltip/tooltip.styles.css +81 -77
  188. package/dist/esm/tooltip/tooltip.template.html +6 -1
  189. package/dist/esm/tree/tree.styles.css +9 -5
  190. package/dist/esm/tree/tree.template.html +3 -2
  191. package/dist/esm/tree-item/tree-item.base.d.ts +9 -0
  192. package/dist/esm/tree-item/tree-item.base.js +11 -0
  193. package/dist/esm/tree-item/tree-item.base.js.map +1 -1
  194. package/dist/esm/tree-item/tree-item.d.ts +15 -0
  195. package/dist/esm/tree-item/tree-item.js +15 -0
  196. package/dist/esm/tree-item/tree-item.js.map +1 -1
  197. package/dist/esm/tree-item/tree-item.styles.css +157 -153
  198. package/dist/esm/tree-item/tree-item.template.html +8 -7
  199. package/dist/esm/utils/autofocus.d.ts +12 -0
  200. package/dist/esm/utils/autofocus.js +25 -0
  201. package/dist/esm/utils/autofocus.js.map +1 -0
  202. package/dist/web-components-all.js +24 -27
  203. package/dist/web-components-all.min.js +15 -15
  204. package/dist/web-components.d.ts +110 -54
  205. package/dist/web-components.js +24 -27
  206. package/dist/web-components.min.js +15 -15
  207. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,12 +1,31 @@
1
1
  # Change Log - @fluentui/web-components
2
2
 
3
- This log was last generated on Wed, 10 Jun 2026 04:08:37 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 12 Jun 2026 04:07:31 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [3.0.0-rc.27](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.27)
8
+
9
+ Fri, 12 Jun 2026 04:07:31 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.26..@fluentui/web-components_v3.0.0-rc.27)
11
+
12
+ ### Changes
13
+
14
+ - feat(web-components): generate SSR templates and stylesheets into src/ and copy into dist during compile ([PR #36259](https://github.com/microsoft/fluentui/pull/36259) by 863023+radium-v@users.noreply.github.com)
15
+ - fix: make sure autofocus works on all focusable custom elements during initial page load ([PR #36296](https://github.com/microsoft/fluentui/pull/36296) by machi@microsoft.com)
16
+
17
+ ## [3.0.0-rc.26](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.26)
18
+
19
+ Thu, 11 Jun 2026 04:07:32 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.25..@fluentui/web-components_v3.0.0-rc.26)
21
+
22
+ ### Changes
23
+
24
+ - docs: update storybook and CEM docs" ([PR #36271](https://github.com/microsoft/fluentui/pull/36271) by rupertdavid@microsoft.com)
25
+
7
26
  ## [3.0.0-rc.25](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.25)
8
27
 
9
- Wed, 10 Jun 2026 04:08:37 GMT
28
+ Wed, 10 Jun 2026 04:08:48 GMT
10
29
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.24..@fluentui/web-components_v3.0.0-rc.25)
11
30
 
12
31
  ### Changes
package/README.md CHANGED
@@ -88,6 +88,32 @@ import CEM from '@fluentui/custom-elements.json' with { type: 'json' };
88
88
 
89
89
  To start the component development environment, run `yarn start`.
90
90
 
91
+ ### SSR templates and stylesheets
92
+
93
+ Each component ships a declarative-shadow-DOM template (`*.template.html`) and an extracted stylesheet (`*.styles.css`) next to its `*.template.ts` and `*.styles.ts` sources. These files are generated from the TypeScript sources and committed to the repo so the DSD output is visible without running a build.
94
+
95
+ After editing a `*.template.ts` or `*.styles.ts`, regenerate the matching HTML and CSS with:
96
+
97
+ ```sh
98
+ yarn generate:ssr
99
+ ```
100
+
101
+ To check that the committed files match what the generators would produce (for example, before opening a PR), run:
102
+
103
+ ```sh
104
+ yarn check:ssr
105
+ ```
106
+
107
+ `yarn compile` does not regenerate these files; it copies them from `src/` into `dist/esm/` alongside the compiled JS.
108
+
109
+ Use the `yarn check:ssr` summary to avoid clobbering intentional SSR-only edits:
110
+
111
+ - `stale`: the committed source and generated file are unchanged, but regeneration disagrees with disk. Rebase if needed, then run `yarn generate:ssr`, review the generated diff, and commit it with the related source or generator change.
112
+ - `hand-edited`: the generated HTML/CSS changed without a matching `*.template.ts` or `*.styles.ts` change. Do not overwrite it blindly; either move the intended delta into the TypeScript source or generator before regenerating, or reapply and call out the intentional SSR-only edit in the PR.
113
+ - `conflicts`: both the TypeScript source and generated file changed, and regeneration still disagrees with disk. Treat this like a merge conflict: inspect the current generated-file diff, regenerate, then preserve only the intentional SSR delta before committing.
114
+
115
+ Keep generated-file updates scoped to the component you changed. If `yarn check:ssr` reports unrelated stale files, leave them out of your PR and coordinate a dedicated cleanup.
116
+
91
117
  ### Known issue with Storybook site hot-reloading during development
92
118
 
93
119
  Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message: