@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.21

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 (758) hide show
  1. package/README.md +4 -0
  2. package/dist/.storybook/utilities.js +4 -4
  3. package/dist/api.js +1 -1
  4. package/dist/api.js.map +2 -2
  5. package/dist/custom-elements.json +1341 -619
  6. package/dist/docs/affix/affix.md +120 -3
  7. package/dist/docs/affix/api.md +2 -2
  8. package/dist/docs/affix/styling.md +108 -0
  9. package/dist/docs/alert/alert.md +6 -6
  10. package/dist/docs/alert/api.md +4 -4
  11. package/dist/docs/alert/styling.md +1 -0
  12. package/dist/docs/attention/api.md +50 -2
  13. package/dist/docs/attention/attention.md +52 -2
  14. package/dist/docs/attention/styling.md +1 -0
  15. package/dist/docs/badge/api.md +50 -4
  16. package/dist/docs/badge/badge.md +52 -4
  17. package/dist/docs/badge/styling.md +1 -0
  18. package/dist/docs/box/api.md +2 -2
  19. package/dist/docs/box/box.md +24 -42
  20. package/dist/docs/box/examples.md +20 -38
  21. package/dist/docs/box/styling.md +1 -0
  22. package/dist/docs/breadcrumb-item/api.md +27 -0
  23. package/dist/docs/breadcrumb-item/breadcrumb-item.md +34 -0
  24. package/dist/docs/breadcrumbs/accessibility.md +8 -18
  25. package/dist/docs/breadcrumbs/breadcrumbs.md +128 -36
  26. package/dist/docs/breadcrumbs/examples.md +15 -9
  27. package/dist/docs/breadcrumbs/styling.md +97 -0
  28. package/dist/docs/breadcrumbs/usage.md +8 -8
  29. package/dist/docs/button/api.md +32 -24
  30. package/dist/docs/button/button.md +105 -26
  31. package/dist/docs/button/styling.md +72 -0
  32. package/dist/docs/card/api.md +8 -0
  33. package/dist/docs/card/card.md +10 -2
  34. package/dist/docs/card/styling.md +1 -0
  35. package/dist/docs/checkbox/api.md +176 -0
  36. package/dist/docs/checkbox/checkbox.md +356 -0
  37. package/dist/docs/checkbox/styling.md +173 -0
  38. package/dist/docs/checkbox-group/accessibility.md +71 -0
  39. package/dist/docs/checkbox-group/api.md +103 -0
  40. package/dist/docs/checkbox-group/checkbox-group.md +529 -0
  41. package/dist/docs/checkbox-group/examples.md +105 -0
  42. package/dist/docs/checkbox-group/styling.md +134 -0
  43. package/dist/docs/checkbox-group/usage.md +95 -0
  44. package/dist/docs/combobox/accessibility.md +71 -0
  45. package/dist/docs/combobox/api.md +74 -36
  46. package/dist/docs/combobox/combobox.md +219 -38
  47. package/dist/docs/combobox/examples.md +44 -0
  48. package/dist/docs/combobox/styling.md +1 -0
  49. package/dist/docs/combobox/usage.md +28 -0
  50. package/dist/docs/datepicker/accessibility.md +25 -0
  51. package/dist/docs/datepicker/api.md +37 -21
  52. package/dist/docs/datepicker/datepicker.md +223 -23
  53. package/dist/docs/datepicker/examples.md +75 -0
  54. package/dist/docs/datepicker/styling.md +1 -0
  55. package/dist/docs/datepicker/usage.md +84 -0
  56. package/dist/docs/expandable/api.md +23 -35
  57. package/dist/docs/expandable/examples.md +54 -0
  58. package/dist/docs/expandable/expandable.md +77 -35
  59. package/dist/docs/expandable/styling.md +1 -0
  60. package/dist/docs/icon/accessibility.md +5 -0
  61. package/dist/docs/icon/api.md +43 -0
  62. package/dist/docs/icon/examples.md +45 -0
  63. package/dist/docs/icon/icon.md +115 -0
  64. package/dist/docs/icon/styling.md +1 -0
  65. package/dist/docs/icon/usage.md +11 -0
  66. package/dist/docs/index.md +49 -0
  67. package/dist/docs/link/api.md +24 -28
  68. package/dist/docs/link/examples.md +75 -0
  69. package/dist/docs/link/link.md +119 -30
  70. package/dist/docs/link/styling.md +1 -0
  71. package/dist/docs/link/usage.md +18 -0
  72. package/dist/docs/modal/api.md +18 -2
  73. package/dist/docs/modal/modal.md +20 -2
  74. package/dist/docs/modal/styling.md +1 -0
  75. package/dist/docs/modal-footer/modal-footer.md +0 -6
  76. package/dist/docs/modal-header/modal-header.md +0 -6
  77. package/dist/docs/page-indicator/page-indicator.md +2 -0
  78. package/dist/docs/page-indicator/styling.md +1 -0
  79. package/dist/docs/pagination/api.md +4 -4
  80. package/dist/docs/pagination/pagination.md +6 -4
  81. package/dist/docs/pagination/styling.md +1 -0
  82. package/dist/docs/pill/api.md +8 -8
  83. package/dist/docs/pill/pill.md +10 -8
  84. package/dist/docs/pill/styling.md +1 -0
  85. package/dist/docs/radio/radio.md +1 -7
  86. package/dist/docs/radio-group/api.md +4 -4
  87. package/dist/docs/radio-group/radio-group.md +183 -68
  88. package/dist/docs/radio-group/styling.md +179 -64
  89. package/dist/docs/select/api.md +10 -10
  90. package/dist/docs/select/select.md +103 -10
  91. package/dist/docs/select/styling.md +92 -0
  92. package/dist/docs/slider/api.md +38 -22
  93. package/dist/docs/slider/slider.md +40 -22
  94. package/dist/docs/slider/styling.md +1 -0
  95. package/dist/docs/slider-thumb/api.md +28 -12
  96. package/dist/docs/slider-thumb/slider-thumb.md +30 -12
  97. package/dist/docs/slider-thumb/styling.md +1 -0
  98. package/dist/docs/snackbar/accessibility.md +20 -0
  99. package/dist/docs/snackbar/api.md +30 -0
  100. package/dist/docs/snackbar/examples.md +191 -0
  101. package/dist/docs/snackbar/snackbar.md +385 -0
  102. package/dist/docs/snackbar/styling.md +72 -0
  103. package/dist/docs/snackbar/usage.md +60 -0
  104. package/dist/docs/snackbar-item/api.md +41 -0
  105. package/dist/docs/snackbar-item/snackbar-item.md +49 -0
  106. package/dist/docs/step/api.md +16 -0
  107. package/dist/docs/step/step.md +16 -0
  108. package/dist/docs/step-indicator/step-indicator.md +2 -0
  109. package/dist/docs/step-indicator/styling.md +1 -0
  110. package/dist/docs/switch/api.md +8 -0
  111. package/dist/docs/switch/styling.md +1 -0
  112. package/dist/docs/switch/switch.md +10 -0
  113. package/dist/docs/tabs/api.md +2 -2
  114. package/dist/docs/tabs/styling.md +1 -0
  115. package/dist/docs/tabs/tabs.md +4 -2
  116. package/dist/docs/textarea/api.md +54 -14
  117. package/dist/docs/textarea/styling.md +92 -0
  118. package/dist/docs/textarea/textarea.md +147 -14
  119. package/dist/docs/textfield/api.md +74 -34
  120. package/dist/docs/textfield/styling.md +96 -0
  121. package/dist/docs/textfield/textfield.md +171 -34
  122. package/dist/index.d.ts +1369 -370
  123. package/dist/packages/affix/affix-styles.d.ts +8 -0
  124. package/dist/packages/affix/affix-styles.js +108 -0
  125. package/dist/packages/affix/affix.d.ts +16 -13
  126. package/dist/packages/affix/affix.hydration.test.d.ts +1 -1
  127. package/dist/packages/affix/affix.hydration.test.js +15 -15
  128. package/dist/packages/affix/affix.js +451 -320
  129. package/dist/packages/affix/affix.js.map +4 -4
  130. package/dist/packages/affix/affix.react.stories.d.ts +3 -3
  131. package/dist/packages/affix/affix.react.stories.js +3 -3
  132. package/dist/packages/affix/affix.react.test.js +5 -3
  133. package/dist/packages/affix/affix.stories.d.ts +3 -3
  134. package/dist/packages/affix/affix.stories.js +10 -10
  135. package/dist/packages/affix/affix.test.d.ts +1 -1
  136. package/dist/packages/affix/affix.test.js +10 -10
  137. package/dist/packages/affix/react.d.ts +3 -3
  138. package/dist/packages/affix/react.js +6 -6
  139. package/dist/packages/affix/styles.js +2 -2
  140. package/dist/packages/alert/alert.d.ts +3 -3
  141. package/dist/packages/alert/alert.hydration.test.d.ts +1 -1
  142. package/dist/packages/alert/alert.hydration.test.js +21 -21
  143. package/dist/packages/alert/alert.js +349 -324
  144. package/dist/packages/alert/alert.js.map +3 -3
  145. package/dist/packages/alert/alert.react.stories.d.ts +2 -2
  146. package/dist/packages/alert/alert.react.stories.js +13 -13
  147. package/dist/packages/alert/alert.stories.d.ts +4 -4
  148. package/dist/packages/alert/alert.stories.js +29 -27
  149. package/dist/packages/alert/alert.test.d.ts +1 -1
  150. package/dist/packages/alert/alert.test.js +34 -21
  151. package/dist/packages/alert/react.d.ts +1 -1
  152. package/dist/packages/alert/react.js +4 -4
  153. package/dist/packages/alert/styles.js +2 -2
  154. package/dist/packages/attention/attention.d.ts +11 -6
  155. package/dist/packages/attention/attention.hydration.test.d.ts +1 -1
  156. package/dist/packages/attention/attention.hydration.test.js +29 -29
  157. package/dist/packages/attention/attention.js +1795 -1781
  158. package/dist/packages/attention/attention.js.map +4 -4
  159. package/dist/packages/attention/attention.react.stories.d.ts +3 -3
  160. package/dist/packages/attention/attention.react.stories.js +13 -13
  161. package/dist/packages/attention/attention.react.test.js +11 -7
  162. package/dist/packages/attention/attention.stories.d.ts +4 -4
  163. package/dist/packages/attention/attention.stories.js +126 -117
  164. package/dist/packages/attention/attention.test.d.ts +1 -1
  165. package/dist/packages/attention/attention.test.js +18 -10
  166. package/dist/packages/attention/layout-styles.js +900 -900
  167. package/dist/packages/attention/react.d.ts +4 -4
  168. package/dist/packages/attention/react.js +13 -11
  169. package/dist/packages/attention/styles.js +2 -2
  170. package/dist/packages/badge/badge.d.ts +3 -3
  171. package/dist/packages/badge/badge.hydration.test.d.ts +1 -1
  172. package/dist/packages/badge/badge.hydration.test.js +25 -25
  173. package/dist/packages/badge/badge.js +281 -281
  174. package/dist/packages/badge/badge.js.map +3 -3
  175. package/dist/packages/badge/badge.react.stories.d.ts +3 -3
  176. package/dist/packages/badge/badge.react.stories.js +17 -17
  177. package/dist/packages/badge/badge.stories.d.ts +3 -3
  178. package/dist/packages/badge/badge.stories.js +22 -20
  179. package/dist/packages/badge/badge.test.d.ts +1 -1
  180. package/dist/packages/badge/badge.test.js +13 -11
  181. package/dist/packages/badge/react.d.ts +1 -1
  182. package/dist/packages/badge/react.js +4 -4
  183. package/dist/packages/badge/styles.js +2 -2
  184. package/dist/packages/box/box.d.ts +1 -1
  185. package/dist/packages/box/box.hydration.test.d.ts +1 -1
  186. package/dist/packages/box/box.hydration.test.js +14 -14
  187. package/dist/packages/box/box.js +288 -288
  188. package/dist/packages/box/box.js.map +3 -3
  189. package/dist/packages/box/box.react.stories.d.ts +3 -3
  190. package/dist/packages/box/box.react.stories.js +8 -8
  191. package/dist/packages/box/box.stories.d.ts +3 -3
  192. package/dist/packages/box/box.stories.js +25 -19
  193. package/dist/packages/box/box.test.d.ts +1 -1
  194. package/dist/packages/box/box.test.js +6 -6
  195. package/dist/packages/box/react.d.ts +1 -1
  196. package/dist/packages/box/react.js +4 -4
  197. package/dist/packages/box/slot.test.d.ts +1 -1
  198. package/dist/packages/box/slot.test.js +6 -6
  199. package/dist/packages/box/styles.js +2 -2
  200. package/dist/packages/breadcrumb-item/breadcrumb-item.d.ts +29 -0
  201. package/dist/packages/breadcrumb-item/breadcrumb-item.js +2529 -0
  202. package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +7 -0
  203. package/dist/packages/breadcrumb-item/react.d.ts +2 -0
  204. package/dist/packages/breadcrumb-item/react.js +11 -0
  205. package/dist/packages/breadcrumb-item/styles.d.ts +4 -0
  206. package/dist/packages/breadcrumb-item/styles.js +81 -0
  207. package/dist/packages/breadcrumbs/breadcrumbs.d.ts +4 -3
  208. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.d.ts +1 -1
  209. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +57 -50
  210. package/dist/packages/breadcrumbs/breadcrumbs.js +287 -283
  211. package/dist/packages/breadcrumbs/breadcrumbs.js.map +4 -4
  212. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +4 -4
  213. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +17 -16
  214. package/dist/packages/breadcrumbs/breadcrumbs.stories.d.ts +7 -8
  215. package/dist/packages/breadcrumbs/breadcrumbs.stories.js +30 -26
  216. package/dist/packages/breadcrumbs/breadcrumbs.test.d.ts +1 -1
  217. package/dist/packages/breadcrumbs/breadcrumbs.test.js +19 -17
  218. package/dist/packages/breadcrumbs/react.d.ts +1 -1
  219. package/dist/packages/breadcrumbs/react.js +4 -4
  220. package/dist/packages/breadcrumbs/styles.js +2 -2
  221. package/dist/packages/button/button.d.ts +20 -15
  222. package/dist/packages/button/button.hydration.test.d.ts +1 -1
  223. package/dist/packages/button/button.hydration.test.js +19 -19
  224. package/dist/packages/button/button.js +809 -811
  225. package/dist/packages/button/button.js.map +4 -4
  226. package/dist/packages/button/button.react.stories.d.ts +5 -5
  227. package/dist/packages/button/button.react.stories.js +30 -30
  228. package/dist/packages/button/button.react.test.js +13 -13
  229. package/dist/packages/button/button.stories.d.ts +33 -4
  230. package/dist/packages/button/button.stories.js +353 -70
  231. package/dist/packages/button/button.test.d.ts +1 -1
  232. package/dist/packages/button/button.test.js +36 -35
  233. package/dist/packages/button/react.d.ts +3 -3
  234. package/dist/packages/button/react.js +7 -7
  235. package/dist/packages/button/styles.d.ts +22 -1
  236. package/dist/packages/button/styles.js +433 -2
  237. package/dist/packages/card/card.d.ts +1 -1
  238. package/dist/packages/card/card.hydration.test.d.ts +1 -1
  239. package/dist/packages/card/card.hydration.test.js +14 -14
  240. package/dist/packages/card/card.js +311 -296
  241. package/dist/packages/card/card.js.map +4 -4
  242. package/dist/packages/card/card.react.stories.d.ts +3 -3
  243. package/dist/packages/card/card.react.stories.js +11 -11
  244. package/dist/packages/card/card.stories.d.ts +3 -3
  245. package/dist/packages/card/card.stories.js +36 -24
  246. package/dist/packages/card/card.test.d.ts +1 -1
  247. package/dist/packages/card/card.test.js +6 -6
  248. package/dist/packages/card/react.d.ts +1 -1
  249. package/dist/packages/card/react.js +4 -4
  250. package/dist/packages/card/styles.js +2 -2
  251. package/dist/packages/checkbox/checkbox.a11y.test.d.ts +1 -1
  252. package/dist/packages/checkbox/checkbox.a11y.test.js +47 -33
  253. package/dist/packages/checkbox/checkbox.d.ts +48 -17
  254. package/dist/packages/checkbox/checkbox.hydration.test.d.ts +1 -1
  255. package/dist/packages/checkbox/checkbox.hydration.test.js +21 -21
  256. package/dist/packages/checkbox/checkbox.js +481 -430
  257. package/dist/packages/checkbox/checkbox.js.map +3 -3
  258. package/dist/packages/checkbox/checkbox.react.stories.d.ts +3 -3
  259. package/dist/packages/checkbox/checkbox.react.stories.js +3 -3
  260. package/dist/packages/checkbox/checkbox.stories.d.ts +5 -5
  261. package/dist/packages/checkbox/checkbox.stories.js +99 -91
  262. package/dist/packages/checkbox/checkbox.test.d.ts +1 -1
  263. package/dist/packages/checkbox/checkbox.test.js +64 -64
  264. package/dist/packages/checkbox/react.d.ts +2 -2
  265. package/dist/packages/checkbox/react.js +6 -6
  266. package/dist/packages/checkbox/styles.js +183 -132
  267. package/dist/packages/checkbox-group/checkbox-group.a11y.test.d.ts +2 -2
  268. package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +83 -73
  269. package/dist/packages/checkbox-group/checkbox-group.d.ts +54 -13
  270. package/dist/packages/checkbox-group/checkbox-group.hydration.test.d.ts +2 -2
  271. package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +36 -19
  272. package/dist/packages/checkbox-group/checkbox-group.js +62 -57
  273. package/dist/packages/checkbox-group/checkbox-group.js.map +4 -4
  274. package/dist/packages/checkbox-group/checkbox-group.react.test.js +4 -4
  275. package/dist/packages/checkbox-group/checkbox-group.test.d.ts +2 -2
  276. package/dist/packages/checkbox-group/checkbox-group.test.js +183 -90
  277. package/dist/packages/checkbox-group/react.d.ts +4 -4
  278. package/dist/packages/checkbox-group/react.js +6 -6
  279. package/dist/packages/combobox/combobox.a11y.test.d.ts +2 -2
  280. package/dist/packages/combobox/combobox.a11y.test.js +80 -33
  281. package/dist/packages/combobox/combobox.d.ts +67 -47
  282. package/dist/packages/combobox/combobox.hydration.test.d.ts +1 -1
  283. package/dist/packages/combobox/combobox.hydration.test.js +73 -35
  284. package/dist/packages/combobox/combobox.js +338 -339
  285. package/dist/packages/combobox/combobox.js.map +4 -4
  286. package/dist/packages/combobox/combobox.react.stories.d.ts +29 -13
  287. package/dist/packages/combobox/combobox.react.stories.js +29 -29
  288. package/dist/packages/combobox/combobox.react.test.js +8 -8
  289. package/dist/packages/combobox/combobox.stories.d.ts +4 -4
  290. package/dist/packages/combobox/combobox.stories.js +104 -85
  291. package/dist/packages/combobox/combobox.test.d.ts +2 -2
  292. package/dist/packages/combobox/combobox.test.js +295 -69
  293. package/dist/packages/combobox/react.d.ts +15 -7
  294. package/dist/packages/combobox/react.js +14 -14
  295. package/dist/packages/combobox/styles.js +2 -3
  296. package/dist/packages/datepicker/DatePicker.test.d.ts +2 -2
  297. package/dist/packages/datepicker/DatePicker.test.js +49 -42
  298. package/dist/packages/datepicker/datepicker.d.ts +30 -38
  299. package/dist/packages/datepicker/datepicker.hydration.test.d.ts +1 -1
  300. package/dist/packages/datepicker/datepicker.hydration.test.js +21 -21
  301. package/dist/packages/datepicker/datepicker.js +673 -632
  302. package/dist/packages/datepicker/datepicker.js.map +4 -4
  303. package/dist/packages/datepicker/datepicker.react.stories.d.ts +17 -17
  304. package/dist/packages/datepicker/datepicker.react.stories.js +9 -9
  305. package/dist/packages/datepicker/datepicker.react.test.js +6 -6
  306. package/dist/packages/datepicker/datepicker.stories.d.ts +4 -4
  307. package/dist/packages/datepicker/datepicker.stories.js +32 -32
  308. package/dist/packages/datepicker/datepicker.test.d.ts +2 -2
  309. package/dist/packages/datepicker/datepicker.test.js +77 -79
  310. package/dist/packages/datepicker/react.d.ts +9 -9
  311. package/dist/packages/datepicker/react.js +16 -14
  312. package/dist/packages/datepicker/styles/w-datepicker-calendar.styles.js +13 -12
  313. package/dist/packages/datepicker/styles/w-datepicker-day.styles.js +58 -55
  314. package/dist/packages/datepicker/styles/w-datepicker-month.styles.js +60 -57
  315. package/dist/packages/datepicker/styles/w-datepicker.styles.js +87 -87
  316. package/dist/packages/datepicker/utils.d.ts +3 -0
  317. package/dist/packages/datepicker/utils.js +40 -1
  318. package/dist/packages/datepicker/utils.test.d.ts +1 -0
  319. package/dist/packages/datepicker/utils.test.js +29 -0
  320. package/dist/packages/expandable/expandable.d.ts +18 -39
  321. package/dist/packages/expandable/expandable.hydration.test.d.ts +1 -1
  322. package/dist/packages/expandable/expandable.hydration.test.js +21 -21
  323. package/dist/packages/expandable/expandable.js +359 -332
  324. package/dist/packages/expandable/expandable.js.map +4 -4
  325. package/dist/packages/expandable/expandable.react.stories.d.ts +5 -5
  326. package/dist/packages/expandable/expandable.react.stories.js +7 -7
  327. package/dist/packages/expandable/expandable.react.test.js +15 -7
  328. package/dist/packages/expandable/expandable.stories.d.ts +5 -5
  329. package/dist/packages/expandable/expandable.stories.js +51 -45
  330. package/dist/packages/expandable/expandable.test.d.ts +1 -1
  331. package/dist/packages/expandable/expandable.test.js +19 -17
  332. package/dist/packages/expandable/react.d.ts +3 -3
  333. package/dist/packages/expandable/react.js +9 -9
  334. package/dist/packages/expandable/styles.js +2 -2
  335. package/dist/packages/global.d.ts +1 -0
  336. package/dist/packages/global.js +5 -0
  337. package/dist/packages/i18n.d.ts +1 -1
  338. package/dist/packages/i18n.js +37 -29
  339. package/dist/packages/icon/icon.d.ts +22 -5
  340. package/dist/packages/icon/icon.hydration.test.d.ts +1 -1
  341. package/dist/packages/icon/icon.hydration.test.js +25 -25
  342. package/dist/packages/icon/icon.js +31 -26
  343. package/dist/packages/icon/icon.js.map +3 -3
  344. package/dist/packages/icon/icon.react.stories.d.ts +4 -3
  345. package/dist/packages/icon/icon.react.stories.js +284 -283
  346. package/dist/packages/icon/icon.stories.d.ts +7 -30
  347. package/dist/packages/icon/icon.stories.js +307 -297
  348. package/dist/packages/icon/icon.test.d.ts +1 -1
  349. package/dist/packages/icon/icon.test.js +36 -28
  350. package/dist/packages/icon/react.d.ts +2 -2
  351. package/dist/packages/icon/react.js +4 -4
  352. package/dist/packages/icon/style.js +24 -25
  353. package/dist/packages/interaction-type-detection.d.ts +22 -0
  354. package/dist/packages/interaction-type-detection.js +38 -0
  355. package/dist/packages/link/link.d.ts +22 -23
  356. package/dist/packages/link/link.hydration.test.d.ts +1 -1
  357. package/dist/packages/link/link.hydration.test.js +27 -27
  358. package/dist/packages/link/link.js +775 -498
  359. package/dist/packages/link/link.js.map +4 -4
  360. package/dist/packages/link/link.react.stories.d.ts +3 -3
  361. package/dist/packages/link/link.react.stories.js +42 -42
  362. package/dist/packages/link/link.react.test.js +5 -3
  363. package/dist/packages/link/link.stories.d.ts +3 -3
  364. package/dist/packages/link/link.stories.js +51 -51
  365. package/dist/packages/link/link.test.d.ts +1 -1
  366. package/dist/packages/link/link.test.js +11 -7
  367. package/dist/packages/link/react.d.ts +2 -2
  368. package/dist/packages/link/react.js +6 -6
  369. package/dist/packages/link/styles.d.ts +5 -0
  370. package/dist/packages/link/styles.js +85 -0
  371. package/dist/packages/modal/index.d.ts +7 -7
  372. package/dist/packages/modal/index.js +7 -7
  373. package/dist/packages/modal/modal.d.ts +3 -2
  374. package/dist/packages/modal/modal.hydration.test.d.ts +1 -1
  375. package/dist/packages/modal/modal.hydration.test.js +12 -12
  376. package/dist/packages/modal/modal.js +409 -409
  377. package/dist/packages/modal/modal.js.map +3 -3
  378. package/dist/packages/modal/modal.react.stories.d.ts +7 -7
  379. package/dist/packages/modal/modal.react.stories.js +15 -6
  380. package/dist/packages/modal/modal.react.test.js +5 -5
  381. package/dist/packages/modal/modal.stories.d.ts +6 -6
  382. package/dist/packages/modal/modal.stories.js +253 -238
  383. package/dist/packages/modal/react.d.ts +38 -8
  384. package/dist/packages/modal/react.js +43 -13
  385. package/dist/packages/modal/util.js +3 -1
  386. package/dist/packages/modal-footer/modal-footer.d.ts +1 -1
  387. package/dist/packages/modal-footer/modal-footer.js +296 -296
  388. package/dist/packages/modal-footer/modal-footer.js.map +3 -3
  389. package/dist/packages/modal-footer/react.d.ts +1 -1
  390. package/dist/packages/modal-footer/react.js +4 -4
  391. package/dist/packages/modal-header/modal-header.d.ts +2 -2
  392. package/dist/packages/modal-header/modal-header.js +443 -422
  393. package/dist/packages/modal-header/modal-header.js.map +4 -4
  394. package/dist/packages/modal-header/modal-header.react.test.js +5 -3
  395. package/dist/packages/modal-header/react.d.ts +4 -4
  396. package/dist/packages/modal-header/react.js +8 -8
  397. package/dist/packages/page-indicator/page-indicator.d.ts +1 -5
  398. package/dist/packages/page-indicator/page-indicator.hydration.test.d.ts +1 -1
  399. package/dist/packages/page-indicator/page-indicator.hydration.test.js +22 -22
  400. package/dist/packages/page-indicator/page-indicator.js +29 -29
  401. package/dist/packages/page-indicator/page-indicator.js.map +4 -4
  402. package/dist/packages/page-indicator/page-indicator.react.stories.d.ts +3 -3
  403. package/dist/packages/page-indicator/page-indicator.react.stories.js +11 -11
  404. package/dist/packages/page-indicator/page-indicator.react.test.js +5 -5
  405. package/dist/packages/page-indicator/page-indicator.stories.d.ts +9 -27
  406. package/dist/packages/page-indicator/page-indicator.stories.js +63 -32
  407. package/dist/packages/page-indicator/page-indicator.test.d.ts +1 -1
  408. package/dist/packages/page-indicator/page-indicator.test.js +110 -70
  409. package/dist/packages/page-indicator/react.d.ts +2 -2
  410. package/dist/packages/page-indicator/react.js +7 -7
  411. package/dist/packages/page-indicator/style.js +21 -21
  412. package/dist/packages/pagination/pagination.a11y.test.d.ts +1 -1
  413. package/dist/packages/pagination/pagination.a11y.test.js +59 -25
  414. package/dist/packages/pagination/pagination.d.ts +10 -11
  415. package/dist/packages/pagination/pagination.hydration.test.d.ts +1 -1
  416. package/dist/packages/pagination/pagination.hydration.test.js +19 -19
  417. package/dist/packages/pagination/pagination.js +385 -354
  418. package/dist/packages/pagination/pagination.js.map +4 -4
  419. package/dist/packages/pagination/pagination.react.stories.d.ts +11 -11
  420. package/dist/packages/pagination/pagination.react.stories.js +8 -8
  421. package/dist/packages/pagination/pagination.react.test.js +6 -6
  422. package/dist/packages/pagination/pagination.stories.d.ts +3 -3
  423. package/dist/packages/pagination/pagination.stories.js +18 -18
  424. package/dist/packages/pagination/pagination.test.d.ts +1 -1
  425. package/dist/packages/pagination/pagination.test.js +146 -72
  426. package/dist/packages/pagination/react.d.ts +6 -6
  427. package/dist/packages/pagination/react.js +12 -10
  428. package/dist/packages/pagination/styles.js +2 -2
  429. package/dist/packages/pill/pill.d.ts +6 -6
  430. package/dist/packages/pill/pill.hydration.test.d.ts +1 -1
  431. package/dist/packages/pill/pill.hydration.test.js +14 -14
  432. package/dist/packages/pill/pill.js +337 -314
  433. package/dist/packages/pill/pill.js.map +4 -4
  434. package/dist/packages/pill/pill.react.stories.d.ts +11 -11
  435. package/dist/packages/pill/pill.react.stories.js +3 -3
  436. package/dist/packages/pill/pill.react.test.js +8 -8
  437. package/dist/packages/pill/pill.stories.d.ts +3 -3
  438. package/dist/packages/pill/pill.stories.js +8 -8
  439. package/dist/packages/pill/pill.test.d.ts +1 -1
  440. package/dist/packages/pill/pill.test.js +17 -15
  441. package/dist/packages/pill/react.d.ts +6 -6
  442. package/dist/packages/pill/react.js +18 -14
  443. package/dist/packages/pill/styles.js +2 -2
  444. package/dist/packages/radio/base-element.d.ts +3 -3
  445. package/dist/packages/radio/base-element.js +3 -3
  446. package/dist/packages/radio/custom-error-validator.d.ts +1 -1
  447. package/dist/packages/radio/custom-error-validator.js +3 -3
  448. package/dist/packages/radio/form-associated-element.d.ts +9 -9
  449. package/dist/packages/radio/form-associated-element.js +27 -26
  450. package/dist/packages/radio/host-styles.js +9 -9
  451. package/dist/packages/radio/invalid.d.ts +1 -1
  452. package/dist/packages/radio/invalid.js +1 -1
  453. package/dist/packages/radio/radio-styles.js +199 -160
  454. package/dist/packages/radio/radio.a11y.test.d.ts +2 -2
  455. package/dist/packages/radio/radio.a11y.test.js +60 -58
  456. package/dist/packages/radio/radio.d.ts +4 -4
  457. package/dist/packages/radio/radio.hydration.test.d.ts +1 -1
  458. package/dist/packages/radio/radio.hydration.test.js +23 -14
  459. package/dist/packages/radio/radio.js +491 -452
  460. package/dist/packages/radio/radio.js.map +3 -3
  461. package/dist/packages/radio/radio.react.stories.d.ts +2 -2
  462. package/dist/packages/radio/radio.react.stories.js +3 -3
  463. package/dist/packages/radio/radio.stories.d.ts +4 -4
  464. package/dist/packages/radio/radio.stories.js +152 -136
  465. package/dist/packages/radio/radio.test.d.ts +1 -1
  466. package/dist/packages/radio/radio.test.js +74 -73
  467. package/dist/packages/radio/react.d.ts +1 -1
  468. package/dist/packages/radio/react.js +4 -4
  469. package/dist/packages/radio/required-validator.d.ts +1 -1
  470. package/dist/packages/radio/required-validator.js +12 -7
  471. package/dist/packages/radio/slot.d.ts +1 -1
  472. package/dist/packages/radio/slot.js +11 -8
  473. package/dist/packages/radio/watch.d.ts +1 -1
  474. package/dist/packages/radio/watch.js +3 -1
  475. package/dist/packages/radio-group/radio-group-styles.js +121 -88
  476. package/dist/packages/radio-group/radio-group.a11y.test.d.ts +2 -2
  477. package/dist/packages/radio-group/radio-group.a11y.test.js +83 -77
  478. package/dist/packages/radio-group/radio-group.d.ts +16 -7
  479. package/dist/packages/radio-group/radio-group.hydration.test.d.ts +2 -2
  480. package/dist/packages/radio-group/radio-group.hydration.test.js +30 -15
  481. package/dist/packages/radio-group/radio-group.js +655 -567
  482. package/dist/packages/radio-group/radio-group.js.map +4 -4
  483. package/dist/packages/radio-group/radio-group.react.test.js +4 -4
  484. package/dist/packages/radio-group/radio-group.test.d.ts +2 -2
  485. package/dist/packages/radio-group/radio-group.test.js +304 -230
  486. package/dist/packages/radio-group/react.d.ts +7 -7
  487. package/dist/packages/radio-group/react.js +10 -10
  488. package/dist/packages/select/input-styles.d.ts +11 -0
  489. package/dist/packages/select/input-styles.js +88 -0
  490. package/dist/packages/select/locales/da/messages.mjs +1 -1
  491. package/dist/packages/select/locales/en/messages.mjs +1 -1
  492. package/dist/packages/select/locales/fi/messages.mjs +1 -1
  493. package/dist/packages/select/locales/nb/messages.mjs +1 -1
  494. package/dist/packages/select/locales/sv/messages.mjs +1 -1
  495. package/dist/packages/select/react.d.ts +5 -5
  496. package/dist/packages/select/react.js +11 -11
  497. package/dist/packages/select/select.a11y.test.d.ts +1 -1
  498. package/dist/packages/select/select.a11y.test.js +100 -89
  499. package/dist/packages/select/select.d.ts +10 -11
  500. package/dist/packages/select/select.hydration.test.d.ts +1 -1
  501. package/dist/packages/select/select.hydration.test.js +16 -16
  502. package/dist/packages/select/select.js +432 -336
  503. package/dist/packages/select/select.js.map +4 -4
  504. package/dist/packages/select/select.react.stories.d.ts +10 -10
  505. package/dist/packages/select/select.react.stories.js +19 -14
  506. package/dist/packages/select/select.react.test.js +6 -6
  507. package/dist/packages/select/select.stories.d.ts +3 -3
  508. package/dist/packages/select/select.stories.js +51 -48
  509. package/dist/packages/select/select.test.d.ts +1 -1
  510. package/dist/packages/select/select.test.js +230 -179
  511. package/dist/packages/select/styles.js +2 -2
  512. package/dist/packages/slider/Slider.d.ts +1 -1
  513. package/dist/packages/slider/Slider.js +4 -4
  514. package/dist/packages/slider/index.d.ts +2 -2
  515. package/dist/packages/slider/index.js +2 -2
  516. package/dist/packages/slider/locales/da/messages.mjs +1 -1
  517. package/dist/packages/slider/locales/en/messages.mjs +1 -1
  518. package/dist/packages/slider/locales/fi/messages.mjs +1 -1
  519. package/dist/packages/slider/locales/nb/messages.mjs +1 -1
  520. package/dist/packages/slider/locales/sv/messages.mjs +1 -1
  521. package/dist/packages/slider/react.d.ts +4 -4
  522. package/dist/packages/slider/react.js +9 -9
  523. package/dist/packages/slider/slider.d.ts +25 -17
  524. package/dist/packages/slider/slider.hydration.test.d.ts +1 -1
  525. package/dist/packages/slider/slider.hydration.test.js +40 -16
  526. package/dist/packages/slider/slider.js +524 -467
  527. package/dist/packages/slider/slider.js.map +4 -4
  528. package/dist/packages/slider/slider.react.stories.d.ts +4 -4
  529. package/dist/packages/slider/slider.react.stories.js +29 -32
  530. package/dist/packages/slider/slider.react.test.js +6 -6
  531. package/dist/packages/slider/slider.stories.d.ts +9 -7
  532. package/dist/packages/slider/slider.stories.js +369 -340
  533. package/dist/packages/slider/slider.test.d.ts +5 -5
  534. package/dist/packages/slider/slider.test.js +476 -336
  535. package/dist/packages/slider/styles/w-slider.styles.js +166 -148
  536. package/dist/packages/slider/styles.js +2 -2
  537. package/dist/packages/slider-thumb/SliderThumb.d.ts +1 -1
  538. package/dist/packages/slider-thumb/SliderThumb.js +4 -4
  539. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.d.ts +1 -1
  540. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.js +1 -1
  541. package/dist/packages/slider-thumb/react.d.ts +5 -5
  542. package/dist/packages/slider-thumb/react.js +11 -9
  543. package/dist/packages/slider-thumb/slider-thumb.d.ts +17 -17
  544. package/dist/packages/slider-thumb/slider-thumb.hydration.test.d.ts +1 -1
  545. package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +26 -17
  546. package/dist/packages/slider-thumb/slider-thumb.js +550 -553
  547. package/dist/packages/slider-thumb/slider-thumb.js.map +4 -4
  548. package/dist/packages/slider-thumb/slider-thumb.react.test.js +9 -5
  549. package/dist/packages/slider-thumb/styles/w-slider-thumb.styles.js +189 -188
  550. package/dist/packages/slider-thumb/styles.js +2 -0
  551. package/dist/packages/snackbar/locales/da/messages.d.mts +1 -0
  552. package/dist/packages/snackbar/locales/da/messages.mjs +1 -0
  553. package/dist/packages/snackbar/locales/en/messages.d.mts +1 -0
  554. package/dist/packages/snackbar/locales/en/messages.mjs +1 -0
  555. package/dist/packages/snackbar/locales/fi/messages.d.mts +1 -0
  556. package/dist/packages/snackbar/locales/fi/messages.mjs +1 -0
  557. package/dist/packages/snackbar/locales/nb/messages.d.mts +1 -0
  558. package/dist/packages/snackbar/locales/nb/messages.mjs +1 -0
  559. package/dist/packages/snackbar/locales/sv/messages.d.mts +1 -0
  560. package/dist/packages/snackbar/locales/sv/messages.mjs +1 -0
  561. package/dist/packages/snackbar/react.d.ts +2 -0
  562. package/dist/packages/snackbar/react.js +11 -0
  563. package/dist/packages/snackbar/snackbar.d.ts +132 -0
  564. package/dist/packages/snackbar/snackbar.hydration.test.d.ts +1 -0
  565. package/dist/packages/snackbar/snackbar.hydration.test.js +13 -0
  566. package/dist/packages/snackbar/snackbar.js +2665 -0
  567. package/dist/packages/snackbar/snackbar.js.map +7 -0
  568. package/dist/packages/snackbar/snackbar.react.stories.d.ts +12 -0
  569. package/dist/packages/snackbar/snackbar.react.stories.js +160 -0
  570. package/dist/packages/snackbar/snackbar.stories.d.ts +20 -0
  571. package/dist/packages/snackbar/snackbar.stories.js +363 -0
  572. package/dist/packages/snackbar/snackbar.test.d.ts +4 -0
  573. package/dist/packages/snackbar/snackbar.test.js +17 -0
  574. package/dist/packages/snackbar/styles.d.ts +1 -0
  575. package/dist/packages/snackbar/styles.js +35 -0
  576. package/dist/packages/snackbar-item/react.d.ts +5 -0
  577. package/dist/packages/snackbar-item/react.js +16 -0
  578. package/dist/packages/snackbar-item/snackbar-item.d.ts +69 -0
  579. package/dist/packages/snackbar-item/snackbar-item.js +2620 -0
  580. package/dist/packages/snackbar-item/snackbar-item.js.map +7 -0
  581. package/dist/packages/snackbar-item/snackbar-item.react.test.d.ts +1 -0
  582. package/dist/packages/snackbar-item/snackbar-item.react.test.js +5 -0
  583. package/dist/packages/snackbar-item/styles.d.ts +1 -0
  584. package/dist/packages/snackbar-item/styles.js +133 -0
  585. package/dist/packages/step/react.d.ts +1 -1
  586. package/dist/packages/step/react.js +4 -4
  587. package/dist/packages/step/step.d.ts +2 -2
  588. package/dist/packages/step/step.hydration.test.d.ts +1 -1
  589. package/dist/packages/step/step.hydration.test.js +10 -10
  590. package/dist/packages/step/step.js +337 -315
  591. package/dist/packages/step/step.js.map +4 -4
  592. package/dist/packages/step-indicator/index.d.ts +2 -2
  593. package/dist/packages/step-indicator/index.js +2 -2
  594. package/dist/packages/step-indicator/react.d.ts +2 -2
  595. package/dist/packages/step-indicator/react.js +5 -5
  596. package/dist/packages/step-indicator/step-indicator.a11y.test.d.ts +2 -2
  597. package/dist/packages/step-indicator/step-indicator.a11y.test.js +48 -46
  598. package/dist/packages/step-indicator/step-indicator.d.ts +1 -1
  599. package/dist/packages/step-indicator/step-indicator.hydration.test.d.ts +1 -1
  600. package/dist/packages/step-indicator/step-indicator.hydration.test.js +10 -10
  601. package/dist/packages/step-indicator/step-indicator.js +285 -281
  602. package/dist/packages/step-indicator/step-indicator.js.map +3 -3
  603. package/dist/packages/step-indicator/stepindicator.react.stories.d.ts +2 -2
  604. package/dist/packages/step-indicator/stepindicator.react.stories.js +3 -3
  605. package/dist/packages/step-indicator/stepindicator.stories.d.ts +3 -3
  606. package/dist/packages/step-indicator/stepindicator.stories.js +129 -129
  607. package/dist/packages/step-indicator/styles.js +2 -2
  608. package/dist/packages/styles.js +277 -275
  609. package/dist/packages/switch/react.d.ts +1 -1
  610. package/dist/packages/switch/react.js +6 -6
  611. package/dist/packages/switch/styles.js +2 -2
  612. package/dist/packages/switch/switch.a11y.test.d.ts +1 -1
  613. package/dist/packages/switch/switch.a11y.test.js +46 -38
  614. package/dist/packages/switch/switch.d.ts +3 -3
  615. package/dist/packages/switch/switch.hydration.test.d.ts +1 -1
  616. package/dist/packages/switch/switch.hydration.test.js +23 -23
  617. package/dist/packages/switch/switch.js +304 -304
  618. package/dist/packages/switch/switch.js.map +3 -3
  619. package/dist/packages/switch/switch.react.stories.d.ts +2 -2
  620. package/dist/packages/switch/switch.react.stories.js +2 -2
  621. package/dist/packages/switch/switch.stories.d.ts +2 -2
  622. package/dist/packages/switch/switch.stories.js +42 -37
  623. package/dist/packages/switch/switch.test.d.ts +1 -1
  624. package/dist/packages/switch/switch.test.js +30 -35
  625. package/dist/packages/tab/react.d.ts +9 -7
  626. package/dist/packages/tab/react.js +11 -10
  627. package/dist/packages/tab/styles.d.ts +1 -0
  628. package/dist/packages/tab/styles.js +2 -0
  629. package/dist/packages/tab/tab.d.ts +6 -6
  630. package/dist/packages/tab/tab.hydration.test.d.ts +1 -1
  631. package/dist/packages/tab/tab.hydration.test.js +18 -12
  632. package/dist/packages/tab/tab.js +309 -308
  633. package/dist/packages/tab/tab.js.map +4 -4
  634. package/dist/packages/tab/tab.react.test.js +5 -3
  635. package/dist/packages/tab-panel/react.d.ts +3 -2
  636. package/dist/packages/tab-panel/react.js +11 -5
  637. package/dist/packages/tab-panel/tab-panel.d.ts +3 -3
  638. package/dist/packages/tab-panel/tab-panel.hydration.test.d.ts +1 -1
  639. package/dist/packages/tab-panel/tab-panel.hydration.test.js +13 -10
  640. package/dist/packages/tab-panel/tab-panel.js +293 -291
  641. package/dist/packages/tab-panel/tab-panel.js.map +3 -3
  642. package/dist/packages/tabs/index.d.ts +4 -4
  643. package/dist/packages/tabs/index.js +3 -3
  644. package/dist/packages/tabs/react.d.ts +27 -8
  645. package/dist/packages/tabs/react.js +30 -9
  646. package/dist/packages/tabs/styles.js +2 -2
  647. package/dist/packages/tabs/tabs.a11y.test.d.ts +3 -3
  648. package/dist/packages/tabs/tabs.a11y.test.js +188 -169
  649. package/dist/packages/tabs/tabs.d.ts +6 -5
  650. package/dist/packages/tabs/tabs.hydration.test.d.ts +3 -1
  651. package/dist/packages/tabs/tabs.hydration.test.js +22 -8
  652. package/dist/packages/tabs/tabs.js +293 -286
  653. package/dist/packages/tabs/tabs.js.map +3 -3
  654. package/dist/packages/tabs/tabs.react.stories.d.ts +12 -10
  655. package/dist/packages/tabs/tabs.react.stories.js +28 -28
  656. package/dist/packages/tabs/tabs.stories.d.ts +4 -4
  657. package/dist/packages/tabs/tabs.stories.js +101 -95
  658. package/dist/packages/tabs/tabs.test.d.ts +3 -3
  659. package/dist/packages/tabs/tabs.test.js +137 -123
  660. package/dist/packages/textarea/input-styles.d.ts +11 -0
  661. package/dist/packages/textarea/input-styles.js +88 -0
  662. package/dist/packages/textarea/locales/da/messages.mjs +1 -1
  663. package/dist/packages/textarea/locales/en/messages.mjs +1 -1
  664. package/dist/packages/textarea/locales/fi/messages.mjs +1 -1
  665. package/dist/packages/textarea/locales/nb/messages.mjs +1 -1
  666. package/dist/packages/textarea/locales/sv/messages.mjs +1 -1
  667. package/dist/packages/textarea/react.d.ts +11 -11
  668. package/dist/packages/textarea/react.js +17 -17
  669. package/dist/packages/textarea/styles.js +2 -2
  670. package/dist/packages/textarea/textarea.a11y.test.d.ts +1 -1
  671. package/dist/packages/textarea/textarea.a11y.test.js +90 -58
  672. package/dist/packages/textarea/textarea.d.ts +12 -11
  673. package/dist/packages/textarea/textarea.hydration.test.d.ts +1 -1
  674. package/dist/packages/textarea/textarea.hydration.test.js +19 -19
  675. package/dist/packages/textarea/textarea.js +385 -304
  676. package/dist/packages/textarea/textarea.js.map +4 -4
  677. package/dist/packages/textarea/textarea.react.stories.d.ts +21 -21
  678. package/dist/packages/textarea/textarea.react.stories.js +13 -13
  679. package/dist/packages/textarea/textarea.react.test.js +7 -7
  680. package/dist/packages/textarea/textarea.stories.d.ts +3 -3
  681. package/dist/packages/textarea/textarea.stories.js +44 -42
  682. package/dist/packages/textarea/textarea.test.d.ts +1 -1
  683. package/dist/packages/textarea/textarea.test.js +197 -88
  684. package/dist/packages/textfield/input-styles.d.ts +11 -0
  685. package/dist/packages/textfield/input-styles.js +88 -0
  686. package/dist/packages/textfield/locales/da/messages.d.mts +1 -0
  687. package/dist/packages/textfield/locales/da/messages.mjs +1 -0
  688. package/dist/packages/textfield/locales/en/messages.d.mts +1 -0
  689. package/dist/packages/textfield/locales/en/messages.mjs +1 -0
  690. package/dist/packages/textfield/locales/fi/messages.d.mts +1 -0
  691. package/dist/packages/textfield/locales/fi/messages.mjs +1 -0
  692. package/dist/packages/textfield/locales/nb/messages.d.mts +1 -0
  693. package/dist/packages/textfield/locales/nb/messages.mjs +1 -0
  694. package/dist/packages/textfield/locales/sv/messages.d.mts +1 -0
  695. package/dist/packages/textfield/locales/sv/messages.mjs +1 -0
  696. package/dist/packages/textfield/react.d.ts +11 -11
  697. package/dist/packages/textfield/react.js +17 -17
  698. package/dist/packages/textfield/styles/w-textfield.styles.js +60 -58
  699. package/dist/packages/textfield/styles.js +2 -2
  700. package/dist/packages/textfield/textfield.d.ts +36 -26
  701. package/dist/packages/textfield/textfield.hydration.test.d.ts +1 -1
  702. package/dist/packages/textfield/textfield.hydration.test.js +19 -19
  703. package/dist/packages/textfield/textfield.js +468 -373
  704. package/dist/packages/textfield/textfield.js.map +4 -4
  705. package/dist/packages/textfield/textfield.react.stories.d.ts +21 -21
  706. package/dist/packages/textfield/textfield.react.stories.js +31 -31
  707. package/dist/packages/textfield/textfield.react.test.js +7 -7
  708. package/dist/packages/textfield/textfield.stories.d.ts +4 -4
  709. package/dist/packages/textfield/textfield.stories.js +107 -89
  710. package/dist/packages/textfield/textfield.test.d.ts +2 -2
  711. package/dist/packages/textfield/textfield.test.js +174 -71
  712. package/dist/packages/toast/api.d.ts +2 -2
  713. package/dist/packages/toast/api.js +3 -3
  714. package/dist/packages/toast/index.d.ts +5 -5
  715. package/dist/packages/toast/index.js +5 -5
  716. package/dist/packages/toast/styles.js +2 -2
  717. package/dist/packages/toast/toast.d.ts +5 -5
  718. package/dist/packages/toast/toast.js +349 -320
  719. package/dist/packages/toast/toast.js.map +4 -4
  720. package/dist/packages/toast/toast.stories.d.ts +5 -9
  721. package/dist/packages/toast/toast.stories.js +37 -33
  722. package/dist/packages/toast/toast.test.d.ts +1 -1
  723. package/dist/packages/toast/toast.test.js +48 -31
  724. package/dist/packages/toast/types.d.ts +1 -1
  725. package/dist/packages/toast-container/styles.d.ts +1 -0
  726. package/dist/packages/toast-container/styles.js +2 -0
  727. package/dist/packages/toast-container/toast-container.d.ts +2 -2
  728. package/dist/packages/toast-container/toast-container.js +295 -294
  729. package/dist/packages/toast-container/toast-container.js.map +4 -4
  730. package/dist/packages/utils/element-collapse.d.ts +12 -0
  731. package/dist/packages/utils/element-collapse.js +102 -0
  732. package/dist/packages/utils/expand-transition.d.ts +1 -1
  733. package/dist/packages/utils/expand-transition.js +12 -10
  734. package/dist/packages/utils/unstyled-heading.d.ts +1 -1
  735. package/dist/packages/utils/unstyled-heading.js +4 -4
  736. package/dist/packages/utils/window-exists.js +1 -1
  737. package/dist/packages/utils.js +2 -2
  738. package/dist/setup-tests.d.ts +3 -3
  739. package/dist/setup-tests.js +16 -13
  740. package/dist/tests/react-hydration.js +29 -30
  741. package/dist/tests/react-ssr-attributes.d.ts +1 -1
  742. package/dist/tests/react-ssr-attributes.js +4 -4
  743. package/dist/web-types.json +577 -301
  744. package/eik/index.js +96 -0
  745. package/package.json +35 -29
  746. package/dist/docs/modal-footer/accessibility.md +0 -1
  747. package/dist/docs/modal-footer/examples.md +0 -1
  748. package/dist/docs/modal-footer/usage.md +0 -1
  749. package/dist/docs/modal-header/accessibility.md +0 -1
  750. package/dist/docs/modal-header/examples.md +0 -1
  751. package/dist/docs/modal-header/usage.md +0 -1
  752. package/dist/docs/radio/accessibility.md +0 -1
  753. package/dist/docs/radio/examples.md +0 -1
  754. package/dist/docs/radio/usage.md +0 -1
  755. package/dist/packages/button/styles/w-button.styles.d.ts +0 -1
  756. package/dist/packages/button/styles/w-button.styles.js +0 -282
  757. package/dist/packages/link/styles/w-link.styles.js +0 -213
  758. /package/dist/packages/{link/styles/w-link.styles.d.ts → slider-thumb/styles.d.ts} +0 -0
