@warp-ds/elements 2.9.2-next.1 → 2.10.0-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (283) hide show
  1. package/README.md +4 -0
  2. package/dist/api.js +1 -1
  3. package/dist/api.js.map +1 -1
  4. package/dist/custom-elements.json +508 -145
  5. package/dist/docs/affix/affix.md +2 -2
  6. package/dist/docs/affix/styling.md +1 -0
  7. package/dist/docs/alert/alert.md +2 -2
  8. package/dist/docs/alert/styling.md +1 -0
  9. package/dist/docs/attention/attention.md +2 -0
  10. package/dist/docs/attention/styling.md +1 -0
  11. package/dist/docs/badge/badge.md +2 -0
  12. package/dist/docs/badge/styling.md +1 -0
  13. package/dist/docs/box/box.md +22 -40
  14. package/dist/docs/box/examples.md +20 -38
  15. package/dist/docs/box/styling.md +1 -0
  16. package/dist/docs/breadcrumbs/breadcrumbs.md +8 -2
  17. package/dist/docs/breadcrumbs/examples.md +7 -1
  18. package/dist/docs/breadcrumbs/styling.md +1 -0
  19. package/dist/docs/button/accessibility.md +42 -0
  20. package/dist/docs/button/api.md +63 -39
  21. package/dist/docs/button/button.md +395 -42
  22. package/dist/docs/button/examples.md +126 -0
  23. package/dist/docs/button/styling.md +72 -0
  24. package/dist/docs/button/usage.md +89 -0
  25. package/dist/docs/card/accessibility.md +74 -0
  26. package/dist/docs/card/api.md +9 -3
  27. package/dist/docs/card/card.md +236 -5
  28. package/dist/docs/card/examples.md +75 -0
  29. package/dist/docs/card/styling.md +1 -0
  30. package/dist/docs/card/usage.md +76 -0
  31. package/dist/docs/checkbox/api.md +128 -0
  32. package/dist/docs/checkbox/checkbox.md +134 -0
  33. package/dist/docs/checkbox-group/accessibility.md +71 -0
  34. package/dist/docs/checkbox-group/api.md +79 -0
  35. package/dist/docs/checkbox-group/checkbox-group.md +492 -0
  36. package/dist/docs/checkbox-group/examples.md +105 -0
  37. package/dist/docs/checkbox-group/styling.md +132 -0
  38. package/dist/docs/checkbox-group/usage.md +95 -0
  39. package/dist/docs/combobox/accessibility.md +71 -0
  40. package/dist/docs/combobox/api.md +60 -30
  41. package/dist/docs/combobox/combobox.md +205 -32
  42. package/dist/docs/combobox/examples.md +44 -0
  43. package/dist/docs/combobox/styling.md +1 -0
  44. package/dist/docs/combobox/usage.md +28 -0
  45. package/dist/docs/datepicker/accessibility.md +25 -0
  46. package/dist/docs/datepicker/api.md +22 -14
  47. package/dist/docs/datepicker/datepicker.md +208 -16
  48. package/dist/docs/datepicker/examples.md +75 -0
  49. package/dist/docs/datepicker/styling.md +1 -0
  50. package/dist/docs/datepicker/usage.md +84 -0
  51. package/dist/docs/expandable/api.md +20 -32
  52. package/dist/docs/expandable/examples.md +54 -0
  53. package/dist/docs/expandable/expandable.md +74 -32
  54. package/dist/docs/expandable/styling.md +1 -0
  55. package/dist/docs/icon/accessibility.md +5 -0
  56. package/dist/docs/icon/api.md +43 -0
  57. package/dist/docs/icon/examples.md +45 -0
  58. package/dist/docs/icon/icon.md +115 -0
  59. package/dist/docs/icon/styling.md +1 -0
  60. package/dist/docs/icon/usage.md +11 -0
  61. package/dist/docs/index.md +46 -0
  62. package/dist/docs/link/api.md +18 -22
  63. package/dist/docs/link/examples.md +75 -0
  64. package/dist/docs/link/link.md +113 -24
  65. package/dist/docs/link/styling.md +1 -0
  66. package/dist/docs/link/usage.md +18 -0
  67. package/dist/docs/modal/api.md +51 -0
  68. package/dist/docs/modal/examples.md +67 -0
  69. package/dist/docs/modal/modal.md +240 -0
  70. package/dist/docs/modal/styling.md +1 -0
  71. package/dist/docs/modal/usage.md +110 -0
  72. package/dist/docs/modal-footer/api.md +11 -0
  73. package/dist/docs/modal-footer/modal-footer.md +17 -0
  74. package/dist/docs/modal-header/api.md +42 -0
  75. package/dist/docs/modal-header/modal-header.md +48 -0
  76. package/dist/docs/page-indicator/api.md +6 -6
  77. package/dist/docs/page-indicator/examples.md +8 -0
  78. package/dist/docs/page-indicator/page-indicator.md +25 -6
  79. package/dist/docs/page-indicator/styling.md +1 -0
  80. package/dist/docs/page-indicator/usage.md +8 -0
  81. package/dist/docs/pagination/api.md +12 -10
  82. package/dist/docs/pagination/examples.md +20 -0
  83. package/dist/docs/pagination/pagination.md +52 -12
  84. package/dist/docs/pagination/styling.md +1 -0
  85. package/dist/docs/pagination/usage.md +18 -0
  86. package/dist/docs/pill/accessibility.md +2 -0
  87. package/dist/docs/pill/api.md +10 -26
  88. package/dist/docs/pill/examples.md +23 -0
  89. package/dist/docs/pill/pill.md +45 -28
  90. package/dist/docs/pill/styling.md +1 -0
  91. package/dist/docs/pill/usage.md +8 -0
  92. package/dist/docs/radio/radio.md +1 -7
  93. package/dist/docs/select/select.md +2 -0
  94. package/dist/docs/select/styling.md +1 -0
  95. package/dist/docs/slider/slider.md +2 -0
  96. package/dist/docs/slider/styling.md +1 -0
  97. package/dist/docs/slider-thumb/slider-thumb.md +2 -0
  98. package/dist/docs/slider-thumb/styling.md +1 -0
  99. package/dist/docs/step-indicator/step-indicator.md +2 -0
  100. package/dist/docs/step-indicator/styling.md +1 -0
  101. package/dist/docs/switch/styling.md +1 -0
  102. package/dist/docs/switch/switch.md +2 -0
  103. package/dist/docs/tabs/styling.md +1 -0
  104. package/dist/docs/tabs/tabs.md +2 -0
  105. package/dist/docs/textarea/styling.md +1 -0
  106. package/dist/docs/textarea/textarea.md +2 -0
  107. package/dist/docs/textfield/styling.md +1 -0
  108. package/dist/docs/textfield/textfield.md +2 -0
  109. package/dist/index.d.ts +950 -602
  110. package/dist/packages/affix/affix.hydration.test.js +1 -1
  111. package/dist/packages/affix/affix.js +4 -4
  112. package/dist/packages/affix/affix.js.map +4 -4
  113. package/dist/packages/alert/alert.hydration.test.js +1 -1
  114. package/dist/packages/alert/alert.js +3 -3
  115. package/dist/packages/alert/alert.js.map +3 -3
  116. package/dist/packages/attention/attention.hydration.test.js +1 -1
  117. package/dist/packages/attention/attention.js +397 -444
  118. package/dist/packages/attention/attention.js.map +4 -4
  119. package/dist/packages/attention/attention.test.js +1 -1
  120. package/dist/packages/badge/badge.hydration.test.js +1 -1
  121. package/dist/packages/box/box.hydration.test.js +1 -1
  122. package/dist/packages/box/box.js +1 -1
  123. package/dist/packages/box/box.js.map +1 -1
  124. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +3 -2
  125. package/dist/packages/breadcrumbs/breadcrumbs.js +4 -4
  126. package/dist/packages/breadcrumbs/breadcrumbs.js.map +3 -3
  127. package/dist/packages/button/button.d.ts +54 -37
  128. package/dist/packages/button/button.hydration.test.js +1 -1
  129. package/dist/packages/button/button.js +385 -432
  130. package/dist/packages/button/button.js.map +4 -4
  131. package/dist/packages/button/button.react.stories.d.ts +2 -2
  132. package/dist/packages/button/button.stories.d.ts +29 -0
  133. package/dist/packages/button/button.stories.js +176 -2
  134. package/dist/packages/button/react.d.ts +1 -1
  135. package/dist/packages/button/styles.d.ts +22 -1
  136. package/dist/packages/button/styles.js +390 -1
  137. package/dist/packages/card/card.d.ts +9 -6
  138. package/dist/packages/card/card.hydration.test.js +1 -1
  139. package/dist/packages/card/card.js +3 -3
  140. package/dist/packages/card/card.js.map +4 -4
  141. package/dist/packages/checkbox/checkbox.d.ts +45 -14
  142. package/dist/packages/checkbox/checkbox.hydration.test.js +1 -1
  143. package/dist/packages/checkbox/checkbox.js +3 -3
  144. package/dist/packages/checkbox/checkbox.js.map +3 -3
  145. package/dist/packages/checkbox/checkbox.react.stories.d.ts +1 -1
  146. package/dist/packages/checkbox/checkbox.stories.d.ts +2 -2
  147. package/dist/packages/checkbox/checkbox.test.js +1 -1
  148. package/dist/packages/checkbox/react.d.ts +2 -2
  149. package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +1 -1
  150. package/dist/packages/checkbox-group/checkbox-group.d.ts +35 -8
  151. package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +1 -1
  152. package/dist/packages/checkbox-group/checkbox-group.js +6 -6
  153. package/dist/packages/checkbox-group/checkbox-group.js.map +4 -4
  154. package/dist/packages/checkbox-group/react.d.ts +3 -3
  155. package/dist/packages/combobox/combobox.a11y.test.js +24 -0
  156. package/dist/packages/combobox/combobox.d.ts +65 -45
  157. package/dist/packages/combobox/combobox.hydration.test.js +39 -1
  158. package/dist/packages/combobox/combobox.js +21 -21
  159. package/dist/packages/combobox/combobox.js.map +4 -4
  160. package/dist/packages/combobox/combobox.stories.js +28 -15
  161. package/dist/packages/combobox/combobox.test.js +110 -0
  162. package/dist/packages/datepicker/DatePicker.test.js +1 -1
  163. package/dist/packages/datepicker/datepicker.d.ts +22 -30
  164. package/dist/packages/datepicker/datepicker.hydration.test.js +1 -1
  165. package/dist/packages/datepicker/datepicker.js +49 -49
  166. package/dist/packages/datepicker/datepicker.js.map +4 -4
  167. package/dist/packages/datepicker/datepicker.test.js +1 -1
  168. package/dist/packages/expandable/expandable.d.ts +11 -32
  169. package/dist/packages/expandable/expandable.hydration.test.js +1 -1
  170. package/dist/packages/expandable/expandable.js +11 -11
  171. package/dist/packages/expandable/expandable.js.map +3 -3
  172. package/dist/packages/expandable/expandable.react.stories.d.ts +2 -2
  173. package/dist/packages/expandable/react.d.ts +1 -1
  174. package/dist/packages/icon/icon.d.ts +16 -4
  175. package/dist/packages/icon/icon.hydration.test.js +1 -1
  176. package/dist/packages/icon/icon.js +2 -2
  177. package/dist/packages/icon/icon.js.map +3 -3
  178. package/dist/packages/icon/icon.react.stories.d.ts +1 -1
  179. package/dist/packages/icon/react.d.ts +2 -2
  180. package/dist/packages/link/link.d.ts +15 -16
  181. package/dist/packages/link/link.hydration.test.js +1 -1
  182. package/dist/packages/link/link.js +420 -190
  183. package/dist/packages/link/link.js.map +4 -4
  184. package/dist/packages/link/link.test.js +1 -1
  185. package/dist/packages/link/styles.d.ts +5 -0
  186. package/dist/packages/link/styles.js +80 -0
  187. package/dist/packages/modal/index.d.ts +4 -4
  188. package/dist/packages/modal/index.js +4 -4
  189. package/dist/packages/modal/modal.d.ts +22 -12
  190. package/dist/packages/modal/modal.hydration.test.js +1 -1
  191. package/dist/packages/modal/modal.js +5 -5
  192. package/dist/packages/modal/modal.js.map +3 -3
  193. package/dist/packages/modal/modal.react.stories.d.ts +3 -3
  194. package/dist/packages/modal/modal.stories.d.ts +2 -1
  195. package/dist/packages/modal/modal.stories.js +85 -3
  196. package/dist/packages/modal/react.d.ts +2 -2
  197. package/dist/packages/modal-footer/modal-footer.d.ts +5 -3
  198. package/dist/packages/modal-footer/modal-footer.js +4 -4
  199. package/dist/packages/modal-footer/modal-footer.js.map +3 -3
  200. package/dist/packages/modal-footer/react.d.ts +1 -1
  201. package/dist/packages/modal-header/modal-header.d.ts +21 -11
  202. package/dist/packages/modal-header/modal-header.js +11 -9
  203. package/dist/packages/modal-header/modal-header.js.map +4 -4
  204. package/dist/packages/modal-header/react.d.ts +2 -2
  205. package/dist/packages/page-indicator/page-indicator.d.ts +9 -14
  206. package/dist/packages/page-indicator/page-indicator.hydration.test.js +1 -1
  207. package/dist/packages/page-indicator/page-indicator.js +5 -5
  208. package/dist/packages/page-indicator/page-indicator.js.map +4 -4
  209. package/dist/packages/pagination/pagination.d.ts +11 -11
  210. package/dist/packages/pagination/pagination.hydration.test.js +1 -1
  211. package/dist/packages/pagination/pagination.js +4 -4
  212. package/dist/packages/pagination/pagination.js.map +4 -4
  213. package/dist/packages/pagination/pagination.test.js +1 -1
  214. package/dist/packages/pill/pill.d.ts +14 -29
  215. package/dist/packages/pill/pill.hydration.test.js +1 -1
  216. package/dist/packages/pill/pill.js +3 -3
  217. package/dist/packages/pill/pill.js.map +4 -4
  218. package/dist/packages/pill/pill.react.stories.d.ts +2 -2
  219. package/dist/packages/pill/react.d.ts +1 -1
  220. package/dist/packages/radio/radio.hydration.test.js +1 -1
  221. package/dist/packages/radio/radio.js +3 -3
  222. package/dist/packages/radio/radio.js.map +3 -3
  223. package/dist/packages/radio/radio.test.js +1 -1
  224. package/dist/packages/radio-group/radio-group.a11y.test.js +7 -3
  225. package/dist/packages/radio-group/radio-group.hydration.test.js +6 -2
  226. package/dist/packages/radio-group/radio-group.js +11 -11
  227. package/dist/packages/radio-group/radio-group.js.map +4 -4
  228. package/dist/packages/select/select.a11y.test.js +6 -2
  229. package/dist/packages/select/select.hydration.test.js +1 -1
  230. package/dist/packages/select/select.js +7 -7
  231. package/dist/packages/select/select.js.map +4 -4
  232. package/dist/packages/select/select.test.js +4 -2
  233. package/dist/packages/slider/slider.hydration.test.js +7 -2
  234. package/dist/packages/slider/slider.js +5 -5
  235. package/dist/packages/slider/slider.js.map +4 -4
  236. package/dist/packages/slider/slider.react.stories.js +2 -2
  237. package/dist/packages/slider/slider.test.js +1 -1
  238. package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +1 -1
  239. package/dist/packages/slider-thumb/slider-thumb.js +20 -20
  240. package/dist/packages/slider-thumb/slider-thumb.js.map +4 -4
  241. package/dist/packages/step/step.hydration.test.js +1 -1
  242. package/dist/packages/step/step.js +8 -8
  243. package/dist/packages/step/step.js.map +4 -4
  244. package/dist/packages/step-indicator/step-indicator.hydration.test.js +1 -1
  245. package/dist/packages/switch/switch.a11y.test.js +1 -1
  246. package/dist/packages/switch/switch.hydration.test.js +1 -1
  247. package/dist/packages/switch/switch.js +1 -1
  248. package/dist/packages/switch/switch.js.map +1 -1
  249. package/dist/packages/tab/tab.hydration.test.js +1 -1
  250. package/dist/packages/tab/tab.js +10 -10
  251. package/dist/packages/tab/tab.js.map +2 -2
  252. package/dist/packages/tab-panel/tab-panel.hydration.test.js +1 -1
  253. package/dist/packages/tab-panel/tab-panel.js +3 -3
  254. package/dist/packages/tab-panel/tab-panel.js.map +2 -2
  255. package/dist/packages/tabs/tabs.a11y.test.js +2 -2
  256. package/dist/packages/tabs/tabs.hydration.test.js +1 -1
  257. package/dist/packages/tabs/tabs.js +1 -1
  258. package/dist/packages/tabs/tabs.js.map +2 -2
  259. package/dist/packages/tabs/tabs.test.js +4 -4
  260. package/dist/packages/textarea/textarea.hydration.test.js +1 -1
  261. package/dist/packages/textarea/textarea.js +4 -4
  262. package/dist/packages/textarea/textarea.js.map +3 -3
  263. package/dist/packages/textarea/textarea.test.js +1 -1
  264. package/dist/packages/textfield/textfield.hydration.test.js +1 -1
  265. package/dist/packages/textfield/textfield.js +1 -1
  266. package/dist/packages/textfield/textfield.js.map +1 -1
  267. package/dist/packages/textfield/textfield.test.js +1 -1
  268. package/dist/packages/toast/toast.js +6 -6
  269. package/dist/packages/toast/toast.js.map +4 -4
  270. package/dist/packages/toast/toast.stories.d.ts +1 -5
  271. package/dist/packages/toast/toast.stories.js +0 -17
  272. package/dist/packages/toast-container/toast-container.js +2 -2
  273. package/dist/packages/toast-container/toast-container.js.map +2 -2
  274. package/dist/web-types.json +509 -172
  275. package/eik/index.js +2536 -0
  276. package/package.json +18 -12
  277. package/dist/docs/radio/examples.md +0 -1
  278. package/dist/docs/radio/usage.md +0 -1
  279. package/dist/packages/button/styles/w-button.styles.d.ts +0 -1
  280. package/dist/packages/button/styles/w-button.styles.js +0 -282
  281. package/dist/packages/link/styles/w-link.styles.d.ts +0 -1
  282. package/dist/packages/link/styles/w-link.styles.js +0 -213
  283. /package/dist/docs/{radio → modal}/accessibility.md +0 -0
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { WIcon } from "./packages/icon/icon.ts";
1
+ import type { WarpIcon, WIcon } from "./packages/icon/icon.ts";
2
2
  import type { WarpTextField } from "./packages/textfield/textfield.ts";
3
3
  import type { WarpAffix } from "./packages/affix/affix.ts";
4
4
  import type { WarpAlert } from "./packages/alert/alert.ts";
@@ -9,14 +9,23 @@ 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
11
  import type { WarpCard } from "./packages/card/card.ts";
12
- import type { WCheckbox } from "./packages/checkbox/checkbox.ts";
13
- import type { WCheckboxGroup } from "./packages/checkbox-group/checkbox-group.ts";
12
+ import type { WarpCheckbox, WCheckbox } from "./packages/checkbox/checkbox.ts";
13
+ import type {
14
+ WarpCheckboxGroup,
15
+ WCheckboxGroup,
16
+ } from "./packages/checkbox-group/checkbox-group.ts";
14
17
  import type { WarpCombobox } from "./packages/combobox/combobox.ts";
15
18
  import type { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
16
19
  import type { WarpExpandable } from "./packages/expandable/expandable.ts";
17
- import type { ModalMain } from "./packages/modal/modal.ts";
18
- import type { ModalFooter } from "./packages/modal-footer/modal-footer.ts";
19
- import type { ModalHeader } from "./packages/modal-header/modal-header.ts";
20
+ import type { WarpModal, ModalMain } from "./packages/modal/modal.ts";
21
+ import type {
22
+ WarpModalFooter,
23
+ ModalFooter,
24
+ } from "./packages/modal-footer/modal-footer.ts";
25
+ import type {
26
+ WarpModalHeader,
27
+ ModalHeader,
28
+ } from "./packages/modal-header/modal-header.ts";
20
29
  import type { WarpPageIndicator } from "./packages/page-indicator/page-indicator.ts";
21
30
  import type { WarpPagination } from "./packages/pagination/pagination.ts";
22
31
  import type { WarpPill } from "./packages/pill/pill.ts";
@@ -108,22 +117,26 @@ type BaseProps<T extends HTMLElement> = {
108
117
 
109
118
  type BaseEvents = {};
110
119
 
111
- export type WIconProps = {
120
+ export type WarpIconProps = {
112
121
  /** Icon filename (without .svg) */
113
- name?: WIcon["name"];
114
- /** Size: small, medium, large or pixel value (e.g. "32px") */
115
- size?: WIcon["size"];
116
- /** Locale used in CDN URL */
117
- locale?: WIcon["locale"];
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"];
118
129
  };
119
130
 
120
- export type WIconSolidJsProps = {
131
+ export type WarpIconSolidJsProps = {
121
132
  /** Icon filename (without .svg) */
122
- "prop:name"?: WIcon["name"];
123
- /** Size: small, medium, large or pixel value (e.g. "32px") */
124
- "prop:size"?: WIcon["size"];
125
- /** Locale used in CDN URL */
126
- "prop:locale"?: WIcon["locale"];
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"];
127
140
 
128
141
  /** Set the innerHTML of the element */
129
142
  innerHTML?: string;
@@ -337,44 +350,52 @@ export type WarpAlertSolidJsProps = {
337
350
  };
338
351
 
339
352
  export type WarpLinkProps = {
340
- /** */
353
+ /** Focus the link after it is rendered */
341
354
  autofocus?: WarpLink["autofocus"];
342
- /** */
355
+ /** Visual style for the link/button. */
343
356
  variant?: WarpLink["variant"];
344
- /** */
357
+ /** Render a smaller version */
345
358
  small?: WarpLink["small"];
346
- /** */
359
+ /** The URL the link points to */
347
360
  href?: WarpLink["href"];
348
- /** */
361
+ /** Applies disabled styling, but you need to disable clicks on your own.
362
+
363
+ The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior. */
349
364
  disabled?: WarpLink["disabled"];
350
- /** */
365
+ /** Where to display the linked URL (e.g. `_blank`) */
351
366
  target?: WarpLink["target"];
352
- /** */
367
+ /** Relationship of the linked URL.
368
+
369
+ If `target="_blank"` and `rel` is not provided, the component uses `noopener`. */
353
370
  rel?: WarpLink["rel"];
354
- /** */
371
+ /** Makes the link take up the full width of its parent */
355
372
  "full-width"?: WarpLink["fullWidth"];
356
- /** */
373
+ /** Makes the link take up the full width of its parent */
357
374
  fullWidth?: WarpLink["fullWidth"];
358
375
  };
359
376
 
360
377
  export type WarpLinkSolidJsProps = {
361
- /** */
378
+ /** Focus the link after it is rendered */
362
379
  "prop:autofocus"?: WarpLink["autofocus"];
363
- /** */
380
+ /** Visual style for the link/button. */
364
381
  "prop:variant"?: WarpLink["variant"];
365
- /** */
382
+ /** Render a smaller version */
366
383
  "prop:small"?: WarpLink["small"];
367
- /** */
384
+ /** The URL the link points to */
368
385
  "prop:href"?: WarpLink["href"];
369
- /** */
386
+ /** Applies disabled styling, but you need to disable clicks on your own.
387
+
388
+ The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior. */
370
389
  "prop:disabled"?: WarpLink["disabled"];
371
- /** */
390
+ /** Where to display the linked URL (e.g. `_blank`) */
372
391
  "prop:target"?: WarpLink["target"];
373
- /** */
392
+ /** Relationship of the linked URL.
393
+
394
+ If `target="_blank"` and `rel` is not provided, the component uses `noopener`. */
374
395
  "prop:rel"?: WarpLink["rel"];
375
- /** */
396
+ /** Makes the link take up the full width of its parent */
376
397
  "bool:full-width"?: WarpLink["fullWidth"];
377
- /** */
398
+ /** Makes the link take up the full width of its parent */
378
399
  "prop:fullWidth"?: WarpLink["fullWidth"];
379
400
 
380
401
  /** Set the innerHTML of the element */
@@ -384,85 +405,125 @@ export type WarpLinkSolidJsProps = {
384
405
  };
385
406
 
386
407
  export type WarpButtonProps = {
387
- /** */
408
+ /** Native button type.
409
+ Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`. */
388
410
  type?: WarpButton["type"];
389
- /** */
411
+ /** Focuses the button when it is first rendered.
412
+ Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component. */
390
413
  autofocus?: WarpButton["autofocus"];
391
- /** */
414
+ /** Visual style of the button.
415
+ Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement. */
392
416
  variant?: WarpButton["variant"];
393
- /** @deprecated Use `variant="quiet"` instead */
417
+ /** @deprecated Use `variant="quiet"` instead - Deprecated quiet visual treatment flag
418
+ Use `variant="quiet"` instead. */
394
419
  quiet?: WarpButton["quiet"];
395
- /** */
420
+ /** Marks the button as icon-only.
421
+ Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name. */
396
422
  "icon-only"?: WarpButton["iconOnly"];
397
- /** */
423
+ /** Marks the button as icon-only.
424
+ Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name. */
398
425
  iconOnly?: WarpButton["iconOnly"];
399
- /** */
426
+ /** Renders the compact button size.
427
+ Use this in dense layouts where the default button size is too large. */
400
428
  small?: WarpButton["small"];
401
- /** */
429
+ /** Shows the loading state.
430
+ Use after the user has triggered an action and the action is in progress. */
402
431
  loading?: WarpButton["loading"];
403
- /** */
432
+ /** URL for rendering the button as a link.
433
+ When set, the component renders `w-link` instead of a native `button`. */
404
434
  href?: WarpButton["href"];
405
- /** */
435
+ /** Link browsing context.
436
+ Passed to the rendered link when `href` is set. */
406
437
  target?: WarpButton["target"];
407
- /** */
438
+ /** Visually disables the button.
439
+ Disabled buttons are discouraged because they can hide the reason an action is unavailable. */
408
440
  disabled?: WarpButton["disabled"];
409
- /** */
441
+ /** Link relationship.
442
+ Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used. */
410
443
  rel?: WarpButton["rel"];
411
- /** */
444
+ /** Makes the button fill its parent width.
445
+ Useful in narrow layouts where the button should span the available inline space. */
412
446
  "full-width"?: WarpButton["fullWidth"];
413
- /** */
447
+ /** Makes the button fill its parent width.
448
+ Useful in narrow layouts where the button should span the available inline space. */
414
449
  fullWidth?: WarpButton["fullWidth"];
415
- /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. */
450
+ /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. - Deprecated class applied to the internal control
451
+ This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance. */
416
452
  "button-class"?: WarpButton["buttonClass"];
417
- /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. */
453
+ /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. - Deprecated class applied to the internal control
454
+ This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance. */
418
455
  buttonClass?: WarpButton["buttonClass"];
419
- /** */
456
+ /** Form control name.
457
+ Used when the button participates in form handling. */
420
458
  name?: WarpButton["name"];
421
- /** */
459
+ /** Form control value.
460
+ Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset. */
422
461
  value?: WarpButton["value"];
423
- /** */
424
- ariaValueTextLoading?: WarpButton["ariaValueTextLoading"];
462
+ /** The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. */
463
+ commandfor?: WarpButton["commandfor"];
464
+ /** The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. */
465
+ command?: WarpButton["command"];
425
466
  };
426
467
 
427
468
  export type WarpButtonSolidJsProps = {
428
- /** */
469
+ /** Native button type.
470
+ Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`. */
429
471
  "prop:type"?: WarpButton["type"];
430
- /** */
472
+ /** Focuses the button when it is first rendered.
473
+ Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component. */
431
474
  "prop:autofocus"?: WarpButton["autofocus"];
432
- /** */
475
+ /** Visual style of the button.
476
+ Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement. */
433
477
  "prop:variant"?: WarpButton["variant"];
434
- /** @deprecated Use `variant="quiet"` instead */
478
+ /** @deprecated Use `variant="quiet"` instead - Deprecated quiet visual treatment flag
479
+ Use `variant="quiet"` instead. */
435
480
  "prop:quiet"?: WarpButton["quiet"];
436
- /** */
481
+ /** Marks the button as icon-only.
482
+ Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name. */
437
483
  "bool:icon-only"?: WarpButton["iconOnly"];
438
- /** */
484
+ /** Marks the button as icon-only.
485
+ Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name. */
439
486
  "prop:iconOnly"?: WarpButton["iconOnly"];
440
- /** */
487
+ /** Renders the compact button size.
488
+ Use this in dense layouts where the default button size is too large. */
441
489
  "prop:small"?: WarpButton["small"];
442
- /** */
490
+ /** Shows the loading state.
491
+ Use after the user has triggered an action and the action is in progress. */
443
492
  "prop:loading"?: WarpButton["loading"];
444
- /** */
493
+ /** URL for rendering the button as a link.
494
+ When set, the component renders `w-link` instead of a native `button`. */
445
495
  "prop:href"?: WarpButton["href"];
446
- /** */
496
+ /** Link browsing context.
497
+ Passed to the rendered link when `href` is set. */
447
498
  "prop:target"?: WarpButton["target"];
448
- /** */
499
+ /** Visually disables the button.
500
+ Disabled buttons are discouraged because they can hide the reason an action is unavailable. */
449
501
  "prop:disabled"?: WarpButton["disabled"];
450
- /** */
502
+ /** Link relationship.
503
+ Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used. */
451
504
  "prop:rel"?: WarpButton["rel"];
452
- /** */
505
+ /** Makes the button fill its parent width.
506
+ Useful in narrow layouts where the button should span the available inline space. */
453
507
  "bool:full-width"?: WarpButton["fullWidth"];
454
- /** */
508
+ /** Makes the button fill its parent width.
509
+ Useful in narrow layouts where the button should span the available inline space. */
455
510
  "prop:fullWidth"?: WarpButton["fullWidth"];
456
- /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. */
511
+ /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. - Deprecated class applied to the internal control
512
+ This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance. */
457
513
  "attr:button-class"?: WarpButton["buttonClass"];
458
- /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. */
514
+ /** @deprecated This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. - Deprecated class applied to the internal control
515
+ This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance. */
459
516
  "prop:buttonClass"?: WarpButton["buttonClass"];
460
- /** */
517
+ /** Form control name.
518
+ Used when the button participates in form handling. */
461
519
  "prop:name"?: WarpButton["name"];
462
- /** */
520
+ /** Form control value.
521
+ Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset. */
463
522
  "prop:value"?: WarpButton["value"];
464
- /** */
465
- "prop:ariaValueTextLoading"?: WarpButton["ariaValueTextLoading"];
523
+ /** The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. */
524
+ "prop:commandfor"?: WarpButton["commandfor"];
525
+ /** The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands. */
526
+ "prop:command"?: WarpButton["command"];
466
527
 
467
528
  /** Set the innerHTML of the element */
468
529
  innerHTML?: string;
@@ -677,22 +738,34 @@ Defaults to the localized "You are here" label. Set `aria-label` when the defaul
677
738
  };
678
739
 
679
740
  export type WarpCardProps = {
680
- /** */
741
+ /** Whether the card is visually selected.
742
+
743
+ Use this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes. */
681
744
  selected?: WarpCard["selected"];
682
- /** */
745
+ /** Whether the card uses the flat visual treatment.
746
+
747
+ Flat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface. */
683
748
  flat?: WarpCard["flat"];
684
- /** */
749
+ /** Whether the whole card is interactive.
750
+
751
+ When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice. */
685
752
  clickable?: WarpCard["clickable"];
686
753
  /** */
687
754
  buttonText?: WarpCard["buttonText"];
688
755
  };
689
756
 
690
757
  export type WarpCardSolidJsProps = {
691
- /** */
758
+ /** Whether the card is visually selected.
759
+
760
+ Use this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes. */
692
761
  "prop:selected"?: WarpCard["selected"];
693
- /** */
762
+ /** Whether the card uses the flat visual treatment.
763
+
764
+ Flat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface. */
694
765
  "prop:flat"?: WarpCard["flat"];
695
- /** */
766
+ /** Whether the whole card is interactive.
767
+
768
+ When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice. */
696
769
  "prop:clickable"?: WarpCard["clickable"];
697
770
  /** */
698
771
  "prop:buttonText"?: WarpCard["buttonText"];
@@ -703,45 +776,73 @@ export type WarpCardSolidJsProps = {
703
776
  textContent?: string | number;
704
777
  };
705
778
 
706
- export type WCheckboxProps = {
707
- /** The name of the checkbox, submitted as a name/value pair with form data. */
708
- name?: WCheckbox["name"];
709
- /** The value of the checkbox, submitted as a name/value pair with form data. */
710
- value?: WCheckbox["value"];
711
- /** Draws the checkbox in an indeterminate state. */
712
- indeterminate?: WCheckbox["indeterminate"];
713
- /** Draws the checkbox in a checked state (reflected to attribute). */
714
- checked?: WCheckbox["checked"];
715
- /** Disables the checkbox. */
716
- disabled?: WCheckbox["disabled"];
717
- /** Makes the checkbox a required field. */
718
- required?: WCheckbox["required"];
719
- /** Draws the checkbox in an invalid state. */
720
- invalid?: WCheckbox["invalid"];
779
+ export type WarpCheckboxProps = {
780
+ /** The name of the checkbox.
781
+
782
+ When the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name. */
783
+ name?: WarpCheckbox["name"];
784
+ /** The value submitted when the checkbox is checked.
785
+
786
+ If no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value. */
787
+ value?: WarpCheckbox["value"];
788
+ /** Whether the checkbox is visually indeterminate.
789
+
790
+ Use this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked. */
791
+ indeterminate?: WarpCheckbox["indeterminate"];
792
+ /** Whether the checkbox is checked.
793
+
794
+ Checked checkboxes submit their value with form data. The property is reflected to the `checked` attribute. */
795
+ checked?: WarpCheckbox["checked"];
796
+ /** Whether the checkbox is disabled.
797
+
798
+ Disabled checkboxes cannot be focused, changed, or submitted with form data. */
799
+ disabled?: WarpCheckbox["disabled"];
800
+ /** Whether the checkbox must be checked before form submission.
801
+
802
+ A required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`. */
803
+ required?: WarpCheckbox["required"];
804
+ /** Whether the checkbox is visually invalid.
805
+
806
+ Use this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form. */
807
+ invalid?: WarpCheckbox["invalid"];
721
808
  /** */
722
- input?: WCheckbox["input"];
809
+ input?: WarpCheckbox["input"];
723
810
 
724
811
  /** */
725
812
  onchange?: (e: Event) => void;
726
813
  };
727
814
 
728
- export type WCheckboxSolidJsProps = {
729
- /** The name of the checkbox, submitted as a name/value pair with form data. */
730
- "prop:name"?: WCheckbox["name"];
731
- /** The value of the checkbox, submitted as a name/value pair with form data. */
732
- "prop:value"?: WCheckbox["value"];
733
- /** Draws the checkbox in an indeterminate state. */
734
- "prop:indeterminate"?: WCheckbox["indeterminate"];
735
- /** Draws the checkbox in a checked state (reflected to attribute). */
736
- "prop:checked"?: WCheckbox["checked"];
737
- /** Disables the checkbox. */
738
- "prop:disabled"?: WCheckbox["disabled"];
739
- /** Makes the checkbox a required field. */
740
- "prop:required"?: WCheckbox["required"];
741
- /** Draws the checkbox in an invalid state. */
742
- "prop:invalid"?: WCheckbox["invalid"];
815
+ export type WarpCheckboxSolidJsProps = {
816
+ /** The name of the checkbox.
817
+
818
+ When the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name. */
819
+ "prop:name"?: WarpCheckbox["name"];
820
+ /** The value submitted when the checkbox is checked.
821
+
822
+ If no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value. */
823
+ "prop:value"?: WarpCheckbox["value"];
824
+ /** Whether the checkbox is visually indeterminate.
825
+
826
+ Use this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked. */
827
+ "prop:indeterminate"?: WarpCheckbox["indeterminate"];
828
+ /** Whether the checkbox is checked.
829
+
830
+ Checked checkboxes submit their value with form data. The property is reflected to the `checked` attribute. */
831
+ "prop:checked"?: WarpCheckbox["checked"];
832
+ /** Whether the checkbox is disabled.
833
+
834
+ Disabled checkboxes cannot be focused, changed, or submitted with form data. */
835
+ "prop:disabled"?: WarpCheckbox["disabled"];
836
+ /** Whether the checkbox must be checked before form submission.
837
+
838
+ A required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`. */
839
+ "prop:required"?: WarpCheckbox["required"];
840
+ /** Whether the checkbox is visually invalid.
841
+
842
+ Use this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form. */
843
+ "prop:invalid"?: WarpCheckbox["invalid"];
743
844
  /** */
744
- "prop:input"?: WCheckbox["input"];
845
+ "prop:input"?: WarpCheckbox["input"];
745
846
  /** */
746
847
  "on:change"?: (e: Event) => void;
747
848
 
@@ -751,38 +852,66 @@ export type WCheckboxSolidJsProps = {
751
852
  textContent?: string | number;
752
853
  };
753
854
 
754
- export type WCheckboxGroupProps = {
755
- /** The group label displayed above the checkboxes. */
756
- label?: WCheckboxGroup["label"];
757
- /** The name applied to child checkboxes when they do not provide one. */
758
- name?: WCheckboxGroup["name"];
759
- /** Whether to show optional text next to the label. */
760
- optional?: WCheckboxGroup["optional"];
761
- /** */
762
- "help-text"?: WCheckboxGroup["helpText"];
763
- /** */
764
- helpText?: WCheckboxGroup["helpText"];
765
- /** Makes the checkbox group required. */
766
- required?: WCheckboxGroup["required"];
767
- /** Marks the checkbox group as invalid. */
768
- invalid?: WCheckboxGroup["invalid"];
769
- };
770
-
771
- export type WCheckboxGroupSolidJsProps = {
772
- /** The group label displayed above the checkboxes. */
773
- "prop:label"?: WCheckboxGroup["label"];
774
- /** The name applied to child checkboxes when they do not provide one. */
775
- "prop:name"?: WCheckboxGroup["name"];
776
- /** Whether to show optional text next to the label. */
777
- "prop:optional"?: WCheckboxGroup["optional"];
778
- /** */
779
- "attr:help-text"?: WCheckboxGroup["helpText"];
780
- /** */
781
- "prop:helpText"?: WCheckboxGroup["helpText"];
782
- /** Makes the checkbox group required. */
783
- "prop:required"?: WCheckboxGroup["required"];
784
- /** Marks the checkbox group as invalid. */
785
- "prop:invalid"?: WCheckboxGroup["invalid"];
855
+ export type WarpCheckboxGroupProps = {
856
+ /** The group label displayed above the checkboxes.
857
+
858
+ Use this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies. */
859
+ label?: WarpCheckboxGroup["label"];
860
+ /** The name applied to child checkboxes when they do not provide one.
861
+
862
+ Use this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`. */
863
+ name?: WarpCheckboxGroup["name"];
864
+ /** Whether to show optional text next to the label.
865
+
866
+ Use this to indicate that selecting an option from the group is not required. */
867
+ optional?: WarpCheckboxGroup["optional"];
868
+ /** Help text displayed below the checkbox group.
869
+
870
+ Use this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message. */
871
+ "help-text"?: WarpCheckboxGroup["helpText"];
872
+ /** Help text displayed below the checkbox group.
873
+
874
+ Use this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message. */
875
+ helpText?: WarpCheckboxGroup["helpText"];
876
+ /** Whether at least one checkbox in the group must be selected.
877
+
878
+ Required validation is managed by the group. The individual checkboxes provide the submitted form values. */
879
+ required?: WarpCheckboxGroup["required"];
880
+ /** Whether the checkbox group is visually invalid.
881
+
882
+ Use this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state. */
883
+ invalid?: WarpCheckboxGroup["invalid"];
884
+ };
885
+
886
+ export type WarpCheckboxGroupSolidJsProps = {
887
+ /** The group label displayed above the checkboxes.
888
+
889
+ Use this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies. */
890
+ "prop:label"?: WarpCheckboxGroup["label"];
891
+ /** The name applied to child checkboxes when they do not provide one.
892
+
893
+ Use this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`. */
894
+ "prop:name"?: WarpCheckboxGroup["name"];
895
+ /** Whether to show optional text next to the label.
896
+
897
+ Use this to indicate that selecting an option from the group is not required. */
898
+ "prop:optional"?: WarpCheckboxGroup["optional"];
899
+ /** Help text displayed below the checkbox group.
900
+
901
+ Use this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message. */
902
+ "attr:help-text"?: WarpCheckboxGroup["helpText"];
903
+ /** Help text displayed below the checkbox group.
904
+
905
+ Use this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message. */
906
+ "prop:helpText"?: WarpCheckboxGroup["helpText"];
907
+ /** Whether at least one checkbox in the group must be selected.
908
+
909
+ Required validation is managed by the group. The individual checkboxes provide the submitted form values. */
910
+ "prop:required"?: WarpCheckboxGroup["required"];
911
+ /** Whether the checkbox group is visually invalid.
912
+
913
+ Use this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state. */
914
+ "prop:invalid"?: WarpCheckboxGroup["invalid"];
786
915
 
787
916
  /** Set the innerHTML of the element */
788
917
  innerHTML?: string;
@@ -791,88 +920,168 @@ export type WCheckboxGroupSolidJsProps = {
791
920
  };
792
921
 
793
922
  export type WarpComboboxProps = {
794
- /** The available options to select from */
923
+ /** The available options to select from.
924
+
925
+ Use this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements. */
795
926
  options?: WarpCombobox["options"];
796
- /** Label above input */
927
+ /** The label displayed above the input.
928
+
929
+ Use this to give the combobox a visible and accessible name. */
797
930
  label?: WarpCombobox["label"];
798
- /** Input placeholder */
931
+ /** Placeholder text displayed when the input is empty.
932
+
933
+ Use this as a short hint for the expected input. Do not use placeholder text as a replacement for a label. */
799
934
  placeholder?: WarpCombobox["placeholder"];
800
- /** The input value */
935
+ /** The selected or typed value.
936
+
937
+ When an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label. */
801
938
  value?: WarpCombobox["value"];
802
- /** Whether the popover opens when focus is on the text field */
939
+ /** Whether the option list opens when the input receives focus.
940
+
941
+ Use this when users should see available options before they start typing. */
803
942
  "open-on-focus"?: WarpCombobox["openOnFocus"];
804
- /** Whether the popover opens when focus is on the text field */
943
+ /** Whether the option list opens when the input receives focus.
944
+
945
+ Use this when users should see available options before they start typing. */
805
946
  openOnFocus?: WarpCombobox["openOnFocus"];
806
- /** Select active option on blur */
947
+ /** Whether the active option is selected when the input loses focus.
948
+
949
+ When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur. */
807
950
  "select-on-blur"?: WarpCombobox["selectOnBlur"];
808
- /** Select active option on blur */
951
+ /** Whether the active option is selected when the input loses focus.
952
+
953
+ When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur. */
809
954
  selectOnBlur?: WarpCombobox["selectOnBlur"];
810
- /** Whether the matching text segments in the options should be highlighted */
955
+ /** Whether matching text segments in options are highlighted.
956
+
957
+ Use this to visually emphasize the part of each option that matches the current input value. */
811
958
  "match-text-segments"?: WarpCombobox["matchTextSegments"];
812
- /** Whether the matching text segments in the options should be highlighted */
959
+ /** Whether matching text segments in options are highlighted.
960
+
961
+ Use this to visually emphasize the part of each option that matches the current input value. */
813
962
  matchTextSegments?: WarpCombobox["matchTextSegments"];
814
- /** Disable client-side static filtering */
963
+ /** Whether built-in client-side filtering is disabled.
964
+
965
+ Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided. */
815
966
  "disable-static-filtering"?: WarpCombobox["disableStaticFiltering"];
816
- /** Disable client-side static filtering */
967
+ /** Whether built-in client-side filtering is disabled.
968
+
969
+ Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided. */
817
970
  disableStaticFiltering?: WarpCombobox["disableStaticFiltering"];
818
- /** Renders the input field in an invalid state */
971
+ /** Whether the combobox is visually invalid.
972
+
973
+ Use this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error. */
819
974
  invalid?: WarpCombobox["invalid"];
820
- /** The content to display as the help text */
975
+ /** Help text displayed below the input.
976
+
977
+ Use this for supporting guidance or validation feedback. */
821
978
  "help-text"?: WarpCombobox["helpText"];
822
- /** The content to display as the help text */
979
+ /** Help text displayed below the input.
980
+
981
+ Use this for supporting guidance or validation feedback. */
823
982
  helpText?: WarpCombobox["helpText"];
824
- /** Whether the element is disabled */
983
+ /** Whether the combobox is disabled.
984
+
985
+ Disabled comboboxes cannot be focused, changed, or submitted with form data. */
825
986
  disabled?: WarpCombobox["disabled"];
826
- /** Whether the element is required */
987
+ /** Whether the combobox is required before form submission.
988
+
989
+ Use this when the user must provide a value before submitting the form. */
827
990
  required?: WarpCombobox["required"];
828
- /** Whether to show optional text */
991
+ /** Whether to show optional text next to the label.
992
+
993
+ Use this to indicate that the combobox is not required. */
829
994
  optional?: WarpCombobox["optional"];
830
- /** Name attribute for form submission */
995
+ /** The name submitted with the combobox value.
996
+
997
+ Use this when the combobox belongs to a form and its value should be included in form data. */
831
998
  name?: WarpCombobox["name"];
832
- /** Autocomplete attribute for the input field */
999
+ /** The autocomplete attribute passed to the internal input.
1000
+
1001
+ Defaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token. */
833
1002
  autocomplete?: WarpCombobox["autocomplete"];
834
1003
  };
835
1004
 
836
1005
  export type WarpComboboxSolidJsProps = {
837
- /** The available options to select from */
1006
+ /** The available options to select from.
1007
+
1008
+ Use this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements. */
838
1009
  "prop:options"?: WarpCombobox["options"];
839
- /** Label above input */
1010
+ /** The label displayed above the input.
1011
+
1012
+ Use this to give the combobox a visible and accessible name. */
840
1013
  "prop:label"?: WarpCombobox["label"];
841
- /** Input placeholder */
1014
+ /** Placeholder text displayed when the input is empty.
1015
+
1016
+ Use this as a short hint for the expected input. Do not use placeholder text as a replacement for a label. */
842
1017
  "prop:placeholder"?: WarpCombobox["placeholder"];
843
- /** The input value */
1018
+ /** The selected or typed value.
1019
+
1020
+ When an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label. */
844
1021
  "prop:value"?: WarpCombobox["value"];
845
- /** Whether the popover opens when focus is on the text field */
1022
+ /** Whether the option list opens when the input receives focus.
1023
+
1024
+ Use this when users should see available options before they start typing. */
846
1025
  "bool:open-on-focus"?: WarpCombobox["openOnFocus"];
847
- /** Whether the popover opens when focus is on the text field */
1026
+ /** Whether the option list opens when the input receives focus.
1027
+
1028
+ Use this when users should see available options before they start typing. */
848
1029
  "prop:openOnFocus"?: WarpCombobox["openOnFocus"];
849
- /** Select active option on blur */
1030
+ /** Whether the active option is selected when the input loses focus.
1031
+
1032
+ When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur. */
850
1033
  "bool:select-on-blur"?: WarpCombobox["selectOnBlur"];
851
- /** Select active option on blur */
1034
+ /** Whether the active option is selected when the input loses focus.
1035
+
1036
+ When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur. */
852
1037
  "prop:selectOnBlur"?: WarpCombobox["selectOnBlur"];
853
- /** Whether the matching text segments in the options should be highlighted */
1038
+ /** Whether matching text segments in options are highlighted.
1039
+
1040
+ Use this to visually emphasize the part of each option that matches the current input value. */
854
1041
  "bool:match-text-segments"?: WarpCombobox["matchTextSegments"];
855
- /** Whether the matching text segments in the options should be highlighted */
1042
+ /** Whether matching text segments in options are highlighted.
1043
+
1044
+ Use this to visually emphasize the part of each option that matches the current input value. */
856
1045
  "prop:matchTextSegments"?: WarpCombobox["matchTextSegments"];
857
- /** Disable client-side static filtering */
1046
+ /** Whether built-in client-side filtering is disabled.
1047
+
1048
+ Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided. */
858
1049
  "bool:disable-static-filtering"?: WarpCombobox["disableStaticFiltering"];
859
- /** Disable client-side static filtering */
1050
+ /** Whether built-in client-side filtering is disabled.
1051
+
1052
+ Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided. */
860
1053
  "prop:disableStaticFiltering"?: WarpCombobox["disableStaticFiltering"];
861
- /** Renders the input field in an invalid state */
1054
+ /** Whether the combobox is visually invalid.
1055
+
1056
+ Use this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error. */
862
1057
  "prop:invalid"?: WarpCombobox["invalid"];
863
- /** The content to display as the help text */
1058
+ /** Help text displayed below the input.
1059
+
1060
+ Use this for supporting guidance or validation feedback. */
864
1061
  "attr:help-text"?: WarpCombobox["helpText"];
865
- /** The content to display as the help text */
1062
+ /** Help text displayed below the input.
1063
+
1064
+ Use this for supporting guidance or validation feedback. */
866
1065
  "prop:helpText"?: WarpCombobox["helpText"];
867
- /** Whether the element is disabled */
1066
+ /** Whether the combobox is disabled.
1067
+
1068
+ Disabled comboboxes cannot be focused, changed, or submitted with form data. */
868
1069
  "prop:disabled"?: WarpCombobox["disabled"];
869
- /** Whether the element is required */
1070
+ /** Whether the combobox is required before form submission.
1071
+
1072
+ Use this when the user must provide a value before submitting the form. */
870
1073
  "prop:required"?: WarpCombobox["required"];
871
- /** Whether to show optional text */
1074
+ /** Whether to show optional text next to the label.
1075
+
1076
+ Use this to indicate that the combobox is not required. */
872
1077
  "prop:optional"?: WarpCombobox["optional"];
873
- /** Name attribute for form submission */
1078
+ /** The name submitted with the combobox value.
1079
+
1080
+ Use this when the combobox belongs to a form and its value should be included in form data. */
874
1081
  "prop:name"?: WarpCombobox["name"];
875
- /** Autocomplete attribute for the input field */
1082
+ /** The autocomplete attribute passed to the internal input.
1083
+
1084
+ Defaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token. */
876
1085
  "prop:autocomplete"?: WarpCombobox["autocomplete"];
877
1086
 
878
1087
  /** Set the innerHTML of the element */
@@ -882,41 +1091,49 @@ export type WarpComboboxSolidJsProps = {
882
1091
  };
883
1092
 
884
1093
  export type WarpDatepickerProps = {
885
- /** */
1094
+ /** The label displayed above the date input.
1095
+
1096
+ Use this to give the datepicker a visible and accessible name. */
886
1097
  label?: WarpDatepicker["label"];
887
- /** Takes precedence over the `<html>` lang attribute. */
1098
+ /** The locale used for calendar labels and date formatting.
1099
+
1100
+ This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`. */
888
1101
  lang?: WarpDatepicker["lang"];
889
- /** */
1102
+ /** The name submitted with the date value.
1103
+
1104
+ Use this when the datepicker belongs to a form and its value should be included in form data. */
890
1105
  name?: WarpDatepicker["name"];
891
- /** */
1106
+ /** The selected date value.
1107
+
1108
+ Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets. */
892
1109
  value?: WarpDatepicker["value"];
893
- /** Decides the format of the date as shown in the calendar header.
1110
+ /** The date format used in the calendar header.
894
1111
 
895
1112
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
896
1113
  "header-format"?: WarpDatepicker["headerFormat"];
897
- /** Decides the format of the date as shown in the calendar header.
1114
+ /** The date format used in the calendar header.
898
1115
 
899
1116
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
900
1117
  headerFormat?: WarpDatepicker["headerFormat"];
901
- /** Decides the format of the weekday as shown above the grid of dates in the calendar.
1118
+ /** The weekday format shown above the calendar grid.
902
1119
 
903
1120
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
904
1121
  "weekday-format"?: WarpDatepicker["weekdayFormat"];
905
- /** Decides the format of the weekday as shown above the grid of dates in the calendar.
1122
+ /** The weekday format shown above the calendar grid.
906
1123
 
907
1124
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
908
1125
  weekdayFormat?: WarpDatepicker["weekdayFormat"];
909
- /** Decides the format of the day in the calendar as read to screen readers.
1126
+ /** The date format used for calendar day accessible names.
910
1127
 
911
1128
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
912
1129
  "day-format"?: WarpDatepicker["dayFormat"];
913
- /** Decides the format of the day in the calendar as read to screen readers.
1130
+ /** The date format used for calendar day accessible names.
914
1131
 
915
1132
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
916
1133
  dayFormat?: WarpDatepicker["dayFormat"];
917
- /** Lets you control if a date in the calendar should be disabled.
1134
+ /** Function used to disable dates in the calendar.
918
1135
 
919
- This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
1136
+ Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar. */
920
1137
  isDayDisabled?: WarpDatepicker["isDayDisabled"];
921
1138
  /** */
922
1139
  isCalendarOpen?: WarpDatepicker["isCalendarOpen"];
@@ -943,41 +1160,49 @@ the query will point to an element that doesn't exist anymore. */
943
1160
  };
944
1161
 
945
1162
  export type WarpDatepickerSolidJsProps = {
946
- /** */
1163
+ /** The label displayed above the date input.
1164
+
1165
+ Use this to give the datepicker a visible and accessible name. */
947
1166
  "prop:label"?: WarpDatepicker["label"];
948
- /** Takes precedence over the `<html>` lang attribute. */
1167
+ /** The locale used for calendar labels and date formatting.
1168
+
1169
+ This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`. */
949
1170
  "prop:lang"?: WarpDatepicker["lang"];
950
- /** */
1171
+ /** The name submitted with the date value.
1172
+
1173
+ Use this when the datepicker belongs to a form and its value should be included in form data. */
951
1174
  "prop:name"?: WarpDatepicker["name"];
952
- /** */
1175
+ /** The selected date value.
1176
+
1177
+ Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets. */
953
1178
  "prop:value"?: WarpDatepicker["value"];
954
- /** Decides the format of the date as shown in the calendar header.
1179
+ /** The date format used in the calendar header.
955
1180
 
956
1181
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
957
1182
  "attr:header-format"?: WarpDatepicker["headerFormat"];
958
- /** Decides the format of the date as shown in the calendar header.
1183
+ /** The date format used in the calendar header.
959
1184
 
960
1185
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
961
1186
  "prop:headerFormat"?: WarpDatepicker["headerFormat"];
962
- /** Decides the format of the weekday as shown above the grid of dates in the calendar.
1187
+ /** The weekday format shown above the calendar grid.
963
1188
 
964
1189
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
965
1190
  "attr:weekday-format"?: WarpDatepicker["weekdayFormat"];
966
- /** Decides the format of the weekday as shown above the grid of dates in the calendar.
1191
+ /** The weekday format shown above the calendar grid.
967
1192
 
968
1193
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
969
1194
  "prop:weekdayFormat"?: WarpDatepicker["weekdayFormat"];
970
- /** Decides the format of the day in the calendar as read to screen readers.
1195
+ /** The date format used for calendar day accessible names.
971
1196
 
972
1197
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
973
1198
  "attr:day-format"?: WarpDatepicker["dayFormat"];
974
- /** Decides the format of the day in the calendar as read to screen readers.
1199
+ /** The date format used for calendar day accessible names.
975
1200
 
976
1201
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
977
1202
  "prop:dayFormat"?: WarpDatepicker["dayFormat"];
978
- /** Lets you control if a date in the calendar should be disabled.
1203
+ /** Function used to disable dates in the calendar.
979
1204
 
980
- This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
1205
+ Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar. */
981
1206
  "prop:isDayDisabled"?: WarpDatepicker["isDayDisabled"];
982
1207
  /** */
983
1208
  "prop:isCalendarOpen"?: WarpDatepicker["isCalendarOpen"];
@@ -1009,31 +1234,31 @@ the query will point to an element that doesn't exist anymore. */
1009
1234
  };
1010
1235
 
1011
1236
  export type WarpExpandableProps = {
1012
- /** */
1237
+ /** Controls component's expanded state */
1013
1238
  expanded?: WarpExpandable["expanded"];
1014
- /** */
1239
+ /** Component title. Used to display the title value which is always present regardless of whether the component is open or closed. */
1015
1240
  title?: WarpExpandable["title"];
1016
- /** */
1241
+ /** Will make the expandable a Box */
1017
1242
  box?: WarpExpandable["box"];
1018
- /** */
1243
+ /** Will make the expandable full-width on the sm breakpoint size */
1019
1244
  bleed?: WarpExpandable["bleed"];
1020
- /** */
1245
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1021
1246
  "button-class"?: WarpExpandable["buttonClass"];
1022
- /** */
1247
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1023
1248
  buttonClass?: WarpExpandable["buttonClass"];
1024
- /** */
1249
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1025
1250
  "content-class"?: WarpExpandable["contentClass"];
1026
- /** */
1251
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1027
1252
  contentClass?: WarpExpandable["contentClass"];
1028
- /** */
1253
+ /** Controls chevron visibility */
1029
1254
  "no-chevron"?: WarpExpandable["noChevron"];
1030
- /** */
1255
+ /** Controls chevron visibility */
1031
1256
  noChevron?: WarpExpandable["noChevron"];
1032
- /** */
1257
+ /** Will animate the expansion/collapse */
1033
1258
  animated?: WarpExpandable["animated"];
1034
- /** */
1259
+ /** Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. */
1035
1260
  "heading-level"?: WarpExpandable["headingLevel"];
1036
- /** */
1261
+ /** Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. */
1037
1262
  headingLevel?: WarpExpandable["headingLevel"];
1038
1263
  /** */
1039
1264
  _hasTitle?: WarpExpandable["_hasTitle"];
@@ -1042,31 +1267,31 @@ export type WarpExpandableProps = {
1042
1267
  };
1043
1268
 
1044
1269
  export type WarpExpandableSolidJsProps = {
1045
- /** */
1270
+ /** Controls component's expanded state */
1046
1271
  "prop:expanded"?: WarpExpandable["expanded"];
1047
- /** */
1272
+ /** Component title. Used to display the title value which is always present regardless of whether the component is open or closed. */
1048
1273
  "prop:title"?: WarpExpandable["title"];
1049
- /** */
1274
+ /** Will make the expandable a Box */
1050
1275
  "prop:box"?: WarpExpandable["box"];
1051
- /** */
1276
+ /** Will make the expandable full-width on the sm breakpoint size */
1052
1277
  "prop:bleed"?: WarpExpandable["bleed"];
1053
- /** */
1278
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1054
1279
  "attr:button-class"?: WarpExpandable["buttonClass"];
1055
- /** */
1280
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1056
1281
  "prop:buttonClass"?: WarpExpandable["buttonClass"];
1057
- /** */
1282
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1058
1283
  "attr:content-class"?: WarpExpandable["contentClass"];
1059
- /** */
1284
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1060
1285
  "prop:contentClass"?: WarpExpandable["contentClass"];
1061
- /** */
1286
+ /** Controls chevron visibility */
1062
1287
  "bool:no-chevron"?: WarpExpandable["noChevron"];
1063
- /** */
1288
+ /** Controls chevron visibility */
1064
1289
  "prop:noChevron"?: WarpExpandable["noChevron"];
1065
- /** */
1290
+ /** Will animate the expansion/collapse */
1066
1291
  "prop:animated"?: WarpExpandable["animated"];
1067
- /** */
1292
+ /** Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. */
1068
1293
  "attr:heading-level"?: WarpExpandable["headingLevel"];
1069
- /** */
1294
+ /** Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. */
1070
1295
  "prop:headingLevel"?: WarpExpandable["headingLevel"];
1071
1296
  /** */
1072
1297
  "prop:_hasTitle"?: WarpExpandable["_hasTitle"];
@@ -1079,23 +1304,19 @@ export type WarpExpandableSolidJsProps = {
1079
1304
  textContent?: string | number;
1080
1305
  };
1081
1306
 
1082
- export type ModalMainProps = {
1083
- /** */
1084
- show?: ModalMain["show"];
1085
- /** */
1086
- "content-id"?: ModalMain["contentId"];
1087
- /** */
1088
- contentId?: ModalMain["contentId"];
1089
- /** */
1090
- "ignore-backdrop-clicks"?: ModalMain["ignoreBackdropClicks"];
1091
- /** */
1092
- ignoreBackdropClicks?: ModalMain["ignoreBackdropClicks"];
1093
- /** */
1094
- dialogEl?: ModalMain["dialogEl"];
1307
+ export type WarpModalProps = {
1308
+ /** Controls if the modal should show or hide.
1309
+
1310
+ You can also call the `open()` and `close()` methods. */
1311
+ show?: WarpModal["show"];
1095
1312
  /** */
1096
- dialogInnerEl?: ModalMain["dialogInnerEl"];
1313
+ "content-id"?: WarpModal["contentId"];
1097
1314
  /** */
1098
- contentEl?: ModalMain["contentEl"];
1315
+ contentId?: WarpModal["contentId"];
1316
+ /** Ignores clicks to the backdrop when set */
1317
+ "ignore-backdrop-clicks"?: WarpModal["ignoreBackdropClicks"];
1318
+ /** Ignores clicks to the backdrop when set */
1319
+ ignoreBackdropClicks?: WarpModal["ignoreBackdropClicks"];
1099
1320
 
1100
1321
  /** */
1101
1322
  onshown?: (e: CustomEvent) => void;
@@ -1103,23 +1324,19 @@ export type ModalMainProps = {
1103
1324
  onhidden?: (e: CustomEvent) => void;
1104
1325
  };
1105
1326
 
1106
- export type ModalMainSolidJsProps = {
1107
- /** */
1108
- "prop:show"?: ModalMain["show"];
1109
- /** */
1110
- "attr:content-id"?: ModalMain["contentId"];
1111
- /** */
1112
- "prop:contentId"?: ModalMain["contentId"];
1113
- /** */
1114
- "bool:ignore-backdrop-clicks"?: ModalMain["ignoreBackdropClicks"];
1115
- /** */
1116
- "prop:ignoreBackdropClicks"?: ModalMain["ignoreBackdropClicks"];
1117
- /** */
1118
- "prop:dialogEl"?: ModalMain["dialogEl"];
1327
+ export type WarpModalSolidJsProps = {
1328
+ /** Controls if the modal should show or hide.
1329
+
1330
+ You can also call the `open()` and `close()` methods. */
1331
+ "prop:show"?: WarpModal["show"];
1119
1332
  /** */
1120
- "prop:dialogInnerEl"?: ModalMain["dialogInnerEl"];
1333
+ "attr:content-id"?: WarpModal["contentId"];
1121
1334
  /** */
1122
- "prop:contentEl"?: ModalMain["contentEl"];
1335
+ "prop:contentId"?: WarpModal["contentId"];
1336
+ /** Ignores clicks to the backdrop when set */
1337
+ "bool:ignore-backdrop-clicks"?: WarpModal["ignoreBackdropClicks"];
1338
+ /** Ignores clicks to the backdrop when set */
1339
+ "prop:ignoreBackdropClicks"?: WarpModal["ignoreBackdropClicks"];
1123
1340
  /** */
1124
1341
  "on:shown"?: (e: CustomEvent) => void;
1125
1342
  /** */
@@ -1131,42 +1348,38 @@ export type ModalMainSolidJsProps = {
1131
1348
  textContent?: string | number;
1132
1349
  };
1133
1350
 
1134
- export type ModalFooterProps = {};
1351
+ export type WarpModalFooterProps = {};
1135
1352
 
1136
- export type ModalFooterSolidJsProps = {
1353
+ export type WarpModalFooterSolidJsProps = {
1137
1354
  /** Set the innerHTML of the element */
1138
1355
  innerHTML?: string;
1139
1356
  /** Set the textContent of the element */
1140
1357
  textContent?: string | number;
1141
1358
  };
1142
1359
 
1143
- export type ModalHeaderProps = {
1144
- /** */
1145
- title?: ModalHeader["title"];
1146
- /** */
1147
- back?: ModalHeader["back"];
1148
- /** */
1149
- "no-close"?: ModalHeader["noClose"];
1150
- /** */
1151
- noClose?: ModalHeader["noClose"];
1152
- /** */
1153
- titleEl?: ModalHeader["titleEl"];
1360
+ export type WarpModalHeaderProps = {
1361
+ /** A short but descriptive title for the modal */
1362
+ title?: WarpModalHeader["title"];
1363
+ /** Whether the modal header should have a back button */
1364
+ back?: WarpModalHeader["back"];
1365
+ /** Lets you hide the close button in the header */
1366
+ "no-close"?: WarpModalHeader["noClose"];
1367
+ /** Lets you hide the close button in the header */
1368
+ noClose?: WarpModalHeader["noClose"];
1154
1369
 
1155
1370
  /** */
1156
1371
  onbackClicked?: (e: CustomEvent) => void;
1157
1372
  };
1158
1373
 
1159
- export type ModalHeaderSolidJsProps = {
1160
- /** */
1161
- "prop:title"?: ModalHeader["title"];
1162
- /** */
1163
- "prop:back"?: ModalHeader["back"];
1164
- /** */
1165
- "bool:no-close"?: ModalHeader["noClose"];
1166
- /** */
1167
- "prop:noClose"?: ModalHeader["noClose"];
1168
- /** */
1169
- "prop:titleEl"?: ModalHeader["titleEl"];
1374
+ export type WarpModalHeaderSolidJsProps = {
1375
+ /** A short but descriptive title for the modal */
1376
+ "prop:title"?: WarpModalHeader["title"];
1377
+ /** Whether the modal header should have a back button */
1378
+ "prop:back"?: WarpModalHeader["back"];
1379
+ /** Lets you hide the close button in the header */
1380
+ "bool:no-close"?: WarpModalHeader["noClose"];
1381
+ /** Lets you hide the close button in the header */
1382
+ "prop:noClose"?: WarpModalHeader["noClose"];
1170
1383
  /** */
1171
1384
  "on:backClicked"?: (e: CustomEvent) => void;
1172
1385
 
@@ -1177,24 +1390,24 @@ export type ModalHeaderSolidJsProps = {
1177
1390
  };
1178
1391
 
1179
1392
  export type WarpPageIndicatorProps = {
1180
- /** Currently selected page (1-based index, clamped to valid range) */
1393
+ /** Currently selected page (1-based index) */
1181
1394
  "selected-page"?: WarpPageIndicator["selectedPage"];
1182
- /** Currently selected page (1-based index, clamped to valid range) */
1395
+ /** Currently selected page (1-based index) */
1183
1396
  selectedPage?: WarpPageIndicator["selectedPage"];
1184
- /** Total number of pages (minimum 1) */
1397
+ /** Total number of pages */
1185
1398
  "page-count"?: WarpPageIndicator["pageCount"];
1186
- /** Total number of pages (minimum 1) */
1399
+ /** Total number of pages */
1187
1400
  pageCount?: WarpPageIndicator["pageCount"];
1188
1401
  };
1189
1402
 
1190
1403
  export type WarpPageIndicatorSolidJsProps = {
1191
- /** Currently selected page (1-based index, clamped to valid range) */
1404
+ /** Currently selected page (1-based index) */
1192
1405
  "attr:selected-page"?: WarpPageIndicator["selectedPage"];
1193
- /** Currently selected page (1-based index, clamped to valid range) */
1406
+ /** Currently selected page (1-based index) */
1194
1407
  "prop:selectedPage"?: WarpPageIndicator["selectedPage"];
1195
- /** Total number of pages (minimum 1) */
1408
+ /** Total number of pages */
1196
1409
  "attr:page-count"?: WarpPageIndicator["pageCount"];
1197
- /** Total number of pages (minimum 1) */
1410
+ /** Total number of pages */
1198
1411
  "prop:pageCount"?: WarpPageIndicator["pageCount"];
1199
1412
 
1200
1413
  /** Set the innerHTML of the element */
@@ -1204,41 +1417,49 @@ export type WarpPageIndicatorSolidJsProps = {
1204
1417
  };
1205
1418
 
1206
1419
  export type WarpPaginationProps = {
1207
- /** */
1420
+ /** The base URL used to construct page links, for example `/search?page=`.
1421
+
1422
+ The page number is appended to this URL. */
1208
1423
  "base-url"?: WarpPagination["baseUrl"];
1209
- /** */
1424
+ /** The base URL used to construct page links, for example `/search?page=`.
1425
+
1426
+ The page number is appended to this URL. */
1210
1427
  baseUrl?: WarpPagination["baseUrl"];
1211
- /** */
1428
+ /** The total number of pages. */
1212
1429
  pages?: WarpPagination["pages"];
1213
- /** */
1430
+ /** The currently active page number. */
1214
1431
  "current-page"?: WarpPagination["currentPageNumber"];
1215
- /** */
1432
+ /** The currently active page number. */
1216
1433
  currentPageNumber?: WarpPagination["currentPageNumber"];
1217
- /** */
1434
+ /** The maximum number of page numbers visible. */
1218
1435
  "visible-pages"?: WarpPagination["visiblePages"];
1219
- /** */
1436
+ /** The maximum number of page numbers visible. */
1220
1437
  visiblePages?: WarpPagination["visiblePages"];
1221
1438
 
1222
- /** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
1439
+ /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
1223
1440
  "onpage-click"?: (e: CustomEvent) => void;
1224
1441
  };
1225
1442
 
1226
1443
  export type WarpPaginationSolidJsProps = {
1227
- /** */
1444
+ /** The base URL used to construct page links, for example `/search?page=`.
1445
+
1446
+ The page number is appended to this URL. */
1228
1447
  "attr:base-url"?: WarpPagination["baseUrl"];
1229
- /** */
1448
+ /** The base URL used to construct page links, for example `/search?page=`.
1449
+
1450
+ The page number is appended to this URL. */
1230
1451
  "prop:baseUrl"?: WarpPagination["baseUrl"];
1231
- /** */
1452
+ /** The total number of pages. */
1232
1453
  "prop:pages"?: WarpPagination["pages"];
1233
- /** */
1454
+ /** The currently active page number. */
1234
1455
  "attr:current-page"?: WarpPagination["currentPageNumber"];
1235
- /** */
1456
+ /** The currently active page number. */
1236
1457
  "prop:currentPageNumber"?: WarpPagination["currentPageNumber"];
1237
- /** */
1458
+ /** The maximum number of page numbers visible. */
1238
1459
  "attr:visible-pages"?: WarpPagination["visiblePages"];
1239
- /** */
1460
+ /** The maximum number of page numbers visible. */
1240
1461
  "prop:visiblePages"?: WarpPagination["visiblePages"];
1241
- /** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
1462
+ /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
1242
1463
  "on:page-click"?: (e: CustomEvent) => void;
1243
1464
 
1244
1465
  /** Set the innerHTML of the element */
@@ -1248,69 +1469,61 @@ export type WarpPaginationSolidJsProps = {
1248
1469
  };
1249
1470
 
1250
1471
  export type WarpPillProps = {
1251
- /** */
1472
+ /** Whether the pill should be removable via a close button. */
1252
1473
  "can-close"?: WarpPill["canClose"];
1253
- /** */
1474
+ /** Whether the pill should be removable via a close button. */
1254
1475
  canClose?: WarpPill["canClose"];
1255
- /** */
1476
+ /** Whether the pill should be rendered as a suggestion. */
1256
1477
  suggestion?: WarpPill["suggestion"];
1257
1478
  /** @deprecated Used "open-arial-label" instead. */
1258
1479
  "open-sr-label"?: WarpPill["openSrLabel"];
1259
1480
  /** @deprecated Used "open-arial-label" instead. */
1260
1481
  openSrLabel?: WarpPill["openSrLabel"];
1261
- /** */
1482
+ /** Label read by screen readers when targeting the pill. */
1262
1483
  "open-aria-label"?: WarpPill["openAriaLabel"];
1263
- /** */
1484
+ /** Label read by screen readers when targeting the pill. */
1264
1485
  openAriaLabel?: WarpPill["openAriaLabel"];
1265
1486
  /** @deprecated Used "close-arial-label" instead. */
1266
1487
  "close-sr-label"?: WarpPill["closeSrLabel"];
1267
1488
  /** @deprecated Used "close-arial-label" instead. */
1268
1489
  closeSrLabel?: WarpPill["closeSrLabel"];
1269
- /** */
1490
+ /** Label read by screen readers when targeting the close button. */
1270
1491
  "close-aria-label"?: WarpPill["closeAriaLabel"];
1271
- /** */
1492
+ /** Label read by screen readers when targeting the close button. */
1272
1493
  closeAriaLabel?: WarpPill["closeAriaLabel"];
1273
- /** */
1274
- openFilterSrText?: WarpPill["openFilterSrText"];
1275
- /** */
1276
- removeFilterSrText?: WarpPill["removeFilterSrText"];
1277
1494
 
1278
- /** */
1495
+ /** Fires when the pill itself is clicked. */
1279
1496
  "onw-pill-click"?: (e: CustomEvent) => void;
1280
- /** */
1497
+ /** Fires when the pill's close button is clicked. */
1281
1498
  "onw-pill-close"?: (e: CustomEvent) => void;
1282
1499
  };
1283
1500
 
1284
1501
  export type WarpPillSolidJsProps = {
1285
- /** */
1502
+ /** Whether the pill should be removable via a close button. */
1286
1503
  "bool:can-close"?: WarpPill["canClose"];
1287
- /** */
1504
+ /** Whether the pill should be removable via a close button. */
1288
1505
  "prop:canClose"?: WarpPill["canClose"];
1289
- /** */
1506
+ /** Whether the pill should be rendered as a suggestion. */
1290
1507
  "prop:suggestion"?: WarpPill["suggestion"];
1291
1508
  /** @deprecated Used "open-arial-label" instead. */
1292
1509
  "attr:open-sr-label"?: WarpPill["openSrLabel"];
1293
1510
  /** @deprecated Used "open-arial-label" instead. */
1294
1511
  "prop:openSrLabel"?: WarpPill["openSrLabel"];
1295
- /** */
1512
+ /** Label read by screen readers when targeting the pill. */
1296
1513
  "attr:open-aria-label"?: WarpPill["openAriaLabel"];
1297
- /** */
1514
+ /** Label read by screen readers when targeting the pill. */
1298
1515
  "prop:openAriaLabel"?: WarpPill["openAriaLabel"];
1299
1516
  /** @deprecated Used "close-arial-label" instead. */
1300
1517
  "attr:close-sr-label"?: WarpPill["closeSrLabel"];
1301
1518
  /** @deprecated Used "close-arial-label" instead. */
1302
1519
  "prop:closeSrLabel"?: WarpPill["closeSrLabel"];
1303
- /** */
1520
+ /** Label read by screen readers when targeting the close button. */
1304
1521
  "attr:close-aria-label"?: WarpPill["closeAriaLabel"];
1305
- /** */
1522
+ /** Label read by screen readers when targeting the close button. */
1306
1523
  "prop:closeAriaLabel"?: WarpPill["closeAriaLabel"];
1307
- /** */
1308
- "prop:openFilterSrText"?: WarpPill["openFilterSrText"];
1309
- /** */
1310
- "prop:removeFilterSrText"?: WarpPill["removeFilterSrText"];
1311
- /** */
1524
+ /** Fires when the pill itself is clicked. */
1312
1525
  "on:w-pill-click"?: (e: CustomEvent) => void;
1313
- /** */
1526
+ /** Fires when the pill's close button is clicked. */
1314
1527
  "on:w-pill-close"?: (e: CustomEvent) => void;
1315
1528
 
1316
1529
  /** Set the innerHTML of the element */
@@ -1884,10 +2097,12 @@ export type CustomElements = {
1884
2097
  * Component attributes and properties that can be applied to the element or by using JavaScript.
1885
2098
  *
1886
2099
  * - `name`: Icon filename (without .svg)
1887
- * - `size`: Size: small, medium, large or pixel value (e.g. "32px")
1888
- * - `locale`: Locale used in CDN URL
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'.
1889
2104
  */
1890
- "w-icon": Partial<WIconProps & BaseProps<WIcon> & BaseEvents>;
2105
+ "w-icon": Partial<WarpIconProps & BaseProps<WarpIcon> & BaseEvents>;
1891
2106
 
1892
2107
  /**
1893
2108
  * A single-line input component used for entering and editing textual or numeric data.
@@ -1998,19 +2213,24 @@ export type CustomElements = {
1998
2213
  *
1999
2214
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2000
2215
  *
2001
- * - `autofocus`: undefined
2002
- * - `variant`: undefined
2003
- * - `small`: undefined
2004
- * - `href`: undefined
2005
- * - `disabled`: undefined
2006
- * - `target`: undefined
2007
- * - `rel`: undefined
2008
- * - `full-width`/`fullWidth`: undefined
2216
+ * - `autofocus`: Focus the link after it is rendered
2217
+ * - `variant`: Visual style for the link/button.
2218
+ * - `small`: Render a smaller version
2219
+ * - `href`: The URL the link points to
2220
+ * - `disabled`: Applies disabled styling, but you need to disable clicks on your own.
2221
+ *
2222
+ * The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.
2223
+ * - `target`: Where to display the linked URL (e.g. `_blank`)
2224
+ * - `rel`: Relationship of the linked URL.
2225
+ *
2226
+ * If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
2227
+ * - `full-width`/`fullWidth`: Makes the link take up the full width of its parent
2009
2228
  */
2010
2229
  "w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & BaseEvents>;
2011
2230
 
2012
2231
  /**
2013
- * Buttons are used to perform actions, widh different visuals for different needs.
2232
+ * Performs an action or renders a link with button styling.
2233
+ * Use button variants to match action priority, risk, and context.
2014
2234
  *
2015
2235
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
2016
2236
  *
@@ -2018,22 +2238,38 @@ export type CustomElements = {
2018
2238
  *
2019
2239
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2020
2240
  *
2021
- * - `type`: undefined
2022
- * - `autofocus`: undefined
2023
- * - `variant`: undefined
2024
- * - `quiet`: undefined
2025
- * - `icon-only`/`iconOnly`: undefined
2026
- * - `small`: undefined
2027
- * - `loading`: undefined
2028
- * - `href`: undefined
2029
- * - `target`: undefined
2030
- * - `disabled`: undefined
2031
- * - `rel`: undefined
2032
- * - `full-width`/`fullWidth`: undefined
2033
- * - `button-class`/`buttonClass`: undefined
2034
- * - `name`: undefined
2035
- * - `value`: undefined
2036
- * - `ariaValueTextLoading`: undefined (property only)
2241
+ * - `type`: Native button type.
2242
+ * Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.
2243
+ * - `autofocus`: Focuses the button when it is first rendered.
2244
+ * Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.
2245
+ * - `variant`: Visual style of the button.
2246
+ * Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement.
2247
+ * - `quiet`: Deprecated quiet visual treatment flag
2248
+ * Use `variant="quiet"` instead.
2249
+ * - `icon-only`/`iconOnly`: Marks the button as icon-only.
2250
+ * Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.
2251
+ * - `small`: Renders the compact button size.
2252
+ * Use this in dense layouts where the default button size is too large.
2253
+ * - `loading`: Shows the loading state.
2254
+ * Use after the user has triggered an action and the action is in progress.
2255
+ * - `href`: URL for rendering the button as a link.
2256
+ * When set, the component renders `w-link` instead of a native `button`.
2257
+ * - `target`: Link browsing context.
2258
+ * Passed to the rendered link when `href` is set.
2259
+ * - `disabled`: Visually disables the button.
2260
+ * Disabled buttons are discouraged because they can hide the reason an action is unavailable.
2261
+ * - `rel`: Link relationship.
2262
+ * Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used.
2263
+ * - `full-width`/`fullWidth`: Makes the button fill its parent width.
2264
+ * Useful in narrow layouts where the button should span the available inline space.
2265
+ * - `button-class`/`buttonClass`: Deprecated class applied to the internal control
2266
+ * This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.
2267
+ * - `name`: Form control name.
2268
+ * Used when the button participates in form handling.
2269
+ * - `value`: Form control value.
2270
+ * Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset.
2271
+ * - `commandfor`: The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
2272
+ * - `command`: The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
2037
2273
  *
2038
2274
  * ## Methods
2039
2275
  *
@@ -2168,9 +2404,15 @@ export type CustomElements = {
2168
2404
  *
2169
2405
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2170
2406
  *
2171
- * - `selected`: undefined
2172
- * - `flat`: undefined
2173
- * - `clickable`: undefined
2407
+ * - `selected`: Whether the card is visually selected.
2408
+ *
2409
+ * Use this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes.
2410
+ * - `flat`: Whether the card uses the flat visual treatment.
2411
+ *
2412
+ * Flat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.
2413
+ * - `clickable`: Whether the whole card is interactive.
2414
+ *
2415
+ * When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.
2174
2416
  * - `buttonText`: undefined (property only)
2175
2417
  *
2176
2418
  * ## Methods
@@ -2188,13 +2430,27 @@ export type CustomElements = {
2188
2430
  *
2189
2431
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2190
2432
  *
2191
- * - `name`: The name of the checkbox, submitted as a name/value pair with form data.
2192
- * - `value`: The value of the checkbox, submitted as a name/value pair with form data.
2193
- * - `indeterminate`: Draws the checkbox in an indeterminate state.
2194
- * - `checked`: Draws the checkbox in a checked state (reflected to attribute).
2195
- * - `disabled`: Disables the checkbox.
2196
- * - `required`: Makes the checkbox a required field.
2197
- * - `invalid`: Draws the checkbox in an invalid state.
2433
+ * - `name`: The name of the checkbox.
2434
+ *
2435
+ * When the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name.
2436
+ * - `value`: The value submitted when the checkbox is checked.
2437
+ *
2438
+ * If no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.
2439
+ * - `indeterminate`: Whether the checkbox is visually indeterminate.
2440
+ *
2441
+ * Use this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked.
2442
+ * - `checked`: Whether the checkbox is checked.
2443
+ *
2444
+ * Checked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.
2445
+ * - `disabled`: Whether the checkbox is disabled.
2446
+ *
2447
+ * Disabled checkboxes cannot be focused, changed, or submitted with form data.
2448
+ * - `required`: Whether the checkbox must be checked before form submission.
2449
+ *
2450
+ * A required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.
2451
+ * - `invalid`: Whether the checkbox is visually invalid.
2452
+ *
2453
+ * Use this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form.
2198
2454
  * - `input`: undefined (property only)
2199
2455
  * - `_computedInvalid`: Computed invalid state: combines own invalid with group invalid (property only) (readonly)
2200
2456
  * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
@@ -2217,7 +2473,9 @@ export type CustomElements = {
2217
2473
  * - `checkValidity() => boolean`: Checks whether the checkbox passes constraint validation
2218
2474
  * - `reportValidity() => boolean`: Checks validity and shows the browser's validation message if invalid
2219
2475
  */
2220
- "w-checkbox": Partial<WCheckboxProps & BaseProps<WCheckbox> & BaseEvents>;
2476
+ "w-checkbox": Partial<
2477
+ WarpCheckboxProps & BaseProps<WarpCheckbox> & BaseEvents
2478
+ >;
2221
2479
 
2222
2480
  /**
2223
2481
  *
@@ -2227,11 +2485,23 @@ export type CustomElements = {
2227
2485
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2228
2486
  *
2229
2487
  * - `label`: The group label displayed above the checkboxes.
2488
+ *
2489
+ * Use this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies.
2230
2490
  * - `name`: The name applied to child checkboxes when they do not provide one.
2491
+ *
2492
+ * Use this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`.
2231
2493
  * - `optional`: Whether to show optional text next to the label.
2232
- * - `help-text`/`helpText`: undefined
2233
- * - `required`: Makes the checkbox group required.
2234
- * - `invalid`: Marks the checkbox group as invalid.
2494
+ *
2495
+ * Use this to indicate that selecting an option from the group is not required.
2496
+ * - `help-text`/`helpText`: Help text displayed below the checkbox group.
2497
+ *
2498
+ * Use this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message.
2499
+ * - `required`: Whether at least one checkbox in the group must be selected.
2500
+ *
2501
+ * Required validation is managed by the group. The individual checkboxes provide the submitted form values.
2502
+ * - `invalid`: Whether the checkbox group is visually invalid.
2503
+ *
2504
+ * Use this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state.
2235
2505
  *
2236
2506
  * ## Methods
2237
2507
  *
@@ -2242,7 +2512,7 @@ export type CustomElements = {
2242
2512
  * - `focus(options?: FocusOptions) => void`: Sets focus on the checkbox group.
2243
2513
  */
2244
2514
  "w-checkbox-group": Partial<
2245
- WCheckboxGroupProps & BaseProps<WCheckboxGroup> & BaseEvents
2515
+ WarpCheckboxGroupProps & BaseProps<WarpCheckboxGroup> & BaseEvents
2246
2516
  >;
2247
2517
 
2248
2518
  /**
@@ -2254,21 +2524,51 @@ export type CustomElements = {
2254
2524
  *
2255
2525
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2256
2526
  *
2257
- * - `options`: The available options to select from
2258
- * - `label`: Label above input
2259
- * - `placeholder`: Input placeholder
2260
- * - `value`: The input value
2261
- * - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field
2262
- * - `select-on-blur`/`selectOnBlur`: Select active option on blur
2263
- * - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted
2264
- * - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering
2265
- * - `invalid`: Renders the input field in an invalid state
2266
- * - `help-text`/`helpText`: The content to display as the help text
2267
- * - `disabled`: Whether the element is disabled
2268
- * - `required`: Whether the element is required
2269
- * - `optional`: Whether to show optional text
2270
- * - `name`: Name attribute for form submission
2271
- * - `autocomplete`: Autocomplete attribute for the input field
2527
+ * - `options`: The available options to select from.
2528
+ *
2529
+ * Use this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.
2530
+ * - `label`: The label displayed above the input.
2531
+ *
2532
+ * Use this to give the combobox a visible and accessible name.
2533
+ * - `placeholder`: Placeholder text displayed when the input is empty.
2534
+ *
2535
+ * Use this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.
2536
+ * - `value`: The selected or typed value.
2537
+ *
2538
+ * When an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.
2539
+ * - `open-on-focus`/`openOnFocus`: Whether the option list opens when the input receives focus.
2540
+ *
2541
+ * Use this when users should see available options before they start typing.
2542
+ * - `select-on-blur`/`selectOnBlur`: Whether the active option is selected when the input loses focus.
2543
+ *
2544
+ * When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.
2545
+ * - `match-text-segments`/`matchTextSegments`: Whether matching text segments in options are highlighted.
2546
+ *
2547
+ * Use this to visually emphasize the part of each option that matches the current input value.
2548
+ * - `disable-static-filtering`/`disableStaticFiltering`: Whether built-in client-side filtering is disabled.
2549
+ *
2550
+ * Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.
2551
+ * - `invalid`: Whether the combobox is visually invalid.
2552
+ *
2553
+ * Use this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.
2554
+ * - `help-text`/`helpText`: Help text displayed below the input.
2555
+ *
2556
+ * Use this for supporting guidance or validation feedback.
2557
+ * - `disabled`: Whether the combobox is disabled.
2558
+ *
2559
+ * Disabled comboboxes cannot be focused, changed, or submitted with form data.
2560
+ * - `required`: Whether the combobox is required before form submission.
2561
+ *
2562
+ * Use this when the user must provide a value before submitting the form.
2563
+ * - `optional`: Whether to show optional text next to the label.
2564
+ *
2565
+ * Use this to indicate that the combobox is not required.
2566
+ * - `name`: The name submitted with the combobox value.
2567
+ *
2568
+ * Use this when the combobox belongs to a form and its value should be included in form data.
2569
+ * - `autocomplete`: The autocomplete attribute passed to the internal input.
2570
+ *
2571
+ * Defaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.
2272
2572
  *
2273
2573
  * ## Methods
2274
2574
  *
@@ -2291,22 +2591,30 @@ export type CustomElements = {
2291
2591
  *
2292
2592
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2293
2593
  *
2294
- * - `label`: undefined
2295
- * - `lang`: Takes precedence over the `<html>` lang attribute.
2296
- * - `name`: undefined
2297
- * - `value`: undefined
2298
- * - `header-format`/`headerFormat`: Decides the format of the date as shown in the calendar header.
2594
+ * - `label`: The label displayed above the date input.
2595
+ *
2596
+ * Use this to give the datepicker a visible and accessible name.
2597
+ * - `lang`: The locale used for calendar labels and date formatting.
2598
+ *
2599
+ * This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.
2600
+ * - `name`: The name submitted with the date value.
2601
+ *
2602
+ * Use this when the datepicker belongs to a form and its value should be included in form data.
2603
+ * - `value`: The selected date value.
2604
+ *
2605
+ * Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.
2606
+ * - `header-format`/`headerFormat`: The date format used in the calendar header.
2299
2607
  *
2300
2608
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
2301
- * - `weekday-format`/`weekdayFormat`: Decides the format of the weekday as shown above the grid of dates in the calendar.
2609
+ * - `weekday-format`/`weekdayFormat`: The weekday format shown above the calendar grid.
2302
2610
  *
2303
2611
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
2304
- * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
2612
+ * - `day-format`/`dayFormat`: The date format used for calendar day accessible names.
2305
2613
  *
2306
2614
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
2307
- * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
2615
+ * - `isDayDisabled`: Function used to disable dates in the calendar.
2308
2616
  *
2309
- * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
2617
+ * Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar. (property only)
2310
2618
  * - `isCalendarOpen`: undefined (property only)
2311
2619
  * - `navigationDate`: undefined (property only)
2312
2620
  * - `selectedDate`: undefined (property only) (readonly)
@@ -2337,21 +2645,19 @@ export type CustomElements = {
2337
2645
  /**
2338
2646
  * Expandable is a layout component used for creating expandable content areas on a page.
2339
2647
  *
2340
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
2341
- *
2342
2648
  * ## Attributes & Properties
2343
2649
  *
2344
2650
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2345
2651
  *
2346
- * - `expanded`: undefined
2347
- * - `title`: undefined
2348
- * - `box`: undefined
2349
- * - `bleed`: undefined
2652
+ * - `expanded`: Controls component's expanded state
2653
+ * - `title`: Component title. Used to display the title value which is always present regardless of whether the component is open or closed.
2654
+ * - `box`: Will make the expandable a Box
2655
+ * - `bleed`: Will make the expandable full-width on the sm breakpoint size
2350
2656
  * - `button-class`/`buttonClass`: undefined
2351
2657
  * - `content-class`/`contentClass`: undefined
2352
- * - `no-chevron`/`noChevron`: undefined
2353
- * - `animated`: undefined
2354
- * - `heading-level`/`headingLevel`: undefined
2658
+ * - `no-chevron`/`noChevron`: Controls chevron visibility
2659
+ * - `animated`: Will animate the expansion/collapse
2660
+ * - `heading-level`/`headingLevel`: Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
2355
2661
  * - `_hasTitle`: undefined
2356
2662
  * - `_showChevronUp`: undefined
2357
2663
  *
@@ -2368,18 +2674,15 @@ export type CustomElements = {
2368
2674
  /**
2369
2675
  * Modals (or dialogs) display important information that users need to acknowledge.
2370
2676
  *
2371
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
2372
- *
2373
2677
  * ## Attributes & Properties
2374
2678
  *
2375
2679
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2376
2680
  *
2377
- * - `show`: undefined
2681
+ * - `show`: Controls if the modal should show or hide.
2682
+ *
2683
+ * You can also call the `open()` and `close()` methods.
2378
2684
  * - `content-id`/`contentId`: undefined
2379
- * - `ignore-backdrop-clicks`/`ignoreBackdropClicks`: undefined
2380
- * - `dialogEl`: undefined (property only)
2381
- * - `dialogInnerEl`: undefined (property only)
2382
- * - `contentEl`: undefined (property only)
2685
+ * - `ignore-backdrop-clicks`/`ignoreBackdropClicks`: Ignores clicks to the backdrop when set
2383
2686
  *
2384
2687
  * ## Events
2385
2688
  *
@@ -2402,39 +2705,26 @@ export type CustomElements = {
2402
2705
  *
2403
2706
  * - `open() => void`: undefined
2404
2707
  * - `close() => void`: undefined
2405
- * - `handleListeners(verb = 'addEventListener') => void`: undefined
2406
- * - `eventPreventer(evt: Event) => void`: undefined
2407
- * - `closeOnBackdropClick(evt: MouseEvent) => void`: undefined
2408
- * - `interceptEscape(evt: KeyboardEvent) => void`: undefined
2409
- * - `modifyBorderRadius() => void`: undefined
2410
2708
  */
2411
- "w-modal": Partial<ModalMainProps & BaseProps<ModalMain> & BaseEvents>;
2709
+ "w-modal": Partial<WarpModalProps & BaseProps<WarpModal> & BaseEvents>;
2412
2710
 
2413
2711
  /**
2414
2712
  * The footer section of a modal, typically where you place actions.
2415
- *
2416
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
2417
2713
  */
2418
2714
  "w-modal-footer": Partial<
2419
- ModalFooterProps & BaseProps<ModalFooter> & BaseEvents
2715
+ WarpModalFooterProps & BaseProps<WarpModalFooter> & BaseEvents
2420
2716
  >;
2421
2717
 
2422
2718
  /**
2423
2719
  * The header section of a modal, typically where you place the title and a close button.
2424
2720
  *
2425
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
2426
- *
2427
2721
  * ## Attributes & Properties
2428
2722
  *
2429
2723
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2430
2724
  *
2431
- * - `title`: undefined
2432
- * - `back`: undefined
2433
- * - `no-close`/`noClose`: undefined
2434
- * - `titleEl`: undefined (property only)
2435
- * - `titleClasses`: undefined (property only) (readonly)
2436
- * - `backButton`: undefined (property only) (readonly)
2437
- * - `closeButton`: undefined (property only) (readonly)
2725
+ * - `title`: A short but descriptive title for the modal
2726
+ * - `back`: Whether the modal header should have a back button
2727
+ * - `no-close`/`noClose`: Lets you hide the close button in the header
2438
2728
  *
2439
2729
  * ## Events
2440
2730
  *
@@ -2447,28 +2737,22 @@ export type CustomElements = {
2447
2737
  * Areas where markup can be added to the component.
2448
2738
  *
2449
2739
  * - `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.
2450
- *
2451
- * ## Methods
2452
- *
2453
- * Methods that can be called to access component functionality.
2454
- *
2455
- * - `emitBack() => void`: undefined
2456
- * - `handleTopSlotChange(slotEvent) => void`: undefined
2457
2740
  */
2458
2741
  "w-modal-header": Partial<
2459
- ModalHeaderProps & BaseProps<ModalHeader> & BaseEvents
2742
+ WarpModalHeaderProps & BaseProps<WarpModalHeader> & BaseEvents
2460
2743
  >;
2461
2744
 
2462
2745
  /**
2463
2746
  * A page indicator component that displays a series of dots representing pages.
2747
+ *
2464
2748
  * One dot is highlighted to indicate the currently selected page.
2465
2749
  *
2466
2750
  * ## Attributes & Properties
2467
2751
  *
2468
2752
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2469
2753
  *
2470
- * - `selected-page`/`selectedPage`: Currently selected page (1-based index, clamped to valid range)
2471
- * - `page-count`/`pageCount`: Total number of pages (minimum 1)
2754
+ * - `selected-page`/`selectedPage`: Currently selected page (1-based index)
2755
+ * - `page-count`/`pageCount`: Total number of pages
2472
2756
  */
2473
2757
  "w-page-indicator": Partial<
2474
2758
  WarpPageIndicatorProps & BaseProps<WarpPageIndicator> & BaseEvents
@@ -2477,22 +2761,22 @@ export type CustomElements = {
2477
2761
  /**
2478
2762
  * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
2479
2763
  *
2480
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
2481
- *
2482
2764
  * ## Attributes & Properties
2483
2765
  *
2484
2766
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2485
2767
  *
2486
- * - `base-url`/`baseUrl`: undefined
2487
- * - `pages`: undefined
2488
- * - `current-page`/`currentPageNumber`: undefined
2489
- * - `visible-pages`/`visiblePages`: undefined
2768
+ * - `base-url`/`baseUrl`: The base URL used to construct page links, for example `/search?page=`.
2769
+ *
2770
+ * The page number is appended to this URL.
2771
+ * - `pages`: The total number of pages.
2772
+ * - `current-page`/`currentPageNumber`: The currently active page number.
2773
+ * - `visible-pages`/`visiblePages`: The maximum number of page numbers visible.
2490
2774
  *
2491
2775
  * ## Events
2492
2776
  *
2493
2777
  * Events that will be emitted by the component.
2494
2778
  *
2495
- * - `page-click`: Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
2779
+ * - `page-click`: Triggered when a link in the pagination is clicked. Contains the page number in `string` form.
2496
2780
  */
2497
2781
  "w-pagination": Partial<
2498
2782
  WarpPaginationProps & BaseProps<WarpPagination> & BaseEvents
@@ -2501,27 +2785,23 @@ export type CustomElements = {
2501
2785
  /**
2502
2786
  * 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.
2503
2787
  *
2504
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)
2505
- *
2506
2788
  * ## Attributes & Properties
2507
2789
  *
2508
2790
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2509
2791
  *
2510
- * - `can-close`/`canClose`: undefined
2511
- * - `suggestion`: undefined
2792
+ * - `can-close`/`canClose`: Whether the pill should be removable via a close button.
2793
+ * - `suggestion`: Whether the pill should be rendered as a suggestion.
2512
2794
  * - `open-sr-label`/`openSrLabel`: undefined
2513
- * - `open-aria-label`/`openAriaLabel`: undefined
2795
+ * - `open-aria-label`/`openAriaLabel`: Label read by screen readers when targeting the pill.
2514
2796
  * - `close-sr-label`/`closeSrLabel`: undefined
2515
- * - `close-aria-label`/`closeAriaLabel`: undefined
2516
- * - `openFilterSrText`: undefined (property only)
2517
- * - `removeFilterSrText`: undefined (property only)
2797
+ * - `close-aria-label`/`closeAriaLabel`: Label read by screen readers when targeting the close button.
2518
2798
  *
2519
2799
  * ## Events
2520
2800
  *
2521
2801
  * Events that will be emitted by the component.
2522
2802
  *
2523
- * - `w-pill-click`: undefined
2524
- * - `w-pill-close`: undefined
2803
+ * - `w-pill-click`: Fires when the pill itself is clicked.
2804
+ * - `w-pill-close`: Fires when the pill's close button is clicked.
2525
2805
  */
2526
2806
  "w-pill": Partial<WarpPillProps & BaseProps<WarpPill> & BaseEvents>;
2527
2807
 
@@ -2845,11 +3125,13 @@ export type CustomElementsSolidJs = {
2845
3125
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2846
3126
  *
2847
3127
  * - `name`: Icon filename (without .svg)
2848
- * - `size`: Size: small, medium, large or pixel value (e.g. "32px")
2849
- * - `locale`: Locale used in CDN URL
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'.
2850
3132
  */
2851
3133
  "w-icon": Partial<
2852
- WIconProps & WIconSolidJsProps & BaseProps<WIcon> & BaseEvents
3134
+ WarpIconProps & WarpIconSolidJsProps & BaseProps<WarpIcon> & BaseEvents
2853
3135
  >;
2854
3136
 
2855
3137
  /**
@@ -2968,21 +3250,26 @@ export type CustomElementsSolidJs = {
2968
3250
  *
2969
3251
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2970
3252
  *
2971
- * - `autofocus`: undefined
2972
- * - `variant`: undefined
2973
- * - `small`: undefined
2974
- * - `href`: undefined
2975
- * - `disabled`: undefined
2976
- * - `target`: undefined
2977
- * - `rel`: undefined
2978
- * - `full-width`/`fullWidth`: undefined
3253
+ * - `autofocus`: Focus the link after it is rendered
3254
+ * - `variant`: Visual style for the link/button.
3255
+ * - `small`: Render a smaller version
3256
+ * - `href`: The URL the link points to
3257
+ * - `disabled`: Applies disabled styling, but you need to disable clicks on your own.
3258
+ *
3259
+ * The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.
3260
+ * - `target`: Where to display the linked URL (e.g. `_blank`)
3261
+ * - `rel`: Relationship of the linked URL.
3262
+ *
3263
+ * If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
3264
+ * - `full-width`/`fullWidth`: Makes the link take up the full width of its parent
2979
3265
  */
2980
3266
  "w-link": Partial<
2981
3267
  WarpLinkProps & WarpLinkSolidJsProps & BaseProps<WarpLink> & BaseEvents
2982
3268
  >;
2983
3269
 
2984
3270
  /**
2985
- * Buttons are used to perform actions, widh different visuals for different needs.
3271
+ * Performs an action or renders a link with button styling.
3272
+ * Use button variants to match action priority, risk, and context.
2986
3273
  *
2987
3274
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
2988
3275
  *
@@ -2990,22 +3277,38 @@ export type CustomElementsSolidJs = {
2990
3277
  *
2991
3278
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2992
3279
  *
2993
- * - `type`: undefined
2994
- * - `autofocus`: undefined
2995
- * - `variant`: undefined
2996
- * - `quiet`: undefined
2997
- * - `icon-only`/`iconOnly`: undefined
2998
- * - `small`: undefined
2999
- * - `loading`: undefined
3000
- * - `href`: undefined
3001
- * - `target`: undefined
3002
- * - `disabled`: undefined
3003
- * - `rel`: undefined
3004
- * - `full-width`/`fullWidth`: undefined
3005
- * - `button-class`/`buttonClass`: undefined
3006
- * - `name`: undefined
3007
- * - `value`: undefined
3008
- * - `ariaValueTextLoading`: undefined (property only)
3280
+ * - `type`: Native button type.
3281
+ * Controls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.
3282
+ * - `autofocus`: Focuses the button when it is first rendered.
3283
+ * Applies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.
3284
+ * - `variant`: Visual style of the button.
3285
+ * Defaults to `secondary`. Use the variant that matches the action priority, risk, and placement.
3286
+ * - `quiet`: Deprecated quiet visual treatment flag
3287
+ * Use `variant="quiet"` instead.
3288
+ * - `icon-only`/`iconOnly`: Marks the button as icon-only.
3289
+ * Use this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.
3290
+ * - `small`: Renders the compact button size.
3291
+ * Use this in dense layouts where the default button size is too large.
3292
+ * - `loading`: Shows the loading state.
3293
+ * Use after the user has triggered an action and the action is in progress.
3294
+ * - `href`: URL for rendering the button as a link.
3295
+ * When set, the component renders `w-link` instead of a native `button`.
3296
+ * - `target`: Link browsing context.
3297
+ * Passed to the rendered link when `href` is set.
3298
+ * - `disabled`: Visually disables the button.
3299
+ * Disabled buttons are discouraged because they can hide the reason an action is unavailable.
3300
+ * - `rel`: Link relationship.
3301
+ * Passed to the rendered link when `href` is set. If `target="_blank"` is set and `rel` is omitted, `noopener` is used.
3302
+ * - `full-width`/`fullWidth`: Makes the button fill its parent width.
3303
+ * Useful in narrow layouts where the button should span the available inline space.
3304
+ * - `button-class`/`buttonClass`: Deprecated class applied to the internal control
3305
+ * This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.
3306
+ * - `name`: Form control name.
3307
+ * Used when the button participates in form handling.
3308
+ * - `value`: Form control value.
3309
+ * Used with `name` when the button participates in form handling. Resets to its initial value when the form is reset.
3310
+ * - `commandfor`: The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
3311
+ * - `command`: The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.
3009
3312
  *
3010
3313
  * ## Methods
3011
3314
  *
@@ -3155,9 +3458,15 @@ export type CustomElementsSolidJs = {
3155
3458
  *
3156
3459
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3157
3460
  *
3158
- * - `selected`: undefined
3159
- * - `flat`: undefined
3160
- * - `clickable`: undefined
3461
+ * - `selected`: Whether the card is visually selected.
3462
+ *
3463
+ * Use this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes.
3464
+ * - `flat`: Whether the card uses the flat visual treatment.
3465
+ *
3466
+ * Flat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.
3467
+ * - `clickable`: Whether the whole card is interactive.
3468
+ *
3469
+ * When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.
3161
3470
  * - `buttonText`: undefined (property only)
3162
3471
  *
3163
3472
  * ## Methods
@@ -3177,13 +3486,27 @@ export type CustomElementsSolidJs = {
3177
3486
  *
3178
3487
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3179
3488
  *
3180
- * - `name`: The name of the checkbox, submitted as a name/value pair with form data.
3181
- * - `value`: The value of the checkbox, submitted as a name/value pair with form data.
3182
- * - `indeterminate`: Draws the checkbox in an indeterminate state.
3183
- * - `checked`: Draws the checkbox in a checked state (reflected to attribute).
3184
- * - `disabled`: Disables the checkbox.
3185
- * - `required`: Makes the checkbox a required field.
3186
- * - `invalid`: Draws the checkbox in an invalid state.
3489
+ * - `name`: The name of the checkbox.
3490
+ *
3491
+ * When the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name.
3492
+ * - `value`: The value submitted when the checkbox is checked.
3493
+ *
3494
+ * If no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.
3495
+ * - `indeterminate`: Whether the checkbox is visually indeterminate.
3496
+ *
3497
+ * Use this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked.
3498
+ * - `checked`: Whether the checkbox is checked.
3499
+ *
3500
+ * Checked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.
3501
+ * - `disabled`: Whether the checkbox is disabled.
3502
+ *
3503
+ * Disabled checkboxes cannot be focused, changed, or submitted with form data.
3504
+ * - `required`: Whether the checkbox must be checked before form submission.
3505
+ *
3506
+ * A required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.
3507
+ * - `invalid`: Whether the checkbox is visually invalid.
3508
+ *
3509
+ * Use this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form.
3187
3510
  * - `input`: undefined (property only)
3188
3511
  * - `_computedInvalid`: Computed invalid state: combines own invalid with group invalid (property only) (readonly)
3189
3512
  * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
@@ -3207,7 +3530,10 @@ export type CustomElementsSolidJs = {
3207
3530
  * - `reportValidity() => boolean`: Checks validity and shows the browser's validation message if invalid
3208
3531
  */
3209
3532
  "w-checkbox": Partial<
3210
- WCheckboxProps & WCheckboxSolidJsProps & BaseProps<WCheckbox> & BaseEvents
3533
+ WarpCheckboxProps &
3534
+ WarpCheckboxSolidJsProps &
3535
+ BaseProps<WarpCheckbox> &
3536
+ BaseEvents
3211
3537
  >;
3212
3538
 
3213
3539
  /**
@@ -3218,11 +3544,23 @@ export type CustomElementsSolidJs = {
3218
3544
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3219
3545
  *
3220
3546
  * - `label`: The group label displayed above the checkboxes.
3547
+ *
3548
+ * Use this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies.
3221
3549
  * - `name`: The name applied to child checkboxes when they do not provide one.
3550
+ *
3551
+ * Use this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`.
3222
3552
  * - `optional`: Whether to show optional text next to the label.
3223
- * - `help-text`/`helpText`: undefined
3224
- * - `required`: Makes the checkbox group required.
3225
- * - `invalid`: Marks the checkbox group as invalid.
3553
+ *
3554
+ * Use this to indicate that selecting an option from the group is not required.
3555
+ * - `help-text`/`helpText`: Help text displayed below the checkbox group.
3556
+ *
3557
+ * Use this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message.
3558
+ * - `required`: Whether at least one checkbox in the group must be selected.
3559
+ *
3560
+ * Required validation is managed by the group. The individual checkboxes provide the submitted form values.
3561
+ * - `invalid`: Whether the checkbox group is visually invalid.
3562
+ *
3563
+ * Use this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state.
3226
3564
  *
3227
3565
  * ## Methods
3228
3566
  *
@@ -3233,9 +3571,9 @@ export type CustomElementsSolidJs = {
3233
3571
  * - `focus(options?: FocusOptions) => void`: Sets focus on the checkbox group.
3234
3572
  */
3235
3573
  "w-checkbox-group": Partial<
3236
- WCheckboxGroupProps &
3237
- WCheckboxGroupSolidJsProps &
3238
- BaseProps<WCheckboxGroup> &
3574
+ WarpCheckboxGroupProps &
3575
+ WarpCheckboxGroupSolidJsProps &
3576
+ BaseProps<WarpCheckboxGroup> &
3239
3577
  BaseEvents
3240
3578
  >;
3241
3579
 
@@ -3248,21 +3586,51 @@ export type CustomElementsSolidJs = {
3248
3586
  *
3249
3587
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3250
3588
  *
3251
- * - `options`: The available options to select from
3252
- * - `label`: Label above input
3253
- * - `placeholder`: Input placeholder
3254
- * - `value`: The input value
3255
- * - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field
3256
- * - `select-on-blur`/`selectOnBlur`: Select active option on blur
3257
- * - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted
3258
- * - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering
3259
- * - `invalid`: Renders the input field in an invalid state
3260
- * - `help-text`/`helpText`: The content to display as the help text
3261
- * - `disabled`: Whether the element is disabled
3262
- * - `required`: Whether the element is required
3263
- * - `optional`: Whether to show optional text
3264
- * - `name`: Name attribute for form submission
3265
- * - `autocomplete`: Autocomplete attribute for the input field
3589
+ * - `options`: The available options to select from.
3590
+ *
3591
+ * Use this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.
3592
+ * - `label`: The label displayed above the input.
3593
+ *
3594
+ * Use this to give the combobox a visible and accessible name.
3595
+ * - `placeholder`: Placeholder text displayed when the input is empty.
3596
+ *
3597
+ * Use this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.
3598
+ * - `value`: The selected or typed value.
3599
+ *
3600
+ * When an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.
3601
+ * - `open-on-focus`/`openOnFocus`: Whether the option list opens when the input receives focus.
3602
+ *
3603
+ * Use this when users should see available options before they start typing.
3604
+ * - `select-on-blur`/`selectOnBlur`: Whether the active option is selected when the input loses focus.
3605
+ *
3606
+ * When enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.
3607
+ * - `match-text-segments`/`matchTextSegments`: Whether matching text segments in options are highlighted.
3608
+ *
3609
+ * Use this to visually emphasize the part of each option that matches the current input value.
3610
+ * - `disable-static-filtering`/`disableStaticFiltering`: Whether built-in client-side filtering is disabled.
3611
+ *
3612
+ * Use this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.
3613
+ * - `invalid`: Whether the combobox is visually invalid.
3614
+ *
3615
+ * Use this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.
3616
+ * - `help-text`/`helpText`: Help text displayed below the input.
3617
+ *
3618
+ * Use this for supporting guidance or validation feedback.
3619
+ * - `disabled`: Whether the combobox is disabled.
3620
+ *
3621
+ * Disabled comboboxes cannot be focused, changed, or submitted with form data.
3622
+ * - `required`: Whether the combobox is required before form submission.
3623
+ *
3624
+ * Use this when the user must provide a value before submitting the form.
3625
+ * - `optional`: Whether to show optional text next to the label.
3626
+ *
3627
+ * Use this to indicate that the combobox is not required.
3628
+ * - `name`: The name submitted with the combobox value.
3629
+ *
3630
+ * Use this when the combobox belongs to a form and its value should be included in form data.
3631
+ * - `autocomplete`: The autocomplete attribute passed to the internal input.
3632
+ *
3633
+ * Defaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.
3266
3634
  *
3267
3635
  * ## Methods
3268
3636
  *
@@ -3288,22 +3656,30 @@ export type CustomElementsSolidJs = {
3288
3656
  *
3289
3657
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3290
3658
  *
3291
- * - `label`: undefined
3292
- * - `lang`: Takes precedence over the `<html>` lang attribute.
3293
- * - `name`: undefined
3294
- * - `value`: undefined
3295
- * - `header-format`/`headerFormat`: Decides the format of the date as shown in the calendar header.
3659
+ * - `label`: The label displayed above the date input.
3660
+ *
3661
+ * Use this to give the datepicker a visible and accessible name.
3662
+ * - `lang`: The locale used for calendar labels and date formatting.
3663
+ *
3664
+ * This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.
3665
+ * - `name`: The name submitted with the date value.
3666
+ *
3667
+ * Use this when the datepicker belongs to a form and its value should be included in form data.
3668
+ * - `value`: The selected date value.
3669
+ *
3670
+ * Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.
3671
+ * - `header-format`/`headerFormat`: The date format used in the calendar header.
3296
3672
  *
3297
3673
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
3298
- * - `weekday-format`/`weekdayFormat`: Decides the format of the weekday as shown above the grid of dates in the calendar.
3674
+ * - `weekday-format`/`weekdayFormat`: The weekday format shown above the calendar grid.
3299
3675
  *
3300
3676
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
3301
- * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
3677
+ * - `day-format`/`dayFormat`: The date format used for calendar day accessible names.
3302
3678
  *
3303
3679
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
3304
- * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
3680
+ * - `isDayDisabled`: Function used to disable dates in the calendar.
3305
3681
  *
3306
- * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
3682
+ * Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar. (property only)
3307
3683
  * - `isCalendarOpen`: undefined (property only)
3308
3684
  * - `navigationDate`: undefined (property only)
3309
3685
  * - `selectedDate`: undefined (property only) (readonly)
@@ -3337,21 +3713,19 @@ export type CustomElementsSolidJs = {
3337
3713
  /**
3338
3714
  * Expandable is a layout component used for creating expandable content areas on a page.
3339
3715
  *
3340
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
3341
- *
3342
3716
  * ## Attributes & Properties
3343
3717
  *
3344
3718
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3345
3719
  *
3346
- * - `expanded`: undefined
3347
- * - `title`: undefined
3348
- * - `box`: undefined
3349
- * - `bleed`: undefined
3720
+ * - `expanded`: Controls component's expanded state
3721
+ * - `title`: Component title. Used to display the title value which is always present regardless of whether the component is open or closed.
3722
+ * - `box`: Will make the expandable a Box
3723
+ * - `bleed`: Will make the expandable full-width on the sm breakpoint size
3350
3724
  * - `button-class`/`buttonClass`: undefined
3351
3725
  * - `content-class`/`contentClass`: undefined
3352
- * - `no-chevron`/`noChevron`: undefined
3353
- * - `animated`: undefined
3354
- * - `heading-level`/`headingLevel`: undefined
3726
+ * - `no-chevron`/`noChevron`: Controls chevron visibility
3727
+ * - `animated`: Will animate the expansion/collapse
3728
+ * - `heading-level`/`headingLevel`: Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
3355
3729
  * - `_hasTitle`: undefined
3356
3730
  * - `_showChevronUp`: undefined
3357
3731
  *
@@ -3371,18 +3745,15 @@ export type CustomElementsSolidJs = {
3371
3745
  /**
3372
3746
  * Modals (or dialogs) display important information that users need to acknowledge.
3373
3747
  *
3374
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
3375
- *
3376
3748
  * ## Attributes & Properties
3377
3749
  *
3378
3750
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3379
3751
  *
3380
- * - `show`: undefined
3752
+ * - `show`: Controls if the modal should show or hide.
3753
+ *
3754
+ * You can also call the `open()` and `close()` methods.
3381
3755
  * - `content-id`/`contentId`: undefined
3382
- * - `ignore-backdrop-clicks`/`ignoreBackdropClicks`: undefined
3383
- * - `dialogEl`: undefined (property only)
3384
- * - `dialogInnerEl`: undefined (property only)
3385
- * - `contentEl`: undefined (property only)
3756
+ * - `ignore-backdrop-clicks`/`ignoreBackdropClicks`: Ignores clicks to the backdrop when set
3386
3757
  *
3387
3758
  * ## Events
3388
3759
  *
@@ -3405,44 +3776,31 @@ export type CustomElementsSolidJs = {
3405
3776
  *
3406
3777
  * - `open() => void`: undefined
3407
3778
  * - `close() => void`: undefined
3408
- * - `handleListeners(verb = 'addEventListener') => void`: undefined
3409
- * - `eventPreventer(evt: Event) => void`: undefined
3410
- * - `closeOnBackdropClick(evt: MouseEvent) => void`: undefined
3411
- * - `interceptEscape(evt: KeyboardEvent) => void`: undefined
3412
- * - `modifyBorderRadius() => void`: undefined
3413
3779
  */
3414
3780
  "w-modal": Partial<
3415
- ModalMainProps & ModalMainSolidJsProps & BaseProps<ModalMain> & BaseEvents
3781
+ WarpModalProps & WarpModalSolidJsProps & BaseProps<WarpModal> & BaseEvents
3416
3782
  >;
3417
3783
 
3418
3784
  /**
3419
3785
  * The footer section of a modal, typically where you place actions.
3420
- *
3421
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
3422
3786
  */
3423
3787
  "w-modal-footer": Partial<
3424
- ModalFooterProps &
3425
- ModalFooterSolidJsProps &
3426
- BaseProps<ModalFooter> &
3788
+ WarpModalFooterProps &
3789
+ WarpModalFooterSolidJsProps &
3790
+ BaseProps<WarpModalFooter> &
3427
3791
  BaseEvents
3428
3792
  >;
3429
3793
 
3430
3794
  /**
3431
3795
  * The header section of a modal, typically where you place the title and a close button.
3432
3796
  *
3433
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)
3434
- *
3435
3797
  * ## Attributes & Properties
3436
3798
  *
3437
3799
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3438
3800
  *
3439
- * - `title`: undefined
3440
- * - `back`: undefined
3441
- * - `no-close`/`noClose`: undefined
3442
- * - `titleEl`: undefined (property only)
3443
- * - `titleClasses`: undefined (property only) (readonly)
3444
- * - `backButton`: undefined (property only) (readonly)
3445
- * - `closeButton`: undefined (property only) (readonly)
3801
+ * - `title`: A short but descriptive title for the modal
3802
+ * - `back`: Whether the modal header should have a back button
3803
+ * - `no-close`/`noClose`: Lets you hide the close button in the header
3446
3804
  *
3447
3805
  * ## Events
3448
3806
  *
@@ -3455,31 +3813,25 @@ export type CustomElementsSolidJs = {
3455
3813
  * Areas where markup can be added to the component.
3456
3814
  *
3457
3815
  * - `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.
3458
- *
3459
- * ## Methods
3460
- *
3461
- * Methods that can be called to access component functionality.
3462
- *
3463
- * - `emitBack() => void`: undefined
3464
- * - `handleTopSlotChange(slotEvent) => void`: undefined
3465
3816
  */
3466
3817
  "w-modal-header": Partial<
3467
- ModalHeaderProps &
3468
- ModalHeaderSolidJsProps &
3469
- BaseProps<ModalHeader> &
3818
+ WarpModalHeaderProps &
3819
+ WarpModalHeaderSolidJsProps &
3820
+ BaseProps<WarpModalHeader> &
3470
3821
  BaseEvents
3471
3822
  >;
3472
3823
 
3473
3824
  /**
3474
3825
  * A page indicator component that displays a series of dots representing pages.
3826
+ *
3475
3827
  * One dot is highlighted to indicate the currently selected page.
3476
3828
  *
3477
3829
  * ## Attributes & Properties
3478
3830
  *
3479
3831
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3480
3832
  *
3481
- * - `selected-page`/`selectedPage`: Currently selected page (1-based index, clamped to valid range)
3482
- * - `page-count`/`pageCount`: Total number of pages (minimum 1)
3833
+ * - `selected-page`/`selectedPage`: Currently selected page (1-based index)
3834
+ * - `page-count`/`pageCount`: Total number of pages
3483
3835
  */
3484
3836
  "w-page-indicator": Partial<
3485
3837
  WarpPageIndicatorProps &
@@ -3491,22 +3843,22 @@ export type CustomElementsSolidJs = {
3491
3843
  /**
3492
3844
  * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
3493
3845
  *
3494
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
3495
- *
3496
3846
  * ## Attributes & Properties
3497
3847
  *
3498
3848
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3499
3849
  *
3500
- * - `base-url`/`baseUrl`: undefined
3501
- * - `pages`: undefined
3502
- * - `current-page`/`currentPageNumber`: undefined
3503
- * - `visible-pages`/`visiblePages`: undefined
3850
+ * - `base-url`/`baseUrl`: The base URL used to construct page links, for example `/search?page=`.
3851
+ *
3852
+ * The page number is appended to this URL.
3853
+ * - `pages`: The total number of pages.
3854
+ * - `current-page`/`currentPageNumber`: The currently active page number.
3855
+ * - `visible-pages`/`visiblePages`: The maximum number of page numbers visible.
3504
3856
  *
3505
3857
  * ## Events
3506
3858
  *
3507
3859
  * Events that will be emitted by the component.
3508
3860
  *
3509
- * - `page-click`: Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
3861
+ * - `page-click`: Triggered when a link in the pagination is clicked. Contains the page number in `string` form.
3510
3862
  */
3511
3863
  "w-pagination": Partial<
3512
3864
  WarpPaginationProps &
@@ -3518,27 +3870,23 @@ export type CustomElementsSolidJs = {
3518
3870
  /**
3519
3871
  * 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.
3520
3872
  *
3521
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)
3522
- *
3523
3873
  * ## Attributes & Properties
3524
3874
  *
3525
3875
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3526
3876
  *
3527
- * - `can-close`/`canClose`: undefined
3528
- * - `suggestion`: undefined
3877
+ * - `can-close`/`canClose`: Whether the pill should be removable via a close button.
3878
+ * - `suggestion`: Whether the pill should be rendered as a suggestion.
3529
3879
  * - `open-sr-label`/`openSrLabel`: undefined
3530
- * - `open-aria-label`/`openAriaLabel`: undefined
3880
+ * - `open-aria-label`/`openAriaLabel`: Label read by screen readers when targeting the pill.
3531
3881
  * - `close-sr-label`/`closeSrLabel`: undefined
3532
- * - `close-aria-label`/`closeAriaLabel`: undefined
3533
- * - `openFilterSrText`: undefined (property only)
3534
- * - `removeFilterSrText`: undefined (property only)
3882
+ * - `close-aria-label`/`closeAriaLabel`: Label read by screen readers when targeting the close button.
3535
3883
  *
3536
3884
  * ## Events
3537
3885
  *
3538
3886
  * Events that will be emitted by the component.
3539
3887
  *
3540
- * - `w-pill-click`: undefined
3541
- * - `w-pill-close`: undefined
3888
+ * - `w-pill-click`: Fires when the pill itself is clicked.
3889
+ * - `w-pill-close`: Fires when the pill's close button is clicked.
3542
3890
  */
3543
3891
  "w-pill": Partial<
3544
3892
  WarpPillProps & WarpPillSolidJsProps & BaseProps<WarpPill> & BaseEvents