@fluentui/web-components 3.0.0-alpha.9 → 3.0.0-beta.10

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 (598) hide show
  1. package/CHANGELOG.md +298 -2
  2. package/README.md +4 -0
  3. package/dist/dts/accordion/accordion.d.ts +47 -3
  4. package/dist/dts/accordion/accordion.definition.d.ts +0 -4
  5. package/dist/dts/accordion/accordion.options.d.ts +14 -0
  6. package/dist/dts/accordion/accordion.template.d.ts +4 -0
  7. package/dist/dts/accordion-item/accordion-item.d.ts +78 -3
  8. package/dist/dts/accordion-item/accordion-item.definition.d.ts +0 -3
  9. package/dist/dts/accordion-item/accordion-item.options.d.ts +1 -1
  10. package/dist/dts/accordion-item/accordion-item.template.d.ts +2 -1
  11. package/dist/dts/anchor-button/anchor-button.d.ts +176 -0
  12. package/dist/dts/anchor-button/anchor-button.definition.d.ts +7 -0
  13. package/dist/dts/anchor-button/anchor-button.options.d.ts +64 -0
  14. package/dist/dts/anchor-button/anchor-button.styles.d.ts +1 -0
  15. package/dist/dts/anchor-button/anchor-button.template.d.ts +12 -0
  16. package/dist/dts/anchor-button/define.d.ts +1 -0
  17. package/dist/dts/anchor-button/index.d.ts +4 -0
  18. package/dist/dts/avatar/avatar.options.d.ts +1 -1
  19. package/dist/dts/badge/badge.d.ts +1 -1
  20. package/dist/dts/badge/badge.definition.d.ts +0 -3
  21. package/dist/dts/badge/badge.options.d.ts +2 -1
  22. package/dist/dts/button/button.d.ts +193 -0
  23. package/dist/dts/button/button.definition.d.ts +7 -0
  24. package/dist/dts/button/button.form-associated.d.ts +14 -0
  25. package/dist/dts/button/button.options.d.ts +68 -0
  26. package/dist/dts/button/button.styles.d.ts +1 -0
  27. package/dist/dts/button/button.template.d.ts +9 -0
  28. package/dist/dts/button/define.d.ts +1 -0
  29. package/dist/dts/button/index.d.ts +5 -0
  30. package/dist/dts/checkbox/checkbox.d.ts +78 -0
  31. package/dist/dts/checkbox/checkbox.definition.d.ts +9 -0
  32. package/dist/dts/checkbox/checkbox.form-associated.d.ts +14 -0
  33. package/dist/dts/checkbox/checkbox.options.d.ts +28 -0
  34. package/dist/dts/checkbox/checkbox.styles.d.ts +5 -0
  35. package/dist/dts/checkbox/checkbox.template.d.ts +12 -0
  36. package/dist/dts/checkbox/define.d.ts +1 -0
  37. package/dist/dts/checkbox/index.d.ts +5 -0
  38. package/dist/dts/compound-button/compound-button.d.ts +7 -0
  39. package/dist/dts/compound-button/compound-button.definition.d.ts +7 -0
  40. package/dist/dts/compound-button/compound-button.options.d.ts +51 -0
  41. package/dist/dts/compound-button/compound-button.styles.d.ts +1 -0
  42. package/dist/dts/compound-button/compound-button.template.d.ts +13 -0
  43. package/dist/dts/compound-button/define.d.ts +1 -0
  44. package/dist/dts/compound-button/index.d.ts +5 -0
  45. package/dist/dts/counter-badge/counter-badge.d.ts +1 -1
  46. package/dist/dts/counter-badge/counter-badge.definition.d.ts +0 -4
  47. package/dist/dts/counter-badge/counter-badge.options.d.ts +1 -1
  48. package/dist/dts/dialog/define.d.ts +1 -0
  49. package/dist/dts/dialog/dialog.d.ts +192 -0
  50. package/dist/dts/dialog/dialog.definition.d.ts +9 -0
  51. package/dist/dts/dialog/dialog.options.d.ts +11 -0
  52. package/dist/dts/dialog/dialog.styles.d.ts +4 -0
  53. package/dist/dts/dialog/dialog.template.d.ts +7 -0
  54. package/dist/dts/dialog/index.d.ts +4 -0
  55. package/dist/dts/divider/divider.d.ts +20 -4
  56. package/dist/dts/divider/divider.options.d.ts +30 -5
  57. package/dist/dts/divider/divider.template.d.ts +1 -0
  58. package/dist/dts/form-associated/form-associated.d.ts +178 -0
  59. package/dist/dts/helpers.tests.d.ts +8 -0
  60. package/dist/dts/image/image.options.d.ts +1 -1
  61. package/dist/dts/index.d.ts +19 -0
  62. package/dist/dts/label/define.d.ts +1 -0
  63. package/dist/dts/label/index.d.ts +4 -0
  64. package/dist/dts/label/label.d.ts +42 -0
  65. package/dist/dts/label/label.definition.d.ts +10 -0
  66. package/dist/dts/label/label.options.d.ts +26 -0
  67. package/dist/dts/label/label.styles.d.ts +4 -0
  68. package/dist/dts/label/label.template.d.ts +8 -0
  69. package/dist/dts/menu/define.d.ts +1 -0
  70. package/dist/dts/menu/index.d.ts +4 -0
  71. package/dist/dts/menu/menu.d.ts +194 -0
  72. package/dist/dts/menu/menu.definition.d.ts +9 -0
  73. package/dist/dts/menu/menu.styles.d.ts +4 -0
  74. package/dist/dts/menu/menu.template.d.ts +4 -0
  75. package/dist/dts/menu-button/define.d.ts +1 -0
  76. package/dist/dts/menu-button/index.d.ts +5 -0
  77. package/dist/dts/menu-button/menu-button.d.ts +7 -0
  78. package/dist/dts/menu-button/menu-button.definition.d.ts +7 -0
  79. package/dist/dts/menu-button/menu-button.options.d.ts +47 -0
  80. package/dist/dts/menu-button/menu-button.template.d.ts +7 -0
  81. package/dist/dts/menu-item/define.d.ts +1 -0
  82. package/dist/dts/menu-item/index.d.ts +4 -0
  83. package/dist/dts/menu-item/menu-item.d.ts +166 -0
  84. package/dist/dts/menu-item/menu-item.definition.d.ts +7 -0
  85. package/dist/dts/menu-item/menu-item.options.d.ts +30 -0
  86. package/dist/dts/menu-item/menu-item.styles.d.ts +4 -0
  87. package/dist/dts/menu-item/menu-item.template.d.ts +4 -0
  88. package/dist/dts/menu-list/define.d.ts +1 -0
  89. package/dist/dts/menu-list/index.d.ts +4 -0
  90. package/dist/dts/menu-list/menu-list.d.ts +76 -0
  91. package/dist/dts/menu-list/menu-list.definition.d.ts +7 -0
  92. package/dist/dts/menu-list/menu-list.styles.d.ts +4 -0
  93. package/dist/dts/menu-list/menu-list.template.d.ts +4 -0
  94. package/dist/dts/patterns/aria-globals.d.ts +189 -0
  95. package/dist/dts/patterns/index.d.ts +2 -0
  96. package/dist/dts/patterns/start-end.d.ts +44 -0
  97. package/dist/dts/progress-bar/base-progress.d.ts +41 -0
  98. package/dist/dts/progress-bar/progress-bar.d.ts +11 -4
  99. package/dist/dts/progress-bar/progress-bar.options.d.ts +10 -1
  100. package/dist/dts/progress-bar/progress-bar.styles.d.ts +1 -1
  101. package/dist/dts/progress-bar/progress-bar.template.d.ts +2 -0
  102. package/dist/dts/progress-ring/progress-ring.d.ts +15 -0
  103. package/dist/dts/progress-ring/progress-ring.options.d.ts +9 -0
  104. package/dist/dts/radio/define.d.ts +1 -0
  105. package/dist/dts/radio/index.d.ts +4 -0
  106. package/dist/dts/radio/radio.d.ts +58 -0
  107. package/dist/dts/radio/radio.definition.d.ts +10 -0
  108. package/dist/dts/radio/radio.form-associated.d.ts +14 -0
  109. package/dist/dts/radio/radio.styles.d.ts +4 -0
  110. package/dist/dts/radio/radio.template.d.ts +4 -0
  111. package/dist/dts/radio-group/define.d.ts +1 -0
  112. package/dist/dts/radio-group/index.d.ts +4 -0
  113. package/dist/dts/radio-group/radio-group.d.ts +104 -0
  114. package/dist/dts/radio-group/radio-group.definition.d.ts +10 -0
  115. package/dist/dts/radio-group/radio-group.options.d.ts +17 -0
  116. package/dist/dts/radio-group/radio-group.styles.d.ts +4 -0
  117. package/dist/dts/radio-group/radio-group.template.d.ts +4 -0
  118. package/dist/dts/slider/define.d.ts +1 -0
  119. package/dist/dts/slider/index.d.ts +5 -0
  120. package/dist/dts/slider/slider-utilities.d.ts +5 -0
  121. package/dist/dts/slider/slider.d.ts +214 -0
  122. package/dist/dts/slider/slider.definition.d.ts +10 -0
  123. package/dist/dts/slider/slider.form-associated.d.ts +14 -0
  124. package/dist/dts/slider/slider.options.d.ts +56 -0
  125. package/dist/dts/slider/slider.styles.d.ts +4 -0
  126. package/dist/dts/slider/slider.template.d.ts +5 -0
  127. package/dist/dts/spinner/spinner.d.ts +2 -2
  128. package/dist/dts/spinner/spinner.definition.d.ts +0 -4
  129. package/dist/dts/spinner/spinner.options.d.ts +1 -1
  130. package/dist/dts/spinner/spinner.template.d.ts +2 -0
  131. package/dist/dts/switch/index.d.ts +3 -3
  132. package/dist/dts/switch/switch.d.ts +34 -2
  133. package/dist/dts/switch/switch.form-associated.d.ts +14 -0
  134. package/dist/dts/switch/switch.options.d.ts +1 -1
  135. package/dist/dts/switch/switch.template.d.ts +2 -1
  136. package/dist/dts/tab/define.d.ts +1 -0
  137. package/dist/dts/tab/index.d.ts +4 -0
  138. package/dist/dts/tab/tab.d.ts +23 -0
  139. package/dist/dts/tab/tab.definition.d.ts +2 -0
  140. package/dist/dts/tab/tab.styles.d.ts +1 -0
  141. package/dist/dts/tab/tab.template.d.ts +4 -0
  142. package/dist/dts/tab-panel/define.d.ts +1 -0
  143. package/dist/dts/tab-panel/index.d.ts +4 -0
  144. package/dist/dts/tab-panel/tab-panel.d.ts +3 -0
  145. package/dist/dts/tab-panel/tab-panel.definition.d.ts +2 -0
  146. package/dist/dts/tab-panel/tab-panel.styles.d.ts +1 -0
  147. package/dist/dts/tab-panel/tab-panel.template.d.ts +4 -0
  148. package/dist/dts/tabs/define.d.ts +1 -0
  149. package/dist/dts/tabs/index.d.ts +5 -0
  150. package/dist/dts/tabs/tabs.d.ts +173 -0
  151. package/dist/dts/tabs/tabs.definition.d.ts +2 -0
  152. package/dist/dts/tabs/tabs.options.d.ts +32 -0
  153. package/dist/dts/tabs/tabs.styles.d.ts +1 -0
  154. package/dist/dts/tabs/tabs.template.d.ts +5 -0
  155. package/dist/dts/text/text.options.d.ts +1 -1
  156. package/dist/dts/text-input/define.d.ts +1 -0
  157. package/dist/dts/text-input/index.d.ts +5 -0
  158. package/dist/dts/text-input/text-field.form-associated.d.ts +14 -0
  159. package/dist/dts/text-input/text-input.d.ts +154 -0
  160. package/dist/dts/text-input/text-input.definition.d.ts +10 -0
  161. package/dist/dts/text-input/text-input.options.d.ts +61 -0
  162. package/dist/dts/text-input/text-input.styles.d.ts +4 -0
  163. package/dist/dts/text-input/text-input.template.d.ts +7 -0
  164. package/dist/dts/theme/design-tokens.d.ts +384 -384
  165. package/dist/dts/theme/index.d.ts +2 -2
  166. package/dist/dts/theme/set-theme.d.ts +1 -0
  167. package/dist/dts/toggle-button/define.d.ts +1 -0
  168. package/dist/dts/toggle-button/index.d.ts +5 -0
  169. package/dist/dts/toggle-button/toggle-button.d.ts +48 -0
  170. package/dist/dts/toggle-button/toggle-button.definition.d.ts +8 -0
  171. package/dist/dts/toggle-button/toggle-button.options.d.ts +47 -0
  172. package/dist/dts/toggle-button/toggle-button.styles.d.ts +1 -0
  173. package/dist/dts/toggle-button/toggle-button.template.d.ts +7 -0
  174. package/dist/dts/utils/apply-mixins.d.ts +11 -0
  175. package/dist/dts/utils/benchmark-dependencies/tokens.d.ts +1 -0
  176. package/dist/dts/utils/benchmark-wrapper.d.ts +2 -0
  177. package/dist/dts/utils/direction.d.ts +10 -0
  178. package/dist/dts/utils/index.d.ts +4 -0
  179. package/dist/dts/utils/template-helpers.d.ts +16 -0
  180. package/dist/dts/utils/typings.d.ts +6 -0
  181. package/dist/dts/utils/whitespace-filter.d.ts +12 -0
  182. package/dist/esm/accordion/accordion.definition.js +0 -4
  183. package/dist/esm/accordion/accordion.definition.js.map +1 -1
  184. package/dist/esm/accordion/accordion.js +216 -3
  185. package/dist/esm/accordion/accordion.js.map +1 -1
  186. package/dist/esm/accordion/accordion.options.js +9 -0
  187. package/dist/esm/accordion/accordion.options.js.map +1 -0
  188. package/dist/esm/accordion/accordion.styles.js +2 -1
  189. package/dist/esm/accordion/accordion.styles.js.map +1 -1
  190. package/dist/esm/accordion/accordion.template.js +11 -1
  191. package/dist/esm/accordion/accordion.template.js.map +1 -1
  192. package/dist/esm/accordion-item/accordion-item.definition.js +0 -3
  193. package/dist/esm/accordion-item/accordion-item.definition.js.map +1 -1
  194. package/dist/esm/accordion-item/accordion-item.js +86 -5
  195. package/dist/esm/accordion-item/accordion-item.js.map +1 -1
  196. package/dist/esm/accordion-item/accordion-item.styles.js +2 -1
  197. package/dist/esm/accordion-item/accordion-item.styles.js.map +1 -1
  198. package/dist/esm/accordion-item/accordion-item.template.js +49 -4
  199. package/dist/esm/accordion-item/accordion-item.template.js.map +1 -1
  200. package/dist/esm/anchor-button/anchor-button.definition.js +18 -0
  201. package/dist/esm/anchor-button/anchor-button.definition.js.map +1 -0
  202. package/dist/esm/anchor-button/anchor-button.js +146 -0
  203. package/dist/esm/anchor-button/anchor-button.js.map +1 -0
  204. package/dist/esm/anchor-button/anchor-button.options.js +28 -0
  205. package/dist/esm/anchor-button/anchor-button.options.js.map +1 -0
  206. package/dist/esm/anchor-button/anchor-button.styles.js +11 -0
  207. package/dist/esm/anchor-button/anchor-button.styles.js.map +1 -0
  208. package/dist/esm/anchor-button/anchor-button.template.js +55 -0
  209. package/dist/esm/anchor-button/anchor-button.template.js.map +1 -0
  210. package/dist/esm/anchor-button/define.js +4 -0
  211. package/dist/esm/anchor-button/define.js.map +1 -0
  212. package/dist/esm/anchor-button/index.js +5 -0
  213. package/dist/esm/anchor-button/index.js.map +1 -0
  214. package/dist/esm/avatar/avatar.js +6 -1
  215. package/dist/esm/avatar/avatar.js.map +1 -1
  216. package/dist/esm/avatar/avatar.styles.js +6 -5
  217. package/dist/esm/avatar/avatar.styles.js.map +1 -1
  218. package/dist/esm/badge/badge.definition.js +0 -3
  219. package/dist/esm/badge/badge.definition.js.map +1 -1
  220. package/dist/esm/badge/badge.js +9 -2
  221. package/dist/esm/badge/badge.js.map +1 -1
  222. package/dist/esm/badge/badge.options.js.map +1 -1
  223. package/dist/esm/badge/badge.template.js +2 -1
  224. package/dist/esm/badge/badge.template.js.map +1 -1
  225. package/dist/esm/button/button.definition.js +18 -0
  226. package/dist/esm/button/button.definition.js.map +1 -0
  227. package/dist/esm/button/button.form-associated.js +14 -0
  228. package/dist/esm/button/button.form-associated.js.map +1 -0
  229. package/dist/esm/button/button.js +197 -0
  230. package/dist/esm/button/button.js.map +1 -0
  231. package/dist/esm/button/button.options.js +40 -0
  232. package/dist/esm/button/button.options.js.map +1 -0
  233. package/dist/esm/button/button.styles.js +260 -0
  234. package/dist/esm/button/button.styles.js.map +1 -0
  235. package/dist/esm/button/button.template.js +55 -0
  236. package/dist/esm/button/button.template.js.map +1 -0
  237. package/dist/esm/button/define.js +4 -0
  238. package/dist/esm/button/define.js.map +1 -0
  239. package/dist/esm/button/index.js +6 -0
  240. package/dist/esm/button/index.js.map +1 -0
  241. package/dist/esm/checkbox/checkbox.definition.js +17 -0
  242. package/dist/esm/checkbox/checkbox.definition.js.map +1 -0
  243. package/dist/esm/checkbox/checkbox.form-associated.js +14 -0
  244. package/dist/esm/checkbox/checkbox.form-associated.js.map +1 -0
  245. package/dist/esm/checkbox/checkbox.js +82 -0
  246. package/dist/esm/checkbox/checkbox.js.map +1 -0
  247. package/dist/esm/checkbox/checkbox.options.js +25 -0
  248. package/dist/esm/checkbox/checkbox.options.js.map +1 -0
  249. package/dist/esm/checkbox/checkbox.styles.js +164 -0
  250. package/dist/esm/checkbox/checkbox.styles.js.map +1 -0
  251. package/dist/esm/checkbox/checkbox.template.js +55 -0
  252. package/dist/esm/checkbox/checkbox.template.js.map +1 -0
  253. package/dist/esm/checkbox/define.js +4 -0
  254. package/dist/esm/checkbox/define.js.map +1 -0
  255. package/dist/esm/checkbox/index.js +6 -0
  256. package/dist/esm/checkbox/index.js.map +1 -0
  257. package/dist/esm/compound-button/compound-button.definition.js +18 -0
  258. package/dist/esm/compound-button/compound-button.definition.js.map +1 -0
  259. package/dist/esm/compound-button/compound-button.js +8 -0
  260. package/dist/esm/compound-button/compound-button.js.map +1 -0
  261. package/dist/esm/compound-button/compound-button.options.js +17 -0
  262. package/dist/esm/compound-button/compound-button.options.js.map +1 -0
  263. package/dist/esm/compound-button/compound-button.styles.js +105 -0
  264. package/dist/esm/compound-button/compound-button.styles.js.map +1 -0
  265. package/dist/esm/compound-button/compound-button.template.js +60 -0
  266. package/dist/esm/compound-button/compound-button.template.js.map +1 -0
  267. package/dist/esm/compound-button/define.js +4 -0
  268. package/dist/esm/compound-button/define.js.map +1 -0
  269. package/dist/esm/compound-button/index.js +6 -0
  270. package/dist/esm/compound-button/index.js.map +1 -0
  271. package/dist/esm/counter-badge/counter-badge.definition.js +0 -4
  272. package/dist/esm/counter-badge/counter-badge.definition.js.map +1 -1
  273. package/dist/esm/counter-badge/counter-badge.js +9 -2
  274. package/dist/esm/counter-badge/counter-badge.js.map +1 -1
  275. package/dist/esm/dialog/define.js +4 -0
  276. package/dist/esm/dialog/define.js.map +1 -0
  277. package/dist/esm/dialog/dialog.definition.js +17 -0
  278. package/dist/esm/dialog/dialog.definition.js.map +1 -0
  279. package/dist/esm/dialog/dialog.js +370 -0
  280. package/dist/esm/dialog/dialog.js.map +1 -0
  281. package/dist/esm/dialog/dialog.options.js +10 -0
  282. package/dist/esm/dialog/dialog.options.js.map +1 -0
  283. package/dist/esm/dialog/dialog.styles.js +102 -0
  284. package/dist/esm/dialog/dialog.styles.js.map +1 -0
  285. package/dist/esm/dialog/dialog.template.js +61 -0
  286. package/dist/esm/dialog/dialog.template.js.map +1 -0
  287. package/dist/esm/dialog/index.js +5 -0
  288. package/dist/esm/dialog/index.js.map +1 -0
  289. package/dist/esm/divider/divider.js +35 -5
  290. package/dist/esm/divider/divider.js.map +1 -1
  291. package/dist/esm/divider/divider.options.js +14 -5
  292. package/dist/esm/divider/divider.options.js.map +1 -1
  293. package/dist/esm/divider/divider.styles.js +18 -2
  294. package/dist/esm/divider/divider.styles.js.map +1 -1
  295. package/dist/esm/divider/divider.template.js +12 -1
  296. package/dist/esm/divider/divider.template.js.map +1 -1
  297. package/dist/esm/form-associated/form-associated.js +458 -0
  298. package/dist/esm/form-associated/form-associated.js.map +1 -0
  299. package/dist/esm/helpers.tests.js +29 -0
  300. package/dist/esm/helpers.tests.js.map +1 -0
  301. package/dist/esm/image/image.js +6 -1
  302. package/dist/esm/image/image.js.map +1 -1
  303. package/dist/esm/image/image.styles.js +8 -1
  304. package/dist/esm/image/image.styles.js.map +1 -1
  305. package/dist/esm/index.js +19 -0
  306. package/dist/esm/index.js.map +1 -1
  307. package/dist/esm/label/define.js +4 -0
  308. package/dist/esm/label/define.js.map +1 -0
  309. package/dist/esm/label/index.js +5 -0
  310. package/dist/esm/label/index.js.map +1 -0
  311. package/dist/esm/label/label.definition.js +18 -0
  312. package/dist/esm/label/label.definition.js.map +1 -0
  313. package/dist/esm/label/label.js +45 -0
  314. package/dist/esm/label/label.js.map +1 -0
  315. package/dist/esm/label/label.options.js +16 -0
  316. package/dist/esm/label/label.options.js.map +1 -0
  317. package/dist/esm/label/label.styles.js +38 -0
  318. package/dist/esm/label/label.styles.js.map +1 -0
  319. package/dist/esm/label/label.template.js +13 -0
  320. package/dist/esm/label/label.template.js.map +1 -0
  321. package/dist/esm/menu/define.js +4 -0
  322. package/dist/esm/menu/define.js.map +1 -0
  323. package/dist/esm/menu/index.js +5 -0
  324. package/dist/esm/menu/index.js.map +1 -0
  325. package/dist/esm/menu/menu.definition.js +17 -0
  326. package/dist/esm/menu/menu.definition.js.map +1 -0
  327. package/dist/esm/menu/menu.js +413 -0
  328. package/dist/esm/menu/menu.js.map +1 -0
  329. package/dist/esm/menu/menu.styles.js +17 -0
  330. package/dist/esm/menu/menu.styles.js.map +1 -0
  331. package/dist/esm/menu/menu.template.js +24 -0
  332. package/dist/esm/menu/menu.template.js.map +1 -0
  333. package/dist/esm/menu-button/define.js +4 -0
  334. package/dist/esm/menu-button/define.js.map +1 -0
  335. package/dist/esm/menu-button/index.js +6 -0
  336. package/dist/esm/menu-button/index.js.map +1 -0
  337. package/dist/esm/menu-button/menu-button.definition.js +18 -0
  338. package/dist/esm/menu-button/menu-button.definition.js.map +1 -0
  339. package/dist/esm/menu-button/menu-button.js +8 -0
  340. package/dist/esm/menu-button/menu-button.js.map +1 -0
  341. package/dist/esm/menu-button/menu-button.options.js +17 -0
  342. package/dist/esm/menu-button/menu-button.options.js.map +1 -0
  343. package/dist/esm/menu-button/menu-button.template.js +10 -0
  344. package/dist/esm/menu-button/menu-button.template.js.map +1 -0
  345. package/dist/esm/menu-item/define.js +4 -0
  346. package/dist/esm/menu-item/define.js.map +1 -0
  347. package/dist/esm/menu-item/index.js +5 -0
  348. package/dist/esm/menu-item/index.js.map +1 -0
  349. package/dist/esm/menu-item/menu-item.definition.js +15 -0
  350. package/dist/esm/menu-item/menu-item.definition.js.map +1 -0
  351. package/dist/esm/menu-item/menu-item.js +275 -0
  352. package/dist/esm/menu-item/menu-item.js.map +1 -0
  353. package/dist/esm/menu-item/menu-item.options.js +27 -0
  354. package/dist/esm/menu-item/menu-item.options.js.map +1 -0
  355. package/dist/esm/menu-item/menu-item.styles.js +183 -0
  356. package/dist/esm/menu-item/menu-item.styles.js.map +1 -0
  357. package/dist/esm/menu-item/menu-item.template.js +65 -0
  358. package/dist/esm/menu-item/menu-item.template.js.map +1 -0
  359. package/dist/esm/menu-list/define.js +4 -0
  360. package/dist/esm/menu-list/define.js.map +1 -0
  361. package/dist/esm/menu-list/index.js +5 -0
  362. package/dist/esm/menu-list/index.js.map +1 -0
  363. package/dist/esm/menu-list/menu-list.definition.js +15 -0
  364. package/dist/esm/menu-list/menu-list.definition.js.map +1 -0
  365. package/dist/esm/menu-list/menu-list.js +291 -0
  366. package/dist/esm/menu-list/menu-list.js.map +1 -0
  367. package/dist/esm/menu-list/menu-list.styles.js +24 -0
  368. package/dist/esm/menu-list/menu-list.styles.js.map +1 -0
  369. package/dist/esm/menu-list/menu-list.template.js +15 -0
  370. package/dist/esm/menu-list/menu-list.template.js.map +1 -0
  371. package/dist/esm/patterns/aria-globals.js +77 -0
  372. package/dist/esm/patterns/aria-globals.js.map +1 -0
  373. package/dist/esm/patterns/index.js +3 -0
  374. package/dist/esm/patterns/index.js.map +1 -0
  375. package/dist/esm/patterns/start-end.js +29 -0
  376. package/dist/esm/patterns/start-end.js.map +1 -0
  377. package/dist/esm/progress-bar/base-progress.js +61 -0
  378. package/dist/esm/progress-bar/base-progress.js.map +1 -0
  379. package/dist/esm/progress-bar/progress-bar.js +16 -4
  380. package/dist/esm/progress-bar/progress-bar.js.map +1 -1
  381. package/dist/esm/progress-bar/progress-bar.options.js.map +1 -1
  382. package/dist/esm/progress-bar/progress-bar.styles.js +20 -3
  383. package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -1
  384. package/dist/esm/progress-bar/progress-bar.template.js +25 -1
  385. package/dist/esm/progress-bar/progress-bar.template.js.map +1 -1
  386. package/dist/esm/progress-ring/progress-ring.js +16 -0
  387. package/dist/esm/progress-ring/progress-ring.js.map +1 -0
  388. package/dist/esm/progress-ring/progress-ring.options.js +2 -0
  389. package/dist/esm/progress-ring/progress-ring.options.js.map +1 -0
  390. package/dist/esm/radio/define.js +4 -0
  391. package/dist/esm/radio/define.js.map +1 -0
  392. package/dist/esm/radio/index.js +5 -0
  393. package/dist/esm/radio/index.js.map +1 -0
  394. package/dist/esm/radio/radio.definition.js +18 -0
  395. package/dist/esm/radio/radio.definition.js.map +1 -0
  396. package/dist/esm/radio/radio.form-associated.js +14 -0
  397. package/dist/esm/radio/radio.form-associated.js.map +1 -0
  398. package/dist/esm/radio/radio.js +101 -0
  399. package/dist/esm/radio/radio.js.map +1 -0
  400. package/dist/esm/radio/radio.styles.js +118 -0
  401. package/dist/esm/radio/radio.styles.js.map +1 -0
  402. package/dist/esm/radio/radio.template.js +32 -0
  403. package/dist/esm/radio/radio.template.js.map +1 -0
  404. package/dist/esm/radio-group/define.js +4 -0
  405. package/dist/esm/radio-group/define.js.map +1 -0
  406. package/dist/esm/radio-group/index.js +5 -0
  407. package/dist/esm/radio-group/index.js.map +1 -0
  408. package/dist/esm/radio-group/radio-group.definition.js +18 -0
  409. package/dist/esm/radio-group/radio-group.definition.js.map +1 -0
  410. package/dist/esm/radio-group/radio-group.js +372 -0
  411. package/dist/esm/radio-group/radio-group.js.map +1 -0
  412. package/dist/esm/radio-group/radio-group.options.js +7 -0
  413. package/dist/esm/radio-group/radio-group.options.js.map +1 -0
  414. package/dist/esm/radio-group/radio-group.styles.js +52 -0
  415. package/dist/esm/radio-group/radio-group.styles.js.map +1 -0
  416. package/dist/esm/radio-group/radio-group.template.js +32 -0
  417. package/dist/esm/radio-group/radio-group.template.js.map +1 -0
  418. package/dist/esm/slider/define.js +4 -0
  419. package/dist/esm/slider/define.js.map +1 -0
  420. package/dist/esm/slider/index.js +6 -0
  421. package/dist/esm/slider/index.js.map +1 -0
  422. package/dist/esm/slider/slider-utilities.js +12 -0
  423. package/dist/esm/slider/slider-utilities.js.map +1 -0
  424. package/dist/esm/slider/slider.definition.js +18 -0
  425. package/dist/esm/slider/slider.definition.js.map +1 -0
  426. package/dist/esm/slider/slider.form-associated.js +14 -0
  427. package/dist/esm/slider/slider.form-associated.js.map +1 -0
  428. package/dist/esm/slider/slider.js +480 -0
  429. package/dist/esm/slider/slider.js.map +1 -0
  430. package/dist/esm/slider/slider.options.js +20 -0
  431. package/dist/esm/slider/slider.options.js.map +1 -0
  432. package/dist/esm/slider/slider.styles.js +203 -0
  433. package/dist/esm/slider/slider.styles.js.map +1 -0
  434. package/dist/esm/slider/slider.template.js +42 -0
  435. package/dist/esm/slider/slider.template.js.map +1 -0
  436. package/dist/esm/spinner/spinner.definition.js +0 -4
  437. package/dist/esm/spinner/spinner.definition.js.map +1 -1
  438. package/dist/esm/spinner/spinner.js +8 -3
  439. package/dist/esm/spinner/spinner.js.map +1 -1
  440. package/dist/esm/spinner/spinner.styles.js +2 -1
  441. package/dist/esm/spinner/spinner.styles.js.map +1 -1
  442. package/dist/esm/spinner/spinner.template.js +27 -1
  443. package/dist/esm/spinner/spinner.template.js.map +1 -1
  444. package/dist/esm/styles/partials/badge.partials.js +5 -4
  445. package/dist/esm/styles/partials/badge.partials.js.map +1 -1
  446. package/dist/esm/switch/index.js +3 -3
  447. package/dist/esm/switch/index.js.map +1 -1
  448. package/dist/esm/switch/switch.form-associated.js +14 -0
  449. package/dist/esm/switch/switch.form-associated.js.map +1 -0
  450. package/dist/esm/switch/switch.js +54 -4
  451. package/dist/esm/switch/switch.js.map +1 -1
  452. package/dist/esm/switch/switch.styles.js +33 -5
  453. package/dist/esm/switch/switch.styles.js.map +1 -1
  454. package/dist/esm/switch/switch.template.js +25 -1
  455. package/dist/esm/switch/switch.template.js.map +1 -1
  456. package/dist/esm/tab/define.js +4 -0
  457. package/dist/esm/tab/define.js.map +1 -0
  458. package/dist/esm/tab/index.js +5 -0
  459. package/dist/esm/tab/index.js.map +1 -0
  460. package/dist/esm/tab/tab.definition.js +10 -0
  461. package/dist/esm/tab/tab.definition.js.map +1 -0
  462. package/dist/esm/tab/tab.js +31 -0
  463. package/dist/esm/tab/tab.js.map +1 -0
  464. package/dist/esm/tab/tab.styles.js +98 -0
  465. package/dist/esm/tab/tab.styles.js.map +1 -0
  466. package/dist/esm/tab/tab.template.js +13 -0
  467. package/dist/esm/tab/tab.template.js.map +1 -0
  468. package/dist/esm/tab-panel/define.js +4 -0
  469. package/dist/esm/tab-panel/define.js.map +1 -0
  470. package/dist/esm/tab-panel/index.js +5 -0
  471. package/dist/esm/tab-panel/index.js.map +1 -0
  472. package/dist/esm/tab-panel/tab-panel.definition.js +10 -0
  473. package/dist/esm/tab-panel/tab-panel.definition.js.map +1 -0
  474. package/dist/esm/tab-panel/tab-panel.js +4 -0
  475. package/dist/esm/tab-panel/tab-panel.js.map +1 -0
  476. package/dist/esm/tab-panel/tab-panel.styles.js +12 -0
  477. package/dist/esm/tab-panel/tab-panel.styles.js.map +1 -0
  478. package/dist/esm/tab-panel/tab-panel.template.js +10 -0
  479. package/dist/esm/tab-panel/tab-panel.template.js.map +1 -0
  480. package/dist/esm/tabs/define.js +4 -0
  481. package/dist/esm/tabs/define.js.map +1 -0
  482. package/dist/esm/tabs/index.js +6 -0
  483. package/dist/esm/tabs/index.js.map +1 -0
  484. package/dist/esm/tabs/tabs.definition.js +10 -0
  485. package/dist/esm/tabs/tabs.definition.js.map +1 -0
  486. package/dist/esm/tabs/tabs.js +436 -0
  487. package/dist/esm/tabs/tabs.js.map +1 -0
  488. package/dist/esm/tabs/tabs.options.js +16 -0
  489. package/dist/esm/tabs/tabs.options.js.map +1 -0
  490. package/dist/esm/tabs/tabs.styles.js +230 -0
  491. package/dist/esm/tabs/tabs.styles.js.map +1 -0
  492. package/dist/esm/tabs/tabs.template.js +16 -0
  493. package/dist/esm/tabs/tabs.template.js.map +1 -0
  494. package/dist/esm/text/text.js +6 -1
  495. package/dist/esm/text/text.js.map +1 -1
  496. package/dist/esm/text/text.styles.js +8 -2
  497. package/dist/esm/text/text.styles.js.map +1 -1
  498. package/dist/esm/text-input/define.js +4 -0
  499. package/dist/esm/text-input/define.js.map +1 -0
  500. package/dist/esm/text-input/index.js +6 -0
  501. package/dist/esm/text-input/index.js.map +1 -0
  502. package/dist/esm/text-input/text-field.form-associated.js +14 -0
  503. package/dist/esm/text-input/text-field.form-associated.js.map +1 -0
  504. package/dist/esm/text-input/text-input.definition.js +18 -0
  505. package/dist/esm/text-input/text-input.definition.js.map +1 -0
  506. package/dist/esm/text-input/text-input.js +181 -0
  507. package/dist/esm/text-input/text-input.js.map +1 -0
  508. package/dist/esm/text-input/text-input.options.js +46 -0
  509. package/dist/esm/text-input/text-input.options.js.map +1 -0
  510. package/dist/esm/text-input/text-input.styles.js +200 -0
  511. package/dist/esm/text-input/text-input.styles.js.map +1 -0
  512. package/dist/esm/text-input/text-input.template.js +69 -0
  513. package/dist/esm/text-input/text-input.template.js.map +1 -0
  514. package/dist/esm/theme/design-tokens.js +385 -386
  515. package/dist/esm/theme/design-tokens.js.map +1 -1
  516. package/dist/esm/theme/index.js +2 -2
  517. package/dist/esm/theme/index.js.map +1 -1
  518. package/dist/esm/theme/set-theme.js +6 -1
  519. package/dist/esm/theme/set-theme.js.map +1 -1
  520. package/dist/esm/toggle-button/define.js +4 -0
  521. package/dist/esm/toggle-button/define.js.map +1 -0
  522. package/dist/esm/toggle-button/index.js +6 -0
  523. package/dist/esm/toggle-button/index.js.map +1 -0
  524. package/dist/esm/toggle-button/toggle-button.definition.js +19 -0
  525. package/dist/esm/toggle-button/toggle-button.definition.js.map +1 -0
  526. package/dist/esm/toggle-button/toggle-button.js +107 -0
  527. package/dist/esm/toggle-button/toggle-button.js.map +1 -0
  528. package/dist/esm/toggle-button/toggle-button.options.js +17 -0
  529. package/dist/esm/toggle-button/toggle-button.options.js.map +1 -0
  530. package/dist/esm/toggle-button/toggle-button.styles.js +94 -0
  531. package/dist/esm/toggle-button/toggle-button.styles.js.map +1 -0
  532. package/dist/esm/toggle-button/toggle-button.template.js +7 -0
  533. package/dist/esm/toggle-button/toggle-button.template.js.map +1 -0
  534. package/dist/esm/utils/apply-mixins.js +26 -0
  535. package/dist/esm/utils/apply-mixins.js.map +1 -0
  536. package/dist/esm/utils/benchmark-dependencies/tokens.js +2 -0
  537. package/dist/esm/utils/benchmark-dependencies/tokens.js.map +1 -0
  538. package/dist/esm/utils/benchmark-wrapper.js +18 -0
  539. package/dist/esm/utils/benchmark-wrapper.js.map +1 -0
  540. package/dist/esm/utils/direction.js +15 -0
  541. package/dist/esm/utils/direction.js.map +1 -0
  542. package/dist/esm/utils/index.js +5 -0
  543. package/dist/esm/utils/index.js.map +1 -0
  544. package/dist/esm/utils/template-helpers.js +19 -0
  545. package/dist/esm/utils/template-helpers.js.map +1 -0
  546. package/dist/esm/utils/typings.js +3 -0
  547. package/dist/esm/utils/typings.js.map +1 -0
  548. package/dist/esm/utils/whitespace-filter.js +13 -0
  549. package/dist/esm/utils/whitespace-filter.js.map +1 -0
  550. package/dist/fluent-web-components.api.json +18374 -7750
  551. package/dist/storybook/108.78b731e00015540915a8.manager.bundle.js +1 -0
  552. package/dist/storybook/108.b31ec3a1.iframe.bundle.js +1 -0
  553. package/dist/storybook/284.0946b1fb.iframe.bundle.js +2 -0
  554. package/dist/storybook/284.0946b1fb.iframe.bundle.js.LICENSE.txt +51 -0
  555. package/dist/storybook/316.bc4aabd3.iframe.bundle.js +2 -0
  556. package/dist/storybook/316.bc4aabd3.iframe.bundle.js.LICENSE.txt +17 -0
  557. package/dist/storybook/401.7edec720.iframe.bundle.js +2 -0
  558. package/dist/storybook/401.7edec720.iframe.bundle.js.LICENSE.txt +12 -0
  559. package/dist/storybook/401.c9bdfaf0dda8b194127f.manager.bundle.js +2 -0
  560. package/dist/storybook/401.c9bdfaf0dda8b194127f.manager.bundle.js.LICENSE.txt +12 -0
  561. package/dist/storybook/491.77b24750.iframe.bundle.js +1 -0
  562. package/dist/storybook/591.f5bf0d78d2f203de19f5.manager.bundle.js +2 -0
  563. package/dist/storybook/591.f5bf0d78d2f203de19f5.manager.bundle.js.LICENSE.txt +94 -0
  564. package/dist/storybook/709.22096ad4.iframe.bundle.js +2 -0
  565. package/dist/storybook/709.22096ad4.iframe.bundle.js.LICENSE.txt +8 -0
  566. package/dist/storybook/709.b131e33993a6b94d7ad8.manager.bundle.js +2 -0
  567. package/dist/storybook/709.b131e33993a6b94d7ad8.manager.bundle.js.LICENSE.txt +8 -0
  568. package/dist/storybook/721.46fa9f53.iframe.bundle.js +2 -0
  569. package/dist/storybook/721.46fa9f53.iframe.bundle.js.LICENSE.txt +31 -0
  570. package/dist/storybook/721.c225c101a0a55a8f98eb.manager.bundle.js +2 -0
  571. package/dist/storybook/721.c225c101a0a55a8f98eb.manager.bundle.js.LICENSE.txt +31 -0
  572. package/dist/storybook/858.da40ed98.iframe.bundle.js +1 -0
  573. package/dist/storybook/858.e08e25a6901d2e21e9d8.manager.bundle.js +1 -0
  574. package/dist/storybook/950.674e7934b4a26a022608.manager.bundle.js +1 -0
  575. package/dist/storybook/954.630c5748.iframe.bundle.js +1 -0
  576. package/dist/storybook/954.7f985e2fdf9f15a7748b.manager.bundle.js +1 -0
  577. package/dist/storybook/SegoeUI-VF.ttf +0 -0
  578. package/dist/storybook/favicon.ico +0 -0
  579. package/dist/storybook/favicon.png +0 -0
  580. package/dist/storybook/iframe.html +364 -0
  581. package/dist/storybook/index.html +165 -0
  582. package/dist/storybook/main.5d7b916dc1e37293b1d8.manager.bundle.js +1 -0
  583. package/dist/storybook/main.b9de79ac.iframe.bundle.js +2 -0
  584. package/dist/storybook/main.b9de79ac.iframe.bundle.js.LICENSE.txt +1 -0
  585. package/dist/storybook/project.json +1 -0
  586. package/dist/storybook/runtime~main.5d918fe7.iframe.bundle.js +1 -0
  587. package/dist/storybook/runtime~main.dbf00b470fe610082919.manager.bundle.js +1 -0
  588. package/dist/storybook/shell.css +83 -0
  589. package/dist/storybook/theme-switch.ts +13 -0
  590. package/dist/web-components.d.ts +4414 -917
  591. package/dist/web-components.js +6209 -3672
  592. package/dist/web-components.min.js +185 -115
  593. package/docs/api-report.md +1583 -434
  594. package/package.json +142 -63
  595. package/playwright.config.ts +25 -0
  596. package/tensile.config.js +24 -0
  597. package/CHANGELOG.json +0 -2935
  598. package/dist/tsdoc-metadata.json +0 -11
