@fluentui/web-components 3.0.0-rc.20 → 3.0.0-rc.22

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 (380) hide show
  1. package/CHANGELOG.md +22 -2
  2. package/custom-elements.json +1594 -260
  3. package/dist/esm/accordion/accordion.definition-async.d.ts +10 -0
  4. package/dist/esm/accordion/accordion.definition-async.js +14 -0
  5. package/dist/esm/accordion/accordion.definition-async.js.map +1 -0
  6. package/dist/esm/accordion/accordion.js +1 -1
  7. package/dist/esm/accordion/accordion.js.map +1 -1
  8. package/dist/esm/accordion/accordion.styles.css +8 -0
  9. package/dist/esm/accordion/accordion.template.html +5 -0
  10. package/dist/esm/accordion/define-async.d.ts +1 -0
  11. package/dist/esm/accordion/define-async.js +5 -0
  12. package/dist/esm/accordion/define-async.js.map +1 -0
  13. package/dist/esm/accordion-item/accordion-item.definition-async.d.ts +10 -0
  14. package/dist/esm/accordion-item/accordion-item.definition-async.js +14 -0
  15. package/dist/esm/accordion-item/accordion-item.definition-async.js.map +1 -0
  16. package/dist/esm/accordion-item/accordion-item.styles.css +170 -0
  17. package/dist/esm/accordion-item/accordion-item.template.html +47 -0
  18. package/dist/esm/accordion-item/define-async.d.ts +1 -0
  19. package/dist/esm/accordion-item/define-async.js +5 -0
  20. package/dist/esm/accordion-item/define-async.js.map +1 -0
  21. package/dist/esm/anchor-button/anchor-button.definition-async.d.ts +10 -0
  22. package/dist/esm/anchor-button/anchor-button.definition-async.js +14 -0
  23. package/dist/esm/anchor-button/anchor-button.definition-async.js.map +1 -0
  24. package/dist/esm/anchor-button/anchor-button.styles.css +225 -0
  25. package/dist/esm/anchor-button/anchor-button.template.html +13 -0
  26. package/dist/esm/anchor-button/define-async.d.ts +1 -0
  27. package/dist/esm/anchor-button/define-async.js +5 -0
  28. package/dist/esm/anchor-button/define-async.js.map +1 -0
  29. package/dist/esm/avatar/avatar.definition-async.d.ts +10 -0
  30. package/dist/esm/avatar/avatar.definition-async.js +14 -0
  31. package/dist/esm/avatar/avatar.definition-async.js.map +1 -0
  32. package/dist/esm/avatar/avatar.styles.css +475 -0
  33. package/dist/esm/avatar/avatar.template.html +17 -0
  34. package/dist/esm/avatar/define-async.d.ts +1 -0
  35. package/dist/esm/avatar/define-async.js +5 -0
  36. package/dist/esm/avatar/define-async.js.map +1 -0
  37. package/dist/esm/badge/badge.definition-async.d.ts +10 -0
  38. package/dist/esm/badge/badge.definition-async.js +14 -0
  39. package/dist/esm/badge/badge.definition-async.js.map +1 -0
  40. package/dist/esm/badge/badge.styles.css +268 -0
  41. package/dist/esm/badge/badge.template.html +5 -0
  42. package/dist/esm/badge/define-async.d.ts +1 -0
  43. package/dist/esm/badge/define-async.js +5 -0
  44. package/dist/esm/badge/define-async.js.map +1 -0
  45. package/dist/esm/button/button.definition-async.d.ts +10 -0
  46. package/dist/esm/button/button.definition-async.js +14 -0
  47. package/dist/esm/button/button.definition-async.js.map +1 -0
  48. package/dist/esm/button/button.styles.css +267 -0
  49. package/dist/esm/button/button.template.html +12 -0
  50. package/dist/esm/button/define-async.d.ts +1 -0
  51. package/dist/esm/button/define-async.js +5 -0
  52. package/dist/esm/button/define-async.js.map +1 -0
  53. package/dist/esm/checkbox/checkbox.base.js +9 -7
  54. package/dist/esm/checkbox/checkbox.base.js.map +1 -1
  55. package/dist/esm/checkbox/checkbox.definition-async.d.ts +10 -0
  56. package/dist/esm/checkbox/checkbox.definition-async.js +14 -0
  57. package/dist/esm/checkbox/checkbox.definition-async.js.map +1 -0
  58. package/dist/esm/checkbox/checkbox.styles.css +168 -0
  59. package/dist/esm/checkbox/checkbox.template.html +24 -0
  60. package/dist/esm/checkbox/define-async.d.ts +1 -0
  61. package/dist/esm/checkbox/define-async.js +5 -0
  62. package/dist/esm/checkbox/define-async.js.map +1 -0
  63. package/dist/esm/compound-button/compound-button.definition-async.d.ts +10 -0
  64. package/dist/esm/compound-button/compound-button.definition-async.js +14 -0
  65. package/dist/esm/compound-button/compound-button.definition-async.js.map +1 -0
  66. package/dist/esm/compound-button/compound-button.styles.css +372 -0
  67. package/dist/esm/compound-button/compound-button.template.html +13 -0
  68. package/dist/esm/compound-button/define-async.d.ts +1 -0
  69. package/dist/esm/compound-button/define-async.js +5 -0
  70. package/dist/esm/compound-button/define-async.js.map +1 -0
  71. package/dist/esm/counter-badge/counter-badge.definition-async.d.ts +10 -0
  72. package/dist/esm/counter-badge/counter-badge.definition-async.js +14 -0
  73. package/dist/esm/counter-badge/counter-badge.definition-async.js.map +1 -0
  74. package/dist/esm/counter-badge/counter-badge.styles.css +177 -0
  75. package/dist/esm/counter-badge/counter-badge.template.html +5 -0
  76. package/dist/esm/counter-badge/define-async.d.ts +1 -0
  77. package/dist/esm/counter-badge/define-async.js +5 -0
  78. package/dist/esm/counter-badge/define-async.js.map +1 -0
  79. package/dist/esm/dialog/define-async.d.ts +1 -0
  80. package/dist/esm/dialog/define-async.js +5 -0
  81. package/dist/esm/dialog/define-async.js.map +1 -0
  82. package/dist/esm/dialog/dialog.definition-async.d.ts +10 -0
  83. package/dist/esm/dialog/dialog.definition-async.js +14 -0
  84. package/dist/esm/dialog/dialog.definition-async.js.map +1 -0
  85. package/dist/esm/dialog/dialog.styles.css +86 -0
  86. package/dist/esm/dialog/dialog.template.html +16 -0
  87. package/dist/esm/dialog-body/define-async.d.ts +1 -0
  88. package/dist/esm/dialog-body/define-async.js +5 -0
  89. package/dist/esm/dialog-body/define-async.js.map +1 -0
  90. package/dist/esm/dialog-body/dialog-body.definition-async.d.ts +10 -0
  91. package/dist/esm/dialog-body/dialog-body.definition-async.js +14 -0
  92. package/dist/esm/dialog-body/dialog-body.definition-async.js.map +1 -0
  93. package/dist/esm/dialog-body/dialog-body.styles.css +87 -0
  94. package/dist/esm/dialog-body/dialog-body.template.html +11 -0
  95. package/dist/esm/divider/define-async.d.ts +1 -0
  96. package/dist/esm/divider/define-async.js +5 -0
  97. package/dist/esm/divider/define-async.js.map +1 -0
  98. package/dist/esm/divider/divider.definition-async.d.ts +10 -0
  99. package/dist/esm/divider/divider.definition-async.js +14 -0
  100. package/dist/esm/divider/divider.definition-async.js.map +1 -0
  101. package/dist/esm/divider/divider.styles.css +119 -0
  102. package/dist/esm/divider/divider.template.html +1 -0
  103. package/dist/esm/drawer/define-async.d.ts +1 -0
  104. package/dist/esm/drawer/define-async.js +5 -0
  105. package/dist/esm/drawer/define-async.js.map +1 -0
  106. package/dist/esm/drawer/drawer.definition-async.d.ts +10 -0
  107. package/dist/esm/drawer/drawer.definition-async.js +14 -0
  108. package/dist/esm/drawer/drawer.definition-async.js.map +1 -0
  109. package/dist/esm/drawer/drawer.styles.css +130 -0
  110. package/dist/esm/drawer/drawer.template.html +18 -0
  111. package/dist/esm/drawer-body/define-async.d.ts +1 -0
  112. package/dist/esm/drawer-body/define-async.js +5 -0
  113. package/dist/esm/drawer-body/define-async.js.map +1 -0
  114. package/dist/esm/drawer-body/drawer-body.definition-async.d.ts +10 -0
  115. package/dist/esm/drawer-body/drawer-body.definition-async.js +14 -0
  116. package/dist/esm/drawer-body/drawer-body.definition-async.js.map +1 -0
  117. package/dist/esm/drawer-body/drawer-body.styles.css +33 -0
  118. package/dist/esm/drawer-body/drawer-body.template.html +12 -0
  119. package/dist/esm/dropdown/define-async.d.ts +1 -0
  120. package/dist/esm/dropdown/define-async.js +5 -0
  121. package/dist/esm/dropdown/define-async.js.map +1 -0
  122. package/dist/esm/dropdown/dropdown.base.js +5 -4
  123. package/dist/esm/dropdown/dropdown.base.js.map +1 -1
  124. package/dist/esm/dropdown/dropdown.definition-async.d.ts +10 -0
  125. package/dist/esm/dropdown/dropdown.definition-async.js +14 -0
  126. package/dist/esm/dropdown/dropdown.definition-async.js.map +1 -0
  127. package/dist/esm/dropdown/dropdown.styles.css +221 -0
  128. package/dist/esm/dropdown/dropdown.template.html +21 -0
  129. package/dist/esm/field/define-async.d.ts +1 -0
  130. package/dist/esm/field/define-async.js +5 -0
  131. package/dist/esm/field/define-async.js.map +1 -0
  132. package/dist/esm/field/field.definition-async.d.ts +10 -0
  133. package/dist/esm/field/field.definition-async.js +17 -0
  134. package/dist/esm/field/field.definition-async.js.map +1 -0
  135. package/dist/esm/field/field.styles.css +121 -0
  136. package/dist/esm/field/field.template.html +12 -0
  137. package/dist/esm/image/define-async.d.ts +1 -0
  138. package/dist/esm/image/define-async.js +5 -0
  139. package/dist/esm/image/define-async.js.map +1 -0
  140. package/dist/esm/image/image.definition-async.d.ts +10 -0
  141. package/dist/esm/image/image.definition-async.js +14 -0
  142. package/dist/esm/image/image.definition-async.js.map +1 -0
  143. package/dist/esm/image/image.styles.css +51 -0
  144. package/dist/esm/image/image.template.html +1 -0
  145. package/dist/esm/label/define-async.d.ts +1 -0
  146. package/dist/esm/label/define-async.js +5 -0
  147. package/dist/esm/label/define-async.js.map +1 -0
  148. package/dist/esm/label/label.definition-async.d.ts +10 -0
  149. package/dist/esm/label/label.definition-async.js +14 -0
  150. package/dist/esm/label/label.definition-async.js.map +1 -0
  151. package/dist/esm/label/label.styles.css +36 -0
  152. package/dist/esm/label/label.template.html +4 -0
  153. package/dist/esm/link/define-async.d.ts +1 -0
  154. package/dist/esm/link/define-async.js +5 -0
  155. package/dist/esm/link/define-async.js.map +1 -0
  156. package/dist/esm/link/link.definition-async.d.ts +10 -0
  157. package/dist/esm/link/link.definition-async.js +14 -0
  158. package/dist/esm/link/link.definition-async.js.map +1 -0
  159. package/dist/esm/link/link.styles.css +68 -0
  160. package/dist/esm/link/link.template.html +9 -0
  161. package/dist/esm/listbox/define-async.d.ts +1 -0
  162. package/dist/esm/listbox/define-async.js +5 -0
  163. package/dist/esm/listbox/define-async.js.map +1 -0
  164. package/dist/esm/listbox/listbox.definition-async.d.ts +10 -0
  165. package/dist/esm/listbox/listbox.definition-async.js +14 -0
  166. package/dist/esm/listbox/listbox.definition-async.js.map +1 -0
  167. package/dist/esm/listbox/listbox.styles.css +51 -0
  168. package/dist/esm/listbox/listbox.template.html +8 -0
  169. package/dist/esm/menu/define-async.d.ts +1 -0
  170. package/dist/esm/menu/define-async.js +5 -0
  171. package/dist/esm/menu/define-async.js.map +1 -0
  172. package/dist/esm/menu/menu.definition-async.d.ts +10 -0
  173. package/dist/esm/menu/menu.definition-async.js +14 -0
  174. package/dist/esm/menu/menu.definition-async.js.map +1 -0
  175. package/dist/esm/menu/menu.styles.css +53 -0
  176. package/dist/esm/menu/menu.template.html +7 -0
  177. package/dist/esm/menu/menu.template.js +1 -7
  178. package/dist/esm/menu/menu.template.js.map +1 -1
  179. package/dist/esm/menu-button/define-async.d.ts +1 -0
  180. package/dist/esm/menu-button/define-async.js +5 -0
  181. package/dist/esm/menu-button/define-async.js.map +1 -0
  182. package/dist/esm/menu-button/menu-button.definition-async.d.ts +10 -0
  183. package/dist/esm/menu-button/menu-button.definition-async.js +14 -0
  184. package/dist/esm/menu-button/menu-button.definition-async.js.map +1 -0
  185. package/dist/esm/menu-button/menu-button.definition.js +1 -1
  186. package/dist/esm/menu-button/menu-button.definition.js.map +1 -1
  187. package/dist/esm/menu-button/menu-button.styles.css +267 -0
  188. package/dist/esm/menu-button/menu-button.styles.d.ts +6 -0
  189. package/dist/esm/menu-button/menu-button.styles.js +8 -0
  190. package/dist/esm/menu-button/menu-button.styles.js.map +1 -0
  191. package/dist/esm/menu-button/menu-button.template.html +16 -0
  192. package/dist/esm/menu-item/define-async.d.ts +1 -0
  193. package/dist/esm/menu-item/define-async.js +5 -0
  194. package/dist/esm/menu-item/define-async.js.map +1 -0
  195. package/dist/esm/menu-item/menu-item.definition-async.d.ts +10 -0
  196. package/dist/esm/menu-item/menu-item.definition-async.js +14 -0
  197. package/dist/esm/menu-item/menu-item.definition-async.js.map +1 -0
  198. package/dist/esm/menu-item/menu-item.styles.css +152 -0
  199. package/dist/esm/menu-item/menu-item.template.html +19 -0
  200. package/dist/esm/menu-list/define-async.d.ts +1 -0
  201. package/dist/esm/menu-list/define-async.js +5 -0
  202. package/dist/esm/menu-list/define-async.js.map +1 -0
  203. package/dist/esm/menu-list/menu-list.base.js +3 -0
  204. package/dist/esm/menu-list/menu-list.base.js.map +1 -1
  205. package/dist/esm/menu-list/menu-list.definition-async.d.ts +10 -0
  206. package/dist/esm/menu-list/menu-list.definition-async.js +14 -0
  207. package/dist/esm/menu-list/menu-list.definition-async.js.map +1 -0
  208. package/dist/esm/menu-list/menu-list.styles.css +16 -0
  209. package/dist/esm/menu-list/menu-list.template.html +5 -0
  210. package/dist/esm/menu-list/menu-list.template.js +1 -1
  211. package/dist/esm/menu-list/menu-list.template.js.map +1 -1
  212. package/dist/esm/message-bar/define-async.d.ts +1 -0
  213. package/dist/esm/message-bar/define-async.js +5 -0
  214. package/dist/esm/message-bar/define-async.js.map +1 -0
  215. package/dist/esm/message-bar/message-bar.definition-async.d.ts +10 -0
  216. package/dist/esm/message-bar/message-bar.definition-async.js +14 -0
  217. package/dist/esm/message-bar/message-bar.definition-async.js.map +1 -0
  218. package/dist/esm/message-bar/message-bar.styles.css +98 -0
  219. package/dist/esm/message-bar/message-bar.template.html +8 -0
  220. package/dist/esm/option/define-async.d.ts +1 -0
  221. package/dist/esm/option/define-async.js +5 -0
  222. package/dist/esm/option/define-async.js.map +1 -0
  223. package/dist/esm/option/option.definition-async.d.ts +10 -0
  224. package/dist/esm/option/option.definition-async.js +14 -0
  225. package/dist/esm/option/option.definition-async.js.map +1 -0
  226. package/dist/esm/option/option.styles.css +131 -0
  227. package/dist/esm/option/option.template.html +21 -0
  228. package/dist/esm/progress-bar/define-async.d.ts +1 -0
  229. package/dist/esm/progress-bar/define-async.js +5 -0
  230. package/dist/esm/progress-bar/define-async.js.map +1 -0
  231. package/dist/esm/progress-bar/progress-bar.definition-async.d.ts +10 -0
  232. package/dist/esm/progress-bar/progress-bar.definition-async.js +14 -0
  233. package/dist/esm/progress-bar/progress-bar.definition-async.js.map +1 -0
  234. package/dist/esm/progress-bar/progress-bar.styles.css +99 -0
  235. package/dist/esm/progress-bar/progress-bar.template.html +3 -0
  236. package/dist/esm/radio/define-async.d.ts +1 -0
  237. package/dist/esm/radio/define-async.js +5 -0
  238. package/dist/esm/radio/define-async.js.map +1 -0
  239. package/dist/esm/radio/radio.definition-async.d.ts +10 -0
  240. package/dist/esm/radio/radio.definition-async.js +14 -0
  241. package/dist/esm/radio/radio.definition-async.js.map +1 -0
  242. package/dist/esm/radio/radio.styles.css +115 -0
  243. package/dist/esm/radio/radio.template.html +11 -0
  244. package/dist/esm/radio-group/define-async.d.ts +1 -0
  245. package/dist/esm/radio-group/define-async.js +5 -0
  246. package/dist/esm/radio-group/define-async.js.map +1 -0
  247. package/dist/esm/radio-group/radio-group.definition-async.d.ts +10 -0
  248. package/dist/esm/radio-group/radio-group.definition-async.js +14 -0
  249. package/dist/esm/radio-group/radio-group.definition-async.js.map +1 -0
  250. package/dist/esm/radio-group/radio-group.styles.css +41 -0
  251. package/dist/esm/radio-group/radio-group.template.html +12 -0
  252. package/dist/esm/rating-display/define-async.d.ts +1 -0
  253. package/dist/esm/rating-display/define-async.js +5 -0
  254. package/dist/esm/rating-display/define-async.js.map +1 -0
  255. package/dist/esm/rating-display/rating-display.definition-async.d.ts +10 -0
  256. package/dist/esm/rating-display/rating-display.definition-async.js +14 -0
  257. package/dist/esm/rating-display/rating-display.definition-async.js.map +1 -0
  258. package/dist/esm/rating-display/rating-display.styles.css +140 -0
  259. package/dist/esm/rating-display/rating-display.template.html +6 -0
  260. package/dist/esm/slider/define-async.d.ts +1 -0
  261. package/dist/esm/slider/define-async.js +5 -0
  262. package/dist/esm/slider/define-async.js.map +1 -0
  263. package/dist/esm/slider/slider.definition-async.d.ts +10 -0
  264. package/dist/esm/slider/slider.definition-async.js +14 -0
  265. package/dist/esm/slider/slider.definition-async.js.map +1 -0
  266. package/dist/esm/slider/slider.styles.css +189 -0
  267. package/dist/esm/slider/slider.template.html +17 -0
  268. package/dist/esm/spinner/define-async.d.ts +1 -0
  269. package/dist/esm/spinner/define-async.js +5 -0
  270. package/dist/esm/spinner/define-async.js.map +1 -0
  271. package/dist/esm/spinner/spinner.definition-async.d.ts +10 -0
  272. package/dist/esm/spinner/spinner.definition-async.js +14 -0
  273. package/dist/esm/spinner/spinner.definition-async.js.map +1 -0
  274. package/dist/esm/spinner/spinner.styles.css +155 -0
  275. package/dist/esm/spinner/spinner.template.html +13 -0
  276. package/dist/esm/switch/define-async.d.ts +1 -0
  277. package/dist/esm/switch/define-async.js +5 -0
  278. package/dist/esm/switch/define-async.js.map +1 -0
  279. package/dist/esm/switch/switch.definition-async.d.ts +10 -0
  280. package/dist/esm/switch/switch.definition-async.js +14 -0
  281. package/dist/esm/switch/switch.definition-async.js.map +1 -0
  282. package/dist/esm/switch/switch.styles.css +121 -0
  283. package/dist/esm/switch/switch.template.html +10 -0
  284. package/dist/esm/tab/define-async.d.ts +1 -0
  285. package/dist/esm/tab/define-async.js +5 -0
  286. package/dist/esm/tab/define-async.js.map +1 -0
  287. package/dist/esm/tab/tab.definition-async.d.ts +10 -0
  288. package/dist/esm/tab/tab.definition-async.js +14 -0
  289. package/dist/esm/tab/tab.definition-async.js.map +1 -0
  290. package/dist/esm/tab/tab.styles.css +118 -0
  291. package/dist/esm/tab/tab.template.html +7 -0
  292. package/dist/esm/tablist/define-async.d.ts +1 -0
  293. package/dist/esm/tablist/define-async.js +5 -0
  294. package/dist/esm/tablist/define-async.js.map +1 -0
  295. package/dist/esm/tablist/tablist.definition-async.d.ts +10 -0
  296. package/dist/esm/tablist/tablist.definition-async.js +14 -0
  297. package/dist/esm/tablist/tablist.definition-async.js.map +1 -0
  298. package/dist/esm/tablist/tablist.styles.css +203 -0
  299. package/dist/esm/tablist/tablist.template.html +9 -0
  300. package/dist/esm/text/define-async.d.ts +1 -0
  301. package/dist/esm/text/define-async.js +5 -0
  302. package/dist/esm/text/define-async.js.map +1 -0
  303. package/dist/esm/text/text.definition-async.d.ts +10 -0
  304. package/dist/esm/text/text.definition-async.js +14 -0
  305. package/dist/esm/text/text.definition-async.js.map +1 -0
  306. package/dist/esm/text/text.styles.css +104 -0
  307. package/dist/esm/text/text.template.html +1 -0
  308. package/dist/esm/text-input/define-async.d.ts +1 -0
  309. package/dist/esm/text-input/define-async.js +5 -0
  310. package/dist/esm/text-input/define-async.js.map +1 -0
  311. package/dist/esm/text-input/text-input.base.d.ts +0 -6
  312. package/dist/esm/text-input/text-input.base.js +3 -14
  313. package/dist/esm/text-input/text-input.base.js.map +1 -1
  314. package/dist/esm/text-input/text-input.definition-async.d.ts +10 -0
  315. package/dist/esm/text-input/text-input.definition-async.js +17 -0
  316. package/dist/esm/text-input/text-input.definition-async.js.map +1 -0
  317. package/dist/esm/text-input/text-input.styles.css +200 -0
  318. package/dist/esm/text-input/text-input.template.html +38 -0
  319. package/dist/esm/text-input/text-input.template.js +1 -2
  320. package/dist/esm/text-input/text-input.template.js.map +1 -1
  321. package/dist/esm/textarea/define-async.d.ts +1 -0
  322. package/dist/esm/textarea/define-async.js +5 -0
  323. package/dist/esm/textarea/define-async.js.map +1 -0
  324. package/dist/esm/textarea/textarea.base.js +12 -10
  325. package/dist/esm/textarea/textarea.base.js.map +1 -1
  326. package/dist/esm/textarea/textarea.definition-async.d.ts +10 -0
  327. package/dist/esm/textarea/textarea.definition-async.js +17 -0
  328. package/dist/esm/textarea/textarea.definition-async.js.map +1 -0
  329. package/dist/esm/textarea/textarea.styles.css +258 -0
  330. package/dist/esm/textarea/textarea.template.html +29 -0
  331. package/dist/esm/toggle-button/define-async.d.ts +1 -0
  332. package/dist/esm/toggle-button/define-async.js +5 -0
  333. package/dist/esm/toggle-button/define-async.js.map +1 -0
  334. package/dist/esm/toggle-button/toggle-button.definition-async.d.ts +10 -0
  335. package/dist/esm/toggle-button/toggle-button.definition-async.js +14 -0
  336. package/dist/esm/toggle-button/toggle-button.definition-async.js.map +1 -0
  337. package/dist/esm/toggle-button/toggle-button.js +2 -3
  338. package/dist/esm/toggle-button/toggle-button.js.map +1 -1
  339. package/dist/esm/toggle-button/toggle-button.styles.css +358 -0
  340. package/dist/esm/toggle-button/toggle-button.template.html +12 -0
  341. package/dist/esm/tooltip/define-async.d.ts +1 -0
  342. package/dist/esm/tooltip/define-async.js +5 -0
  343. package/dist/esm/tooltip/define-async.js.map +1 -0
  344. package/dist/esm/tooltip/tooltip.d.ts +9 -9
  345. package/dist/esm/tooltip/tooltip.definition-async.d.ts +10 -0
  346. package/dist/esm/tooltip/tooltip.definition-async.js +14 -0
  347. package/dist/esm/tooltip/tooltip.definition-async.js.map +1 -0
  348. package/dist/esm/tooltip/tooltip.js +38 -6
  349. package/dist/esm/tooltip/tooltip.js.map +1 -1
  350. package/dist/esm/tooltip/tooltip.styles.css +86 -0
  351. package/dist/esm/tooltip/tooltip.template.html +1 -0
  352. package/dist/esm/tree/define-async.d.ts +1 -0
  353. package/dist/esm/tree/define-async.js +5 -0
  354. package/dist/esm/tree/define-async.js.map +1 -0
  355. package/dist/esm/tree/tree.definition-async.d.ts +10 -0
  356. package/dist/esm/tree/tree.definition-async.js +14 -0
  357. package/dist/esm/tree/tree.definition-async.js.map +1 -0
  358. package/dist/esm/tree/tree.styles.css +6 -0
  359. package/dist/esm/tree/tree.template.html +12 -0
  360. package/dist/esm/tree/tree.template.js +1 -0
  361. package/dist/esm/tree/tree.template.js.map +1 -1
  362. package/dist/esm/tree-item/define-async.d.ts +1 -0
  363. package/dist/esm/tree-item/define-async.js +5 -0
  364. package/dist/esm/tree-item/define-async.js.map +1 -0
  365. package/dist/esm/tree-item/tree-item.base.d.ts +1 -0
  366. package/dist/esm/tree-item/tree-item.base.js +12 -3
  367. package/dist/esm/tree-item/tree-item.base.js.map +1 -1
  368. package/dist/esm/tree-item/tree-item.definition-async.d.ts +10 -0
  369. package/dist/esm/tree-item/tree-item.definition-async.js +14 -0
  370. package/dist/esm/tree-item/tree-item.definition-async.js.map +1 -0
  371. package/dist/esm/tree-item/tree-item.styles.css +157 -0
  372. package/dist/esm/tree-item/tree-item.template.html +26 -0
  373. package/dist/esm/tree-item/tree-item.template.js +1 -1
  374. package/dist/esm/tree-item/tree-item.template.js.map +1 -1
  375. package/dist/web-components-all.js +140 -110
  376. package/dist/web-components-all.min.js +11 -11
  377. package/dist/web-components.d.ts +10 -6
  378. package/dist/web-components.js +139 -109
  379. package/dist/web-components.min.js +11 -11
  380. package/package.json +16 -2
