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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (724) hide show
  1. package/dist/.storybook/utilities.js +4 -4
  2. package/dist/api.js.map +2 -2
  3. package/dist/custom-elements.json +1211 -542
  4. package/dist/docs/affix/affix.md +111 -2
  5. package/dist/docs/affix/api.md +2 -2
  6. package/dist/docs/affix/styling.md +107 -0
  7. package/dist/docs/alert/alert.md +5 -5
  8. package/dist/docs/alert/api.md +4 -4
  9. package/dist/docs/attention/api.md +50 -2
  10. package/dist/docs/attention/attention.md +53 -3
  11. package/dist/docs/badge/api.md +50 -4
  12. package/dist/docs/badge/badge.md +50 -4
  13. package/dist/docs/box/api.md +2 -2
  14. package/dist/docs/box/box.md +4 -2
  15. package/dist/docs/breadcrumb-item/api.md +27 -0
  16. package/dist/docs/breadcrumb-item/breadcrumb-item.md +36 -0
  17. package/dist/docs/breadcrumbs/accessibility.md +8 -18
  18. package/dist/docs/breadcrumbs/breadcrumbs.md +123 -34
  19. package/dist/docs/breadcrumbs/examples.md +8 -8
  20. package/dist/docs/breadcrumbs/styling.md +96 -0
  21. package/dist/docs/breadcrumbs/usage.md +8 -8
  22. package/dist/docs/button/api.md +32 -24
  23. package/dist/docs/button/button.md +35 -24
  24. package/dist/docs/card/api.md +8 -0
  25. package/dist/docs/card/card.md +10 -0
  26. package/dist/docs/checkbox/api.md +52 -13
  27. package/dist/docs/checkbox/checkbox.md +231 -14
  28. package/dist/docs/checkbox/styling.md +173 -0
  29. package/dist/docs/checkbox-group/api.md +30 -6
  30. package/dist/docs/checkbox-group/checkbox-group.md +66 -36
  31. package/dist/docs/checkbox-group/styling.md +31 -29
  32. package/dist/docs/combobox/api.md +20 -12
  33. package/dist/docs/combobox/combobox.md +22 -12
  34. package/dist/docs/datepicker/api.md +22 -14
  35. package/dist/docs/datepicker/datepicker.md +24 -16
  36. package/dist/docs/expandable/api.md +6 -6
  37. package/dist/docs/expandable/expandable.md +8 -6
  38. package/dist/docs/icon/api.md +4 -4
  39. package/dist/docs/icon/icon.md +5 -5
  40. package/dist/docs/index.md +35 -32
  41. package/dist/docs/link/api.md +10 -10
  42. package/dist/docs/link/link.md +13 -11
  43. package/dist/docs/modal/api.md +20 -2
  44. package/dist/docs/modal/modal.md +101 -10
  45. package/dist/docs/modal/styling.md +75 -0
  46. package/dist/docs/modal/usage.md +4 -8
  47. package/dist/docs/modal-footer/modal-footer.md +2 -0
  48. package/dist/docs/modal-header/modal-header.md +2 -0
  49. package/dist/docs/page-indicator/page-indicator.md +2 -0
  50. package/dist/docs/pagination/api.md +4 -4
  51. package/dist/docs/pagination/pagination.md +6 -4
  52. package/dist/docs/pill/api.md +8 -8
  53. package/dist/docs/pill/pill.md +10 -8
  54. package/dist/docs/radio/radio.md +5 -1
  55. package/dist/docs/radio-group/api.md +4 -4
  56. package/dist/docs/radio-group/radio-group.md +186 -69
  57. package/dist/docs/radio-group/styling.md +179 -64
  58. package/dist/docs/select/api.md +10 -10
  59. package/dist/docs/select/select.md +103 -10
  60. package/dist/docs/select/styling.md +91 -0
  61. package/dist/docs/slider/api.md +38 -22
  62. package/dist/docs/slider/slider.md +40 -22
  63. package/dist/docs/slider-thumb/api.md +28 -12
  64. package/dist/docs/slider-thumb/slider-thumb.md +28 -12
  65. package/dist/docs/snackbar/accessibility.md +20 -0
  66. package/dist/docs/snackbar/api.md +30 -0
  67. package/dist/docs/snackbar/examples.md +191 -0
  68. package/dist/docs/snackbar/snackbar.md +387 -0
  69. package/dist/docs/snackbar/styling.md +72 -0
  70. package/dist/docs/snackbar/usage.md +60 -0
  71. package/dist/docs/snackbar-item/api.md +41 -0
  72. package/dist/docs/snackbar-item/snackbar-item.md +51 -0
  73. package/dist/docs/step/api.md +16 -0
  74. package/dist/docs/step/step.md +19 -1
  75. package/dist/docs/step-indicator/step-indicator.md +2 -0
  76. package/dist/docs/switch/api.md +8 -0
  77. package/dist/docs/switch/switch.md +10 -0
  78. package/dist/docs/tab/tab.md +2 -0
  79. package/dist/docs/tab-panel/tab-panel.md +3 -0
  80. package/dist/docs/tabs/api.md +3 -3
  81. package/dist/docs/tabs/tabs.md +5 -3
  82. package/dist/docs/textarea/api.md +54 -14
  83. package/dist/docs/textarea/styling.md +91 -0
  84. package/dist/docs/textarea/textarea.md +146 -19
  85. package/dist/docs/textfield/api.md +74 -34
  86. package/dist/docs/textfield/styling.md +95 -0
  87. package/dist/docs/textfield/textfield.md +171 -34
  88. package/dist/entrypoint-react.d.ts +38 -0
  89. package/dist/entrypoint-react.js +39 -0
  90. package/dist/index.d.ts +1007 -154
  91. package/dist/packages/affix/affix-styles.d.ts +8 -0
  92. package/dist/packages/affix/affix-styles.js +108 -0
  93. package/dist/packages/affix/affix.d.ts +12 -14
  94. package/dist/packages/affix/affix.hydration.test.d.ts +1 -1
  95. package/dist/packages/affix/affix.hydration.test.js +15 -15
  96. package/dist/packages/affix/affix.js +451 -320
  97. package/dist/packages/affix/affix.js.map +4 -4
  98. package/dist/packages/affix/affix.react.stories.d.ts +3 -3
  99. package/dist/packages/affix/affix.react.stories.js +3 -3
  100. package/dist/packages/affix/affix.react.test.js +5 -3
  101. package/dist/packages/affix/affix.stories.d.ts +3 -3
  102. package/dist/packages/affix/affix.stories.js +10 -10
  103. package/dist/packages/affix/affix.test.d.ts +1 -1
  104. package/dist/packages/affix/affix.test.js +10 -10
  105. package/dist/packages/affix/react.d.ts +8 -3
  106. package/dist/packages/affix/react.js +11 -6
  107. package/dist/packages/affix/styles.js +2 -2
  108. package/dist/packages/alert/alert.d.ts +9 -6
  109. package/dist/packages/alert/alert.hydration.test.d.ts +1 -1
  110. package/dist/packages/alert/alert.hydration.test.js +21 -21
  111. package/dist/packages/alert/alert.js +349 -324
  112. package/dist/packages/alert/alert.js.map +3 -3
  113. package/dist/packages/alert/alert.react.stories.d.ts +2 -2
  114. package/dist/packages/alert/alert.react.stories.js +13 -13
  115. package/dist/packages/alert/alert.stories.d.ts +4 -4
  116. package/dist/packages/alert/alert.stories.js +29 -27
  117. package/dist/packages/alert/alert.test.d.ts +1 -1
  118. package/dist/packages/alert/alert.test.js +34 -21
  119. package/dist/packages/alert/react.d.ts +8 -1
  120. package/dist/packages/alert/react.js +11 -4
  121. package/dist/packages/alert/styles.js +2 -2
  122. package/dist/packages/attention/attention.d.ts +14 -7
  123. package/dist/packages/attention/attention.hydration.test.d.ts +1 -1
  124. package/dist/packages/attention/attention.hydration.test.js +29 -29
  125. package/dist/packages/attention/attention.js +1744 -1681
  126. package/dist/packages/attention/attention.js.map +4 -4
  127. package/dist/packages/attention/attention.react.stories.d.ts +3 -3
  128. package/dist/packages/attention/attention.react.stories.js +13 -13
  129. package/dist/packages/attention/attention.react.test.js +11 -7
  130. package/dist/packages/attention/attention.stories.d.ts +4 -4
  131. package/dist/packages/attention/attention.stories.js +126 -117
  132. package/dist/packages/attention/attention.test.d.ts +1 -1
  133. package/dist/packages/attention/attention.test.js +18 -10
  134. package/dist/packages/attention/layout-styles.js +900 -900
  135. package/dist/packages/attention/react.d.ts +16 -6
  136. package/dist/packages/attention/react.js +22 -11
  137. package/dist/packages/attention/styles.js +2 -2
  138. package/dist/packages/badge/badge.d.ts +8 -3
  139. package/dist/packages/badge/badge.hydration.test.d.ts +1 -1
  140. package/dist/packages/badge/badge.hydration.test.js +25 -25
  141. package/dist/packages/badge/badge.js +281 -281
  142. package/dist/packages/badge/badge.js.map +3 -3
  143. package/dist/packages/badge/badge.react.stories.d.ts +3 -3
  144. package/dist/packages/badge/badge.react.stories.js +17 -17
  145. package/dist/packages/badge/badge.stories.d.ts +3 -3
  146. package/dist/packages/badge/badge.stories.js +22 -20
  147. package/dist/packages/badge/badge.test.d.ts +1 -1
  148. package/dist/packages/badge/badge.test.js +13 -11
  149. package/dist/packages/badge/react.d.ts +6 -1
  150. package/dist/packages/badge/react.js +9 -4
  151. package/dist/packages/badge/styles.js +2 -2
  152. package/dist/packages/box/box.d.ts +7 -2
  153. package/dist/packages/box/box.hydration.test.d.ts +1 -1
  154. package/dist/packages/box/box.hydration.test.js +14 -14
  155. package/dist/packages/box/box.js +288 -288
  156. package/dist/packages/box/box.js.map +3 -3
  157. package/dist/packages/box/box.react.stories.d.ts +4 -4
  158. package/dist/packages/box/box.react.stories.js +8 -8
  159. package/dist/packages/box/box.stories.d.ts +3 -3
  160. package/dist/packages/box/box.stories.js +25 -19
  161. package/dist/packages/box/box.test.d.ts +1 -1
  162. package/dist/packages/box/box.test.js +6 -6
  163. package/dist/packages/box/react.d.ts +6 -1
  164. package/dist/packages/box/react.js +9 -4
  165. package/dist/packages/box/slot.test.d.ts +1 -1
  166. package/dist/packages/box/slot.test.js +6 -6
  167. package/dist/packages/box/styles.js +2 -2
  168. package/dist/packages/breadcrumb-item/breadcrumb-item.d.ts +34 -0
  169. package/dist/packages/breadcrumb-item/breadcrumb-item.js +2529 -0
  170. package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +7 -0
  171. package/dist/packages/breadcrumb-item/react.d.ts +8 -0
  172. package/dist/packages/breadcrumb-item/react.js +17 -0
  173. package/dist/packages/breadcrumb-item/styles.d.ts +4 -0
  174. package/dist/packages/breadcrumb-item/styles.js +81 -0
  175. package/dist/packages/breadcrumbs/breadcrumbs.d.ts +11 -4
  176. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.d.ts +1 -1
  177. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +55 -49
  178. package/dist/packages/breadcrumbs/breadcrumbs.js +288 -284
  179. package/dist/packages/breadcrumbs/breadcrumbs.js.map +4 -4
  180. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +4 -4
  181. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +17 -16
  182. package/dist/packages/breadcrumbs/breadcrumbs.stories.d.ts +7 -8
  183. package/dist/packages/breadcrumbs/breadcrumbs.stories.js +30 -26
  184. package/dist/packages/breadcrumbs/breadcrumbs.test.d.ts +1 -1
  185. package/dist/packages/breadcrumbs/breadcrumbs.test.js +19 -17
  186. package/dist/packages/breadcrumbs/react.d.ts +8 -1
  187. package/dist/packages/breadcrumbs/react.js +11 -4
  188. package/dist/packages/breadcrumbs/styles.js +2 -2
  189. package/dist/packages/button/button.d.ts +22 -16
  190. package/dist/packages/button/button.hydration.test.d.ts +1 -1
  191. package/dist/packages/button/button.hydration.test.js +19 -19
  192. package/dist/packages/button/button.js +758 -711
  193. package/dist/packages/button/button.js.map +4 -4
  194. package/dist/packages/button/button.react.stories.d.ts +5 -5
  195. package/dist/packages/button/button.react.stories.js +30 -30
  196. package/dist/packages/button/button.react.test.js +13 -13
  197. package/dist/packages/button/button.stories.d.ts +4 -4
  198. package/dist/packages/button/button.stories.js +276 -167
  199. package/dist/packages/button/button.test.d.ts +1 -1
  200. package/dist/packages/button/button.test.js +36 -35
  201. package/dist/packages/button/react.d.ts +10 -3
  202. package/dist/packages/button/react.js +14 -7
  203. package/dist/packages/button/styles.js +373 -331
  204. package/dist/packages/card/card.d.ts +7 -2
  205. package/dist/packages/card/card.hydration.test.d.ts +1 -1
  206. package/dist/packages/card/card.hydration.test.js +14 -14
  207. package/dist/packages/card/card.js +310 -295
  208. package/dist/packages/card/card.js.map +4 -4
  209. package/dist/packages/card/card.react.stories.d.ts +4 -4
  210. package/dist/packages/card/card.react.stories.js +11 -11
  211. package/dist/packages/card/card.stories.d.ts +3 -3
  212. package/dist/packages/card/card.stories.js +36 -24
  213. package/dist/packages/card/card.test.d.ts +1 -1
  214. package/dist/packages/card/card.test.js +6 -6
  215. package/dist/packages/card/react.d.ts +6 -1
  216. package/dist/packages/card/react.js +9 -4
  217. package/dist/packages/card/styles.js +2 -2
  218. package/dist/packages/checkbox/checkbox.a11y.test.d.ts +1 -1
  219. package/dist/packages/checkbox/checkbox.a11y.test.js +47 -33
  220. package/dist/packages/checkbox/checkbox.d.ts +10 -4
  221. package/dist/packages/checkbox/checkbox.hydration.test.d.ts +1 -1
  222. package/dist/packages/checkbox/checkbox.hydration.test.js +21 -21
  223. package/dist/packages/checkbox/checkbox.js +481 -430
  224. package/dist/packages/checkbox/checkbox.js.map +3 -3
  225. package/dist/packages/checkbox/checkbox.react.stories.d.ts +4 -4
  226. package/dist/packages/checkbox/checkbox.react.stories.js +3 -3
  227. package/dist/packages/checkbox/checkbox.stories.d.ts +4 -4
  228. package/dist/packages/checkbox/checkbox.stories.js +99 -91
  229. package/dist/packages/checkbox/checkbox.test.d.ts +1 -1
  230. package/dist/packages/checkbox/checkbox.test.js +64 -64
  231. package/dist/packages/checkbox/react.d.ts +12 -3
  232. package/dist/packages/checkbox/react.js +13 -6
  233. package/dist/packages/checkbox/styles.js +183 -132
  234. package/dist/packages/checkbox-group/checkbox-group.a11y.test.d.ts +2 -2
  235. package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +83 -73
  236. package/dist/packages/checkbox-group/checkbox-group.d.ts +13 -6
  237. package/dist/packages/checkbox-group/checkbox-group.hydration.test.d.ts +2 -2
  238. package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +36 -19
  239. package/dist/packages/checkbox-group/checkbox-group.js +62 -57
  240. package/dist/packages/checkbox-group/checkbox-group.js.map +3 -3
  241. package/dist/packages/checkbox-group/checkbox-group.react.test.js +4 -4
  242. package/dist/packages/checkbox-group/checkbox-group.test.d.ts +2 -2
  243. package/dist/packages/checkbox-group/checkbox-group.test.js +183 -90
  244. package/dist/packages/checkbox-group/react.d.ts +10 -3
  245. package/dist/packages/checkbox-group/react.js +13 -6
  246. package/dist/packages/combobox/combobox.a11y.test.d.ts +2 -2
  247. package/dist/packages/combobox/combobox.a11y.test.js +72 -49
  248. package/dist/packages/combobox/combobox.d.ts +8 -3
  249. package/dist/packages/combobox/combobox.hydration.test.d.ts +1 -1
  250. package/dist/packages/combobox/combobox.hydration.test.js +45 -45
  251. package/dist/packages/combobox/combobox.js +337 -338
  252. package/dist/packages/combobox/combobox.js.map +4 -4
  253. package/dist/packages/combobox/combobox.react.stories.d.ts +45 -13
  254. package/dist/packages/combobox/combobox.react.stories.js +29 -29
  255. package/dist/packages/combobox/combobox.react.test.js +8 -8
  256. package/dist/packages/combobox/combobox.stories.d.ts +4 -4
  257. package/dist/packages/combobox/combobox.stories.js +100 -94
  258. package/dist/packages/combobox/combobox.test.d.ts +2 -2
  259. package/dist/packages/combobox/combobox.test.js +249 -133
  260. package/dist/packages/combobox/react.d.ts +28 -7
  261. package/dist/packages/combobox/react.js +23 -14
  262. package/dist/packages/combobox/styles.js +2 -3
  263. package/dist/packages/datepicker/DatePicker.test.d.ts +2 -2
  264. package/dist/packages/datepicker/DatePicker.test.js +49 -42
  265. package/dist/packages/datepicker/datepicker.d.ts +15 -12
  266. package/dist/packages/datepicker/datepicker.hydration.test.d.ts +1 -1
  267. package/dist/packages/datepicker/datepicker.hydration.test.js +21 -21
  268. package/dist/packages/datepicker/datepicker.js +673 -632
  269. package/dist/packages/datepicker/datepicker.js.map +4 -4
  270. package/dist/packages/datepicker/datepicker.react.stories.d.ts +17 -17
  271. package/dist/packages/datepicker/datepicker.react.stories.js +9 -9
  272. package/dist/packages/datepicker/datepicker.react.test.js +6 -6
  273. package/dist/packages/datepicker/datepicker.stories.d.ts +4 -4
  274. package/dist/packages/datepicker/datepicker.stories.js +32 -32
  275. package/dist/packages/datepicker/datepicker.test.d.ts +2 -2
  276. package/dist/packages/datepicker/datepicker.test.js +77 -79
  277. package/dist/packages/datepicker/react.d.ts +15 -9
  278. package/dist/packages/datepicker/react.js +21 -14
  279. package/dist/packages/datepicker/styles/w-datepicker-calendar.styles.js +13 -12
  280. package/dist/packages/datepicker/styles/w-datepicker-day.styles.js +58 -55
  281. package/dist/packages/datepicker/styles/w-datepicker-month.styles.js +60 -57
  282. package/dist/packages/datepicker/styles/w-datepicker.styles.js +87 -87
  283. package/dist/packages/datepicker/utils.d.ts +3 -0
  284. package/dist/packages/datepicker/utils.js +40 -1
  285. package/dist/packages/datepicker/utils.test.d.ts +1 -0
  286. package/dist/packages/datepicker/utils.test.js +29 -0
  287. package/dist/packages/expandable/expandable.d.ts +14 -7
  288. package/dist/packages/expandable/expandable.hydration.test.d.ts +1 -1
  289. package/dist/packages/expandable/expandable.hydration.test.js +21 -21
  290. package/dist/packages/expandable/expandable.js +359 -332
  291. package/dist/packages/expandable/expandable.js.map +4 -4
  292. package/dist/packages/expandable/expandable.react.stories.d.ts +3 -3
  293. package/dist/packages/expandable/expandable.react.stories.js +7 -7
  294. package/dist/packages/expandable/expandable.react.test.js +15 -7
  295. package/dist/packages/expandable/expandable.stories.d.ts +5 -5
  296. package/dist/packages/expandable/expandable.stories.js +51 -45
  297. package/dist/packages/expandable/expandable.test.d.ts +1 -1
  298. package/dist/packages/expandable/expandable.test.js +19 -17
  299. package/dist/packages/expandable/react.d.ts +7 -2
  300. package/dist/packages/expandable/react.js +14 -9
  301. package/dist/packages/expandable/styles.js +2 -2
  302. package/dist/packages/global.d.ts +1 -0
  303. package/dist/packages/global.js +5 -0
  304. package/dist/packages/i18n.d.ts +1 -1
  305. package/dist/packages/i18n.js +37 -29
  306. package/dist/packages/icon/icon.d.ts +10 -2
  307. package/dist/packages/icon/icon.hydration.test.d.ts +1 -1
  308. package/dist/packages/icon/icon.hydration.test.js +25 -25
  309. package/dist/packages/icon/icon.js +31 -26
  310. package/dist/packages/icon/icon.js.map +2 -2
  311. package/dist/packages/icon/icon.react.stories.d.ts +3 -2
  312. package/dist/packages/icon/icon.react.stories.js +284 -283
  313. package/dist/packages/icon/icon.stories.d.ts +7 -30
  314. package/dist/packages/icon/icon.stories.js +307 -297
  315. package/dist/packages/icon/icon.test.d.ts +1 -1
  316. package/dist/packages/icon/icon.test.js +36 -28
  317. package/dist/packages/icon/react.d.ts +4 -1
  318. package/dist/packages/icon/react.js +7 -4
  319. package/dist/packages/icon/style.js +24 -25
  320. package/dist/packages/interaction-type-detection.d.ts +22 -0
  321. package/dist/packages/interaction-type-detection.js +38 -0
  322. package/dist/packages/link/link.d.ts +14 -9
  323. package/dist/packages/link/link.hydration.test.d.ts +1 -1
  324. package/dist/packages/link/link.hydration.test.js +27 -27
  325. package/dist/packages/link/link.js +726 -679
  326. package/dist/packages/link/link.js.map +3 -3
  327. package/dist/packages/link/link.react.stories.d.ts +5 -5
  328. package/dist/packages/link/link.react.stories.js +42 -42
  329. package/dist/packages/link/link.react.test.js +5 -3
  330. package/dist/packages/link/link.stories.d.ts +3 -3
  331. package/dist/packages/link/link.stories.js +51 -51
  332. package/dist/packages/link/link.test.d.ts +1 -1
  333. package/dist/packages/link/link.test.js +11 -7
  334. package/dist/packages/link/react.d.ts +8 -3
  335. package/dist/packages/link/react.js +11 -6
  336. package/dist/packages/link/styles.js +63 -58
  337. package/dist/packages/modal/index.d.ts +7 -7
  338. package/dist/packages/modal/index.js +7 -7
  339. package/dist/packages/modal/modal.d.ts +26 -4
  340. package/dist/packages/modal/modal.hydration.test.d.ts +1 -1
  341. package/dist/packages/modal/modal.hydration.test.js +12 -12
  342. package/dist/packages/modal/modal.js +456 -409
  343. package/dist/packages/modal/modal.js.map +4 -4
  344. package/dist/packages/modal/modal.react.stories.d.ts +7 -7
  345. package/dist/packages/modal/modal.react.stories.js +15 -6
  346. package/dist/packages/modal/modal.react.test.js +5 -5
  347. package/dist/packages/modal/modal.stories.d.ts +9 -8
  348. package/dist/packages/modal/modal.stories.js +266 -248
  349. package/dist/packages/modal/react.d.ts +40 -8
  350. package/dist/packages/modal/react.js +45 -13
  351. package/dist/packages/modal/styles.d.ts +1 -0
  352. package/dist/packages/modal/styles.js +171 -0
  353. package/dist/packages/modal/util.js +3 -1
  354. package/dist/packages/modal-footer/modal-footer.d.ts +13 -2
  355. package/dist/packages/modal-footer/modal-footer.js +299 -296
  356. package/dist/packages/modal-footer/modal-footer.js.map +4 -4
  357. package/dist/packages/modal-footer/react.d.ts +6 -1
  358. package/dist/packages/modal-footer/react.js +9 -4
  359. package/dist/packages/modal-footer/styles.d.ts +1 -0
  360. package/dist/packages/modal-footer/styles.js +22 -0
  361. package/dist/packages/modal-header/modal-header.d.ts +21 -7
  362. package/dist/packages/modal-header/modal-header.js +451 -422
  363. package/dist/packages/modal-header/modal-header.js.map +4 -4
  364. package/dist/packages/modal-header/modal-header.react.test.js +5 -3
  365. package/dist/packages/modal-header/react.d.ts +9 -4
  366. package/dist/packages/modal-header/react.js +13 -8
  367. package/dist/packages/modal-header/styles.d.ts +1 -0
  368. package/dist/packages/modal-header/styles.js +96 -0
  369. package/dist/packages/page-indicator/page-indicator.d.ts +8 -5
  370. package/dist/packages/page-indicator/page-indicator.hydration.test.d.ts +1 -1
  371. package/dist/packages/page-indicator/page-indicator.hydration.test.js +22 -22
  372. package/dist/packages/page-indicator/page-indicator.js +29 -29
  373. package/dist/packages/page-indicator/page-indicator.js.map +4 -4
  374. package/dist/packages/page-indicator/page-indicator.react.stories.d.ts +3 -3
  375. package/dist/packages/page-indicator/page-indicator.react.stories.js +11 -11
  376. package/dist/packages/page-indicator/page-indicator.react.test.js +5 -5
  377. package/dist/packages/page-indicator/page-indicator.stories.d.ts +9 -27
  378. package/dist/packages/page-indicator/page-indicator.stories.js +63 -32
  379. package/dist/packages/page-indicator/page-indicator.test.d.ts +1 -1
  380. package/dist/packages/page-indicator/page-indicator.test.js +110 -70
  381. package/dist/packages/page-indicator/react.d.ts +9 -2
  382. package/dist/packages/page-indicator/react.js +14 -7
  383. package/dist/packages/page-indicator/style.js +21 -21
  384. package/dist/packages/pagination/pagination.a11y.test.d.ts +1 -1
  385. package/dist/packages/pagination/pagination.a11y.test.js +59 -25
  386. package/dist/packages/pagination/pagination.d.ts +17 -11
  387. package/dist/packages/pagination/pagination.hydration.test.d.ts +1 -1
  388. package/dist/packages/pagination/pagination.hydration.test.js +19 -19
  389. package/dist/packages/pagination/pagination.js +385 -354
  390. package/dist/packages/pagination/pagination.js.map +4 -4
  391. package/dist/packages/pagination/pagination.react.stories.d.ts +19 -11
  392. package/dist/packages/pagination/pagination.react.stories.js +8 -8
  393. package/dist/packages/pagination/pagination.react.test.js +6 -6
  394. package/dist/packages/pagination/pagination.stories.d.ts +3 -3
  395. package/dist/packages/pagination/pagination.stories.js +18 -18
  396. package/dist/packages/pagination/pagination.test.d.ts +1 -1
  397. package/dist/packages/pagination/pagination.test.js +146 -72
  398. package/dist/packages/pagination/react.d.ts +15 -6
  399. package/dist/packages/pagination/react.js +17 -10
  400. package/dist/packages/pagination/styles.js +2 -2
  401. package/dist/packages/pill/pill.d.ts +13 -6
  402. package/dist/packages/pill/pill.hydration.test.d.ts +1 -1
  403. package/dist/packages/pill/pill.hydration.test.js +14 -14
  404. package/dist/packages/pill/pill.js +337 -314
  405. package/dist/packages/pill/pill.js.map +4 -4
  406. package/dist/packages/pill/pill.react.stories.d.ts +15 -11
  407. package/dist/packages/pill/pill.react.stories.js +7 -3
  408. package/dist/packages/pill/pill.react.test.js +8 -8
  409. package/dist/packages/pill/pill.stories.d.ts +3 -3
  410. package/dist/packages/pill/pill.stories.js +8 -8
  411. package/dist/packages/pill/pill.test.d.ts +1 -1
  412. package/dist/packages/pill/pill.test.js +17 -15
  413. package/dist/packages/pill/react.d.ts +11 -6
  414. package/dist/packages/pill/react.js +23 -14
  415. package/dist/packages/pill/styles.js +2 -2
  416. package/dist/packages/radio/base-element.d.ts +3 -3
  417. package/dist/packages/radio/base-element.js +3 -3
  418. package/dist/packages/radio/custom-error-validator.d.ts +1 -1
  419. package/dist/packages/radio/custom-error-validator.js +3 -3
  420. package/dist/packages/radio/form-associated-element.d.ts +9 -9
  421. package/dist/packages/radio/form-associated-element.js +27 -26
  422. package/dist/packages/radio/host-styles.js +9 -9
  423. package/dist/packages/radio/invalid.d.ts +1 -1
  424. package/dist/packages/radio/invalid.js +1 -1
  425. package/dist/packages/radio/radio-styles.js +199 -160
  426. package/dist/packages/radio/radio.a11y.test.d.ts +2 -2
  427. package/dist/packages/radio/radio.a11y.test.js +60 -58
  428. package/dist/packages/radio/radio.d.ts +10 -4
  429. package/dist/packages/radio/radio.hydration.test.d.ts +1 -1
  430. package/dist/packages/radio/radio.hydration.test.js +23 -14
  431. package/dist/packages/radio/radio.js +491 -452
  432. package/dist/packages/radio/radio.js.map +3 -3
  433. package/dist/packages/radio/radio.react.stories.d.ts +2 -2
  434. package/dist/packages/radio/radio.react.stories.js +3 -3
  435. package/dist/packages/radio/radio.stories.d.ts +4 -4
  436. package/dist/packages/radio/radio.stories.js +152 -136
  437. package/dist/packages/radio/radio.test.d.ts +1 -1
  438. package/dist/packages/radio/radio.test.js +74 -73
  439. package/dist/packages/radio/react.d.ts +8 -1
  440. package/dist/packages/radio/react.js +11 -4
  441. package/dist/packages/radio/required-validator.d.ts +1 -1
  442. package/dist/packages/radio/required-validator.js +12 -7
  443. package/dist/packages/radio/slot.d.ts +1 -1
  444. package/dist/packages/radio/slot.js +11 -8
  445. package/dist/packages/radio/watch.d.ts +1 -1
  446. package/dist/packages/radio/watch.js +3 -1
  447. package/dist/packages/radio-group/radio-group-styles.js +121 -88
  448. package/dist/packages/radio-group/radio-group.a11y.test.d.ts +2 -2
  449. package/dist/packages/radio-group/radio-group.a11y.test.js +81 -79
  450. package/dist/packages/radio-group/radio-group.d.ts +10 -8
  451. package/dist/packages/radio-group/radio-group.hydration.test.d.ts +2 -2
  452. package/dist/packages/radio-group/radio-group.hydration.test.js +29 -18
  453. package/dist/packages/radio-group/radio-group.js +654 -566
  454. package/dist/packages/radio-group/radio-group.js.map +4 -4
  455. package/dist/packages/radio-group/radio-group.react.test.js +4 -4
  456. package/dist/packages/radio-group/radio-group.test.d.ts +2 -2
  457. package/dist/packages/radio-group/radio-group.test.js +304 -230
  458. package/dist/packages/radio-group/react.d.ts +14 -7
  459. package/dist/packages/radio-group/react.js +18 -10
  460. package/dist/packages/select/input-styles.d.ts +11 -0
  461. package/dist/packages/select/input-styles.js +88 -0
  462. package/dist/packages/select/locales/da/messages.mjs +1 -1
  463. package/dist/packages/select/locales/en/messages.mjs +1 -1
  464. package/dist/packages/select/locales/fi/messages.mjs +1 -1
  465. package/dist/packages/select/locales/nb/messages.mjs +1 -1
  466. package/dist/packages/select/locales/sv/messages.mjs +1 -1
  467. package/dist/packages/select/react.d.ts +11 -5
  468. package/dist/packages/select/react.js +16 -11
  469. package/dist/packages/select/select.a11y.test.d.ts +1 -1
  470. package/dist/packages/select/select.a11y.test.js +98 -91
  471. package/dist/packages/select/select.d.ts +18 -13
  472. package/dist/packages/select/select.hydration.test.d.ts +1 -1
  473. package/dist/packages/select/select.hydration.test.js +16 -16
  474. package/dist/packages/select/select.js +432 -336
  475. package/dist/packages/select/select.js.map +4 -4
  476. package/dist/packages/select/select.react.stories.d.ts +10 -10
  477. package/dist/packages/select/select.react.stories.js +19 -14
  478. package/dist/packages/select/select.react.test.js +6 -6
  479. package/dist/packages/select/select.stories.d.ts +3 -3
  480. package/dist/packages/select/select.stories.js +51 -48
  481. package/dist/packages/select/select.test.d.ts +1 -1
  482. package/dist/packages/select/select.test.js +227 -178
  483. package/dist/packages/select/styles.js +2 -2
  484. package/dist/packages/slider/index.d.ts +2 -2
  485. package/dist/packages/slider/index.js +2 -2
  486. package/dist/packages/slider/locales/da/messages.mjs +1 -1
  487. package/dist/packages/slider/locales/en/messages.mjs +1 -1
  488. package/dist/packages/slider/locales/fi/messages.mjs +1 -1
  489. package/dist/packages/slider/locales/nb/messages.mjs +1 -1
  490. package/dist/packages/slider/locales/sv/messages.mjs +1 -1
  491. package/dist/packages/slider/react.d.ts +9 -4
  492. package/dist/packages/slider/react.js +14 -9
  493. package/dist/packages/slider/slider.d.ts +32 -17
  494. package/dist/packages/slider/slider.hydration.test.d.ts +1 -1
  495. package/dist/packages/slider/slider.hydration.test.js +39 -20
  496. package/dist/packages/slider/slider.js +523 -466
  497. package/dist/packages/slider/slider.js.map +4 -4
  498. package/dist/packages/slider/slider.react.stories.d.ts +4 -4
  499. package/dist/packages/slider/slider.react.stories.js +31 -34
  500. package/dist/packages/slider/slider.react.test.js +6 -6
  501. package/dist/packages/slider/slider.stories.d.ts +9 -7
  502. package/dist/packages/slider/slider.stories.js +369 -340
  503. package/dist/packages/slider/slider.test.d.ts +5 -5
  504. package/dist/packages/slider/slider.test.js +476 -336
  505. package/dist/packages/slider/styles/w-slider.styles.js +166 -148
  506. package/dist/packages/slider/styles.js +2 -2
  507. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.d.ts +1 -1
  508. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.js +1 -1
  509. package/dist/packages/slider-thumb/react.d.ts +16 -5
  510. package/dist/packages/slider-thumb/react.js +16 -9
  511. package/dist/packages/slider-thumb/slider-thumb.d.ts +22 -17
  512. package/dist/packages/slider-thumb/slider-thumb.hydration.test.d.ts +1 -1
  513. package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +26 -17
  514. package/dist/packages/slider-thumb/slider-thumb.js +549 -552
  515. package/dist/packages/slider-thumb/slider-thumb.js.map +4 -4
  516. package/dist/packages/slider-thumb/slider-thumb.react.test.js +9 -5
  517. package/dist/packages/slider-thumb/styles/w-slider-thumb.styles.js +189 -188
  518. package/dist/packages/slider-thumb/styles.d.ts +1 -0
  519. package/dist/packages/slider-thumb/styles.js +2 -0
  520. package/dist/packages/snackbar/locales/da/messages.d.mts +1 -0
  521. package/dist/packages/snackbar/locales/da/messages.mjs +1 -0
  522. package/dist/packages/snackbar/locales/en/messages.d.mts +1 -0
  523. package/dist/packages/snackbar/locales/en/messages.mjs +1 -0
  524. package/dist/packages/snackbar/locales/fi/messages.d.mts +1 -0
  525. package/dist/packages/snackbar/locales/fi/messages.mjs +1 -0
  526. package/dist/packages/snackbar/locales/nb/messages.d.mts +1 -0
  527. package/dist/packages/snackbar/locales/nb/messages.mjs +1 -0
  528. package/dist/packages/snackbar/locales/sv/messages.d.mts +1 -0
  529. package/dist/packages/snackbar/locales/sv/messages.mjs +1 -0
  530. package/dist/packages/snackbar/react.d.ts +41 -0
  531. package/dist/packages/snackbar/react.js +50 -0
  532. package/dist/packages/snackbar/snackbar.d.ts +134 -0
  533. package/dist/packages/snackbar/snackbar.hydration.test.d.ts +1 -0
  534. package/dist/packages/snackbar/snackbar.hydration.test.js +13 -0
  535. package/dist/packages/snackbar/snackbar.js +2665 -0
  536. package/dist/packages/snackbar/snackbar.js.map +7 -0
  537. package/dist/packages/snackbar/snackbar.react.stories.d.ts +12 -0
  538. package/dist/packages/snackbar/snackbar.react.stories.js +160 -0
  539. package/dist/packages/snackbar/snackbar.stories.d.ts +20 -0
  540. package/dist/packages/snackbar/snackbar.stories.js +363 -0
  541. package/dist/packages/snackbar/snackbar.test.d.ts +4 -0
  542. package/dist/packages/snackbar/snackbar.test.js +17 -0
  543. package/dist/packages/snackbar/styles.d.ts +1 -0
  544. package/dist/packages/snackbar/styles.js +35 -0
  545. package/dist/packages/snackbar-item/react.d.ts +12 -0
  546. package/dist/packages/snackbar-item/react.js +23 -0
  547. package/dist/packages/snackbar-item/snackbar-item.d.ts +71 -0
  548. package/dist/packages/snackbar-item/snackbar-item.js +2620 -0
  549. package/dist/packages/snackbar-item/snackbar-item.js.map +7 -0
  550. package/dist/packages/snackbar-item/snackbar-item.react.test.d.ts +1 -0
  551. package/dist/packages/snackbar-item/snackbar-item.react.test.js +5 -0
  552. package/dist/packages/snackbar-item/styles.d.ts +1 -0
  553. package/dist/packages/snackbar-item/styles.js +133 -0
  554. package/dist/packages/step/react.d.ts +6 -1
  555. package/dist/packages/step/react.js +9 -4
  556. package/dist/packages/step/step.d.ts +10 -3
  557. package/dist/packages/step/step.hydration.test.d.ts +1 -1
  558. package/dist/packages/step/step.hydration.test.js +10 -10
  559. package/dist/packages/step/step.js +336 -314
  560. package/dist/packages/step/step.js.map +4 -4
  561. package/dist/packages/step/styles.d.ts +1 -0
  562. package/dist/packages/step/styles.js +2 -0
  563. package/dist/packages/step-indicator/index.d.ts +2 -2
  564. package/dist/packages/step-indicator/index.js +2 -2
  565. package/dist/packages/step-indicator/react.d.ts +7 -2
  566. package/dist/packages/step-indicator/react.js +10 -5
  567. package/dist/packages/step-indicator/step-indicator.a11y.test.d.ts +2 -2
  568. package/dist/packages/step-indicator/step-indicator.a11y.test.js +48 -46
  569. package/dist/packages/step-indicator/step-indicator.d.ts +8 -1
  570. package/dist/packages/step-indicator/step-indicator.hydration.test.d.ts +1 -1
  571. package/dist/packages/step-indicator/step-indicator.hydration.test.js +10 -10
  572. package/dist/packages/step-indicator/step-indicator.js +285 -281
  573. package/dist/packages/step-indicator/step-indicator.js.map +3 -3
  574. package/dist/packages/step-indicator/stepindicator.react.stories.d.ts +2 -2
  575. package/dist/packages/step-indicator/stepindicator.react.stories.js +3 -3
  576. package/dist/packages/step-indicator/stepindicator.stories.d.ts +3 -3
  577. package/dist/packages/step-indicator/stepindicator.stories.js +129 -129
  578. package/dist/packages/step-indicator/styles.js +2 -2
  579. package/dist/packages/styles.js +277 -275
  580. package/dist/packages/switch/react.d.ts +9 -3
  581. package/dist/packages/switch/react.js +11 -6
  582. package/dist/packages/switch/styles.js +2 -2
  583. package/dist/packages/switch/switch.a11y.test.d.ts +1 -1
  584. package/dist/packages/switch/switch.a11y.test.js +46 -38
  585. package/dist/packages/switch/switch.d.ts +10 -3
  586. package/dist/packages/switch/switch.hydration.test.d.ts +1 -1
  587. package/dist/packages/switch/switch.hydration.test.js +23 -23
  588. package/dist/packages/switch/switch.js +304 -304
  589. package/dist/packages/switch/switch.js.map +3 -3
  590. package/dist/packages/switch/switch.react.stories.d.ts +4 -4
  591. package/dist/packages/switch/switch.react.stories.js +2 -2
  592. package/dist/packages/switch/switch.stories.d.ts +2 -2
  593. package/dist/packages/switch/switch.stories.js +42 -37
  594. package/dist/packages/switch/switch.test.d.ts +1 -1
  595. package/dist/packages/switch/switch.test.js +30 -35
  596. package/dist/packages/tab/react.d.ts +12 -7
  597. package/dist/packages/tab/react.js +14 -10
  598. package/dist/packages/tab/styles.d.ts +1 -0
  599. package/dist/packages/tab/styles.js +2 -0
  600. package/dist/packages/tab/tab.d.ts +13 -6
  601. package/dist/packages/tab/tab.hydration.test.d.ts +1 -1
  602. package/dist/packages/tab/tab.hydration.test.js +18 -12
  603. package/dist/packages/tab/tab.js +309 -308
  604. package/dist/packages/tab/tab.js.map +4 -4
  605. package/dist/packages/tab/tab.react.test.js +5 -3
  606. package/dist/packages/tab-panel/react.d.ts +10 -2
  607. package/dist/packages/tab-panel/react.js +18 -5
  608. package/dist/packages/tab-panel/tab-panel.d.ts +6 -3
  609. package/dist/packages/tab-panel/tab-panel.hydration.test.d.ts +1 -1
  610. package/dist/packages/tab-panel/tab-panel.hydration.test.js +13 -10
  611. package/dist/packages/tab-panel/tab-panel.js +293 -291
  612. package/dist/packages/tab-panel/tab-panel.js.map +3 -3
  613. package/dist/packages/tabs/index.d.ts +4 -4
  614. package/dist/packages/tabs/index.js +3 -3
  615. package/dist/packages/tabs/react.d.ts +31 -8
  616. package/dist/packages/tabs/react.js +34 -9
  617. package/dist/packages/tabs/styles.js +2 -2
  618. package/dist/packages/tabs/tabs.a11y.test.d.ts +3 -3
  619. package/dist/packages/tabs/tabs.a11y.test.js +188 -169
  620. package/dist/packages/tabs/tabs.d.ts +9 -6
  621. package/dist/packages/tabs/tabs.hydration.test.d.ts +3 -1
  622. package/dist/packages/tabs/tabs.hydration.test.js +22 -8
  623. package/dist/packages/tabs/tabs.js +293 -286
  624. package/dist/packages/tabs/tabs.js.map +3 -3
  625. package/dist/packages/tabs/tabs.react.stories.d.ts +12 -10
  626. package/dist/packages/tabs/tabs.react.stories.js +28 -28
  627. package/dist/packages/tabs/tabs.stories.d.ts +4 -4
  628. package/dist/packages/tabs/tabs.stories.js +101 -95
  629. package/dist/packages/tabs/tabs.test.d.ts +3 -3
  630. package/dist/packages/tabs/tabs.test.js +136 -122
  631. package/dist/packages/textarea/input-styles.d.ts +11 -0
  632. package/dist/packages/textarea/input-styles.js +88 -0
  633. package/dist/packages/textarea/locales/da/messages.mjs +1 -1
  634. package/dist/packages/textarea/locales/en/messages.mjs +1 -1
  635. package/dist/packages/textarea/locales/fi/messages.mjs +1 -1
  636. package/dist/packages/textarea/locales/nb/messages.mjs +1 -1
  637. package/dist/packages/textarea/locales/sv/messages.mjs +1 -1
  638. package/dist/packages/textarea/react.d.ts +17 -11
  639. package/dist/packages/textarea/react.js +22 -17
  640. package/dist/packages/textarea/styles.js +2 -2
  641. package/dist/packages/textarea/textarea.a11y.test.d.ts +1 -1
  642. package/dist/packages/textarea/textarea.a11y.test.js +90 -58
  643. package/dist/packages/textarea/textarea.d.ts +20 -20
  644. package/dist/packages/textarea/textarea.hydration.test.d.ts +1 -1
  645. package/dist/packages/textarea/textarea.hydration.test.js +19 -19
  646. package/dist/packages/textarea/textarea.js +385 -304
  647. package/dist/packages/textarea/textarea.js.map +4 -4
  648. package/dist/packages/textarea/textarea.react.stories.d.ts +38 -21
  649. package/dist/packages/textarea/textarea.react.stories.js +30 -13
  650. package/dist/packages/textarea/textarea.react.test.js +7 -7
  651. package/dist/packages/textarea/textarea.stories.d.ts +3 -3
  652. package/dist/packages/textarea/textarea.stories.js +44 -42
  653. package/dist/packages/textarea/textarea.test.d.ts +1 -1
  654. package/dist/packages/textarea/textarea.test.js +197 -88
  655. package/dist/packages/textfield/input-styles.d.ts +11 -0
  656. package/dist/packages/textfield/input-styles.js +88 -0
  657. package/dist/packages/textfield/locales/da/messages.d.mts +1 -0
  658. package/dist/packages/textfield/locales/da/messages.mjs +1 -0
  659. package/dist/packages/textfield/locales/en/messages.d.mts +1 -0
  660. package/dist/packages/textfield/locales/en/messages.mjs +1 -0
  661. package/dist/packages/textfield/locales/fi/messages.d.mts +1 -0
  662. package/dist/packages/textfield/locales/fi/messages.mjs +1 -0
  663. package/dist/packages/textfield/locales/nb/messages.d.mts +1 -0
  664. package/dist/packages/textfield/locales/nb/messages.mjs +1 -0
  665. package/dist/packages/textfield/locales/sv/messages.d.mts +1 -0
  666. package/dist/packages/textfield/locales/sv/messages.mjs +1 -0
  667. package/dist/packages/textfield/react.d.ts +17 -11
  668. package/dist/packages/textfield/react.js +22 -17
  669. package/dist/packages/textfield/react.test.d.ts +1 -0
  670. package/dist/packages/textfield/react.test.js +20 -0
  671. package/dist/packages/textfield/styles/w-textfield.styles.js +60 -58
  672. package/dist/packages/textfield/styles.js +2 -2
  673. package/dist/packages/textfield/textfield.d.ts +38 -26
  674. package/dist/packages/textfield/textfield.hydration.test.d.ts +1 -1
  675. package/dist/packages/textfield/textfield.hydration.test.js +19 -19
  676. package/dist/packages/textfield/textfield.js +468 -373
  677. package/dist/packages/textfield/textfield.js.map +4 -4
  678. package/dist/packages/textfield/textfield.react.stories.d.ts +51 -21
  679. package/dist/packages/textfield/textfield.react.stories.js +63 -31
  680. package/dist/packages/textfield/textfield.react.test.js +7 -7
  681. package/dist/packages/textfield/textfield.stories.d.ts +4 -4
  682. package/dist/packages/textfield/textfield.stories.js +107 -89
  683. package/dist/packages/textfield/textfield.test.d.ts +2 -2
  684. package/dist/packages/textfield/textfield.test.js +174 -71
  685. package/dist/packages/toast/api.d.ts +2 -2
  686. package/dist/packages/toast/api.js +3 -3
  687. package/dist/packages/toast/index.d.ts +5 -5
  688. package/dist/packages/toast/index.js +5 -5
  689. package/dist/packages/toast/styles.js +2 -2
  690. package/dist/packages/toast/toast.d.ts +10 -5
  691. package/dist/packages/toast/toast.js +349 -320
  692. package/dist/packages/toast/toast.js.map +4 -4
  693. package/dist/packages/toast/toast.stories.d.ts +4 -4
  694. package/dist/packages/toast/toast.stories.js +37 -16
  695. package/dist/packages/toast/toast.test.d.ts +1 -1
  696. package/dist/packages/toast/toast.test.js +48 -31
  697. package/dist/packages/toast/types.d.ts +1 -1
  698. package/dist/packages/toast-container/styles.d.ts +1 -0
  699. package/dist/packages/toast-container/styles.js +2 -0
  700. package/dist/packages/toast-container/toast-container.d.ts +8 -3
  701. package/dist/packages/toast-container/toast-container.js +295 -294
  702. package/dist/packages/toast-container/toast-container.js.map +4 -4
  703. package/dist/packages/types.d.ts +16 -0
  704. package/dist/packages/types.js +1 -0
  705. package/dist/packages/utils/element-collapse.d.ts +12 -0
  706. package/dist/packages/utils/element-collapse.js +102 -0
  707. package/dist/packages/utils/expand-transition.d.ts +1 -1
  708. package/dist/packages/utils/expand-transition.js +12 -10
  709. package/dist/packages/utils/unstyled-heading.d.ts +1 -1
  710. package/dist/packages/utils/unstyled-heading.js +4 -4
  711. package/dist/packages/utils/window-exists.js +1 -1
  712. package/dist/packages/utils.js +2 -2
  713. package/dist/setup-tests.d.ts +3 -3
  714. package/dist/setup-tests.js +16 -13
  715. package/dist/tests/react-hydration.js +29 -30
  716. package/dist/tests/react-ssr-attributes.d.ts +1 -1
  717. package/dist/tests/react-ssr-attributes.js +4 -4
  718. package/dist/web-types.json +458 -256
  719. package/eik/index.js +20 -2460
  720. package/package.json +21 -129
  721. package/dist/packages/slider/Slider.d.ts +0 -2
  722. package/dist/packages/slider/Slider.js +0 -8
  723. package/dist/packages/slider-thumb/SliderThumb.d.ts +0 -2
  724. package/dist/packages/slider-thumb/SliderThumb.js +0 -8