package/dist/docs/datepicker/datepicker.md CHANGED
@@ -6,14 +6,198 @@ An input for dates.
6
6
 
7
7
  Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
8
8
 
9
- [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
10
-
11
9
  ## Usage
12
10
 
11
+ Datepicker lets users type or choose a calendar date.
12
+
13
+ Use `w-datepicker` when the user needs to provide one specific date, such as a travel date, appointment date, or deadline. The component is form-associated and submits an ISO date value.
14
+
15
+ ### Basic Datepicker
16
+
17
+ ```html
18
+ <w-datepicker label="Date" name="date"></w-datepicker>
19
+ ```
20
+
21
+ Always provide a visible `label`.
22
+
23
+ ### Value
24
+
25
+ Use `value` to set the selected date. The value should use `YYYY-MM-DD` format.
26
+
27
+ ```html
28
+ <w-datepicker label="Start date" name="start-date" value="2026-06-15"></w-datepicker>
29
+ ```
30
+
31
+ The same value is submitted with the form.
32
+
33
+ ```html
34
+ <form>
35
+ <w-datepicker label="Departure date" name="departure"></w-datepicker>
36
+ <w-button type="submit">Search</w-button>
37
+ </form>
38
+ ```
39
+
40
+ ### Locale
41
+
42
+ Datepicker uses the `lang` attribute on the component, or the `lang` attribute on `<html>`, to choose locale-specific calendar labels and formatting.
43
+
44
+ ```html
45
+ <w-datepicker label="Dato" name="date" lang="nb"></w-datepicker>
46
+ ```
47
+
48
+ The component includes built-in locale support for `en`, `nb`, `sv`, `da`, and `fi`.
49
+
50
+ ### Formatting
51
+
52
+ Use `header-format`, `weekday-format`, and `day-format` to control calendar display and accessible day labels.
53
+
54
+ ```html
55
+ <w-datepicker
56
+ label="Date"
57
+ name="date"
58
+ header-format="MMMM yyyy"
59
+ weekday-format="EEEEEE"
60
+ day-format="PPPP"
61
+ ></w-datepicker>
62
+ ```
63
+
64
+ These formats use `date-fns/format` syntax. Keep `day-format` descriptive because it is used as the accessible name for each day in the calendar.
65
+
66
+ ### Disable Dates
67
+
68
+ Use `isDayDisabled` to prevent users from selecting certain dates from the calendar.
69
+
70
+ This property must be set on the element instance in JavaScript.
71
+
72
+ ```html
73
+ <w-datepicker id="booking-date" label="Booking date" name="booking-date"></w-datepicker>
74
+
75
+ <script type="module">
76
+ const datepicker = document.querySelector('#booking-date');
77
+
78
+ datepicker.isDayDisabled = (day) => day.getDay() === 0;
79
+ </script>
80
+ ```
81
+
82
+ Disabled dates cannot be selected from the calendar.
83
+
84
+ ### About change events
85
+
86
+ With events the datepicker works much like the native `<input type="date">`:
87
+
88
+ - When the user types in the input field the component fires [`input` events](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
89
+ - When the user clicks a date in the calendar the component fires [`change` events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).
90
+
91
+ Note that the component does not fire a `change` event when typing in the input field. This is intentional.
92
+
93
+ You can listen to the [`blur` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) if you only care about getting a value, no matter if it was typed or chosen via the calendar. Note that the `blur` event might not fire if the user types and submits the form without leaving the input field. If you use the `blur` event to update JavaScript state you should read the value from the datepicker in your `submit` handler as well.
94
+
13
95
  ## Accessibility
14
96
 
97
+ Datepicker renders a labeled date input with a button that opens a calendar dialog. The calendar uses a grid of dates and moves focus into the calendar when it opens.
98
+
99
+ ### Provide A Label
100
+
101
+ Always provide a visible label.
102
+
103
+ ```html
104
+ <w-datepicker label="Departure date" name="departure"></w-datepicker>
105
+ ```
106
+
107
+ The label should describe the date being requested. Avoid generic labels such as "Date" when there are several date fields on the same page.
108
+
109
+ ### Calendar Dialog
110
+
111
+ The calendar popup is rendered as a dialog with `aria-modal="true"`. The month heading is announced with `aria-live="polite"` when users move between months.
112
+
113
+ Each date in the calendar grid has an accessible name formatted using `day-format`.
114
+
115
+ ```html
116
+ <w-datepicker label="Date" name="date" day-format="PPPP"></w-datepicker>
117
+ ```
118
+
119
+ Use a descriptive `day-format` so screen reader users hear the full date, not only the day number.
120
+ See [the Date FNS docs](https://date-fns.org/v4.1.0/docs/format) for formatting options.
121
+
15
122
  ## Examples
16
123
 
124
+ ### Basic
125
+
126
+ <elements-example>
127
+
128
+ ```html
129
+ <w-datepicker label="Date" name="date"></w-datepicker>
130
+ ```
131
+
132
+ </elements-example>
133
+
134
+ ### With Value
135
+
136
+ <elements-example>
137
+
138
+ ```html
139
+ <w-datepicker label="Start date" name="start-date" value="2026-06-15"></w-datepicker>
140
+ ```
141
+
142
+ </elements-example>
143
+
144
+ ### Locale
145
+
146
+ <elements-example>
147
+
148
+ ```html
149
+ <w-datepicker label="Dato" name="date" lang="nb"></w-datepicker>
150
+ ```
151
+
152
+ </elements-example>
153
+
154
+ ### Custom Formats
155
+
156
+ <elements-example>
157
+
158
+ ```html
159
+ <w-datepicker
160
+ label="Date"
161
+ name="date"
162
+ header-format="MMMM yyyy"
163
+ weekday-format="EEEEEE"
164
+ day-format="PPPP"
165
+ ></w-datepicker>
166
+ ```
167
+
168
+ </elements-example>
169
+
170
+ ### Form Associated
171
+
172
+ <elements-example>
173
+
174
+ ```html
175
+ <form>
176
+ <w-datepicker label="Departure date" name="departure"></w-datepicker>
177
+ <w-button type="submit">Search</w-button>
178
+ </form>
179
+ ```
180
+
181
+ </elements-example>
182
+
183
+ ### Disabled Calendar Dates
184
+
185
+ <elements-example>
186
+
187
+ ```html
188
+ <w-datepicker id="booking-date" label="Booking date" name="booking-date"></w-datepicker>
189
+
190
+ <script type="module">
191
+ const datepicker = document.querySelector('#booking-date');
192
+
193
+ datepicker.isDayDisabled = (day) => day.getDay() === 0;
194
+ </script>
195
+ ```
196
+
197
+ </elements-example>
198
+
199
+ ## Styling API
200
+
17
201
  ## `<w-datepicker>` API
18
202
 
19
203
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -23,24 +207,25 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
23
207
  | Name | Type | Default | Summary |
24
208
  |-|-|-|-|
25
209
  | calendar (JS only) | `HTMLDivElement` | `-` | - |
26
- | day-format | `string` | `'PPPP'` | Decides the format of the day in the calendar as read to screen readers. |
27
- | header-format | `string` | `'MMMM yyyy'` | Decides the format of the date as shown in the calendar header. |
210
+ | day-format | `string` | `"PPPP"` | The date format used for calendar day accessible names. |
211
+ | header-format | `string` | `"MMMM yyyy"` | The date format used in the calendar header. |
28
212
  | input (JS only) | `HTMLInputElement` | `-` | - |
29
213
  | isCalendarOpen (JS only) | `boolean` | `false` | - |
30
- | isDayDisabled (JS only) | `(day: Date) => boolean` | `-` | Lets you control if a date in the calendar should be disabled. |
31
- | label | `string` | `-` | - |
32
- | lang | `string` | `-` | Takes precedence over the `<html>` lang attribute. |
214
+ | isDayDisabled (JS only) | `((day: Date) => boolean) \| undefined` | `-` | Function used to disable dates in the calendar. |
215
+ | label | `string \| undefined` | `-` | The label displayed above the date input. |
216
+ | lang | `string` | `-` | The locale used for calendar labels and date formatting. |
33
217
  | month (JS only) | `unknown` | `-` | - |
34
- | name | `string` | `-` | - |
218
+ | name | `string \| undefined` | `-` | The name submitted with the date value. |
35
219
  | navigationDate (JS only) | `Date` | `-` | - |
36
220
  | previousMonthButton (JS only) | `HTMLButtonElement` | `-` | This is the first focusable element, needed for the modal focus trap. |
221
+ | resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
37
222
  | selectedCell (JS only) | `HTMLTableCellElement` | `-` | - |
38
223
  | selectedDate (JS only) | `Date \| null` | `-` | - |
39
224
  | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
40
225
  | todayCell (JS only) | `HTMLTableCellElement` | `-` | - |
41
226
  | toggleButton (JS only) | `HTMLButtonElement` | `-` | - |
42
- | value | `string` | `-` | - |
43
- | weekday-format | `string` | `'EEEEEE'` | Decides the format of the weekday as shown above the grid of dates in the calendar. |
227
+ | value | `string \| undefined` | `-` | The selected date value. |
228
+ | weekday-format | `string` | `"EEEEEE"` | The weekday format shown above the calendar grid. |
44
229
  | weeks (JS only) | `unknown` | `-` | - |
45
230
  | wrapper (JS only) | `HTMLDivElement` | `-` | - |
46
231
 
@@ -55,21 +240,21 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
55
240
 
56
241
  #### day-format
57
242
 
58
- Decides the format of the day in the calendar as read to screen readers.
243
+ The date format used for calendar day accessible names.
59
244
 
60
245
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
61
246
 
62
247
  - Type: `string`
63
- - Default: `'PPPP'`
248
+ - Default: `"PPPP"`
64
249
 
65
250
  #### header-format
66
251
 
67
- Decides the format of the date as shown in the calendar header.
252
+ The date format used in the calendar header.
68
253
 
69
254
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
70
255
 
71
256
  - Type: `string`
72
- - Default: `'MMMM yyyy'`
257
+ - Default: `"MMMM yyyy"`
73
258
 
74
259
  #### input (JS only)
75
260
 
@@ -87,23 +272,27 @@ The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/form
87
272
 
88
273
  #### isDayDisabled (JS only)
89
274
 
90
- Lets you control if a date in the calendar should be disabled.
275
+ Function used to disable dates in the calendar.
91
276
 
92
- This needs to be set on the element instance in JavaScript, not as an HTML attribute.
277
+ Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar.
93
278
 
94
- - Type: `(day: Date) => boolean`
279
+ - Type: `((day: Date) => boolean) | undefined`
95
280
  - Default: `-`
96
281
 
97
282
  #### label
98
283
 
284
+ The label displayed above the date input.
99
285
 
286
+ Use this to give the datepicker a visible and accessible name.
100
287
 
101
- - Type: `string`
288
+ - Type: `string | undefined`
102
289
  - Default: `-`
103
290
 
104
291
  #### lang
105
292
 
106
- Takes precedence over the `<html>` lang attribute.
293
+ The locale used for calendar labels and date formatting.
294
+
295
+ This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.
107
296
 
108
297
  - Type: `string`
109
298
  - Default: `-`
@@ -117,9 +306,11 @@ Takes precedence over the `<html>` lang attribute.
117
306
 
118
307
  #### name
119
308
 
309
+ The name submitted with the date value.
120
310
 
311
+ Use this when the datepicker belongs to a form and its value should be included in form data.
121
312
 
122
- - Type: `string`
313
+ - Type: `string | undefined`
123
314
  - Default: `-`
124
315
 
125
316
  #### navigationDate (JS only)
@@ -140,6 +331,13 @@ the query will point to an element that doesn't exist anymore.
140
331
  - Type: `HTMLButtonElement`
141
332
  - Default: `-`
142
333
 
334
+ #### resetFormControl (JS only)
335
+
336
+
337
+
338
+ - Type: `resetFormControl() => void`
339
+ - Default: `-`
340
+
143
341
  #### selectedCell (JS only)
144
342
 
145
343
 
@@ -177,19 +375,21 @@ the query will point to an element that doesn't exist anymore.
177
375
 
178
376
  #### value
179
377
 
378
+ The selected date value.
180
379
 
380
+ Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.
181
381
 
182
- - Type: `string`
382
+ - Type: `string | undefined`
183
383
  - Default: `-`
184
384
 
185
385
  #### weekday-format
186
386
 
187
- Decides the format of the weekday as shown above the grid of dates in the calendar.
387
+ The weekday format shown above the calendar grid.
188
388
 
189
389
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
190
390
 
191
391
  - Type: `string`
192
- - Default: `'EEEEEE'`
392
+ - Default: `"EEEEEE"`
193
393
 
194
394
  #### weeks (JS only)
195
395
 
package/dist/docs/datepicker/examples.md CHANGED
@@ -1 +1,76 @@
1
1
  ## Examples
2
+
3
+ ### Basic
4
+
5
+ <elements-example>
6
+
7
+ ```html
8
+ <w-datepicker label="Date" name="date"></w-datepicker>
9
+ ```
10
+
11
+ </elements-example>
12
+
13
+ ### With Value
14
+
15
+ <elements-example>
16
+
17
+ ```html
18
+ <w-datepicker label="Start date" name="start-date" value="2026-06-15"></w-datepicker>
19
+ ```
20
+
21
+ </elements-example>
22
+
23
+ ### Locale
24
+
25
+ <elements-example>
26
+
27
+ ```html
28
+ <w-datepicker label="Dato" name="date" lang="nb"></w-datepicker>
29
+ ```
30
+
31
+ </elements-example>
32
+
33
+ ### Custom Formats
34
+
35
+ <elements-example>
36
+
37
+ ```html
38
+ <w-datepicker
39
+ label="Date"
40
+ name="date"
41
+ header-format="MMMM yyyy"
42
+ weekday-format="EEEEEE"
43
+ day-format="PPPP"
44
+ ></w-datepicker>
45
+ ```
46
+
47
+ </elements-example>
48
+
49
+ ### Form Associated
50
+
51
+ <elements-example>
52
+
53
+ ```html
54
+ <form>
55
+ <w-datepicker label="Departure date" name="departure"></w-datepicker>
56
+ <w-button type="submit">Search</w-button>
57
+ </form>
58
+ ```
59
+
60
+ </elements-example>
61
+
62
+ ### Disabled Calendar Dates
63
+
64
+ <elements-example>
65
+
66
+ ```html
67
+ <w-datepicker id="booking-date" label="Booking date" name="booking-date"></w-datepicker>
68
+
69
+ <script type="module">
70
+ const datepicker = document.querySelector('#booking-date');
71
+
72
+ datepicker.isDayDisabled = (day) => day.getDay() === 0;
73
+ </script>
74
+ ```
75
+
76
+ </elements-example>
package/dist/docs/datepicker/styling.md ADDED
@@ -0,0 +1 @@
1
+ ## Styling API
package/dist/docs/datepicker/usage.md CHANGED
@@ -1 +1,85 @@
1
1
  ## Usage
2
+
3
+ Datepicker lets users type or choose a calendar date.
4
+
5
+ Use `w-datepicker` when the user needs to provide one specific date, such as a travel date, appointment date, or deadline. The component is form-associated and submits an ISO date value.
6
+
7
+ ### Basic Datepicker
8
+
9
+ ```html
10
+ <w-datepicker label="Date" name="date"></w-datepicker>
11
+ ```
12
+
13
+ Always provide a visible `label`.
14
+
15
+ ### Value
16
+
17
+ Use `value` to set the selected date. The value should use `YYYY-MM-DD` format.
18
+
19
+ ```html
20
+ <w-datepicker label="Start date" name="start-date" value="2026-06-15"></w-datepicker>
21
+ ```
22
+
23
+ The same value is submitted with the form.
24
+
25
+ ```html
26
+ <form>
27
+ <w-datepicker label="Departure date" name="departure"></w-datepicker>
28
+ <w-button type="submit">Search</w-button>
29
+ </form>
30
+ ```
31
+
32
+ ### Locale
33
+
34
+ Datepicker uses the `lang` attribute on the component, or the `lang` attribute on `<html>`, to choose locale-specific calendar labels and formatting.
35
+
36
+ ```html
37
+ <w-datepicker label="Dato" name="date" lang="nb"></w-datepicker>
38
+ ```
39
+
40
+ The component includes built-in locale support for `en`, `nb`, `sv`, `da`, and `fi`.
41
+
42
+ ### Formatting
43
+
44
+ Use `header-format`, `weekday-format`, and `day-format` to control calendar display and accessible day labels.
45
+
46
+ ```html
47
+ <w-datepicker
48
+ label="Date"
49
+ name="date"
50
+ header-format="MMMM yyyy"
51
+ weekday-format="EEEEEE"
52
+ day-format="PPPP"
53
+ ></w-datepicker>
54
+ ```
55
+
56
+ These formats use `date-fns/format` syntax. Keep `day-format` descriptive because it is used as the accessible name for each day in the calendar.
57
+
58
+ ### Disable Dates
59
+
60
+ Use `isDayDisabled` to prevent users from selecting certain dates from the calendar.
61
+
62
+ This property must be set on the element instance in JavaScript.
63
+
64
+ ```html
65
+ <w-datepicker id="booking-date" label="Booking date" name="booking-date"></w-datepicker>
66
+
67
+ <script type="module">
68
+ const datepicker = document.querySelector('#booking-date');
69
+
70
+ datepicker.isDayDisabled = (day) => day.getDay() === 0;
71
+ </script>
72
+ ```
73
+
74
+ Disabled dates cannot be selected from the calendar.
75
+
76
+ ### About change events
77
+
78
+ With events the datepicker works much like the native `<input type="date">`:
79
+
80
+ - When the user types in the input field the component fires [`input` events](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
81
+ - When the user clicks a date in the calendar the component fires [`change` events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).
82
+
83
+ Note that the component does not fire a `change` event when typing in the input field. This is intentional.
84
+
85
+ You can listen to the [`blur` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) if you only care about getting a value, no matter if it was typed or chosen via the calendar. Note that the `blur` event might not fire if the user types and submits the form without leaving the input field. If you use the `blur` event to update JavaScript state you should read the value from the datepicker in your `submit` handler as well.
package/dist/docs/expandable/api.md CHANGED
@@ -6,93 +6,81 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
6
6
 
7
7
  | Name | Type | Default | Summary |
8
8
  |-|-|-|-|
9
- | _hasTitle | `boolean` | `true` | - |
10
- | _showChevronUp | `boolean` | `false` | - |
11
- | animated | `boolean` | `false` | - |
12
- | bleed | `boolean` | `false` | - |
13
- | box | `boolean` | `false` | - |
14
- | button-class | `string` | `-` | - |
15
- | content-class | `string` | `-` | - |
16
- | expanded | `boolean` | `false` | - |
17
- | heading-level | `number` | `-` | - |
18
- | no-chevron | `boolean` | `false` | - |
19
- | title | `string` | `-` | - |
9
+ | animated | `boolean` | `false` | Will animate the expansion/collapse |
10
+ | bleed | `boolean` | `false` | Will make the expandable full-width on the sm breakpoint size |
11
+ | box | `boolean` | `false` | Will make the expandable a Box |
12
+ | button-class | `string \| undefined` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
13
+ | content-class | `string \| undefined` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
14
+ | expanded | `boolean` | `false` | Controls component's expanded state |
15
+ | heading-level | `number \| undefined` | `-` | Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. |
16
+ | no-chevron | `boolean` | `false` | Controls chevron visibility |
17
+ | title | `string` | `-` | Component title. Used to display the title value which is always present regardless of whether the component is open or closed. |
20
18
 
21
19
  ### Property Details
22
20
 
23
- #### _hasTitle
24
-
25
-
26
-
27
- - Type: `boolean`
28
- - Default: `true`
29
-
30
- #### _showChevronUp
31
-
32
-
33
-
34
- - Type: `boolean`
35
- - Default: `false`
36
-
37
21
  #### animated
38
22
 
39
-
23
+ Will animate the expansion/collapse
40
24
 
41
25
  - Type: `boolean`
42
26
  - Default: `false`
43
27
 
44
28
  #### bleed
45
29
 
46
-
30
+ Will make the expandable full-width on the sm breakpoint size
47
31
 
48
32
  - Type: `boolean`
49
33
  - Default: `false`
50
34
 
51
35
  #### box
52
36
 
53
-
37
+ Will make the expandable a Box
54
38
 
55
39
  - Type: `boolean`
56
40
  - Default: `false`
57
41
 
58
42
  #### button-class
59
43
 
44
+ **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
60
45
 
61
46
 
62
- - Type: `string`
47
+
48
+ - Type: `string | undefined`
63
49
  - Default: `-`
64
50
 
65
51
  #### content-class
66
52
 
53
+ **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
67
54
 
68
55
 
69
- - Type: `string`
56
+
57
+ - Type: `string | undefined`
70
58
  - Default: `-`
71
59
 
72
60
  #### expanded
73
61
 
74
-
62
+ Controls component's expanded state
75
63
 
76
64
  - Type: `boolean`
77
65
  - Default: `false`
78
66
 
79
67
  #### heading-level
80
68
 
69
+ Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
81
70
 
82
-
83
- - Type: `number`
71
+ - Type: `number | undefined`
84
72
  - Default: `-`
85
73
 
86
74
  #### no-chevron
87
75
 
88
-
76
+ Controls chevron visibility
89
77
 
90
78
  - Type: `boolean`
91
79
  - Default: `false`
92
80
 
93
81
  #### title
94
82
 
95
-
83
+ Component title. Used to display the title value which is always present regardless of whether the component is open or closed.
96
84
 
97
85
  - Type: `string`
98
86
  - Default: `-`
package/dist/docs/expandable/examples.md CHANGED
@@ -1 +1,55 @@
1
1
  ## Examples
2
+
3
+ <elements-example>
4
+
5
+ ```html
6
+ <w-expandable title="I'm expandable" animated>
7
+ <p>with expanded content</p>
8
+ </w-expandable>
9
+ ```
10
+
11
+ </elements-example>
12
+
13
+ ### Expandable box
14
+
15
+ <elements-example>
16
+
17
+ ```html
18
+ <w-expandable title="I'm expandable" animated box>
19
+ <p>with expanded content</p>
20
+ </w-expandable>
21
+ ```
22
+
23
+ </elements-example>
24
+
25
+
26
+ ### Expandable box with custom title
27
+
28
+ This can be used if more control over styling is needed than the `title` prop allows
29
+
30
+ <elements-example>
31
+
32
+ ```html
33
+ <w-expandable animated box>
34
+ <div slot="title" class="flex flex-row items-center">
35
+ <w-icon-bag-16></w-icon-bag-16>
36
+ <p class="ml-8 mb-0">This is a title with an icon</p>
37
+ </div>
38
+ <p>with expanded content</p>
39
+ </w-expandable>
40
+ ```
41
+
42
+ </elements-example>
43
+
44
+
45
+ ### With expanded prop
46
+
47
+ <elements-example>
48
+
49
+ ```html
50
+ <w-expandable animated box title="I'm expanded by default" expanded>
51
+ <p>content should be visible</p>
52
+ </w-expandable>
53
+ ```
54
+
55
+ </elements-example>