@@ -3236,7 +3236,7 @@ function attr(configOrTarget, prop) {
3236
3236
  return decorator;
3237
3237
  }
3238
3238
 
3239
- var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
3239
+ var __awaiter = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
3240
3240
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3241
3241
  return new (P || (P = Promise))(function (resolve, reject) {
3242
3242
  function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -5276,7 +5276,7 @@ const zIndexFloating = "var(--zIndexFloating)";
5276
5276
  const zIndexPriority = "var(--zIndexPriority)";
5277
5277
  const zIndexDebug = "var(--zIndexDebug)";
5278
5278
 
5279
- const styles$E = css`${display("block")} :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer;font:inherit;grid-column:auto/span 2;grid-row:1;height:44px;outline:none;padding:0;text-align:start}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot='marker-collapsed'],[slot='marker-expanded'])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-inline-end:${spacingHorizontalS};grid-column:1/span 1;grid-row:1}.content{margin:0 ${spacingHorizontalM}}::slotted([slot='start']){display:flex;justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2/span 1;grid-row:1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .content{display:block}:host([expanded]) .default-marker-collapsed,:host([expanded]) ::slotted([slot='marker-collapsed']),:host(:not([expanded])) :is(.default-marker-expanded,.content),:host(:not([expanded])) ::slotted([slot='marker-expanded']){display:none}:host([expanded]) ::slotted([slot='marker-expanded']),:host(:not([expanded])) ::slotted([slot='marker-collapsed']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([marker-position='end']) ::slotted([slot='start']){grid-column:1/span 1}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:4/span 1;padding-inline-start:${spacingHorizontalS};padding-inline-end:0}:host([marker-position='end']) .button{grid-column:2/span 3}:host([block]){max-width:100%}:host([marker-position='end']) .heading{grid-template-columns:auto auto 28px;padding-inline:${spacingHorizontalM}}:host([marker-position='end']:has([slot='start'])) .heading{padding-inline:${spacingHorizontalMNudge} ${spacingHorizontalM}}:host([block][marker-position='end']) .heading{grid-template-columns:auto 1fr}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:5/span 1}`;
5279
+ const styles$F = css`${display("block")} :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer;font:inherit;grid-column:auto/span 2;grid-row:1;height:44px;outline:none;padding:0;text-align:start}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot='marker-collapsed'],[slot='marker-expanded'])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-inline-end:${spacingHorizontalS};grid-column:1/span 1;grid-row:1}.content{margin:0 ${spacingHorizontalM}}::slotted([slot='start']){display:flex;justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2/span 1;grid-row:1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .content{display:block}:host([expanded]) .default-marker-collapsed,:host([expanded]) ::slotted([slot='marker-collapsed']),:host(:not([expanded])) :is(.default-marker-expanded,.content),:host(:not([expanded])) ::slotted([slot='marker-expanded']){display:none}:host([expanded]) ::slotted([slot='marker-expanded']),:host(:not([expanded])) ::slotted([slot='marker-collapsed']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([marker-position='end']) ::slotted([slot='start']){grid-column:1/span 1}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:4/span 1;padding-inline-start:${spacingHorizontalS};padding-inline-end:0}:host([marker-position='end']) .button{grid-column:2/span 3}:host([block]){max-width:100%}:host([marker-position='end']) .heading{grid-template-columns:auto auto 28px;padding-inline:${spacingHorizontalM}}:host([marker-position='end']:has([slot='start'])) .heading{padding-inline:${spacingHorizontalMNudge} ${spacingHorizontalM}}:host([block][marker-position='end']) .heading{grid-template-columns:auto 1fr}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:5/span 1}`;
5280
5280
 
5281
5281
  const chevronRight20Filled = html.partial(`<svg width=20 height=20 viewBox="0 0 20 20" fill=none xmlns=http://www.w3.org/2000/svg class=default-marker-collapsed aria-hidden=true><path d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z" fill=currentColor /></svg>`);
5282
5282
  const chevronDown20Filled = html.partial(`<svg width=20 height=20 viewBox="0 0 20 20" fill=none xmlns=http://www.w3.org/2000/svg class=default-marker-expanded aria-hidden=true><path d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z" fill=currentColor /></svg>`);
@@ -5291,7 +5291,7 @@ const template$F = accordionItemTemplate({
5291
5291
  const definition$F = AccordionItem.compose({
5292
5292
  name: tagName$F,
5293
5293
  template: template$F,
5294
- styles: styles$E
5294
+ styles: styles$F
5295
5295
  });
5296
5296
 
5297
5297
  definition$F.define(FluentDesignSystem.registry);
@@ -5358,7 +5358,7 @@ class Accordion extends FASTElement {
5358
5358
  */
5359
5359
  this.setItems = () => {
5360
5360
  waitForConnectedDescendants(this, () => {
5361
- if (this.slottedAccordionItems.length === 0) {
5361
+ if (!this.slottedAccordionItems?.length) {
5362
5362
  return;
5363
5363
  }
5364
5364
  const children = Array.from(this.children);
@@ -5492,7 +5492,7 @@ __decorateClass$N([
5492
5492
  observable
5493
5493
  ], Accordion.prototype, "slottedAccordionItems", 2);
5494
5494
 
5495
- const styles$D = css`${display("flex")} :host{flex-direction:column;width:100%;contain:content}`;
5495
+ const styles$E = css`${display("flex")} :host{flex-direction:column;width:100%;contain:content}`;
5496
5496
 
5497
5497
  function accordionTemplate() {
5498
5498
  return html`<template><slot ${slotted({ property: "slottedAccordionItems", filter: elements() })}></slot></template>`;
@@ -5502,7 +5502,7 @@ const template$E = accordionTemplate();
5502
5502
  const definition$E = Accordion.compose({
5503
5503
  name: tagName$E,
5504
5504
  template: template$E,
5505
- styles: styles$D
5505
+ styles: styles$E
5506
5506
  });
5507
5507
 
5508
5508
  definition$E.define(FluentDesignSystem.registry);
@@ -5805,9 +5805,9 @@ __decorateClass$L([
5805
5805
  applyMixins(AnchorButton, StartEnd);
5806
5806
 
5807
5807
  const baseButtonStyles = css`${display("inline-flex")} :host{--icon-spacing:${spacingHorizontalSNudge};position:relative;contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){:host{transition-duration:0.01ms}}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}::slotted([slot='end']),[slot='end']{flex-shrink:0;margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host(:is([shape='circular'],[shape='circular']:focus-visible)){border-radius:${borderRadiusCircular}}:host(:is([shape='square'],[shape='square']:focus-visible)){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:is(:hover,:hover:active):not(:focus-visible)){border-color:transparent}:host([appearance='primary']:is(:hover,:hover:active)){color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host(:is([appearance='transparent'],[appearance='transparent']:is(:hover,:active))){border-color:transparent}`;
5808
- const styles$C = css`${baseButtonStyles} :host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host([appearance='primary']:is(:disabled,[disabled-focusable])),:host([appearance='primary']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host([appearance='outline']:is(:disabled,[disabled-focusable])),:host([appearance='outline']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host([appearance='subtle']:is(:disabled,[disabled-focusable])),:host([appearance='subtle']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='transparent']:is(:disabled,[disabled-focusable])),:host([appearance='transparent']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent;background-color:${colorTransparentBackground}}@media (forced-colors:active){:host{background-color:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight !important}:host([appearance='primary']:not(:is(:hover,:focus-visible))){background-color:Highlight;color:HighlightText;forced-color-adjust:none}:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])){background-color:ButtonFace;color:GrayText;border-color:ButtonText}}`;
5808
+ const styles$D = css`${baseButtonStyles} :host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover),:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host([appearance='primary']:is(:disabled,[disabled-focusable])),:host([appearance='primary']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent}:host([appearance='outline']:is(:disabled,[disabled-focusable])),:host([appearance='outline']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground}}:host([appearance='subtle']:is(:disabled,[disabled-focusable])),:host([appearance='subtle']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){background-color:${colorTransparentBackground};border-color:transparent}:host([appearance='transparent']:is(:disabled,[disabled-focusable])),:host([appearance='transparent']:is(:disabled,[disabled-focusable]):is(:hover,:hover:active)){border-color:transparent;background-color:${colorTransparentBackground}}@media (forced-colors:active){:host{background-color:ButtonFace;color:ButtonText}:host(:is(:hover,:focus-visible)){border-color:Highlight !important}:host([appearance='primary']:not(:is(:hover,:focus-visible))){background-color:Highlight;color:HighlightText;forced-color-adjust:none}:host(:is(:disabled,[disabled-focusable],[appearance]:disabled,[appearance][disabled-focusable])){background-color:ButtonFace;color:GrayText;border-color:ButtonText}}`;
5809
5809
 
5810
- const styles$B = css`${baseButtonStyles} ::slotted(a){position:absolute;inset:0}@media (forced-colors:active){:host{border-color:LinkText;color:LinkText}}`;
5810
+ const styles$C = css`${baseButtonStyles} ::slotted(a){position:absolute;inset:0}@media (forced-colors:active){:host{border-color:LinkText;color:LinkText}}`;
5811
5811
 
5812
5812
  function anchorTemplate$1(options = {}) {
5813
5813
  return html`<template tabindex=0 @click=${(x, c) => x.clickHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)}>${startSlotTemplate(options)} <span class=content part=content><slot></slot></span>${endSlotTemplate(options)}</template>`;
@@ -5817,7 +5817,7 @@ const template$D = anchorTemplate$1();
5817
5817
  const definition$D = AnchorButton.compose({
5818
5818
  name: tagName$C,
5819
5819
  template: template$D,
5820
- styles: styles$B
5820
+ styles: styles$C
5821
5821
  });
5822
5822
 
5823
5823
  definition$D.define(FluentDesignSystem.registry);
@@ -6166,7 +6166,7 @@ const animations = {
6166
6166
  normalEase: curveEasyEase,
6167
6167
  nullEasing: curveLinear
6168
6168
  };
6169
- const styles$A = css`${display("inline-grid")} :host{position:relative;place-items:center;place-content:center;grid-template:1fr/1fr;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.monogram,.default-icon{grid-area:1/1/-1/-1}.monogram:empty{display:none}.default-slot:is(.has-slotted,:has-slotted)~.default-icon,.default-slot:is(.has-slotted,:has-slotted)~.monogram,:host(:is([name]):not([name=''])) .default-icon,:host(:is([initials]):not([initials=''])) .default-icon{display:none}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin} ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick} ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
6169
+ const styles$B = css`${display("inline-grid")} :host{position:relative;place-items:center;place-content:center;grid-template:1fr/1fr;flex-shrink:0;width:32px;height:32px;font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};font-size:${fontSizeBase300};border-radius:${borderRadiusCircular};color:${colorNeutralForeground3};background-color:${colorNeutralBackground6};contain:layout style}.monogram,.default-icon{grid-area:1/1/-1/-1}.monogram:empty{display:none}.default-slot:is(.has-slotted,:has-slotted)~.default-icon,.default-slot:is(.has-slotted,:has-slotted)~.monogram,:host(:is([name]):not([name=''])) .default-icon,:host(:is([initials]):not([initials=''])) .default-icon{display:none}.default-icon,::slotted(svg){width:20px;height:20px;font-size:20px}::slotted(img){box-sizing:border-box;width:100%;height:100%;border-radius:${borderRadiusCircular}}::slotted([slot='badge']){position:absolute;bottom:0;right:0;box-shadow:0 0 0 ${strokeWidthThin} ${colorNeutralBackground1}}:host([size='64']) ::slotted([slot='badge']),:host([size='72']) ::slotted([slot='badge']),:host([size='96']) ::slotted([slot='badge']),:host([size='120']) ::slotted([slot='badge']),:host([size='128']) ::slotted([slot='badge']){box-shadow:0 0 0 ${strokeWidthThick} ${colorNeutralBackground1}}:host([size='16']),:host([size='20']),:host([size='24']){font-size:${fontSizeBase100};font-weight:${fontWeightRegular}}:host([size='16']){width:16px;height:16px}:host([size='20']){width:20px;height:20px}:host([size='24']){width:24px;height:24px}:host([size='16']) .default-icon,:host([size='16']) ::slotted(svg){width:12px;height:12px;font-size:12px}:host([size='20']) .default-icon,:host([size='24']) .default-icon,:host([size='20']) ::slotted(svg),:host([size='24']) ::slotted(svg){width:16px;height:16px;font-size:16px}:host([size='28']){width:28px;height:28px;font-size:${fontSizeBase200}}:host([size='36']){width:36px;height:36px}:host([size='40']){width:40px;height:40px}:host([size='48']),:host([size='56']){font-size:${fontSizeBase400}}:host([size='48']){width:48px;height:48px}:host([size='48']) .default-icon,:host([size='48']) ::slotted(svg){width:24px;height:24px;font-size:24px}:host([size='56']){width:56px;height:56px}:host([size='56']) .default-icon,:host([size='56']) ::slotted(svg){width:28px;height:28px;font-size:28px}:host([size='64']),:host([size='72']),:host([size='96']){font-size:${fontSizeBase500}}:host([size='64']) .default-icon,:host([size='72']) .default-icon,:host([size='64']) ::slotted(svg),:host([size='72']) ::slotted(svg){width:32px;height:32px;font-size:32px}:host([size='64']){width:64px;height:64px}:host([size='72']){width:72px;height:72px}:host([size='96']){width:96px;height:96px}:host([size='96']) .default-icon,:host([size='120']) .default-icon,:host([size='128']) .default-icon,:host([size='96']) ::slotted(svg),:host([size='120']) ::slotted(svg),:host([size='128']) ::slotted(svg){width:48px;height:48px;font-size:48px}:host([size='120']),:host([size='128']){font-size:${fontSizeBase600}}:host([size='120']){width:120px;height:120px}:host([size='128']){width:128px;height:128px}:host([shape='square']){border-radius:${borderRadiusMedium}}:host([shape='square'][size='20']),:host([shape='square'][size='24']){border-radius:${borderRadiusSmall}}:host([shape='square'][size='56']),:host([shape='square'][size='64']),:host([shape='square'][size='72']){border-radius:${borderRadiusLarge}}:host([shape='square'][size='96']),:host([shape='square'][size='120']),:host([shape='square'][size='128']){border-radius:${borderRadiusXLarge}}:host([data-color='brand']){color:${colorNeutralForegroundStaticInverted};background-color:${colorBrandBackgroundStatic}}:host([data-color='dark-red']){color:${colorPaletteDarkRedForeground2};background-color:${colorPaletteDarkRedBackground2}}:host([data-color='cranberry']){color:${colorPaletteCranberryForeground2};background-color:${colorPaletteCranberryBackground2}}:host([data-color='red']){color:${colorPaletteRedForeground2};background-color:${colorPaletteRedBackground2}}:host([data-color='pumpkin']){color:${colorPalettePumpkinForeground2};background-color:${colorPalettePumpkinBackground2}}:host([data-color='peach']){color:${colorPalettePeachForeground2};background-color:${colorPalettePeachBackground2}}:host([data-color='marigold']){color:${colorPaletteMarigoldForeground2};background-color:${colorPaletteMarigoldBackground2}}:host([data-color='gold']){color:${colorPaletteGoldForeground2};background-color:${colorPaletteGoldBackground2}}:host([data-color='brass']){color:${colorPaletteBrassForeground2};background-color:${colorPaletteBrassBackground2}}:host([data-color='brown']){color:${colorPaletteBrownForeground2};background-color:${colorPaletteBrownBackground2}}:host([data-color='forest']){color:${colorPaletteForestForeground2};background-color:${colorPaletteForestBackground2}}:host([data-color='seafoam']){color:${colorPaletteSeafoamForeground2};background-color:${colorPaletteSeafoamBackground2}}:host([data-color='dark-green']){color:${colorPaletteDarkGreenForeground2};background-color:${colorPaletteDarkGreenBackground2}}:host([data-color='light-teal']){color:${colorPaletteLightTealForeground2};background-color:${colorPaletteLightTealBackground2}}:host([data-color='teal']){color:${colorPaletteTealForeground2};background-color:${colorPaletteTealBackground2}}:host([data-color='steel']){color:${colorPaletteSteelForeground2};background-color:${colorPaletteSteelBackground2}}:host([data-color='blue']){color:${colorPaletteBlueForeground2};background-color:${colorPaletteBlueBackground2}}:host([data-color='royal-blue']){color:${colorPaletteRoyalBlueForeground2};background-color:${colorPaletteRoyalBlueBackground2}}:host([data-color='cornflower']){color:${colorPaletteCornflowerForeground2};background-color:${colorPaletteCornflowerBackground2}}:host([data-color='navy']){color:${colorPaletteNavyForeground2};background-color:${colorPaletteNavyBackground2}}:host([data-color='lavender']){color:${colorPaletteLavenderForeground2};background-color:${colorPaletteLavenderBackground2}}:host([data-color='purple']){color:${colorPalettePurpleForeground2};background-color:${colorPalettePurpleBackground2}}:host([data-color='grape']){color:${colorPaletteGrapeForeground2};background-color:${colorPaletteGrapeBackground2}}:host([data-color='lilac']){color:${colorPaletteLilacForeground2};background-color:${colorPaletteLilacBackground2}}:host([data-color='pink']){color:${colorPalettePinkForeground2};background-color:${colorPalettePinkBackground2}}:host([data-color='magenta']){color:${colorPaletteMagentaForeground2};background-color:${colorPaletteMagentaBackground2}}:host([data-color='plum']){color:${colorPalettePlumForeground2};background-color:${colorPalettePlumBackground2}}:host([data-color='beige']){color:${colorPaletteBeigeForeground2};background-color:${colorPaletteBeigeBackground2}}:host([data-color='mink']){color:${colorPaletteMinkForeground2};background-color:${colorPaletteMinkBackground2}}:host([data-color='platinum']){color:${colorPalettePlatinumForeground2};background-color:${colorPalettePlatinumBackground2}}:host([data-color='anchor']){color:${colorPaletteAnchorForeground2};background-color:${colorPaletteAnchorBackground2}}:host([active]){transform:perspective(1px);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{content:'';position:absolute;top:0;left:0;bottom:0;right:0;border-radius:inherit;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastEase},${animations.nullEasing}}:host([active])::before{box-shadow:${shadow8};border-style:solid;border-color:${colorBrandBackgroundStatic}}:host([active][appearance='shadow'])::before{border-style:none;border-color:none}:host([active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThick});border-width:${strokeWidthThick}}:host([size='56'][active]:not([appearance='shadow']))::before,:host([size='64'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThicker});border-width:${strokeWidthThicker}}:host([size='72'][active]:not([appearance='shadow']))::before,:host([size='96'][active]:not([appearance='shadow']))::before,:host([size='120'][active]:not([appearance='shadow']))::before,:host([size='128'][active]:not([appearance='shadow']))::before{margin:calc(-2 * ${strokeWidthThickest});border-width:${strokeWidthThickest}}:host([size='20'][active][appearance])::before,:host([size='24'][active][appearance])::before,:host([size='28'][active][appearance])::before{box-shadow:${shadow4}}:host([size='56'][active][appearance])::before,:host([size='64'][active][appearance])::before{box-shadow:${shadow16}}:host([size='72'][active][appearance])::before,:host([size='96'][active][appearance])::before,:host([size='120'][active][appearance])::before,:host([size='128'][active][appearance])::before{box-shadow:${shadow28}}:host([active][appearance='ring'])::before{box-shadow:none}:host([active='inactive']){opacity:0.8;transform:scale(0.875);transition-property:transform,opacity;transition-duration:${durationUltraSlow},${durationFaster};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}:host([active='inactive'])::before{margin:0;opacity:0;transition-property:margin,opacity;transition-duration:${durationUltraSlow},${durationSlower};transition-delay:${animations.fastOutSlowInMin},${animations.nullEasing}}@media screen and (prefers-reduced-motion:reduce){:host([active]){transition-duration:0.01ms}:host([active])::before{transition-duration:0.01ms;transition-delay:0.01ms}}`;
6170
6170
 
6171
6171
  const defaultIconTemplate = html`<svg width=1em height=1em viewBox="0 0 20 20" class=default-icon fill=currentcolor aria-hidden=true><path d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"></path></svg>`;
6172
6172
  function avatarTemplate() {
@@ -6177,7 +6177,7 @@ const template$C = avatarTemplate();
6177
6177
  const definition$C = Avatar.compose({
6178
6178
  name: tagName$B,
6179
6179
  template: template$C,
6180
- styles: styles$A
6180
+ styles: styles$B
6181
6181
  });
6182
6182
 
6183
6183
  definition$C.define(FluentDesignSystem.registry);
@@ -6251,7 +6251,7 @@ const badgeGhostStyles = css.partial`:host([appearance='ghost']){color:${colorBr
6251
6251
  const badgeOutlineStyles = css.partial`:host([appearance='outline']){border-color:currentColor;color:${colorBrandForeground1};background-color:initial}:host([appearance='outline'][color='danger']){color:${colorPaletteRedForeground3}}:host([appearance='outline'][color='important']){color:${colorNeutralForeground3};border-color:${colorNeutralStrokeAccessible}}:host([appearance='outline'][color='informative']){color:${colorNeutralForeground3};border-color:${colorNeutralStroke2}}:host([appearance='outline'][color='severe']){color:${colorPaletteDarkOrangeForeground3}}:host([appearance='outline'][color='subtle']){color:${colorNeutralForegroundStaticInverted}}:host([appearance='outline'][color='success']){color:${colorPaletteGreenForeground2}}:host([appearance='outline'][color='warning']){color:${colorPaletteYellowForeground2}}`;
6252
6252
  const badgeTintStyles = css.partial`:host([appearance='tint']){background-color:${colorBrandBackground2};color:${colorBrandForeground2};border-color:${colorBrandStroke2}}:host([appearance='tint'][color='danger']){background-color:${colorPaletteRedBackground1};color:${colorPaletteRedForeground1};border-color:${colorPaletteRedBorder1}}:host([appearance='tint'][color='important']){background-color:${colorNeutralForeground3};color:${colorNeutralBackground1};border-color:${colorTransparentStroke}}:host([appearance='tint'][color='informative']){background-color:${colorNeutralBackground4};color:${colorNeutralForeground3};border-color:${colorNeutralStroke2}}:host([appearance='tint'][color='severe']){background-color:${colorPaletteDarkOrangeBackground1};color:${colorPaletteDarkOrangeForeground1};border-color:${colorPaletteDarkOrangeBorder1}}:host([appearance='tint'][color='subtle']){background-color:${colorNeutralBackground1};color:${colorNeutralForeground3};border-color:${colorNeutralStroke2}}:host([appearance='tint'][color='success']){background-color:${colorPaletteGreenBackground1};color:${colorPaletteGreenForeground1};border-color:${colorPaletteGreenBorder2}}:host([appearance='tint'][color='warning']){background-color:${colorPaletteYellowBackground1};color:${colorPaletteYellowForeground2};border-color:${colorPaletteYellowBorder1}}`;
6253
6253
 
6254
- const styles$z = css`:host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeTintStyles} ${badgeOutlineStyles} ${badgeGhostStyles} ${badgeFilledStyles} ${badgeSizeStyles} ${badgeBaseStyles} @media (forced-colors:active){:host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}}`;
6254
+ const styles$A = css`:host([shape='square']){border-radius:${borderRadiusNone}}:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeTintStyles} ${badgeOutlineStyles} ${badgeGhostStyles} ${badgeFilledStyles} ${badgeSizeStyles} ${badgeBaseStyles} @media (forced-colors:active){:host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}}`;
6255
6255
 
6256
6256
  function badgeTemplate(options = {}) {
6257
6257
  return html`${startSlotTemplate(options)}<slot>${staticallyCompose(options.defaultContent)}</slot>${endSlotTemplate(options)}`;
@@ -6261,7 +6261,7 @@ const template$B = badgeTemplate();
6261
6261
  const definition$B = Badge.compose({
6262
6262
  name: tagName$A,
6263
6263
  template: template$B,
6264
- styles: styles$z
6264
+ styles: styles$A
6265
6265
  });
6266
6266
 
6267
6267
  definition$B.define(FluentDesignSystem.registry);
@@ -6576,7 +6576,7 @@ const template$A = buttonTemplate$1();
6576
6576
  const definition$A = Button.compose({
6577
6577
  name: tagName$D,
6578
6578
  template: template$A,
6579
- styles: styles$C
6579
+ styles: styles$D
6580
6580
  });
6581
6581
 
6582
6582
  definition$A.define(FluentDesignSystem.registry);
@@ -6709,7 +6709,7 @@ class BaseCheckbox extends FASTElement {
6709
6709
  * @internal
6710
6710
  */
6711
6711
  requiredChanged(prev, next) {
6712
- if (this.$fastController.isConnected) {
6712
+ if (this.elementInternals) {
6713
6713
  this.setValidity();
6714
6714
  this.elementInternals.ariaRequired = this.required ? "true" : "false";
6715
6715
  }
@@ -6741,7 +6741,7 @@ class BaseCheckbox extends FASTElement {
6741
6741
  * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
6742
6742
  */
6743
6743
  get validationMessage() {
6744
- if (this.elementInternals.validationMessage) {
6744
+ if (this.elementInternals?.validationMessage) {
6745
6745
  return this.elementInternals.validationMessage;
6746
6746
  }
6747
6747
  if (!this._validationFallbackMessage) {
@@ -6774,11 +6774,11 @@ class BaseCheckbox extends FASTElement {
6774
6774
  }
6775
6775
  set value(value) {
6776
6776
  this._value = value;
6777
- if (this.$fastController.isConnected) {
6777
+ if (this.elementInternals) {
6778
6778
  this.setFormValue(value);
6779
6779
  this.setValidity();
6780
- Observable.notify(this, "value");
6781
6780
  }
6781
+ Observable.notify(this, "value");
6782
6782
  }
6783
6783
  /**
6784
6784
  * Determines if the control can be submitted for constraint validation.
@@ -6889,7 +6889,9 @@ class BaseCheckbox extends FASTElement {
6889
6889
  * @internal
6890
6890
  */
6891
6891
  setAriaChecked(value = this.checked) {
6892
- this.elementInternals.ariaChecked = value ? "true" : "false";
6892
+ if (this.elementInternals) {
6893
+ this.elementInternals.ariaChecked = value ? "true" : "false";
6894
+ }
6893
6895
  }
6894
6896
  /**
6895
6897
  * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
@@ -6897,7 +6899,7 @@ class BaseCheckbox extends FASTElement {
6897
6899
  * @internal
6898
6900
  */
6899
6901
  setFormValue(value, state) {
6900
- this.elementInternals.setFormValue(value, value ?? state);
6902
+ this.elementInternals?.setFormValue(value, value ?? state);
6901
6903
  }
6902
6904
  /**
6903
6905
  * Sets a custom validity message.
@@ -6919,7 +6921,7 @@ class BaseCheckbox extends FASTElement {
6919
6921
  * @internal
6920
6922
  */
6921
6923
  setValidity(flags, message, anchor) {
6922
- if (this.$fastController.isConnected) {
6924
+ if (this.elementInternals) {
6923
6925
  if (this.disabled || !this.required) {
6924
6926
  this.elementInternals.setValidity({});
6925
6927
  return;
@@ -7062,7 +7064,7 @@ const userInvalidState = stateSelector("user-invalid");
7062
7064
  const validState = stateSelector("valid");
7063
7065
  const valueMissingState = stateSelector("value-missing");
7064
7066
 
7065
- const styles$y = css`${display("inline-flex")} :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size)/2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}@media (forced-colors:active){:host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not([disabled]):hover),:host(${checkedState}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState}:not([disabled]):hover),:host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator{background-color:Highlight}:host([disabled]){border-color:GrayText}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:GrayText}:host([disabled]),:host([disabled]${checkedState}) .checked-indicator{color:GrayText}}`;
7067
+ const styles$z = css`${display("inline-flex")} :host{--size:16px;background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${colorNeutralStrokeAccessibleHover}}:host(:active){border-color:${colorNeutralStrokeAccessiblePressed}}:host(${checkedState}:hover){background-color:${colorCompoundBrandBackgroundHover};border-color:${colorCompoundBrandStrokeHover}}:host(${checkedState}:active){background-color:${colorCompoundBrandBackgroundPressed};border-color:${colorCompoundBrandStrokePressed}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${strokeWidthThick} solid ${colorTransparentStroke};border-radius:${borderRadiusMedium}}:host(:not([slot='input']):focus-visible)::after{border-color:${colorStrokeFocus2}}.indeterminate-indicator,.checked-indicator{color:${colorNeutralForegroundInverted};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${checkedState}),:host(${indeterminateState}){border-color:${colorCompoundBrandStroke}}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:${colorCompoundBrandBackground}}:host(${indeterminateState}) .indeterminate-indicator{border-radius:${borderRadiusSmall};position:absolute;width:calc(var(--size)/2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${borderRadiusCircular}}:host([disabled]),:host([disabled]${checkedState}){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled}}:host([disabled]){cursor:unset}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:${colorNeutralStrokeDisabled}}:host([disabled]${checkedState}) .checked-indicator{color:${colorNeutralStrokeDisabled}}@media (forced-colors:active){:host{border-color:FieldText}:host(:not([slot='input']:focus-visible))::after{border-color:Canvas}:host(:not([disabled]):hover),:host(${checkedState}:not([disabled]):hover),:host(:not([slot='input']):focus-visible)::after{border-color:Highlight}.indeterminate-indicator,.checked-indicator{color:HighlightText}:host(${checkedState}),:host(${indeterminateState}) .indeterminate-indicator{background-color:FieldText}:host(${checkedState}:not([disabled]):hover),:host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator{background-color:Highlight}:host([disabled]){border-color:GrayText}:host([disabled]${indeterminateState}) .indeterminate-indicator{background-color:GrayText}:host([disabled]),:host([disabled]${checkedState}) .checked-indicator{color:GrayText}}`;
7066
7068
 
7067
7069
  const checkedIndicator$2 = html.partial(
7068
7070
  /* html */
@@ -7083,7 +7085,7 @@ const template$z = checkboxTemplate({
7083
7085
  const definition$z = Checkbox.compose({
7084
7086
  name: tagName$z,
7085
7087
  template: template$z,
7086
- styles: styles$y
7088
+ styles: styles$z
7087
7089
  });
7088
7090
 
7089
7091
  definition$z.define(FluentDesignSystem.registry);
@@ -7096,7 +7098,7 @@ const tagName$y = `${FluentDesignSystem.prefix}-compound-button`;
7096
7098
  class CompoundButton extends Button {
7097
7099
  }
7098
7100
 
7099
- const styles$x = css`${styles$C} :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='transparent'],[appearance='subtle'],[appearance='subtle']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance])) ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']){padding:8px;padding-bottom:10px}:host([icon-only]){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}@media (forced-colors:active){:host([appearance='primary']:not(:hover,:focus-visible,:disabled,[disabled-focusable])) ::slotted([slot='description']){color:HighlightText}}`;
7101
+ const styles$y = css`${styles$D} :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='transparent'],[appearance='subtle'],[appearance='subtle']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance])) ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']){padding:8px;padding-bottom:10px}:host([icon-only]){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}@media (forced-colors:active){:host([appearance='primary']:not(:hover,:focus-visible,:disabled,[disabled-focusable])) ::slotted([slot='description']){color:HighlightText}}`;
7100
7102
 
7101
7103
  function buttonTemplate(options = {}) {
7102
7104
  return html`<template @click=${(x, c) => x.clickHandler(c.event)} @keypress=${(x, c) => x.keypressHandler(c.event)}>${startSlotTemplate(options)} <span class=content part=content><slot ${slotted("defaultSlottedContent")}></slot><slot name=description></slot></span>${endSlotTemplate(options)}</template>`;
@@ -7106,7 +7108,7 @@ const template$y = buttonTemplate();
7106
7108
  const definition$y = CompoundButton.compose({
7107
7109
  name: tagName$y,
7108
7110
  template: template$y,
7109
- styles: styles$x
7111
+ styles: styles$y
7110
7112
  });
7111
7113
 
7112
7114
  definition$y.define(FluentDesignSystem.registry);
@@ -7216,7 +7218,7 @@ __decorateClass$C([
7216
7218
  ], CounterBadge.prototype, "size", 2);
7217
7219
  applyMixins(CounterBadge, StartEnd);
7218
7220
 
7219
- const styles$w = css`:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeSizeStyles} ${badgeFilledStyles} ${badgeGhostStyles} ${badgeBaseStyles} :host(:is([dot],[dot][appearance][size])){min-width:auto;width:6px;height:6px;padding:0}`;
7221
+ const styles$x = css`:host([shape='rounded']){border-radius:${borderRadiusMedium}}:host([shape='rounded']:is([size='tiny'],[size='extra-small'],[size='small'])){border-radius:${borderRadiusSmall}}${badgeSizeStyles} ${badgeFilledStyles} ${badgeGhostStyles} ${badgeBaseStyles} :host(:is([dot],[dot][appearance][size])){min-width:auto;width:6px;height:6px;padding:0}`;
7220
7222
 
7221
7223
  function counterBadgeTemplate(options = {}) {
7222
7224
  return html`${startSlotTemplate(options)} <span>${(x) => x.displayValue}</span> ${endSlotTemplate(options)}`;
@@ -7226,7 +7228,7 @@ const template$x = counterBadgeTemplate();
7226
7228
  const definition$x = CounterBadge.compose({
7227
7229
  name: tagName$x,
7228
7230
  template: template$x,
7229
- styles: styles$w
7231
+ styles: styles$x
7230
7232
  });
7231
7233
 
7232
7234
  definition$x.define(FluentDesignSystem.registry);
@@ -7386,12 +7388,12 @@ __decorateClass$B([
7386
7388
 
7387
7389
  const template$w = html`<dialog class=dialog part=dialog aria-modal=${(x) => x.dialogModal} aria-describedby=${(x) => x.dialogDescribedby} aria-labelledby=${(x) => x.dialogLabelledby} aria-label=${(x) => x.dialogLabel} role=${(x) => x.dialogRole} @click=${(x, c) => x.clickHandler(c.event)} @cancel=${(x) => x.hide()} ${ref("dialog")}><slot></slot></dialog>`;
7388
7390
 
7389
- const styles$v = css`@layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}@media (forced-colors:active){@layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}}`;
7391
+ const styles$w = css`@layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}@media (forced-colors:active){@layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}}`;
7390
7392
 
7391
7393
  const definition$w = Dialog.compose({
7392
7394
  name: tagName$w,
7393
7395
  template: template$w,
7394
- styles: styles$v
7396
+ styles: styles$w
7395
7397
  });
7396
7398
 
7397
7399
  definition$w.define(FluentDesignSystem.registry);
@@ -7418,12 +7420,12 @@ class DialogBody extends FASTElement {
7418
7420
 
7419
7421
  const template$v = html`<template><div class=title part=title><slot name=title></slot><slot name=title-action></slot><slot name=close @click=${(x, c) => x.clickHandler(c.event)}></slot></div><div class=content part=content><slot></slot></div><div class=actions part=actions><slot name=action></slot></div></template>`;
7420
7422
 
7421
- const styles$u = css`${display("grid")} :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body/inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL}}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL}}::slotted([slot='title-action']){margin-inline-start:auto}::slotted([slot='title']){font:inherit;padding:0;margin:0}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}@media (min-height:480px){.title{position:sticky;z-index:1}.actions{position:sticky;z-index:2}`;
7423
+ const styles$v = css`${display("grid")} :host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body/inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL}}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL}}::slotted([slot='title-action']){margin-inline-start:auto}::slotted([slot='title']){font:inherit;padding:0;margin:0}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}@media (min-height:480px){.title{position:sticky;z-index:1}.actions{position:sticky;z-index:2}`;
7422
7424
 
7423
7425
  const definition$v = DialogBody.compose({
7424
7426
  name: tagName$v,
7425
7427
  template: template$v,
7426
- styles: styles$u
7428
+ styles: styles$v
7427
7429
  });
7428
7430
 
7429
7431
  definition$v.define(FluentDesignSystem.registry);
@@ -7544,12 +7546,12 @@ function dividerTemplate() {
7544
7546
  }
7545
7547
  const template$u = dividerTemplate();
7546
7548
 
7547
- const styles$t = css`${display("flex")} :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){align-items:center;flex-direction:column;height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}@media (forced-colors:active){:host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}}`;
7549
+ const styles$u = css`${display("flex")} :host{contain:content}:host::after,:host::before{align-self:center;background:${colorNeutralStroke2};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${strokeWidthThin}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${colorNeutralForeground2};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){align-items:center;flex-direction:column;height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${strokeWidthThin};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${colorNeutralStroke1}}:host([appearance='strong']) ::slotted(*){color:${colorNeutralForeground1}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${colorBrandStroke1}}:host([appearance='brand']) ::slotted(*){color:${colorBrandForeground1}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${colorNeutralStroke3}}:host([appearance='subtle']) ::slotted(*){color:${colorNeutralForeground3}}@media (forced-colors:active){:host([appearance='strong'])::before,:host([appearance='strong'])::after,:host([appearance='brand'])::before,:host([appearance='brand'])::after,:host([appearance='subtle'])::before,:host([appearance='subtle'])::after,:host::after,:host::before{background:WindowText;color:WindowText}}`;
7548
7550
 
7549
7551
  const definition$u = Divider.compose({
7550
7552
  name: tagName$u,
7551
7553
  template: template$u,
7552
- styles: styles$t
7554
+ styles: styles$u
7553
7555
  });
7554
7556
 
7555
7557
  definition$u.define(FluentDesignSystem.registry);
@@ -7727,7 +7729,7 @@ __decorateClass$y([
7727
7729
  volatile
7728
7730
  ], Drawer.prototype, "dialogRole", 1);
7729
7731
 
7730
- const styles$s = css`${display("block")} :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
7732
+ const styles$t = css`${display("block")} :host{--dialog-backdrop:${colorBackgroundOverlay}}:host([type='non-modal']) dialog[open]::backdrop{display:none}:host([type='non-modal']) dialog{position:fixed;top:0;bottom:0}:host([type='inline']){height:100%;width:fit-content}:host([type='inline']) dialog[open]{box-shadow:none;position:relative}:host([size='small']) dialog{width:320px;max-width:320px}:host([size='large']) dialog{width:940px;max-width:940px}:host([size='full']) dialog{width:100%;max-width:100%}:host([position='end']) dialog{margin-inline-start:auto;margin-inline-end:0}dialog{box-sizing:border-box;z-index:var(--drawer-elevation,1000);font-size:${fontSizeBase300};line-height:${lineHeightBase300};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};color:${colorNeutralForeground1};max-width:var(--drawer-width,592px);max-height:100vh;height:100%;margin-inline-start:0;margin-inline-end:auto;border-inline-end-color:${colorTransparentStroke};border-inline-start-color:var(--drawer-separator,${colorTransparentStroke});outline:none;top:0;bottom:0;width:var(--drawer-width,592px);border-radius:0;padding:0;max-width:var(--drawer-width,592px);box-shadow:${shadow64};border:${strokeWidthThin} solid ${colorTransparentStroke};background:${colorNeutralBackground1}}dialog::backdrop{background:var(--dialog-backdrop)}@layer animations{@media (prefers-reduced-motion:no-preference){dialog{transition:display allow-discrete,opacity,overlay allow-discrete,transform;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid}}:host dialog:not([open]){transform:translateX(-100%);transition-timing-function:${curveAccelerateMid}}:host([position='end']) dialog:not([open]){transform:translateX(100%);transition-timing-function:${curveAccelerateMid}}dialog[open]{transform:translateX(0)}dialog::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};background:var(--dialog-backdrop,${colorBackgroundOverlay});opacity:0}dialog[open]::backdrop{opacity:1}dialog::backdrop{transition-timing-function:${curveLinear}}}@starting-style{dialog[open]{transform:translateX(-100%)}:host([position='end']) dialog[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}}`;
7731
7733
 
7732
7734
  function drawerTemplate() {
7733
7735
  return html`<dialog class=dialog part=dialog aria-describedby=${(x) => x.dialogDescribedby} aria-labelledby=${(x) => x.dialogLabelledby} aria-label=${(x) => x.dialogLabel} aria-modal=${(x) => x.dialogModal} role=${(x) => x.dialogRole} size=${(x) => x.size} position=${(x) => x.position} @click=${(x, c) => x.clickHandler(c.event)} @cancel=${(x) => x.cancelHandler()} ${ref("dialog")}><slot></slot></dialog>`;
@@ -7737,7 +7739,7 @@ const template$t = drawerTemplate();
7737
7739
  const definition$t = Drawer.compose({
7738
7740
  name: tagName$t,
7739
7741
  template: template$t,
7740
- styles: styles$s
7742
+ styles: styles$t
7741
7743
  });
7742
7744
 
7743
7745
  definition$t.define(FluentDesignSystem.registry);
@@ -7780,7 +7782,7 @@ const typographyTitle3Styles = css.partial`font-family:${fontFamilyBase};font-si
7780
7782
  const typographyLargeTitleStyles = css.partial`font-family:${fontFamilyBase};font-size:${fontSizeHero900};line-height:${lineHeightHero900};font-weight:${fontWeightSemibold};`;
7781
7783
  const typographyDisplayStyles = css.partial`font-family:${fontFamilyBase};font-size:${fontSizeHero1000};line-height:${lineHeightHero1000};font-weight:${fontWeightSemibold};`;
7782
7784
 
7783
- const styles$r = css`${display("grid")} :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}::slotted([slot='title']){font:inherit;padding:0;margin:0}`;
7785
+ const styles$s = css`${display("grid")} :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}::slotted([slot='title']){font:inherit;padding:0;margin:0}`;
7784
7786
 
7785
7787
  function drawerBodyTemplate() {
7786
7788
  return html`<div class=header part=header><slot name=title></slot><slot name=close @click=${(x, c) => x.clickHandler(c.event)}></slot></div><div class=content part=content><slot></slot></div><div class=footer part=footer><slot name=footer></slot></div>`;
@@ -7790,7 +7792,7 @@ const template$s = drawerBodyTemplate();
7790
7792
  const definition$s = DrawerBody.compose({
7791
7793
  name: tagName$s,
7792
7794
  template: template$s,
7793
- styles: styles$r
7795
+ styles: styles$s
7794
7796
  });
7795
7797
 
7796
7798
  definition$s.define(FluentDesignSystem.registry);
@@ -8009,20 +8011,16 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
8009
8011
  const notifier = Observable.getNotifier(this);
8010
8012
  notifier.subscribe(next);
8011
8013
  notifier.notify("multiple");
8012
- waitForConnectedDescendants(
8013
- next,
8014
- () => {
8015
- this.options.forEach((option) => {
8016
- option.disabled = option.disabledAttribute || this.disabled;
8017
- option.name = this.name;
8018
- });
8019
- this.enabledOptions.filter((x) => x.defaultSelected).forEach((x, i) => {
8020
- x.selected = this.multiple || i === 0;
8021
- });
8022
- this.setValidity();
8023
- },
8024
- { idleCallback: true }
8025
- );
8014
+ Updates.enqueue(() => {
8015
+ this.options.forEach((option) => {
8016
+ option.disabled = option.disabledAttribute || this.disabled;
8017
+ option.name = this.name;
8018
+ });
8019
+ this.enabledOptions.filter((x) => x.defaultSelected).forEach((x, i) => {
8020
+ x.selected = this.multiple || i === 0;
8021
+ });
8022
+ this.setValidity();
8023
+ });
8026
8024
  if (AnchorPositioningCSSSupported) {
8027
8025
  const anchorName = uniqueId("--dropdown-anchor-");
8028
8026
  this.style.setProperty("anchor-name", anchorName);
@@ -8090,7 +8088,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
8090
8088
  * @public
8091
8089
  */
8092
8090
  get enabledOptions() {
8093
- return this.listbox?.enabledOptions ?? [];
8091
+ return this.listbox?.enabledOptions ?? Array.from(this.querySelectorAll("*")).filter((o) => isDropdownOption(o) && !o.disabled);
8094
8092
  }
8095
8093
  /**
8096
8094
  * A reference to the first freeform option, if present.
@@ -8122,7 +8120,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
8122
8120
  * @public
8123
8121
  */
8124
8122
  get options() {
8125
- return this.listbox?.options ?? [];
8123
+ return this.listbox?.options ?? Array.from(this.querySelectorAll("*")).filter((o) => isDropdownOption(o));
8126
8124
  }
8127
8125
  /**
8128
8126
  * The index of the first selected option, scoped to the enabled options.
@@ -8682,12 +8680,12 @@ __decorateClass$w([
8682
8680
  attr
8683
8681
  ], Dropdown.prototype, "size", 2);
8684
8682
 
8685
- const styles$q = css`${display("inline-flex")} :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};white-space:normal;position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator']>*,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:''/'';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted(:not([slot]):not([popover])),::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){color:GrayText}`;
8683
+ const styles$r = css`${display("inline-flex")} :host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};white-space:normal;position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator']>*,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:''/'';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted(:not([slot]):not([popover])),::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator']>*,::slotted([slot='indicator'])){color:GrayText}`;
8686
8684
 
8687
8685
  const definition$r = Dropdown.compose({
8688
8686
  name: tagName$r,
8689
8687
  template: template$r,
8690
- styles: styles$q
8688
+ styles: styles$r
8691
8689
  });
8692
8690
 
8693
8691
  definition$r.define(FluentDesignSystem.registry);
@@ -8927,14 +8925,14 @@ __decorateClass$u([
8927
8925
  attr({ attribute: "label-position" })
8928
8926
  ], Field.prototype, "labelPosition", 2);
8929
8927
 
8930
- const styles$p = css`${display("inline-grid")} :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host(${requiredState}) ::slotted([slot='label'])::after{content:'*'/'';color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){color:${colorNeutralForeground3};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};grid-area:message;line-height:${lineHeightBase200};margin-block-start:${spacingVerticalXXS}}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};justify-self:stretch;user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
8928
+ const styles$q = css`${display("inline-grid")} :host{color:${colorNeutralForeground1};align-items:center;gap:0 ${spacingHorizontalM};justify-items:start}:has([slot='message']){color:${colorNeutralForeground1};row-gap:${spacingVerticalS}}:not(::slotted([slot='label'])){gap:0}:host([label-position='before']){grid-template-areas:'label input' 'label message'}:host([label-position='after']){gap:0;grid-template-areas:'input label' 'message message';grid-template-columns:auto 1fr}:host([label-position='after']) ::slotted([slot='input']){margin-inline-end:${spacingHorizontalM}}:host([label-position='above']){grid-template-areas:'label' 'input' 'message';row-gap:${spacingVerticalXXS}}:host([label-position='below']){grid-template-areas:'input' 'label' 'message';justify-items:center}:host([label-position='below']) ::slotted([slot='label']){margin-block-start:${spacingVerticalM}}:host(${requiredState}) ::slotted([slot='label'])::after{content:'*'/'';color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}::slotted([slot='input']){grid-area:input}::slotted([slot='message']){color:${colorNeutralForeground3};font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};grid-area:message;line-height:${lineHeightBase200};margin-block-start:${spacingVerticalXXS}}:host(${focusVisibleState}:focus-within){border-radius:${borderRadiusMedium};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}::slotted(label),::slotted([slot='label']){cursor:inherit;display:inline-flex;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};grid-area:label;line-height:${lineHeightBase300};justify-self:stretch;user-select:none}:host([size='small']) ::slotted(label){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) ::slotted(label){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted(label),:host([weight='semibold']) ::slotted(label){font-weight:${fontWeightSemibold}}:host(${disabledState}){cursor:default}::slotted([flag]){display:none}:host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),:host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),:host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),:host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),:host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),:host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),:host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),:host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),:host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),:host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),:host(${validState}) ::slotted([flag='${ValidationFlags.valid}']){display:block}`;
8931
8929
 
8932
8930
  const template$q = html`<template @click=${(x, c) => x.clickHandler(c.event)} @change=${(x, c) => x.changeHandler(c.event)} @focusin=${(x, c) => x.focusinHandler(c.event)} @focusout=${(x, c) => x.focusoutHandler(c.event)}><slot name=label part=label ${slotted("labelSlot")}></slot><slot name=input part=input ${slotted("slottedInputs")}></slot><slot name=message part=message ${slotted({ property: "messageSlot", filter: elements("[flag]") })}></slot></template>`;
8933
8931
 
8934
8932
  const definition$q = Field.compose({
8935
8933
  name: tagName$o,
8936
8934
  template: template$q,
8937
- styles: styles$p,
8935
+ styles: styles$q,
8938
8936
  shadowOptions: {
8939
8937
  delegatesFocus: true
8940
8938
  }
@@ -8985,12 +8983,12 @@ __decorateClass$t([
8985
8983
 
8986
8984
  const template$p = html`<slot></slot>`;
8987
8985
 
8988
- const styles$o = css`:host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
8986
+ const styles$p = css`:host{contain:content}:host ::slotted(img){box-sizing:border-box;min-height:8px;min-width:8px;display:inline-block}:host([block]) ::slotted(img){width:100%;height:auto}:host([bordered]) ::slotted(img){border:${strokeWidthThin} solid ${colorNeutralStroke2}}:host([fit='none']) ::slotted(img){object-fit:none;object-position:top left;height:100%;width:100%}:host([fit='center']) ::slotted(img){object-fit:none;object-position:center;height:100%;width:100%}:host([fit='contain']) ::slotted(img){object-fit:contain;object-position:center;height:100%;width:100%}:host([fit='cover']) ::slotted(img){object-fit:cover;object-position:center;height:100%;width:100%}:host([shadow]) ::slotted(img){box-shadow:${shadow4}}:host([shape='circular']) ::slotted(img){border-radius:${borderRadiusCircular}}:host([shape='rounded']) ::slotted(img){border-radius:${borderRadiusMedium}}`;
8989
8987
 
8990
8988
  const definition$p = Image.compose({
8991
8989
  name: tagName$n,
8992
8990
  template: template$p,
8993
- styles: styles$o
8991
+ styles: styles$p
8994
8992
  });
8995
8993
 
8996
8994
  definition$p.define(FluentDesignSystem.registry);
@@ -9036,7 +9034,7 @@ __decorateClass$s([
9036
9034
  attr({ mode: "boolean" })
9037
9035
  ], Label.prototype, "required", 2);
9038
9036
 
9039
- const styles$n = css`${display("inline-flex")} :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is([size='large'],[weight='semibold'])){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
9037
+ const styles$o = css`${display("inline-flex")} :host{color:${colorNeutralForeground1};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};user-select:none}.asterisk{color:${colorPaletteRedForeground1};margin-inline-start:${spacingHorizontalXS}}:host([size='small']){font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']){font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host(:is([size='large'],[weight='semibold'])){font-weight:${fontWeightSemibold}}:host([disabled]),:host([disabled]) .asterisk{color:${colorNeutralForegroundDisabled}}`;
9040
9038
 
9041
9039
  function labelTemplate() {
9042
9040
  return html`<slot></slot><span part=asterisk class=asterisk aria-hidden=true ?hidden=${(x) => !x.required}>*</span>`;
@@ -9046,7 +9044,7 @@ const template$o = labelTemplate();
9046
9044
  const definition$o = Label.compose({
9047
9045
  name: tagName$m,
9048
9046
  template: template$o,
9049
- styles: styles$n
9047
+ styles: styles$o
9050
9048
  });
9051
9049
 
9052
9050
  definition$o.define(FluentDesignSystem.registry);
@@ -9080,7 +9078,7 @@ __decorateClass$r([
9080
9078
  attr({ mode: "boolean" })
9081
9079
  ], Link.prototype, "inline", 2);
9082
9080
 
9083
- const styles$m = css`${display("inline")} :host{position:relative;box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};overflow:inherit;text-align:start;text-decoration:none;text-decoration-thickness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host([appearance='subtle']:hover){color:${colorNeutralForeground2LinkHover}}:host([appearance='subtle']:active){color:${colorNeutralForeground2LinkPressed}}}:host([appearance='subtle']){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host([inline]){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}@media (forced-colors:active){:host{color:LinkText}}`;
9081
+ const styles$n = css`${display("inline")} :host{position:relative;box-sizing:border-box;background-color:transparent;color:${colorBrandForegroundLink};cursor:pointer;font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};overflow:inherit;text-align:start;text-decoration:none;text-decoration-thickness:${strokeWidthThin};text-overflow:inherit;user-select:text}:host(:is(:hover,:focus-visible)){outline:none;text-decoration-line:underline}@media (hover:hover){:host(:hover){color:${colorBrandForegroundLinkHover}}:host(:active){color:${colorBrandForegroundLinkPressed}}:host([appearance='subtle']:hover){color:${colorNeutralForeground2LinkHover}}:host([appearance='subtle']:active){color:${colorNeutralForeground2LinkPressed}}}:host([appearance='subtle']){color:${colorNeutralForeground2Link}}:host-context(:is(h1,h2,h3,h4,h5,h6,p,fluent-text)),:host([inline]){font:inherit;text-decoration:underline}:host(:not([href])){color:inherit;text-decoration:none}::slotted(a){position:absolute;inset:0}@media (forced-colors:active){:host{color:LinkText}}`;
9084
9082
 
9085
9083
  function anchorTemplate() {
9086
9084
  return html`<template tabindex=0 @click=${(x, c) => x.clickHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)}><slot></slot></template>`;
@@ -9090,7 +9088,7 @@ const template$n = anchorTemplate();
9090
9088
  const definition$n = Link.compose({
9091
9089
  name: tagName$l,
9092
9090
  template: template$n,
9093
- styles: styles$m
9091
+ styles: styles$n
9094
9092
  });
9095
9093
 
9096
9094
  definition$n.define(FluentDesignSystem.registry);
@@ -9285,7 +9283,7 @@ __decorateClass$q([
9285
9283
  observable
9286
9284
  ], Listbox.prototype, "dropdown", 2);
9287
9285
 
9288
- const styles$l = css`${display("inline-flex")} :host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow16};box-sizing:border-box;flex-direction:column;margin:0;min-width:160px;padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS};width:auto}:host([popover]){inset:unset;overflow:auto}@supports (anchor-name:--anchor){:host([popover]){position:absolute;margin-block-start:0;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);position-anchor:--dropdown;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,--flip-block,block-start}@position-try --flip-block{bottom:anchor(top);top:unset}}@supports not (anchor-name:--anchor){:host([popover]){margin-block-start:var(--margin-offset,0);max-height:var(--listbox-max-height,50vh);position:fixed}:host([popover]${flipBlockState}){margin-block-start:revert;translate:0 -100%}}`;
9286
+ const styles$m = css`${display("inline-flex")} :host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow16};box-sizing:border-box;flex-direction:column;margin:0;min-width:160px;padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS};width:auto}:host([popover]){inset:unset;overflow:auto}@supports (anchor-name:--anchor){:host([popover]){position:absolute;margin-block-start:0;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);position-anchor:--dropdown;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,--flip-block,block-start}@position-try --flip-block{bottom:anchor(top);top:unset}}@supports not (anchor-name:--anchor){:host([popover]){margin-block-start:var(--margin-offset,0);max-height:var(--listbox-max-height,50vh);position:fixed}:host([popover]${flipBlockState}){margin-block-start:revert;translate:0 -100%}}`;
9289
9287
 
9290
9288
  function listboxTemplate() {
9291
9289
  return html`<template @beforetoggle=${(x, c) => x.beforetoggleHandler(c.event)} @click=${(x, c) => x.clickHandler(c.event)}><slot ${ref("defaultSlot")} @slotchange=${(x, c) => x.slotchangeHandler(c.event)}></slot></template>`;
@@ -9295,11 +9293,13 @@ const template$m = listboxTemplate();
9295
9293
  const definition$m = Listbox.compose({
9296
9294
  name: tagName$q,
9297
9295
  template: template$m,
9298
- styles: styles$l
9296
+ styles: styles$m
9299
9297
  });
9300
9298
 
9301
9299
  definition$m.define(FluentDesignSystem.registry);
9302
9300
 
9301
+ const styles$l = styles$D;
9302
+
9303
9303
  const MenuButtonAppearance = ButtonAppearance;
9304
9304
  const MenuButtonShape = ButtonShape;
9305
9305
  const MenuButtonSize = ButtonSize;
@@ -9318,7 +9318,7 @@ const template$l = buttonTemplate$1({
9318
9318
  const definition$l = MenuButton.compose({
9319
9319
  name: tagName$k,
9320
9320
  template: template$l,
9321
- styles: styles$C
9321
+ styles: styles$l
9322
9322
  });
9323
9323
 
9324
9324
  definition$l.define(FluentDesignSystem.registry);
@@ -9633,7 +9633,7 @@ function nodeContains(node, otherNode) {
9633
9633
  * @returns {boolean}
9634
9634
  */
9635
9635
  function supportsFocusGroup() {
9636
- return "focusgroup" in (globalThis?.HTMLElement?.prototype ?? {});
9636
+ return "focusgroup" in (globalThis?.HTMLElement?.prototype ?? {}) || "focusGroup" in (globalThis?.HTMLElement?.prototype ?? {});
9637
9637
  }
9638
9638
  /**
9639
9639
  * Gets the navigation direction (“forward” or “backward”) based on:
@@ -10140,6 +10140,9 @@ const _BaseMenuList = class _BaseMenuList extends FASTElement {
10140
10140
  */
10141
10141
  connectedCallback() {
10142
10142
  super.connectedCallback();
10143
+ if (!this.slot && this.isNestedMenu()) {
10144
+ this.slot = "submenu";
10145
+ }
10143
10146
  Updates.enqueue(() => {
10144
10147
  this.setItems();
10145
10148
  });
@@ -10233,7 +10236,7 @@ class MenuList extends BaseMenuList {
10233
10236
  const styles$j = css`${display("flex")} :host{flex-direction:column;height:fit-content;max-width:300px;min-width:160px;width:auto;background-color:${colorNeutralBackground1};border:1px solid ${colorTransparentStroke};border-radius:${borderRadiusMedium};box-shadow:${shadow16};padding:4px;row-gap:2px}`;
10234
10237
 
10235
10238
  function menuTemplate$1() {
10236
- return html`<template focusgroup=menu slot=${(x) => x.slot ? x.slot : x.isNestedMenu() ? "submenu" : void 0}><slot ${slotted("items")}></slot></template>`;
10239
+ return html`<template focusgroup=menu><slot ${slotted("items")}></slot></template>`;
10237
10240
  }
10238
10241
  const template$j = menuTemplate$1();
10239
10242
 
@@ -10576,7 +10579,7 @@ __decorateClass$n([
10576
10579
  const styles$i = css`${display("inline-block")} ::slotted([slot='trigger']){anchor-name:--menu-trigger}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position-anchor:--menu-trigger;position-area:block-end span-inline-end;position-try-fallbacks:flip-block;position:absolute;z-index:1}:host([split]) ::slotted([popover]){position-area:block-end span-inline-start}::slotted([popover]:popover-open){inset:unset}::slotted([popover]:not(:popover-open)){display:none}:host([split]){display:inline-flex}:host([split]) ::slotted([slot='primary-action']){border-inline-end:${strokeWidthThin} solid ${colorNeutralStroke1};border-start-end-radius:0;border-end-end-radius:0}:host([split]) ::slotted([slot='primary-action']:focus-visible){z-index:1}:host([split]) ::slotted([slot='primary-action'][appearance='primary']){border-inline-end:${strokeWidthThin} solid white}:host([split]) ::slotted([slot='trigger']){border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}`;
10577
10580
 
10578
10581
  function menuTemplate() {
10579
- return html`<template ?open-on-hover=${(x) => x.openOnHover} ?open-on-context=${(x) => x.openOnContext} ?close-on-scroll=${(x) => x.closeOnScroll} ?persist-on-item-click=${(x) => x.persistOnItemClick} @keydown=${(x, c) => x.menuKeydownHandler(c.event)}><slot name=primary-action ${ref("primaryAction")}></slot><slot name=trigger ${slotted({ property: "slottedTriggers", filter: elements() })}></slot><slot ${slotted({ property: "slottedMenuList", filter: elements() })}></slot></template>`;
10582
+ return html`<template @keydown=${(x, c) => x.menuKeydownHandler(c.event)}><slot name=primary-action ${ref("primaryAction")}></slot><slot name=trigger ${slotted({ property: "slottedTriggers", filter: elements() })}></slot><slot ${slotted({ property: "slottedMenuList", filter: elements() })}></slot></template>`;
10580
10583
  }
10581
10584
  const template$i = menuTemplate();
10582
10585
 
@@ -12968,9 +12971,11 @@ class BaseTextArea extends FASTElement {
12968
12971
  this.controlEl.addEventListener("input", () => this.userInteracted = true, { once: true });
12969
12972
  }
12970
12973
  defaultSlottedNodesChanged() {
12971
- const next = this.getContent();
12972
- this.defaultValue = next;
12973
- this.value = next;
12974
+ Updates.enqueue(() => {
12975
+ const next = this.getContent();
12976
+ this.defaultValue = next;
12977
+ this.value = next;
12978
+ });
12974
12979
  }
12975
12980
  labelSlottedNodesChanged() {
12976
12981
  this.filteredLabelSlottedNodes = this.labelSlottedNodes.filter(whitespaceFilter);
@@ -13007,8 +13012,8 @@ class BaseTextArea extends FASTElement {
13007
13012
  return this.elementInternals.labels;
13008
13013
  }
13009
13014
  readOnlyChanged() {
13010
- this.elementInternals.ariaReadOnly = `${!!this.readOnly}`;
13011
- if (this.$fastController.isConnected) {
13015
+ if (this.elementInternals) {
13016
+ this.elementInternals.ariaReadOnly = `${!!this.readOnly}`;
13012
13017
  this.setValidity();
13013
13018
  }
13014
13019
  }
@@ -13187,7 +13192,7 @@ class BaseTextArea extends FASTElement {
13187
13192
  * @public
13188
13193
  */
13189
13194
  setCustomValidity(message) {
13190
- this.elementInternals.setValidity({ customError: !!message }, !!message ? message.toString() : void 0);
13195
+ this.elementInternals?.setValidity({ customError: !!message }, !!message ? message.toString() : void 0);
13191
13196
  this.reportValidity();
13192
13197
  }
13193
13198
  /**
@@ -13200,15 +13205,15 @@ class BaseTextArea extends FASTElement {
13200
13205
  * @internal
13201
13206
  */
13202
13207
  setValidity(flags, message, anchor) {
13203
- if (!this.$fastController.isConnected) {
13208
+ if (!this.elementInternals) {
13204
13209
  return;
13205
13210
  }
13206
13211
  if (this.disabled || this.readOnly) {
13207
13212
  this.elementInternals.setValidity({});
13208
13213
  } else {
13209
13214
  this.elementInternals.setValidity(
13210
- flags ?? this.controlEl.validity,
13211
- message ?? this.controlEl.validationMessage,
13215
+ flags ?? this.controlEl?.validity,
13216
+ message ?? this.controlEl?.validationMessage,
13212
13217
  anchor ?? this.controlEl
13213
13218
  );
13214
13219
  }
@@ -13228,7 +13233,7 @@ class BaseTextArea extends FASTElement {
13228
13233
  * Gets the content inside the light DOM, if any HTML element is present, use its `outerHTML` value.
13229
13234
  */
13230
13235
  getContent() {
13231
- return this.defaultSlottedNodes.map((node) => {
13236
+ return this.defaultSlottedNodes?.map((node) => {
13232
13237
  switch (node.nodeType) {
13233
13238
  case Node.ELEMENT_NODE:
13234
13239
  return node.outerHTML;
@@ -13605,7 +13610,7 @@ class BaseTextInput extends FASTElement {
13605
13610
  }
13606
13611
  set value(value) {
13607
13612
  this.currentValue = value;
13608
- if (this.$fastController.isConnected) {
13613
+ if (this.elementInternals && this.control) {
13609
13614
  this.control.value = value ?? "";
13610
13615
  this.setFormValue(value);
13611
13616
  this.setValidity();
@@ -13632,17 +13637,6 @@ class BaseTextInput extends FASTElement {
13632
13637
  get form() {
13633
13638
  return this.elementInternals.form;
13634
13639
  }
13635
- /**
13636
- * Handles the internal control's `keypress` event.
13637
- *
13638
- * @internal
13639
- */
13640
- beforeinputHandler(e) {
13641
- if (e.inputType === "insertLineBreak") {
13642
- this.implicitSubmit();
13643
- }
13644
- return true;
13645
- }
13646
13640
  /**
13647
13641
  * Change event handler for inner control.
13648
13642
  *
@@ -13795,7 +13789,7 @@ class BaseTextInput extends FASTElement {
13795
13789
  * @internal
13796
13790
  */
13797
13791
  setFormValue(value, state) {
13798
- this.elementInternals.setFormValue(value, value ?? state);
13792
+ this.elementInternals?.setFormValue(value, value ?? state);
13799
13793
  }
13800
13794
  /**
13801
13795
  * Sets the validity of the control.
@@ -13807,7 +13801,7 @@ class BaseTextInput extends FASTElement {
13807
13801
  * @internal
13808
13802
  */
13809
13803
  setValidity(flags, message, anchor) {
13810
- if (this.$fastController.isConnected && this.control) {
13804
+ if (this.elementInternals && this.control) {
13811
13805
  if (this.disabled) {
13812
13806
  this.elementInternals.setValidity({});
13813
13807
  return;
@@ -13922,7 +13916,7 @@ applyMixins(TextInput, StartEnd);
13922
13916
  const styles$5 = css`${display("block")} :host{font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};max-width:400px}.label{display:flex;color:${colorNeutralForeground1};padding-bottom:${spacingVerticalXS};flex-shrink:0;padding-inline-end:${spacingHorizontalXS}}.label[hidden],:host(:empty) .label{display:none}.root{align-items:center;background-color:${colorNeutralBackground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};border-bottom-color:${colorNeutralStrokeAccessible};border-radius:${borderRadiusMedium};box-sizing:border-box;height:32px;display:inline-flex;flex-direction:row;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalMNudge};position:relative;width:100%}:has(.control:user-invalid){border-color:${colorPaletteRedBorder2}}.root::after{box-sizing:border-box;content:'';position:absolute;left:-1px;bottom:0px;right:-1px;height:max(2px,${borderRadiusMedium});border-radius:0 0 ${borderRadiusMedium} ${borderRadiusMedium};border-bottom:2px solid ${colorCompoundBrandStroke};clip-path:inset(calc(100% - 2px) 1px 0px);transform:scaleX(0);transition-property:transform;transition-duration:${durationUltraFast};transition-delay:${curveAccelerateMid}}.control{width:100%;height:100%;box-sizing:border-box;color:${colorNeutralForeground1};border-radius:${borderRadiusMedium};background:${colorTransparentBackground};font-family:${fontFamilyBase};font-weight:${fontWeightRegular};font-size:${fontSizeBase300};border:none;vertical-align:center}.control:focus-visible{outline:0;border:0}.control::placeholder{color:${colorNeutralForeground4}}:host ::slotted([slot='start']),:host ::slotted([slot='end']){display:flex;align-items:center;justify-content:center;color:${colorNeutralForeground3};font-size:${fontSizeBase500}}:host ::slotted([slot='start']){padding-right:${spacingHorizontalXXS}}:host ::slotted([slot='end']){padding-left:${spacingHorizontalXXS};gap:${spacingHorizontalXS}}:host(:hover) .root{border-color:${colorNeutralStroke1Hover};border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host(:active) .root{border-color:${colorNeutralStroke1Pressed}}:host(:focus-within) .root{outline:transparent solid 2px;border-bottom:0}:host(:focus-within) .root::after{transform:scaleX(1);transition-property:transform;transition-duration:${durationNormal};transition-delay:${curveDecelerateMid}}:host(:focus-within:active) .root:after{border-bottom-color:${colorCompoundBrandStrokePressed}}:host([appearance='outline']:focus-within) .root{border:${strokeWidthThin} solid ${colorNeutralStroke1}}:host(:focus-within) .control{color:${colorNeutralForeground1}}:host([disabled]) .root{background:${colorTransparentBackground};border:${strokeWidthThin} solid ${colorNeutralStrokeDisabled}}:host([disabled]) .control::placeholder,:host([disabled]) ::slotted([slot='start']),:host([disabled]) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}::selection{color:${colorNeutralForegroundInverted};background-color:${colorNeutralBackgroundInverted}}:host([control-size='small']) .control{font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200}}:host([control-size='small']) .root{height:24px;gap:${spacingHorizontalXXS};padding:0 ${spacingHorizontalSNudge}}:host([control-size='small']) ::slotted([slot='start']),:host([control-size='small']) ::slotted([slot='end']){font-size:${fontSizeBase400}}:host([control-size='large']) .control{font-size:${fontSizeBase400};font-weight:${fontWeightRegular};line-height:${lineHeightBase400}}:host([control-size='large']) .root{height:40px;gap:${spacingHorizontalS};padding:0 ${spacingHorizontalM}}:host([control-size='large']) ::slotted([slot='start']),:host([control-size='large']) ::slotted([slot='end']){font-size:${fontSizeBase600}}:host([appearance='underline']) .root{background:${colorTransparentBackground};border:0;border-radius:0;border-bottom:${strokeWidthThin} solid ${colorNeutralStrokeAccessible}}:host([appearance='underline']:hover) .root{border-bottom-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='underline']:active) .root{border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline']:focus-within) .root{border:0;border-bottom-color:${colorNeutralStrokeAccessiblePressed}}:host([appearance='underline'][disabled]) .root{border-bottom-color:${colorNeutralStrokeDisabled}}:host([appearance='filled-lighter']) .root,:host([appearance='filled-darker']) .root{border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow2}}:host([appearance='filled-lighter']) .root{background:${colorNeutralBackground1}}:host([appearance='filled-darker']) .root{background:${colorNeutralBackground3}}:host([appearance='filled-lighter']:hover) .root,:host([appearance='filled-darker']:hover) .root{border-color:${colorTransparentStrokeInteractive}}:host([appearance='filled-lighter']:active) .root,:host([appearance='filled-darker']:active) .root{border-color:${colorTransparentStrokeInteractive};background:${colorNeutralBackground3}}`;
13923
13917
 
13924
13918
  function textInputTemplate(options = {}) {
13925
- return html`<template @beforeinput=${(x, c) => x.beforeinputHandler(c.event)} @focusin=${(x, c) => x.focusinHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)}><label part=label for=control class=label ${ref("controlLabel")}><slot ${slotted("defaultSlottedNodes")}></slot></label><div class=root part=root>${startSlotTemplate(options)} <input class=control part=control id=control @change=${(x, c) => x.changeHandler(c.event)} @input=${(x, c) => x.inputHandler(c.event)} ?autofocus=${(x) => x.autofocus} autocomplete=${(x) => x.autocomplete} ?disabled=${(x) => x.disabled} list=${(x) => x.list} maxlength=${(x) => x.maxlength} minlength=${(x) => x.minlength} ?multiple=${(x) => x.multiple} name=${(x) => x.name} pattern=${(x) => x.pattern} placeholder=${(x) => x.placeholder} ?readonly=${(x) => x.readOnly} ?required=${(x) => x.required} size=${(x) => x.size} spellcheck=${(x) => x.spellcheck} type=${(x) => x.type} value=${(x) => x.initialValue} ${ref("control")}> ${endSlotTemplate(options)}</div></template>`;
13919
+ return html`<template @focusin=${(x, c) => x.focusinHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)}><label part=label for=control class=label ${ref("controlLabel")}><slot ${slotted("defaultSlottedNodes")}></slot></label><div class=root part=root>${startSlotTemplate(options)} <input class=control part=control id=control @change=${(x, c) => x.changeHandler(c.event)} @input=${(x, c) => x.inputHandler(c.event)} ?autofocus=${(x) => x.autofocus} autocomplete=${(x) => x.autocomplete} ?disabled=${(x) => x.disabled} list=${(x) => x.list} maxlength=${(x) => x.maxlength} minlength=${(x) => x.minlength} ?multiple=${(x) => x.multiple} name=${(x) => x.name} pattern=${(x) => x.pattern} placeholder=${(x) => x.placeholder} ?readonly=${(x) => x.readOnly} ?required=${(x) => x.required} size=${(x) => x.size} spellcheck=${(x) => x.spellcheck} type=${(x) => x.type} value=${(x) => x.value} ${ref("control")}> ${endSlotTemplate(options)}</div></template>`;
13926
13920
  }
13927
13921
  const template$5 = textInputTemplate();
13928
13922
 
@@ -14090,9 +14084,8 @@ class ToggleButton extends Button {
14090
14084
  * @internal
14091
14085
  */
14092
14086
  setPressedState() {
14093
- if (this.$fastController.isConnected) {
14094
- const ariaPressed = `${this.mixed ? "mixed" : !!this.pressed}`;
14095
- this.elementInternals.ariaPressed = ariaPressed;
14087
+ if (this.elementInternals) {
14088
+ this.elementInternals.ariaPressed = `${this.mixed ? "mixed" : !!this.pressed}`;
14096
14089
  toggleState(this.elementInternals, "pressed", !!this.pressed || !!this.mixed);
14097
14090
  }
14098
14091
  }
@@ -14104,7 +14097,7 @@ __decorateClass$5([
14104
14097
  attr({ mode: "boolean" })
14105
14098
  ], ToggleButton.prototype, "mixed", 2);
14106
14099
 
14107
- const styles$3 = css`${styles$C} :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}[appearance='primary']:not(:focus-visible)){border-color:transparent}:host(${pressedState}[appearance='primary']){background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}[appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}[appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}[appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}[appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}[appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}[appearance='outline']),:host(${pressedState}[appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}[appearance='outline']:hover),:host(${pressedState}[appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}[appearance='outline']:active),:host(${pressedState}[appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}[appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}[appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}[appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}@media (forced-colors:active){:host(${pressedState}),:host( ${pressedState}:is([appearance='primary'],[appearance='subtle'],[appearance='outline'],[appearance='transparent']) ){background:SelectedItem;color:SelectedItemText}}`;
14100
+ const styles$3 = css`${styles$D} :host(${pressedState}){border-color:${colorNeutralStroke1};background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground1};border-width:${strokeWidthThin}}:host(${pressedState}:hover){border-color:${colorNeutralStroke1Hover};background-color:${colorNeutralBackground1Hover}}:host(${pressedState}:active){border-color:${colorNeutralStroke1Pressed};background-color:${colorNeutralBackground1Pressed}}:host(${pressedState}[appearance='primary']:not(:focus-visible)){border-color:transparent}:host(${pressedState}[appearance='primary']){background-color:${colorBrandBackgroundSelected};color:${colorNeutralForegroundOnBrand}}:host(${pressedState}[appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host(${pressedState}[appearance='primary']:active){background-color:${colorBrandBackgroundPressed}}:host(${pressedState}[appearance='subtle']){border-color:transparent;background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host(${pressedState}[appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}:host(${pressedState}[appearance='subtle']:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}:host(${pressedState}[appearance='outline']),:host(${pressedState}[appearance='transparent']){background-color:${colorTransparentBackgroundSelected}}:host(${pressedState}[appearance='outline']:hover),:host(${pressedState}[appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover}}:host(${pressedState}[appearance='outline']:active),:host(${pressedState}[appearance='transparent']:active){background-color:${colorTransparentBackgroundPressed}}:host(${pressedState}[appearance='transparent']){border-color:transparent;color:${colorNeutralForeground2BrandSelected}}:host(${pressedState}[appearance='transparent']:hover){color:${colorNeutralForeground2BrandHover}}:host(${pressedState}[appearance='transparent']:active){color:${colorNeutralForeground2BrandPressed}}@media (forced-colors:active){:host(${pressedState}),:host( ${pressedState}:is([appearance='primary'],[appearance='subtle'],[appearance='outline'],[appearance='transparent']) ){background:SelectedItem;color:SelectedItemText}}`;
14108
14101
 
14109
14102
  const template$3 = buttonTemplate$1();
14110
14103
 
@@ -14177,6 +14170,11 @@ class Tooltip extends FASTElement {
14177
14170
  * Hide the tooltip on blur
14178
14171
  */
14179
14172
  this.blurAnchorHandler = () => this.hideTooltip(0);
14173
+ /**
14174
+ * Indicates whether the tooltip styles have been applied for browsers that do not support anchor positioning.
14175
+ * @internal
14176
+ */
14177
+ this.anchorPositioningReady = false;
14180
14178
  this.elementInternals.role = "tooltip";
14181
14179
  }
14182
14180
  /**
@@ -14185,9 +14183,7 @@ class Tooltip extends FASTElement {
14185
14183
  * @internal
14186
14184
  */
14187
14185
  positioningChanged() {
14188
- if (!AnchorPositioningCSSSupported) {
14189
- this.setFallbackStyles();
14190
- }
14186
+ this.setFallbackStyles();
14191
14187
  }
14192
14188
  /**
14193
14189
  * Reference to the anchor element
@@ -14199,6 +14195,7 @@ class Tooltip extends FASTElement {
14199
14195
  }
14200
14196
  connectedCallback() {
14201
14197
  super.connectedCallback();
14198
+ this.popover ?? (this.popover = "auto");
14202
14199
  if (!this.anchorElement) {
14203
14200
  return;
14204
14201
  }
@@ -14219,11 +14216,20 @@ class Tooltip extends FASTElement {
14219
14216
  Updates.enqueue(() => this.setFallbackStyles());
14220
14217
  }
14221
14218
  disconnectedCallback() {
14222
- super.disconnectedCallback();
14223
14219
  this.anchorElement?.removeEventListener("focus", this.focusAnchorHandler);
14224
14220
  this.anchorElement?.removeEventListener("blur", this.blurAnchorHandler);
14225
14221
  this.anchorElement?.removeEventListener("mouseenter", this.mouseenterAnchorHandler);
14226
14222
  this.anchorElement?.removeEventListener("mouseleave", this.mouseleaveAnchorHandler);
14223
+ if (this.anchorElement) {
14224
+ const describedBy = this.anchorElement.getAttribute("aria-describedby") ?? "";
14225
+ const ids = describedBy.trim().split(/\s+/).filter((id) => id !== this.id);
14226
+ if (ids.length) {
14227
+ this.anchorElement.setAttribute("aria-describedby", ids.join(" "));
14228
+ } else {
14229
+ this.anchorElement.removeAttribute("aria-describedby");
14230
+ }
14231
+ }
14232
+ super.disconnectedCallback();
14227
14233
  }
14228
14234
  /**
14229
14235
  * Shows the tooltip
@@ -14231,6 +14237,12 @@ class Tooltip extends FASTElement {
14231
14237
  * @internal
14232
14238
  */
14233
14239
  showTooltip(delay = this.defaultDelay) {
14240
+ if (!this.anchorPositioningReady) {
14241
+ this.setFallbackStyles().then(() => {
14242
+ this.showTooltip(delay);
14243
+ });
14244
+ return;
14245
+ }
14234
14246
  setTimeout(() => {
14235
14247
  this.setAttribute("aria-hidden", "false");
14236
14248
  this.showPopover();
@@ -14251,7 +14263,15 @@ class Tooltip extends FASTElement {
14251
14263
  this.hidePopover();
14252
14264
  }, delay);
14253
14265
  }
14254
- setFallbackStyles() {
14266
+ /**
14267
+ * Sets fallback styles for the tooltip for browsers that do not support CSS anchor positioning.
14268
+ * @internal
14269
+ */
14270
+ async setFallbackStyles() {
14271
+ if (AnchorPositioningCSSSupported) {
14272
+ this.anchorPositioningReady = true;
14273
+ return;
14274
+ }
14255
14275
  if (!this.anchorElement) {
14256
14276
  return;
14257
14277
  }
@@ -14299,7 +14319,8 @@ class Tooltip extends FASTElement {
14299
14319
  }
14300
14320
  `;
14301
14321
  if (window.CSS_ANCHOR_POLYFILL) {
14302
- window.CSS_ANCHOR_POLYFILL.call({ element: this.anchorPositioningStyleElement });
14322
+ await window.CSS_ANCHOR_POLYFILL({ elements: [this.anchorPositioningStyleElement] });
14323
+ this.anchorPositioningReady = true;
14303
14324
  }
14304
14325
  }
14305
14326
  }
@@ -14580,7 +14601,7 @@ __decorateClass$2([
14580
14601
 
14581
14602
  const styles$1 = css`${display("block")} :host{outline:none}`;
14582
14603
 
14583
- const template$1 = html`<template focusgroup="menu inline block nowrap nomemory" @click=${(x, c) => x.clickHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)} @change=${(x, c) => x.changeHandler(c.event)} @toggle=${(x, c) => x.itemToggleHandler()}><slot ${ref("defaultSlot")} @slotchange=${(x) => x.handleDefaultSlotChange()}></slot></template>`;
14604
+ const template$1 = html`<template tabindex=0 focusgroup="menu inline block nowrap nomemory" @click=${(x, c) => x.clickHandler(c.event)} @keydown=${(x, c) => x.keydownHandler(c.event)} @change=${(x, c) => x.changeHandler(c.event)} @toggle=${(x, c) => x.itemToggleHandler()}><slot ${ref("defaultSlot")} @slotchange=${(x) => x.handleDefaultSlotChange()}></slot></template>`;
14584
14605
 
14585
14606
  const definition$1 = Tree.compose({
14586
14607
  name: tagName$1,
@@ -14623,6 +14644,13 @@ class BaseTreeItem extends FASTElement {
14623
14644
  itemSlotChanged() {
14624
14645
  this.handleItemSlotChange();
14625
14646
  }
14647
+ connectedCallback() {
14648
+ super.connectedCallback();
14649
+ this.tabIndex = Number(this.getAttribute("tabindex") || "0");
14650
+ if (isTreeItem(this.parentElement)) {
14651
+ this.slot || (this.slot = "item");
14652
+ }
14653
+ }
14626
14654
  /**
14627
14655
  * Handles changes to the expanded attribute
14628
14656
  * @param prev - the previous state
@@ -14636,7 +14664,7 @@ class BaseTreeItem extends FASTElement {
14636
14664
  newState: next ? "open" : "closed"
14637
14665
  });
14638
14666
  toggleState(this.elementInternals, "expanded", next);
14639
- if (this.childTreeItems && this.childTreeItems.length > 0) {
14667
+ if (this.childTreeItems?.length) {
14640
14668
  this.elementInternals.ariaExpanded = next ? "true" : "false";
14641
14669
  requestAnimationFrame(() => {
14642
14670
  const walker = document.createTreeWalker(
@@ -14667,8 +14695,10 @@ class BaseTreeItem extends FASTElement {
14667
14695
  */
14668
14696
  selectedChanged(prev, next) {
14669
14697
  this.$emit("change");
14670
- toggleState(this.elementInternals, "selected", next);
14671
- this.elementInternals.ariaSelected = next ? "true" : "false";
14698
+ if (this.elementInternals) {
14699
+ toggleState(this.elementInternals, "selected", next);
14700
+ this.elementInternals.ariaSelected = next ? "true" : "false";
14701
+ }
14672
14702
  }
14673
14703
  dataIndentChanged(prev, next) {
14674
14704
  if (this.styles !== void 0) {
@@ -14830,7 +14860,7 @@ __decorateClass([
14830
14860
  const styles = css`${display("block")} :host{outline:none;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host(:focus-visible) .positioning-region{box-shadow:${spacingVerticalNone} ${spacingVerticalNone} ${spacingVerticalNone} ${spacingVerticalXXS} ${colorStrokeFocus2} inset}.positioning-region{display:flex;align-items:center;justify-content:space-between;cursor:pointer;height:${spacingVerticalXXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalXXL});padding-inline-end:${spacingVerticalS};border-radius:${borderRadiusMedium};background-color:${colorSubtleBackground};color:${colorNeutralForeground2};gap:${spacingHorizontalXS}}@media (prefers-contrast:more){:host(:focus-visible) .positioning-region{outline:1px solid ${colorStrokeFocus2}}}.content{display:flex;align-items:center;gap:${spacingHorizontalXS}}.chevron{display:flex;align-items:center;flex-shrink:0;justify-content:center;width:${spacingHorizontalXXL};height:${spacingVerticalXXL};transition:transform ${durationFaster} ${curveEasyEaseMax};transform:rotate(0deg)}.chevron:dir(rtl){transform:rotate(180deg)}.chevron svg{inline-size:12px;block-size:12px}.aside{display:flex;align-items:center}.positioning-region:hover{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}.positioning-region:active{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}::slotted([slot='start']),::slotted([slot='end']),::slotted(:not([slot])){display:flex;align-items:center;min-width:0}::slotted([slot='start']){flex-shrink:0}::slotted(:not([slot])){padding-inline:${spacingHorizontalXXS}}.items{display:none}:host([expanded]) .items{display:block}:host([empty]) .chevron,:host([empty]) .items{visibility:hidden}:host([selected]) .positioning-region{background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([selected]) .content,:host([selected]) .chevron{color:${colorNeutralForeground3Selected}}:host([size='small']) .positioning-region{height:${spacingVerticalXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalM})}:host([appearance='subtle-alpha']) .positioning-region:hover{background-color:${colorSubtleBackgroundLightAlphaHover}}:host([appearance='subtle-alpha']) .positioning-region:active{background-color:${colorSubtleBackgroundLightAlphaPressed}}:host([appearance='subtle-alpha'][selected]) .positioning-region{background-color:${colorSubtleBackgroundLightAlphaSelected};color:${colorNeutralForeground2Selected}}:host([appearance='transparent']) .positioning-region{background-color:${colorTransparentBackground}}:host([appearance='transparent']) .positioning-region:hover{background-color:${colorTransparentBackgroundHover}}:host([appearance='transparent']) .positioning-region:active{background-color:${colorTransparentBackgroundPressed}}:host([appearance='transparent'][selected]) .positioning-region{background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([expanded]) .chevron{transform:rotate(90deg)}`;
14831
14861
 
14832
14862
  const chevronIcon = html`<svg viewBox="0 0 12 12" fill=currentColor><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`;
14833
- const template = html`<template slot=${(x) => x.isNestedItem ? "item" : void 0} tabindex=0 ?focusgroupstart=${(x) => x.selected}><div class=positioning-region part=positioning-region><div class=content part=content><span class=chevron part=chevron aria-hidden=true><slot name=chevron>${chevronIcon}</slot></span><slot name=start></slot><slot></slot><slot name=end></slot></div><div class=aside part=aside><slot name=aside></slot></div></div><div role=group class=items part=items><slot name=item ${ref("itemSlot")} @slotchange=${(x) => x.handleItemSlotChange()}></slot></div></template>`;
14863
+ const template = html`<template tabindex=0 ?focusgroupstart=${(x) => x.selected}><div class=positioning-region part=positioning-region><div class=content part=content><span class=chevron part=chevron aria-hidden=true><slot name=chevron>${chevronIcon}</slot></span><slot name=start></slot><slot></slot><slot name=end></slot></div><div class=aside part=aside><slot name=aside></slot></div></div><div role=group class=items part=items><slot name=item ${ref("itemSlot")} @slotchange=${(x) => x.handleItemSlotChange()}></slot></div></template>`;
14834
14864
 
14835
14865
  const definition = TreeItem.compose({
14836
14866
  name: tagName,
@@ -14971,4 +15001,4 @@ function forceRepaint(element) {
14971
15001
 
14972
15002
  globalThis.Fluent = { ...globalThis.Fluent, setTheme };
14973
15003
 
14974
- export { Accordion, AccordionExpandMode, AccordionItem, AccordionItemMarkerPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$D as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$D as AnchorButtonTemplate, AnchorTarget, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$C as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$A as AvatarStyles, template$C as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$B as BadgeDefinition, BadgeShape, BadgeSize, styles$z as BadgeStyles, template$B as BadgeTemplate, BaseAccordionItem, BaseAnchor, BaseAvatar, BaseButton, BaseCheckbox, BaseCounterBadge, BaseDivider, BaseDropdown, BaseField, BaseMenuList, BaseProgressBar, BaseRadioGroup, BaseRatingDisplay, BaseSpinner, BaseTablist, BaseTextArea, BaseTextInput, BaseTree, Button, ButtonAppearance, definition$A as ButtonDefinition, ButtonFormTarget, ButtonShape, ButtonSize, styles$C as ButtonStyles, template$A as ButtonTemplate, ButtonType, Checkbox, definition$z as CheckboxDefinition, CheckboxShape, CheckboxSize, styles$y as CheckboxStyles, template$z as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$y as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$x as CompoundButtonStyles, template$y as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$x as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$w as CounterBadgeStyles, tagName$x as CounterBadgeTagName, template$x as CounterBadgeTemplate, Dialog, DialogBody, definition$v as DialogBodyDefinition, styles$u as DialogBodyStyles, template$v as DialogBodyTemplate, definition$w as DialogDefinition, styles$v as DialogStyles, template$w as DialogTemplate, DialogType, Direction, Divider, DividerAlignContent, DividerAppearance, definition$u as DividerDefinition, DividerOrientation, DividerRole, styles$t as DividerStyles, template$u as DividerTemplate, Drawer, DrawerBody, definition$s as DrawerBodyDefinition, styles$r as DrawerBodyStyles, template$s as DrawerBodyTemplate, definition$t as DrawerDefinition, DrawerPosition, DrawerSize, styles$s as DrawerStyles, template$t as DrawerTemplate, DrawerType, Dropdown, DropdownAppearance, definition$r as DropdownDefinition, DropdownOption, definition$g as DropdownOptionDefinition, styles$g as DropdownOptionStyles, template$g as DropdownOptionTemplate, DropdownSize, styles$q as DropdownStyles, template$r as DropdownTemplate, DropdownType, Field, definition$q as FieldDefinition, LabelPosition as FieldLabelPosition, styles$p as FieldStyles, template$q as FieldTemplate, FluentDesignSystem, Image, definition$p as ImageDefinition, ImageFit, ImageShape, styles$o as ImageStyles, template$p as ImageTemplate, Label, definition$o as LabelDefinition, LabelSize, styles$n as LabelStyles, template$o as LabelTemplate, LabelWeight, Link, LinkAppearance, definition$n as LinkDefinition, styles$m as LinkStyles, LinkTarget, template$n as LinkTemplate, Listbox, definition$m as ListboxDefinition, styles$l as ListboxStyles, template$m as ListboxTemplate, Menu, MenuButton, MenuButtonAppearance, definition$l as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$C as MenuButtonStyles, template$l as MenuButtonTemplate, definition$i as MenuDefinition, MenuItem, definition$k as MenuItemDefinition, MenuItemRole, styles$k as MenuItemStyles, template$k as MenuItemTemplate, MenuList, definition$j as MenuListDefinition, styles$j as MenuListStyles, template$j as MenuListTemplate, styles$i as MenuStyles, template$i as MenuTemplate, MessageBar, definition$h as MessageBarDefinition, MessageBarIntent, MessageBarLayout, MessageBarShape, styles$h as MessageBarStyles, template$h as MessageBarTemplate, Orientation, ProgressBar, definition$f as ProgressBarDefinition, ProgressBarShape, styles$f as ProgressBarStyles, template$f as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$d as RadioDefinition, RadioGroup, definition$e as RadioGroupDefinition, RadioGroupOrientation, styles$e as RadioGroupStyles, template$e as RadioGroupTemplate, styles$d as RadioStyles, template$d as RadioTemplate, RatingDisplay, RatingDisplayColor, definition$c as RatingDisplayDefinition, RatingDisplaySize, styles$c as RatingDisplayStyles, template$c as RatingDisplayTemplate, Slider, definition$b as SliderDefinition, SliderMode, SliderOrientation, SliderSize, styles$b as SliderStyles, template$b as SliderTemplate, Spinner, SpinnerAppearance, definition$a as SpinnerDefinition, SpinnerSize, styles$a as SpinnerStyles, template$a as SpinnerTemplate, StartEnd, Switch, definition$9 as SwitchDefinition, SwitchLabelPosition, styles$9 as SwitchStyles, template$9 as SwitchTemplate, Tab, definition$8 as TabDefinition, styles$8 as TabStyles, template$8 as TabTemplate, Tablist, TablistAppearance, definition$7 as TablistDefinition, TablistOrientation, TablistSize, styles$7 as TablistStyles, template$7 as TablistTemplate, Text, TextAlign, TextArea, TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, definition$6 as TextAreaDefinition, TextAreaResize, TextAreaSize, styles$6 as TextAreaStyles, template$6 as TextAreaTemplate, definition$4 as TextDefinition, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$5 as TextInputDefinition, styles$5 as TextInputStyles, template$5 as TextInputTemplate, TextInputType, TextSize, styles$4 as TextStyles, template$4 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition$3 as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles$3 as ToggleButtonStyles, template$3 as ToggleButtonTemplate, Tooltip, definition$2 as TooltipDefinition, TooltipPositioningOption, styles$2 as TooltipStyles, template$2 as TooltipTemplate, Tree, definition$1 as TreeDefinition, TreeItem, definition as TreeItemDefinition, styles as TreeItemStyles, template as TreeItemTemplate, styles$1 as TreeStyles, template$1 as TreeTemplate, ValidationFlags, definition$E as accordionDefinition, definition$F as accordionItemDefinition, styles$E as accordionItemStyles, template$F as accordionItemTemplate, styles$D as accordionStyles, template$E as accordionTemplate, borderRadius2XLarge, borderRadius3XLarge, borderRadius4XLarge, borderRadius5XLarge, borderRadius6XLarge, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackground2Hover, colorBrandBackground2Pressed, colorBrandBackground3Static, colorBrandBackground4Static, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForeground2Hover, colorBrandForeground2Pressed, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorBrandStroke2Contrast, colorBrandStroke2Hover, colorBrandStroke2Pressed, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackground7, colorNeutralBackground7Hover, colorNeutralBackground7Pressed, colorNeutralBackground7Selected, colorNeutralBackground8, colorNeutralBackgroundAlpha, colorNeutralBackgroundAlpha2, colorNeutralBackgroundDisabled, colorNeutralBackgroundDisabled2, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundInvertedHover, colorNeutralBackgroundInvertedPressed, colorNeutralBackgroundInvertedSelected, colorNeutralBackgroundStatic, colorNeutralCardBackground, colorNeutralCardBackgroundDisabled, colorNeutralCardBackgroundHover, colorNeutralCardBackgroundPressed, colorNeutralCardBackgroundSelected, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForeground5, colorNeutralForeground5Hover, colorNeutralForeground5Pressed, colorNeutralForeground5Selected, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStroke4, colorNeutralStroke4Hover, colorNeutralStroke4Pressed, colorNeutralStroke4Selected, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeAlpha, colorNeutralStrokeAlpha2, colorNeutralStrokeDisabled, colorNeutralStrokeDisabled2, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorNeutralStrokeSubtle, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStatusDangerBackground1, colorStatusDangerBackground2, colorStatusDangerBackground3, colorStatusDangerBackground3Hover, colorStatusDangerBackground3Pressed, colorStatusDangerBorder1, colorStatusDangerBorder2, colorStatusDangerBorderActive, colorStatusDangerForeground1, colorStatusDangerForeground2, colorStatusDangerForeground3, colorStatusDangerForegroundInverted, colorStatusSuccessBackground1, colorStatusSuccessBackground2, colorStatusSuccessBackground3, colorStatusSuccessBorder1, colorStatusSuccessBorder2, colorStatusSuccessBorderActive, colorStatusSuccessForeground1, colorStatusSuccessForeground2, colorStatusSuccessForeground3, colorStatusSuccessForegroundInverted, colorStatusWarningBackground1, colorStatusWarningBackground2, colorStatusWarningBackground3, colorStatusWarningBorder1, colorStatusWarningBorder2, colorStatusWarningBorderActive, colorStatusWarningForeground1, colorStatusWarningForeground2, colorStatusWarningForeground3, colorStatusWarningForegroundInverted, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, display, dropdownButtonTemplate, dropdownInputTemplate, durationFast, durationFaster, durationGentle, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, endSlotTemplate, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, getDirection, isDialog, isDropdown, isDropdownOption, isListbox, isTab, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, listboxTemplate, roleForMenuItem, setTheme, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, startSlotTemplate, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin, typographyBody1StrongStyles, typographyBody1StrongerStyles, typographyBody1Styles, typographyBody2Styles, typographyCaption1StrongStyles, typographyCaption1StrongerStyles, typographyCaption1Styles, typographyCaption2StrongStyles, typographyCaption2Styles, typographyDisplayStyles, typographyLargeTitleStyles, typographySubtitle1Styles, typographySubtitle2StrongerStyles, typographySubtitle2Styles, typographyTitle1Styles, typographyTitle2Styles, typographyTitle3Styles, zIndexBackground, zIndexContent, zIndexDebug, zIndexFloating, zIndexMessages, zIndexOverlay, zIndexPopup, zIndexPriority };
15004
+ export { Accordion, AccordionExpandMode, AccordionItem, AccordionItemMarkerPosition, AccordionItemSize, AnchorButton, AnchorButtonAppearance, definition$D as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, template$D as AnchorButtonTemplate, AnchorTarget, Avatar, AvatarActive, AvatarAppearance, AvatarColor, definition$C as AvatarDefinition, AvatarNamedColor, AvatarShape, AvatarSize, styles$B as AvatarStyles, template$C as AvatarTemplate, Badge, BadgeAppearance, BadgeColor, definition$B as BadgeDefinition, BadgeShape, BadgeSize, styles$A as BadgeStyles, template$B as BadgeTemplate, BaseAccordionItem, BaseAnchor, BaseAvatar, BaseButton, BaseCheckbox, BaseCounterBadge, BaseDivider, BaseDropdown, BaseField, BaseMenuList, BaseProgressBar, BaseRadioGroup, BaseRatingDisplay, BaseSpinner, BaseTablist, BaseTextArea, BaseTextInput, BaseTree, Button, ButtonAppearance, definition$A as ButtonDefinition, ButtonFormTarget, ButtonShape, ButtonSize, styles$D as ButtonStyles, template$A as ButtonTemplate, ButtonType, Checkbox, definition$z as CheckboxDefinition, CheckboxShape, CheckboxSize, styles$z as CheckboxStyles, template$z as CheckboxTemplate, CompoundButton, CompoundButtonAppearance, definition$y as CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, styles$y as CompoundButtonStyles, template$y as CompoundButtonTemplate, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, definition$x as CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, styles$x as CounterBadgeStyles, tagName$x as CounterBadgeTagName, template$x as CounterBadgeTemplate, Dialog, DialogBody, definition$v as DialogBodyDefinition, styles$v as DialogBodyStyles, template$v as DialogBodyTemplate, definition$w as DialogDefinition, styles$w as DialogStyles, template$w as DialogTemplate, DialogType, Direction, Divider, DividerAlignContent, DividerAppearance, definition$u as DividerDefinition, DividerOrientation, DividerRole, styles$u as DividerStyles, template$u as DividerTemplate, Drawer, DrawerBody, definition$s as DrawerBodyDefinition, styles$s as DrawerBodyStyles, template$s as DrawerBodyTemplate, definition$t as DrawerDefinition, DrawerPosition, DrawerSize, styles$t as DrawerStyles, template$t as DrawerTemplate, DrawerType, Dropdown, DropdownAppearance, definition$r as DropdownDefinition, DropdownOption, definition$g as DropdownOptionDefinition, styles$g as DropdownOptionStyles, template$g as DropdownOptionTemplate, DropdownSize, styles$r as DropdownStyles, template$r as DropdownTemplate, DropdownType, Field, definition$q as FieldDefinition, LabelPosition as FieldLabelPosition, styles$q as FieldStyles, template$q as FieldTemplate, FluentDesignSystem, Image, definition$p as ImageDefinition, ImageFit, ImageShape, styles$p as ImageStyles, template$p as ImageTemplate, Label, definition$o as LabelDefinition, LabelSize, styles$o as LabelStyles, template$o as LabelTemplate, LabelWeight, Link, LinkAppearance, definition$n as LinkDefinition, styles$n as LinkStyles, LinkTarget, template$n as LinkTemplate, Listbox, definition$m as ListboxDefinition, styles$m as ListboxStyles, template$m as ListboxTemplate, Menu, MenuButton, MenuButtonAppearance, definition$l as MenuButtonDefinition, MenuButtonShape, MenuButtonSize, styles$D as MenuButtonStyles, template$l as MenuButtonTemplate, definition$i as MenuDefinition, MenuItem, definition$k as MenuItemDefinition, MenuItemRole, styles$k as MenuItemStyles, template$k as MenuItemTemplate, MenuList, definition$j as MenuListDefinition, styles$j as MenuListStyles, template$j as MenuListTemplate, styles$i as MenuStyles, template$i as MenuTemplate, MessageBar, definition$h as MessageBarDefinition, MessageBarIntent, MessageBarLayout, MessageBarShape, styles$h as MessageBarStyles, template$h as MessageBarTemplate, Orientation, ProgressBar, definition$f as ProgressBarDefinition, ProgressBarShape, styles$f as ProgressBarStyles, template$f as ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, Radio, definition$d as RadioDefinition, RadioGroup, definition$e as RadioGroupDefinition, RadioGroupOrientation, styles$e as RadioGroupStyles, template$e as RadioGroupTemplate, styles$d as RadioStyles, template$d as RadioTemplate, RatingDisplay, RatingDisplayColor, definition$c as RatingDisplayDefinition, RatingDisplaySize, styles$c as RatingDisplayStyles, template$c as RatingDisplayTemplate, Slider, definition$b as SliderDefinition, SliderMode, SliderOrientation, SliderSize, styles$b as SliderStyles, template$b as SliderTemplate, Spinner, SpinnerAppearance, definition$a as SpinnerDefinition, SpinnerSize, styles$a as SpinnerStyles, template$a as SpinnerTemplate, StartEnd, Switch, definition$9 as SwitchDefinition, SwitchLabelPosition, styles$9 as SwitchStyles, template$9 as SwitchTemplate, Tab, definition$8 as TabDefinition, styles$8 as TabStyles, template$8 as TabTemplate, Tablist, TablistAppearance, definition$7 as TablistDefinition, TablistOrientation, TablistSize, styles$7 as TablistStyles, template$7 as TablistTemplate, Text, TextAlign, TextArea, TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, definition$6 as TextAreaDefinition, TextAreaResize, TextAreaSize, styles$6 as TextAreaStyles, template$6 as TextAreaTemplate, definition$4 as TextDefinition, TextFont, TextInput, TextInputAppearance, TextInputControlSize, definition$5 as TextInputDefinition, styles$5 as TextInputStyles, template$5 as TextInputTemplate, TextInputType, TextSize, styles$4 as TextStyles, template$4 as TextTemplate, TextWeight, ToggleButton, ToggleButtonAppearance, definition$3 as ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, styles$3 as ToggleButtonStyles, template$3 as ToggleButtonTemplate, Tooltip, definition$2 as TooltipDefinition, TooltipPositioningOption, styles$2 as TooltipStyles, template$2 as TooltipTemplate, Tree, definition$1 as TreeDefinition, TreeItem, definition as TreeItemDefinition, styles as TreeItemStyles, template as TreeItemTemplate, styles$1 as TreeStyles, template$1 as TreeTemplate, ValidationFlags, definition$E as accordionDefinition, definition$F as accordionItemDefinition, styles$F as accordionItemStyles, template$F as accordionItemTemplate, styles$E as accordionStyles, template$E as accordionTemplate, borderRadius2XLarge, borderRadius3XLarge, borderRadius4XLarge, borderRadius5XLarge, borderRadius6XLarge, borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, borderRadiusXLarge, colorBackgroundOverlay, colorBrandBackground, colorBrandBackground2, colorBrandBackground2Hover, colorBrandBackground2Pressed, colorBrandBackground3Static, colorBrandBackground4Static, colorBrandBackgroundHover, colorBrandBackgroundInverted, colorBrandBackgroundInvertedHover, colorBrandBackgroundInvertedPressed, colorBrandBackgroundInvertedSelected, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorBrandBackgroundStatic, colorBrandForeground1, colorBrandForeground2, colorBrandForeground2Hover, colorBrandForeground2Pressed, colorBrandForegroundInverted, colorBrandForegroundInvertedHover, colorBrandForegroundInvertedPressed, colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorBrandForegroundLinkSelected, colorBrandForegroundOnLight, colorBrandForegroundOnLightHover, colorBrandForegroundOnLightPressed, colorBrandForegroundOnLightSelected, colorBrandShadowAmbient, colorBrandShadowKey, colorBrandStroke1, colorBrandStroke2, colorBrandStroke2Contrast, colorBrandStroke2Hover, colorBrandStroke2Pressed, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralBackground2, colorNeutralBackground2Hover, colorNeutralBackground2Pressed, colorNeutralBackground2Selected, colorNeutralBackground3, colorNeutralBackground3Hover, colorNeutralBackground3Pressed, colorNeutralBackground3Selected, colorNeutralBackground4, colorNeutralBackground4Hover, colorNeutralBackground4Pressed, colorNeutralBackground4Selected, colorNeutralBackground5, colorNeutralBackground5Hover, colorNeutralBackground5Pressed, colorNeutralBackground5Selected, colorNeutralBackground6, colorNeutralBackground7, colorNeutralBackground7Hover, colorNeutralBackground7Pressed, colorNeutralBackground7Selected, colorNeutralBackground8, colorNeutralBackgroundAlpha, colorNeutralBackgroundAlpha2, colorNeutralBackgroundDisabled, colorNeutralBackgroundDisabled2, colorNeutralBackgroundInverted, colorNeutralBackgroundInvertedDisabled, colorNeutralBackgroundInvertedHover, colorNeutralBackgroundInvertedPressed, colorNeutralBackgroundInvertedSelected, colorNeutralBackgroundStatic, colorNeutralCardBackground, colorNeutralCardBackgroundDisabled, colorNeutralCardBackgroundHover, colorNeutralCardBackgroundPressed, colorNeutralCardBackgroundSelected, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground1Selected, colorNeutralForeground1Static, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorNeutralForeground2LinkSelected, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3BrandHover, colorNeutralForeground3BrandPressed, colorNeutralForeground3BrandSelected, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorNeutralForeground4, colorNeutralForeground5, colorNeutralForeground5Hover, colorNeutralForeground5Pressed, colorNeutralForeground5Selected, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInverted2, colorNeutralForegroundInvertedDisabled, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedLink, colorNeutralForegroundInvertedLinkHover, colorNeutralForegroundInvertedLinkPressed, colorNeutralForegroundInvertedLinkSelected, colorNeutralForegroundInvertedPressed, colorNeutralForegroundInvertedSelected, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralShadowAmbient, colorNeutralShadowAmbientDarker, colorNeutralShadowAmbientLighter, colorNeutralShadowKey, colorNeutralShadowKeyDarker, colorNeutralShadowKeyLighter, colorNeutralStencil1, colorNeutralStencil1Alpha, colorNeutralStencil2, colorNeutralStencil2Alpha, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStroke1Selected, colorNeutralStroke2, colorNeutralStroke3, colorNeutralStroke4, colorNeutralStroke4Hover, colorNeutralStroke4Pressed, colorNeutralStroke4Selected, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeAccessibleSelected, colorNeutralStrokeAlpha, colorNeutralStrokeAlpha2, colorNeutralStrokeDisabled, colorNeutralStrokeDisabled2, colorNeutralStrokeInvertedDisabled, colorNeutralStrokeOnBrand, colorNeutralStrokeOnBrand2, colorNeutralStrokeOnBrand2Hover, colorNeutralStrokeOnBrand2Pressed, colorNeutralStrokeOnBrand2Selected, colorNeutralStrokeSubtle, colorPaletteAnchorBackground2, colorPaletteAnchorBorderActive, colorPaletteAnchorForeground2, colorPaletteBeigeBackground2, colorPaletteBeigeBorderActive, colorPaletteBeigeForeground2, colorPaletteBerryBackground1, colorPaletteBerryBackground2, colorPaletteBerryBackground3, colorPaletteBerryBorder1, colorPaletteBerryBorder2, colorPaletteBerryBorderActive, colorPaletteBerryForeground1, colorPaletteBerryForeground2, colorPaletteBerryForeground3, colorPaletteBlueBackground2, colorPaletteBlueBorderActive, colorPaletteBlueForeground2, colorPaletteBrassBackground2, colorPaletteBrassBorderActive, colorPaletteBrassForeground2, colorPaletteBrownBackground2, colorPaletteBrownBorderActive, colorPaletteBrownForeground2, colorPaletteCornflowerBackground2, colorPaletteCornflowerBorderActive, colorPaletteCornflowerForeground2, colorPaletteCranberryBackground2, colorPaletteCranberryBorderActive, colorPaletteCranberryForeground2, colorPaletteDarkGreenBackground2, colorPaletteDarkGreenBorderActive, colorPaletteDarkGreenForeground2, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeBorder2, colorPaletteDarkOrangeBorderActive, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground2, colorPaletteDarkOrangeForeground3, colorPaletteDarkRedBackground2, colorPaletteDarkRedBorderActive, colorPaletteDarkRedForeground2, colorPaletteForestBackground2, colorPaletteForestBorderActive, colorPaletteForestForeground2, colorPaletteGoldBackground2, colorPaletteGoldBorderActive, colorPaletteGoldForeground2, colorPaletteGrapeBackground2, colorPaletteGrapeBorderActive, colorPaletteGrapeForeground2, colorPaletteGreenBackground1, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteGreenBorder1, colorPaletteGreenBorder2, colorPaletteGreenBorderActive, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteGreenForegroundInverted, colorPaletteLavenderBackground2, colorPaletteLavenderBorderActive, colorPaletteLavenderForeground2, colorPaletteLightGreenBackground1, colorPaletteLightGreenBackground2, colorPaletteLightGreenBackground3, colorPaletteLightGreenBorder1, colorPaletteLightGreenBorder2, colorPaletteLightGreenBorderActive, colorPaletteLightGreenForeground1, colorPaletteLightGreenForeground2, colorPaletteLightGreenForeground3, colorPaletteLightTealBackground2, colorPaletteLightTealBorderActive, colorPaletteLightTealForeground2, colorPaletteLilacBackground2, colorPaletteLilacBorderActive, colorPaletteLilacForeground2, colorPaletteMagentaBackground2, colorPaletteMagentaBorderActive, colorPaletteMagentaForeground2, colorPaletteMarigoldBackground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, colorPaletteMarigoldBorder1, colorPaletteMarigoldBorder2, colorPaletteMarigoldBorderActive, colorPaletteMarigoldForeground1, colorPaletteMarigoldForeground2, colorPaletteMarigoldForeground3, colorPaletteMinkBackground2, colorPaletteMinkBorderActive, colorPaletteMinkForeground2, colorPaletteNavyBackground2, colorPaletteNavyBorderActive, colorPaletteNavyForeground2, colorPalettePeachBackground2, colorPalettePeachBorderActive, colorPalettePeachForeground2, colorPalettePinkBackground2, colorPalettePinkBorderActive, colorPalettePinkForeground2, colorPalettePlatinumBackground2, colorPalettePlatinumBorderActive, colorPalettePlatinumForeground2, colorPalettePlumBackground2, colorPalettePlumBorderActive, colorPalettePlumForeground2, colorPalettePumpkinBackground2, colorPalettePumpkinBorderActive, colorPalettePumpkinForeground2, colorPalettePurpleBackground2, colorPalettePurpleBorderActive, colorPalettePurpleForeground2, colorPaletteRedBackground1, colorPaletteRedBackground2, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedBorder2, colorPaletteRedBorderActive, colorPaletteRedForeground1, colorPaletteRedForeground2, colorPaletteRedForeground3, colorPaletteRedForegroundInverted, colorPaletteRoyalBlueBackground2, colorPaletteRoyalBlueBorderActive, colorPaletteRoyalBlueForeground2, colorPaletteSeafoamBackground2, colorPaletteSeafoamBorderActive, colorPaletteSeafoamForeground2, colorPaletteSteelBackground2, colorPaletteSteelBorderActive, colorPaletteSteelForeground2, colorPaletteTealBackground2, colorPaletteTealBorderActive, colorPaletteTealForeground2, colorPaletteYellowBackground1, colorPaletteYellowBackground2, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowBorder2, colorPaletteYellowBorderActive, colorPaletteYellowForeground1, colorPaletteYellowForeground2, colorPaletteYellowForeground3, colorPaletteYellowForegroundInverted, colorScrollbarOverlay, colorStatusDangerBackground1, colorStatusDangerBackground2, colorStatusDangerBackground3, colorStatusDangerBackground3Hover, colorStatusDangerBackground3Pressed, colorStatusDangerBorder1, colorStatusDangerBorder2, colorStatusDangerBorderActive, colorStatusDangerForeground1, colorStatusDangerForeground2, colorStatusDangerForeground3, colorStatusDangerForegroundInverted, colorStatusSuccessBackground1, colorStatusSuccessBackground2, colorStatusSuccessBackground3, colorStatusSuccessBorder1, colorStatusSuccessBorder2, colorStatusSuccessBorderActive, colorStatusSuccessForeground1, colorStatusSuccessForeground2, colorStatusSuccessForeground3, colorStatusSuccessForegroundInverted, colorStatusWarningBackground1, colorStatusWarningBackground2, colorStatusWarningBackground3, colorStatusWarningBorder1, colorStatusWarningBorder2, colorStatusWarningBorderActive, colorStatusWarningForeground1, colorStatusWarningForeground2, colorStatusWarningForeground3, colorStatusWarningForegroundInverted, colorStrokeFocus1, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundInverted, colorSubtleBackgroundInvertedHover, colorSubtleBackgroundInvertedPressed, colorSubtleBackgroundInvertedSelected, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, colorTransparentStroke, colorTransparentStrokeDisabled, colorTransparentStrokeInteractive, curveAccelerateMax, curveAccelerateMid, curveAccelerateMin, curveDecelerateMax, curveDecelerateMid, curveDecelerateMin, curveEasyEase, curveEasyEaseMax, curveLinear, display, dropdownButtonTemplate, dropdownInputTemplate, durationFast, durationFaster, durationGentle, durationNormal, durationSlow, durationSlower, durationUltraFast, durationUltraSlow, endSlotTemplate, fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, getDirection, isDialog, isDropdown, isDropdownOption, isListbox, isTab, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, listboxTemplate, roleForMenuItem, setTheme, shadow16, shadow16Brand, shadow2, shadow28, shadow28Brand, shadow2Brand, shadow4, shadow4Brand, shadow64, shadow64Brand, shadow8, shadow8Brand, spacingHorizontalL, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalNone, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXL, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingHorizontalXXXL, spacingVerticalL, spacingVerticalM, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXL, spacingVerticalXS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, startSlotTemplate, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, strokeWidthThin, typographyBody1StrongStyles, typographyBody1StrongerStyles, typographyBody1Styles, typographyBody2Styles, typographyCaption1StrongStyles, typographyCaption1StrongerStyles, typographyCaption1Styles, typographyCaption2StrongStyles, typographyCaption2Styles, typographyDisplayStyles, typographyLargeTitleStyles, typographySubtitle1Styles, typographySubtitle2StrongerStyles, typographySubtitle2Styles, typographyTitle1Styles, typographyTitle2Styles, typographyTitle3Styles, zIndexBackground, zIndexContent, zIndexDebug, zIndexFloating, zIndexMessages, zIndexOverlay, zIndexPopup, zIndexPriority };