package/dist/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
 
@@ -807,9 +960,6 @@ Use this to show an externally managed validation error. Required validation als
807
960
  invalid?: WarpCheckbox["invalid"];
808
961
  /** */
809
962
  input?: WarpCheckbox["input"];
810
-
811
- /** */
812
- onchange?: (e: Event) => void;
813
963
  };
814
964
 
815
965
  export type WarpCheckboxSolidJsProps = {
@@ -843,8 +993,6 @@ Use this to show an externally managed validation error. Required validation als
843
993
  "prop:invalid"?: WarpCheckbox["invalid"];
844
994
  /** */
845
995
  "prop:input"?: WarpCheckbox["input"];
846
- /** */
847
- "on:change"?: (e: Event) => void;
848
996
 
849
997
  /** Set the innerHTML of the element */
850
998
  innerHTML?: string;
@@ -1304,14 +1452,17 @@ export type WarpExpandableSolidJsProps = {
1304
1452
  textContent?: string | number;
1305
1453
  };
1306
1454
 
1455
+ /** `WarpModal` component event */
1456
+ export type WarpModalElementEvent<E = Event> = TypedEvent<WarpModal, E>;
1457
+
1307
1458
  export type WarpModalProps = {
1308
1459
  /** Controls if the modal should show or hide.
1309
1460
 
1310
1461
  You can also call the `open()` and `close()` methods. */
1311
1462
  show?: WarpModal["show"];
1312
- /** */
1463
+ /** @deprecated This ID has no effect */
1313
1464
  "content-id"?: WarpModal["contentId"];
1314
- /** */
1465
+ /** @deprecated This ID has no effect */
1315
1466
  contentId?: WarpModal["contentId"];
1316
1467
  /** Ignores clicks to the backdrop when set */
1317
1468
  "ignore-backdrop-clicks"?: WarpModal["ignoreBackdropClicks"];
@@ -1319,9 +1470,9 @@ You can also call the `open()` and `close()` methods. */
1319
1470
  ignoreBackdropClicks?: WarpModal["ignoreBackdropClicks"];
1320
1471
 
1321
1472
  /** */
1322
- onshown?: (e: CustomEvent) => void;
1473
+ onshown?: (e: WarpModalElementEvent) => void;
1323
1474
  /** */
1324
- onhidden?: (e: CustomEvent) => void;
1475
+ onhidden?: (e: WarpModalElementEvent) => void;
1325
1476
  };
1326
1477
 
1327
1478
  export type WarpModalSolidJsProps = {
@@ -1329,18 +1480,18 @@ export type WarpModalSolidJsProps = {
1329
1480
 
1330
1481
  You can also call the `open()` and `close()` methods. */
1331
1482
  "prop:show"?: WarpModal["show"];
1332
- /** */
1483
+ /** @deprecated This ID has no effect */
1333
1484
  "attr:content-id"?: WarpModal["contentId"];
1334
- /** */
1485
+ /** @deprecated This ID has no effect */
1335
1486
  "prop:contentId"?: WarpModal["contentId"];
1336
1487
  /** Ignores clicks to the backdrop when set */
1337
1488
  "bool:ignore-backdrop-clicks"?: WarpModal["ignoreBackdropClicks"];
1338
1489
  /** Ignores clicks to the backdrop when set */
1339
1490
  "prop:ignoreBackdropClicks"?: WarpModal["ignoreBackdropClicks"];
1340
1491
  /** */
1341
- "on:shown"?: (e: CustomEvent) => void;
1492
+ "on:shown"?: (e: WarpModalElementEvent) => void;
1342
1493
  /** */
1343
- "on:hidden"?: (e: CustomEvent) => void;
1494
+ "on:hidden"?: (e: WarpModalElementEvent) => void;
1344
1495
 
1345
1496
  /** Set the innerHTML of the element */
1346
1497
  innerHTML?: string;
@@ -1357,6 +1508,12 @@ export type WarpModalFooterSolidJsProps = {
1357
1508
  textContent?: string | number;
1358
1509
  };
1359
1510
 
1511
+ /** `WarpModalHeader` component event */
1512
+ export type WarpModalHeaderElementEvent<E = Event> = TypedEvent<
1513
+ WarpModalHeader,
1514
+ E
1515
+ >;
1516
+
1360
1517
  export type WarpModalHeaderProps = {
1361
1518
  /** A short but descriptive title for the modal */
1362
1519
  title?: WarpModalHeader["title"];
@@ -1368,7 +1525,7 @@ export type WarpModalHeaderProps = {
1368
1525
  noClose?: WarpModalHeader["noClose"];
1369
1526
 
1370
1527
  /** */
1371
- onbackClicked?: (e: CustomEvent) => void;
1528
+ onbackClicked?: (e: WarpModalHeaderElementEvent) => void;
1372
1529
  };
1373
1530
 
1374
1531
  export type WarpModalHeaderSolidJsProps = {
@@ -1381,7 +1538,7 @@ export type WarpModalHeaderSolidJsProps = {
1381
1538
  /** Lets you hide the close button in the header */
1382
1539
  "prop:noClose"?: WarpModalHeader["noClose"];
1383
1540
  /** */
1384
- "on:backClicked"?: (e: CustomEvent) => void;
1541
+ "on:backClicked"?: (e: WarpModalHeaderElementEvent) => void;
1385
1542
 
1386
1543
  /** Set the innerHTML of the element */
1387
1544
  innerHTML?: string;
@@ -1416,6 +1573,12 @@ export type WarpPageIndicatorSolidJsProps = {
1416
1573
  textContent?: string | number;
1417
1574
  };
1418
1575
 
1576
+ /** `WarpPagination` component event */
1577
+ export type WarpPaginationElementEvent<E = Event> = TypedEvent<
1578
+ WarpPagination,
1579
+ E
1580
+ >;
1581
+
1419
1582
  export type WarpPaginationProps = {
1420
1583
  /** The base URL used to construct page links, for example `/search?page=`.
1421
1584
 
@@ -1437,7 +1600,7 @@ The page number is appended to this URL. */
1437
1600
  visiblePages?: WarpPagination["visiblePages"];
1438
1601
 
1439
1602
  /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
1440
- "onpage-click"?: (e: CustomEvent) => void;
1603
+ "onpage-click"?: (e: WarpPaginationElementEvent) => void;
1441
1604
  };
1442
1605
 
1443
1606
  export type WarpPaginationSolidJsProps = {
@@ -1460,7 +1623,7 @@ The page number is appended to this URL. */
1460
1623
  /** The maximum number of page numbers visible. */
1461
1624
  "prop:visiblePages"?: WarpPagination["visiblePages"];
1462
1625
  /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
1463
- "on:page-click"?: (e: CustomEvent) => void;
1626
+ "on:page-click"?: (e: WarpPaginationElementEvent) => void;
1464
1627
 
1465
1628
  /** Set the innerHTML of the element */
1466
1629
  innerHTML?: string;
@@ -1468,6 +1631,9 @@ The page number is appended to this URL. */
1468
1631
  textContent?: string | number;
1469
1632
  };
1470
1633
 
1634
+ /** `WarpPill` component event */
1635
+ export type WarpPillElementEvent<E = Event> = TypedEvent<WarpPill, E>;
1636
+
1471
1637
  export type WarpPillProps = {
1472
1638
  /** Whether the pill should be removable via a close button. */
1473
1639
  "can-close"?: WarpPill["canClose"];
@@ -1493,9 +1659,9 @@ export type WarpPillProps = {
1493
1659
  closeAriaLabel?: WarpPill["closeAriaLabel"];
1494
1660
 
1495
1661
  /** Fires when the pill itself is clicked. */
1496
- "onw-pill-click"?: (e: CustomEvent) => void;
1662
+ "onw-pill-click"?: (e: WarpPillElementEvent) => void;
1497
1663
  /** Fires when the pill's close button is clicked. */
1498
- "onw-pill-close"?: (e: CustomEvent) => void;
1664
+ "onw-pill-close"?: (e: WarpPillElementEvent) => void;
1499
1665
  };
1500
1666
 
1501
1667
  export type WarpPillSolidJsProps = {
@@ -1522,9 +1688,9 @@ export type WarpPillSolidJsProps = {
1522
1688
  /** Label read by screen readers when targeting the close button. */
1523
1689
  "prop:closeAriaLabel"?: WarpPill["closeAriaLabel"];
1524
1690
  /** Fires when the pill itself is clicked. */
1525
- "on:w-pill-click"?: (e: CustomEvent) => void;
1691
+ "on:w-pill-click"?: (e: WarpPillElementEvent) => void;
1526
1692
  /** Fires when the pill's close button is clicked. */
1527
- "on:w-pill-close"?: (e: CustomEvent) => void;
1693
+ "on:w-pill-close"?: (e: WarpPillElementEvent) => void;
1528
1694
 
1529
1695
  /** Set the innerHTML of the element */
1530
1696
  innerHTML?: string;
@@ -1618,6 +1784,9 @@ If you set `required` and `invalid` the group gets a default error message, but
1618
1784
  textContent?: string | number;
1619
1785
  };
1620
1786
 
1787
+ /** `WarpSelect` component event */
1788
+ export type WarpSelectElementEvent<E = Event> = TypedEvent<WarpSelect, E>;
1789
+
1621
1790
  export type WarpSelectProps = {
1622
1791
  /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
1623
1792
  "auto-focus"?: WarpSelect["autoFocus"];
@@ -1659,7 +1828,7 @@ Paired with `help-text` to provide feedback about the error. */
1659
1828
  value?: WarpSelect["value"];
1660
1829
 
1661
1830
  /** */
1662
- onchange?: (e: CustomEvent) => void;
1831
+ onchange?: (e: WarpSelectElementEvent) => void;
1663
1832
  };
1664
1833
 
1665
1834
  export type WarpSelectSolidJsProps = {
@@ -1702,7 +1871,7 @@ Paired with `help-text` to provide feedback about the error. */
1702
1871
  /** Lets you set the current value. */
1703
1872
  "prop:value"?: WarpSelect["value"];
1704
1873
  /** */
1705
- "on:change"?: (e: CustomEvent) => void;
1874
+ "on:change"?: (e: WarpSelectElementEvent) => void;
1706
1875
 
1707
1876
  /** Set the innerHTML of the element */
1708
1877
  innerHTML?: string;
@@ -1710,6 +1879,12 @@ Paired with `help-text` to provide feedback about the error. */
1710
1879
  textContent?: string | number;
1711
1880
  };
1712
1881
 
1882
+ /** `WarpSliderThumb` component event */
1883
+ export type WarpSliderThumbElementEvent<E = Event> = TypedEvent<
1884
+ WarpSliderThumb,
1885
+ E
1886
+ >;
1887
+
1713
1888
  export type WarpSliderThumbProps = {
1714
1889
  /** Label for the range input. */
1715
1890
  "aria-label"?: WarpSliderThumb["ariaLabel"];
@@ -1727,9 +1902,9 @@ export type WarpSliderThumbProps = {
1727
1902
  placeholder?: WarpSliderThumb["placeholder"];
1728
1903
 
1729
1904
  /** Internal event used by (and stopped by) `w-slider`. */
1730
- onthumbreset?: (e: CustomEvent) => void;
1905
+ onthumbreset?: (e: WarpSliderThumbElementEvent) => void;
1731
1906
  /** Internal event used by (and stopped by) `w-slider`. */
1732
- onslidervalidity?: (e: CustomEvent) => void;
1907
+ onslidervalidity?: (e: WarpSliderThumbElementEvent) => void;
1733
1908
  };
1734
1909
 
1735
1910
  export type WarpSliderThumbSolidJsProps = {
@@ -1748,9 +1923,9 @@ export type WarpSliderThumbSolidJsProps = {
1748
1923
  /** Placeholder in empty text fields */
1749
1924
  "prop:placeholder"?: WarpSliderThumb["placeholder"];
1750
1925
  /** Internal event used by (and stopped by) `w-slider`. */
1751
- "on:thumbreset"?: (e: CustomEvent) => void;
1926
+ "on:thumbreset"?: (e: WarpSliderThumbElementEvent) => void;
1752
1927
  /** Internal event used by (and stopped by) `w-slider`. */
1753
- "on:slidervalidity"?: (e: CustomEvent) => void;
1928
+ "on:slidervalidity"?: (e: WarpSliderThumbElementEvent) => void;
1754
1929
 
1755
1930
  /** Set the innerHTML of the element */
1756
1931
  innerHTML?: string;
@@ -1779,6 +1954,8 @@ If you need to display HTML, use the `label` slot instead (f. ex. `<legend class
1779
1954
  invalid?: WarpSlider["invalid"];
1780
1955
  /** Ensures a child slider thumb has a value before allowing the containing form to submit */
1781
1956
  required?: WarpSlider["required"];
1957
+ /** Whether to show the optional indicator after the label. */
1958
+ optional?: WarpSlider["optional"];
1782
1959
  /** The minimum allowed value in the range inputs */
1783
1960
  min?: WarpSlider["min"];
1784
1961
  /** The maximum allowed value in the range inputs */
@@ -1824,6 +2001,8 @@ If you need to display HTML, use the `label` slot instead (f. ex. `<legend class
1824
2001
  "prop:invalid"?: WarpSlider["invalid"];
1825
2002
  /** Ensures a child slider thumb has a value before allowing the containing form to submit */
1826
2003
  "prop:required"?: WarpSlider["required"];
2004
+ /** Whether to show the optional indicator after the label. */
2005
+ "prop:optional"?: WarpSlider["optional"];
1827
2006
  /** The minimum allowed value in the range inputs */
1828
2007
  "prop:min"?: WarpSlider["min"];
1829
2008
  /** The maximum allowed value in the range inputs */
@@ -1853,6 +2032,38 @@ Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the
1853
2032
  textContent?: string | number;
1854
2033
  };
1855
2034
 
2035
+ export type WarpSnackbarItemProps = {
2036
+ /** The placement of the action and close buttons. */
2037
+ "action-placement"?: WarpSnackbarItem["actionPlacement"];
2038
+ /** The placement of the action and close buttons. */
2039
+ actionPlacement?: WarpSnackbarItem["actionPlacement"];
2040
+ /** How long the message should stay in the document before removing itself. */
2041
+ duration?: WarpSnackbarItem["duration"];
2042
+ };
2043
+
2044
+ export type WarpSnackbarItemSolidJsProps = {
2045
+ /** The placement of the action and close buttons. */
2046
+ "attr:action-placement"?: WarpSnackbarItem["actionPlacement"];
2047
+ /** The placement of the action and close buttons. */
2048
+ "prop:actionPlacement"?: WarpSnackbarItem["actionPlacement"];
2049
+ /** How long the message should stay in the document before removing itself. */
2050
+ "prop:duration"?: WarpSnackbarItem["duration"];
2051
+
2052
+ /** Set the innerHTML of the element */
2053
+ innerHTML?: string;
2054
+ /** Set the textContent of the element */
2055
+ textContent?: string | number;
2056
+ };
2057
+
2058
+ export type WarpSnackbarProps = {};
2059
+
2060
+ export type WarpSnackbarSolidJsProps = {
2061
+ /** Set the innerHTML of the element */
2062
+ innerHTML?: string;
2063
+ /** Set the textContent of the element */
2064
+ textContent?: string | number;
2065
+ };
2066
+
1856
2067
  export type WarpStepProps = {
1857
2068
  /** Whether this step is active.
1858
2069
 
@@ -1899,6 +2110,12 @@ export type WarpStepIndicatorSolidJsProps = {
1899
2110
  textContent?: string | number;
1900
2111
  };
1901
2112
 
2113
+ /** `WarpSwitch` component event */
2114
+ export type WarpSwitchElementEvent<E = Event> = TypedEvent<WarpSwitch, E>;
2115
+ /** `change` event type */
2116
+ export type WarpSwitchChangeElementEvent =
2117
+ WarpSwitchElementEvent<WarpSwitchChangeEvent>;
2118
+
1902
2119
  export type WarpSwitchProps = {
1903
2120
  /** Name used when submitting an HTML form. */
1904
2121
  name?: WarpSwitch["name"];
@@ -1912,7 +2129,7 @@ The component reports `null` as the value in the `change` event when `value` is
1912
2129
  disabled?: WarpSwitch["disabled"];
1913
2130
 
1914
2131
  /** Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`. */
1915
- onchange?: (e: WarpSwitchChangeEvent) => void;
2132
+ onchange?: (e: WarpSwitchChangeElementEvent) => void;
1916
2133
  };
1917
2134
 
1918
2135
  export type WarpSwitchSolidJsProps = {
@@ -1927,7 +2144,7 @@ The component reports `null` as the value in the `change` event when `value` is
1927
2144
  /** Whether the switch is disabled. */
1928
2145
  "prop:disabled"?: WarpSwitch["disabled"];
1929
2146
  /** Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`. */
1930
- "on:change"?: (e: WarpSwitchChangeEvent) => void;
2147
+ "on:change"?: (e: WarpSwitchChangeElementEvent) => void;
1931
2148
 
1932
2149
  /** Set the innerHTML of the element */
1933
2150
  innerHTML?: string;
@@ -1969,19 +2186,25 @@ export type WarpTabPanelSolidJsProps = {
1969
2186
  textContent?: string | number;
1970
2187
  };
1971
2188
 
2189
+ /** `WarpTabs` component event */
2190
+ export type WarpTabsElementEvent<E = Event> = TypedEvent<WarpTabs, E>;
2191
+ /** `change` event type */
2192
+ export type WarpTabsChangeElementEvent =
2193
+ WarpTabsElementEvent<WarpTabsChangeEvent>;
2194
+
1972
2195
  export type WarpTabsProps = {
1973
2196
  /** The `id` of the panel that should be active. */
1974
2197
  active?: WarpTabs["active"];
1975
2198
 
1976
- /** Includes `details.panelId` with the now active tab's ID */
1977
- onchange?: (e: WarpTabsChangeEvent) => void;
2199
+ /** Includes `details.panelId` with the now active tab panel's ID */
2200
+ onchange?: (e: WarpTabsChangeElementEvent) => void;
1978
2201
  };
1979
2202
 
1980
2203
  export type WarpTabsSolidJsProps = {
1981
2204
  /** The `id` of the panel that should be active. */
1982
2205
  "prop:active"?: WarpTabs["active"];
1983
- /** Includes `details.panelId` with the now active tab's ID */
1984
- "on:change"?: (e: WarpTabsChangeEvent) => void;
2206
+ /** Includes `details.panelId` with the now active tab panel's ID */
2207
+ "on:change"?: (e: WarpTabsChangeElementEvent) => void;
1985
2208
 
1986
2209
  /** Set the innerHTML of the element */
1987
2210
  innerHTML?: string;
@@ -2089,24 +2312,11 @@ Placeholder text should not be used as a substitute for labeling the element wit
2089
2312
  };
2090
2313
 
2091
2314
  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
2315
  /**
2108
2316
  * A single-line input component used for entering and editing textual or numeric data.
2109
2317
  *
2318
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
2319
+ *
2110
2320
  * ## Attributes & Properties
2111
2321
  *
2112
2322
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2120,6 +2330,7 @@ export type CustomElements = {
2120
2330
  * - `label`: Either a `label` or an `aria-label` must be provided.
2121
2331
  * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
2122
2332
  * or on its own to show a help text.
2333
+ * - `optional`: Whether to show the optional indicator after the label.
2123
2334
  * - `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
2335
  * - `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
2336
  * - `min`: Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).
@@ -2167,10 +2378,25 @@ export type CustomElements = {
2167
2378
  WarpTextFieldProps & BaseProps<WarpTextField> & BaseEvents
2168
2379
  >;
2169
2380
 
2381
+ /**
2382
+ * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
2383
+ *
2384
+ * ## Attributes & Properties
2385
+ *
2386
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
2387
+ *
2388
+ * - `name`: Icon filename (without .svg)
2389
+ * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
2390
+ * - `locale`: Locale used for `<title>` text.
2391
+ *
2392
+ * Reads the `lang` attribute from `<html>`, falls back to 'en'.
2393
+ */
2394
+ "w-icon": Partial<WarpIconProps & BaseProps<WarpIcon> & BaseEvents>;
2395
+
2170
2396
  /**
2171
2397
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
2172
2398
  *
2173
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
2399
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)
2174
2400
  *
2175
2401
  * ## Attributes & Properties
2176
2402
  *
@@ -2190,9 +2416,7 @@ export type CustomElements = {
2190
2416
  /**
2191
2417
  * Alert is an inline component used for displaying different types of messages.
2192
2418
  *
2193
- * For accessibility reasons, alert should appear close to the element that triggered it.
2194
- *
2195
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
2419
+ * [Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)
2196
2420
  *
2197
2421
  * ## Attributes & Properties
2198
2422
  *
@@ -2205,9 +2429,9 @@ export type CustomElements = {
2205
2429
  "w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
2206
2430
 
2207
2431
  /**
2208
- * Buttons are used to perform actions, with different visuals for different needs.
2432
+ * Link component to use when creating links that look like buttons.
2209
2433
  *
2210
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
2434
+ * [Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)
2211
2435
  *
2212
2436
  * ## Attributes & Properties
2213
2437
  *
@@ -2230,9 +2454,10 @@ export type CustomElements = {
2230
2454
 
2231
2455
  /**
2232
2456
  * Performs an action or renders a link with button styling.
2457
+ *
2233
2458
  * Use button variants to match action priority, risk, and context.
2234
2459
  *
2235
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
2460
+ * [Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)
2236
2461
  *
2237
2462
  * ## Attributes & Properties
2238
2463
  *
@@ -2280,11 +2505,13 @@ export type CustomElements = {
2280
2505
  "w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & BaseEvents>;
2281
2506
 
2282
2507
  /**
2508
+ * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
2509
+ *
2283
2510
  * Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.
2284
2511
  *
2285
2512
  * The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs.
2286
2513
  *
2287
- * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
2514
+ * [Warp component reference](https://warp-ds.github.io/docs/components/tooltip/frameworks/elements)
2288
2515
  *
2289
2516
  * ## Attributes & Properties
2290
2517
  *
@@ -2359,7 +2586,7 @@ export type CustomElements = {
2359
2586
  /**
2360
2587
  * Box is a layout component used for separating content areas on a page.
2361
2588
  *
2362
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)
2589
+ * [Warp component reference](https://warp-ds.github.io/docs/components/box/frameworks/elements)
2363
2590
  *
2364
2591
  * ## Attributes & Properties
2365
2592
  *
@@ -2380,9 +2607,10 @@ export type CustomElements = {
2380
2607
 
2381
2608
  /**
2382
2609
  * Shows the navigation structure for the current page.
2610
+ *
2383
2611
  * Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.
2384
2612
  *
2385
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
2613
+ * [Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
2386
2614
  *
2387
2615
  * ## Attributes & Properties
2388
2616
  *
@@ -2395,10 +2623,35 @@ export type CustomElements = {
2395
2623
  WarpBreadcrumbsProps & BaseProps<WarpBreadcrumbs> & BaseEvents
2396
2624
  >;
2397
2625
 
2626
+ /**
2627
+ * Represents one item in a `w-breadcrumbs` trail.
2628
+ * 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.
2629
+ *
2630
+ * [Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
2631
+ *
2632
+ * ## Attributes & Properties
2633
+ *
2634
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
2635
+ *
2636
+ * - `current-page`/`currentPage`: Marks this item as the current page.
2637
+ * Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
2638
+ * - `href`: URL for linked breadcrumb items.
2639
+ * When omitted, the item renders as non-focusable text.
2640
+ *
2641
+ * ## Slots
2642
+ *
2643
+ * Areas where markup can be added to the component.
2644
+ *
2645
+ * - `(default)`: The breadcrumb label content.
2646
+ */
2647
+ "w-breadcrumb-item": Partial<
2648
+ WarpBreadcrumbItemProps & BaseProps<WarpBreadcrumbItem> & BaseEvents
2649
+ >;
2650
+
2398
2651
  /**
2399
2652
  * Card is a layout component used for separating content areas on a page.
2400
2653
  *
2401
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
2654
+ * [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
2402
2655
  *
2403
2656
  * ## Attributes & Properties
2404
2657
  *
@@ -2424,7 +2677,11 @@ export type CustomElements = {
2424
2677
  "w-card": Partial<WarpCardProps & BaseProps<WarpCard> & BaseEvents>;
2425
2678
 
2426
2679
  /**
2680
+ * Checkboxes allow users to select one or more options from a number of choices.
2681
+ *
2682
+ * Wrap individual checkboxes in a checkbox group.
2427
2683
  *
2684
+ * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
2428
2685
  *
2429
2686
  * ## Attributes & Properties
2430
2687
  *
@@ -2456,12 +2713,6 @@ export type CustomElements = {
2456
2713
  * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
2457
2714
  * - `validity`: Returns the validity state of the checkbox (property only) (readonly)
2458
2715
  *
2459
- * ## Events
2460
- *
2461
- * Events that will be emitted by the component.
2462
- *
2463
- * - `change`: undefined
2464
- *
2465
2716
  * ## Methods
2466
2717
  *
2467
2718
  * Methods that can be called to access component functionality.
@@ -2478,7 +2729,11 @@ export type CustomElements = {
2478
2729
  >;
2479
2730
 
2480
2731
  /**
2732
+ * Checkboxes allow users to select one or more options from a number of choices.
2733
+ *
2734
+ * Wrap individual checkboxes in a checkbox group.
2481
2735
  *
2736
+ * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
2482
2737
  *
2483
2738
  * ## Attributes & Properties
2484
2739
  *
@@ -2518,7 +2773,7 @@ export type CustomElements = {
2518
2773
  /**
2519
2774
  * A combobox element for text input with selectable options.
2520
2775
  *
2521
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
2776
+ * [Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)
2522
2777
  *
2523
2778
  * ## Attributes & Properties
2524
2779
  *
@@ -2581,11 +2836,9 @@ export type CustomElements = {
2581
2836
  >;
2582
2837
 
2583
2838
  /**
2584
- * An input for dates.
2839
+ * A date picker allows the user to select a specific calendar date.
2585
2840
  *
2586
- * Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
2587
- *
2588
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
2841
+ * [Warp component reference](https://warp-ds.github.io/docs/components/date-picker/frameworks/elements)
2589
2842
  *
2590
2843
  * ## Attributes & Properties
2591
2844
  *
@@ -2645,6 +2898,8 @@ export type CustomElements = {
2645
2898
  /**
2646
2899
  * Expandable is a layout component used for creating expandable content areas on a page.
2647
2900
  *
2901
+ * [Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)
2902
+ *
2648
2903
  * ## Attributes & Properties
2649
2904
  *
2650
2905
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2674,6 +2929,8 @@ export type CustomElements = {
2674
2929
  /**
2675
2930
  * Modals (or dialogs) display important information that users need to acknowledge.
2676
2931
  *
2932
+ * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
2933
+ *
2677
2934
  * ## Attributes & Properties
2678
2935
  *
2679
2936
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2705,11 +2962,47 @@ export type CustomElements = {
2705
2962
  *
2706
2963
  * - `open() => void`: undefined
2707
2964
  * - `close() => void`: undefined
2965
+ *
2966
+ * ## CSS Custom Properties
2967
+ *
2968
+ * CSS variables available for styling the component.
2969
+ *
2970
+ * - `--w-c-modal-backdrop-color`: undefined (default: `undefined`)
2971
+ * - `--w-c-modal-bg`: undefined (default: `undefined`)
2972
+ * - `--w-c-modal-box-shadow`: undefined (default: `undefined`)
2973
+ * - `--w-c-modal-color`: undefined (default: `undefined`)
2974
+ * - `--w-c-modal-height`: undefined (default: `undefined`)
2975
+ * - `--w-c-modal-max-height`: undefined (default: `undefined`)
2976
+ * - `--w-c-modal-min-height`: undefined (default: `undefined`)
2977
+ * - `--w-c-modal-translate-distance`: undefined (default: `undefined`)
2978
+ * - `--w-c-modal-width`: undefined (default: `undefined`)
2979
+ *
2980
+ * ## CSS Parts
2981
+ *
2982
+ * Custom selectors for styling elements within the component.
2983
+ *
2984
+ * - `dialog`: the root element inside the component (`<dialog>` element).
2985
+ * - `wrapper`: container for all elements, direct child of `<dialog>`.
2986
+ * - `content`: the container for the `content` slot items (children).
2708
2987
  */
2709
2988
  "w-modal": Partial<WarpModalProps & BaseProps<WarpModal> & BaseEvents>;
2710
2989
 
2711
2990
  /**
2712
2991
  * The footer section of a modal, typically where you place actions.
2992
+ *
2993
+ * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
2994
+ *
2995
+ * ## CSS Custom Properties
2996
+ *
2997
+ * CSS variables available for styling the component.
2998
+ *
2999
+ * - `--w-c-modal-footer-gap`: adjusts the flex gap between actions in the footer. (default: `undefined`)
3000
+ *
3001
+ * ## CSS Parts
3002
+ *
3003
+ * Custom selectors for styling elements within the component.
3004
+ *
3005
+ * - `footer`: the container for slotted items (children).
2713
3006
  */
2714
3007
  "w-modal-footer": Partial<
2715
3008
  WarpModalFooterProps & BaseProps<WarpModalFooter> & BaseEvents
@@ -2718,6 +3011,8 @@ export type CustomElements = {
2718
3011
  /**
2719
3012
  * The header section of a modal, typically where you place the title and a close button.
2720
3013
  *
3014
+ * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
3015
+ *
2721
3016
  * ## Attributes & Properties
2722
3017
  *
2723
3018
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2737,6 +3032,24 @@ export type CustomElements = {
2737
3032
  * Areas where markup can be added to the component.
2738
3033
  *
2739
3034
  * - `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.
3035
+ *
3036
+ * ## CSS Custom Properties
3037
+ *
3038
+ * CSS variables available for styling the component.
3039
+ *
3040
+ * - `--w-c-modal-header-font-size`: undefined (default: `undefined`)
3041
+ * - `--w-c-modal-header-line-height`: undefined (default: `undefined`)
3042
+ * - `--w-c-modal-header-margin-bottom`: undefined (default: `undefined`)
3043
+ *
3044
+ * ## CSS Parts
3045
+ *
3046
+ * Custom selectors for styling elements within the component.
3047
+ *
3048
+ * - `header`: the root element inside the component.
3049
+ * - `top`: the container for the image (`top` slot).
3050
+ * - `back`: the back button, if visible.
3051
+ * - `title`: the title element.
3052
+ * - `close`: the close button, if visible.
2740
3053
  */
2741
3054
  "w-modal-header": Partial<
2742
3055
  WarpModalHeaderProps & BaseProps<WarpModalHeader> & BaseEvents
@@ -2747,6 +3060,8 @@ export type CustomElements = {
2747
3060
  *
2748
3061
  * One dot is highlighted to indicate the currently selected page.
2749
3062
  *
3063
+ * [Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)
3064
+ *
2750
3065
  * ## Attributes & Properties
2751
3066
  *
2752
3067
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2761,6 +3076,8 @@ export type CustomElements = {
2761
3076
  /**
2762
3077
  * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
2763
3078
  *
3079
+ * [Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)
3080
+ *
2764
3081
  * ## Attributes & Properties
2765
3082
  *
2766
3083
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2785,6 +3102,8 @@ export type CustomElements = {
2785
3102
  /**
2786
3103
  * Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.
2787
3104
  *
3105
+ * [Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)
3106
+ *
2788
3107
  * ## Attributes & Properties
2789
3108
  *
2790
3109
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2806,7 +3125,11 @@ export type CustomElements = {
2806
3125
  "w-pill": Partial<WarpPillProps & BaseProps<WarpPill> & BaseEvents>;
2807
3126
 
2808
3127
  /**
3128
+ * Radios allow users to select a single option from a list of choices.
3129
+ *
3130
+ * Wrap individual radio components in a radio group.
2809
3131
  *
3132
+ * [Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)
2810
3133
  *
2811
3134
  * ## Attributes & Properties
2812
3135
  *
@@ -2824,7 +3147,9 @@ export type CustomElements = {
2824
3147
  /**
2825
3148
  * Radios allow users to select a single option from a list of choices.
2826
3149
  *
2827
- * Use with `w-radio`.
3150
+ * Wrap individual radio components in a radio group.
3151
+ *
3152
+ * [Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)
2828
3153
  *
2829
3154
  * ## Attributes & Properties
2830
3155
  *
@@ -2854,6 +3179,8 @@ export type CustomElements = {
2854
3179
  /**
2855
3180
  * A dropdown component for selecting a single value.
2856
3181
  *
3182
+ * [Warp component reference](https://warp-ds.github.io/docs/components/select/frameworks/elements)
3183
+ *
2857
3184
  * ## Attributes & Properties
2858
3185
  *
2859
3186
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2918,6 +3245,8 @@ export type CustomElements = {
2918
3245
  /**
2919
3246
  * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
2920
3247
  *
3248
+ * [Warp component reference](https://warp-ds.github.io/docs/components/slider/frameworks/elements)
3249
+ *
2921
3250
  * ## Attributes & Properties
2922
3251
  *
2923
3252
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2931,6 +3260,7 @@ export type CustomElements = {
2931
3260
  * - `help-text`/`helpText`: Additional description to show below the fieldset
2932
3261
  * - `invalid`: Sets the form fields and fieldset in an invalid state
2933
3262
  * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit
3263
+ * - `optional`: Whether to show the optional indicator after the label.
2934
3264
  * - `min`: The minimum allowed value in the range inputs
2935
3265
  * - `max`: The maximum allowed value in the range inputs
2936
3266
  * - `markers`: Pass a value similar to step to create visual markers at that interval
@@ -2942,6 +3272,7 @@ export type CustomElements = {
2942
3272
  *
2943
3273
  * Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. (property only)
2944
3274
  * - `labelFormatter`: Formatter for the min and max labels below the range. (property only)
3275
+ * - `_label`: undefined (property only) (readonly)
2945
3276
  *
2946
3277
  * ## Slots
2947
3278
  *
@@ -2956,7 +3287,119 @@ export type CustomElements = {
2956
3287
  "w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
2957
3288
 
2958
3289
  /**
2959
- * Individual step component that shows a single step in a process
3290
+ * An item to show in a `w-snackbar`.
3291
+ *
3292
+ * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
3293
+ *
3294
+ * [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
3295
+ *
3296
+ * ## Attributes & Properties
3297
+ *
3298
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
3299
+ *
3300
+ * - `action-placement`/`actionPlacement`: The placement of the action and close buttons.
3301
+ * - `duration`: How long the message should stay in the document before removing itself.
3302
+ *
3303
+ * ## Slots
3304
+ *
3305
+ * Areas where markup can be added to the component.
3306
+ *
3307
+ * - `default`: the snackbar message.
3308
+ * - `icon`: icon preceeding the message.
3309
+ * - `action`: action following the message.
3310
+ *
3311
+ * ## Methods
3312
+ *
3313
+ * Methods that can be called to access component functionality.
3314
+ *
3315
+ * - `close() => void`: Remove the snackbar item from the document.
3316
+ *
3317
+ * Moves focus to the last focused element outside of the snackbar item, if available.
3318
+ *
3319
+ * ## CSS Custom Properties
3320
+ *
3321
+ * CSS variables available for styling the component.
3322
+ *
3323
+ * - `--w-c-snackbar-item-radius`: undefined (default: `undefined`)
3324
+ * - `--w-c-snackbar-item-max-width`: undefined (default: `undefined`)
3325
+ * - `--w-c-snackbar-item-min-width`: undefined (default: `undefined`)
3326
+ * - `--w-c-snackbar-item-padding`: undefined (default: `undefined`)
3327
+ * - `--w-c-snackbar-item-bg`: undefined (default: `undefined`)
3328
+ * - `--w-c-snackbar-item-action-bg-active`: undefined (default: `undefined`)
3329
+ * - `--w-c-snackbar-item-action-bg-hover`: undefined (default: `undefined`)
3330
+ * - `--w-c-snackbar-item-color`: undefined (default: `undefined`)
3331
+ * - `--w-c-snackbar-item-action-color-active`: undefined (default: `undefined`)
3332
+ * - `--w-c-snackbar-item-action-color-hover`: undefined (default: `undefined`)
3333
+ * - `--w-c-snackbar-item-box-shadow`: undefined (default: `undefined`)
3334
+ *
3335
+ * ## CSS Parts
3336
+ *
3337
+ * Custom selectors for styling elements within the component.
3338
+ *
3339
+ * - `item`: the container wrapping the message, icon and actions.
3340
+ * - `icon`: the icon for the variant.
3341
+ * - `message`: the default slot, body of the snackbar item.
3342
+ * - `action`: close and action button.
3343
+ */
3344
+ "w-snackbar-item": Partial<
3345
+ WarpSnackbarItemProps & BaseProps<WarpSnackbarItem> & BaseEvents
3346
+ >;
3347
+
3348
+ /**
3349
+ * A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
3350
+ *
3351
+ * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
3352
+ *
3353
+ * [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
3354
+ *
3355
+ * ## Slots
3356
+ *
3357
+ * Areas where markup can be added to the component.
3358
+ *
3359
+ * - `default`: `w-snackbar-item` gets placed inside the default slot by the `create` function.
3360
+ *
3361
+ * ## Methods
3362
+ *
3363
+ * Methods that can be called to access component functionality.
3364
+ *
3365
+ * - `create(message: string, options: CreateSnackbarOptions = {}) => void`: Creates a snackbar item and immediately adds it to the snackbar.
3366
+ *
3367
+ * By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
3368
+ *
3369
+ * If you include an `action` in the options the default `duration` is
3370
+ * set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
3371
+ *
3372
+ * A `duration` of 10 seconds or longer forces the close button to be visible.
3373
+ *
3374
+ * The default `variant` is `neutral` which does not have an icon.
3375
+ *
3376
+ * Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
3377
+ *
3378
+ * ## CSS Custom Properties
3379
+ *
3380
+ * CSS variables available for styling the component.
3381
+ *
3382
+ * - `--w-c-snackbar-container-gap`: undefined (default: `undefined`)
3383
+ * - `--w-c-snackbar-position-bottom`: undefined (default: `undefined`)
3384
+ * - `--w-c-snackbar-position-left`: undefined (default: `undefined`)
3385
+ * - `--w-c-snackbar-position-right`: undefined (default: `undefined`)
3386
+ * - `--w-c-snackbar-position-top`: undefined (default: `undefined`)
3387
+ * - `--w-c-snackbar-z-index`: undefined (default: `undefined`)
3388
+ *
3389
+ * ## CSS Parts
3390
+ *
3391
+ * Custom selectors for styling elements within the component.
3392
+ *
3393
+ * - `container`: the live region that positions messages on the screen.
3394
+ */
3395
+ "w-snackbar": Partial<
3396
+ WarpSnackbarProps & BaseProps<WarpSnackbar> & BaseEvents
3397
+ >;
3398
+
3399
+ /**
3400
+ * Individual step component that shows a single step in a process.
3401
+ *
3402
+ * [Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)
2960
3403
  *
2961
3404
  * ## Attributes & Properties
2962
3405
  *
@@ -2981,6 +3424,8 @@ export type CustomElements = {
2981
3424
  /**
2982
3425
  * Steps are used to show progress through a process or to guide users through a multi-step task.
2983
3426
  *
3427
+ * [Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)
3428
+ *
2984
3429
  * ## Attributes & Properties
2985
3430
  *
2986
3431
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -2995,6 +3440,8 @@ export type CustomElements = {
2995
3440
  /**
2996
3441
  * The Switch component allows users to toggle between two states.
2997
3442
  *
3443
+ * [Warp component reference](https://warp-ds.github.io/docs/components/switch/frameworks/elements)
3444
+ *
2998
3445
  * ## Attributes & Properties
2999
3446
  *
3000
3447
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3023,6 +3470,8 @@ export type CustomElements = {
3023
3470
  /**
3024
3471
  * Individual tab component used within w-tabs container.
3025
3472
  *
3473
+ * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
3474
+ *
3026
3475
  * ## Attributes & Properties
3027
3476
  *
3028
3477
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3034,8 +3483,11 @@ export type CustomElements = {
3034
3483
 
3035
3484
  /**
3036
3485
  * Tab panel component that holds content for individual tabs.
3486
+ *
3037
3487
  * Each tab panel should have a name that matches a corresponding tab.
3038
3488
  *
3489
+ * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
3490
+ *
3039
3491
  * ## Attributes & Properties
3040
3492
  *
3041
3493
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3049,6 +3501,8 @@ export type CustomElements = {
3049
3501
  /**
3050
3502
  * Tabs are used to organize content by grouping similar information on the same page.
3051
3503
  *
3504
+ * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
3505
+ *
3052
3506
  * ## Attributes & Properties
3053
3507
  *
3054
3508
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3059,18 +3513,14 @@ export type CustomElements = {
3059
3513
  *
3060
3514
  * Events that will be emitted by the component.
3061
3515
  *
3062
- * - `change`: Includes `details.panelId` with the now active tab's ID
3516
+ * - `change`: Includes `details.panelId` with the now active tab panel's ID
3063
3517
  */
3064
3518
  "w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & BaseEvents>;
3065
3519
 
3066
3520
  /**
3067
3521
  * A multi-line text input with built-in form validation, auto-resizing, and styling support.
3068
3522
  *
3069
- * The component automatically handles:
3070
- * - Form integration
3071
- * - Auto-resizing based on content and row constraints
3072
- * - Built-in validation with customizable error messages
3073
- * - Accessibility attributes and labeling
3523
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
3074
3524
  *
3075
3525
  * ## Attributes & Properties
3076
3526
  *
@@ -3116,27 +3566,118 @@ export type CustomElements = {
3116
3566
  >;
3117
3567
  };
3118
3568
 
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
3569
+ type ReactElementProps<T extends HTMLElement> = import("react").DOMAttributes<T> &
3570
+ import("react").AriaAttributes &
3571
+ import("react").RefAttributes<T> &
3572
+ Pick<
3573
+ import("react").HTMLAttributes<T>,
3574
+ | "className"
3575
+ | "style"
3576
+ | "suppressContentEditableWarning"
3577
+ | "suppressHydrationWarning"
3135
3578
  >;
3136
3579
 
3580
+ // Merge order matters: component props must win over React/global/base props
3581
+ // when names collide, e.g. w-attention's boolean popover prop.
3582
+ type ReactCustomElementProps<T extends HTMLElement, Props> = Omit<
3583
+ BaseProps<T> & BaseEvents,
3584
+ keyof ReactElementProps<T> | keyof Props
3585
+ > &
3586
+ Omit<ReactElementProps<T>, keyof Props> &
3587
+ Props;
3588
+
3589
+ type CustomElementInstances = {
3590
+ "w-textfield": WarpTextField;
3591
+ "w-icon": WarpIcon;
3592
+ "w-affix": WarpAffix;
3593
+ "w-alert": WarpAlert;
3594
+ "w-link": WarpLink;
3595
+ "w-button": WarpButton;
3596
+ "w-attention": WarpAttention;
3597
+ "w-badge": WarpBadge;
3598
+ "w-box": WarpBox;
3599
+ "w-breadcrumbs": WarpBreadcrumbs;
3600
+ "w-breadcrumb-item": WarpBreadcrumbItem;
3601
+ "w-card": WarpCard;
3602
+ "w-checkbox": WarpCheckbox;
3603
+ "w-checkbox-group": WarpCheckboxGroup;
3604
+ "w-combobox": WarpCombobox;
3605
+ "w-datepicker": WarpDatepicker;
3606
+ "w-expandable": WarpExpandable;
3607
+ "w-modal": WarpModal;
3608
+ "w-modal-footer": WarpModalFooter;
3609
+ "w-modal-header": WarpModalHeader;
3610
+ "w-page-indicator": WarpPageIndicator;
3611
+ "w-pagination": WarpPagination;
3612
+ "w-pill": WarpPill;
3613
+ "w-radio": WarpRadio;
3614
+ "w-radio-group": WarpRadioGroup;
3615
+ "w-select": WarpSelect;
3616
+ "w-slider-thumb": WarpSliderThumb;
3617
+ "w-slider": WarpSlider;
3618
+ "w-snackbar-item": WarpSnackbarItem;
3619
+ "w-snackbar": WarpSnackbar;
3620
+ "w-step": WarpStep;
3621
+ "w-step-indicator": WarpStepIndicator;
3622
+ "w-switch": WarpSwitch;
3623
+ "w-tab": WarpTab;
3624
+ "w-tab-panel": WarpTabPanel;
3625
+ "w-tabs": WarpTabs;
3626
+ "w-textarea": WarpTextarea;
3627
+ };
3628
+
3629
+ type CustomElementComponentProps = {
3630
+ "w-textfield": WarpTextFieldProps;
3631
+ "w-icon": WarpIconProps;
3632
+ "w-affix": WarpAffixProps;
3633
+ "w-alert": WarpAlertProps;
3634
+ "w-link": WarpLinkProps;
3635
+ "w-button": WarpButtonProps;
3636
+ "w-attention": WarpAttentionProps;
3637
+ "w-badge": WarpBadgeProps;
3638
+ "w-box": WarpBoxProps;
3639
+ "w-breadcrumbs": WarpBreadcrumbsProps;
3640
+ "w-breadcrumb-item": WarpBreadcrumbItemProps;
3641
+ "w-card": WarpCardProps;
3642
+ "w-checkbox": WarpCheckboxProps;
3643
+ "w-checkbox-group": WarpCheckboxGroupProps;
3644
+ "w-combobox": WarpComboboxProps;
3645
+ "w-datepicker": WarpDatepickerProps;
3646
+ "w-expandable": WarpExpandableProps;
3647
+ "w-modal": WarpModalProps;
3648
+ "w-modal-footer": WarpModalFooterProps;
3649
+ "w-modal-header": WarpModalHeaderProps;
3650
+ "w-page-indicator": WarpPageIndicatorProps;
3651
+ "w-pagination": WarpPaginationProps;
3652
+ "w-pill": WarpPillProps;
3653
+ "w-radio": WarpRadioProps;
3654
+ "w-radio-group": WarpRadioGroupProps;
3655
+ "w-select": WarpSelectProps;
3656
+ "w-slider-thumb": WarpSliderThumbProps;
3657
+ "w-slider": WarpSliderProps;
3658
+ "w-snackbar-item": WarpSnackbarItemProps;
3659
+ "w-snackbar": WarpSnackbarProps;
3660
+ "w-step": WarpStepProps;
3661
+ "w-step-indicator": WarpStepIndicatorProps;
3662
+ "w-switch": WarpSwitchProps;
3663
+ "w-tab": WarpTabProps;
3664
+ "w-tab-panel": WarpTabPanelProps;
3665
+ "w-tabs": WarpTabsProps;
3666
+ "w-textarea": WarpTextareaProps;
3667
+ };
3668
+
3669
+ export type ReactCustomElements = {
3670
+ [Tag in keyof CustomElementComponentProps]: Tag extends keyof CustomElementInstances
3671
+ ? Partial<ReactCustomElementProps<CustomElementInstances[Tag], CustomElementComponentProps[Tag]>>
3672
+ : never;
3673
+ };
3674
+
3675
+ export type CustomElementsSolidJs = {
3137
3676
  /**
3138
3677
  * A single-line input component used for entering and editing textual or numeric data.
3139
3678
  *
3679
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
3680
+ *
3140
3681
  * ## Attributes & Properties
3141
3682
  *
3142
3683
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3150,6 +3691,7 @@ export type CustomElementsSolidJs = {
3150
3691
  * - `label`: Either a `label` or an `aria-label` must be provided.
3151
3692
  * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
3152
3693
  * or on its own to show a help text.
3694
+ * - `optional`: Whether to show the optional indicator after the label.
3153
3695
  * - `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
3696
  * - `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
3697
  * - `min`: Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).
@@ -3200,10 +3742,27 @@ export type CustomElementsSolidJs = {
3200
3742
  BaseEvents
3201
3743
  >;
3202
3744
 
3745
+ /**
3746
+ * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
3747
+ *
3748
+ * ## Attributes & Properties
3749
+ *
3750
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
3751
+ *
3752
+ * - `name`: Icon filename (without .svg)
3753
+ * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
3754
+ * - `locale`: Locale used for `<title>` text.
3755
+ *
3756
+ * Reads the `lang` attribute from `<html>`, falls back to 'en'.
3757
+ */
3758
+ "w-icon": Partial<
3759
+ WarpIconProps & WarpIconSolidJsProps & BaseProps<WarpIcon> & BaseEvents
3760
+ >;
3761
+
3203
3762
  /**
3204
3763
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
3205
3764
  *
3206
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
3765
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)
3207
3766
  *
3208
3767
  * ## Attributes & Properties
3209
3768
  *
@@ -3225,9 +3784,7 @@ export type CustomElementsSolidJs = {
3225
3784
  /**
3226
3785
  * Alert is an inline component used for displaying different types of messages.
3227
3786
  *
3228
- * For accessibility reasons, alert should appear close to the element that triggered it.
3229
- *
3230
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
3787
+ * [Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)
3231
3788
  *
3232
3789
  * ## Attributes & Properties
3233
3790
  *
@@ -3242,9 +3799,9 @@ export type CustomElementsSolidJs = {
3242
3799
  >;
3243
3800
 
3244
3801
  /**
3245
- * Buttons are used to perform actions, with different visuals for different needs.
3802
+ * Link component to use when creating links that look like buttons.
3246
3803
  *
3247
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
3804
+ * [Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)
3248
3805
  *
3249
3806
  * ## Attributes & Properties
3250
3807
  *
@@ -3269,9 +3826,10 @@ export type CustomElementsSolidJs = {
3269
3826
 
3270
3827
  /**
3271
3828
  * Performs an action or renders a link with button styling.
3829
+ *
3272
3830
  * Use button variants to match action priority, risk, and context.
3273
3831
  *
3274
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
3832
+ * [Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)
3275
3833
  *
3276
3834
  * ## Attributes & Properties
3277
3835
  *
@@ -3324,11 +3882,13 @@ export type CustomElementsSolidJs = {
3324
3882
  >;
3325
3883
 
3326
3884
  /**
3885
+ * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
3886
+ *
3327
3887
  * Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.
3328
3888
  *
3329
3889
  * The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs.
3330
3890
  *
3331
- * Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.
3891
+ * [Warp component reference](https://warp-ds.github.io/docs/components/tooltip/frameworks/elements)
3332
3892
  *
3333
3893
  * ## Attributes & Properties
3334
3894
  *
@@ -3408,7 +3968,7 @@ export type CustomElementsSolidJs = {
3408
3968
  /**
3409
3969
  * Box is a layout component used for separating content areas on a page.
3410
3970
  *
3411
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)
3971
+ * [Warp component reference](https://warp-ds.github.io/docs/components/box/frameworks/elements)
3412
3972
  *
3413
3973
  * ## Attributes & Properties
3414
3974
  *
@@ -3431,9 +3991,10 @@ export type CustomElementsSolidJs = {
3431
3991
 
3432
3992
  /**
3433
3993
  * Shows the navigation structure for the current page.
3994
+ *
3434
3995
  * Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.
3435
3996
  *
3436
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
3997
+ * [Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
3437
3998
  *
3438
3999
  * ## Attributes & Properties
3439
4000
  *
@@ -3449,10 +4010,38 @@ export type CustomElementsSolidJs = {
3449
4010
  BaseEvents
3450
4011
  >;
3451
4012
 
4013
+ /**
4014
+ * Represents one item in a `w-breadcrumbs` trail.
4015
+ * 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.
4016
+ *
4017
+ * [Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)
4018
+ *
4019
+ * ## Attributes & Properties
4020
+ *
4021
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
4022
+ *
4023
+ * - `current-page`/`currentPage`: Marks this item as the current page.
4024
+ * Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
4025
+ * - `href`: URL for linked breadcrumb items.
4026
+ * When omitted, the item renders as non-focusable text.
4027
+ *
4028
+ * ## Slots
4029
+ *
4030
+ * Areas where markup can be added to the component.
4031
+ *
4032
+ * - `(default)`: The breadcrumb label content.
4033
+ */
4034
+ "w-breadcrumb-item": Partial<
4035
+ WarpBreadcrumbItemProps &
4036
+ WarpBreadcrumbItemSolidJsProps &
4037
+ BaseProps<WarpBreadcrumbItem> &
4038
+ BaseEvents
4039
+ >;
4040
+
3452
4041
  /**
3453
4042
  * Card is a layout component used for separating content areas on a page.
3454
4043
  *
3455
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
4044
+ * [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
3456
4045
  *
3457
4046
  * ## Attributes & Properties
3458
4047
  *
@@ -3480,7 +4069,11 @@ export type CustomElementsSolidJs = {
3480
4069
  >;
3481
4070
 
3482
4071
  /**
4072
+ * Checkboxes allow users to select one or more options from a number of choices.
3483
4073
  *
4074
+ * Wrap individual checkboxes in a checkbox group.
4075
+ *
4076
+ * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
3484
4077
  *
3485
4078
  * ## Attributes & Properties
3486
4079
  *
@@ -3512,12 +4105,6 @@ export type CustomElementsSolidJs = {
3512
4105
  * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
3513
4106
  * - `validity`: Returns the validity state of the checkbox (property only) (readonly)
3514
4107
  *
3515
- * ## Events
3516
- *
3517
- * Events that will be emitted by the component.
3518
- *
3519
- * - `change`: undefined
3520
- *
3521
4108
  * ## Methods
3522
4109
  *
3523
4110
  * Methods that can be called to access component functionality.
@@ -3537,7 +4124,11 @@ export type CustomElementsSolidJs = {
3537
4124
  >;
3538
4125
 
3539
4126
  /**
4127
+ * Checkboxes allow users to select one or more options from a number of choices.
3540
4128
  *
4129
+ * Wrap individual checkboxes in a checkbox group.
4130
+ *
4131
+ * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
3541
4132
  *
3542
4133
  * ## Attributes & Properties
3543
4134
  *
@@ -3580,7 +4171,7 @@ export type CustomElementsSolidJs = {
3580
4171
  /**
3581
4172
  * A combobox element for text input with selectable options.
3582
4173
  *
3583
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
4174
+ * [Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)
3584
4175
  *
3585
4176
  * ## Attributes & Properties
3586
4177
  *
@@ -3646,11 +4237,9 @@ export type CustomElementsSolidJs = {
3646
4237
  >;
3647
4238
 
3648
4239
  /**
3649
- * An input for dates.
3650
- *
3651
- * Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
4240
+ * A date picker allows the user to select a specific calendar date.
3652
4241
  *
3653
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
4242
+ * [Warp component reference](https://warp-ds.github.io/docs/components/date-picker/frameworks/elements)
3654
4243
  *
3655
4244
  * ## Attributes & Properties
3656
4245
  *
@@ -3713,6 +4302,8 @@ export type CustomElementsSolidJs = {
3713
4302
  /**
3714
4303
  * Expandable is a layout component used for creating expandable content areas on a page.
3715
4304
  *
4305
+ * [Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)
4306
+ *
3716
4307
  * ## Attributes & Properties
3717
4308
  *
3718
4309
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3745,6 +4336,8 @@ export type CustomElementsSolidJs = {
3745
4336
  /**
3746
4337
  * Modals (or dialogs) display important information that users need to acknowledge.
3747
4338
  *
4339
+ * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
4340
+ *
3748
4341
  * ## Attributes & Properties
3749
4342
  *
3750
4343
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3776,6 +4369,28 @@ export type CustomElementsSolidJs = {
3776
4369
  *
3777
4370
  * - `open() => void`: undefined
3778
4371
  * - `close() => void`: undefined
4372
+ *
4373
+ * ## CSS Custom Properties
4374
+ *
4375
+ * CSS variables available for styling the component.
4376
+ *
4377
+ * - `--w-c-modal-backdrop-color`: undefined (default: `undefined`)
4378
+ * - `--w-c-modal-bg`: undefined (default: `undefined`)
4379
+ * - `--w-c-modal-box-shadow`: undefined (default: `undefined`)
4380
+ * - `--w-c-modal-color`: undefined (default: `undefined`)
4381
+ * - `--w-c-modal-height`: undefined (default: `undefined`)
4382
+ * - `--w-c-modal-max-height`: undefined (default: `undefined`)
4383
+ * - `--w-c-modal-min-height`: undefined (default: `undefined`)
4384
+ * - `--w-c-modal-translate-distance`: undefined (default: `undefined`)
4385
+ * - `--w-c-modal-width`: undefined (default: `undefined`)
4386
+ *
4387
+ * ## CSS Parts
4388
+ *
4389
+ * Custom selectors for styling elements within the component.
4390
+ *
4391
+ * - `dialog`: the root element inside the component (`<dialog>` element).
4392
+ * - `wrapper`: container for all elements, direct child of `<dialog>`.
4393
+ * - `content`: the container for the `content` slot items (children).
3779
4394
  */
3780
4395
  "w-modal": Partial<
3781
4396
  WarpModalProps & WarpModalSolidJsProps & BaseProps<WarpModal> & BaseEvents
@@ -3783,6 +4398,20 @@ export type CustomElementsSolidJs = {
3783
4398
 
3784
4399
  /**
3785
4400
  * The footer section of a modal, typically where you place actions.
4401
+ *
4402
+ * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
4403
+ *
4404
+ * ## CSS Custom Properties
4405
+ *
4406
+ * CSS variables available for styling the component.
4407
+ *
4408
+ * - `--w-c-modal-footer-gap`: adjusts the flex gap between actions in the footer. (default: `undefined`)
4409
+ *
4410
+ * ## CSS Parts
4411
+ *
4412
+ * Custom selectors for styling elements within the component.
4413
+ *
4414
+ * - `footer`: the container for slotted items (children).
3786
4415
  */
3787
4416
  "w-modal-footer": Partial<
3788
4417
  WarpModalFooterProps &
@@ -3794,6 +4423,8 @@ export type CustomElementsSolidJs = {
3794
4423
  /**
3795
4424
  * The header section of a modal, typically where you place the title and a close button.
3796
4425
  *
4426
+ * [Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)
4427
+ *
3797
4428
  * ## Attributes & Properties
3798
4429
  *
3799
4430
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3813,6 +4444,24 @@ export type CustomElementsSolidJs = {
3813
4444
  * Areas where markup can be added to the component.
3814
4445
  *
3815
4446
  * - `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.
4447
+ *
4448
+ * ## CSS Custom Properties
4449
+ *
4450
+ * CSS variables available for styling the component.
4451
+ *
4452
+ * - `--w-c-modal-header-font-size`: undefined (default: `undefined`)
4453
+ * - `--w-c-modal-header-line-height`: undefined (default: `undefined`)
4454
+ * - `--w-c-modal-header-margin-bottom`: undefined (default: `undefined`)
4455
+ *
4456
+ * ## CSS Parts
4457
+ *
4458
+ * Custom selectors for styling elements within the component.
4459
+ *
4460
+ * - `header`: the root element inside the component.
4461
+ * - `top`: the container for the image (`top` slot).
4462
+ * - `back`: the back button, if visible.
4463
+ * - `title`: the title element.
4464
+ * - `close`: the close button, if visible.
3816
4465
  */
3817
4466
  "w-modal-header": Partial<
3818
4467
  WarpModalHeaderProps &
@@ -3826,6 +4475,8 @@ export type CustomElementsSolidJs = {
3826
4475
  *
3827
4476
  * One dot is highlighted to indicate the currently selected page.
3828
4477
  *
4478
+ * [Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)
4479
+ *
3829
4480
  * ## Attributes & Properties
3830
4481
  *
3831
4482
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3843,6 +4494,8 @@ export type CustomElementsSolidJs = {
3843
4494
  /**
3844
4495
  * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
3845
4496
  *
4497
+ * [Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)
4498
+ *
3846
4499
  * ## Attributes & Properties
3847
4500
  *
3848
4501
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3870,6 +4523,8 @@ export type CustomElementsSolidJs = {
3870
4523
  /**
3871
4524
  * Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.
3872
4525
  *
4526
+ * [Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)
4527
+ *
3873
4528
  * ## Attributes & Properties
3874
4529
  *
3875
4530
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -3893,7 +4548,11 @@ export type CustomElementsSolidJs = {
3893
4548
  >;
3894
4549
 
3895
4550
  /**
4551
+ * Radios allow users to select a single option from a list of choices.
4552
+ *
4553
+ * Wrap individual radio components in a radio group.
3896
4554
  *
4555
+ * [Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)
3897
4556
  *
3898
4557
  * ## Attributes & Properties
3899
4558
  *
@@ -3913,7 +4572,9 @@ export type CustomElementsSolidJs = {
3913
4572
  /**
3914
4573
  * Radios allow users to select a single option from a list of choices.
3915
4574
  *
3916
- * Use with `w-radio`.
4575
+ * Wrap individual radio components in a radio group.
4576
+ *
4577
+ * [Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)
3917
4578
  *
3918
4579
  * ## Attributes & Properties
3919
4580
  *
@@ -3946,6 +4607,8 @@ export type CustomElementsSolidJs = {
3946
4607
  /**
3947
4608
  * A dropdown component for selecting a single value.
3948
4609
  *
4610
+ * [Warp component reference](https://warp-ds.github.io/docs/components/select/frameworks/elements)
4611
+ *
3949
4612
  * ## Attributes & Properties
3950
4613
  *
3951
4614
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4018,6 +4681,8 @@ export type CustomElementsSolidJs = {
4018
4681
  /**
4019
4682
  * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
4020
4683
  *
4684
+ * [Warp component reference](https://warp-ds.github.io/docs/components/slider/frameworks/elements)
4685
+ *
4021
4686
  * ## Attributes & Properties
4022
4687
  *
4023
4688
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4031,6 +4696,7 @@ export type CustomElementsSolidJs = {
4031
4696
  * - `help-text`/`helpText`: Additional description to show below the fieldset
4032
4697
  * - `invalid`: Sets the form fields and fieldset in an invalid state
4033
4698
  * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit
4699
+ * - `optional`: Whether to show the optional indicator after the label.
4034
4700
  * - `min`: The minimum allowed value in the range inputs
4035
4701
  * - `max`: The maximum allowed value in the range inputs
4036
4702
  * - `markers`: Pass a value similar to step to create visual markers at that interval
@@ -4042,6 +4708,7 @@ export type CustomElementsSolidJs = {
4042
4708
  *
4043
4709
  * Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. (property only)
4044
4710
  * - `labelFormatter`: Formatter for the min and max labels below the range. (property only)
4711
+ * - `_label`: undefined (property only) (readonly)
4045
4712
  *
4046
4713
  * ## Slots
4047
4714
  *
@@ -4061,7 +4728,125 @@ export type CustomElementsSolidJs = {
4061
4728
  >;
4062
4729
 
4063
4730
  /**
4064
- * Individual step component that shows a single step in a process
4731
+ * An item to show in a `w-snackbar`.
4732
+ *
4733
+ * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
4734
+ *
4735
+ * [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
4736
+ *
4737
+ * ## Attributes & Properties
4738
+ *
4739
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
4740
+ *
4741
+ * - `action-placement`/`actionPlacement`: The placement of the action and close buttons.
4742
+ * - `duration`: How long the message should stay in the document before removing itself.
4743
+ *
4744
+ * ## Slots
4745
+ *
4746
+ * Areas where markup can be added to the component.
4747
+ *
4748
+ * - `default`: the snackbar message.
4749
+ * - `icon`: icon preceeding the message.
4750
+ * - `action`: action following the message.
4751
+ *
4752
+ * ## Methods
4753
+ *
4754
+ * Methods that can be called to access component functionality.
4755
+ *
4756
+ * - `close() => void`: Remove the snackbar item from the document.
4757
+ *
4758
+ * Moves focus to the last focused element outside of the snackbar item, if available.
4759
+ *
4760
+ * ## CSS Custom Properties
4761
+ *
4762
+ * CSS variables available for styling the component.
4763
+ *
4764
+ * - `--w-c-snackbar-item-radius`: undefined (default: `undefined`)
4765
+ * - `--w-c-snackbar-item-max-width`: undefined (default: `undefined`)
4766
+ * - `--w-c-snackbar-item-min-width`: undefined (default: `undefined`)
4767
+ * - `--w-c-snackbar-item-padding`: undefined (default: `undefined`)
4768
+ * - `--w-c-snackbar-item-bg`: undefined (default: `undefined`)
4769
+ * - `--w-c-snackbar-item-action-bg-active`: undefined (default: `undefined`)
4770
+ * - `--w-c-snackbar-item-action-bg-hover`: undefined (default: `undefined`)
4771
+ * - `--w-c-snackbar-item-color`: undefined (default: `undefined`)
4772
+ * - `--w-c-snackbar-item-action-color-active`: undefined (default: `undefined`)
4773
+ * - `--w-c-snackbar-item-action-color-hover`: undefined (default: `undefined`)
4774
+ * - `--w-c-snackbar-item-box-shadow`: undefined (default: `undefined`)
4775
+ *
4776
+ * ## CSS Parts
4777
+ *
4778
+ * Custom selectors for styling elements within the component.
4779
+ *
4780
+ * - `item`: the container wrapping the message, icon and actions.
4781
+ * - `icon`: the icon for the variant.
4782
+ * - `message`: the default slot, body of the snackbar item.
4783
+ * - `action`: close and action button.
4784
+ */
4785
+ "w-snackbar-item": Partial<
4786
+ WarpSnackbarItemProps &
4787
+ WarpSnackbarItemSolidJsProps &
4788
+ BaseProps<WarpSnackbarItem> &
4789
+ BaseEvents
4790
+ >;
4791
+
4792
+ /**
4793
+ * A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
4794
+ *
4795
+ * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
4796
+ *
4797
+ * [Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)
4798
+ *
4799
+ * ## Slots
4800
+ *
4801
+ * Areas where markup can be added to the component.
4802
+ *
4803
+ * - `default`: `w-snackbar-item` gets placed inside the default slot by the `create` function.
4804
+ *
4805
+ * ## Methods
4806
+ *
4807
+ * Methods that can be called to access component functionality.
4808
+ *
4809
+ * - `create(message: string, options: CreateSnackbarOptions = {}) => void`: Creates a snackbar item and immediately adds it to the snackbar.
4810
+ *
4811
+ * By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
4812
+ *
4813
+ * If you include an `action` in the options the default `duration` is
4814
+ * set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
4815
+ *
4816
+ * A `duration` of 10 seconds or longer forces the close button to be visible.
4817
+ *
4818
+ * The default `variant` is `neutral` which does not have an icon.
4819
+ *
4820
+ * Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
4821
+ *
4822
+ * ## CSS Custom Properties
4823
+ *
4824
+ * CSS variables available for styling the component.
4825
+ *
4826
+ * - `--w-c-snackbar-container-gap`: undefined (default: `undefined`)
4827
+ * - `--w-c-snackbar-position-bottom`: undefined (default: `undefined`)
4828
+ * - `--w-c-snackbar-position-left`: undefined (default: `undefined`)
4829
+ * - `--w-c-snackbar-position-right`: undefined (default: `undefined`)
4830
+ * - `--w-c-snackbar-position-top`: undefined (default: `undefined`)
4831
+ * - `--w-c-snackbar-z-index`: undefined (default: `undefined`)
4832
+ *
4833
+ * ## CSS Parts
4834
+ *
4835
+ * Custom selectors for styling elements within the component.
4836
+ *
4837
+ * - `container`: the live region that positions messages on the screen.
4838
+ */
4839
+ "w-snackbar": Partial<
4840
+ WarpSnackbarProps &
4841
+ WarpSnackbarSolidJsProps &
4842
+ BaseProps<WarpSnackbar> &
4843
+ BaseEvents
4844
+ >;
4845
+
4846
+ /**
4847
+ * Individual step component that shows a single step in a process.
4848
+ *
4849
+ * [Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)
4065
4850
  *
4066
4851
  * ## Attributes & Properties
4067
4852
  *
@@ -4088,6 +4873,8 @@ export type CustomElementsSolidJs = {
4088
4873
  /**
4089
4874
  * Steps are used to show progress through a process or to guide users through a multi-step task.
4090
4875
  *
4876
+ * [Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)
4877
+ *
4091
4878
  * ## Attributes & Properties
4092
4879
  *
4093
4880
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4105,6 +4892,8 @@ export type CustomElementsSolidJs = {
4105
4892
  /**
4106
4893
  * The Switch component allows users to toggle between two states.
4107
4894
  *
4895
+ * [Warp component reference](https://warp-ds.github.io/docs/components/switch/frameworks/elements)
4896
+ *
4108
4897
  * ## Attributes & Properties
4109
4898
  *
4110
4899
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4138,6 +4927,8 @@ export type CustomElementsSolidJs = {
4138
4927
  /**
4139
4928
  * Individual tab component used within w-tabs container.
4140
4929
  *
4930
+ * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
4931
+ *
4141
4932
  * ## Attributes & Properties
4142
4933
  *
4143
4934
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4151,8 +4942,11 @@ export type CustomElementsSolidJs = {
4151
4942
 
4152
4943
  /**
4153
4944
  * Tab panel component that holds content for individual tabs.
4945
+ *
4154
4946
  * Each tab panel should have a name that matches a corresponding tab.
4155
4947
  *
4948
+ * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
4949
+ *
4156
4950
  * ## Attributes & Properties
4157
4951
  *
4158
4952
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4169,6 +4963,8 @@ export type CustomElementsSolidJs = {
4169
4963
  /**
4170
4964
  * Tabs are used to organize content by grouping similar information on the same page.
4171
4965
  *
4966
+ * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
4967
+ *
4172
4968
  * ## Attributes & Properties
4173
4969
  *
4174
4970
  * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -4179,7 +4975,7 @@ export type CustomElementsSolidJs = {
4179
4975
  *
4180
4976
  * Events that will be emitted by the component.
4181
4977
  *
4182
- * - `change`: Includes `details.panelId` with the now active tab's ID
4978
+ * - `change`: Includes `details.panelId` with the now active tab panel's ID
4183
4979
  */
4184
4980
  "w-tabs": Partial<
4185
4981
  WarpTabsProps & WarpTabsSolidJsProps & BaseProps<WarpTabs> & BaseEvents
@@ -4188,11 +4984,7 @@ export type CustomElementsSolidJs = {
4188
4984
  /**
4189
4985
  * A multi-line text input with built-in form validation, auto-resizing, and styling support.
4190
4986
  *
4191
- * The component automatically handles:
4192
- * - Form integration
4193
- * - Auto-resizing based on content and row constraints
4194
- * - Built-in validation with customizable error messages
4195
- * - Accessibility attributes and labeling
4987
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)
4196
4988
  *
4197
4989
  * ## Attributes & Properties
4198
4990
  *
@@ -4241,11 +5033,72 @@ export type CustomElementsSolidJs = {
4241
5033
  >;
4242
5034
  };
4243
5035
 
4244
- export type CustomCssProperties = {};
5036
+ export type CustomCssProperties = {
5037
+ /** */
5038
+ "--w-c-modal-backdrop-color"?: string;
5039
+ /** */
5040
+ "--w-c-modal-bg"?: string;
5041
+ /** */
5042
+ "--w-c-modal-box-shadow"?: string;
5043
+ /** */
5044
+ "--w-c-modal-color"?: string;
5045
+ /** */
5046
+ "--w-c-modal-height"?: string;
5047
+ /** */
5048
+ "--w-c-modal-max-height"?: string;
5049
+ /** */
5050
+ "--w-c-modal-min-height"?: string;
5051
+ /** */
5052
+ "--w-c-modal-translate-distance"?: string;
5053
+ /** */
5054
+ "--w-c-modal-width"?: string;
5055
+ /** adjusts the flex gap between actions in the footer. */
5056
+ "--w-c-modal-footer-gap"?: string;
5057
+ /** */
5058
+ "--w-c-modal-header-font-size"?: string;
5059
+ /** */
5060
+ "--w-c-modal-header-line-height"?: string;
5061
+ /** */
5062
+ "--w-c-modal-header-margin-bottom"?: string;
5063
+ /** */
5064
+ "--w-c-snackbar-item-radius"?: string;
5065
+ /** */
5066
+ "--w-c-snackbar-item-max-width"?: string;
5067
+ /** */
5068
+ "--w-c-snackbar-item-min-width"?: string;
5069
+ /** */
5070
+ "--w-c-snackbar-item-padding"?: string;
5071
+ /** */
5072
+ "--w-c-snackbar-item-bg"?: string;
5073
+ /** */
5074
+ "--w-c-snackbar-item-action-bg-active"?: string;
5075
+ /** */
5076
+ "--w-c-snackbar-item-action-bg-hover"?: string;
5077
+ /** */
5078
+ "--w-c-snackbar-item-color"?: string;
5079
+ /** */
5080
+ "--w-c-snackbar-item-action-color-active"?: string;
5081
+ /** */
5082
+ "--w-c-snackbar-item-action-color-hover"?: string;
5083
+ /** */
5084
+ "--w-c-snackbar-item-box-shadow"?: string;
5085
+ /** */
5086
+ "--w-c-snackbar-container-gap"?: string;
5087
+ /** */
5088
+ "--w-c-snackbar-position-bottom"?: string;
5089
+ /** */
5090
+ "--w-c-snackbar-position-left"?: string;
5091
+ /** */
5092
+ "--w-c-snackbar-position-right"?: string;
5093
+ /** */
5094
+ "--w-c-snackbar-position-top"?: string;
5095
+ /** */
5096
+ "--w-c-snackbar-z-index"?: string;
5097
+ };
4245
5098
 
4246
5099
  declare module "react" {
4247
5100
  namespace JSX {
4248
- interface IntrinsicElements extends CustomElements {}
5101
+ interface IntrinsicElements extends ReactCustomElements {}
4249
5102
  }
4250
5103
  export interface CSSProperties extends CustomCssProperties {}
4251
5104
  }