@warp-ds/elements 2.10.0-next.9 → 2.10.1-next.1

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 (724) hide show
  1. package/dist/.storybook/utilities.js +4 -4
  2. package/dist/api.js.map +2 -2
  3. package/dist/custom-elements.json +1211 -542
  4. package/dist/docs/affix/affix.md +111 -2
  5. package/dist/docs/affix/api.md +2 -2
  6. package/dist/docs/affix/styling.md +107 -0
  7. package/dist/docs/alert/alert.md +5 -5
  8. package/dist/docs/alert/api.md +4 -4
  9. package/dist/docs/attention/api.md +50 -2
  10. package/dist/docs/attention/attention.md +53 -3
  11. package/dist/docs/badge/api.md +50 -4
  12. package/dist/docs/badge/badge.md +50 -4
  13. package/dist/docs/box/api.md +2 -2
  14. package/dist/docs/box/box.md +4 -2
  15. package/dist/docs/breadcrumb-item/api.md +27 -0
  16. package/dist/docs/breadcrumb-item/breadcrumb-item.md +36 -0
  17. package/dist/docs/breadcrumbs/accessibility.md +8 -18
  18. package/dist/docs/breadcrumbs/breadcrumbs.md +123 -34
  19. package/dist/docs/breadcrumbs/examples.md +8 -8
  20. package/dist/docs/breadcrumbs/styling.md +96 -0
  21. package/dist/docs/breadcrumbs/usage.md +8 -8
  22. package/dist/docs/button/api.md +32 -24
  23. package/dist/docs/button/button.md +35 -24
  24. package/dist/docs/card/api.md +8 -0
  25. package/dist/docs/card/card.md +10 -0
  26. package/dist/docs/checkbox/api.md +52 -13
  27. package/dist/docs/checkbox/checkbox.md +231 -14
  28. package/dist/docs/checkbox/styling.md +173 -0
  29. package/dist/docs/checkbox-group/api.md +30 -6
  30. package/dist/docs/checkbox-group/checkbox-group.md +66 -36
  31. package/dist/docs/checkbox-group/styling.md +31 -29
  32. package/dist/docs/combobox/api.md +20 -12
  33. package/dist/docs/combobox/combobox.md +22 -12
  34. package/dist/docs/datepicker/api.md +22 -14
  35. package/dist/docs/datepicker/datepicker.md +24 -16
  36. package/dist/docs/expandable/api.md +6 -6
  37. package/dist/docs/expandable/expandable.md +8 -6
  38. package/dist/docs/icon/api.md +4 -4
  39. package/dist/docs/icon/icon.md +5 -5
  40. package/dist/docs/index.md +35 -32
  41. package/dist/docs/link/api.md +10 -10
  42. package/dist/docs/link/link.md +13 -11
  43. package/dist/docs/modal/api.md +20 -2
  44. package/dist/docs/modal/modal.md +101 -10
  45. package/dist/docs/modal/styling.md +75 -0
  46. package/dist/docs/modal/usage.md +4 -8
  47. package/dist/docs/modal-footer/modal-footer.md +2 -0
  48. package/dist/docs/modal-header/modal-header.md +2 -0
  49. package/dist/docs/page-indicator/page-indicator.md +2 -0
  50. package/dist/docs/pagination/api.md +4 -4
  51. package/dist/docs/pagination/pagination.md +6 -4
  52. package/dist/docs/pill/api.md +8 -8
  53. package/dist/docs/pill/pill.md +10 -8
  54. package/dist/docs/radio/radio.md +5 -1
  55. package/dist/docs/radio-group/api.md +4 -4
  56. package/dist/docs/radio-group/radio-group.md +186 -69
  57. package/dist/docs/radio-group/styling.md +179 -64
  58. package/dist/docs/select/api.md +10 -10
  59. package/dist/docs/select/select.md +103 -10
  60. package/dist/docs/select/styling.md +91 -0
  61. package/dist/docs/slider/api.md +38 -22
  62. package/dist/docs/slider/slider.md +40 -22
  63. package/dist/docs/slider-thumb/api.md +28 -12
  64. package/dist/docs/slider-thumb/slider-thumb.md +28 -12
  65. package/dist/docs/snackbar/accessibility.md +20 -0
  66. package/dist/docs/snackbar/api.md +30 -0
  67. package/dist/docs/snackbar/examples.md +191 -0
  68. package/dist/docs/snackbar/snackbar.md +387 -0
  69. package/dist/docs/snackbar/styling.md +72 -0
  70. package/dist/docs/snackbar/usage.md +60 -0
  71. package/dist/docs/snackbar-item/api.md +41 -0
  72. package/dist/docs/snackbar-item/snackbar-item.md +51 -0
  73. package/dist/docs/step/api.md +16 -0
  74. package/dist/docs/step/step.md +19 -1
  75. package/dist/docs/step-indicator/step-indicator.md +2 -0
  76. package/dist/docs/switch/api.md +8 -0
  77. package/dist/docs/switch/switch.md +10 -0
  78. package/dist/docs/tab/tab.md +2 -0
  79. package/dist/docs/tab-panel/tab-panel.md +3 -0
  80. package/dist/docs/tabs/api.md +3 -3
  81. package/dist/docs/tabs/tabs.md +5 -3
  82. package/dist/docs/textarea/api.md +54 -14
  83. package/dist/docs/textarea/styling.md +91 -0
  84. package/dist/docs/textarea/textarea.md +146 -19
  85. package/dist/docs/textfield/api.md +74 -34
  86. package/dist/docs/textfield/styling.md +95 -0
  87. package/dist/docs/textfield/textfield.md +171 -34
  88. package/dist/entrypoint-react.d.ts +38 -0
  89. package/dist/entrypoint-react.js +39 -0
  90. package/dist/index.d.ts +1007 -154
  91. package/dist/packages/affix/affix-styles.d.ts +8 -0
  92. package/dist/packages/affix/affix-styles.js +108 -0
  93. package/dist/packages/affix/affix.d.ts +12 -14
  94. package/dist/packages/affix/affix.hydration.test.d.ts +1 -1
  95. package/dist/packages/affix/affix.hydration.test.js +15 -15
  96. package/dist/packages/affix/affix.js +451 -320
  97. package/dist/packages/affix/affix.js.map +4 -4
  98. package/dist/packages/affix/affix.react.stories.d.ts +3 -3
  99. package/dist/packages/affix/affix.react.stories.js +3 -3
  100. package/dist/packages/affix/affix.react.test.js +5 -3
  101. package/dist/packages/affix/affix.stories.d.ts +3 -3
  102. package/dist/packages/affix/affix.stories.js +10 -10
  103. package/dist/packages/affix/affix.test.d.ts +1 -1
  104. package/dist/packages/affix/affix.test.js +10 -10
  105. package/dist/packages/affix/react.d.ts +8 -3
  106. package/dist/packages/affix/react.js +11 -6
  107. package/dist/packages/affix/styles.js +2 -2
  108. package/dist/packages/alert/alert.d.ts +9 -6
  109. package/dist/packages/alert/alert.hydration.test.d.ts +1 -1
  110. package/dist/packages/alert/alert.hydration.test.js +21 -21
  111. package/dist/packages/alert/alert.js +349 -324
  112. package/dist/packages/alert/alert.js.map +3 -3
  113. package/dist/packages/alert/alert.react.stories.d.ts +2 -2
  114. package/dist/packages/alert/alert.react.stories.js +13 -13
  115. package/dist/packages/alert/alert.stories.d.ts +4 -4
  116. package/dist/packages/alert/alert.stories.js +29 -27
  117. package/dist/packages/alert/alert.test.d.ts +1 -1
  118. package/dist/packages/alert/alert.test.js +34 -21
  119. package/dist/packages/alert/react.d.ts +8 -1
  120. package/dist/packages/alert/react.js +11 -4
  121. package/dist/packages/alert/styles.js +2 -2
  122. package/dist/packages/attention/attention.d.ts +14 -7
  123. package/dist/packages/attention/attention.hydration.test.d.ts +1 -1
  124. package/dist/packages/attention/attention.hydration.test.js +29 -29
  125. package/dist/packages/attention/attention.js +1744 -1681
  126. package/dist/packages/attention/attention.js.map +4 -4
  127. package/dist/packages/attention/attention.react.stories.d.ts +3 -3
  128. package/dist/packages/attention/attention.react.stories.js +13 -13
  129. package/dist/packages/attention/attention.react.test.js +11 -7
  130. package/dist/packages/attention/attention.stories.d.ts +4 -4
  131. package/dist/packages/attention/attention.stories.js +126 -117
  132. package/dist/packages/attention/attention.test.d.ts +1 -1
  133. package/dist/packages/attention/attention.test.js +18 -10
  134. package/dist/packages/attention/layout-styles.js +900 -900
  135. package/dist/packages/attention/react.d.ts +16 -6
  136. package/dist/packages/attention/react.js +22 -11
  137. package/dist/packages/attention/styles.js +2 -2
  138. package/dist/packages/badge/badge.d.ts +8 -3
  139. package/dist/packages/badge/badge.hydration.test.d.ts +1 -1
  140. package/dist/packages/badge/badge.hydration.test.js +25 -25
  141. package/dist/packages/badge/badge.js +281 -281
  142. package/dist/packages/badge/badge.js.map +3 -3
  143. package/dist/packages/badge/badge.react.stories.d.ts +3 -3
  144. package/dist/packages/badge/badge.react.stories.js +17 -17
  145. package/dist/packages/badge/badge.stories.d.ts +3 -3
  146. package/dist/packages/badge/badge.stories.js +22 -20
  147. package/dist/packages/badge/badge.test.d.ts +1 -1
  148. package/dist/packages/badge/badge.test.js +13 -11
  149. package/dist/packages/badge/react.d.ts +6 -1
  150. package/dist/packages/badge/react.js +9 -4
  151. package/dist/packages/badge/styles.js +2 -2
  152. package/dist/packages/box/box.d.ts +7 -2
  153. package/dist/packages/box/box.hydration.test.d.ts +1 -1
  154. package/dist/packages/box/box.hydration.test.js +14 -14
  155. package/dist/packages/box/box.js +288 -288
  156. package/dist/packages/box/box.js.map +3 -3
  157. package/dist/packages/box/box.react.stories.d.ts +4 -4
  158. package/dist/packages/box/box.react.stories.js +8 -8
  159. package/dist/packages/box/box.stories.d.ts +3 -3
  160. package/dist/packages/box/box.stories.js +25 -19
  161. package/dist/packages/box/box.test.d.ts +1 -1
  162. package/dist/packages/box/box.test.js +6 -6
  163. package/dist/packages/box/react.d.ts +6 -1
  164. package/dist/packages/box/react.js +9 -4
  165. package/dist/packages/box/slot.test.d.ts +1 -1
  166. package/dist/packages/box/slot.test.js +6 -6
  167. package/dist/packages/box/styles.js +2 -2
  168. package/dist/packages/breadcrumb-item/breadcrumb-item.d.ts +34 -0
  169. package/dist/packages/breadcrumb-item/breadcrumb-item.js +2529 -0
  170. package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +7 -0
  171. package/dist/packages/breadcrumb-item/react.d.ts +8 -0
  172. package/dist/packages/breadcrumb-item/react.js +17 -0
  173. package/dist/packages/breadcrumb-item/styles.d.ts +4 -0
  174. package/dist/packages/breadcrumb-item/styles.js +81 -0
  175. package/dist/packages/breadcrumbs/breadcrumbs.d.ts +11 -4
  176. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.d.ts +1 -1
  177. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +55 -49
  178. package/dist/packages/breadcrumbs/breadcrumbs.js +288 -284
  179. package/dist/packages/breadcrumbs/breadcrumbs.js.map +4 -4
  180. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +4 -4
  181. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +17 -16
  182. package/dist/packages/breadcrumbs/breadcrumbs.stories.d.ts +7 -8
  183. package/dist/packages/breadcrumbs/breadcrumbs.stories.js +30 -26
  184. package/dist/packages/breadcrumbs/breadcrumbs.test.d.ts +1 -1
  185. package/dist/packages/breadcrumbs/breadcrumbs.test.js +19 -17
  186. package/dist/packages/breadcrumbs/react.d.ts +8 -1
  187. package/dist/packages/breadcrumbs/react.js +11 -4
  188. package/dist/packages/breadcrumbs/styles.js +2 -2
  189. package/dist/packages/button/button.d.ts +22 -16
  190. package/dist/packages/button/button.hydration.test.d.ts +1 -1
  191. package/dist/packages/button/button.hydration.test.js +19 -19
  192. package/dist/packages/button/button.js +758 -711
  193. package/dist/packages/button/button.js.map +4 -4
  194. package/dist/packages/button/button.react.stories.d.ts +5 -5
  195. package/dist/packages/button/button.react.stories.js +30 -30
  196. package/dist/packages/button/button.react.test.js +13 -13
  197. package/dist/packages/button/button.stories.d.ts +4 -4
  198. package/dist/packages/button/button.stories.js +276 -167
  199. package/dist/packages/button/button.test.d.ts +1 -1
  200. package/dist/packages/button/button.test.js +36 -35
  201. package/dist/packages/button/react.d.ts +10 -3
  202. package/dist/packages/button/react.js +14 -7
  203. package/dist/packages/button/styles.js +373 -331
  204. package/dist/packages/card/card.d.ts +7 -2
  205. package/dist/packages/card/card.hydration.test.d.ts +1 -1
  206. package/dist/packages/card/card.hydration.test.js +14 -14
  207. package/dist/packages/card/card.js +310 -295
  208. package/dist/packages/card/card.js.map +4 -4
  209. package/dist/packages/card/card.react.stories.d.ts +4 -4
  210. package/dist/packages/card/card.react.stories.js +11 -11
  211. package/dist/packages/card/card.stories.d.ts +3 -3
  212. package/dist/packages/card/card.stories.js +36 -24
  213. package/dist/packages/card/card.test.d.ts +1 -1
  214. package/dist/packages/card/card.test.js +6 -6
  215. package/dist/packages/card/react.d.ts +6 -1
  216. package/dist/packages/card/react.js +9 -4
  217. package/dist/packages/card/styles.js +2 -2
  218. package/dist/packages/checkbox/checkbox.a11y.test.d.ts +1 -1
  219. package/dist/packages/checkbox/checkbox.a11y.test.js +47 -33
  220. package/dist/packages/checkbox/checkbox.d.ts +10 -4
  221. package/dist/packages/checkbox/checkbox.hydration.test.d.ts +1 -1
  222. package/dist/packages/checkbox/checkbox.hydration.test.js +21 -21
  223. package/dist/packages/checkbox/checkbox.js +481 -430
  224. package/dist/packages/checkbox/checkbox.js.map +3 -3
  225. package/dist/packages/checkbox/checkbox.react.stories.d.ts +4 -4
  226. package/dist/packages/checkbox/checkbox.react.stories.js +3 -3
  227. package/dist/packages/checkbox/checkbox.stories.d.ts +4 -4
  228. package/dist/packages/checkbox/checkbox.stories.js +99 -91
  229. package/dist/packages/checkbox/checkbox.test.d.ts +1 -1
  230. package/dist/packages/checkbox/checkbox.test.js +64 -64
  231. package/dist/packages/checkbox/react.d.ts +12 -3
  232. package/dist/packages/checkbox/react.js +13 -6
  233. package/dist/packages/checkbox/styles.js +183 -132
  234. package/dist/packages/checkbox-group/checkbox-group.a11y.test.d.ts +2 -2
  235. package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +83 -73
  236. package/dist/packages/checkbox-group/checkbox-group.d.ts +13 -6
  237. package/dist/packages/checkbox-group/checkbox-group.hydration.test.d.ts +2 -2
  238. package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +36 -19
  239. package/dist/packages/checkbox-group/checkbox-group.js +62 -57
  240. package/dist/packages/checkbox-group/checkbox-group.js.map +3 -3
  241. package/dist/packages/checkbox-group/checkbox-group.react.test.js +4 -4
  242. package/dist/packages/checkbox-group/checkbox-group.test.d.ts +2 -2
  243. package/dist/packages/checkbox-group/checkbox-group.test.js +183 -90
  244. package/dist/packages/checkbox-group/react.d.ts +10 -3
  245. package/dist/packages/checkbox-group/react.js +13 -6
  246. package/dist/packages/combobox/combobox.a11y.test.d.ts +2 -2
  247. package/dist/packages/combobox/combobox.a11y.test.js +72 -49
  248. package/dist/packages/combobox/combobox.d.ts +8 -3
  249. package/dist/packages/combobox/combobox.hydration.test.d.ts +1 -1
  250. package/dist/packages/combobox/combobox.hydration.test.js +45 -45
  251. package/dist/packages/combobox/combobox.js +337 -338
  252. package/dist/packages/combobox/combobox.js.map +4 -4
  253. package/dist/packages/combobox/combobox.react.stories.d.ts +45 -13
  254. package/dist/packages/combobox/combobox.react.stories.js +29 -29
  255. package/dist/packages/combobox/combobox.react.test.js +8 -8
  256. package/dist/packages/combobox/combobox.stories.d.ts +4 -4
  257. package/dist/packages/combobox/combobox.stories.js +100 -94
  258. package/dist/packages/combobox/combobox.test.d.ts +2 -2
  259. package/dist/packages/combobox/combobox.test.js +249 -133
  260. package/dist/packages/combobox/react.d.ts +28 -7
  261. package/dist/packages/combobox/react.js +23 -14
  262. package/dist/packages/combobox/styles.js +2 -3
  263. package/dist/packages/datepicker/DatePicker.test.d.ts +2 -2
  264. package/dist/packages/datepicker/DatePicker.test.js +49 -42
  265. package/dist/packages/datepicker/datepicker.d.ts +15 -12
  266. package/dist/packages/datepicker/datepicker.hydration.test.d.ts +1 -1
  267. package/dist/packages/datepicker/datepicker.hydration.test.js +21 -21
  268. package/dist/packages/datepicker/datepicker.js +673 -632
  269. package/dist/packages/datepicker/datepicker.js.map +4 -4
  270. package/dist/packages/datepicker/datepicker.react.stories.d.ts +17 -17
  271. package/dist/packages/datepicker/datepicker.react.stories.js +9 -9
  272. package/dist/packages/datepicker/datepicker.react.test.js +6 -6
  273. package/dist/packages/datepicker/datepicker.stories.d.ts +4 -4
  274. package/dist/packages/datepicker/datepicker.stories.js +32 -32
  275. package/dist/packages/datepicker/datepicker.test.d.ts +2 -2
  276. package/dist/packages/datepicker/datepicker.test.js +77 -79
  277. package/dist/packages/datepicker/react.d.ts +15 -9
  278. package/dist/packages/datepicker/react.js +21 -14
  279. package/dist/packages/datepicker/styles/w-datepicker-calendar.styles.js +13 -12
  280. package/dist/packages/datepicker/styles/w-datepicker-day.styles.js +58 -55
  281. package/dist/packages/datepicker/styles/w-datepicker-month.styles.js +60 -57
  282. package/dist/packages/datepicker/styles/w-datepicker.styles.js +87 -87
  283. package/dist/packages/datepicker/utils.d.ts +3 -0
  284. package/dist/packages/datepicker/utils.js +40 -1
  285. package/dist/packages/datepicker/utils.test.d.ts +1 -0
  286. package/dist/packages/datepicker/utils.test.js +29 -0
  287. package/dist/packages/expandable/expandable.d.ts +14 -7
  288. package/dist/packages/expandable/expandable.hydration.test.d.ts +1 -1
  289. package/dist/packages/expandable/expandable.hydration.test.js +21 -21
  290. package/dist/packages/expandable/expandable.js +359 -332
  291. package/dist/packages/expandable/expandable.js.map +4 -4
  292. package/dist/packages/expandable/expandable.react.stories.d.ts +3 -3
  293. package/dist/packages/expandable/expandable.react.stories.js +7 -7
  294. package/dist/packages/expandable/expandable.react.test.js +15 -7
  295. package/dist/packages/expandable/expandable.stories.d.ts +5 -5
  296. package/dist/packages/expandable/expandable.stories.js +51 -45
  297. package/dist/packages/expandable/expandable.test.d.ts +1 -1
  298. package/dist/packages/expandable/expandable.test.js +19 -17
  299. package/dist/packages/expandable/react.d.ts +7 -2
  300. package/dist/packages/expandable/react.js +14 -9
  301. package/dist/packages/expandable/styles.js +2 -2
  302. package/dist/packages/global.d.ts +1 -0
  303. package/dist/packages/global.js +5 -0
  304. package/dist/packages/i18n.d.ts +1 -1
  305. package/dist/packages/i18n.js +37 -29
  306. package/dist/packages/icon/icon.d.ts +10 -2
  307. package/dist/packages/icon/icon.hydration.test.d.ts +1 -1
  308. package/dist/packages/icon/icon.hydration.test.js +25 -25
  309. package/dist/packages/icon/icon.js +31 -26
  310. package/dist/packages/icon/icon.js.map +2 -2
  311. package/dist/packages/icon/icon.react.stories.d.ts +3 -2
  312. package/dist/packages/icon/icon.react.stories.js +284 -283
  313. package/dist/packages/icon/icon.stories.d.ts +7 -30
  314. package/dist/packages/icon/icon.stories.js +307 -297
  315. package/dist/packages/icon/icon.test.d.ts +1 -1
  316. package/dist/packages/icon/icon.test.js +36 -28
  317. package/dist/packages/icon/react.d.ts +4 -1
  318. package/dist/packages/icon/react.js +7 -4
  319. package/dist/packages/icon/style.js +24 -25
  320. package/dist/packages/interaction-type-detection.d.ts +22 -0
  321. package/dist/packages/interaction-type-detection.js +38 -0
  322. package/dist/packages/link/link.d.ts +14 -9
  323. package/dist/packages/link/link.hydration.test.d.ts +1 -1
  324. package/dist/packages/link/link.hydration.test.js +27 -27
  325. package/dist/packages/link/link.js +726 -679
  326. package/dist/packages/link/link.js.map +3 -3
  327. package/dist/packages/link/link.react.stories.d.ts +5 -5
  328. package/dist/packages/link/link.react.stories.js +42 -42
  329. package/dist/packages/link/link.react.test.js +5 -3
  330. package/dist/packages/link/link.stories.d.ts +3 -3
  331. package/dist/packages/link/link.stories.js +51 -51
  332. package/dist/packages/link/link.test.d.ts +1 -1
  333. package/dist/packages/link/link.test.js +11 -7
  334. package/dist/packages/link/react.d.ts +8 -3
  335. package/dist/packages/link/react.js +11 -6
  336. package/dist/packages/link/styles.js +63 -58
  337. package/dist/packages/modal/index.d.ts +7 -7
  338. package/dist/packages/modal/index.js +7 -7
  339. package/dist/packages/modal/modal.d.ts +26 -4
  340. package/dist/packages/modal/modal.hydration.test.d.ts +1 -1
  341. package/dist/packages/modal/modal.hydration.test.js +12 -12
  342. package/dist/packages/modal/modal.js +456 -409
  343. package/dist/packages/modal/modal.js.map +4 -4
  344. package/dist/packages/modal/modal.react.stories.d.ts +7 -7
  345. package/dist/packages/modal/modal.react.stories.js +15 -6
  346. package/dist/packages/modal/modal.react.test.js +5 -5
  347. package/dist/packages/modal/modal.stories.d.ts +9 -8
  348. package/dist/packages/modal/modal.stories.js +266 -248
  349. package/dist/packages/modal/react.d.ts +40 -8
  350. package/dist/packages/modal/react.js +45 -13
  351. package/dist/packages/modal/styles.d.ts +1 -0
  352. package/dist/packages/modal/styles.js +171 -0
  353. package/dist/packages/modal/util.js +3 -1
  354. package/dist/packages/modal-footer/modal-footer.d.ts +13 -2
  355. package/dist/packages/modal-footer/modal-footer.js +299 -296
  356. package/dist/packages/modal-footer/modal-footer.js.map +4 -4
  357. package/dist/packages/modal-footer/react.d.ts +6 -1
  358. package/dist/packages/modal-footer/react.js +9 -4
  359. package/dist/packages/modal-footer/styles.d.ts +1 -0
  360. package/dist/packages/modal-footer/styles.js +22 -0
  361. package/dist/packages/modal-header/modal-header.d.ts +21 -7
  362. package/dist/packages/modal-header/modal-header.js +451 -422
  363. package/dist/packages/modal-header/modal-header.js.map +4 -4
  364. package/dist/packages/modal-header/modal-header.react.test.js +5 -3
  365. package/dist/packages/modal-header/react.d.ts +9 -4
  366. package/dist/packages/modal-header/react.js +13 -8
  367. package/dist/packages/modal-header/styles.d.ts +1 -0
  368. package/dist/packages/modal-header/styles.js +96 -0
  369. package/dist/packages/page-indicator/page-indicator.d.ts +8 -5
  370. package/dist/packages/page-indicator/page-indicator.hydration.test.d.ts +1 -1
  371. package/dist/packages/page-indicator/page-indicator.hydration.test.js +22 -22
  372. package/dist/packages/page-indicator/page-indicator.js +29 -29
  373. package/dist/packages/page-indicator/page-indicator.js.map +4 -4
  374. package/dist/packages/page-indicator/page-indicator.react.stories.d.ts +3 -3
  375. package/dist/packages/page-indicator/page-indicator.react.stories.js +11 -11
  376. package/dist/packages/page-indicator/page-indicator.react.test.js +5 -5
  377. package/dist/packages/page-indicator/page-indicator.stories.d.ts +9 -27
  378. package/dist/packages/page-indicator/page-indicator.stories.js +63 -32
  379. package/dist/packages/page-indicator/page-indicator.test.d.ts +1 -1
  380. package/dist/packages/page-indicator/page-indicator.test.js +110 -70
  381. package/dist/packages/page-indicator/react.d.ts +9 -2
  382. package/dist/packages/page-indicator/react.js +14 -7
  383. package/dist/packages/page-indicator/style.js +21 -21
  384. package/dist/packages/pagination/pagination.a11y.test.d.ts +1 -1
  385. package/dist/packages/pagination/pagination.a11y.test.js +59 -25
  386. package/dist/packages/pagination/pagination.d.ts +17 -11
  387. package/dist/packages/pagination/pagination.hydration.test.d.ts +1 -1
  388. package/dist/packages/pagination/pagination.hydration.test.js +19 -19
  389. package/dist/packages/pagination/pagination.js +385 -354
  390. package/dist/packages/pagination/pagination.js.map +4 -4
  391. package/dist/packages/pagination/pagination.react.stories.d.ts +19 -11
  392. package/dist/packages/pagination/pagination.react.stories.js +8 -8
  393. package/dist/packages/pagination/pagination.react.test.js +6 -6
  394. package/dist/packages/pagination/pagination.stories.d.ts +3 -3
  395. package/dist/packages/pagination/pagination.stories.js +18 -18
  396. package/dist/packages/pagination/pagination.test.d.ts +1 -1
  397. package/dist/packages/pagination/pagination.test.js +146 -72
  398. package/dist/packages/pagination/react.d.ts +15 -6
  399. package/dist/packages/pagination/react.js +17 -10
  400. package/dist/packages/pagination/styles.js +2 -2
  401. package/dist/packages/pill/pill.d.ts +13 -6
  402. package/dist/packages/pill/pill.hydration.test.d.ts +1 -1
  403. package/dist/packages/pill/pill.hydration.test.js +14 -14
  404. package/dist/packages/pill/pill.js +337 -314
  405. package/dist/packages/pill/pill.js.map +4 -4
  406. package/dist/packages/pill/pill.react.stories.d.ts +15 -11
  407. package/dist/packages/pill/pill.react.stories.js +7 -3
  408. package/dist/packages/pill/pill.react.test.js +8 -8
  409. package/dist/packages/pill/pill.stories.d.ts +3 -3
  410. package/dist/packages/pill/pill.stories.js +8 -8
  411. package/dist/packages/pill/pill.test.d.ts +1 -1
  412. package/dist/packages/pill/pill.test.js +17 -15
  413. package/dist/packages/pill/react.d.ts +11 -6
  414. package/dist/packages/pill/react.js +23 -14
  415. package/dist/packages/pill/styles.js +2 -2
  416. package/dist/packages/radio/base-element.d.ts +3 -3
  417. package/dist/packages/radio/base-element.js +3 -3
  418. package/dist/packages/radio/custom-error-validator.d.ts +1 -1
  419. package/dist/packages/radio/custom-error-validator.js +3 -3
  420. package/dist/packages/radio/form-associated-element.d.ts +9 -9
  421. package/dist/packages/radio/form-associated-element.js +27 -26
  422. package/dist/packages/radio/host-styles.js +9 -9
  423. package/dist/packages/radio/invalid.d.ts +1 -1
  424. package/dist/packages/radio/invalid.js +1 -1
  425. package/dist/packages/radio/radio-styles.js +199 -160
  426. package/dist/packages/radio/radio.a11y.test.d.ts +2 -2
  427. package/dist/packages/radio/radio.a11y.test.js +60 -58
  428. package/dist/packages/radio/radio.d.ts +10 -4
  429. package/dist/packages/radio/radio.hydration.test.d.ts +1 -1
  430. package/dist/packages/radio/radio.hydration.test.js +23 -14
  431. package/dist/packages/radio/radio.js +491 -452
  432. package/dist/packages/radio/radio.js.map +3 -3
  433. package/dist/packages/radio/radio.react.stories.d.ts +2 -2
  434. package/dist/packages/radio/radio.react.stories.js +3 -3
  435. package/dist/packages/radio/radio.stories.d.ts +4 -4
  436. package/dist/packages/radio/radio.stories.js +152 -136
  437. package/dist/packages/radio/radio.test.d.ts +1 -1
  438. package/dist/packages/radio/radio.test.js +74 -73
  439. package/dist/packages/radio/react.d.ts +8 -1
  440. package/dist/packages/radio/react.js +11 -4
  441. package/dist/packages/radio/required-validator.d.ts +1 -1
  442. package/dist/packages/radio/required-validator.js +12 -7
  443. package/dist/packages/radio/slot.d.ts +1 -1
  444. package/dist/packages/radio/slot.js +11 -8
  445. package/dist/packages/radio/watch.d.ts +1 -1
  446. package/dist/packages/radio/watch.js +3 -1
  447. package/dist/packages/radio-group/radio-group-styles.js +121 -88
  448. package/dist/packages/radio-group/radio-group.a11y.test.d.ts +2 -2
  449. package/dist/packages/radio-group/radio-group.a11y.test.js +81 -79
  450. package/dist/packages/radio-group/radio-group.d.ts +10 -8
  451. package/dist/packages/radio-group/radio-group.hydration.test.d.ts +2 -2
  452. package/dist/packages/radio-group/radio-group.hydration.test.js +29 -18
  453. package/dist/packages/radio-group/radio-group.js +654 -566
  454. package/dist/packages/radio-group/radio-group.js.map +4 -4
  455. package/dist/packages/radio-group/radio-group.react.test.js +4 -4
  456. package/dist/packages/radio-group/radio-group.test.d.ts +2 -2
  457. package/dist/packages/radio-group/radio-group.test.js +304 -230
  458. package/dist/packages/radio-group/react.d.ts +14 -7
  459. package/dist/packages/radio-group/react.js +18 -10
  460. package/dist/packages/select/input-styles.d.ts +11 -0
  461. package/dist/packages/select/input-styles.js +88 -0
  462. package/dist/packages/select/locales/da/messages.mjs +1 -1
  463. package/dist/packages/select/locales/en/messages.mjs +1 -1
  464. package/dist/packages/select/locales/fi/messages.mjs +1 -1
  465. package/dist/packages/select/locales/nb/messages.mjs +1 -1
  466. package/dist/packages/select/locales/sv/messages.mjs +1 -1
  467. package/dist/packages/select/react.d.ts +11 -5
  468. package/dist/packages/select/react.js +16 -11
  469. package/dist/packages/select/select.a11y.test.d.ts +1 -1
  470. package/dist/packages/select/select.a11y.test.js +98 -91
  471. package/dist/packages/select/select.d.ts +18 -13
  472. package/dist/packages/select/select.hydration.test.d.ts +1 -1
  473. package/dist/packages/select/select.hydration.test.js +16 -16
  474. package/dist/packages/select/select.js +432 -336
  475. package/dist/packages/select/select.js.map +4 -4
  476. package/dist/packages/select/select.react.stories.d.ts +10 -10
  477. package/dist/packages/select/select.react.stories.js +19 -14
  478. package/dist/packages/select/select.react.test.js +6 -6
  479. package/dist/packages/select/select.stories.d.ts +3 -3
  480. package/dist/packages/select/select.stories.js +51 -48
  481. package/dist/packages/select/select.test.d.ts +1 -1
  482. package/dist/packages/select/select.test.js +227 -178
  483. package/dist/packages/select/styles.js +2 -2
  484. package/dist/packages/slider/index.d.ts +2 -2
  485. package/dist/packages/slider/index.js +2 -2
  486. package/dist/packages/slider/locales/da/messages.mjs +1 -1
  487. package/dist/packages/slider/locales/en/messages.mjs +1 -1
  488. package/dist/packages/slider/locales/fi/messages.mjs +1 -1
  489. package/dist/packages/slider/locales/nb/messages.mjs +1 -1
  490. package/dist/packages/slider/locales/sv/messages.mjs +1 -1
  491. package/dist/packages/slider/react.d.ts +9 -4
  492. package/dist/packages/slider/react.js +14 -9
  493. package/dist/packages/slider/slider.d.ts +32 -17
  494. package/dist/packages/slider/slider.hydration.test.d.ts +1 -1
  495. package/dist/packages/slider/slider.hydration.test.js +39 -20
  496. package/dist/packages/slider/slider.js +523 -466
  497. package/dist/packages/slider/slider.js.map +4 -4
  498. package/dist/packages/slider/slider.react.stories.d.ts +4 -4
  499. package/dist/packages/slider/slider.react.stories.js +31 -34
  500. package/dist/packages/slider/slider.react.test.js +6 -6
  501. package/dist/packages/slider/slider.stories.d.ts +9 -7
  502. package/dist/packages/slider/slider.stories.js +369 -340
  503. package/dist/packages/slider/slider.test.d.ts +5 -5
  504. package/dist/packages/slider/slider.test.js +476 -336
  505. package/dist/packages/slider/styles/w-slider.styles.js +166 -148
  506. package/dist/packages/slider/styles.js +2 -2
  507. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.d.ts +1 -1
  508. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.js +1 -1
  509. package/dist/packages/slider-thumb/react.d.ts +16 -5
  510. package/dist/packages/slider-thumb/react.js +16 -9
  511. package/dist/packages/slider-thumb/slider-thumb.d.ts +22 -17
  512. package/dist/packages/slider-thumb/slider-thumb.hydration.test.d.ts +1 -1
  513. package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +26 -17
  514. package/dist/packages/slider-thumb/slider-thumb.js +549 -552
  515. package/dist/packages/slider-thumb/slider-thumb.js.map +4 -4
  516. package/dist/packages/slider-thumb/slider-thumb.react.test.js +9 -5
  517. package/dist/packages/slider-thumb/styles/w-slider-thumb.styles.js +189 -188
  518. package/dist/packages/slider-thumb/styles.d.ts +1 -0
  519. package/dist/packages/slider-thumb/styles.js +2 -0
  520. package/dist/packages/snackbar/locales/da/messages.d.mts +1 -0
  521. package/dist/packages/snackbar/locales/da/messages.mjs +1 -0
  522. package/dist/packages/snackbar/locales/en/messages.d.mts +1 -0
  523. package/dist/packages/snackbar/locales/en/messages.mjs +1 -0
  524. package/dist/packages/snackbar/locales/fi/messages.d.mts +1 -0
  525. package/dist/packages/snackbar/locales/fi/messages.mjs +1 -0
  526. package/dist/packages/snackbar/locales/nb/messages.d.mts +1 -0
  527. package/dist/packages/snackbar/locales/nb/messages.mjs +1 -0
  528. package/dist/packages/snackbar/locales/sv/messages.d.mts +1 -0
  529. package/dist/packages/snackbar/locales/sv/messages.mjs +1 -0
  530. package/dist/packages/snackbar/react.d.ts +41 -0
  531. package/dist/packages/snackbar/react.js +50 -0
  532. package/dist/packages/snackbar/snackbar.d.ts +134 -0
  533. package/dist/packages/snackbar/snackbar.hydration.test.d.ts +1 -0
  534. package/dist/packages/snackbar/snackbar.hydration.test.js +13 -0
  535. package/dist/packages/snackbar/snackbar.js +2665 -0
  536. package/dist/packages/snackbar/snackbar.js.map +7 -0
  537. package/dist/packages/snackbar/snackbar.react.stories.d.ts +12 -0
  538. package/dist/packages/snackbar/snackbar.react.stories.js +160 -0
  539. package/dist/packages/snackbar/snackbar.stories.d.ts +20 -0
  540. package/dist/packages/snackbar/snackbar.stories.js +363 -0
  541. package/dist/packages/snackbar/snackbar.test.d.ts +4 -0
  542. package/dist/packages/snackbar/snackbar.test.js +17 -0
  543. package/dist/packages/snackbar/styles.d.ts +1 -0
  544. package/dist/packages/snackbar/styles.js +35 -0
  545. package/dist/packages/snackbar-item/react.d.ts +12 -0
  546. package/dist/packages/snackbar-item/react.js +23 -0
  547. package/dist/packages/snackbar-item/snackbar-item.d.ts +71 -0
  548. package/dist/packages/snackbar-item/snackbar-item.js +2620 -0
  549. package/dist/packages/snackbar-item/snackbar-item.js.map +7 -0
  550. package/dist/packages/snackbar-item/snackbar-item.react.test.d.ts +1 -0
  551. package/dist/packages/snackbar-item/snackbar-item.react.test.js +5 -0
  552. package/dist/packages/snackbar-item/styles.d.ts +1 -0
  553. package/dist/packages/snackbar-item/styles.js +133 -0
  554. package/dist/packages/step/react.d.ts +6 -1
  555. package/dist/packages/step/react.js +9 -4
  556. package/dist/packages/step/step.d.ts +10 -3
  557. package/dist/packages/step/step.hydration.test.d.ts +1 -1
  558. package/dist/packages/step/step.hydration.test.js +10 -10
  559. package/dist/packages/step/step.js +336 -314
  560. package/dist/packages/step/step.js.map +4 -4
  561. package/dist/packages/step/styles.d.ts +1 -0
  562. package/dist/packages/step/styles.js +2 -0
  563. package/dist/packages/step-indicator/index.d.ts +2 -2
  564. package/dist/packages/step-indicator/index.js +2 -2
  565. package/dist/packages/step-indicator/react.d.ts +7 -2
  566. package/dist/packages/step-indicator/react.js +10 -5
  567. package/dist/packages/step-indicator/step-indicator.a11y.test.d.ts +2 -2
  568. package/dist/packages/step-indicator/step-indicator.a11y.test.js +48 -46
  569. package/dist/packages/step-indicator/step-indicator.d.ts +8 -1
  570. package/dist/packages/step-indicator/step-indicator.hydration.test.d.ts +1 -1
  571. package/dist/packages/step-indicator/step-indicator.hydration.test.js +10 -10
  572. package/dist/packages/step-indicator/step-indicator.js +285 -281
  573. package/dist/packages/step-indicator/step-indicator.js.map +3 -3
  574. package/dist/packages/step-indicator/stepindicator.react.stories.d.ts +2 -2
  575. package/dist/packages/step-indicator/stepindicator.react.stories.js +3 -3
  576. package/dist/packages/step-indicator/stepindicator.stories.d.ts +3 -3
  577. package/dist/packages/step-indicator/stepindicator.stories.js +129 -129
  578. package/dist/packages/step-indicator/styles.js +2 -2
  579. package/dist/packages/styles.js +277 -275
  580. package/dist/packages/switch/react.d.ts +9 -3
  581. package/dist/packages/switch/react.js +11 -6
  582. package/dist/packages/switch/styles.js +2 -2
  583. package/dist/packages/switch/switch.a11y.test.d.ts +1 -1
  584. package/dist/packages/switch/switch.a11y.test.js +46 -38
  585. package/dist/packages/switch/switch.d.ts +10 -3
  586. package/dist/packages/switch/switch.hydration.test.d.ts +1 -1
  587. package/dist/packages/switch/switch.hydration.test.js +23 -23
  588. package/dist/packages/switch/switch.js +304 -304
  589. package/dist/packages/switch/switch.js.map +3 -3
  590. package/dist/packages/switch/switch.react.stories.d.ts +4 -4
  591. package/dist/packages/switch/switch.react.stories.js +2 -2
  592. package/dist/packages/switch/switch.stories.d.ts +2 -2
  593. package/dist/packages/switch/switch.stories.js +42 -37
  594. package/dist/packages/switch/switch.test.d.ts +1 -1
  595. package/dist/packages/switch/switch.test.js +30 -35
  596. package/dist/packages/tab/react.d.ts +12 -7
  597. package/dist/packages/tab/react.js +14 -10
  598. package/dist/packages/tab/styles.d.ts +1 -0
  599. package/dist/packages/tab/styles.js +2 -0
  600. package/dist/packages/tab/tab.d.ts +13 -6
  601. package/dist/packages/tab/tab.hydration.test.d.ts +1 -1
  602. package/dist/packages/tab/tab.hydration.test.js +18 -12
  603. package/dist/packages/tab/tab.js +309 -308
  604. package/dist/packages/tab/tab.js.map +4 -4
  605. package/dist/packages/tab/tab.react.test.js +5 -3
  606. package/dist/packages/tab-panel/react.d.ts +10 -2
  607. package/dist/packages/tab-panel/react.js +18 -5
  608. package/dist/packages/tab-panel/tab-panel.d.ts +6 -3
  609. package/dist/packages/tab-panel/tab-panel.hydration.test.d.ts +1 -1
  610. package/dist/packages/tab-panel/tab-panel.hydration.test.js +13 -10
  611. package/dist/packages/tab-panel/tab-panel.js +293 -291
  612. package/dist/packages/tab-panel/tab-panel.js.map +3 -3
  613. package/dist/packages/tabs/index.d.ts +4 -4
  614. package/dist/packages/tabs/index.js +3 -3
  615. package/dist/packages/tabs/react.d.ts +31 -8
  616. package/dist/packages/tabs/react.js +34 -9
  617. package/dist/packages/tabs/styles.js +2 -2
  618. package/dist/packages/tabs/tabs.a11y.test.d.ts +3 -3
  619. package/dist/packages/tabs/tabs.a11y.test.js +188 -169
  620. package/dist/packages/tabs/tabs.d.ts +9 -6
  621. package/dist/packages/tabs/tabs.hydration.test.d.ts +3 -1
  622. package/dist/packages/tabs/tabs.hydration.test.js +22 -8
  623. package/dist/packages/tabs/tabs.js +293 -286
  624. package/dist/packages/tabs/tabs.js.map +3 -3
  625. package/dist/packages/tabs/tabs.react.stories.d.ts +12 -10
  626. package/dist/packages/tabs/tabs.react.stories.js +28 -28
  627. package/dist/packages/tabs/tabs.stories.d.ts +4 -4
  628. package/dist/packages/tabs/tabs.stories.js +101 -95
  629. package/dist/packages/tabs/tabs.test.d.ts +3 -3
  630. package/dist/packages/tabs/tabs.test.js +136 -122
  631. package/dist/packages/textarea/input-styles.d.ts +11 -0
  632. package/dist/packages/textarea/input-styles.js +88 -0
  633. package/dist/packages/textarea/locales/da/messages.mjs +1 -1
  634. package/dist/packages/textarea/locales/en/messages.mjs +1 -1
  635. package/dist/packages/textarea/locales/fi/messages.mjs +1 -1
  636. package/dist/packages/textarea/locales/nb/messages.mjs +1 -1
  637. package/dist/packages/textarea/locales/sv/messages.mjs +1 -1
  638. package/dist/packages/textarea/react.d.ts +17 -11
  639. package/dist/packages/textarea/react.js +22 -17
  640. package/dist/packages/textarea/styles.js +2 -2
  641. package/dist/packages/textarea/textarea.a11y.test.d.ts +1 -1
  642. package/dist/packages/textarea/textarea.a11y.test.js +90 -58
  643. package/dist/packages/textarea/textarea.d.ts +20 -20
  644. package/dist/packages/textarea/textarea.hydration.test.d.ts +1 -1
  645. package/dist/packages/textarea/textarea.hydration.test.js +19 -19
  646. package/dist/packages/textarea/textarea.js +385 -304
  647. package/dist/packages/textarea/textarea.js.map +4 -4
  648. package/dist/packages/textarea/textarea.react.stories.d.ts +38 -21
  649. package/dist/packages/textarea/textarea.react.stories.js +30 -13
  650. package/dist/packages/textarea/textarea.react.test.js +7 -7
  651. package/dist/packages/textarea/textarea.stories.d.ts +3 -3
  652. package/dist/packages/textarea/textarea.stories.js +44 -42
  653. package/dist/packages/textarea/textarea.test.d.ts +1 -1
  654. package/dist/packages/textarea/textarea.test.js +197 -88
  655. package/dist/packages/textfield/input-styles.d.ts +11 -0
  656. package/dist/packages/textfield/input-styles.js +88 -0
  657. package/dist/packages/textfield/locales/da/messages.d.mts +1 -0
  658. package/dist/packages/textfield/locales/da/messages.mjs +1 -0
  659. package/dist/packages/textfield/locales/en/messages.d.mts +1 -0
  660. package/dist/packages/textfield/locales/en/messages.mjs +1 -0
  661. package/dist/packages/textfield/locales/fi/messages.d.mts +1 -0
  662. package/dist/packages/textfield/locales/fi/messages.mjs +1 -0
  663. package/dist/packages/textfield/locales/nb/messages.d.mts +1 -0
  664. package/dist/packages/textfield/locales/nb/messages.mjs +1 -0
  665. package/dist/packages/textfield/locales/sv/messages.d.mts +1 -0
  666. package/dist/packages/textfield/locales/sv/messages.mjs +1 -0
  667. package/dist/packages/textfield/react.d.ts +17 -11
  668. package/dist/packages/textfield/react.js +22 -17
  669. package/dist/packages/textfield/react.test.d.ts +1 -0
  670. package/dist/packages/textfield/react.test.js +20 -0
  671. package/dist/packages/textfield/styles/w-textfield.styles.js +60 -58
  672. package/dist/packages/textfield/styles.js +2 -2
  673. package/dist/packages/textfield/textfield.d.ts +38 -26
  674. package/dist/packages/textfield/textfield.hydration.test.d.ts +1 -1
  675. package/dist/packages/textfield/textfield.hydration.test.js +19 -19
  676. package/dist/packages/textfield/textfield.js +468 -373
  677. package/dist/packages/textfield/textfield.js.map +4 -4
  678. package/dist/packages/textfield/textfield.react.stories.d.ts +51 -21
  679. package/dist/packages/textfield/textfield.react.stories.js +63 -31
  680. package/dist/packages/textfield/textfield.react.test.js +7 -7
  681. package/dist/packages/textfield/textfield.stories.d.ts +4 -4
  682. package/dist/packages/textfield/textfield.stories.js +107 -89
  683. package/dist/packages/textfield/textfield.test.d.ts +2 -2
  684. package/dist/packages/textfield/textfield.test.js +174 -71
  685. package/dist/packages/toast/api.d.ts +2 -2
  686. package/dist/packages/toast/api.js +3 -3
  687. package/dist/packages/toast/index.d.ts +5 -5
  688. package/dist/packages/toast/index.js +5 -5
  689. package/dist/packages/toast/styles.js +2 -2
  690. package/dist/packages/toast/toast.d.ts +10 -5
  691. package/dist/packages/toast/toast.js +349 -320
  692. package/dist/packages/toast/toast.js.map +4 -4
  693. package/dist/packages/toast/toast.stories.d.ts +4 -4
  694. package/dist/packages/toast/toast.stories.js +37 -16
  695. package/dist/packages/toast/toast.test.d.ts +1 -1
  696. package/dist/packages/toast/toast.test.js +48 -31
  697. package/dist/packages/toast/types.d.ts +1 -1
  698. package/dist/packages/toast-container/styles.d.ts +1 -0
  699. package/dist/packages/toast-container/styles.js +2 -0
  700. package/dist/packages/toast-container/toast-container.d.ts +8 -3
  701. package/dist/packages/toast-container/toast-container.js +295 -294
  702. package/dist/packages/toast-container/toast-container.js.map +4 -4
  703. package/dist/packages/types.d.ts +16 -0
  704. package/dist/packages/types.js +1 -0
  705. package/dist/packages/utils/element-collapse.d.ts +12 -0
  706. package/dist/packages/utils/element-collapse.js +102 -0
  707. package/dist/packages/utils/expand-transition.d.ts +1 -1
  708. package/dist/packages/utils/expand-transition.js +12 -10
  709. package/dist/packages/utils/unstyled-heading.d.ts +1 -1
  710. package/dist/packages/utils/unstyled-heading.js +4 -4
  711. package/dist/packages/utils/window-exists.js +1 -1
  712. package/dist/packages/utils.js +2 -2
  713. package/dist/setup-tests.d.ts +3 -3
  714. package/dist/setup-tests.js +16 -13
  715. package/dist/tests/react-hydration.js +29 -30
  716. package/dist/tests/react-ssr-attributes.d.ts +1 -1
  717. package/dist/tests/react-ssr-attributes.js +4 -4
  718. package/dist/web-types.json +458 -256
  719. package/eik/index.js +20 -2460
  720. package/package.json +21 -129
  721. package/dist/packages/slider/Slider.d.ts +0 -2
  722. package/dist/packages/slider/Slider.js +0 -8
  723. package/dist/packages/slider-thumb/SliderThumb.d.ts +0 -2
  724. package/dist/packages/slider-thumb/SliderThumb.js +0 -8