@@ -0,0 +1,61 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
8
+ /**
9
+ * A base class for progress components.
10
+ * @public
11
+ */
12
+ export class BaseProgress extends FASTElement {
13
+ constructor() {
14
+ super(...arguments);
15
+ /**
16
+ * Indicates progress in %
17
+ * @internal
18
+ */
19
+ this.percentComplete = 0;
20
+ }
21
+ valueChanged() {
22
+ this.updatePercentComplete();
23
+ }
24
+ minChanged() {
25
+ if (this.$fastController.isConnected) {
26
+ this.updatePercentComplete();
27
+ }
28
+ }
29
+ maxChanged() {
30
+ if (this.$fastController.isConnected) {
31
+ this.updatePercentComplete();
32
+ }
33
+ }
34
+ /**
35
+ * @internal
36
+ */
37
+ connectedCallback() {
38
+ super.connectedCallback();
39
+ this.updatePercentComplete();
40
+ }
41
+ updatePercentComplete() {
42
+ const min = typeof this.min === 'number' ? this.min : 0;
43
+ const max = typeof this.max === 'number' ? this.max : 100;
44
+ const value = typeof this.value === 'number' ? this.value : 0;
45
+ const range = max - min;
46
+ this.percentComplete = range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
47
+ }
48
+ }
49
+ __decorate([
50
+ attr({ converter: nullableNumberConverter })
51
+ ], BaseProgress.prototype, "value", void 0);
52
+ __decorate([
53
+ attr({ converter: nullableNumberConverter })
54
+ ], BaseProgress.prototype, "min", void 0);
55
+ __decorate([
56
+ attr({ converter: nullableNumberConverter })
57
+ ], BaseProgress.prototype, "max", void 0);
58
+ __decorate([
59
+ observable
60
+ ], BaseProgress.prototype, "percentComplete", void 0);
61
+ //# sourceMappingURL=base-progress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base-progress.js","sourceRoot":"","sources":["../../../src/progress-bar/base-progress.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEjG;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAyCE;;;WAGG;QAEI,oBAAe,GAAW,CAAC,CAAC;IAkBrC,CAAC;IAvDW,YAAY;QACpB,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAUS,UAAU;QAClB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B;IACH,CAAC;IAUS,UAAU;QAClB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B;IACH,CAAC;IASD;;OAEG;IACI,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAEO,qBAAqB;QAC3B,MAAM,GAAG,GAAW,OAAO,IAAI,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAChE,MAAM,GAAG,GAAW,OAAO,IAAI,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAClE,MAAM,KAAK,GAAW,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACtE,MAAM,KAAK,GAAW,GAAG,GAAG,GAAG,CAAC;QAEhC,IAAI,CAAC,eAAe,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC;IACtF,CAAC;CACF;AAxDC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;2CAChB;AAY7B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;yCACzB;AAcpB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;yCACzB;AAYpB;IADC,UAAU;qDACwB"}
@@ -1,11 +1,23 @@
1
- import { __decorate } from "tslib";
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
2
7
  import { attr } from '@microsoft/fast-element';
3
- import { FASTProgress } from '@microsoft/fast-foundation';
8
+ import { BaseProgress } from './base-progress.js';
4
9
  /**
5
- * The base class used for constructing a fluent-progress-bar custom element
10
+ * An Progress HTML Element.
11
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
12
+ *
13
+ * @slot indeterminate - The slot for a custom indeterminate indicator
14
+ * @csspart progress - Represents the progress element
15
+ * @csspart determinate - The determinate indicator
16
+ * @csspart indeterminate - The indeterminate indicator
17
+ *
6
18
  * @public
7
19
  */
8
- export class ProgressBar extends FASTProgress {
20
+ export class ProgressBar extends BaseProgress {
9
21
  constructor() {
10
22
  super(...arguments);
11
23
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAoBE;;;;;WAKG;QAEI,oBAAe,GAAsC,IAAI,CAAC;IACnE,CAAC;CAAA;AAnBC;IADC,IAAI;8CACmC;AASxC;IADC,IAAI;0CAC2B;AAShC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;oDACyB"}
1
+ {"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAoBE;;;;;WAKG;QAEI,oBAAe,GAAsC,IAAI,CAAC;IACnE,CAAC;CAAA;AAnBC;IADC,IAAI;8CACmC;AASxC;IADC,IAAI;0CAC2B;AAShC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;oDACyB"}
@@ -1 +1 @@
1
- {"version":3,"file":"progress-bar.options.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACN,CAAC"}
1
+ {"version":3,"file":"progress-bar.options.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.options.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACN,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '@microsoft/fast-foundation';
2
+ import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
3
3
  import { borderRadiusMedium, colorBrandBackground2, colorCompoundBrandBackground, colorNeutralBackground6, colorPaletteDarkOrangeBackground2, colorPaletteDarkOrangeBackground3, colorPaletteGreenBackground2, colorPaletteGreenBackground3, colorPaletteRedBackground2, colorPaletteRedBackground3, } from '../theme/design-tokens.js';
4
- /** Text styles
4
+ /** ProgressBar styles
5
5
  * @public
6
6
  */
7
7
  export const styles = css `
@@ -12,6 +12,7 @@ export const styles = css `
12
12
  height: 2px;
13
13
  overflow-x: hidden;
14
14
  border-radius: ${borderRadiusMedium};
15
+ contain: content;
15
16
  }
16
17
 
17
18
  :host([thickness='large']),
@@ -152,5 +153,21 @@ export const styles = css `
152
153
  opacity: 1;
153
154
  }
154
155
  }
155
- `;
156
+ `.withBehaviors(forcedColorsStylesheetBehavior(css `
157
+ .progress {
158
+ background-color: HighlightText;
159
+ }
160
+ .determinate,
161
+ :host([validation-state='success']) .determinate,
162
+ :host([validation-state='warning']) .determinate,
163
+ :host([validation-state='error']) .determinate,
164
+ :host([validation-state='success']) ..indeterminate-indicator-1,
165
+ :host([validation-state='success']) ..indeterminate-indicator-2,
166
+ :host([validation-state='warning']) .indeterminate-indicator-1,
167
+ :host([validation-state='warning']) .indeterminate-indicator-2,
168
+ :host([validation-state='error']) .indeterminate-indicator-1,
169
+ :host([validation-state='error']) .indeterminate-indicator-2 {
170
+ background-color: Highlight;
171
+ }
172
+ `));
156
173
  //# sourceMappingURL=progress-bar.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;qBAME,kBAAkB;;;;;;;;;;;;;;;;wBAgBf,0BAA0B;;;;;;;QAO1C,0BAA0B;QAC1B,0BAA0B;QAC1B,0BAA0B;;;;;wBAKV,iCAAiC;;;;;;;QAOjD,iCAAiC;QACjC,iCAAiC;QACjC,iCAAiC;;;;;wBAKjB,4BAA4B;;;;;;;QAO5C,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;;;;;;;;;wBASf,4BAA4B;qBAC/B,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCtC,CAAC"}
1
+ {"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;qBAME,kBAAkB;;;;;;;;;;;;;;;;;wBAiBf,0BAA0B;;;;;;;QAO1C,0BAA0B;QAC1B,0BAA0B;QAC1B,0BAA0B;;;;;wBAKV,iCAAiC;;;;;;;QAOjD,iCAAiC;QACjC,iCAAiC;QACjC,iCAAiC;;;;;wBAKjB,4BAA4B;;;;;;;QAO5C,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;;;;;;;;;wBASf,4BAA4B;qBAC/B,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}
@@ -1,4 +1,28 @@
1
- import { progressTemplate } from '@microsoft/fast-foundation';
1
+ import { html, when } from '@microsoft/fast-element';
2
+ import { staticallyCompose } from '../utils/template-helpers.js';
3
+ export function progressTemplate(options = {}) {
4
+ return html `
5
+ <template
6
+ role="progressbar"
7
+ aria-valuenow="${x => x.value}"
8
+ aria-valuemin="${x => x.min}"
9
+ aria-valuemax="${x => x.max}"
10
+ >
11
+ ${when(x => typeof x.value === 'number', html `
12
+ <div class="progress" part="progress" slot="determinate">
13
+ <div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div>
14
+ </div>
15
+ `, html `
16
+ <div class="progress" part="progress" slot="indeterminate">
17
+ <slot name="indeterminate">
18
+ ${staticallyCompose(options.indeterminateIndicator1)}
19
+ ${staticallyCompose(options.indeterminateIndicator2)}
20
+ </slot>
21
+ </div>
22
+ `)}
23
+ </template>
24
+ `;
25
+ }
2
26
  export const template = progressTemplate({
3
27
  indeterminateIndicator1: `<span class="indeterminate-indicator-1" part="indeterminate-indicator-1></span>`,
4
28
  indeterminateIndicator2: `<span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>`,
@@ -1 +1 @@
1
- {"version":3,"file":"progress-bar.template.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG9D,MAAM,CAAC,MAAM,QAAQ,GAAqC,gBAAgB,CAAC;IACzE,uBAAuB,EAAE,iFAAiF;IAC1G,uBAAuB,EAAE,kFAAkF;CAC5G,CAAC,CAAC"}
1
+ {"version":3,"file":"progress-bar.template.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAIjE,MAAM,UAAU,gBAAgB,CAAwB,UAA2B,EAAE;IACnF,OAAO,IAAI,CAAA;;;uBAGU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;uBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;uBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;;QAEzB,IAAI,CACJ,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,EAChC,IAAI,CAAG;;wEAEyD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;SAErF,EACD,IAAI,CAAG;;;gBAGC,iBAAiB,CAAC,OAAO,CAAC,uBAAuB,CAAC;gBAClD,iBAAiB,CAAC,OAAO,CAAC,uBAAuB,CAAC;;;SAGzD,CACF;;GAEJ,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAqC,gBAAgB,CAAC;IACzE,uBAAuB,EAAE,iFAAiF;IAC1G,uBAAuB,EAAE,kFAAkF;CAC5G,CAAC,CAAC"}
@@ -0,0 +1,16 @@
1
+ import { BaseProgress } from '../progress-bar/base-progress.js';
2
+ /**
3
+ * An circular Progress HTML Element.
4
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
5
+ *
6
+ * @slot indeterminate - The slot for a custom indeterminate indicator
7
+ * @slot determinate - The slot for a custom determinate indicator
8
+ * @csspart progress - Represents the progress element
9
+ * @csspart determinate - The determinate indicator
10
+ * @csspart background - The background
11
+ *
12
+ * @public
13
+ */
14
+ export class ProgressRing extends BaseProgress {
15
+ }
16
+ //# sourceMappingURL=progress-ring.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"progress-ring.js","sourceRoot":"","sources":["../../../src/progress-ring/progress-ring.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,YAAa,SAAQ,YAAY;CAAG"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=progress-ring.options.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"progress-ring.options.js","sourceRoot":"","sources":["../../../src/progress-ring/progress-ring.options.ts"],"names":[],"mappings":""}
@@ -0,0 +1,4 @@
1
+ import { FluentDesignSystem } from '../fluent-design-system.js';
2
+ import { definition } from './radio.definition.js';
3
+ definition.define(FluentDesignSystem.registry);
4
+ //# sourceMappingURL=define.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/radio/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
@@ -0,0 +1,5 @@
1
+ export * from './radio.js';
2
+ export { definition as RadioDefinition } from './radio.definition.js';
3
+ export { styles as RadioStyles } from './radio.styles.js';
4
+ export { template as RadioTemplate } from './radio.template.js';
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
@@ -0,0 +1,18 @@
1
+ import { FluentDesignSystem } from '../fluent-design-system.js';
2
+ import { Radio } from './radio.js';
3
+ import { styles } from './radio.styles.js';
4
+ import { template } from './radio.template.js';
5
+ /**
6
+ * The Fluent Radio Element.
7
+ *
8
+ *
9
+ * @public
10
+ * @remarks
11
+ * HTML Element: \<fluent-radio\>
12
+ */
13
+ export const definition = Radio.compose({
14
+ name: `${FluentDesignSystem.prefix}-radio`,
15
+ template,
16
+ styles,
17
+ });
18
+ //# sourceMappingURL=radio.definition.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio.definition.js","sourceRoot":"","sources":["../../../src/radio/radio.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
@@ -0,0 +1,14 @@
1
+ import { FASTElement } from '@microsoft/fast-element';
2
+ import { CheckableFormAssociated } from '../form-associated/form-associated.js';
3
+ class _Radio extends FASTElement {
4
+ }
5
+ /**
6
+ * @beta
7
+ */
8
+ export class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
9
+ constructor() {
10
+ super(...arguments);
11
+ this.proxy = document.createElement('input');
12
+ }
13
+ }
14
+ //# sourceMappingURL=radio.form-associated.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio.form-associated.js","sourceRoot":"","sources":["../../../src/radio/radio.form-associated.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAEhF,MAAM,MAAO,SAAQ,WAAW;CAAG;AAInC;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,uBAAuB,CAAC,MAAM,CAAC;IAAxE;;QACE,UAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;CAAA"}
@@ -0,0 +1,101 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { observable } from '@microsoft/fast-element';
8
+ import { keySpace } from '@microsoft/fast-web-utilities';
9
+ import { FormAssociatedRadio } from './radio.form-associated.js';
10
+ /**
11
+ * A Radio Custom HTML Element.
12
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
13
+ *
14
+ * @slot checked-indicator - The checked indicator
15
+ * @slot - The default slot for the label
16
+ * @csspart control - The element representing the visual radio control
17
+ * @csspart label - The label
18
+ * @fires change - Emits a custom change event when the checked state changes
19
+ *
20
+ * @public
21
+ */
22
+ export class Radio extends FormAssociatedRadio {
23
+ constructor() {
24
+ super();
25
+ /**
26
+ * The element's value to be included in form submission when checked.
27
+ * Default to "on" to reach parity with input[type="radio"]
28
+ *
29
+ * @internal
30
+ */
31
+ this.initialValue = 'on';
32
+ this.proxy.setAttribute('type', 'radio');
33
+ }
34
+ get radioGroup() {
35
+ return this.closest('[role=radiogroup]');
36
+ }
37
+ /**
38
+ * @internal
39
+ */
40
+ defaultCheckedChanged() {
41
+ var _a;
42
+ if (this.$fastController.isConnected && !this.dirtyChecked) {
43
+ // Setting this.checked will cause us to enter a dirty state,
44
+ // but if we are clean when defaultChecked is changed, we want to stay
45
+ // in a clean state, so reset this.dirtyChecked
46
+ if (!this.isInsideRadioGroup()) {
47
+ this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
48
+ this.dirtyChecked = false;
49
+ }
50
+ }
51
+ }
52
+ /**
53
+ * @internal
54
+ */
55
+ connectedCallback() {
56
+ var _a, _b;
57
+ super.connectedCallback();
58
+ this.validate();
59
+ if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('role')) !== 'radiogroup' && this.getAttribute('tabindex') === null) {
60
+ if (!this.disabled) {
61
+ this.setAttribute('tabindex', '0');
62
+ }
63
+ }
64
+ if (this.checkedAttribute) {
65
+ if (!this.dirtyChecked) {
66
+ // Setting this.checked will cause us to enter a dirty state,
67
+ // but if we are clean when defaultChecked is changed, we want to stay
68
+ // in a clean state, so reset this.dirtyChecked
69
+ if (!this.isInsideRadioGroup()) {
70
+ this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
71
+ this.dirtyChecked = false;
72
+ }
73
+ }
74
+ }
75
+ }
76
+ isInsideRadioGroup() {
77
+ return this.radioGroup !== null;
78
+ }
79
+ /**
80
+ * Handles key presses on the radio.
81
+ * @beta
82
+ */
83
+ keypressHandler(e) {
84
+ var _a;
85
+ switch (e.key) {
86
+ case keySpace:
87
+ if (!this.checked && !((_a = this.radioGroup) === null || _a === void 0 ? void 0 : _a.readOnly)) {
88
+ this.checked = true;
89
+ }
90
+ return;
91
+ }
92
+ return true;
93
+ }
94
+ }
95
+ __decorate([
96
+ observable
97
+ ], Radio.prototype, "name", void 0);
98
+ __decorate([
99
+ observable
100
+ ], Radio.prototype, "defaultSlottedNodes", void 0);
101
+ //# sourceMappingURL=radio.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAGzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAejE;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,KAAM,SAAQ,mBAAmB;IAwC5C;QACE,KAAK,EAAE,CAAC;QAlCV;;;;;WAKG;QACI,iBAAY,GAAW,IAAI,CAAC;QA6BjC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,CAAC;IAtBD,IAAY,UAAU;QACpB,OAAQ,IAAoB,CAAC,OAAO,CAAC,mBAAmB,CAAsB,CAAC;IACjF,CAAC;IAED;;OAEG;IACI,qBAAqB;;QAC1B,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YAC1D,6DAA6D;YAC7D,sEAAsE;YACtE,+CAA+C;YAC/C,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,KAAK,CAAC;gBAC5C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;aAC3B;SACF;IACH,CAAC;IAOD;;OAEG;IACI,iBAAiB;;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,IAAI,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,MAAM,CAAC,MAAK,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE;YACvG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;aACpC;SACF;QAED,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;gBACtB,6DAA6D;gBAC7D,sEAAsE;gBACtE,+CAA+C;gBAC/C,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE;oBAC9B,IAAI,CAAC,OAAO,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,KAAK,CAAC;oBAC5C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;iBAC3B;aACF;SACF;IACH,CAAC;IAEO,kBAAkB;QACxB,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC;IAED;;;OAGG;IACI,eAAe,CAAC,CAAgB;;QACrC,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,QAAQ;gBACX,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,QAAQ,CAAA,EAAE;oBAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;iBACrB;gBACD,OAAO;SACV;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AArFC;IADC,UAAU;mCACU;AAcrB;IADC,UAAU;kDACyB"}
@@ -0,0 +1,118 @@
1
+ import { css } from '@microsoft/fast-element';
2
+ import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
3
+ import { borderRadiusCircular, borderRadiusSmall, colorCompoundBrandForeground1, colorCompoundBrandForeground1Pressed, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralForeground2, colorNeutralForeground3, colorNeutralForegroundDisabled, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorStrokeFocus1, colorStrokeFocus2, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, spacingHorizontalS, spacingHorizontalXS, spacingVerticalS, } from '../theme/design-tokens.js';
4
+ /** Radio styles
5
+ * @public
6
+ */
7
+ export const styles = css `
8
+ ${display('inline-grid')}
9
+
10
+ :host {
11
+ grid-auto-flow: column;
12
+ grid-template-columns: max-content;
13
+ gap: ${spacingHorizontalXS};
14
+ align-items: center;
15
+ height: 32px;
16
+ cursor: pointer;
17
+ outline: none;
18
+ position: relative;
19
+ user-select: none;
20
+ color: blue;
21
+ color: var(--state-color, ${colorNeutralForeground3});
22
+ padding-inline-end: ${spacingHorizontalS};
23
+ --control-border-color: ${colorNeutralStrokeAccessible};
24
+ --checked-indicator-background-color: ${colorCompoundBrandForeground1};
25
+ --state-color: ${colorNeutralForeground3};
26
+ }
27
+ :host([disabled]) {
28
+ --control-border-color: ${colorNeutralForegroundDisabled};
29
+ --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
30
+ --state-color: ${colorNeutralForegroundDisabled};
31
+ }
32
+ .label {
33
+ cursor: pointer;
34
+ font-family: ${fontFamilyBase};
35
+ font-size: ${fontSizeBase300};
36
+ font-weight: ${fontWeightRegular};
37
+ line-height: ${lineHeightBase300};
38
+ }
39
+ .label__hidden {
40
+ display: none;
41
+ }
42
+ .control {
43
+ box-sizing: border-box;
44
+ align-items: center;
45
+ border: 1px solid var(--control-border-color, ${colorNeutralStrokeAccessible});
46
+ border-radius: ${borderRadiusCircular};
47
+ display: flex;
48
+ height: 16px;
49
+ justify-content: center;
50
+ margin: ${spacingVerticalS} ${spacingHorizontalS};
51
+ position: relative;
52
+ width: 16px;
53
+ justify-self: center;
54
+ }
55
+ .checked-indicator {
56
+ border-radius: ${borderRadiusCircular};
57
+ height: 10px;
58
+ opacity: 0;
59
+ width: 10px;
60
+ }
61
+ :host([aria-checked='false']:hover) .control {
62
+ color: ${colorNeutralForeground2};
63
+ }
64
+ :host(:focus-visible) {
65
+ border-radius: ${borderRadiusSmall};
66
+ box-shadow: 0 0 0 3px ${colorStrokeFocus2};
67
+ outline: 1px solid ${colorStrokeFocus1};
68
+ }
69
+ :host(:hover) .control {
70
+ border-color: ${colorNeutralStrokeAccessibleHover};
71
+ }
72
+ :host(:active) .control {
73
+ border-color: ${colorNeutralStrokeAccessiblePressed};
74
+ }
75
+ :host([aria-checked='true']) .checked-indicator {
76
+ opacity: 1;
77
+ }
78
+ :host([aria-checked='true']) .control {
79
+ border-color: var(--control-border-color, ${colorNeutralStrokeAccessible});
80
+ }
81
+ :host([aria-checked='true']) .checked-indicator {
82
+ background-color: var(--checked-indicator-background-color, ${colorCompoundBrandForeground1});
83
+ }
84
+ :host([aria-checked='true']:hover) .control {
85
+ border-color: ${colorCompoundBrandStrokeHover};
86
+ }
87
+ :host([aria-checked='true']:hover) .checked-indicator {
88
+ background-color: ${colorCompoundBrandStrokeHover};
89
+ }
90
+ :host([aria-checked='true']:active) .control {
91
+ border-color: ${colorCompoundBrandStrokePressed};
92
+ }
93
+ :host([aria-checked='true']:active) .checked-indicator {
94
+ background: ${colorCompoundBrandForeground1Pressed};
95
+ }
96
+ :host([disabled]) {
97
+ color: ${colorNeutralForegroundDisabled};
98
+ pointer-events: none;
99
+ }
100
+ :host([disabled]) .control {
101
+ pointer-events: none;
102
+ border-color: ${colorNeutralForegroundDisabled};
103
+ }
104
+ :host([disabled]) .checked-indicator {
105
+ background: ${colorNeutralForegroundDisabled};
106
+ }
107
+ `.withBehaviors(forcedColorsStylesheetBehavior(css `
108
+ :host .control {
109
+ border-color: InactiveBorder;
110
+ }
111
+ :host([aria-checked='true']) .checked-indicator,
112
+ :host([aria-checked='true']:active) .checked-indicator,
113
+ :host([aria-checked='true']:hover) .checked-indicator {
114
+ background-color: Highlight;
115
+ border-color: ActiveBorder;
116
+ }
117
+ `));
118
+ //# sourceMappingURL=radio.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,6BAA6B,EAC7B,oCAAoC,EACpC,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;WAKf,mBAAmB;;;;;;;;gCAQE,uBAAuB;0BAC7B,kBAAkB;8BACd,4BAA4B;4CACd,6BAA6B;qBACpD,uBAAuB;;;8BAGd,8BAA8B;4CAChB,8BAA8B;qBACrD,8BAA8B;;;;mBAIhC,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;oDAQgB,4BAA4B;qBAC3D,oBAAoB;;;;cAI3B,gBAAgB,IAAI,kBAAkB;;;;;;qBAM/B,oBAAoB;;;;;;aAM5B,uBAAuB;;;qBAGf,iBAAiB;4BACV,iBAAiB;yBACpB,iBAAiB;;;oBAGtB,iCAAiC;;;oBAGjC,mCAAmC;;;;;;gDAMP,4BAA4B;;;kEAGV,6BAA6B;;;oBAG3E,6BAA6B;;;wBAGzB,6BAA6B;;;oBAGjC,+BAA+B;;;kBAGjC,oCAAoC;;;aAGzC,8BAA8B;;;;;oBAKvB,8BAA8B;;;kBAGhC,8BAA8B;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}
@@ -0,0 +1,32 @@
1
+ import { html, slotted } from '@microsoft/fast-element';
2
+ import { staticallyCompose, whitespaceFilter } from '../utils/index.js';
3
+ export function radioTemplate(options = {}) {
4
+ return html `
5
+ <template
6
+ role="radio"
7
+ aria-checked="${x => x.checked}"
8
+ aria-required="${x => x.required}"
9
+ aria-disabled="${x => x.disabled}"
10
+ @keypress="${(x, c) => x.keypressHandler(c.event)}"
11
+ >
12
+ <div part="control" class="control">
13
+ <slot name="checked-indicator"> ${staticallyCompose(options.checkedIndicator)} </slot>
14
+ </div>
15
+ <label
16
+ part="label"
17
+ class="${x => { var _a; return ['label', !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length) && 'label__hidden'].filter(Boolean).join(' '); }}"
18
+ >
19
+ <slot
20
+ ${slotted({
21
+ property: 'defaultSlottedNodes',
22
+ filter: whitespaceFilter,
23
+ })}
24
+ ></slot>
25
+ </label>
26
+ </template>
27
+ `;
28
+ }
29
+ export const template = radioTemplate({
30
+ checkedIndicator: html `<div part="checked-indicator" class="checked-indicator"></div>`,
31
+ });
32
+ //# sourceMappingURL=radio.template.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio.template.js","sourceRoot":"","sources":["../../../src/radio/radio.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGxE,MAAM,UAAU,aAAa,CAAkB,UAAwB,EAAE;IACvE,OAAO,IAAI,CAAG;;;sBAGM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;uBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;;;0CAG9B,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;;;;iBAIpE,CAAC,CAAC,EAAE,WAAC,OAAA,CAAC,OAAO,EAAE,CAAC,CAAA,MAAA,CAAC,CAAC,mBAAmB,0CAAE,MAAM,CAAA,IAAI,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,EAAA;;;YAGhG,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;GAIT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,CAAC;IAChE,gBAAgB,EAAE,IAAI,CAAA,gEAAgE;CACvF,CAAC,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { FluentDesignSystem } from '../fluent-design-system.js';
2
+ import { definition } from './radio-group.definition.js';
3
+ definition.define(FluentDesignSystem.registry);
4
+ //# sourceMappingURL=define.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/radio-group/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
@@ -0,0 +1,5 @@
1
+ export * from './radio-group.js';
2
+ export { definition as RadioGroupDefinition } from './radio-group.definition.js';
3
+ export { styles as RadioGroupStyles } from './radio-group.styles.js';
4
+ export { template as RadioGroupTemplate } from './radio-group.template.js';
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
@@ -0,0 +1,18 @@
1
+ import { FluentDesignSystem } from '../fluent-design-system.js';
2
+ import { RadioGroup } from './radio-group.js';
3
+ import { styles } from './radio-group.styles.js';
4
+ import { template } from './radio-group.template.js';
5
+ /**
6
+ * The Fluent RadioGroup Element.
7
+ *
8
+ *
9
+ * @public
10
+ * @remarks
11
+ * HTML Element: \<fluent-radio-group\>
12
+ */
13
+ export const definition = RadioGroup.compose({
14
+ name: `${FluentDesignSystem.prefix}-radio-group`,
15
+ template,
16
+ styles,
17
+ });
18
+ //# sourceMappingURL=radio-group.definition.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio-group.definition.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,cAAc;IAChD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}