@warp-ds/elements 2.10.0-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 (250) 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 +233 -87
  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/button.md +73 -2
  20. package/dist/docs/button/styling.md +72 -0
  21. package/dist/docs/card/accessibility.md +74 -0
  22. package/dist/docs/card/api.md +9 -3
  23. package/dist/docs/card/card.md +236 -5
  24. package/dist/docs/card/examples.md +75 -0
  25. package/dist/docs/card/styling.md +1 -0
  26. package/dist/docs/card/usage.md +76 -0
  27. package/dist/docs/checkbox/api.md +128 -0
  28. package/dist/docs/checkbox/checkbox.md +134 -0
  29. package/dist/docs/checkbox-group/accessibility.md +71 -0
  30. package/dist/docs/checkbox-group/api.md +79 -0
  31. package/dist/docs/checkbox-group/checkbox-group.md +492 -0
  32. package/dist/docs/checkbox-group/examples.md +105 -0
  33. package/dist/docs/checkbox-group/styling.md +132 -0
  34. package/dist/docs/checkbox-group/usage.md +95 -0
  35. package/dist/docs/combobox/accessibility.md +71 -0
  36. package/dist/docs/combobox/api.md +60 -30
  37. package/dist/docs/combobox/combobox.md +205 -32
  38. package/dist/docs/combobox/examples.md +44 -0
  39. package/dist/docs/combobox/styling.md +1 -0
  40. package/dist/docs/combobox/usage.md +28 -0
  41. package/dist/docs/datepicker/accessibility.md +25 -0
  42. package/dist/docs/datepicker/api.md +22 -14
  43. package/dist/docs/datepicker/datepicker.md +208 -16
  44. package/dist/docs/datepicker/examples.md +75 -0
  45. package/dist/docs/datepicker/styling.md +1 -0
  46. package/dist/docs/datepicker/usage.md +84 -0
  47. package/dist/docs/expandable/api.md +20 -32
  48. package/dist/docs/expandable/examples.md +54 -0
  49. package/dist/docs/expandable/expandable.md +74 -32
  50. package/dist/docs/expandable/styling.md +1 -0
  51. package/dist/docs/icon/accessibility.md +5 -0
  52. package/dist/docs/icon/api.md +43 -0
  53. package/dist/docs/icon/examples.md +45 -0
  54. package/dist/docs/icon/icon.md +115 -0
  55. package/dist/docs/icon/styling.md +1 -0
  56. package/dist/docs/icon/usage.md +11 -0
  57. package/dist/docs/index.md +46 -0
  58. package/dist/docs/link/api.md +18 -22
  59. package/dist/docs/link/examples.md +75 -0
  60. package/dist/docs/link/link.md +113 -24
  61. package/dist/docs/link/styling.md +1 -0
  62. package/dist/docs/link/usage.md +18 -0
  63. package/dist/docs/modal/modal.md +2 -0
  64. package/dist/docs/modal/styling.md +1 -0
  65. package/dist/docs/modal-footer/modal-footer.md +0 -6
  66. package/dist/docs/modal-header/modal-header.md +0 -6
  67. package/dist/docs/page-indicator/page-indicator.md +2 -0
  68. package/dist/docs/page-indicator/styling.md +1 -0
  69. package/dist/docs/pagination/pagination.md +2 -0
  70. package/dist/docs/pagination/styling.md +1 -0
  71. package/dist/docs/pill/pill.md +2 -0
  72. package/dist/docs/pill/styling.md +1 -0
  73. package/dist/docs/radio/radio.md +1 -7
  74. package/dist/docs/select/select.md +2 -0
  75. package/dist/docs/select/styling.md +1 -0
  76. package/dist/docs/slider/slider.md +2 -0
  77. package/dist/docs/slider/styling.md +1 -0
  78. package/dist/docs/slider-thumb/slider-thumb.md +2 -0
  79. package/dist/docs/slider-thumb/styling.md +1 -0
  80. package/dist/docs/step-indicator/step-indicator.md +2 -0
  81. package/dist/docs/step-indicator/styling.md +1 -0
  82. package/dist/docs/switch/styling.md +1 -0
  83. package/dist/docs/switch/switch.md +2 -0
  84. package/dist/docs/tabs/styling.md +1 -0
  85. package/dist/docs/tabs/tabs.md +2 -0
  86. package/dist/docs/textarea/styling.md +1 -0
  87. package/dist/docs/textarea/textarea.md +2 -0
  88. package/dist/docs/textfield/styling.md +1 -0
  89. package/dist/docs/textfield/textfield.md +2 -0
  90. package/dist/index.d.ts +645 -313
  91. package/dist/packages/affix/affix.hydration.test.js +1 -1
  92. package/dist/packages/affix/affix.js +4 -4
  93. package/dist/packages/affix/affix.js.map +4 -4
  94. package/dist/packages/alert/alert.hydration.test.js +1 -1
  95. package/dist/packages/alert/alert.js +3 -3
  96. package/dist/packages/alert/alert.js.map +3 -3
  97. package/dist/packages/attention/attention.hydration.test.js +1 -1
  98. package/dist/packages/attention/attention.js +397 -446
  99. package/dist/packages/attention/attention.js.map +4 -4
  100. package/dist/packages/attention/attention.test.js +1 -1
  101. package/dist/packages/badge/badge.hydration.test.js +1 -1
  102. package/dist/packages/box/box.hydration.test.js +1 -1
  103. package/dist/packages/box/box.js +1 -1
  104. package/dist/packages/box/box.js.map +1 -1
  105. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +3 -2
  106. package/dist/packages/breadcrumbs/breadcrumbs.js +4 -4
  107. package/dist/packages/breadcrumbs/breadcrumbs.js.map +3 -3
  108. package/dist/packages/button/button.hydration.test.js +1 -1
  109. package/dist/packages/button/button.js +387 -436
  110. package/dist/packages/button/button.js.map +4 -4
  111. package/dist/packages/button/button.stories.d.ts +29 -0
  112. package/dist/packages/button/button.stories.js +176 -2
  113. package/dist/packages/button/styles.d.ts +22 -1
  114. package/dist/packages/button/styles.js +390 -1
  115. package/dist/packages/card/card.d.ts +9 -6
  116. package/dist/packages/card/card.hydration.test.js +1 -1
  117. package/dist/packages/card/card.js +3 -3
  118. package/dist/packages/card/card.js.map +4 -4
  119. package/dist/packages/checkbox/checkbox.d.ts +45 -14
  120. package/dist/packages/checkbox/checkbox.hydration.test.js +1 -1
  121. package/dist/packages/checkbox/checkbox.js +3 -3
  122. package/dist/packages/checkbox/checkbox.js.map +3 -3
  123. package/dist/packages/checkbox/checkbox.react.stories.d.ts +1 -1
  124. package/dist/packages/checkbox/checkbox.stories.d.ts +2 -2
  125. package/dist/packages/checkbox/checkbox.test.js +1 -1
  126. package/dist/packages/checkbox/react.d.ts +2 -2
  127. package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +1 -1
  128. package/dist/packages/checkbox-group/checkbox-group.d.ts +35 -8
  129. package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +1 -1
  130. package/dist/packages/checkbox-group/checkbox-group.js +6 -6
  131. package/dist/packages/checkbox-group/checkbox-group.js.map +4 -4
  132. package/dist/packages/checkbox-group/react.d.ts +3 -3
  133. package/dist/packages/combobox/combobox.a11y.test.js +24 -0
  134. package/dist/packages/combobox/combobox.d.ts +65 -45
  135. package/dist/packages/combobox/combobox.hydration.test.js +39 -1
  136. package/dist/packages/combobox/combobox.js +21 -21
  137. package/dist/packages/combobox/combobox.js.map +4 -4
  138. package/dist/packages/combobox/combobox.stories.js +28 -15
  139. package/dist/packages/combobox/combobox.test.js +110 -0
  140. package/dist/packages/datepicker/DatePicker.test.js +1 -1
  141. package/dist/packages/datepicker/datepicker.d.ts +22 -30
  142. package/dist/packages/datepicker/datepicker.hydration.test.js +1 -1
  143. package/dist/packages/datepicker/datepicker.js +49 -49
  144. package/dist/packages/datepicker/datepicker.js.map +4 -4
  145. package/dist/packages/datepicker/datepicker.test.js +1 -1
  146. package/dist/packages/expandable/expandable.d.ts +11 -32
  147. package/dist/packages/expandable/expandable.hydration.test.js +1 -1
  148. package/dist/packages/expandable/expandable.js +11 -11
  149. package/dist/packages/expandable/expandable.js.map +3 -3
  150. package/dist/packages/expandable/expandable.react.stories.d.ts +2 -2
  151. package/dist/packages/expandable/react.d.ts +1 -1
  152. package/dist/packages/icon/icon.d.ts +16 -4
  153. package/dist/packages/icon/icon.hydration.test.js +1 -1
  154. package/dist/packages/icon/icon.js +2 -2
  155. package/dist/packages/icon/icon.js.map +3 -3
  156. package/dist/packages/icon/icon.react.stories.d.ts +1 -1
  157. package/dist/packages/icon/react.d.ts +2 -2
  158. package/dist/packages/link/link.d.ts +15 -16
  159. package/dist/packages/link/link.hydration.test.js +1 -1
  160. package/dist/packages/link/link.js +420 -190
  161. package/dist/packages/link/link.js.map +4 -4
  162. package/dist/packages/link/link.test.js +1 -1
  163. package/dist/packages/link/styles.d.ts +5 -0
  164. package/dist/packages/link/styles.js +80 -0
  165. package/dist/packages/modal/modal.d.ts +1 -0
  166. package/dist/packages/modal/modal.hydration.test.js +1 -1
  167. package/dist/packages/modal/modal.js +4 -4
  168. package/dist/packages/modal/modal.js.map +3 -3
  169. package/dist/packages/modal-header/modal-header.js +11 -9
  170. package/dist/packages/modal-header/modal-header.js.map +4 -4
  171. package/dist/packages/page-indicator/page-indicator.hydration.test.js +1 -1
  172. package/dist/packages/page-indicator/page-indicator.js +5 -5
  173. package/dist/packages/page-indicator/page-indicator.js.map +3 -3
  174. package/dist/packages/pagination/pagination.hydration.test.js +1 -1
  175. package/dist/packages/pagination/pagination.js +4 -4
  176. package/dist/packages/pagination/pagination.js.map +4 -4
  177. package/dist/packages/pagination/pagination.test.js +1 -1
  178. package/dist/packages/pill/pill.hydration.test.js +1 -1
  179. package/dist/packages/pill/pill.js +3 -3
  180. package/dist/packages/pill/pill.js.map +4 -4
  181. package/dist/packages/radio/radio.hydration.test.js +1 -1
  182. package/dist/packages/radio/radio.js +3 -3
  183. package/dist/packages/radio/radio.js.map +3 -3
  184. package/dist/packages/radio/radio.test.js +1 -1
  185. package/dist/packages/radio-group/radio-group.a11y.test.js +7 -3
  186. package/dist/packages/radio-group/radio-group.hydration.test.js +6 -2
  187. package/dist/packages/radio-group/radio-group.js +11 -11
  188. package/dist/packages/radio-group/radio-group.js.map +4 -4
  189. package/dist/packages/select/select.a11y.test.js +6 -2
  190. package/dist/packages/select/select.hydration.test.js +1 -1
  191. package/dist/packages/select/select.js +7 -7
  192. package/dist/packages/select/select.js.map +4 -4
  193. package/dist/packages/select/select.test.js +4 -2
  194. package/dist/packages/slider/slider.hydration.test.js +7 -2
  195. package/dist/packages/slider/slider.js +5 -5
  196. package/dist/packages/slider/slider.js.map +4 -4
  197. package/dist/packages/slider/slider.react.stories.js +2 -2
  198. package/dist/packages/slider/slider.test.js +1 -1
  199. package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +1 -1
  200. package/dist/packages/slider-thumb/slider-thumb.js +20 -20
  201. package/dist/packages/slider-thumb/slider-thumb.js.map +4 -4
  202. package/dist/packages/step/step.hydration.test.js +1 -1
  203. package/dist/packages/step/step.js +8 -8
  204. package/dist/packages/step/step.js.map +4 -4
  205. package/dist/packages/step-indicator/step-indicator.hydration.test.js +1 -1
  206. package/dist/packages/switch/switch.a11y.test.js +1 -1
  207. package/dist/packages/switch/switch.hydration.test.js +1 -1
  208. package/dist/packages/switch/switch.js +1 -1
  209. package/dist/packages/switch/switch.js.map +1 -1
  210. package/dist/packages/tab/tab.hydration.test.js +1 -1
  211. package/dist/packages/tab/tab.js +10 -10
  212. package/dist/packages/tab/tab.js.map +2 -2
  213. package/dist/packages/tab-panel/tab-panel.hydration.test.js +1 -1
  214. package/dist/packages/tab-panel/tab-panel.js +3 -3
  215. package/dist/packages/tab-panel/tab-panel.js.map +2 -2
  216. package/dist/packages/tabs/tabs.a11y.test.js +2 -2
  217. package/dist/packages/tabs/tabs.hydration.test.js +1 -1
  218. package/dist/packages/tabs/tabs.js +1 -1
  219. package/dist/packages/tabs/tabs.js.map +2 -2
  220. package/dist/packages/tabs/tabs.test.js +4 -4
  221. package/dist/packages/textarea/textarea.hydration.test.js +1 -1
  222. package/dist/packages/textarea/textarea.js +4 -4
  223. package/dist/packages/textarea/textarea.js.map +3 -3
  224. package/dist/packages/textarea/textarea.test.js +1 -1
  225. package/dist/packages/textfield/textfield.hydration.test.js +1 -1
  226. package/dist/packages/textfield/textfield.js +1 -1
  227. package/dist/packages/textfield/textfield.js.map +1 -1
  228. package/dist/packages/textfield/textfield.test.js +1 -1
  229. package/dist/packages/toast/toast.js +6 -6
  230. package/dist/packages/toast/toast.js.map +4 -4
  231. package/dist/packages/toast/toast.stories.d.ts +1 -5
  232. package/dist/packages/toast/toast.stories.js +0 -17
  233. package/dist/packages/toast-container/toast-container.js +2 -2
  234. package/dist/packages/toast-container/toast-container.js.map +2 -2
  235. package/dist/web-types.json +238 -103
  236. package/eik/index.js +2536 -0
  237. package/package.json +15 -9
  238. package/dist/docs/modal-footer/accessibility.md +0 -1
  239. package/dist/docs/modal-footer/examples.md +0 -1
  240. package/dist/docs/modal-footer/usage.md +0 -1
  241. package/dist/docs/modal-header/accessibility.md +0 -1
  242. package/dist/docs/modal-header/examples.md +0 -1
  243. package/dist/docs/modal-header/usage.md +0 -1
  244. package/dist/docs/radio/accessibility.md +0 -1
  245. package/dist/docs/radio/examples.md +0 -1
  246. package/dist/docs/radio/usage.md +0 -1
  247. package/dist/packages/button/styles/w-button.styles.d.ts +0 -1
  248. package/dist/packages/button/styles/w-button.styles.js +0 -282
  249. package/dist/packages/link/styles/w-link.styles.d.ts +0 -1
  250. package/dist/packages/link/styles/w-link.styles.js +0 -213
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,8 +9,11 @@ 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";
@@ -114,22 +117,26 @@ type BaseProps<T extends HTMLElement> = {
114
117
 
115
118
  type BaseEvents = {};
116
119
 
117
- export type WIconProps = {
120
+ export type WarpIconProps = {
118
121
  /** Icon filename (without .svg) */
119
- name?: WIcon["name"];
120
- /** Size: small, medium, large or pixel value (e.g. "32px") */
121
- size?: WIcon["size"];
122
- /** Locale used in CDN URL */
123
- 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"];
124
129
  };
125
130
 
126
- export type WIconSolidJsProps = {
131
+ export type WarpIconSolidJsProps = {
127
132
  /** Icon filename (without .svg) */
128
- "prop:name"?: WIcon["name"];
129
- /** Size: small, medium, large or pixel value (e.g. "32px") */
130
- "prop:size"?: WIcon["size"];
131
- /** Locale used in CDN URL */
132
- "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"];
133
140
 
134
141
  /** Set the innerHTML of the element */
135
142
  innerHTML?: string;
@@ -343,44 +350,52 @@ export type WarpAlertSolidJsProps = {
343
350
  };
344
351
 
345
352
  export type WarpLinkProps = {
346
- /** */
353
+ /** Focus the link after it is rendered */
347
354
  autofocus?: WarpLink["autofocus"];
348
- /** */
355
+ /** Visual style for the link/button. */
349
356
  variant?: WarpLink["variant"];
350
- /** */
357
+ /** Render a smaller version */
351
358
  small?: WarpLink["small"];
352
- /** */
359
+ /** The URL the link points to */
353
360
  href?: WarpLink["href"];
354
- /** */
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. */
355
364
  disabled?: WarpLink["disabled"];
356
- /** */
365
+ /** Where to display the linked URL (e.g. `_blank`) */
357
366
  target?: WarpLink["target"];
358
- /** */
367
+ /** Relationship of the linked URL.
368
+
369
+ If `target="_blank"` and `rel` is not provided, the component uses `noopener`. */
359
370
  rel?: WarpLink["rel"];
360
- /** */
371
+ /** Makes the link take up the full width of its parent */
361
372
  "full-width"?: WarpLink["fullWidth"];
362
- /** */
373
+ /** Makes the link take up the full width of its parent */
363
374
  fullWidth?: WarpLink["fullWidth"];
364
375
  };
365
376
 
366
377
  export type WarpLinkSolidJsProps = {
367
- /** */
378
+ /** Focus the link after it is rendered */
368
379
  "prop:autofocus"?: WarpLink["autofocus"];
369
- /** */
380
+ /** Visual style for the link/button. */
370
381
  "prop:variant"?: WarpLink["variant"];
371
- /** */
382
+ /** Render a smaller version */
372
383
  "prop:small"?: WarpLink["small"];
373
- /** */
384
+ /** The URL the link points to */
374
385
  "prop:href"?: WarpLink["href"];
375
- /** */
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. */
376
389
  "prop:disabled"?: WarpLink["disabled"];
377
- /** */
390
+ /** Where to display the linked URL (e.g. `_blank`) */
378
391
  "prop:target"?: WarpLink["target"];
379
- /** */
392
+ /** Relationship of the linked URL.
393
+
394
+ If `target="_blank"` and `rel` is not provided, the component uses `noopener`. */
380
395
  "prop:rel"?: WarpLink["rel"];
381
- /** */
396
+ /** Makes the link take up the full width of its parent */
382
397
  "bool:full-width"?: WarpLink["fullWidth"];
383
- /** */
398
+ /** Makes the link take up the full width of its parent */
384
399
  "prop:fullWidth"?: WarpLink["fullWidth"];
385
400
 
386
401
  /** Set the innerHTML of the element */
@@ -723,22 +738,34 @@ Defaults to the localized "You are here" label. Set `aria-label` when the defaul
723
738
  };
724
739
 
725
740
  export type WarpCardProps = {
726
- /** */
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. */
727
744
  selected?: WarpCard["selected"];
728
- /** */
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. */
729
748
  flat?: WarpCard["flat"];
730
- /** */
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. */
731
752
  clickable?: WarpCard["clickable"];
732
753
  /** */
733
754
  buttonText?: WarpCard["buttonText"];
734
755
  };
735
756
 
736
757
  export type WarpCardSolidJsProps = {
737
- /** */
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. */
738
761
  "prop:selected"?: WarpCard["selected"];
739
- /** */
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. */
740
765
  "prop:flat"?: WarpCard["flat"];
741
- /** */
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. */
742
769
  "prop:clickable"?: WarpCard["clickable"];
743
770
  /** */
744
771
  "prop:buttonText"?: WarpCard["buttonText"];
@@ -749,45 +776,73 @@ export type WarpCardSolidJsProps = {
749
776
  textContent?: string | number;
750
777
  };
751
778
 
752
- export type WCheckboxProps = {
753
- /** The name of the checkbox, submitted as a name/value pair with form data. */
754
- name?: WCheckbox["name"];
755
- /** The value of the checkbox, submitted as a name/value pair with form data. */
756
- value?: WCheckbox["value"];
757
- /** Draws the checkbox in an indeterminate state. */
758
- indeterminate?: WCheckbox["indeterminate"];
759
- /** Draws the checkbox in a checked state (reflected to attribute). */
760
- checked?: WCheckbox["checked"];
761
- /** Disables the checkbox. */
762
- disabled?: WCheckbox["disabled"];
763
- /** Makes the checkbox a required field. */
764
- required?: WCheckbox["required"];
765
- /** Draws the checkbox in an invalid state. */
766
- 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"];
767
808
  /** */
768
- input?: WCheckbox["input"];
809
+ input?: WarpCheckbox["input"];
769
810
 
770
811
  /** */
771
812
  onchange?: (e: Event) => void;
772
813
  };
773
814
 
774
- export type WCheckboxSolidJsProps = {
775
- /** The name of the checkbox, submitted as a name/value pair with form data. */
776
- "prop:name"?: WCheckbox["name"];
777
- /** The value of the checkbox, submitted as a name/value pair with form data. */
778
- "prop:value"?: WCheckbox["value"];
779
- /** Draws the checkbox in an indeterminate state. */
780
- "prop:indeterminate"?: WCheckbox["indeterminate"];
781
- /** Draws the checkbox in a checked state (reflected to attribute). */
782
- "prop:checked"?: WCheckbox["checked"];
783
- /** Disables the checkbox. */
784
- "prop:disabled"?: WCheckbox["disabled"];
785
- /** Makes the checkbox a required field. */
786
- "prop:required"?: WCheckbox["required"];
787
- /** Draws the checkbox in an invalid state. */
788
- "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"];
789
844
  /** */
790
- "prop:input"?: WCheckbox["input"];
845
+ "prop:input"?: WarpCheckbox["input"];
791
846
  /** */
792
847
  "on:change"?: (e: Event) => void;
793
848
 
@@ -797,38 +852,66 @@ export type WCheckboxSolidJsProps = {
797
852
  textContent?: string | number;
798
853
  };
799
854
 
800
- export type WCheckboxGroupProps = {
801
- /** The group label displayed above the checkboxes. */
802
- label?: WCheckboxGroup["label"];
803
- /** The name applied to child checkboxes when they do not provide one. */
804
- name?: WCheckboxGroup["name"];
805
- /** Whether to show optional text next to the label. */
806
- optional?: WCheckboxGroup["optional"];
807
- /** */
808
- "help-text"?: WCheckboxGroup["helpText"];
809
- /** */
810
- helpText?: WCheckboxGroup["helpText"];
811
- /** Makes the checkbox group required. */
812
- required?: WCheckboxGroup["required"];
813
- /** Marks the checkbox group as invalid. */
814
- invalid?: WCheckboxGroup["invalid"];
815
- };
816
-
817
- export type WCheckboxGroupSolidJsProps = {
818
- /** The group label displayed above the checkboxes. */
819
- "prop:label"?: WCheckboxGroup["label"];
820
- /** The name applied to child checkboxes when they do not provide one. */
821
- "prop:name"?: WCheckboxGroup["name"];
822
- /** Whether to show optional text next to the label. */
823
- "prop:optional"?: WCheckboxGroup["optional"];
824
- /** */
825
- "attr:help-text"?: WCheckboxGroup["helpText"];
826
- /** */
827
- "prop:helpText"?: WCheckboxGroup["helpText"];
828
- /** Makes the checkbox group required. */
829
- "prop:required"?: WCheckboxGroup["required"];
830
- /** Marks the checkbox group as invalid. */
831
- "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"];
832
915
 
833
916
  /** Set the innerHTML of the element */
834
917
  innerHTML?: string;
@@ -837,88 +920,168 @@ export type WCheckboxGroupSolidJsProps = {
837
920
  };
838
921
 
839
922
  export type WarpComboboxProps = {
840
- /** 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. */
841
926
  options?: WarpCombobox["options"];
842
- /** Label above input */
927
+ /** The label displayed above the input.
928
+
929
+ Use this to give the combobox a visible and accessible name. */
843
930
  label?: WarpCombobox["label"];
844
- /** 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. */
845
934
  placeholder?: WarpCombobox["placeholder"];
846
- /** 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. */
847
938
  value?: WarpCombobox["value"];
848
- /** 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. */
849
942
  "open-on-focus"?: WarpCombobox["openOnFocus"];
850
- /** 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. */
851
946
  openOnFocus?: WarpCombobox["openOnFocus"];
852
- /** 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. */
853
950
  "select-on-blur"?: WarpCombobox["selectOnBlur"];
854
- /** 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. */
855
954
  selectOnBlur?: WarpCombobox["selectOnBlur"];
856
- /** 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. */
857
958
  "match-text-segments"?: WarpCombobox["matchTextSegments"];
858
- /** 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. */
859
962
  matchTextSegments?: WarpCombobox["matchTextSegments"];
860
- /** 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. */
861
966
  "disable-static-filtering"?: WarpCombobox["disableStaticFiltering"];
862
- /** 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. */
863
970
  disableStaticFiltering?: WarpCombobox["disableStaticFiltering"];
864
- /** 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. */
865
974
  invalid?: WarpCombobox["invalid"];
866
- /** 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. */
867
978
  "help-text"?: WarpCombobox["helpText"];
868
- /** 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. */
869
982
  helpText?: WarpCombobox["helpText"];
870
- /** Whether the element is disabled */
983
+ /** Whether the combobox is disabled.
984
+
985
+ Disabled comboboxes cannot be focused, changed, or submitted with form data. */
871
986
  disabled?: WarpCombobox["disabled"];
872
- /** 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. */
873
990
  required?: WarpCombobox["required"];
874
- /** 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. */
875
994
  optional?: WarpCombobox["optional"];
876
- /** 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. */
877
998
  name?: WarpCombobox["name"];
878
- /** 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. */
879
1002
  autocomplete?: WarpCombobox["autocomplete"];
880
1003
  };
881
1004
 
882
1005
  export type WarpComboboxSolidJsProps = {
883
- /** 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. */
884
1009
  "prop:options"?: WarpCombobox["options"];
885
- /** Label above input */
1010
+ /** The label displayed above the input.
1011
+
1012
+ Use this to give the combobox a visible and accessible name. */
886
1013
  "prop:label"?: WarpCombobox["label"];
887
- /** 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. */
888
1017
  "prop:placeholder"?: WarpCombobox["placeholder"];
889
- /** 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. */
890
1021
  "prop:value"?: WarpCombobox["value"];
891
- /** 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. */
892
1025
  "bool:open-on-focus"?: WarpCombobox["openOnFocus"];
893
- /** 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. */
894
1029
  "prop:openOnFocus"?: WarpCombobox["openOnFocus"];
895
- /** 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. */
896
1033
  "bool:select-on-blur"?: WarpCombobox["selectOnBlur"];
897
- /** 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. */
898
1037
  "prop:selectOnBlur"?: WarpCombobox["selectOnBlur"];
899
- /** 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. */
900
1041
  "bool:match-text-segments"?: WarpCombobox["matchTextSegments"];
901
- /** 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. */
902
1045
  "prop:matchTextSegments"?: WarpCombobox["matchTextSegments"];
903
- /** 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. */
904
1049
  "bool:disable-static-filtering"?: WarpCombobox["disableStaticFiltering"];
905
- /** 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. */
906
1053
  "prop:disableStaticFiltering"?: WarpCombobox["disableStaticFiltering"];
907
- /** 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. */
908
1057
  "prop:invalid"?: WarpCombobox["invalid"];
909
- /** 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. */
910
1061
  "attr:help-text"?: WarpCombobox["helpText"];
911
- /** 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. */
912
1065
  "prop:helpText"?: WarpCombobox["helpText"];
913
- /** Whether the element is disabled */
1066
+ /** Whether the combobox is disabled.
1067
+
1068
+ Disabled comboboxes cannot be focused, changed, or submitted with form data. */
914
1069
  "prop:disabled"?: WarpCombobox["disabled"];
915
- /** 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. */
916
1073
  "prop:required"?: WarpCombobox["required"];
917
- /** 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. */
918
1077
  "prop:optional"?: WarpCombobox["optional"];
919
- /** 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. */
920
1081
  "prop:name"?: WarpCombobox["name"];
921
- /** 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. */
922
1085
  "prop:autocomplete"?: WarpCombobox["autocomplete"];
923
1086
 
924
1087
  /** Set the innerHTML of the element */
@@ -928,41 +1091,49 @@ export type WarpComboboxSolidJsProps = {
928
1091
  };
929
1092
 
930
1093
  export type WarpDatepickerProps = {
931
- /** */
1094
+ /** The label displayed above the date input.
1095
+
1096
+ Use this to give the datepicker a visible and accessible name. */
932
1097
  label?: WarpDatepicker["label"];
933
- /** 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`. */
934
1101
  lang?: WarpDatepicker["lang"];
935
- /** */
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. */
936
1105
  name?: WarpDatepicker["name"];
937
- /** */
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. */
938
1109
  value?: WarpDatepicker["value"];
939
- /** Decides the format of the date as shown in the calendar header.
1110
+ /** The date format used in the calendar header.
940
1111
 
941
1112
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
942
1113
  "header-format"?: WarpDatepicker["headerFormat"];
943
- /** Decides the format of the date as shown in the calendar header.
1114
+ /** The date format used in the calendar header.
944
1115
 
945
1116
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
946
1117
  headerFormat?: WarpDatepicker["headerFormat"];
947
- /** 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.
948
1119
 
949
1120
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
950
1121
  "weekday-format"?: WarpDatepicker["weekdayFormat"];
951
- /** 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.
952
1123
 
953
1124
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
954
1125
  weekdayFormat?: WarpDatepicker["weekdayFormat"];
955
- /** Decides the format of the day in the calendar as read to screen readers.
1126
+ /** The date format used for calendar day accessible names.
956
1127
 
957
1128
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
958
1129
  "day-format"?: WarpDatepicker["dayFormat"];
959
- /** Decides the format of the day in the calendar as read to screen readers.
1130
+ /** The date format used for calendar day accessible names.
960
1131
 
961
1132
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
962
1133
  dayFormat?: WarpDatepicker["dayFormat"];
963
- /** Lets you control if a date in the calendar should be disabled.
1134
+ /** Function used to disable dates in the calendar.
964
1135
 
965
- 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. */
966
1137
  isDayDisabled?: WarpDatepicker["isDayDisabled"];
967
1138
  /** */
968
1139
  isCalendarOpen?: WarpDatepicker["isCalendarOpen"];
@@ -989,41 +1160,49 @@ the query will point to an element that doesn't exist anymore. */
989
1160
  };
990
1161
 
991
1162
  export type WarpDatepickerSolidJsProps = {
992
- /** */
1163
+ /** The label displayed above the date input.
1164
+
1165
+ Use this to give the datepicker a visible and accessible name. */
993
1166
  "prop:label"?: WarpDatepicker["label"];
994
- /** 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`. */
995
1170
  "prop:lang"?: WarpDatepicker["lang"];
996
- /** */
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. */
997
1174
  "prop:name"?: WarpDatepicker["name"];
998
- /** */
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. */
999
1178
  "prop:value"?: WarpDatepicker["value"];
1000
- /** Decides the format of the date as shown in the calendar header.
1179
+ /** The date format used in the calendar header.
1001
1180
 
1002
1181
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
1003
1182
  "attr:header-format"?: WarpDatepicker["headerFormat"];
1004
- /** Decides the format of the date as shown in the calendar header.
1183
+ /** The date format used in the calendar header.
1005
1184
 
1006
1185
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
1007
1186
  "prop:headerFormat"?: WarpDatepicker["headerFormat"];
1008
- /** 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.
1009
1188
 
1010
1189
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
1011
1190
  "attr:weekday-format"?: WarpDatepicker["weekdayFormat"];
1012
- /** 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.
1013
1192
 
1014
1193
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
1015
1194
  "prop:weekdayFormat"?: WarpDatepicker["weekdayFormat"];
1016
- /** Decides the format of the day in the calendar as read to screen readers.
1195
+ /** The date format used for calendar day accessible names.
1017
1196
 
1018
1197
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
1019
1198
  "attr:day-format"?: WarpDatepicker["dayFormat"];
1020
- /** Decides the format of the day in the calendar as read to screen readers.
1199
+ /** The date format used for calendar day accessible names.
1021
1200
 
1022
1201
  The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
1023
1202
  "prop:dayFormat"?: WarpDatepicker["dayFormat"];
1024
- /** Lets you control if a date in the calendar should be disabled.
1203
+ /** Function used to disable dates in the calendar.
1025
1204
 
1026
- 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. */
1027
1206
  "prop:isDayDisabled"?: WarpDatepicker["isDayDisabled"];
1028
1207
  /** */
1029
1208
  "prop:isCalendarOpen"?: WarpDatepicker["isCalendarOpen"];
@@ -1055,31 +1234,31 @@ the query will point to an element that doesn't exist anymore. */
1055
1234
  };
1056
1235
 
1057
1236
  export type WarpExpandableProps = {
1058
- /** */
1237
+ /** Controls component's expanded state */
1059
1238
  expanded?: WarpExpandable["expanded"];
1060
- /** */
1239
+ /** Component title. Used to display the title value which is always present regardless of whether the component is open or closed. */
1061
1240
  title?: WarpExpandable["title"];
1062
- /** */
1241
+ /** Will make the expandable a Box */
1063
1242
  box?: WarpExpandable["box"];
1064
- /** */
1243
+ /** Will make the expandable full-width on the sm breakpoint size */
1065
1244
  bleed?: WarpExpandable["bleed"];
1066
- /** */
1245
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1067
1246
  "button-class"?: WarpExpandable["buttonClass"];
1068
- /** */
1247
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1069
1248
  buttonClass?: WarpExpandable["buttonClass"];
1070
- /** */
1249
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1071
1250
  "content-class"?: WarpExpandable["contentClass"];
1072
- /** */
1251
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1073
1252
  contentClass?: WarpExpandable["contentClass"];
1074
- /** */
1253
+ /** Controls chevron visibility */
1075
1254
  "no-chevron"?: WarpExpandable["noChevron"];
1076
- /** */
1255
+ /** Controls chevron visibility */
1077
1256
  noChevron?: WarpExpandable["noChevron"];
1078
- /** */
1257
+ /** Will animate the expansion/collapse */
1079
1258
  animated?: WarpExpandable["animated"];
1080
- /** */
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. */
1081
1260
  "heading-level"?: WarpExpandable["headingLevel"];
1082
- /** */
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. */
1083
1262
  headingLevel?: WarpExpandable["headingLevel"];
1084
1263
  /** */
1085
1264
  _hasTitle?: WarpExpandable["_hasTitle"];
@@ -1088,31 +1267,31 @@ export type WarpExpandableProps = {
1088
1267
  };
1089
1268
 
1090
1269
  export type WarpExpandableSolidJsProps = {
1091
- /** */
1270
+ /** Controls component's expanded state */
1092
1271
  "prop:expanded"?: WarpExpandable["expanded"];
1093
- /** */
1272
+ /** Component title. Used to display the title value which is always present regardless of whether the component is open or closed. */
1094
1273
  "prop:title"?: WarpExpandable["title"];
1095
- /** */
1274
+ /** Will make the expandable a Box */
1096
1275
  "prop:box"?: WarpExpandable["box"];
1097
- /** */
1276
+ /** Will make the expandable full-width on the sm breakpoint size */
1098
1277
  "prop:bleed"?: WarpExpandable["bleed"];
1099
- /** */
1278
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1100
1279
  "attr:button-class"?: WarpExpandable["buttonClass"];
1101
- /** */
1280
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1102
1281
  "prop:buttonClass"?: WarpExpandable["buttonClass"];
1103
- /** */
1282
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1104
1283
  "attr:content-class"?: WarpExpandable["contentClass"];
1105
- /** */
1284
+ /** @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. */
1106
1285
  "prop:contentClass"?: WarpExpandable["contentClass"];
1107
- /** */
1286
+ /** Controls chevron visibility */
1108
1287
  "bool:no-chevron"?: WarpExpandable["noChevron"];
1109
- /** */
1288
+ /** Controls chevron visibility */
1110
1289
  "prop:noChevron"?: WarpExpandable["noChevron"];
1111
- /** */
1290
+ /** Will animate the expansion/collapse */
1112
1291
  "prop:animated"?: WarpExpandable["animated"];
1113
- /** */
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. */
1114
1293
  "attr:heading-level"?: WarpExpandable["headingLevel"];
1115
- /** */
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. */
1116
1295
  "prop:headingLevel"?: WarpExpandable["headingLevel"];
1117
1296
  /** */
1118
1297
  "prop:_hasTitle"?: WarpExpandable["_hasTitle"];
@@ -1918,10 +2097,12 @@ export type CustomElements = {
1918
2097
  * Component attributes and properties that can be applied to the element or by using JavaScript.
1919
2098
  *
1920
2099
  * - `name`: Icon filename (without .svg)
1921
- * - `size`: Size: small, medium, large or pixel value (e.g. "32px")
1922
- * - `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'.
1923
2104
  */
1924
- "w-icon": Partial<WIconProps & BaseProps<WIcon> & BaseEvents>;
2105
+ "w-icon": Partial<WarpIconProps & BaseProps<WarpIcon> & BaseEvents>;
1925
2106
 
1926
2107
  /**
1927
2108
  * A single-line input component used for entering and editing textual or numeric data.
@@ -2032,14 +2213,18 @@ export type CustomElements = {
2032
2213
  *
2033
2214
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2034
2215
  *
2035
- * - `autofocus`: undefined
2036
- * - `variant`: undefined
2037
- * - `small`: undefined
2038
- * - `href`: undefined
2039
- * - `disabled`: undefined
2040
- * - `target`: undefined
2041
- * - `rel`: undefined
2042
- * - `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
2043
2228
  */
2044
2229
  "w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & BaseEvents>;
2045
2230
 
@@ -2219,9 +2404,15 @@ export type CustomElements = {
2219
2404
  *
2220
2405
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2221
2406
  *
2222
- * - `selected`: undefined
2223
- * - `flat`: undefined
2224
- * - `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.
2225
2416
  * - `buttonText`: undefined (property only)
2226
2417
  *
2227
2418
  * ## Methods
@@ -2239,13 +2430,27 @@ export type CustomElements = {
2239
2430
  *
2240
2431
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2241
2432
  *
2242
- * - `name`: The name of the checkbox, submitted as a name/value pair with form data.
2243
- * - `value`: The value of the checkbox, submitted as a name/value pair with form data.
2244
- * - `indeterminate`: Draws the checkbox in an indeterminate state.
2245
- * - `checked`: Draws the checkbox in a checked state (reflected to attribute).
2246
- * - `disabled`: Disables the checkbox.
2247
- * - `required`: Makes the checkbox a required field.
2248
- * - `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.
2249
2454
  * - `input`: undefined (property only)
2250
2455
  * - `_computedInvalid`: Computed invalid state: combines own invalid with group invalid (property only) (readonly)
2251
2456
  * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
@@ -2268,7 +2473,9 @@ export type CustomElements = {
2268
2473
  * - `checkValidity() => boolean`: Checks whether the checkbox passes constraint validation
2269
2474
  * - `reportValidity() => boolean`: Checks validity and shows the browser's validation message if invalid
2270
2475
  */
2271
- "w-checkbox": Partial<WCheckboxProps & BaseProps<WCheckbox> & BaseEvents>;
2476
+ "w-checkbox": Partial<
2477
+ WarpCheckboxProps & BaseProps<WarpCheckbox> & BaseEvents
2478
+ >;
2272
2479
 
2273
2480
  /**
2274
2481
  *
@@ -2278,11 +2485,23 @@ export type CustomElements = {
2278
2485
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2279
2486
  *
2280
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.
2281
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`.
2282
2493
  * - `optional`: Whether to show optional text next to the label.
2283
- * - `help-text`/`helpText`: undefined
2284
- * - `required`: Makes the checkbox group required.
2285
- * - `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.
2286
2505
  *
2287
2506
  * ## Methods
2288
2507
  *
@@ -2293,7 +2512,7 @@ export type CustomElements = {
2293
2512
  * - `focus(options?: FocusOptions) => void`: Sets focus on the checkbox group.
2294
2513
  */
2295
2514
  "w-checkbox-group": Partial<
2296
- WCheckboxGroupProps & BaseProps<WCheckboxGroup> & BaseEvents
2515
+ WarpCheckboxGroupProps & BaseProps<WarpCheckboxGroup> & BaseEvents
2297
2516
  >;
2298
2517
 
2299
2518
  /**
@@ -2305,21 +2524,51 @@ export type CustomElements = {
2305
2524
  *
2306
2525
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2307
2526
  *
2308
- * - `options`: The available options to select from
2309
- * - `label`: Label above input
2310
- * - `placeholder`: Input placeholder
2311
- * - `value`: The input value
2312
- * - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field
2313
- * - `select-on-blur`/`selectOnBlur`: Select active option on blur
2314
- * - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted
2315
- * - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering
2316
- * - `invalid`: Renders the input field in an invalid state
2317
- * - `help-text`/`helpText`: The content to display as the help text
2318
- * - `disabled`: Whether the element is disabled
2319
- * - `required`: Whether the element is required
2320
- * - `optional`: Whether to show optional text
2321
- * - `name`: Name attribute for form submission
2322
- * - `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.
2323
2572
  *
2324
2573
  * ## Methods
2325
2574
  *
@@ -2342,22 +2591,30 @@ export type CustomElements = {
2342
2591
  *
2343
2592
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2344
2593
  *
2345
- * - `label`: undefined
2346
- * - `lang`: Takes precedence over the `<html>` lang attribute.
2347
- * - `name`: undefined
2348
- * - `value`: undefined
2349
- * - `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.
2350
2607
  *
2351
2608
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
2352
- * - `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.
2353
2610
  *
2354
2611
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
2355
- * - `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.
2356
2613
  *
2357
2614
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
2358
- * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
2615
+ * - `isDayDisabled`: Function used to disable dates in the calendar.
2359
2616
  *
2360
- * 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)
2361
2618
  * - `isCalendarOpen`: undefined (property only)
2362
2619
  * - `navigationDate`: undefined (property only)
2363
2620
  * - `selectedDate`: undefined (property only) (readonly)
@@ -2388,21 +2645,19 @@ export type CustomElements = {
2388
2645
  /**
2389
2646
  * Expandable is a layout component used for creating expandable content areas on a page.
2390
2647
  *
2391
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
2392
- *
2393
2648
  * ## Attributes & Properties
2394
2649
  *
2395
2650
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2396
2651
  *
2397
- * - `expanded`: undefined
2398
- * - `title`: undefined
2399
- * - `box`: undefined
2400
- * - `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
2401
2656
  * - `button-class`/`buttonClass`: undefined
2402
2657
  * - `content-class`/`contentClass`: undefined
2403
- * - `no-chevron`/`noChevron`: undefined
2404
- * - `animated`: undefined
2405
- * - `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.
2406
2661
  * - `_hasTitle`: undefined
2407
2662
  * - `_showChevronUp`: undefined
2408
2663
  *
@@ -2870,11 +3125,13 @@ export type CustomElementsSolidJs = {
2870
3125
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2871
3126
  *
2872
3127
  * - `name`: Icon filename (without .svg)
2873
- * - `size`: Size: small, medium, large or pixel value (e.g. "32px")
2874
- * - `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'.
2875
3132
  */
2876
3133
  "w-icon": Partial<
2877
- WIconProps & WIconSolidJsProps & BaseProps<WIcon> & BaseEvents
3134
+ WarpIconProps & WarpIconSolidJsProps & BaseProps<WarpIcon> & BaseEvents
2878
3135
  >;
2879
3136
 
2880
3137
  /**
@@ -2993,14 +3250,18 @@ export type CustomElementsSolidJs = {
2993
3250
  *
2994
3251
  * Component attributes and properties that can be applied to the element or by using JavaScript.
2995
3252
  *
2996
- * - `autofocus`: undefined
2997
- * - `variant`: undefined
2998
- * - `small`: undefined
2999
- * - `href`: undefined
3000
- * - `disabled`: undefined
3001
- * - `target`: undefined
3002
- * - `rel`: undefined
3003
- * - `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
3004
3265
  */
3005
3266
  "w-link": Partial<
3006
3267
  WarpLinkProps & WarpLinkSolidJsProps & BaseProps<WarpLink> & BaseEvents
@@ -3197,9 +3458,15 @@ export type CustomElementsSolidJs = {
3197
3458
  *
3198
3459
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3199
3460
  *
3200
- * - `selected`: undefined
3201
- * - `flat`: undefined
3202
- * - `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.
3203
3470
  * - `buttonText`: undefined (property only)
3204
3471
  *
3205
3472
  * ## Methods
@@ -3219,13 +3486,27 @@ export type CustomElementsSolidJs = {
3219
3486
  *
3220
3487
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3221
3488
  *
3222
- * - `name`: The name of the checkbox, submitted as a name/value pair with form data.
3223
- * - `value`: The value of the checkbox, submitted as a name/value pair with form data.
3224
- * - `indeterminate`: Draws the checkbox in an indeterminate state.
3225
- * - `checked`: Draws the checkbox in a checked state (reflected to attribute).
3226
- * - `disabled`: Disables the checkbox.
3227
- * - `required`: Makes the checkbox a required field.
3228
- * - `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.
3229
3510
  * - `input`: undefined (property only)
3230
3511
  * - `_computedInvalid`: Computed invalid state: combines own invalid with group invalid (property only) (readonly)
3231
3512
  * - `validationMessage`: Returns the validation message if the checkbox is invalid, otherwise an empty string (property only) (readonly)
@@ -3249,7 +3530,10 @@ export type CustomElementsSolidJs = {
3249
3530
  * - `reportValidity() => boolean`: Checks validity and shows the browser's validation message if invalid
3250
3531
  */
3251
3532
  "w-checkbox": Partial<
3252
- WCheckboxProps & WCheckboxSolidJsProps & BaseProps<WCheckbox> & BaseEvents
3533
+ WarpCheckboxProps &
3534
+ WarpCheckboxSolidJsProps &
3535
+ BaseProps<WarpCheckbox> &
3536
+ BaseEvents
3253
3537
  >;
3254
3538
 
3255
3539
  /**
@@ -3260,11 +3544,23 @@ export type CustomElementsSolidJs = {
3260
3544
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3261
3545
  *
3262
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.
3263
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`.
3264
3552
  * - `optional`: Whether to show optional text next to the label.
3265
- * - `help-text`/`helpText`: undefined
3266
- * - `required`: Makes the checkbox group required.
3267
- * - `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.
3268
3564
  *
3269
3565
  * ## Methods
3270
3566
  *
@@ -3275,9 +3571,9 @@ export type CustomElementsSolidJs = {
3275
3571
  * - `focus(options?: FocusOptions) => void`: Sets focus on the checkbox group.
3276
3572
  */
3277
3573
  "w-checkbox-group": Partial<
3278
- WCheckboxGroupProps &
3279
- WCheckboxGroupSolidJsProps &
3280
- BaseProps<WCheckboxGroup> &
3574
+ WarpCheckboxGroupProps &
3575
+ WarpCheckboxGroupSolidJsProps &
3576
+ BaseProps<WarpCheckboxGroup> &
3281
3577
  BaseEvents
3282
3578
  >;
3283
3579
 
@@ -3290,21 +3586,51 @@ export type CustomElementsSolidJs = {
3290
3586
  *
3291
3587
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3292
3588
  *
3293
- * - `options`: The available options to select from
3294
- * - `label`: Label above input
3295
- * - `placeholder`: Input placeholder
3296
- * - `value`: The input value
3297
- * - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field
3298
- * - `select-on-blur`/`selectOnBlur`: Select active option on blur
3299
- * - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted
3300
- * - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering
3301
- * - `invalid`: Renders the input field in an invalid state
3302
- * - `help-text`/`helpText`: The content to display as the help text
3303
- * - `disabled`: Whether the element is disabled
3304
- * - `required`: Whether the element is required
3305
- * - `optional`: Whether to show optional text
3306
- * - `name`: Name attribute for form submission
3307
- * - `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.
3308
3634
  *
3309
3635
  * ## Methods
3310
3636
  *
@@ -3330,22 +3656,30 @@ export type CustomElementsSolidJs = {
3330
3656
  *
3331
3657
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3332
3658
  *
3333
- * - `label`: undefined
3334
- * - `lang`: Takes precedence over the `<html>` lang attribute.
3335
- * - `name`: undefined
3336
- * - `value`: undefined
3337
- * - `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.
3338
3672
  *
3339
3673
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
3340
- * - `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.
3341
3675
  *
3342
3676
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
3343
- * - `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.
3344
3678
  *
3345
3679
  * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
3346
- * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
3680
+ * - `isDayDisabled`: Function used to disable dates in the calendar.
3347
3681
  *
3348
- * 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)
3349
3683
  * - `isCalendarOpen`: undefined (property only)
3350
3684
  * - `navigationDate`: undefined (property only)
3351
3685
  * - `selectedDate`: undefined (property only) (readonly)
@@ -3379,21 +3713,19 @@ export type CustomElementsSolidJs = {
3379
3713
  /**
3380
3714
  * Expandable is a layout component used for creating expandable content areas on a page.
3381
3715
  *
3382
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
3383
- *
3384
3716
  * ## Attributes & Properties
3385
3717
  *
3386
3718
  * Component attributes and properties that can be applied to the element or by using JavaScript.
3387
3719
  *
3388
- * - `expanded`: undefined
3389
- * - `title`: undefined
3390
- * - `box`: undefined
3391
- * - `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
3392
3724
  * - `button-class`/`buttonClass`: undefined
3393
3725
  * - `content-class`/`contentClass`: undefined
3394
- * - `no-chevron`/`noChevron`: undefined
3395
- * - `animated`: undefined
3396
- * - `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.
3397
3729
  * - `_hasTitle`: undefined
3398
3730
  * - `_showChevronUp`: undefined
3399
3731
  *