package/dist/docs/snackbar/snackbar.md ADDED
@@ -0,0 +1,387 @@
1
+ # Snackbar (w-snackbar)
2
+
3
+ ## Description
4
+
5
+ A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
6
+
7
+ Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
8
+
9
+ [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
10
+
11
+ ## Usage
12
+
13
+ Add `<w-snackbar>` as a direct child of `<body>`.
14
+
15
+ If you use a shared HTML template this may already have been done for you. You can check to see by running a query in your browser console:
16
+
17
+ ```js
18
+ // this should find an element,
19
+ // if not you should add <w-snackbar></w-snackbar> to <body>
20
+ document.querySelector("w-snackbar");
21
+ ```
22
+
23
+ `<w-snackbar>` sets up an ARIA live region that's ready for snackbar messages. We set this up ahead of time since some browsers and screen reader combinations have known issues when it comes to adding a live region and content at the same time.
24
+
25
+ ```html
26
+ <body>
27
+ <w-snackbar></w-snackbar>
28
+ </body>
29
+ ```
30
+
31
+ ### `<w-snackbar>` JS API
32
+
33
+ The `<w-snackbar>` element includes a [create function](#create) which you can use to create snackbar items.
34
+
35
+ ```js
36
+ const snackbar = document.querySelector("w-snackbar");
37
+ const snackbarItem = snackbar.create("Snackbar message");
38
+ ```
39
+
40
+ ### Snackbar item lifecycle
41
+
42
+ A snackbar item animates in from and out of the bottom of the screen unless the user has indicated a preference for reduced motion, in which case it appears and disappears without animation.
43
+
44
+ If more than one snackbar item is active at a time they will stack, with the new messages animating in above existing ones with the topmost item as the starting point of the animation.
45
+
46
+ However, only one snackbar item should be visible at a time. Be mindful of what triggers snackbars in your application to avoid creating a wall of snackbar items, for example in bulk editing operations.
47
+
48
+ #### Duration
49
+
50
+ Snackbar items automatically close after either:
51
+
52
+ - 4 seconds (short)
53
+ - 10 seconds (long)
54
+
55
+ You can also have a snackbar item last indefinitely, forcing users to dismiss it. We strongly encourage you to reconsider whether a snackbar is the right choice for you if you feel you need an indefinite snackbar item though, for the accessibility reasons outlined above.
56
+
57
+ ##### Pausing the countdown
58
+
59
+ To give people a better chance to read the snackbar message and consider taking action the duration countdown timer pauses when:
60
+
61
+ - A pointer hovers over the snackbar item.
62
+ - Either the action or close buttons have keyboard focus.
63
+
64
+ #### Closing
65
+
66
+ Users can close a snackbar item ahead of its configured duration by:
67
+
68
+ - Pressing the close button (present by default).
69
+ - Pressing the action button (if present).
70
+ - Pressing <kbd>Escape</kbd> on a keyboard.
71
+
72
+ ## Accessibility
73
+
74
+ From an accessibility perspective the snackbar component is problematic.
75
+
76
+ - Since the snackbar items disappear on their own users might not even see them, especially when zoomed in.
77
+ - The snackbar items are in practice impossible to reach with keyboard since they appear in the DOM away from the element that triggered them.
78
+ - Important elements on the page might get hidden behind the snackbar item.
79
+
80
+ A snackbar must never be the backbone of your user experience, it should only ever include information and actions that are available elsewhere.
81
+
82
+ - Keep messages and actions short since the snackbar item is available only for a short time.
83
+ - Ensure any information and action in the snackbar, such as Undo, is possible to do elsewhere.
84
+
85
+ `<w-snackbar>` creates an ARIA live region so messages you add to the snackbar get announced to assistive technologies.
86
+
87
+ ### Keyboard behavior
88
+
89
+ `<w-snackbar>` is problematic from a keyboard user perspective. We do not override the default <kbd>Tab</kbd> behavior, with the result that the focusable buttons in a snackbar item probably come first or last in the focus order, depending on what end of `<body>` you put `<w-snackbar>`. We're investigating ways to provide keyboard shortcuts for moving focus to the snackbar item, but have yet to conclude on a design.
90
+
91
+ `<w-snackbar>` sets up a keyboard event listener on `document`. Pressing <kbd>Escape</kbd> while a snackbar item is open will close it. If more than one item is open the oldest one will close.
92
+
93
+ ## Examples
94
+
95
+ ### Default
96
+
97
+ Snackbar uses the `neutral` variant with a short duration by default.
98
+
99
+ <elements-example>
100
+
101
+ ```html
102
+ <w-button data-testid="neutral-noaction">Neutral variant</w-button>
103
+
104
+ <script>
105
+ document.querySelector('w-button[data-testid="neutral-noaction"]').onclick = () => {
106
+ const snackbar = document.querySelector("w-snackbar");
107
+ snackbar.create("Snackbar message");
108
+ };
109
+ </script>
110
+ ```
111
+
112
+ </elements-example>
113
+
114
+ #### With action
115
+
116
+ You can include an action in the snackbar by providing a label and an onclick handler. By default the action button and close button are inline with the text.
117
+
118
+ Clicking an action button automatically closes the snackbar item. If you want to prevent this call `event.preventDefault()`.
119
+
120
+ You can use an action with any `variant`.
121
+
122
+ <elements-example>
123
+
124
+ ```html
125
+ <w-button data-testid="neutral-action">Neutral variant with action</w-button>
126
+
127
+ <script>
128
+ document.querySelector('w-button[data-testid="neutral-action"]').onclick = () => {
129
+ const snackbar = document.querySelector("w-snackbar");
130
+ snackbar.create("Snackbar message", {
131
+ action: {
132
+ label: "Undo",
133
+ onclick(e) {
134
+ console.log(e);
135
+ }
136
+ }
137
+ });
138
+ };
139
+ </script>
140
+ ```
141
+
142
+ </elements-example>
143
+
144
+ #### With long action label
145
+
146
+ By default a long label will result in the action and close buttons on a separate row. A label gets treated as long if it contains whitespace.
147
+
148
+ Clicking an action button automatically closes the snackbar item. If you want to prevent this call `event.preventDefault()`.
149
+
150
+ You can use an action with any `variant`.
151
+
152
+ <elements-example>
153
+
154
+ ```html
155
+ <w-button data-testid="neutral-longlabel">Neutral variant, long label</w-button>
156
+
157
+ <script>
158
+ document.querySelector('w-button[data-testid="neutral-longlabel"]').onclick = () => {
159
+ const snackbar = document.querySelector("w-snackbar");
160
+ snackbar.create("Snackbar message", {
161
+ action: {
162
+ label: "Undo this thing",
163
+ onclick(e) {
164
+ console.log(e);
165
+ }
166
+ }
167
+ });
168
+ };
169
+ </script>
170
+ ```
171
+
172
+ </elements-example>
173
+
174
+ ### Positive
175
+
176
+ <elements-example>
177
+
178
+ ```html
179
+ <w-button data-testid="positive-noaction">Positive variant</w-button>
180
+
181
+ <script>
182
+ document.querySelector('w-button[data-testid="positive-noaction"]').onclick = () => {
183
+ const snackbar = document.querySelector("w-snackbar");
184
+ snackbar.create("Snackbar message", {
185
+ variant: "positive",
186
+ });
187
+ };
188
+ </script>
189
+ ```
190
+
191
+ </elements-example>
192
+
193
+ ### Warning
194
+
195
+ <elements-example>
196
+
197
+ ```html
198
+ <w-button data-testid="warning-noaction">Warning variant</w-button>
199
+
200
+ <script>
201
+ document.querySelector('w-button[data-testid="warning-noaction"]').onclick = () => {
202
+ const snackbar = document.querySelector("w-snackbar");
203
+ snackbar.create("Snackbar message", {
204
+ variant: "warning",
205
+ });
206
+ };
207
+ </script>
208
+ ```
209
+
210
+ </elements-example>
211
+
212
+ ### Negative
213
+
214
+ <elements-example>
215
+
216
+ ```html
217
+ <w-button data-testid="negative-noaction">Negative variant</w-button>
218
+
219
+ <script>
220
+ document.querySelector('w-button[data-testid="negative-noaction"]').onclick = () => {
221
+ const snackbar = document.querySelector("w-snackbar");
222
+ snackbar.create("Snackbar message", {
223
+ variant: "negative",
224
+ });
225
+ };
226
+ </script>
227
+ ```
228
+
229
+ </elements-example>
230
+
231
+ ### Info
232
+
233
+ <elements-example>
234
+
235
+ ```html
236
+ <w-button data-testid="info-noaction">Info variant</w-button>
237
+
238
+ <script>
239
+ document.querySelector('w-button[data-testid="info-noaction"]').onclick = () => {
240
+ const snackbar = document.querySelector("w-snackbar");
241
+ snackbar.create("Snackbar message", {
242
+ variant: "info",
243
+ });
244
+ };
245
+ </script>
246
+ ```
247
+
248
+ </elements-example>
249
+
250
+ ### Neutral with custom icon
251
+
252
+ If you have cases not covered by the `create` API you can change the item returned by `create`.
253
+
254
+ For example, here is how you can add a custom icon to the neutral variant.
255
+
256
+ ```ts
257
+ const snackbar = document.querySelector<WarpSnackbar>('w-snackbar');
258
+
259
+ // the default neutral variant is without an icon
260
+ const snackbarItem = snackbar!.create('The message should be short');
261
+
262
+ const customIcon = document.createElement('w-icon');
263
+ customIcon.name = 'Rocket';
264
+ customIcon.slot = 'icon';
265
+ snackbarItem.prepend(customIcon);
266
+ ```
267
+
268
+ ### Create `<w-snackbar-item>` manually
269
+
270
+ Alternatively you can create a `w-snackbar-item` manually and call [prepend](https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend) on `<w-snackbar>`. The snackbar item handles its entire lifecycle on its own.
271
+
272
+ Note that by not using `snackbar.create()` you have to create and wire up event handlers any close- and action button.
273
+
274
+ ```ts
275
+ const snackbar = document.querySelector("w-snackbar");
276
+ const item = document.createElement("w-snackbar-item");
277
+ item.variant = "info";
278
+ item.innerHTML = /* html */ `
279
+ <w-icon slot="icon" name="Rocket"></w-icon>
280
+ Warp speed engaged!
281
+ `;
282
+ snackbar.prepend(item);
283
+ ```
284
+
285
+ ## Styling
286
+
287
+ Snackbar supports styling through **component tokens** (CSS custom properties with a --w-c- prefix) and **parts**.
288
+
289
+ ### Parts
290
+
291
+ Use `::part(...)` from outside the component.
292
+
293
+ #### `<w-snackbar>` parts
294
+
295
+ - `container` - the live region that positions messages on the screen.
296
+
297
+ #### `<w-snackbar-item>` parts
298
+
299
+ - `item` - the container wrapping the message, icon and actions.
300
+ - `icon` - the icon for the variant.
301
+ - `message` - the default slot, body of the snackbar item.
302
+ - `action` - close and action button.
303
+
304
+ ### Component tokens
305
+
306
+ #### `<w-snackbar>` tokens
307
+
308
+ Set these on `w-snackbar` to override visuals.
309
+
310
+ ```css
311
+ w-snackbar {
312
+ --w-c-snackbar-position-bottom: 32px;
313
+ }
314
+ ```
315
+
316
+ ##### Layout and typography
317
+
318
+ - `--w-c-snackbar-container-gap`
319
+ - `--w-c-snackbar-position-bottom`
320
+ - `--w-c-snackbar-position-left`
321
+ - `--w-c-snackbar-position-right`
322
+ - `--w-c-snackbar-position-top`
323
+ - `--w-c-snackbar-z-index`
324
+
325
+ #### `<w-snackbar-item>` tokens
326
+
327
+ Set these on `w-snackbar-item` to override visuals.
328
+
329
+ ```css
330
+ w-snackbar-item {
331
+ --w-c-snackbar-item-box-shadow: var(--w-shadow-s);
332
+ }
333
+ ```
334
+
335
+ ##### Layout and typography
336
+
337
+ - `--w-c-snackbar-item-radius`
338
+ - `--w-c-snackbar-item-max-width`
339
+ - `--w-c-snackbar-item-min-width`
340
+ - `--w-c-snackbar-item-padding`
341
+
342
+ ##### Background
343
+
344
+ - `--w-c-snackbar-item-bg`
345
+ - `--w-c-snackbar-item-action-bg-active`
346
+ - `--w-c-snackbar-item-action-bg-hover`
347
+
348
+ ##### Text color
349
+
350
+ - `--w-c-snackbar-item-color`
351
+ - `--w-c-snackbar-item-action-color-active`
352
+ - `--w-c-snackbar-item-action-color-hover`
353
+
354
+ ##### Shadow
355
+
356
+ - `--w-c-snackbar-item-box-shadow`
357
+
358
+ ## `<w-snackbar>` API
359
+
360
+ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
361
+
362
+ ### Properties
363
+
364
+ | Name | Type | Default | Summary |
365
+ |-|-|-|-|
366
+ | create (JS only) | `create(message: string, options: CreateSnackbarOptions = {}) => void` | `-` | Creates a snackbar item and immediately adds it to the snackbar. |
367
+
368
+ ### Property Details
369
+
370
+ #### create (JS only)
371
+
372
+ Creates a snackbar item and immediately adds it to the snackbar.
373
+
374
+ By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
375
+
376
+ If you include an `action` in the options the default `duration` is
377
+ set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
378
+
379
+ A `duration` of 10 seconds or longer forces the close button to be visible.
380
+
381
+ The default `variant` is `neutral` which does not have an icon.
382
+
383
+ Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
384
+
385
+ - Type: `create(message: string, options: CreateSnackbarOptions = {}) => void`
386
+ - Default: `-`
387
+
package/dist/docs/snackbar/styling.md ADDED
@@ -0,0 +1,72 @@
1
+ ## Styling
2
+
3
+ Snackbar supports styling through **component tokens** (CSS custom properties with a --w-c- prefix) and **parts**.
4
+
5
+ ### Parts
6
+
7
+ Use `::part(...)` from outside the component.
8
+
9
+ #### `<w-snackbar>` parts
10
+
11
+ - `container` - the live region that positions messages on the screen.
12
+
13
+ #### `<w-snackbar-item>` parts
14
+
15
+ - `item` - the container wrapping the message, icon and actions.
16
+ - `icon` - the icon for the variant.
17
+ - `message` - the default slot, body of the snackbar item.
18
+ - `action` - close and action button.
19
+
20
+ ### Component tokens
21
+
22
+ #### `<w-snackbar>` tokens
23
+
24
+ Set these on `w-snackbar` to override visuals.
25
+
26
+ ```css
27
+ w-snackbar {
28
+ --w-c-snackbar-position-bottom: 32px;
29
+ }
30
+ ```
31
+
32
+ ##### Layout and typography
33
+
34
+ - `--w-c-snackbar-container-gap`
35
+ - `--w-c-snackbar-position-bottom`
36
+ - `--w-c-snackbar-position-left`
37
+ - `--w-c-snackbar-position-right`
38
+ - `--w-c-snackbar-position-top`
39
+ - `--w-c-snackbar-z-index`
40
+
41
+ #### `<w-snackbar-item>` tokens
42
+
43
+ Set these on `w-snackbar-item` to override visuals.
44
+
45
+ ```css
46
+ w-snackbar-item {
47
+ --w-c-snackbar-item-box-shadow: var(--w-shadow-s);
48
+ }
49
+ ```
50
+
51
+ ##### Layout and typography
52
+
53
+ - `--w-c-snackbar-item-radius`
54
+ - `--w-c-snackbar-item-max-width`
55
+ - `--w-c-snackbar-item-min-width`
56
+ - `--w-c-snackbar-item-padding`
57
+
58
+ ##### Background
59
+
60
+ - `--w-c-snackbar-item-bg`
61
+ - `--w-c-snackbar-item-action-bg-active`
62
+ - `--w-c-snackbar-item-action-bg-hover`
63
+
64
+ ##### Text color
65
+
66
+ - `--w-c-snackbar-item-color`
67
+ - `--w-c-snackbar-item-action-color-active`
68
+ - `--w-c-snackbar-item-action-color-hover`
69
+
70
+ ##### Shadow
71
+
72
+ - `--w-c-snackbar-item-box-shadow`
package/dist/docs/snackbar/usage.md ADDED
@@ -0,0 +1,60 @@
1
+ ## Usage
2
+
3
+ Add `<w-snackbar>` as a direct child of `<body>`.
4
+
5
+ If you use a shared HTML template this may already have been done for you. You can check to see by running a query in your browser console:
6
+
7
+ ```js
8
+ // this should find an element,
9
+ // if not you should add <w-snackbar></w-snackbar> to <body>
10
+ document.querySelector("w-snackbar");
11
+ ```
12
+
13
+ `<w-snackbar>` sets up an ARIA live region that's ready for snackbar messages. We set this up ahead of time since some browsers and screen reader combinations have known issues when it comes to adding a live region and content at the same time.
14
+
15
+ ```html
16
+ <body>
17
+ <w-snackbar></w-snackbar>
18
+ </body>
19
+ ```
20
+
21
+ ### `<w-snackbar>` JS API
22
+
23
+ The `<w-snackbar>` element includes a [create function](#create) which you can use to create snackbar items.
24
+
25
+ ```js
26
+ const snackbar = document.querySelector("w-snackbar");
27
+ const snackbarItem = snackbar.create("Snackbar message");
28
+ ```
29
+
30
+ ### Snackbar item lifecycle
31
+
32
+ A snackbar item animates in from and out of the bottom of the screen unless the user has indicated a preference for reduced motion, in which case it appears and disappears without animation.
33
+
34
+ If more than one snackbar item is active at a time they will stack, with the new messages animating in above existing ones with the topmost item as the starting point of the animation.
35
+
36
+ However, only one snackbar item should be visible at a time. Be mindful of what triggers snackbars in your application to avoid creating a wall of snackbar items, for example in bulk editing operations.
37
+
38
+ #### Duration
39
+
40
+ Snackbar items automatically close after either:
41
+
42
+ - 4 seconds (short)
43
+ - 10 seconds (long)
44
+
45
+ You can also have a snackbar item last indefinitely, forcing users to dismiss it. We strongly encourage you to reconsider whether a snackbar is the right choice for you if you feel you need an indefinite snackbar item though, for the accessibility reasons outlined above.
46
+
47
+ ##### Pausing the countdown
48
+
49
+ To give people a better chance to read the snackbar message and consider taking action the duration countdown timer pauses when:
50
+
51
+ - A pointer hovers over the snackbar item.
52
+ - Either the action or close buttons have keyboard focus.
53
+
54
+ #### Closing
55
+
56
+ Users can close a snackbar item ahead of its configured duration by:
57
+
58
+ - Pressing the close button (present by default).
59
+ - Pressing the action button (if present).
60
+ - Pressing <kbd>Escape</kbd> on a keyboard.
package/dist/docs/snackbar-item/api.md ADDED
@@ -0,0 +1,41 @@
1
+ ### `<w-snackbar-item>` API
2
+
3
+ #### Properties
4
+
5
+ | Name | Type | Default | Summary |
6
+ |-|-|-|-|
7
+ | action-placement | [`SnackbarActionPlacement`](#snackbaractionplacement) | `"inline"` | The placement of the action and close buttons. |
8
+ | close (JS only) | `close() => void` | `-` | Remove the snackbar item from the document. |
9
+ | duration | `number` | `-` | How long the message should stay in the document before removing itself. |
10
+
11
+ #### Property Details
12
+
13
+ ##### action-placement
14
+
15
+ The placement of the action and close buttons.
16
+
17
+ - Type: [`SnackbarActionPlacement`](#snackbaractionplacement)
18
+ - Default: `"inline"`
19
+
20
+ ##### close (JS only)
21
+
22
+ Remove the snackbar item from the document.
23
+
24
+ Moves focus to the last focused element outside of the snackbar item, if available.
25
+
26
+ - Type: `close() => void`
27
+ - Default: `-`
28
+
29
+ ##### duration
30
+
31
+ How long the message should stay in the document before removing itself.
32
+
33
+ - Type: `number`
34
+ - Default: `-`
35
+
36
+ #### Types
37
+
38
+ ##### SnackbarActionPlacement
39
+
40
+ `'inline' | 'block'`
41
+
package/dist/docs/snackbar-item/snackbar-item.md ADDED
@@ -0,0 +1,51 @@
1
+ # SnackbarItem (w-snackbar-item)
2
+
3
+ ## Description
4
+
5
+ An item to show in a `w-snackbar`.
6
+
7
+ See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
8
+
9
+ [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
10
+
11
+ ### `<w-snackbar-item>` API
12
+
13
+ #### Properties
14
+
15
+ | Name | Type | Default | Summary |
16
+ |-|-|-|-|
17
+ | action-placement | [`SnackbarActionPlacement`](#snackbaractionplacement) | `"inline"` | The placement of the action and close buttons. |
18
+ | close (JS only) | `close() => void` | `-` | Remove the snackbar item from the document. |
19
+ | duration | `number` | `-` | How long the message should stay in the document before removing itself. |
20
+
21
+ #### Property Details
22
+
23
+ ##### action-placement
24
+
25
+ The placement of the action and close buttons.
26
+
27
+ - Type: [`SnackbarActionPlacement`](#snackbaractionplacement)
28
+ - Default: `"inline"`
29
+
30
+ ##### close (JS only)
31
+
32
+ Remove the snackbar item from the document.
33
+
34
+ Moves focus to the last focused element outside of the snackbar item, if available.
35
+
36
+ - Type: `close() => void`
37
+ - Default: `-`
38
+
39
+ ##### duration
40
+
41
+ How long the message should stay in the document before removing itself.
42
+
43
+ - Type: `number`
44
+ - Default: `-`
45
+
46
+ #### Types
47
+
48
+ ##### SnackbarActionPlacement
49
+
50
+ `'inline' | 'block'`
51
+
package/dist/docs/step/api.md CHANGED
@@ -6,6 +6,8 @@
6
6
  |-|-|-|-|
7
7
  | active | `boolean` | `false` | Whether this step is active. |
8
8
  | completed | `boolean` | `false` | Whether this step is completed. |
9
+ | getAriaLabel (JS only) | `getAriaLabel() => void` | `-` | - |
10
+ | setContext (JS only) | `setContext(context: StepsContext) => void` | `-` | - |
9
11
 
10
12
  #### Property Details
11
13
 
@@ -27,3 +29,17 @@ Completed steps display a checkmark icon and a filled indicator.
27
29
  - Type: `boolean`
28
30
  - Default: `false`
29
31
 
32
+ ##### getAriaLabel (JS only)
33
+
34
+
35
+
36
+ - Type: `getAriaLabel() => void`
37
+ - Default: `-`
38
+
39
+ ##### setContext (JS only)
40
+
41
+
42
+
43
+ - Type: `setContext(context: StepsContext) => void`
44
+ - Default: `-`
45
+
package/dist/docs/step/step.md CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  ## Description
4
4
 
5
- Individual step component that shows a single step in a process
5
+ Individual step component that shows a single step in a process.
6
+
7
+ [Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)
6
8
 
7
9
  ### `<w-step>` API
8
10
 
@@ -12,6 +14,8 @@ Individual step component that shows a single step in a process
12
14
  |-|-|-|-|
13
15
  | active | `boolean` | `false` | Whether this step is active. |
14
16
  | completed | `boolean` | `false` | Whether this step is completed. |
17
+ | getAriaLabel (JS only) | `getAriaLabel() => void` | `-` | - |
18
+ | setContext (JS only) | `setContext(context: StepsContext) => void` | `-` | - |
15
19
 
16
20
  #### Property Details
17
21
 
@@ -33,3 +37,17 @@ Completed steps display a checkmark icon and a filled indicator.
33
37
  - Type: `boolean`
34
38
  - Default: `false`
35
39
 
40
+ ##### getAriaLabel (JS only)
41
+
42
+
43
+
44
+ - Type: `getAriaLabel() => void`
45
+ - Default: `-`
46
+
47
+ ##### setContext (JS only)
48
+
49
+
50
+
51
+ - Type: `setContext(context: StepsContext) => void`
52
+ - Default: `-`
53
+
package/dist/docs/step-indicator/step-indicator.md CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  Steps are used to show progress through a process or to guide users through a multi-step task.
6
6
 
7
+ [Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)
8
+
7
9
  ## Usage
8
10
 
9
11
  The steps component consists of two custom elements that work together: