@warp-ds/elements 2.10.0-next.8 → 2.10.0

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 (712) hide show
  1. package/dist/.storybook/utilities.js +4 -4
  2. package/dist/api.js +1 -1
  3. package/dist/api.js.map +2 -2
  4. package/dist/custom-elements.json +1166 -502
  5. package/dist/docs/affix/affix.md +119 -2
  6. package/dist/docs/affix/api.md +2 -2
  7. package/dist/docs/affix/styling.md +107 -0
  8. package/dist/docs/alert/alert.md +4 -4
  9. package/dist/docs/alert/api.md +4 -4
  10. package/dist/docs/attention/api.md +50 -2
  11. package/dist/docs/attention/attention.md +50 -2
  12. package/dist/docs/badge/api.md +50 -4
  13. package/dist/docs/badge/badge.md +50 -4
  14. package/dist/docs/box/api.md +2 -2
  15. package/dist/docs/box/box.md +2 -2
  16. package/dist/docs/breadcrumb-item/api.md +27 -0
  17. package/dist/docs/breadcrumb-item/breadcrumb-item.md +34 -0
  18. package/dist/docs/breadcrumbs/accessibility.md +8 -18
  19. package/dist/docs/breadcrumbs/breadcrumbs.md +120 -34
  20. package/dist/docs/breadcrumbs/examples.md +8 -8
  21. package/dist/docs/breadcrumbs/styling.md +96 -0
  22. package/dist/docs/breadcrumbs/usage.md +8 -8
  23. package/dist/docs/button/api.md +32 -24
  24. package/dist/docs/button/button.md +32 -24
  25. package/dist/docs/card/api.md +8 -0
  26. package/dist/docs/card/card.md +8 -0
  27. package/dist/docs/checkbox/api.md +52 -4
  28. package/dist/docs/checkbox/checkbox.md +226 -4
  29. package/dist/docs/checkbox/styling.md +173 -0
  30. package/dist/docs/checkbox-group/api.md +30 -6
  31. package/dist/docs/checkbox-group/checkbox-group.md +73 -36
  32. package/dist/docs/checkbox-group/styling.md +31 -29
  33. package/dist/docs/combobox/api.md +20 -12
  34. package/dist/docs/combobox/combobox.md +20 -12
  35. package/dist/docs/datepicker/api.md +22 -14
  36. package/dist/docs/datepicker/datepicker.md +22 -14
  37. package/dist/docs/expandable/api.md +6 -6
  38. package/dist/docs/expandable/expandable.md +6 -6
  39. package/dist/docs/icon/api.md +4 -4
  40. package/dist/docs/icon/icon.md +4 -4
  41. package/dist/docs/index.md +5 -2
  42. package/dist/docs/link/api.md +10 -10
  43. package/dist/docs/link/link.md +10 -10
  44. package/dist/docs/modal/api.md +20 -2
  45. package/dist/docs/modal/modal.md +99 -10
  46. package/dist/docs/modal/styling.md +75 -0
  47. package/dist/docs/modal/usage.md +4 -8
  48. package/dist/docs/pagination/api.md +4 -4
  49. package/dist/docs/pagination/pagination.md +4 -4
  50. package/dist/docs/pill/api.md +8 -8
  51. package/dist/docs/pill/pill.md +8 -8
  52. package/dist/docs/radio-group/api.md +4 -4
  53. package/dist/docs/radio-group/radio-group.md +183 -68
  54. package/dist/docs/radio-group/styling.md +179 -64
  55. package/dist/docs/select/api.md +10 -10
  56. package/dist/docs/select/select.md +101 -10
  57. package/dist/docs/select/styling.md +91 -0
  58. package/dist/docs/slider/api.md +38 -22
  59. package/dist/docs/slider/slider.md +38 -22
  60. package/dist/docs/slider-thumb/api.md +28 -12
  61. package/dist/docs/slider-thumb/slider-thumb.md +28 -12
  62. package/dist/docs/snackbar/accessibility.md +20 -0
  63. package/dist/docs/snackbar/api.md +30 -0
  64. package/dist/docs/snackbar/examples.md +191 -0
  65. package/dist/docs/snackbar/snackbar.md +385 -0
  66. package/dist/docs/snackbar/styling.md +72 -0
  67. package/dist/docs/snackbar/usage.md +60 -0
  68. package/dist/docs/snackbar-item/api.md +41 -0
  69. package/dist/docs/snackbar-item/snackbar-item.md +49 -0
  70. package/dist/docs/step/api.md +16 -0
  71. package/dist/docs/step/step.md +16 -0
  72. package/dist/docs/switch/api.md +8 -0
  73. package/dist/docs/switch/switch.md +8 -0
  74. package/dist/docs/tabs/api.md +2 -2
  75. package/dist/docs/tabs/tabs.md +2 -2
  76. package/dist/docs/textarea/api.md +54 -14
  77. package/dist/docs/textarea/styling.md +91 -0
  78. package/dist/docs/textarea/textarea.md +145 -14
  79. package/dist/docs/textfield/api.md +74 -34
  80. package/dist/docs/textfield/styling.md +95 -0
  81. package/dist/docs/textfield/textfield.md +169 -34
  82. package/dist/index.d.ts +914 -93
  83. package/dist/packages/affix/affix-styles.d.ts +8 -0
  84. package/dist/packages/affix/affix-styles.js +108 -0
  85. package/dist/packages/affix/affix.d.ts +16 -13
  86. package/dist/packages/affix/affix.hydration.test.d.ts +1 -1
  87. package/dist/packages/affix/affix.hydration.test.js +15 -15
  88. package/dist/packages/affix/affix.js +451 -320
  89. package/dist/packages/affix/affix.js.map +4 -4
  90. package/dist/packages/affix/affix.react.stories.d.ts +3 -3
  91. package/dist/packages/affix/affix.react.stories.js +3 -3
  92. package/dist/packages/affix/affix.react.test.js +5 -3
  93. package/dist/packages/affix/affix.stories.d.ts +3 -3
  94. package/dist/packages/affix/affix.stories.js +10 -10
  95. package/dist/packages/affix/affix.test.d.ts +1 -1
  96. package/dist/packages/affix/affix.test.js +10 -10
  97. package/dist/packages/affix/react.d.ts +3 -3
  98. package/dist/packages/affix/react.js +6 -6
  99. package/dist/packages/affix/styles.js +2 -2
  100. package/dist/packages/alert/alert.d.ts +3 -3
  101. package/dist/packages/alert/alert.hydration.test.d.ts +1 -1
  102. package/dist/packages/alert/alert.hydration.test.js +21 -21
  103. package/dist/packages/alert/alert.js +349 -324
  104. package/dist/packages/alert/alert.js.map +3 -3
  105. package/dist/packages/alert/alert.react.stories.d.ts +2 -2
  106. package/dist/packages/alert/alert.react.stories.js +13 -13
  107. package/dist/packages/alert/alert.stories.d.ts +4 -4
  108. package/dist/packages/alert/alert.stories.js +29 -27
  109. package/dist/packages/alert/alert.test.d.ts +1 -1
  110. package/dist/packages/alert/alert.test.js +34 -21
  111. package/dist/packages/alert/react.d.ts +1 -1
  112. package/dist/packages/alert/react.js +4 -4
  113. package/dist/packages/alert/styles.js +2 -2
  114. package/dist/packages/attention/attention.d.ts +11 -6
  115. package/dist/packages/attention/attention.hydration.test.d.ts +1 -1
  116. package/dist/packages/attention/attention.hydration.test.js +29 -29
  117. package/dist/packages/attention/attention.js +1744 -1681
  118. package/dist/packages/attention/attention.js.map +4 -4
  119. package/dist/packages/attention/attention.react.stories.d.ts +3 -3
  120. package/dist/packages/attention/attention.react.stories.js +13 -13
  121. package/dist/packages/attention/attention.react.test.js +11 -7
  122. package/dist/packages/attention/attention.stories.d.ts +4 -4
  123. package/dist/packages/attention/attention.stories.js +126 -117
  124. package/dist/packages/attention/attention.test.d.ts +1 -1
  125. package/dist/packages/attention/attention.test.js +18 -10
  126. package/dist/packages/attention/layout-styles.js +900 -900
  127. package/dist/packages/attention/react.d.ts +4 -4
  128. package/dist/packages/attention/react.js +13 -11
  129. package/dist/packages/attention/styles.js +2 -2
  130. package/dist/packages/badge/badge.d.ts +3 -3
  131. package/dist/packages/badge/badge.hydration.test.d.ts +1 -1
  132. package/dist/packages/badge/badge.hydration.test.js +25 -25
  133. package/dist/packages/badge/badge.js +281 -281
  134. package/dist/packages/badge/badge.js.map +3 -3
  135. package/dist/packages/badge/badge.react.stories.d.ts +3 -3
  136. package/dist/packages/badge/badge.react.stories.js +17 -17
  137. package/dist/packages/badge/badge.stories.d.ts +3 -3
  138. package/dist/packages/badge/badge.stories.js +22 -20
  139. package/dist/packages/badge/badge.test.d.ts +1 -1
  140. package/dist/packages/badge/badge.test.js +13 -11
  141. package/dist/packages/badge/react.d.ts +1 -1
  142. package/dist/packages/badge/react.js +4 -4
  143. package/dist/packages/badge/styles.js +2 -2
  144. package/dist/packages/box/box.d.ts +1 -1
  145. package/dist/packages/box/box.hydration.test.d.ts +1 -1
  146. package/dist/packages/box/box.hydration.test.js +14 -14
  147. package/dist/packages/box/box.js +288 -288
  148. package/dist/packages/box/box.js.map +3 -3
  149. package/dist/packages/box/box.react.stories.d.ts +3 -3
  150. package/dist/packages/box/box.react.stories.js +8 -8
  151. package/dist/packages/box/box.stories.d.ts +3 -3
  152. package/dist/packages/box/box.stories.js +25 -19
  153. package/dist/packages/box/box.test.d.ts +1 -1
  154. package/dist/packages/box/box.test.js +6 -6
  155. package/dist/packages/box/react.d.ts +1 -1
  156. package/dist/packages/box/react.js +4 -4
  157. package/dist/packages/box/slot.test.d.ts +1 -1
  158. package/dist/packages/box/slot.test.js +6 -6
  159. package/dist/packages/box/styles.js +2 -2
  160. package/dist/packages/breadcrumb-item/breadcrumb-item.d.ts +29 -0
  161. package/dist/packages/breadcrumb-item/breadcrumb-item.js +2529 -0
  162. package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +7 -0
  163. package/dist/packages/breadcrumb-item/react.d.ts +2 -0
  164. package/dist/packages/breadcrumb-item/react.js +11 -0
  165. package/dist/packages/breadcrumb-item/styles.d.ts +4 -0
  166. package/dist/packages/breadcrumb-item/styles.js +81 -0
  167. package/dist/packages/breadcrumbs/breadcrumbs.d.ts +4 -3
  168. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.d.ts +1 -1
  169. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +55 -49
  170. package/dist/packages/breadcrumbs/breadcrumbs.js +287 -283
  171. package/dist/packages/breadcrumbs/breadcrumbs.js.map +4 -4
  172. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +4 -4
  173. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +17 -16
  174. package/dist/packages/breadcrumbs/breadcrumbs.stories.d.ts +7 -8
  175. package/dist/packages/breadcrumbs/breadcrumbs.stories.js +30 -26
  176. package/dist/packages/breadcrumbs/breadcrumbs.test.d.ts +1 -1
  177. package/dist/packages/breadcrumbs/breadcrumbs.test.js +19 -17
  178. package/dist/packages/breadcrumbs/react.d.ts +1 -1
  179. package/dist/packages/breadcrumbs/react.js +4 -4
  180. package/dist/packages/breadcrumbs/styles.js +2 -2
  181. package/dist/packages/button/button.d.ts +20 -15
  182. package/dist/packages/button/button.hydration.test.d.ts +1 -1
  183. package/dist/packages/button/button.hydration.test.js +19 -19
  184. package/dist/packages/button/button.js +759 -712
  185. package/dist/packages/button/button.js.map +4 -4
  186. package/dist/packages/button/button.react.stories.d.ts +5 -5
  187. package/dist/packages/button/button.react.stories.js +30 -30
  188. package/dist/packages/button/button.react.test.js +13 -13
  189. package/dist/packages/button/button.stories.d.ts +4 -4
  190. package/dist/packages/button/button.stories.js +276 -167
  191. package/dist/packages/button/button.test.d.ts +1 -1
  192. package/dist/packages/button/button.test.js +36 -35
  193. package/dist/packages/button/react.d.ts +3 -3
  194. package/dist/packages/button/react.js +7 -7
  195. package/dist/packages/button/styles.js +373 -331
  196. package/dist/packages/card/card.d.ts +1 -1
  197. package/dist/packages/card/card.hydration.test.d.ts +1 -1
  198. package/dist/packages/card/card.hydration.test.js +14 -14
  199. package/dist/packages/card/card.js +311 -296
  200. package/dist/packages/card/card.js.map +4 -4
  201. package/dist/packages/card/card.react.stories.d.ts +3 -3
  202. package/dist/packages/card/card.react.stories.js +11 -11
  203. package/dist/packages/card/card.stories.d.ts +3 -3
  204. package/dist/packages/card/card.stories.js +36 -24
  205. package/dist/packages/card/card.test.d.ts +1 -1
  206. package/dist/packages/card/card.test.js +6 -6
  207. package/dist/packages/card/react.d.ts +1 -1
  208. package/dist/packages/card/react.js +4 -4
  209. package/dist/packages/card/styles.js +2 -2
  210. package/dist/packages/checkbox/checkbox.a11y.test.d.ts +1 -1
  211. package/dist/packages/checkbox/checkbox.a11y.test.js +47 -33
  212. package/dist/packages/checkbox/checkbox.d.ts +4 -4
  213. package/dist/packages/checkbox/checkbox.hydration.test.d.ts +1 -1
  214. package/dist/packages/checkbox/checkbox.hydration.test.js +21 -21
  215. package/dist/packages/checkbox/checkbox.js +481 -430
  216. package/dist/packages/checkbox/checkbox.js.map +3 -3
  217. package/dist/packages/checkbox/checkbox.react.stories.d.ts +2 -2
  218. package/dist/packages/checkbox/checkbox.react.stories.js +3 -3
  219. package/dist/packages/checkbox/checkbox.stories.d.ts +4 -4
  220. package/dist/packages/checkbox/checkbox.stories.js +99 -91
  221. package/dist/packages/checkbox/checkbox.test.d.ts +1 -1
  222. package/dist/packages/checkbox/checkbox.test.js +64 -64
  223. package/dist/packages/checkbox/react.d.ts +1 -1
  224. package/dist/packages/checkbox/react.js +6 -6
  225. package/dist/packages/checkbox/styles.js +183 -132
  226. package/dist/packages/checkbox-group/checkbox-group.a11y.test.d.ts +2 -2
  227. package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +83 -73
  228. package/dist/packages/checkbox-group/checkbox-group.d.ts +20 -6
  229. package/dist/packages/checkbox-group/checkbox-group.hydration.test.d.ts +2 -2
  230. package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +36 -19
  231. package/dist/packages/checkbox-group/checkbox-group.js +62 -57
  232. package/dist/packages/checkbox-group/checkbox-group.js.map +4 -4
  233. package/dist/packages/checkbox-group/checkbox-group.react.test.js +4 -4
  234. package/dist/packages/checkbox-group/checkbox-group.test.d.ts +2 -2
  235. package/dist/packages/checkbox-group/checkbox-group.test.js +183 -90
  236. package/dist/packages/checkbox-group/react.d.ts +3 -3
  237. package/dist/packages/checkbox-group/react.js +6 -6
  238. package/dist/packages/combobox/combobox.a11y.test.d.ts +2 -2
  239. package/dist/packages/combobox/combobox.a11y.test.js +72 -49
  240. package/dist/packages/combobox/combobox.d.ts +2 -2
  241. package/dist/packages/combobox/combobox.hydration.test.d.ts +1 -1
  242. package/dist/packages/combobox/combobox.hydration.test.js +45 -45
  243. package/dist/packages/combobox/combobox.js +338 -339
  244. package/dist/packages/combobox/combobox.js.map +4 -4
  245. package/dist/packages/combobox/combobox.react.stories.d.ts +29 -13
  246. package/dist/packages/combobox/combobox.react.stories.js +29 -29
  247. package/dist/packages/combobox/combobox.react.test.js +8 -8
  248. package/dist/packages/combobox/combobox.stories.d.ts +4 -4
  249. package/dist/packages/combobox/combobox.stories.js +100 -94
  250. package/dist/packages/combobox/combobox.test.d.ts +2 -2
  251. package/dist/packages/combobox/combobox.test.js +249 -133
  252. package/dist/packages/combobox/react.d.ts +15 -7
  253. package/dist/packages/combobox/react.js +14 -14
  254. package/dist/packages/combobox/styles.js +2 -3
  255. package/dist/packages/datepicker/DatePicker.test.d.ts +2 -2
  256. package/dist/packages/datepicker/DatePicker.test.js +49 -42
  257. package/dist/packages/datepicker/datepicker.d.ts +8 -8
  258. package/dist/packages/datepicker/datepicker.hydration.test.d.ts +1 -1
  259. package/dist/packages/datepicker/datepicker.hydration.test.js +21 -21
  260. package/dist/packages/datepicker/datepicker.js +673 -632
  261. package/dist/packages/datepicker/datepicker.js.map +4 -4
  262. package/dist/packages/datepicker/datepicker.react.stories.d.ts +17 -17
  263. package/dist/packages/datepicker/datepicker.react.stories.js +9 -9
  264. package/dist/packages/datepicker/datepicker.react.test.js +6 -6
  265. package/dist/packages/datepicker/datepicker.stories.d.ts +4 -4
  266. package/dist/packages/datepicker/datepicker.stories.js +32 -32
  267. package/dist/packages/datepicker/datepicker.test.d.ts +2 -2
  268. package/dist/packages/datepicker/datepicker.test.js +77 -79
  269. package/dist/packages/datepicker/react.d.ts +9 -9
  270. package/dist/packages/datepicker/react.js +16 -14
  271. package/dist/packages/datepicker/styles/w-datepicker-calendar.styles.js +13 -12
  272. package/dist/packages/datepicker/styles/w-datepicker-day.styles.js +58 -55
  273. package/dist/packages/datepicker/styles/w-datepicker-month.styles.js +60 -57
  274. package/dist/packages/datepicker/styles/w-datepicker.styles.js +87 -87
  275. package/dist/packages/datepicker/utils.d.ts +3 -0
  276. package/dist/packages/datepicker/utils.js +40 -1
  277. package/dist/packages/datepicker/utils.test.d.ts +1 -0
  278. package/dist/packages/datepicker/utils.test.js +29 -0
  279. package/dist/packages/expandable/expandable.d.ts +7 -7
  280. package/dist/packages/expandable/expandable.hydration.test.d.ts +1 -1
  281. package/dist/packages/expandable/expandable.hydration.test.js +21 -21
  282. package/dist/packages/expandable/expandable.js +359 -332
  283. package/dist/packages/expandable/expandable.js.map +4 -4
  284. package/dist/packages/expandable/expandable.react.stories.d.ts +3 -3
  285. package/dist/packages/expandable/expandable.react.stories.js +7 -7
  286. package/dist/packages/expandable/expandable.react.test.js +15 -7
  287. package/dist/packages/expandable/expandable.stories.d.ts +5 -5
  288. package/dist/packages/expandable/expandable.stories.js +51 -45
  289. package/dist/packages/expandable/expandable.test.d.ts +1 -1
  290. package/dist/packages/expandable/expandable.test.js +19 -17
  291. package/dist/packages/expandable/react.d.ts +2 -2
  292. package/dist/packages/expandable/react.js +9 -9
  293. package/dist/packages/expandable/styles.js +2 -2
  294. package/dist/packages/global.d.ts +1 -0
  295. package/dist/packages/global.js +5 -0
  296. package/dist/packages/i18n.d.ts +1 -1
  297. package/dist/packages/i18n.js +37 -29
  298. package/dist/packages/icon/icon.d.ts +7 -2
  299. package/dist/packages/icon/icon.hydration.test.d.ts +1 -1
  300. package/dist/packages/icon/icon.hydration.test.js +25 -25
  301. package/dist/packages/icon/icon.js +31 -26
  302. package/dist/packages/icon/icon.js.map +3 -3
  303. package/dist/packages/icon/icon.react.stories.d.ts +3 -2
  304. package/dist/packages/icon/icon.react.stories.js +284 -283
  305. package/dist/packages/icon/icon.stories.d.ts +7 -30
  306. package/dist/packages/icon/icon.stories.js +307 -297
  307. package/dist/packages/icon/icon.test.d.ts +1 -1
  308. package/dist/packages/icon/icon.test.js +36 -28
  309. package/dist/packages/icon/react.d.ts +1 -1
  310. package/dist/packages/icon/react.js +4 -4
  311. package/dist/packages/icon/style.js +24 -25
  312. package/dist/packages/interaction-type-detection.d.ts +22 -0
  313. package/dist/packages/interaction-type-detection.js +38 -0
  314. package/dist/packages/link/link.d.ts +7 -7
  315. package/dist/packages/link/link.hydration.test.d.ts +1 -1
  316. package/dist/packages/link/link.hydration.test.js +27 -27
  317. package/dist/packages/link/link.js +729 -682
  318. package/dist/packages/link/link.js.map +3 -3
  319. package/dist/packages/link/link.react.stories.d.ts +3 -3
  320. package/dist/packages/link/link.react.stories.js +42 -42
  321. package/dist/packages/link/link.react.test.js +5 -3
  322. package/dist/packages/link/link.stories.d.ts +3 -3
  323. package/dist/packages/link/link.stories.js +51 -51
  324. package/dist/packages/link/link.test.d.ts +1 -1
  325. package/dist/packages/link/link.test.js +11 -7
  326. package/dist/packages/link/react.d.ts +2 -2
  327. package/dist/packages/link/react.js +6 -6
  328. package/dist/packages/link/styles.js +63 -58
  329. package/dist/packages/modal/index.d.ts +7 -7
  330. package/dist/packages/modal/index.js +7 -7
  331. package/dist/packages/modal/modal.d.ts +19 -4
  332. package/dist/packages/modal/modal.hydration.test.d.ts +1 -1
  333. package/dist/packages/modal/modal.hydration.test.js +12 -12
  334. package/dist/packages/modal/modal.js +456 -409
  335. package/dist/packages/modal/modal.js.map +4 -4
  336. package/dist/packages/modal/modal.react.stories.d.ts +7 -7
  337. package/dist/packages/modal/modal.react.stories.js +15 -6
  338. package/dist/packages/modal/modal.react.test.js +5 -5
  339. package/dist/packages/modal/modal.stories.d.ts +9 -8
  340. package/dist/packages/modal/modal.stories.js +266 -248
  341. package/dist/packages/modal/react.d.ts +38 -8
  342. package/dist/packages/modal/react.js +43 -13
  343. package/dist/packages/modal/styles.d.ts +1 -0
  344. package/dist/packages/modal/styles.js +171 -0
  345. package/dist/packages/modal/util.js +3 -1
  346. package/dist/packages/modal-footer/modal-footer.d.ts +6 -2
  347. package/dist/packages/modal-footer/modal-footer.js +299 -296
  348. package/dist/packages/modal-footer/modal-footer.js.map +4 -4
  349. package/dist/packages/modal-footer/react.d.ts +1 -1
  350. package/dist/packages/modal-footer/react.js +4 -4
  351. package/dist/packages/modal-footer/styles.d.ts +1 -0
  352. package/dist/packages/modal-footer/styles.js +22 -0
  353. package/dist/packages/modal-header/modal-header.d.ts +14 -7
  354. package/dist/packages/modal-header/modal-header.js +451 -422
  355. package/dist/packages/modal-header/modal-header.js.map +4 -4
  356. package/dist/packages/modal-header/modal-header.react.test.js +5 -3
  357. package/dist/packages/modal-header/react.d.ts +4 -4
  358. package/dist/packages/modal-header/react.js +8 -8
  359. package/dist/packages/modal-header/styles.d.ts +1 -0
  360. package/dist/packages/modal-header/styles.js +96 -0
  361. package/dist/packages/page-indicator/page-indicator.d.ts +1 -5
  362. package/dist/packages/page-indicator/page-indicator.hydration.test.d.ts +1 -1
  363. package/dist/packages/page-indicator/page-indicator.hydration.test.js +22 -22
  364. package/dist/packages/page-indicator/page-indicator.js +29 -29
  365. package/dist/packages/page-indicator/page-indicator.js.map +4 -4
  366. package/dist/packages/page-indicator/page-indicator.react.stories.d.ts +3 -3
  367. package/dist/packages/page-indicator/page-indicator.react.stories.js +11 -11
  368. package/dist/packages/page-indicator/page-indicator.react.test.js +5 -5
  369. package/dist/packages/page-indicator/page-indicator.stories.d.ts +9 -27
  370. package/dist/packages/page-indicator/page-indicator.stories.js +63 -32
  371. package/dist/packages/page-indicator/page-indicator.test.d.ts +1 -1
  372. package/dist/packages/page-indicator/page-indicator.test.js +110 -70
  373. package/dist/packages/page-indicator/react.d.ts +2 -2
  374. package/dist/packages/page-indicator/react.js +7 -7
  375. package/dist/packages/page-indicator/style.js +21 -21
  376. package/dist/packages/pagination/pagination.a11y.test.d.ts +1 -1
  377. package/dist/packages/pagination/pagination.a11y.test.js +59 -25
  378. package/dist/packages/pagination/pagination.d.ts +10 -11
  379. package/dist/packages/pagination/pagination.hydration.test.d.ts +1 -1
  380. package/dist/packages/pagination/pagination.hydration.test.js +19 -19
  381. package/dist/packages/pagination/pagination.js +385 -354
  382. package/dist/packages/pagination/pagination.js.map +4 -4
  383. package/dist/packages/pagination/pagination.react.stories.d.ts +11 -11
  384. package/dist/packages/pagination/pagination.react.stories.js +8 -8
  385. package/dist/packages/pagination/pagination.react.test.js +6 -6
  386. package/dist/packages/pagination/pagination.stories.d.ts +3 -3
  387. package/dist/packages/pagination/pagination.stories.js +18 -18
  388. package/dist/packages/pagination/pagination.test.d.ts +1 -1
  389. package/dist/packages/pagination/pagination.test.js +146 -72
  390. package/dist/packages/pagination/react.d.ts +6 -6
  391. package/dist/packages/pagination/react.js +12 -10
  392. package/dist/packages/pagination/styles.js +2 -2
  393. package/dist/packages/pill/pill.d.ts +6 -6
  394. package/dist/packages/pill/pill.hydration.test.d.ts +1 -1
  395. package/dist/packages/pill/pill.hydration.test.js +14 -14
  396. package/dist/packages/pill/pill.js +337 -314
  397. package/dist/packages/pill/pill.js.map +4 -4
  398. package/dist/packages/pill/pill.react.stories.d.ts +11 -11
  399. package/dist/packages/pill/pill.react.stories.js +3 -3
  400. package/dist/packages/pill/pill.react.test.js +8 -8
  401. package/dist/packages/pill/pill.stories.d.ts +3 -3
  402. package/dist/packages/pill/pill.stories.js +8 -8
  403. package/dist/packages/pill/pill.test.d.ts +1 -1
  404. package/dist/packages/pill/pill.test.js +17 -15
  405. package/dist/packages/pill/react.d.ts +6 -6
  406. package/dist/packages/pill/react.js +18 -14
  407. package/dist/packages/pill/styles.js +2 -2
  408. package/dist/packages/radio/base-element.d.ts +3 -3
  409. package/dist/packages/radio/base-element.js +3 -3
  410. package/dist/packages/radio/custom-error-validator.d.ts +1 -1
  411. package/dist/packages/radio/custom-error-validator.js +3 -3
  412. package/dist/packages/radio/form-associated-element.d.ts +9 -9
  413. package/dist/packages/radio/form-associated-element.js +27 -26
  414. package/dist/packages/radio/host-styles.js +9 -9
  415. package/dist/packages/radio/invalid.d.ts +1 -1
  416. package/dist/packages/radio/invalid.js +1 -1
  417. package/dist/packages/radio/radio-styles.js +199 -160
  418. package/dist/packages/radio/radio.a11y.test.d.ts +2 -2
  419. package/dist/packages/radio/radio.a11y.test.js +60 -58
  420. package/dist/packages/radio/radio.d.ts +4 -4
  421. package/dist/packages/radio/radio.hydration.test.d.ts +1 -1
  422. package/dist/packages/radio/radio.hydration.test.js +23 -14
  423. package/dist/packages/radio/radio.js +491 -452
  424. package/dist/packages/radio/radio.js.map +3 -3
  425. package/dist/packages/radio/radio.react.stories.d.ts +2 -2
  426. package/dist/packages/radio/radio.react.stories.js +3 -3
  427. package/dist/packages/radio/radio.stories.d.ts +4 -4
  428. package/dist/packages/radio/radio.stories.js +152 -136
  429. package/dist/packages/radio/radio.test.d.ts +1 -1
  430. package/dist/packages/radio/radio.test.js +74 -73
  431. package/dist/packages/radio/react.d.ts +1 -1
  432. package/dist/packages/radio/react.js +4 -4
  433. package/dist/packages/radio/required-validator.d.ts +1 -1
  434. package/dist/packages/radio/required-validator.js +12 -7
  435. package/dist/packages/radio/slot.d.ts +1 -1
  436. package/dist/packages/radio/slot.js +11 -8
  437. package/dist/packages/radio/watch.d.ts +1 -1
  438. package/dist/packages/radio/watch.js +3 -1
  439. package/dist/packages/radio-group/radio-group-styles.js +121 -88
  440. package/dist/packages/radio-group/radio-group.a11y.test.d.ts +2 -2
  441. package/dist/packages/radio-group/radio-group.a11y.test.js +81 -79
  442. package/dist/packages/radio-group/radio-group.d.ts +16 -7
  443. package/dist/packages/radio-group/radio-group.hydration.test.d.ts +2 -2
  444. package/dist/packages/radio-group/radio-group.hydration.test.js +29 -18
  445. package/dist/packages/radio-group/radio-group.js +655 -567
  446. package/dist/packages/radio-group/radio-group.js.map +4 -4
  447. package/dist/packages/radio-group/radio-group.react.test.js +4 -4
  448. package/dist/packages/radio-group/radio-group.test.d.ts +2 -2
  449. package/dist/packages/radio-group/radio-group.test.js +304 -230
  450. package/dist/packages/radio-group/react.d.ts +7 -7
  451. package/dist/packages/radio-group/react.js +10 -10
  452. package/dist/packages/select/input-styles.d.ts +11 -0
  453. package/dist/packages/select/input-styles.js +88 -0
  454. package/dist/packages/select/locales/da/messages.mjs +1 -1
  455. package/dist/packages/select/locales/en/messages.mjs +1 -1
  456. package/dist/packages/select/locales/fi/messages.mjs +1 -1
  457. package/dist/packages/select/locales/nb/messages.mjs +1 -1
  458. package/dist/packages/select/locales/sv/messages.mjs +1 -1
  459. package/dist/packages/select/react.d.ts +5 -5
  460. package/dist/packages/select/react.js +11 -11
  461. package/dist/packages/select/select.a11y.test.d.ts +1 -1
  462. package/dist/packages/select/select.a11y.test.js +98 -91
  463. package/dist/packages/select/select.d.ts +10 -11
  464. package/dist/packages/select/select.hydration.test.d.ts +1 -1
  465. package/dist/packages/select/select.hydration.test.js +16 -16
  466. package/dist/packages/select/select.js +432 -336
  467. package/dist/packages/select/select.js.map +4 -4
  468. package/dist/packages/select/select.react.stories.d.ts +10 -10
  469. package/dist/packages/select/select.react.stories.js +19 -14
  470. package/dist/packages/select/select.react.test.js +6 -6
  471. package/dist/packages/select/select.stories.d.ts +3 -3
  472. package/dist/packages/select/select.stories.js +51 -48
  473. package/dist/packages/select/select.test.d.ts +1 -1
  474. package/dist/packages/select/select.test.js +227 -178
  475. package/dist/packages/select/styles.js +2 -2
  476. package/dist/packages/slider/Slider.d.ts +1 -1
  477. package/dist/packages/slider/Slider.js +4 -4
  478. package/dist/packages/slider/index.d.ts +2 -2
  479. package/dist/packages/slider/index.js +2 -2
  480. package/dist/packages/slider/locales/da/messages.mjs +1 -1
  481. package/dist/packages/slider/locales/en/messages.mjs +1 -1
  482. package/dist/packages/slider/locales/fi/messages.mjs +1 -1
  483. package/dist/packages/slider/locales/nb/messages.mjs +1 -1
  484. package/dist/packages/slider/locales/sv/messages.mjs +1 -1
  485. package/dist/packages/slider/react.d.ts +4 -4
  486. package/dist/packages/slider/react.js +9 -9
  487. package/dist/packages/slider/slider.d.ts +25 -17
  488. package/dist/packages/slider/slider.hydration.test.d.ts +1 -1
  489. package/dist/packages/slider/slider.hydration.test.js +39 -20
  490. package/dist/packages/slider/slider.js +524 -467
  491. package/dist/packages/slider/slider.js.map +4 -4
  492. package/dist/packages/slider/slider.react.stories.d.ts +4 -4
  493. package/dist/packages/slider/slider.react.stories.js +31 -34
  494. package/dist/packages/slider/slider.react.test.js +6 -6
  495. package/dist/packages/slider/slider.stories.d.ts +9 -7
  496. package/dist/packages/slider/slider.stories.js +369 -340
  497. package/dist/packages/slider/slider.test.d.ts +5 -5
  498. package/dist/packages/slider/slider.test.js +476 -336
  499. package/dist/packages/slider/styles/w-slider.styles.js +166 -148
  500. package/dist/packages/slider/styles.js +2 -2
  501. package/dist/packages/slider-thumb/SliderThumb.d.ts +1 -1
  502. package/dist/packages/slider-thumb/SliderThumb.js +4 -4
  503. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.d.ts +1 -1
  504. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.js +1 -1
  505. package/dist/packages/slider-thumb/react.d.ts +5 -5
  506. package/dist/packages/slider-thumb/react.js +11 -9
  507. package/dist/packages/slider-thumb/slider-thumb.d.ts +17 -17
  508. package/dist/packages/slider-thumb/slider-thumb.hydration.test.d.ts +1 -1
  509. package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +26 -17
  510. package/dist/packages/slider-thumb/slider-thumb.js +550 -553
  511. package/dist/packages/slider-thumb/slider-thumb.js.map +4 -4
  512. package/dist/packages/slider-thumb/slider-thumb.react.test.js +9 -5
  513. package/dist/packages/slider-thumb/styles/w-slider-thumb.styles.js +189 -188
  514. package/dist/packages/slider-thumb/styles.d.ts +1 -0
  515. package/dist/packages/slider-thumb/styles.js +2 -0
  516. package/dist/packages/snackbar/locales/da/messages.d.mts +1 -0
  517. package/dist/packages/snackbar/locales/da/messages.mjs +1 -0
  518. package/dist/packages/snackbar/locales/en/messages.d.mts +1 -0
  519. package/dist/packages/snackbar/locales/en/messages.mjs +1 -0
  520. package/dist/packages/snackbar/locales/fi/messages.d.mts +1 -0
  521. package/dist/packages/snackbar/locales/fi/messages.mjs +1 -0
  522. package/dist/packages/snackbar/locales/nb/messages.d.mts +1 -0
  523. package/dist/packages/snackbar/locales/nb/messages.mjs +1 -0
  524. package/dist/packages/snackbar/locales/sv/messages.d.mts +1 -0
  525. package/dist/packages/snackbar/locales/sv/messages.mjs +1 -0
  526. package/dist/packages/snackbar/react.d.ts +2 -0
  527. package/dist/packages/snackbar/react.js +11 -0
  528. package/dist/packages/snackbar/snackbar.d.ts +132 -0
  529. package/dist/packages/snackbar/snackbar.hydration.test.d.ts +1 -0
  530. package/dist/packages/snackbar/snackbar.hydration.test.js +13 -0
  531. package/dist/packages/snackbar/snackbar.js +2665 -0
  532. package/dist/packages/snackbar/snackbar.js.map +7 -0
  533. package/dist/packages/snackbar/snackbar.react.stories.d.ts +12 -0
  534. package/dist/packages/snackbar/snackbar.react.stories.js +160 -0
  535. package/dist/packages/snackbar/snackbar.stories.d.ts +20 -0
  536. package/dist/packages/snackbar/snackbar.stories.js +363 -0
  537. package/dist/packages/snackbar/snackbar.test.d.ts +4 -0
  538. package/dist/packages/snackbar/snackbar.test.js +17 -0
  539. package/dist/packages/snackbar/styles.d.ts +1 -0
  540. package/dist/packages/snackbar/styles.js +35 -0
  541. package/dist/packages/snackbar-item/react.d.ts +5 -0
  542. package/dist/packages/snackbar-item/react.js +16 -0
  543. package/dist/packages/snackbar-item/snackbar-item.d.ts +69 -0
  544. package/dist/packages/snackbar-item/snackbar-item.js +2620 -0
  545. package/dist/packages/snackbar-item/snackbar-item.js.map +7 -0
  546. package/dist/packages/snackbar-item/snackbar-item.react.test.d.ts +1 -0
  547. package/dist/packages/snackbar-item/snackbar-item.react.test.js +5 -0
  548. package/dist/packages/snackbar-item/styles.d.ts +1 -0
  549. package/dist/packages/snackbar-item/styles.js +133 -0
  550. package/dist/packages/step/react.d.ts +1 -1
  551. package/dist/packages/step/react.js +4 -4
  552. package/dist/packages/step/step.d.ts +2 -2
  553. package/dist/packages/step/step.hydration.test.d.ts +1 -1
  554. package/dist/packages/step/step.hydration.test.js +10 -10
  555. package/dist/packages/step/step.js +337 -315
  556. package/dist/packages/step/step.js.map +4 -4
  557. package/dist/packages/step/styles.d.ts +1 -0
  558. package/dist/packages/step/styles.js +2 -0
  559. package/dist/packages/step-indicator/index.d.ts +2 -2
  560. package/dist/packages/step-indicator/index.js +2 -2
  561. package/dist/packages/step-indicator/react.d.ts +2 -2
  562. package/dist/packages/step-indicator/react.js +5 -5
  563. package/dist/packages/step-indicator/step-indicator.a11y.test.d.ts +2 -2
  564. package/dist/packages/step-indicator/step-indicator.a11y.test.js +48 -46
  565. package/dist/packages/step-indicator/step-indicator.d.ts +1 -1
  566. package/dist/packages/step-indicator/step-indicator.hydration.test.d.ts +1 -1
  567. package/dist/packages/step-indicator/step-indicator.hydration.test.js +10 -10
  568. package/dist/packages/step-indicator/step-indicator.js +285 -281
  569. package/dist/packages/step-indicator/step-indicator.js.map +3 -3
  570. package/dist/packages/step-indicator/stepindicator.react.stories.d.ts +2 -2
  571. package/dist/packages/step-indicator/stepindicator.react.stories.js +3 -3
  572. package/dist/packages/step-indicator/stepindicator.stories.d.ts +3 -3
  573. package/dist/packages/step-indicator/stepindicator.stories.js +129 -129
  574. package/dist/packages/step-indicator/styles.js +2 -2
  575. package/dist/packages/styles.js +277 -275
  576. package/dist/packages/switch/react.d.ts +1 -1
  577. package/dist/packages/switch/react.js +6 -6
  578. package/dist/packages/switch/styles.js +2 -2
  579. package/dist/packages/switch/switch.a11y.test.d.ts +1 -1
  580. package/dist/packages/switch/switch.a11y.test.js +46 -38
  581. package/dist/packages/switch/switch.d.ts +3 -3
  582. package/dist/packages/switch/switch.hydration.test.d.ts +1 -1
  583. package/dist/packages/switch/switch.hydration.test.js +23 -23
  584. package/dist/packages/switch/switch.js +304 -304
  585. package/dist/packages/switch/switch.js.map +3 -3
  586. package/dist/packages/switch/switch.react.stories.d.ts +2 -2
  587. package/dist/packages/switch/switch.react.stories.js +2 -2
  588. package/dist/packages/switch/switch.stories.d.ts +2 -2
  589. package/dist/packages/switch/switch.stories.js +42 -37
  590. package/dist/packages/switch/switch.test.d.ts +1 -1
  591. package/dist/packages/switch/switch.test.js +30 -35
  592. package/dist/packages/tab/react.d.ts +9 -7
  593. package/dist/packages/tab/react.js +11 -10
  594. package/dist/packages/tab/styles.d.ts +1 -0
  595. package/dist/packages/tab/styles.js +2 -0
  596. package/dist/packages/tab/tab.d.ts +6 -6
  597. package/dist/packages/tab/tab.hydration.test.d.ts +1 -1
  598. package/dist/packages/tab/tab.hydration.test.js +18 -12
  599. package/dist/packages/tab/tab.js +309 -308
  600. package/dist/packages/tab/tab.js.map +4 -4
  601. package/dist/packages/tab/tab.react.test.js +5 -3
  602. package/dist/packages/tab-panel/react.d.ts +3 -2
  603. package/dist/packages/tab-panel/react.js +11 -5
  604. package/dist/packages/tab-panel/tab-panel.d.ts +3 -3
  605. package/dist/packages/tab-panel/tab-panel.hydration.test.d.ts +1 -1
  606. package/dist/packages/tab-panel/tab-panel.hydration.test.js +13 -10
  607. package/dist/packages/tab-panel/tab-panel.js +293 -291
  608. package/dist/packages/tab-panel/tab-panel.js.map +3 -3
  609. package/dist/packages/tabs/index.d.ts +4 -4
  610. package/dist/packages/tabs/index.js +3 -3
  611. package/dist/packages/tabs/react.d.ts +27 -8
  612. package/dist/packages/tabs/react.js +30 -9
  613. package/dist/packages/tabs/styles.js +2 -2
  614. package/dist/packages/tabs/tabs.a11y.test.d.ts +3 -3
  615. package/dist/packages/tabs/tabs.a11y.test.js +188 -169
  616. package/dist/packages/tabs/tabs.d.ts +6 -5
  617. package/dist/packages/tabs/tabs.hydration.test.d.ts +3 -1
  618. package/dist/packages/tabs/tabs.hydration.test.js +22 -8
  619. package/dist/packages/tabs/tabs.js +293 -286
  620. package/dist/packages/tabs/tabs.js.map +3 -3
  621. package/dist/packages/tabs/tabs.react.stories.d.ts +12 -10
  622. package/dist/packages/tabs/tabs.react.stories.js +28 -28
  623. package/dist/packages/tabs/tabs.stories.d.ts +4 -4
  624. package/dist/packages/tabs/tabs.stories.js +101 -95
  625. package/dist/packages/tabs/tabs.test.d.ts +3 -3
  626. package/dist/packages/tabs/tabs.test.js +136 -122
  627. package/dist/packages/textarea/input-styles.d.ts +11 -0
  628. package/dist/packages/textarea/input-styles.js +88 -0
  629. package/dist/packages/textarea/locales/da/messages.mjs +1 -1
  630. package/dist/packages/textarea/locales/en/messages.mjs +1 -1
  631. package/dist/packages/textarea/locales/fi/messages.mjs +1 -1
  632. package/dist/packages/textarea/locales/nb/messages.mjs +1 -1
  633. package/dist/packages/textarea/locales/sv/messages.mjs +1 -1
  634. package/dist/packages/textarea/react.d.ts +11 -11
  635. package/dist/packages/textarea/react.js +17 -17
  636. package/dist/packages/textarea/styles.js +2 -2
  637. package/dist/packages/textarea/textarea.a11y.test.d.ts +1 -1
  638. package/dist/packages/textarea/textarea.a11y.test.js +90 -58
  639. package/dist/packages/textarea/textarea.d.ts +14 -15
  640. package/dist/packages/textarea/textarea.hydration.test.d.ts +1 -1
  641. package/dist/packages/textarea/textarea.hydration.test.js +19 -19
  642. package/dist/packages/textarea/textarea.js +385 -304
  643. package/dist/packages/textarea/textarea.js.map +4 -4
  644. package/dist/packages/textarea/textarea.react.stories.d.ts +38 -21
  645. package/dist/packages/textarea/textarea.react.stories.js +30 -13
  646. package/dist/packages/textarea/textarea.react.test.js +7 -7
  647. package/dist/packages/textarea/textarea.stories.d.ts +3 -3
  648. package/dist/packages/textarea/textarea.stories.js +44 -42
  649. package/dist/packages/textarea/textarea.test.d.ts +1 -1
  650. package/dist/packages/textarea/textarea.test.js +197 -88
  651. package/dist/packages/textfield/input-styles.d.ts +11 -0
  652. package/dist/packages/textfield/input-styles.js +88 -0
  653. package/dist/packages/textfield/locales/da/messages.d.mts +1 -0
  654. package/dist/packages/textfield/locales/da/messages.mjs +1 -0
  655. package/dist/packages/textfield/locales/en/messages.d.mts +1 -0
  656. package/dist/packages/textfield/locales/en/messages.mjs +1 -0
  657. package/dist/packages/textfield/locales/fi/messages.d.mts +1 -0
  658. package/dist/packages/textfield/locales/fi/messages.mjs +1 -0
  659. package/dist/packages/textfield/locales/nb/messages.d.mts +1 -0
  660. package/dist/packages/textfield/locales/nb/messages.mjs +1 -0
  661. package/dist/packages/textfield/locales/sv/messages.d.mts +1 -0
  662. package/dist/packages/textfield/locales/sv/messages.mjs +1 -0
  663. package/dist/packages/textfield/react.d.ts +11 -11
  664. package/dist/packages/textfield/react.js +17 -17
  665. package/dist/packages/textfield/styles/w-textfield.styles.js +60 -58
  666. package/dist/packages/textfield/styles.js +2 -2
  667. package/dist/packages/textfield/textfield.d.ts +36 -26
  668. package/dist/packages/textfield/textfield.hydration.test.d.ts +1 -1
  669. package/dist/packages/textfield/textfield.hydration.test.js +19 -19
  670. package/dist/packages/textfield/textfield.js +468 -373
  671. package/dist/packages/textfield/textfield.js.map +4 -4
  672. package/dist/packages/textfield/textfield.react.stories.d.ts +51 -21
  673. package/dist/packages/textfield/textfield.react.stories.js +63 -31
  674. package/dist/packages/textfield/textfield.react.test.js +7 -7
  675. package/dist/packages/textfield/textfield.stories.d.ts +4 -4
  676. package/dist/packages/textfield/textfield.stories.js +107 -89
  677. package/dist/packages/textfield/textfield.test.d.ts +2 -2
  678. package/dist/packages/textfield/textfield.test.js +174 -71
  679. package/dist/packages/toast/api.d.ts +2 -2
  680. package/dist/packages/toast/api.js +3 -3
  681. package/dist/packages/toast/index.d.ts +5 -5
  682. package/dist/packages/toast/index.js +5 -5
  683. package/dist/packages/toast/styles.js +2 -2
  684. package/dist/packages/toast/toast.d.ts +5 -5
  685. package/dist/packages/toast/toast.js +349 -320
  686. package/dist/packages/toast/toast.js.map +4 -4
  687. package/dist/packages/toast/toast.stories.d.ts +4 -4
  688. package/dist/packages/toast/toast.stories.js +37 -16
  689. package/dist/packages/toast/toast.test.d.ts +1 -1
  690. package/dist/packages/toast/toast.test.js +48 -31
  691. package/dist/packages/toast/types.d.ts +1 -1
  692. package/dist/packages/toast-container/styles.d.ts +1 -0
  693. package/dist/packages/toast-container/styles.js +2 -0
  694. package/dist/packages/toast-container/toast-container.d.ts +2 -2
  695. package/dist/packages/toast-container/toast-container.js +295 -294
  696. package/dist/packages/toast-container/toast-container.js.map +4 -4
  697. package/dist/packages/utils/element-collapse.d.ts +12 -0
  698. package/dist/packages/utils/element-collapse.js +102 -0
  699. package/dist/packages/utils/expand-transition.d.ts +1 -1
  700. package/dist/packages/utils/expand-transition.js +12 -10
  701. package/dist/packages/utils/unstyled-heading.d.ts +1 -1
  702. package/dist/packages/utils/unstyled-heading.js +4 -4
  703. package/dist/packages/utils/window-exists.js +1 -1
  704. package/dist/packages/utils.js +2 -2
  705. package/dist/setup-tests.d.ts +3 -3
  706. package/dist/setup-tests.js +16 -13
  707. package/dist/tests/react-hydration.js +29 -30
  708. package/dist/tests/react-ssr-attributes.d.ts +1 -1
  709. package/dist/tests/react-ssr-attributes.js +4 -4
  710. package/dist/web-types.json +432 -230
  711. package/eik/index.js +20 -39
  712. package/package.json +29 -23
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { WarpIcon, WIcon } from "./packages/icon/icon.ts";
2
1
  import type { WarpTextField } from "./packages/textfield/textfield.ts";
2
+ import type { WarpIcon, WIcon } from "./packages/icon/icon.ts";
3
3
  import type { WarpAffix } from "./packages/affix/affix.ts";
4
4
  import type { WarpAlert } from "./packages/alert/alert.ts";
5
5
  import type { WarpLink } from "./packages/link/link.ts";
@@ -8,6 +8,7 @@ import type { WarpAttention } from "./packages/attention/attention.ts";
8
8
  import type { WarpBadge } from "./packages/badge/badge.ts";
9
9
  import type { WarpBox } from "./packages/box/box.ts";
10
10
  import type { WarpBreadcrumbs } from "./packages/breadcrumbs/breadcrumbs.ts";
11
+ import type { WarpBreadcrumbItem } from "./packages/breadcrumb-item/breadcrumb-item.ts";
11
12
  import type { WarpCard } from "./packages/card/card.ts";
12
13
  import type { WarpCheckbox, WCheckbox } from "./packages/checkbox/checkbox.ts";
13
14
  import type {
@@ -37,6 +38,8 @@ import type {
37
38
  import type { WarpSelect } from "./packages/select/select.ts";
38
39
  import type { WarpSliderThumb } from "./packages/slider-thumb/slider-thumb.ts";
39
40
  import type { WarpSlider } from "./packages/slider/slider.ts";
41
+ import type { WarpSnackbarItem } from "./packages/snackbar-item/snackbar-item.ts";
42
+ import type { WarpSnackbar } from "./packages/snackbar/snackbar.ts";
40
43
  import type { WarpStep } from "./packages/step/step.ts";
41
44
  import type { WarpStepIndicator } from "./packages/step-indicator/step-indicator.ts";
42
45
  import type { WarpSwitch } from "./packages/switch/switch.ts";
@@ -70,6 +73,15 @@ export type ScopedElements<
70
73
  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
71
74
  };
72
75
 
76
+ /**
77
+ * A generic type for strongly typing custom events with their targets
78
+ * @template T - The type of the event target (extends EventTarget)
79
+ * @template D - The type of the detail payload for the custom event
80
+ */
81
+ type TypedEvent<T extends EventTarget, E = Event> = E & {
82
+ target: T;
83
+ };
84
+
73
85
  type BaseProps<T extends HTMLElement> = {
74
86
  /** Content added between the opening and closing tags of the element */
75
87
  children?: any;
@@ -93,6 +105,8 @@ type BaseProps<T extends HTMLElement> = {
93
105
  key?: string | number;
94
106
  /** Specifies the language of the element. */
95
107
  lang?: string;
108
+ /** Defines the element's semantic role for accessibility APIs. */
109
+ role?: string;
96
110
  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
97
111
  part?: string;
98
112
  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
@@ -115,33 +129,112 @@ type BaseProps<T extends HTMLElement> = {
115
129
  popovertargetaction?: "show" | "hide" | "toggle";
116
130
  };
117
131
 
118
- type BaseEvents = {};
119
-
120
- export type WarpIconProps = {
121
- /** Icon filename (without .svg) */
122
- name?: WarpIcon["name"];
123
- /** Size: small, medium, large or pixel value (e.g. "32px"). */
124
- size?: WarpIcon["size"];
125
- /** Locale used for `<title>` text.
126
-
127
- Reads the `lang` attribute from `<html>`, falls back to 'en'. */
128
- locale?: WarpIcon["locale"];
129
- };
130
-
131
- export type WarpIconSolidJsProps = {
132
- /** Icon filename (without .svg) */
133
- "prop:name"?: WarpIcon["name"];
134
- /** Size: small, medium, large or pixel value (e.g. "32px"). */
135
- "prop:size"?: WarpIcon["size"];
136
- /** Locale used for `<title>` text.
137
-
138
- Reads the `lang` attribute from `<html>`, falls back to 'en'. */
139
- "prop:locale"?: WarpIcon["locale"];
140
-
141
- /** Set the innerHTML of the element */
142
- innerHTML?: string;
143
- /** Set the textContent of the element */
144
- textContent?: string | number;
132
+ type BaseEvents = {
133
+ // Mouse Events
134
+
135
+ /** Triggered when the element is clicked by the user by mouse or keyboard. */
136
+ onClick?: (event: MouseEvent) => void;
137
+ /** Fired when the context menu is triggered, often by right-clicking. */
138
+ onContextMenu?: (event: MouseEvent) => void;
139
+ /** Fired when the element is double-clicked. */
140
+ onDoubleClick?: (event: MouseEvent) => void;
141
+ /** Fired repeatedly as the draggable element is being dragged. */
142
+ onDrag?: (event: DragEvent) => void;
143
+ /** Fired when the dragging of a draggable element is finished. */
144
+ onDragEnd?: (event: DragEvent) => void;
145
+ /** Fired when a dragged element or text selection enters a valid drop target. */
146
+ onDragEnter?: (event: DragEvent) => void;
147
+ /** Fired when a dragged element or text selection leaves a valid drop target. */
148
+ onDragExit?: (event: DragEvent) => void;
149
+ /** Fired when a dragged element or text selection leaves a valid drop target. */
150
+ onDragLeave?: (event: DragEvent) => void;
151
+ /** Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds). */
152
+ onDragOver?: (event: DragEvent) => void;
153
+ /** Fired when a draggable element starts being dragged. */
154
+ onDragStart?: (event: DragEvent) => void;
155
+ /** Fired when a dragged element is dropped onto a drop target. */
156
+ onDrop?: (event: DragEvent) => void;
157
+ /** Fired when a mouse button is pressed down on the element. */
158
+ onMouseDown?: (event: MouseEvent) => void;
159
+ /** Fired when the mouse cursor enters the element. */
160
+ onMouseEnter?: (event: MouseEvent) => void;
161
+ /** Triggered when the mouse cursor leaves the element. */
162
+ onMouseLeave?: (event: MouseEvent) => void;
163
+ /** Fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it. */
164
+ onMouseMove?: (event: MouseEvent) => void;
165
+ /** Fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. */
166
+ onMouseOut?: (event: MouseEvent) => void;
167
+ /** Fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements. */
168
+ onMouseOver?: (event: MouseEvent) => void;
169
+ /** Fired when a mouse button is released on the element. */
170
+ onMouseUp?: (event: MouseEvent) => void;
171
+
172
+ // Keyboard Events
173
+
174
+ /** Fired when a key is pressed down. */
175
+ onKeyDown?: (event: KeyboardEvent) => void;
176
+ /** Fired when a key is released.. */
177
+ onKeyUp?: (event: KeyboardEvent) => void;
178
+ /** Fired when a key is pressed down. */
179
+ onKeyPressed?: (event: KeyboardEvent) => void;
180
+
181
+ // Focus Events
182
+
183
+ /** Fired when the element receives focus, often triggered by tab navigation. */
184
+ onFocus?: (event: FocusEvent) => void;
185
+ /** Fired when the element loses focus. */
186
+ onBlur?: (event: FocusEvent) => void;
187
+
188
+ // Form Events
189
+
190
+ /** Fired when the value of an input element changes, such as with text inputs or select elements. */
191
+ onChange?: (event: Event) => void;
192
+ /** Fires when the value of an <input>, <select>, or <textarea> element has been changed. */
193
+ onInput?: (event: Event) => void;
194
+ /** Fired when a form is submitted, usually on pressing Enter in a text input. */
195
+ onSubmit?: (event: Event) => void;
196
+ /** Fired when a form is reset. */
197
+ onReset?: (event: Event) => void;
198
+
199
+ // UI Events
200
+
201
+ /** Fired when the content of an element is scrolled. */
202
+ onScroll?: (event: UIEvent) => void;
203
+
204
+ // Wheel Events
205
+
206
+ /** Fired when the mouse wheel is scrolled while the element is focused. */
207
+ onWheel?: (event: WheelEvent) => void;
208
+
209
+ // Animation Events
210
+
211
+ /** Fired when a CSS animation starts. */
212
+ onAnimationStart?: (event: AnimationEvent) => void;
213
+ /** Fired when a CSS animation completes. */
214
+ onAnimationEnd?: (event: AnimationEvent) => void;
215
+ /** Fired when a CSS animation completes one iteration. */
216
+ onAnimationIteration?: (event: AnimationEvent) => void;
217
+
218
+ // Transition Events
219
+
220
+ /** Fired when a CSS transition has completed. */
221
+ onTransitionEnd?: (event: TransitionEvent) => void;
222
+
223
+ // Media Events
224
+
225
+ /** Fired when an element (usually an image) finishes loading */
226
+ onLoad?: (event: Event) => void;
227
+ /** Fired when an error occurs during the loading of an element, like an image not being found. */
228
+ onError?: (event: Event) => void;
229
+
230
+ // Clipboard Events
231
+
232
+ /** Fires when the user initiates a copy action through the browser's user interface. */
233
+ onCopy?: (event: ClipboardEvent) => void;
234
+ /** Fired when the user has initiated a "cut" action through the browser's user interface. */
235
+ onCut?: (event: ClipboardEvent) => void;
236
+ /** Fired when the user has initiated a "paste" action through the browser's user interface. */
237
+ onPaste?: (event: ClipboardEvent) => void;
145
238
  };
146
239
 
147
240
  export type WarpTextFieldProps = {
@@ -161,6 +254,8 @@ or on its own to show a help text. */
161
254
  /** Use in combination with `invalid` to show as a validation error message,
162
255
  or on its own to show a help text. */
163
256
  helpText?: WarpTextField["helpText"];
257
+ /** Whether to show the optional indicator after the label. */
258
+ optional?: WarpTextField["optional"];
164
259
  /** Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs. */
165
260
  size?: WarpTextField["size"];
166
261
  /** Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength). */
@@ -230,6 +325,8 @@ or on its own to show a help text. */
230
325
  /** Use in combination with `invalid` to show as a validation error message,
231
326
  or on its own to show a help text. */
232
327
  "prop:helpText"?: WarpTextField["helpText"];
328
+ /** Whether to show the optional indicator after the label. */
329
+ "prop:optional"?: WarpTextField["optional"];
233
330
  /** Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs. */
234
331
  "prop:size"?: WarpTextField["size"];
235
332
  /** Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength). */
@@ -287,6 +384,33 @@ similar to the accessible input [masking example from Filament Group](https://fi
287
384
  textContent?: string | number;
288
385
  };
289
386
 
387
+ export type WarpIconProps = {
388
+ /** Icon filename (without .svg) */
389
+ name?: WarpIcon["name"];
390
+ /** Size: small, medium, large or pixel value (e.g. "32px"). */
391
+ size?: WarpIcon["size"];
392
+ /** Locale used for `<title>` text.
393
+
394
+ Reads the `lang` attribute from `<html>`, falls back to 'en'. */
395
+ locale?: WarpIcon["locale"];
396
+ };
397
+
398
+ export type WarpIconSolidJsProps = {
399
+ /** Icon filename (without .svg) */
400
+ "prop:name"?: WarpIcon["name"];
401
+ /** Size: small, medium, large or pixel value (e.g. "32px"). */
402
+ "prop:size"?: WarpIcon["size"];
403
+ /** Locale used for `<title>` text.
404
+
405
+ Reads the `lang` attribute from `<html>`, falls back to 'en'. */
406
+ "prop:locale"?: WarpIcon["locale"];
407
+
408
+ /** Set the innerHTML of the element */
409
+ innerHTML?: string;
410
+ /** Set the textContent of the element */
411
+ textContent?: string | number;
412
+ };
413
+
290
414
  export type WarpAffixProps = {
291
415
  /** */
292
416
  "aria-label"?: WarpAffix["ariaLabel"];
@@ -737,6 +861,35 @@ Defaults to the localized "You are here" label. Set `aria-label` when the defaul
737
861
  textContent?: string | number;
738
862
  };
739
863
 
864
+ export type WarpBreadcrumbItemProps = {
865
+ /** Marks this item as the current page.
866
+ Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
867
+ "current-page"?: WarpBreadcrumbItem["currentPage"];
868
+ /** Marks this item as the current page.
869
+ Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
870
+ currentPage?: WarpBreadcrumbItem["currentPage"];
871
+ /** URL for linked breadcrumb items.
872
+ When omitted, the item renders as non-focusable text. */
873
+ href?: WarpBreadcrumbItem["href"];
874
+ };
875
+
876
+ export type WarpBreadcrumbItemSolidJsProps = {
877
+ /** Marks this item as the current page.
878
+ Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
879
+ "bool:current-page"?: WarpBreadcrumbItem["currentPage"];
880
+ /** Marks this item as the current page.
881
+ Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
882
+ "prop:currentPage"?: WarpBreadcrumbItem["currentPage"];
883
+ /** URL for linked breadcrumb items.
884
+ When omitted, the item renders as non-focusable text. */
885
+ "prop:href"?: WarpBreadcrumbItem["href"];
886
+
887
+ /** Set the innerHTML of the element */
888
+ innerHTML?: string;
889
+ /** Set the textContent of the element */
890
+ textContent?: string | number;
891
+ };
892
+
740
893
  export type WarpCardProps = {
741
894
  /** Whether the card is visually selected.
742
895
 
@@ -776,6 +929,9 @@ When set, the card becomes keyboard focusable and Enter or Space triggers a clic
776
929
  textContent?: string | number;
777
930
  };
778
931
 
932
+ /** `WarpCheckbox` component event */
933
+ export type WarpCheckboxElementEvent<E = Event> = TypedEvent<WarpCheckbox, E>;
934
+
779
935
  export type WarpCheckboxProps = {
780
936
  /** The name of the checkbox.
781
937
 
@@ -809,7 +965,7 @@ Use this to show an externally managed validation error. Required validation als
809
965
  input?: WarpCheckbox["input"];
810
966
 
811
967
  /** */
812
- onchange?: (e: Event) => void;
968
+ onchange?: (e: WarpCheckboxElementEvent) => void;
813
969
  };
814
970
 
815
971
  export type WarpCheckboxSolidJsProps = {
@@ -844,7 +1000,7 @@ Use this to show an externally managed validation error. Required validation als
844
1000
  /** */
845
1001
  "prop:input"?: WarpCheckbox["input"];
846
1002
  /** */
847
- "on:change"?: (e: Event) => void;
1003
+ "on:change"?: (e: WarpCheckboxElementEvent) => void;
848
1004
 
849
1005
  /** Set the innerHTML of the element */
850
1006
  innerHTML?: string;
@@ -1304,14 +1460,17 @@ export type WarpExpandableSolidJsProps = {
1304
1460
  textContent?: string | number;
1305
1461
  };
1306
1462
 
1463
+ /** `WarpModal` component event */
1464
+ export type WarpModalElementEvent<E = Event> = TypedEvent<WarpModal, E>;
1465
+
1307
1466
  export type WarpModalProps = {
1308
1467
  /** Controls if the modal should show or hide.
1309
1468
 
1310
1469
  You can also call the `open()` and `close()` methods. */
1311
1470
  show?: WarpModal["show"];
1312
- /** */
1471
+ /** @deprecated This ID has no effect */
1313
1472
  "content-id"?: WarpModal["contentId"];
1314
- /** */
1473
+ /** @deprecated This ID has no effect */
1315
1474
  contentId?: WarpModal["contentId"];
1316
1475
  /** Ignores clicks to the backdrop when set */
1317
1476
  "ignore-backdrop-clicks"?: WarpModal["ignoreBackdropClicks"];
@@ -1319,9 +1478,9 @@ You can also call the `open()` and `close()` methods. */
1319
1478
  ignoreBackdropClicks?: WarpModal["ignoreBackdropClicks"];
1320
1479
 
1321
1480
  /** */
1322
- onshown?: (e: CustomEvent) => void;
1481
+ onshown?: (e: WarpModalElementEvent) => void;
1323
1482
  /** */
1324
- onhidden?: (e: CustomEvent) => void;
1483
+ onhidden?: (e: WarpModalElementEvent) => void;
1325
1484
  };
1326
1485
 
1327
1486
  export type WarpModalSolidJsProps = {
@@ -1329,18 +1488,18 @@ export type WarpModalSolidJsProps = {
1329
1488
 
1330
1489
  You can also call the `open()` and `close()` methods. */
1331
1490
  "prop:show"?: WarpModal["show"];
1332
- /** */
1491
+ /** @deprecated This ID has no effect */
1333
1492
  "attr:content-id"?: WarpModal["contentId"];
1334
- /** */
1493
+ /** @deprecated This ID has no effect */
1335
1494
  "prop:contentId"?: WarpModal["contentId"];
1336
1495
  /** Ignores clicks to the backdrop when set */
1337
1496
  "bool:ignore-backdrop-clicks"?: WarpModal["ignoreBackdropClicks"];
1338
1497
  /** Ignores clicks to the backdrop when set */
1339
1498
  "prop:ignoreBackdropClicks"?: WarpModal["ignoreBackdropClicks"];
1340
1499
  /** */
1341
- "on:shown"?: (e: CustomEvent) => void;
1500
+ "on:shown"?: (e: WarpModalElementEvent) => void;
1342
1501
  /** */
1343
- "on:hidden"?: (e: CustomEvent) => void;
1502
+ "on:hidden"?: (e: WarpModalElementEvent) => void;
1344
1503
 
1345
1504
  /** Set the innerHTML of the element */
1346
1505
  innerHTML?: string;
@@ -1357,6 +1516,12 @@ export type WarpModalFooterSolidJsProps = {
1357
1516
  textContent?: string | number;
1358
1517
  };
1359
1518
 
1519
+ /** `WarpModalHeader` component event */
1520
+ export type WarpModalHeaderElementEvent<E = Event> = TypedEvent<
1521
+ WarpModalHeader,
1522
+ E
1523
+ >;
1524
+
1360
1525
  export type WarpModalHeaderProps = {
1361
1526
  /** A short but descriptive title for the modal */
1362
1527
  title?: WarpModalHeader["title"];
@@ -1368,7 +1533,7 @@ export type WarpModalHeaderProps = {
1368
1533
  noClose?: WarpModalHeader["noClose"];
1369
1534
 
1370
1535
  /** */
1371
- onbackClicked?: (e: CustomEvent) => void;
1536
+ onbackClicked?: (e: WarpModalHeaderElementEvent) => void;
1372
1537
  };
1373
1538
 
1374
1539
  export type WarpModalHeaderSolidJsProps = {
@@ -1381,7 +1546,7 @@ export type WarpModalHeaderSolidJsProps = {
1381
1546
  /** Lets you hide the close button in the header */
1382
1547
  "prop:noClose"?: WarpModalHeader["noClose"];
1383
1548
  /** */
1384
- "on:backClicked"?: (e: CustomEvent) => void;
1549
+ "on:backClicked"?: (e: WarpModalHeaderElementEvent) => void;
1385
1550
 
1386
1551
  /** Set the innerHTML of the element */
1387
1552
  innerHTML?: string;
@@ -1416,6 +1581,12 @@ export type WarpPageIndicatorSolidJsProps = {
1416
1581
  textContent?: string | number;
1417
1582
  };
1418
1583
 
1584
+ /** `WarpPagination` component event */
1585
+ export type WarpPaginationElementEvent<E = Event> = TypedEvent<
1586
+ WarpPagination,
1587
+ E
1588
+ >;
1589
+
1419
1590
  export type WarpPaginationProps = {
1420
1591
  /** The base URL used to construct page links, for example `/search?page=`.
1421
1592
 
@@ -1437,7 +1608,7 @@ The page number is appended to this URL. */
1437
1608
  visiblePages?: WarpPagination["visiblePages"];
1438
1609
 
1439
1610
  /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
1440
- "onpage-click"?: (e: CustomEvent) => void;
1611
+ "onpage-click"?: (e: WarpPaginationElementEvent) => void;
1441
1612
  };
1442
1613
 
1443
1614
  export type WarpPaginationSolidJsProps = {
@@ -1460,7 +1631,7 @@ The page number is appended to this URL. */
1460
1631
  /** The maximum number of page numbers visible. */
1461
1632
  "prop:visiblePages"?: WarpPagination["visiblePages"];
1462
1633
  /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
1463
- "on:page-click"?: (e: CustomEvent) => void;
1634
+ "on:page-click"?: (e: WarpPaginationElementEvent) => void;
1464
1635
 
1465
1636
  /** Set the innerHTML of the element */
1466
1637
  innerHTML?: string;
@@ -1468,6 +1639,9 @@ The page number is appended to this URL. */
1468
1639
  textContent?: string | number;
1469
1640
  };
1470
1641
 
1642
+ /** `WarpPill` component event */
1643
+ export type WarpPillElementEvent<E = Event> = TypedEvent<WarpPill, E>;
1644
+
1471
1645
  export type WarpPillProps = {
1472
1646
  /** Whether the pill should be removable via a close button. */
1473
1647
  "can-close"?: WarpPill["canClose"];
@@ -1493,9 +1667,9 @@ export type WarpPillProps = {
1493
1667
  closeAriaLabel?: WarpPill["closeAriaLabel"];
1494
1668
 
1495
1669
  /** Fires when the pill itself is clicked. */
1496
- "onw-pill-click"?: (e: CustomEvent) => void;
1670
+ "onw-pill-click"?: (e: WarpPillElementEvent) => void;
1497
1671
  /** Fires when the pill's close button is clicked. */
1498
- "onw-pill-close"?: (e: CustomEvent) => void;
1672
+ "onw-pill-close"?: (e: WarpPillElementEvent) => void;
1499
1673
  };
1500
1674
 
1501
1675
  export type WarpPillSolidJsProps = {
@@ -1522,9 +1696,9 @@ export type WarpPillSolidJsProps = {
1522
1696
  /** Label read by screen readers when targeting the close button. */
1523
1697
  "prop:closeAriaLabel"?: WarpPill["closeAriaLabel"];
1524
1698
  /** Fires when the pill itself is clicked. */
1525
- "on:w-pill-click"?: (e: CustomEvent) => void;
1699
+ "on:w-pill-click"?: (e: WarpPillElementEvent) => void;
1526
1700
  /** Fires when the pill's close button is clicked. */
1527
- "on:w-pill-close"?: (e: CustomEvent) => void;
1701
+ "on:w-pill-close"?: (e: WarpPillElementEvent) => void;
1528
1702
 
1529
1703
  /** Set the innerHTML of the element */
1530
1704
  innerHTML?: string;
@@ -1618,6 +1792,9 @@ If you set `required` and `invalid` the group gets a default error message, but
1618
1792
  textContent?: string | number;
1619
1793
  };
1620
1794
 
1795
+ /** `WarpSelect` component event */
1796
+ export type WarpSelectElementEvent<E = Event> = TypedEvent<WarpSelect, E>;
1797
+
1621
1798
  export type WarpSelectProps = {
1622
1799
  /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
1623
1800
  "auto-focus"?: WarpSelect["autoFocus"];
@@ -1659,7 +1836,7 @@ Paired with `help-text` to provide feedback about the error. */
1659
1836
  value?: WarpSelect["value"];
1660
1837
 
1661
1838
  /** */
1662
- onchange?: (e: CustomEvent) => void;
1839
+ onchange?: (e: WarpSelectElementEvent) => void;
1663
1840
  };
1664
1841
 
1665
1842
  export type WarpSelectSolidJsProps = {
@@ -1702,7 +1879,7 @@ Paired with `help-text` to provide feedback about the error. */
1702
1879
  /** Lets you set the current value. */
1703
1880
  "prop:value"?: WarpSelect["value"];
1704
1881
  /** */
1705
- "on:change"?: (e: CustomEvent) => void;
1882
+ "on:change"?: (e: WarpSelectElementEvent) => void;
1706
1883
 
1707
1884
  /** Set the innerHTML of the element */
1708
1885
  innerHTML?: string;
@@ -1710,6 +1887,12 @@ Paired with `help-text` to provide feedback about the error. */
1710
1887
  textContent?: string | number;
1711
1888
  };
1712
1889
 
1890
+ /** `WarpSliderThumb` component event */
1891
+ export type WarpSliderThumbElementEvent<E = Event> = TypedEvent<
1892
+ WarpSliderThumb,
1893
+ E
1894
+ >;
1895
+
1713
1896
  export type WarpSliderThumbProps = {
1714
1897
  /** Label for the range input. */
1715
1898
  "aria-label"?: WarpSliderThumb["ariaLabel"];
@@ -1727,9 +1910,9 @@ export type WarpSliderThumbProps = {
1727
1910
  placeholder?: WarpSliderThumb["placeholder"];
1728
1911
 
1729
1912
  /** Internal event used by (and stopped by) `w-slider`. */
1730
- onthumbreset?: (e: CustomEvent) => void;
1913
+ onthumbreset?: (e: WarpSliderThumbElementEvent) => void;
1731
1914
  /** Internal event used by (and stopped by) `w-slider`. */
1732
- onslidervalidity?: (e: CustomEvent) => void;
1915
+ onslidervalidity?: (e: WarpSliderThumbElementEvent) => void;
1733
1916
  };
1734
1917
 
1735
1918
  export type WarpSliderThumbSolidJsProps = {
@@ -1748,9 +1931,9 @@ export type WarpSliderThumbSolidJsProps = {
1748
1931
  /** Placeholder in empty text fields */
1749
1932
  "prop:placeholder"?: WarpSliderThumb["placeholder"];
1750
1933
  /** Internal event used by (and stopped by) `w-slider`. */
1751
- "on:thumbreset"?: (e: CustomEvent) => void;
1934
+ "on:thumbreset"?: (e: WarpSliderThumbElementEvent) => void;
1752
1935
  /** Internal event used by (and stopped by) `w-slider`. */
1753
- "on:slidervalidity"?: (e: CustomEvent) => void;
1936
+ "on:slidervalidity"?: (e: WarpSliderThumbElementEvent) => void;
1754
1937
 
1755
1938
  /** Set the innerHTML of the element */
1756
1939
  innerHTML?: string;
@@ -1779,6 +1962,8 @@ If you need to display HTML, use the `label` slot instead (f. ex. `<legend class
1779
1962
  invalid?: WarpSlider["invalid"];
1780
1963
  /** Ensures a child slider thumb has a value before allowing the containing form to submit */
1781
1964
  required?: WarpSlider["required"];
1965
+ /** Whether to show the optional indicator after the label. */
1966
+ optional?: WarpSlider["optional"];
1782
1967
  /** The minimum allowed value in the range inputs */
1783
1968
  min?: WarpSlider["min"];
1784
1969
  /** The maximum allowed value in the range inputs */
@@ -1824,6 +2009,8 @@ If you need to display HTML, use the `label` slot instead (f. ex. `<legend class
1824
2009
  "prop:invalid"?: WarpSlider["invalid"];
1825
2010
  /** Ensures a child slider thumb has a value before allowing the containing form to submit */
1826
2011
  "prop:required"?: WarpSlider["required"];
2012
+ /** Whether to show the optional indicator after the label. */
2013
+ "prop:optional"?: WarpSlider["optional"];
1827
2014
  /** The minimum allowed value in the range inputs */
1828
2015
  "prop:min"?: WarpSlider["min"];
1829
2016
  /** The maximum allowed value in the range inputs */
@@ -1853,6 +2040,38 @@ Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the
1853
2040
  textContent?: string | number;
1854
2041
  };
1855
2042
 
2043
+ export type WarpSnackbarItemProps = {
2044
+ /** The placement of the action and close buttons. */
2045
+ "action-placement"?: WarpSnackbarItem["actionPlacement"];
2046
+ /** The placement of the action and close buttons. */
2047
+ actionPlacement?: WarpSnackbarItem["actionPlacement"];
2048
+ /** How long the message should stay in the document before removing itself. */
2049
+ duration?: WarpSnackbarItem["duration"];
2050
+ };
2051
+
2052
+ export type WarpSnackbarItemSolidJsProps = {
2053
+ /** The placement of the action and close buttons. */
2054
+ "attr:action-placement"?: WarpSnackbarItem["actionPlacement"];
2055
+ /** The placement of the action and close buttons. */
2056
+ "prop:actionPlacement"?: WarpSnackbarItem["actionPlacement"];
2057
+ /** How long the message should stay in the document before removing itself. */
2058
+ "prop:duration"?: WarpSnackbarItem["duration"];
2059
+
2060
+ /** Set the innerHTML of the element */
2061
+ innerHTML?: string;
2062
+ /** Set the textContent of the element */
2063
+ textContent?: string | number;
2064
+ };
2065
+
2066
+ export type WarpSnackbarProps = {};
2067
+
2068
+ export type WarpSnackbarSolidJsProps = {
2069
+ /** Set the innerHTML of the element */
2070
+ innerHTML?: string;
2071
+ /** Set the textContent of the element */
2072
+ textContent?: string | number;
2073
+ };
2074
+
1856
2075
  export type WarpStepProps = {
1857
2076
  /** Whether this step is active.
1858
2077
 
@@ -1899,6 +2118,12 @@ export type WarpStepIndicatorSolidJsProps = {
1899
2118
  textContent?: string | number;
1900
2119
  };
1901
2120
 
2121
+ /** `WarpSwitch` component event */
2122
+ export type WarpSwitchElementEvent<E = Event> = TypedEvent<WarpSwitch, E>;
2123
+ /** `change` event type */
2124
+ export type WarpSwitchChangeElementEvent =
2125
+ WarpSwitchElementEvent<WarpSwitchChangeEvent>;
2126
+
1902
2127
  export type WarpSwitchProps = {
1903
2128
  /** Name used when submitting an HTML form. */
1904
2129
  name?: WarpSwitch["name"];
@@ -1912,7 +2137,7 @@ The component reports `null` as the value in the `change` event when `value` is
1912
2137
  disabled?: WarpSwitch["disabled"];
1913
2138
 
1914
2139
  /** Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`. */
1915
- onchange?: (e: WarpSwitchChangeEvent) => void;
2140
+ onchange?: (e: WarpSwitchChangeElementEvent) => void;
1916
2141
  };
1917
2142
 
1918
2143
  export type WarpSwitchSolidJsProps = {
@@ -1927,7 +2152,7 @@ The component reports `null` as the value in the `change` event when `value` is
1927
2152
  /** Whether the switch is disabled. */
1928
2153
  "prop:disabled"?: WarpSwitch["disabled"];
1929
2154
  /** Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`. */
1930
- "on:change"?: (e: WarpSwitchChangeEvent) => void;
2155
+ "on:change"?: (e: WarpSwitchChangeElementEvent) => void;
1931
2156
 
1932
2157
  /** Set the innerHTML of the element */
1933
2158
  innerHTML?: string;
@@ -1969,19 +2194,25 @@ export type WarpTabPanelSolidJsProps = {
1969
2194
  textContent?: string | number;
1970
2195
  };
1971
2196
 
2197
+ /** `WarpTabs` component event */
2198
+ export type WarpTabsElementEvent<E = Event> = TypedEvent<WarpTabs, E>;
2199
+ /** `change` event type */
2200
+ export type WarpTabsChangeElementEvent =
2201
+ WarpTabsElementEvent<WarpTabsChangeEvent>;
2202
+
1972
2203
  export type WarpTabsProps = {
1973
2204
  /** The `id` of the panel that should be active. */
1974
2205
  active?: WarpTabs["active"];
1975
2206
 
1976
2207
  /** Includes `details.panelId` with the now active tab's ID */
1977
- onchange?: (e: WarpTabsChangeEvent) => void;
2208
+ onchange?: (e: WarpTabsChangeElementEvent) => void;
1978
2209
  };
1979
2210
 
1980
2211
  export type WarpTabsSolidJsProps = {
1981
2212
  /** The `id` of the panel that should be active. */
1982
2213
  "prop:active"?: WarpTabs["active"];
1983
2214
  /** Includes `details.panelId` with the now active tab's ID */
1984
- "on:change"?: (e: WarpTabsChangeEvent) => void;
2215
+ "on:change"?: (e: WarpTabsChangeElementEvent) => void;
1985
2216
 
1986
2217
  /** Set the innerHTML of the element */
1987
2218
  innerHTML?: string;
@@ -2089,21 +2320,6 @@ Placeholder text should not be used as a substitute for labeling the element wit
2089
2320
  };
2090
2321
 
2091
2322
  export type CustomElements = {
2092
- /**
2093
- *
2094
- *
2095
- * ## Attributes & Properties
2096
- *
2097
- * Component attributes and properties that can be applied to the element or by using JavaScript.
2098
- *
2099
- * - `name`: Icon filename (without .svg)
2100
- * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
2101
- * - `locale`: Locale used for `<title>` text.
2102
- *
2103
- * Reads the `lang` attribute from `<html>`, falls back to 'en'.
2104
- */
2105
- "w-icon": Partial<WarpIconProps & BaseProps<WarpIcon> & BaseEvents>;
2106
-
2107
2323
  /**
2108
2324
  * A single-line input component used for entering and editing textual or numeric data.
2109
2325
  *
@@ -2120,6 +2336,7 @@ export type CustomElements = {
2120
2336
  * - `label`: Either a `label` or an `aria-label` must be provided.
2121
2337
  * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
2122
2338
  * or on its own to show a help text.
2339
+ * - `optional`: Whether to show the optional indicator after the label.
2123
2340
  * - `size`: Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.
2124
2341
  * - `max`: Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).
2125
2342
  * - `min`: Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).
@@ -2152,7 +2369,7 @@ export type CustomElements = {
2152
2369
  * Areas where markup can be added to the component.
2153
2370
  *
2154
2371
  * - `suffix`: Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).
2155
- * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon.
2372
+ * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.
2156
2373
  *
2157
2374
  * ## Methods
2158
2375
  *
@@ -2167,9 +2384,34 @@ export type CustomElements = {
2167
2384
  WarpTextFieldProps & BaseProps<WarpTextField> & BaseEvents
2168
2385
  >;
2169
2386
 
2387
+ /**
2388
+ *
2389
+ *
2390
+ * ## Attributes & Properties
2391
+ *
2392
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
2393
+ *
2394
+ * - `name`: Icon filename (without .svg)
2395
+ * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
2396
+ * - `locale`: Locale used for `<title>` text.
2397
+ *
2398
+ * Reads the `lang` attribute from `<html>`, falls back to 'en'.
2399
+ */
2400
+ "w-icon": Partial<WarpIconProps & BaseProps<WarpIcon> & BaseEvents>;
2401
+
2170
2402
  /**
2171
2403
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
2172
2404
  *
2405
+ * ## Accessibility Note
2406
+ * Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
2407
+ * cannot reference elements across shadow boundaries. This means:
2408
+ * - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
2409
+ * - Interactive affixes (buttons) must have their own `aria-label` (already implemented)
2410
+ * - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
2411
+ *
2412
+ * For non-interactive labels (e.g., currency symbols), consider including the information in the
2413
+ * main label or placeholder instead of relying on ARIA to announce affix content.
2414
+ *
2173
2415
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
2174
2416
  *
2175
2417
  * ## Attributes & Properties
@@ -2395,6 +2637,31 @@ export type CustomElements = {
2395
2637
  WarpBreadcrumbsProps & BaseProps<WarpBreadcrumbs> & BaseEvents
2396
2638
  >;
2397
2639
 
2640
+ /**
2641
+ * Represents one item in a `w-breadcrumbs` trail.
2642
+ * Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
2643
+ *
2644
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
2645
+ *
2646
+ * ## Attributes & Properties
2647
+ *
2648
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
2649
+ *
2650
+ * - `current-page`/`currentPage`: Marks this item as the current page.
2651
+ * Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
2652
+ * - `href`: URL for linked breadcrumb items.
2653
+ * When omitted, the item renders as non-focusable text.
2654
+ *
2655
+ * ## Slots
2656
+ *
2657
+ * Areas where markup can be added to the component.
2658
+ *
2659
+ * - `(default)`: The breadcrumb label content.
2660
+ */
2661
+ "w-breadcrumb-item": Partial<
2662
+ WarpBreadcrumbItemProps & BaseProps<WarpBreadcrumbItem> & BaseEvents
2663
+ >;
2664
+
2398
2665
  /**
2399
2666
  * Card is a layout component used for separating content areas on a page.
2400
2667
  *
@@ -2478,7 +2745,18 @@ export type CustomElements = {
2478
2745
  >;
2479
2746
 
2480
2747
  /**
2748
+ * Checkboxes allow users to select multiple options from a list of choices.
2481
2749
  *
2750
+ * Use with `w-checkbox`.
2751
+ *
2752
+ * ## Architecture Note
2753
+ * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
2754
+ * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
2755
+ * HTML best practices. This inconsistency exists for historical reasons and may be addressed
2756
+ * in a future major version to align both on the more semantic approach.
2757
+ *
2758
+ * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
2759
+ * backwards compatibility implications (CSS selectors, etc.).
2482
2760
  *
2483
2761
  * ## Attributes & Properties
2484
2762
  *
@@ -2705,11 +2983,45 @@ export type CustomElements = {
2705
2983
  *
2706
2984
  * - `open() => void`: undefined
2707
2985
  * - `close() => void`: undefined
2986
+ *
2987
+ * ## CSS Custom Properties
2988
+ *
2989
+ * CSS variables available for styling the component.
2990
+ *
2991
+ * - `--w-c-modal-backdrop-color`: undefined (default: `undefined`)
2992
+ * - `--w-c-modal-bg`: undefined (default: `undefined`)
2993
+ * - `--w-c-modal-box-shadow`: undefined (default: `undefined`)
2994
+ * - `--w-c-modal-color`: undefined (default: `undefined`)
2995
+ * - `--w-c-modal-height`: undefined (default: `undefined`)
2996
+ * - `--w-c-modal-max-height`: undefined (default: `undefined`)
2997
+ * - `--w-c-modal-min-height`: undefined (default: `undefined`)
2998
+ * - `--w-c-modal-translate-distance`: undefined (default: `undefined`)
2999
+ * - `--w-c-modal-width`: undefined (default: `undefined`)
3000
+ *
3001
+ * ## CSS Parts
3002
+ *
3003
+ * Custom selectors for styling elements within the component.
3004
+ *
3005
+ * - `dialog`: the root element inside the component (`<dialog>` element).
3006
+ * - `wrapper`: container for all elements, direct child of `<dialog>`.
3007
+ * - `content`: the container for the `content` slot items (children).
2708
3008
  */
2709
3009
  "w-modal": Partial<WarpModalProps & BaseProps<WarpModal> & BaseEvents>;
2710
3010
 
2711
3011
  /**
2712
3012
  * The footer section of a modal, typically where you place actions.
3013
+ *
3014
+ * ## CSS Custom Properties
3015
+ *
3016
+ * CSS variables available for styling the component.
3017
+ *
3018
+ * - `--w-c-modal-footer-gap`: adjusts the flex gap between actions in the footer. (default: `undefined`)
3019
+ *
3020
+ * ## CSS Parts
3021
+ *
3022
+ * Custom selectors for styling elements within the component.
3023
+ *
3024
+ * - `footer`: the container for slotted items (children).
2713
3025
  */
2714
3026
  "w-modal-footer": Partial<
2715
3027
  WarpModalFooterProps & BaseProps<WarpModalFooter> & BaseEvents
@@ -2737,6 +3049,24 @@ export type CustomElements = {
2737
3049
  * Areas where markup can be added to the component.
2738
3050
  *
2739
3051
  * - `top`: Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.
3052
+ *
3053
+ * ## CSS Custom Properties
3054
+ *
3055
+ * CSS variables available for styling the component.
3056
+ *
3057
+ * - `--w-c-modal-header-font-size`: undefined (default: `undefined`)
3058
+ * - `--w-c-modal-header-line-height`: undefined (default: `undefined`)
3059
+ * - `--w-c-modal-header-margin-bottom`: undefined (default: `undefined`)
3060
+ *
3061
+ * ## CSS Parts
3062
+ *
3063
+ * Custom selectors for styling elements within the component.
3064
+ *
3065
+ * - `header`: the root element inside the component.
3066
+ * - `top`: the container for the image (`top` slot).
3067
+ * - `back`: the back button, if visible.
3068
+ * - `title`: the title element.
3069
+ * - `close`: the close button, if visible.
2740
3070
  */
2741
3071
  "w-modal-header": Partial<
2742
3072
  WarpModalHeaderProps & BaseProps<WarpModalHeader> & BaseEvents
@@ -2845,7 +3175,7 @@ export type CustomElements = {
2845
3175
  * Areas where markup can be added to the component.
2846
3176
  *
2847
3177
  * - `label`: Alternative to the `label` attribute should you need custom HTML.
2848
- * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
3178
+ * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).
2849
3179
  */
2850
3180
  "w-radio-group": Partial<
2851
3181
  WarpRadioGroupProps & BaseProps<WarpRadioGroup> & BaseEvents
@@ -2931,6 +3261,7 @@ export type CustomElements = {
2931
3261
  * - `help-text`/`helpText`: Additional description to show below the fieldset
2932
3262
  * - `invalid`: Sets the form fields and fieldset in an invalid state
2933
3263
  * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit
3264
+ * - `optional`: Whether to show the optional indicator after the label.
2934
3265
  * - `min`: The minimum allowed value in the range inputs
2935
3266
  * - `max`: The maximum allowed value in the range inputs
2936
3267
  * - `markers`: Pass a value similar to step to create visual markers at that interval
@@ -2942,6 +3273,7 @@ export type CustomElements = {
2942
3273
  *
2943
3274
  * Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. (property only)
2944
3275
  * - `labelFormatter`: Formatter for the min and max labels below the range. (property only)
3276
+ * - `_label`: undefined (property only) (readonly)
2945
3277
  *
2946
3278
  * ## Slots
2947
3279
  *
@@ -2955,6 +3287,112 @@ export type CustomElements = {
2955
3287
  */
2956
3288
  "w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
2957
3289
 
3290
+ /**
3291
+ * An item to show in a `w-snackbar`.
3292
+ *
3293
+ * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
3294
+ *
3295
+ * ## Attributes & Properties
3296
+ *
3297
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
3298
+ *
3299
+ * - `action-placement`/`actionPlacement`: The placement of the action and close buttons.
3300
+ * - `duration`: How long the message should stay in the document before removing itself.
3301
+ *
3302
+ * ## Slots
3303
+ *
3304
+ * Areas where markup can be added to the component.
3305
+ *
3306
+ * - `default`: the snackbar message.
3307
+ * - `icon`: icon preceeding the message.
3308
+ * - `action`: action following the message.
3309
+ *
3310
+ * ## Methods
3311
+ *
3312
+ * Methods that can be called to access component functionality.
3313
+ *
3314
+ * - `close() => void`: Remove the snackbar item from the document.
3315
+ *
3316
+ * Moves focus to the last focused element outside of the snackbar item, if available.
3317
+ *
3318
+ * ## CSS Custom Properties
3319
+ *
3320
+ * CSS variables available for styling the component.
3321
+ *
3322
+ * - `--w-c-snackbar-item-radius`: undefined (default: `undefined`)
3323
+ * - `--w-c-snackbar-item-max-width`: undefined (default: `undefined`)
3324
+ * - `--w-c-snackbar-item-min-width`: undefined (default: `undefined`)
3325
+ * - `--w-c-snackbar-item-padding`: undefined (default: `undefined`)
3326
+ * - `--w-c-snackbar-item-bg`: undefined (default: `undefined`)
3327
+ * - `--w-c-snackbar-item-action-bg-active`: undefined (default: `undefined`)
3328
+ * - `--w-c-snackbar-item-action-bg-hover`: undefined (default: `undefined`)
3329
+ * - `--w-c-snackbar-item-color`: undefined (default: `undefined`)
3330
+ * - `--w-c-snackbar-item-action-color-active`: undefined (default: `undefined`)
3331
+ * - `--w-c-snackbar-item-action-color-hover`: undefined (default: `undefined`)
3332
+ * - `--w-c-snackbar-item-box-shadow`: undefined (default: `undefined`)
3333
+ *
3334
+ * ## CSS Parts
3335
+ *
3336
+ * Custom selectors for styling elements within the component.
3337
+ *
3338
+ * - `item`: the container wrapping the message, icon and actions.
3339
+ * - `icon`: the icon for the variant.
3340
+ * - `message`: the default slot, body of the snackbar item.
3341
+ * - `action`: close and action button.
3342
+ */
3343
+ "w-snackbar-item": Partial<
3344
+ WarpSnackbarItemProps & BaseProps<WarpSnackbarItem> & BaseEvents
3345
+ >;
3346
+
3347
+ /**
3348
+ * A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
3349
+ *
3350
+ * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
3351
+ *
3352
+ * ## Slots
3353
+ *
3354
+ * Areas where markup can be added to the component.
3355
+ *
3356
+ * - `default`: `w-snackbar-item` gets placed inside the default slot by the `create` function.
3357
+ *
3358
+ * ## Methods
3359
+ *
3360
+ * Methods that can be called to access component functionality.
3361
+ *
3362
+ * - `create(message: string, options: CreateSnackbarOptions = {}) => void`: Creates a snackbar item and immediately adds it to the snackbar.
3363
+ *
3364
+ * By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
3365
+ *
3366
+ * If you include an `action` in the options the default `duration` is
3367
+ * set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
3368
+ *
3369
+ * A `duration` of 10 seconds or longer forces the close button to be visible.
3370
+ *
3371
+ * The default `variant` is `neutral` which does not have an icon.
3372
+ *
3373
+ * Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
3374
+ *
3375
+ * ## CSS Custom Properties
3376
+ *
3377
+ * CSS variables available for styling the component.
3378
+ *
3379
+ * - `--w-c-snackbar-container-gap`: undefined (default: `undefined`)
3380
+ * - `--w-c-snackbar-position-bottom`: undefined (default: `undefined`)
3381
+ * - `--w-c-snackbar-position-left`: undefined (default: `undefined`)
3382
+ * - `--w-c-snackbar-position-right`: undefined (default: `undefined`)
3383
+ * - `--w-c-snackbar-position-top`: undefined (default: `undefined`)
3384
+ * - `--w-c-snackbar-z-index`: undefined (default: `undefined`)
3385
+ *
3386
+ * ## CSS Parts
3387
+ *
3388
+ * Custom selectors for styling elements within the component.
3389
+ *
3390
+ * - `container`: the live region that positions messages on the screen.
3391
+ */
3392
+ "w-snackbar": Partial<
3393
+ WarpSnackbarProps & BaseProps<WarpSnackbar> & BaseEvents
3394
+ >;
3395
+
2958
3396
  /**
2959
3397
  * Individual step component that shows a single step in a process
2960
3398
  *
@@ -3116,24 +3554,113 @@ export type CustomElements = {
3116
3554
  >;
3117
3555
  };
3118
3556
 
3119
- export type CustomElementsSolidJs = {
3120
- /**
3121
- *
3122
- *
3123
- * ## Attributes & Properties
3124
- *
3125
- * Component attributes and properties that can be applied to the element or by using JavaScript.
3126
- *
3127
- * - `name`: Icon filename (without .svg)
3128
- * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
3129
- * - `locale`: Locale used for `<title>` text.
3130
- *
3131
- * Reads the `lang` attribute from `<html>`, falls back to 'en'.
3132
- */
3133
- "w-icon": Partial<
3134
- WarpIconProps & WarpIconSolidJsProps & BaseProps<WarpIcon> & BaseEvents
3557
+ type ReactElementProps<T extends HTMLElement> = import("react").DOMAttributes<T> &
3558
+ import("react").AriaAttributes &
3559
+ import("react").RefAttributes<T> &
3560
+ Pick<
3561
+ import("react").HTMLAttributes<T>,
3562
+ | "className"
3563
+ | "style"
3564
+ | "suppressContentEditableWarning"
3565
+ | "suppressHydrationWarning"
3135
3566
  >;
3136
3567
 
3568
+ // Merge order matters: component props must win over React/global/base props
3569
+ // when names collide, e.g. w-attention's boolean popover prop.
3570
+ type ReactCustomElementProps<T extends HTMLElement, Props> = Omit<
3571
+ BaseProps<T> & BaseEvents,
3572
+ keyof ReactElementProps<T> | keyof Props
3573
+ > &
3574
+ Omit<ReactElementProps<T>, keyof Props> &
3575
+ Props;
3576
+
3577
+ type CustomElementInstances = {
3578
+ "w-textfield": WarpTextField;
3579
+ "w-icon": WarpIcon;
3580
+ "w-affix": WarpAffix;
3581
+ "w-alert": WarpAlert;
3582
+ "w-link": WarpLink;
3583
+ "w-button": WarpButton;
3584
+ "w-attention": WarpAttention;
3585
+ "w-badge": WarpBadge;
3586
+ "w-box": WarpBox;
3587
+ "w-breadcrumbs": WarpBreadcrumbs;
3588
+ "w-breadcrumb-item": WarpBreadcrumbItem;
3589
+ "w-card": WarpCard;
3590
+ "w-checkbox": WarpCheckbox;
3591
+ "w-checkbox-group": WarpCheckboxGroup;
3592
+ "w-combobox": WarpCombobox;
3593
+ "w-datepicker": WarpDatepicker;
3594
+ "w-expandable": WarpExpandable;
3595
+ "w-modal": WarpModal;
3596
+ "w-modal-footer": WarpModalFooter;
3597
+ "w-modal-header": WarpModalHeader;
3598
+ "w-page-indicator": WarpPageIndicator;
3599
+ "w-pagination": WarpPagination;
3600
+ "w-pill": WarpPill;
3601
+ "w-radio": WarpRadio;
3602
+ "w-radio-group": WarpRadioGroup;
3603
+ "w-select": WarpSelect;
3604
+ "w-slider-thumb": WarpSliderThumb;
3605
+ "w-slider": WarpSlider;
3606
+ "w-snackbar-item": WarpSnackbarItem;
3607
+ "w-snackbar": WarpSnackbar;
3608
+ "w-step": WarpStep;
3609
+ "w-step-indicator": WarpStepIndicator;
3610
+ "w-switch": WarpSwitch;
3611
+ "w-tab": WarpTab;
3612
+ "w-tab-panel": WarpTabPanel;
3613
+ "w-tabs": WarpTabs;
3614
+ "w-textarea": WarpTextarea;
3615
+ };
3616
+
3617
+ type CustomElementComponentProps = {
3618
+ "w-textfield": WarpTextFieldProps;
3619
+ "w-icon": WarpIconProps;
3620
+ "w-affix": WarpAffixProps;
3621
+ "w-alert": WarpAlertProps;
3622
+ "w-link": WarpLinkProps;
3623
+ "w-button": WarpButtonProps;
3624
+ "w-attention": WarpAttentionProps;
3625
+ "w-badge": WarpBadgeProps;
3626
+ "w-box": WarpBoxProps;
3627
+ "w-breadcrumbs": WarpBreadcrumbsProps;
3628
+ "w-breadcrumb-item": WarpBreadcrumbItemProps;
3629
+ "w-card": WarpCardProps;
3630
+ "w-checkbox": WarpCheckboxProps;
3631
+ "w-checkbox-group": WarpCheckboxGroupProps;
3632
+ "w-combobox": WarpComboboxProps;
3633
+ "w-datepicker": WarpDatepickerProps;
3634
+ "w-expandable": WarpExpandableProps;
3635
+ "w-modal": WarpModalProps;
3636
+ "w-modal-footer": WarpModalFooterProps;
3637
+ "w-modal-header": WarpModalHeaderProps;
3638
+ "w-page-indicator": WarpPageIndicatorProps;
3639
+ "w-pagination": WarpPaginationProps;
3640
+ "w-pill": WarpPillProps;
3641
+ "w-radio": WarpRadioProps;
3642
+ "w-radio-group": WarpRadioGroupProps;
3643
+ "w-select": WarpSelectProps;
3644
+ "w-slider-thumb": WarpSliderThumbProps;
3645
+ "w-slider": WarpSliderProps;
3646
+ "w-snackbar-item": WarpSnackbarItemProps;
3647
+ "w-snackbar": WarpSnackbarProps;
3648
+ "w-step": WarpStepProps;
3649
+ "w-step-indicator": WarpStepIndicatorProps;
3650
+ "w-switch": WarpSwitchProps;
3651
+ "w-tab": WarpTabProps;
3652
+ "w-tab-panel": WarpTabPanelProps;
3653
+ "w-tabs": WarpTabsProps;
3654
+ "w-textarea": WarpTextareaProps;
3655
+ };
3656
+
3657
+ export type ReactCustomElements = {
3658
+ [Tag in keyof CustomElementComponentProps]: Tag extends keyof CustomElementInstances
3659
+ ? Partial<ReactCustomElementProps<CustomElementInstances[Tag], CustomElementComponentProps[Tag]>>
3660
+ : never;
3661
+ };
3662
+
3663
+ export type CustomElementsSolidJs = {
3137
3664
  /**
3138
3665
  * A single-line input component used for entering and editing textual or numeric data.
3139
3666
  *
@@ -3150,6 +3677,7 @@ export type CustomElementsSolidJs = {
3150
3677
  * - `label`: Either a `label` or an `aria-label` must be provided.
3151
3678
  * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
3152
3679
  * or on its own to show a help text.
3680
+ * - `optional`: Whether to show the optional indicator after the label.
3153
3681
  * - `size`: Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.
3154
3682
  * - `max`: Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).
3155
3683
  * - `min`: Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).
@@ -3182,7 +3710,7 @@ export type CustomElementsSolidJs = {
3182
3710
  * Areas where markup can be added to the component.
3183
3711
  *
3184
3712
  * - `suffix`: Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).
3185
- * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon.
3713
+ * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.
3186
3714
  *
3187
3715
  * ## Methods
3188
3716
  *
@@ -3200,9 +3728,36 @@ export type CustomElementsSolidJs = {
3200
3728
  BaseEvents
3201
3729
  >;
3202
3730
 
3731
+ /**
3732
+ *
3733
+ *
3734
+ * ## Attributes & Properties
3735
+ *
3736
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
3737
+ *
3738
+ * - `name`: Icon filename (without .svg)
3739
+ * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
3740
+ * - `locale`: Locale used for `<title>` text.
3741
+ *
3742
+ * Reads the `lang` attribute from `<html>`, falls back to 'en'.
3743
+ */
3744
+ "w-icon": Partial<
3745
+ WarpIconProps & WarpIconSolidJsProps & BaseProps<WarpIcon> & BaseEvents
3746
+ >;
3747
+
3203
3748
  /**
3204
3749
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
3205
3750
  *
3751
+ * ## Accessibility Note
3752
+ * Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
3753
+ * cannot reference elements across shadow boundaries. This means:
3754
+ * - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
3755
+ * - Interactive affixes (buttons) must have their own `aria-label` (already implemented)
3756
+ * - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
3757
+ *
3758
+ * For non-interactive labels (e.g., currency symbols), consider including the information in the
3759
+ * main label or placeholder instead of relying on ARIA to announce affix content.
3760
+ *
3206
3761
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
3207
3762
  *
3208
3763
  * ## Attributes & Properties
@@ -3449,6 +4004,34 @@ export type CustomElementsSolidJs = {
3449
4004
  BaseEvents
3450
4005
  >;
3451
4006
 
4007
+ /**
4008
+ * Represents one item in a `w-breadcrumbs` trail.
4009
+ * Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
4010
+ *
4011
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
4012
+ *
4013
+ * ## Attributes & Properties
4014
+ *
4015
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
4016
+ *
4017
+ * - `current-page`/`currentPage`: Marks this item as the current page.
4018
+ * Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
4019
+ * - `href`: URL for linked breadcrumb items.
4020
+ * When omitted, the item renders as non-focusable text.
4021
+ *
4022
+ * ## Slots
4023
+ *
4024
+ * Areas where markup can be added to the component.
4025
+ *
4026
+ * - `(default)`: The breadcrumb label content.
4027
+ */
4028
+ "w-breadcrumb-item": Partial<
4029
+ WarpBreadcrumbItemProps &
4030
+ WarpBreadcrumbItemSolidJsProps &
4031
+ BaseProps<WarpBreadcrumbItem> &
4032
+ BaseEvents
4033
+ >;
4034
+
3452
4035
  /**
3453
4036
  * Card is a layout component used for separating content areas on a page.
3454
4037
  *
@@ -3537,7 +4120,18 @@ export type CustomElementsSolidJs = {
3537
4120
  >;
3538
4121
 
3539
4122
  /**
4123
+ * Checkboxes allow users to select multiple options from a list of choices.
3540
4124
  *
4125
+ * Use with `w-checkbox`.
4126
+ *
4127
+ * ## Architecture Note
4128
+ * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
4129
+ * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
4130
+ * HTML best practices. This inconsistency exists for historical reasons and may be addressed
4131
+ * in a future major version to align both on the more semantic approach.
4132
+ *
4133
+ * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
4134
+ * backwards compatibility implications (CSS selectors, etc.).
3541
4135
  *
3542
4136
  * ## Attributes & Properties
3543
4137
  *
@@ -3776,6 +4370,28 @@ export type CustomElementsSolidJs = {
3776
4370
  *
3777
4371
  * - `open() => void`: undefined
3778
4372
  * - `close() => void`: undefined
4373
+ *
4374
+ * ## CSS Custom Properties
4375
+ *
4376
+ * CSS variables available for styling the component.
4377
+ *
4378
+ * - `--w-c-modal-backdrop-color`: undefined (default: `undefined`)
4379
+ * - `--w-c-modal-bg`: undefined (default: `undefined`)
4380
+ * - `--w-c-modal-box-shadow`: undefined (default: `undefined`)
4381
+ * - `--w-c-modal-color`: undefined (default: `undefined`)
4382
+ * - `--w-c-modal-height`: undefined (default: `undefined`)
4383
+ * - `--w-c-modal-max-height`: undefined (default: `undefined`)
4384
+ * - `--w-c-modal-min-height`: undefined (default: `undefined`)
4385
+ * - `--w-c-modal-translate-distance`: undefined (default: `undefined`)
4386
+ * - `--w-c-modal-width`: undefined (default: `undefined`)
4387
+ *
4388
+ * ## CSS Parts
4389
+ *
4390
+ * Custom selectors for styling elements within the component.
4391
+ *
4392
+ * - `dialog`: the root element inside the component (`<dialog>` element).
4393
+ * - `wrapper`: container for all elements, direct child of `<dialog>`.
4394
+ * - `content`: the container for the `content` slot items (children).
3779
4395
  */
3780
4396
  "w-modal": Partial<
3781
4397
  WarpModalProps & WarpModalSolidJsProps & BaseProps<WarpModal> & BaseEvents
@@ -3783,6 +4399,18 @@ export type CustomElementsSolidJs = {
3783
4399
 
3784
4400
  /**
3785
4401
  * The footer section of a modal, typically where you place actions.
4402
+ *
4403
+ * ## CSS Custom Properties
4404
+ *
4405
+ * CSS variables available for styling the component.
4406
+ *
4407
+ * - `--w-c-modal-footer-gap`: adjusts the flex gap between actions in the footer. (default: `undefined`)
4408
+ *
4409
+ * ## CSS Parts
4410
+ *
4411
+ * Custom selectors for styling elements within the component.
4412
+ *
4413
+ * - `footer`: the container for slotted items (children).
3786
4414
  */
3787
4415
  "w-modal-footer": Partial<
3788
4416
  WarpModalFooterProps &
@@ -3813,6 +4441,24 @@ export type CustomElementsSolidJs = {
3813
4441
  * Areas where markup can be added to the component.
3814
4442
  *
3815
4443
  * - `top`: Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.
4444
+ *
4445
+ * ## CSS Custom Properties
4446
+ *
4447
+ * CSS variables available for styling the component.
4448
+ *
4449
+ * - `--w-c-modal-header-font-size`: undefined (default: `undefined`)
4450
+ * - `--w-c-modal-header-line-height`: undefined (default: `undefined`)
4451
+ * - `--w-c-modal-header-margin-bottom`: undefined (default: `undefined`)
4452
+ *
4453
+ * ## CSS Parts
4454
+ *
4455
+ * Custom selectors for styling elements within the component.
4456
+ *
4457
+ * - `header`: the root element inside the component.
4458
+ * - `top`: the container for the image (`top` slot).
4459
+ * - `back`: the back button, if visible.
4460
+ * - `title`: the title element.
4461
+ * - `close`: the close button, if visible.
3816
4462
  */
3817
4463
  "w-modal-header": Partial<
3818
4464
  WarpModalHeaderProps &
@@ -3934,7 +4580,7 @@ export type CustomElementsSolidJs = {
3934
4580
  * Areas where markup can be added to the component.
3935
4581
  *
3936
4582
  * - `label`: Alternative to the `label` attribute should you need custom HTML.
3937
- * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
4583
+ * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).
3938
4584
  */
3939
4585
  "w-radio-group": Partial<
3940
4586
  WarpRadioGroupProps &
@@ -4031,6 +4677,7 @@ export type CustomElementsSolidJs = {
4031
4677
  * - `help-text`/`helpText`: Additional description to show below the fieldset
4032
4678
  * - `invalid`: Sets the form fields and fieldset in an invalid state
4033
4679
  * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit
4680
+ * - `optional`: Whether to show the optional indicator after the label.
4034
4681
  * - `min`: The minimum allowed value in the range inputs
4035
4682
  * - `max`: The maximum allowed value in the range inputs
4036
4683
  * - `markers`: Pass a value similar to step to create visual markers at that interval
@@ -4042,6 +4689,7 @@ export type CustomElementsSolidJs = {
4042
4689
  *
4043
4690
  * Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. (property only)
4044
4691
  * - `labelFormatter`: Formatter for the min and max labels below the range. (property only)
4692
+ * - `_label`: undefined (property only) (readonly)
4045
4693
  *
4046
4694
  * ## Slots
4047
4695
  *
@@ -4060,6 +4708,118 @@ export type CustomElementsSolidJs = {
4060
4708
  BaseEvents
4061
4709
  >;
4062
4710
 
4711
+ /**
4712
+ * An item to show in a `w-snackbar`.
4713
+ *
4714
+ * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
4715
+ *
4716
+ * ## Attributes & Properties
4717
+ *
4718
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
4719
+ *
4720
+ * - `action-placement`/`actionPlacement`: The placement of the action and close buttons.
4721
+ * - `duration`: How long the message should stay in the document before removing itself.
4722
+ *
4723
+ * ## Slots
4724
+ *
4725
+ * Areas where markup can be added to the component.
4726
+ *
4727
+ * - `default`: the snackbar message.
4728
+ * - `icon`: icon preceeding the message.
4729
+ * - `action`: action following the message.
4730
+ *
4731
+ * ## Methods
4732
+ *
4733
+ * Methods that can be called to access component functionality.
4734
+ *
4735
+ * - `close() => void`: Remove the snackbar item from the document.
4736
+ *
4737
+ * Moves focus to the last focused element outside of the snackbar item, if available.
4738
+ *
4739
+ * ## CSS Custom Properties
4740
+ *
4741
+ * CSS variables available for styling the component.
4742
+ *
4743
+ * - `--w-c-snackbar-item-radius`: undefined (default: `undefined`)
4744
+ * - `--w-c-snackbar-item-max-width`: undefined (default: `undefined`)
4745
+ * - `--w-c-snackbar-item-min-width`: undefined (default: `undefined`)
4746
+ * - `--w-c-snackbar-item-padding`: undefined (default: `undefined`)
4747
+ * - `--w-c-snackbar-item-bg`: undefined (default: `undefined`)
4748
+ * - `--w-c-snackbar-item-action-bg-active`: undefined (default: `undefined`)
4749
+ * - `--w-c-snackbar-item-action-bg-hover`: undefined (default: `undefined`)
4750
+ * - `--w-c-snackbar-item-color`: undefined (default: `undefined`)
4751
+ * - `--w-c-snackbar-item-action-color-active`: undefined (default: `undefined`)
4752
+ * - `--w-c-snackbar-item-action-color-hover`: undefined (default: `undefined`)
4753
+ * - `--w-c-snackbar-item-box-shadow`: undefined (default: `undefined`)
4754
+ *
4755
+ * ## CSS Parts
4756
+ *
4757
+ * Custom selectors for styling elements within the component.
4758
+ *
4759
+ * - `item`: the container wrapping the message, icon and actions.
4760
+ * - `icon`: the icon for the variant.
4761
+ * - `message`: the default slot, body of the snackbar item.
4762
+ * - `action`: close and action button.
4763
+ */
4764
+ "w-snackbar-item": Partial<
4765
+ WarpSnackbarItemProps &
4766
+ WarpSnackbarItemSolidJsProps &
4767
+ BaseProps<WarpSnackbarItem> &
4768
+ BaseEvents
4769
+ >;
4770
+
4771
+ /**
4772
+ * A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
4773
+ *
4774
+ * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
4775
+ *
4776
+ * ## Slots
4777
+ *
4778
+ * Areas where markup can be added to the component.
4779
+ *
4780
+ * - `default`: `w-snackbar-item` gets placed inside the default slot by the `create` function.
4781
+ *
4782
+ * ## Methods
4783
+ *
4784
+ * Methods that can be called to access component functionality.
4785
+ *
4786
+ * - `create(message: string, options: CreateSnackbarOptions = {}) => void`: Creates a snackbar item and immediately adds it to the snackbar.
4787
+ *
4788
+ * By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
4789
+ *
4790
+ * If you include an `action` in the options the default `duration` is
4791
+ * set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
4792
+ *
4793
+ * A `duration` of 10 seconds or longer forces the close button to be visible.
4794
+ *
4795
+ * The default `variant` is `neutral` which does not have an icon.
4796
+ *
4797
+ * Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
4798
+ *
4799
+ * ## CSS Custom Properties
4800
+ *
4801
+ * CSS variables available for styling the component.
4802
+ *
4803
+ * - `--w-c-snackbar-container-gap`: undefined (default: `undefined`)
4804
+ * - `--w-c-snackbar-position-bottom`: undefined (default: `undefined`)
4805
+ * - `--w-c-snackbar-position-left`: undefined (default: `undefined`)
4806
+ * - `--w-c-snackbar-position-right`: undefined (default: `undefined`)
4807
+ * - `--w-c-snackbar-position-top`: undefined (default: `undefined`)
4808
+ * - `--w-c-snackbar-z-index`: undefined (default: `undefined`)
4809
+ *
4810
+ * ## CSS Parts
4811
+ *
4812
+ * Custom selectors for styling elements within the component.
4813
+ *
4814
+ * - `container`: the live region that positions messages on the screen.
4815
+ */
4816
+ "w-snackbar": Partial<
4817
+ WarpSnackbarProps &
4818
+ WarpSnackbarSolidJsProps &
4819
+ BaseProps<WarpSnackbar> &
4820
+ BaseEvents
4821
+ >;
4822
+
4063
4823
  /**
4064
4824
  * Individual step component that shows a single step in a process
4065
4825
  *
@@ -4241,11 +5001,72 @@ export type CustomElementsSolidJs = {
4241
5001
  >;
4242
5002
  };
4243
5003
 
4244
- export type CustomCssProperties = {};
5004
+ export type CustomCssProperties = {
5005
+ /** */
5006
+ "--w-c-modal-backdrop-color"?: string;
5007
+ /** */
5008
+ "--w-c-modal-bg"?: string;
5009
+ /** */
5010
+ "--w-c-modal-box-shadow"?: string;
5011
+ /** */
5012
+ "--w-c-modal-color"?: string;
5013
+ /** */
5014
+ "--w-c-modal-height"?: string;
5015
+ /** */
5016
+ "--w-c-modal-max-height"?: string;
5017
+ /** */
5018
+ "--w-c-modal-min-height"?: string;
5019
+ /** */
5020
+ "--w-c-modal-translate-distance"?: string;
5021
+ /** */
5022
+ "--w-c-modal-width"?: string;
5023
+ /** adjusts the flex gap between actions in the footer. */
5024
+ "--w-c-modal-footer-gap"?: string;
5025
+ /** */
5026
+ "--w-c-modal-header-font-size"?: string;
5027
+ /** */
5028
+ "--w-c-modal-header-line-height"?: string;
5029
+ /** */
5030
+ "--w-c-modal-header-margin-bottom"?: string;
5031
+ /** */
5032
+ "--w-c-snackbar-item-radius"?: string;
5033
+ /** */
5034
+ "--w-c-snackbar-item-max-width"?: string;
5035
+ /** */
5036
+ "--w-c-snackbar-item-min-width"?: string;
5037
+ /** */
5038
+ "--w-c-snackbar-item-padding"?: string;
5039
+ /** */
5040
+ "--w-c-snackbar-item-bg"?: string;
5041
+ /** */
5042
+ "--w-c-snackbar-item-action-bg-active"?: string;
5043
+ /** */
5044
+ "--w-c-snackbar-item-action-bg-hover"?: string;
5045
+ /** */
5046
+ "--w-c-snackbar-item-color"?: string;
5047
+ /** */
5048
+ "--w-c-snackbar-item-action-color-active"?: string;
5049
+ /** */
5050
+ "--w-c-snackbar-item-action-color-hover"?: string;
5051
+ /** */
5052
+ "--w-c-snackbar-item-box-shadow"?: string;
5053
+ /** */
5054
+ "--w-c-snackbar-container-gap"?: string;
5055
+ /** */
5056
+ "--w-c-snackbar-position-bottom"?: string;
5057
+ /** */
5058
+ "--w-c-snackbar-position-left"?: string;
5059
+ /** */
5060
+ "--w-c-snackbar-position-right"?: string;
5061
+ /** */
5062
+ "--w-c-snackbar-position-top"?: string;
5063
+ /** */
5064
+ "--w-c-snackbar-z-index"?: string;
5065
+ };
4245
5066
 
4246
5067
  declare module "react" {
4247
5068
  namespace JSX {
4248
- interface IntrinsicElements extends CustomElements {}
5069
+ interface IntrinsicElements extends ReactCustomElements {}
4249
5070
  }
4250
5071
  export interface CSSProperties extends CustomCssProperties {}
4251
5072
  }