@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/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@warp-ds/elements",
4
- "version": "2.9.1",
4
+ "version": "2.10.0-next.9",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -18,12 +18,15 @@
18
18
  },
19
19
  {
20
20
  "name": "size",
21
- "description": "Size: small, medium, large or pixel value (e.g. \"32px\")",
22
- "value": { "type": "'small' | 'medium' | 'large' | string" }
21
+ "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
22
+ "value": {
23
+ "type": "'small' | 'medium' | 'large' | `${number}px`",
24
+ "default": "\"medium\""
25
+ }
23
26
  },
24
27
  {
25
28
  "name": "locale",
26
- "description": "Locale used in CDN URL",
29
+ "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
27
30
  "value": { "type": "string" }
28
31
  }
29
32
  ],
@@ -37,12 +40,12 @@
37
40
  },
38
41
  {
39
42
  "name": "size",
40
- "description": "Size: small, medium, large or pixel value (e.g. \"32px\")",
41
- "type": "'small' | 'medium' | 'large' | string"
43
+ "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
44
+ "type": "'small' | 'medium' | 'large' | `${number}px`"
42
45
  },
43
46
  {
44
47
  "name": "locale",
45
- "description": "Locale used in CDN URL",
48
+ "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
46
49
  "type": "string"
47
50
  }
48
51
  ],
@@ -353,120 +356,275 @@
353
356
  "attributes": [
354
357
  {
355
358
  "name": "autofocus",
359
+ "description": "Focus the link after it is rendered",
356
360
  "value": { "type": "boolean", "default": "false" }
357
361
  },
358
362
  {
359
363
  "name": "variant",
364
+ "description": "Visual style for the link/button.",
360
365
  "value": {
361
366
  "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'"
362
367
  }
363
368
  },
364
369
  {
365
370
  "name": "small",
371
+ "description": "Render a smaller version",
366
372
  "value": { "type": "boolean", "default": "false" }
367
373
  },
368
- { "name": "href", "value": { "type": "string" } },
374
+ {
375
+ "name": "href",
376
+ "description": "The URL the link points to",
377
+ "value": { "type": "string" }
378
+ },
369
379
  {
370
380
  "name": "disabled",
381
+ "description": "Applies disabled styling, but you need to disable clicks on your own.\n\nThe 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.",
371
382
  "value": { "type": "boolean", "default": "false" }
372
383
  },
373
- { "name": "target", "value": { "type": "string" } },
374
- { "name": "rel", "value": { "type": "string" } },
384
+ {
385
+ "name": "target",
386
+ "description": "Where to display the linked URL (e.g. `_blank`)",
387
+ "value": { "type": "string" }
388
+ },
389
+ {
390
+ "name": "rel",
391
+ "description": "Relationship of the linked URL.\n\nIf `target=\"_blank\"` and `rel` is not provided, the component uses `noopener`.",
392
+ "value": { "type": "string" }
393
+ },
375
394
  {
376
395
  "name": "full-width",
396
+ "description": "Makes the link take up the full width of its parent",
377
397
  "value": { "type": "boolean", "default": "false" }
378
398
  }
379
399
  ],
380
400
  "events": [],
381
401
  "js": {
382
402
  "properties": [
383
- { "name": "autofocus", "type": "boolean" },
403
+ {
404
+ "name": "autofocus",
405
+ "description": "Focus the link after it is rendered",
406
+ "type": "boolean"
407
+ },
384
408
  {
385
409
  "name": "variant",
410
+ "description": "Visual style for the link/button.",
386
411
  "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet'"
387
412
  },
388
- { "name": "small", "type": "boolean" },
389
- { "name": "href", "type": "string" },
390
- { "name": "disabled", "type": "boolean" },
391
- { "name": "target", "type": "string" },
392
- { "name": "rel", "type": "string" },
393
- { "name": "fullWidth", "type": "boolean" }
413
+ {
414
+ "name": "small",
415
+ "description": "Render a smaller version",
416
+ "type": "boolean"
417
+ },
418
+ {
419
+ "name": "href",
420
+ "description": "The URL the link points to",
421
+ "type": "string"
422
+ },
423
+ {
424
+ "name": "disabled",
425
+ "description": "Applies disabled styling, but you need to disable clicks on your own.\n\nThe 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.",
426
+ "type": "boolean"
427
+ },
428
+ {
429
+ "name": "target",
430
+ "description": "Where to display the linked URL (e.g. `_blank`)",
431
+ "type": "string"
432
+ },
433
+ {
434
+ "name": "rel",
435
+ "description": "Relationship of the linked URL.\n\nIf `target=\"_blank\"` and `rel` is not provided, the component uses `noopener`.",
436
+ "type": "string"
437
+ },
438
+ {
439
+ "name": "fullWidth",
440
+ "description": "Makes the link take up the full width of its parent",
441
+ "type": "boolean"
442
+ }
394
443
  ],
395
444
  "events": []
396
445
  }
397
446
  },
398
447
  {
399
448
  "name": "w-button",
400
- "description": "Buttons are used to perform actions, widh different visuals for different needs.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)\n---\n",
449
+ "description": "Performs an action or renders a link with button styling.\nUse button variants to match action priority, risk, and context.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)\n---\n",
401
450
  "doc-url": "",
402
451
  "attributes": [
403
452
  {
404
453
  "name": "type",
454
+ "description": "Native button type.\nControls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.",
405
455
  "value": { "type": "'button' | 'submit' | 'reset'" }
406
456
  },
407
457
  {
408
458
  "name": "autofocus",
459
+ "description": "Focuses the button when it is first rendered.\nApplies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.",
409
460
  "value": { "type": "boolean", "default": "false" }
410
461
  },
411
462
  {
412
463
  "name": "variant",
464
+ "description": "Visual style of the button.\nDefaults to `secondary`. Use the variant that matches the action priority, risk, and placement.",
413
465
  "value": {
414
466
  "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'"
415
467
  }
416
468
  },
417
469
  {
418
470
  "name": "quiet",
471
+ "description": "Deprecated quiet visual treatment flag\nUse `variant=\"quiet\"` instead.",
419
472
  "value": { "type": "boolean", "default": "false" }
420
473
  },
421
474
  {
422
475
  "name": "icon-only",
476
+ "description": "Marks the button as icon-only.\nUse this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.",
423
477
  "value": { "type": "boolean", "default": "false" }
424
478
  },
425
479
  {
426
480
  "name": "small",
481
+ "description": "Renders the compact button size.\nUse this in dense layouts where the default button size is too large.",
427
482
  "value": { "type": "boolean", "default": "false" }
428
483
  },
429
484
  {
430
485
  "name": "loading",
486
+ "description": "Shows the loading state.\nUse after the user has triggered an action and the action is in progress.",
431
487
  "value": { "type": "boolean", "default": "false" }
432
488
  },
433
- { "name": "href", "value": { "type": "string" } },
434
- { "name": "target", "value": { "type": "string" } },
489
+ {
490
+ "name": "href",
491
+ "description": "URL for rendering the button as a link.\nWhen set, the component renders `w-link` instead of a native `button`.",
492
+ "value": { "type": "string" }
493
+ },
494
+ {
495
+ "name": "target",
496
+ "description": "Link browsing context.\nPassed to the rendered link when `href` is set.",
497
+ "value": { "type": "string" }
498
+ },
435
499
  {
436
500
  "name": "disabled",
501
+ "description": "Visually disables the button.\nDisabled buttons are discouraged because they can hide the reason an action is unavailable.",
437
502
  "value": { "type": "boolean", "default": "false" }
438
503
  },
439
- { "name": "rel", "value": { "type": "string" } },
504
+ {
505
+ "name": "rel",
506
+ "description": "Link relationship.\nPassed to the rendered link when `href` is set. If `target=\"_blank\"` is set and `rel` is omitted, `noopener` is used.",
507
+ "value": { "type": "string" }
508
+ },
440
509
  {
441
510
  "name": "full-width",
511
+ "description": "Makes the button fill its parent width.\nUseful in narrow layouts where the button should span the available inline space.",
442
512
  "value": { "type": "boolean", "default": "false" }
443
513
  },
444
- { "name": "button-class", "value": { "type": "string" } },
445
- { "name": "name", "value": { "type": "string" } },
446
- { "name": "value", "value": { "type": "string" } }
514
+ {
515
+ "name": "button-class",
516
+ "description": "Deprecated class applied to the internal control\nThis 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.",
517
+ "value": { "type": "string" }
518
+ },
519
+ {
520
+ "name": "name",
521
+ "description": "Form control name.\nUsed when the button participates in form handling.",
522
+ "value": { "type": "string" }
523
+ },
524
+ {
525
+ "name": "value",
526
+ "description": "Form control value.\nUsed with `name` when the button participates in form handling. Resets to its initial value when the form is reset.",
527
+ "value": { "type": "string" }
528
+ },
529
+ {
530
+ "name": "commandfor",
531
+ "description": "The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
532
+ "value": { "type": "string" }
533
+ },
534
+ {
535
+ "name": "command",
536
+ "description": "The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
537
+ "value": { "type": "string" }
538
+ }
447
539
  ],
448
540
  "events": [],
449
541
  "js": {
450
542
  "properties": [
451
- { "name": "type", "type": "'button' | 'submit' | 'reset'" },
452
- { "name": "autofocus", "type": "boolean" },
543
+ {
544
+ "name": "type",
545
+ "description": "Native button type.\nControls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.",
546
+ "type": "'button' | 'submit' | 'reset'"
547
+ },
548
+ {
549
+ "name": "autofocus",
550
+ "description": "Focuses the button when it is first rendered.\nApplies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.",
551
+ "type": "boolean"
552
+ },
453
553
  {
454
554
  "name": "variant",
555
+ "description": "Visual style of the button.\nDefaults to `secondary`. Use the variant that matches the action priority, risk, and placement.",
455
556
  "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'"
456
557
  },
457
- { "name": "quiet", "type": "boolean" },
458
- { "name": "iconOnly", "type": "boolean" },
459
- { "name": "small", "type": "boolean" },
460
- { "name": "loading", "type": "boolean" },
461
- { "name": "href", "type": "string" },
462
- { "name": "target", "type": "string" },
463
- { "name": "disabled", "type": "boolean" },
464
- { "name": "rel", "type": "string" },
465
- { "name": "fullWidth", "type": "boolean" },
466
- { "name": "buttonClass", "type": "string" },
467
- { "name": "name", "type": "string" },
468
- { "name": "value", "type": "string" },
469
- { "name": "ariaValueTextLoading" }
558
+ {
559
+ "name": "quiet",
560
+ "description": "Deprecated quiet visual treatment flag\nUse `variant=\"quiet\"` instead.",
561
+ "type": "boolean"
562
+ },
563
+ {
564
+ "name": "iconOnly",
565
+ "description": "Marks the button as icon-only.\nUse this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.",
566
+ "type": "boolean"
567
+ },
568
+ {
569
+ "name": "small",
570
+ "description": "Renders the compact button size.\nUse this in dense layouts where the default button size is too large.",
571
+ "type": "boolean"
572
+ },
573
+ {
574
+ "name": "loading",
575
+ "description": "Shows the loading state.\nUse after the user has triggered an action and the action is in progress.",
576
+ "type": "boolean"
577
+ },
578
+ {
579
+ "name": "href",
580
+ "description": "URL for rendering the button as a link.\nWhen set, the component renders `w-link` instead of a native `button`.",
581
+ "type": "string"
582
+ },
583
+ {
584
+ "name": "target",
585
+ "description": "Link browsing context.\nPassed to the rendered link when `href` is set.",
586
+ "type": "string"
587
+ },
588
+ {
589
+ "name": "disabled",
590
+ "description": "Visually disables the button.\nDisabled buttons are discouraged because they can hide the reason an action is unavailable.",
591
+ "type": "boolean"
592
+ },
593
+ {
594
+ "name": "rel",
595
+ "description": "Link relationship.\nPassed to the rendered link when `href` is set. If `target=\"_blank\"` is set and `rel` is omitted, `noopener` is used.",
596
+ "type": "string"
597
+ },
598
+ {
599
+ "name": "fullWidth",
600
+ "description": "Makes the button fill its parent width.\nUseful in narrow layouts where the button should span the available inline space.",
601
+ "type": "boolean"
602
+ },
603
+ {
604
+ "name": "buttonClass",
605
+ "description": "Deprecated class applied to the internal control\nThis 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.",
606
+ "type": "string"
607
+ },
608
+ {
609
+ "name": "name",
610
+ "description": "Form control name.\nUsed when the button participates in form handling.",
611
+ "type": "string"
612
+ },
613
+ {
614
+ "name": "value",
615
+ "description": "Form control value.\nUsed with `name` when the button participates in form handling. Resets to its initial value when the form is reset.",
616
+ "type": "string"
617
+ },
618
+ {
619
+ "name": "commandfor",
620
+ "description": "The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
621
+ "type": "string"
622
+ },
623
+ {
624
+ "name": "command",
625
+ "description": "The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
626
+ "type": "string"
627
+ }
470
628
  ],
471
629
  "events": []
472
630
  }
@@ -749,23 +907,38 @@
749
907
  "attributes": [
750
908
  {
751
909
  "name": "selected",
910
+ "description": "Whether the card is visually selected.\n\nUse 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.",
752
911
  "value": { "type": "boolean", "default": "false" }
753
912
  },
754
913
  {
755
914
  "name": "flat",
915
+ "description": "Whether the card uses the flat visual treatment.\n\nFlat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.",
756
916
  "value": { "type": "boolean", "default": "false" }
757
917
  },
758
918
  {
759
919
  "name": "clickable",
920
+ "description": "Whether the whole card is interactive.\n\nWhen 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.",
760
921
  "value": { "type": "boolean", "default": "false" }
761
922
  }
762
923
  ],
763
924
  "events": [],
764
925
  "js": {
765
926
  "properties": [
766
- { "name": "selected", "type": "boolean" },
767
- { "name": "flat", "type": "boolean" },
768
- { "name": "clickable", "type": "boolean" },
927
+ {
928
+ "name": "selected",
929
+ "description": "Whether the card is visually selected.\n\nUse 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.",
930
+ "type": "boolean"
931
+ },
932
+ {
933
+ "name": "flat",
934
+ "description": "Whether the card uses the flat visual treatment.\n\nFlat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.",
935
+ "type": "boolean"
936
+ },
937
+ {
938
+ "name": "clickable",
939
+ "description": "Whether the whole card is interactive.\n\nWhen 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.",
940
+ "type": "boolean"
941
+ },
769
942
  { "name": "buttonText" }
770
943
  ],
771
944
  "events": []
@@ -778,37 +951,37 @@
778
951
  "attributes": [
779
952
  {
780
953
  "name": "name",
781
- "description": "The name of the checkbox, submitted as a name/value pair with form data.",
954
+ "description": "The name of the checkbox.\n\nWhen 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.",
782
955
  "value": { "type": "string | undefined" }
783
956
  },
784
957
  {
785
958
  "name": "value",
786
- "description": "The value of the checkbox, submitted as a name/value pair with form data.",
959
+ "description": "The value submitted when the checkbox is checked.\n\nIf no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.",
787
960
  "value": { "type": "string | null", "default": "null" }
788
961
  },
789
962
  {
790
963
  "name": "indeterminate",
791
- "description": "Draws the checkbox in an indeterminate state.",
964
+ "description": "Whether the checkbox is visually indeterminate.\n\nUse 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.",
792
965
  "value": { "type": "boolean", "default": "false" }
793
966
  },
794
967
  {
795
968
  "name": "checked",
796
- "description": "Draws the checkbox in a checked state (reflected to attribute).",
969
+ "description": "Whether the checkbox is checked.\n\nChecked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.",
797
970
  "value": { "type": "boolean", "default": "false" }
798
971
  },
799
972
  {
800
973
  "name": "disabled",
801
- "description": "Disables the checkbox.",
974
+ "description": "Whether the checkbox is disabled.\n\nDisabled checkboxes cannot be focused, changed, or submitted with form data.",
802
975
  "value": { "type": "boolean", "default": "false" }
803
976
  },
804
977
  {
805
978
  "name": "required",
806
- "description": "Makes the checkbox a required field.",
979
+ "description": "Whether the checkbox must be checked before form submission.\n\nA required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.",
807
980
  "value": { "type": "boolean", "default": "false" }
808
981
  },
809
982
  {
810
983
  "name": "invalid",
811
- "description": "Draws the checkbox in an invalid state.",
984
+ "description": "Whether the checkbox is visually invalid.\n\nUse 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.",
812
985
  "value": { "type": "boolean", "default": "false" }
813
986
  }
814
987
  ],
@@ -818,37 +991,37 @@
818
991
  { "name": "input", "type": "HTMLInputElement | null" },
819
992
  {
820
993
  "name": "name",
821
- "description": "The name of the checkbox, submitted as a name/value pair with form data.",
994
+ "description": "The name of the checkbox.\n\nWhen 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.",
822
995
  "type": "string | undefined"
823
996
  },
824
997
  {
825
998
  "name": "value",
826
- "description": "The value of the checkbox, submitted as a name/value pair with form data.",
999
+ "description": "The value submitted when the checkbox is checked.\n\nIf no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.",
827
1000
  "type": "string | null"
828
1001
  },
829
1002
  {
830
1003
  "name": "indeterminate",
831
- "description": "Draws the checkbox in an indeterminate state.",
1004
+ "description": "Whether the checkbox is visually indeterminate.\n\nUse 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.",
832
1005
  "type": "boolean"
833
1006
  },
834
1007
  {
835
1008
  "name": "checked",
836
- "description": "Draws the checkbox in a checked state (reflected to attribute).",
1009
+ "description": "Whether the checkbox is checked.\n\nChecked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.",
837
1010
  "type": "boolean"
838
1011
  },
839
1012
  {
840
1013
  "name": "disabled",
841
- "description": "Disables the checkbox.",
1014
+ "description": "Whether the checkbox is disabled.\n\nDisabled checkboxes cannot be focused, changed, or submitted with form data.",
842
1015
  "type": "boolean"
843
1016
  },
844
1017
  {
845
1018
  "name": "required",
846
- "description": "Makes the checkbox a required field.",
1019
+ "description": "Whether the checkbox must be checked before form submission.\n\nA required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.",
847
1020
  "type": "boolean"
848
1021
  },
849
1022
  {
850
1023
  "name": "invalid",
851
- "description": "Draws the checkbox in an invalid state.",
1024
+ "description": "Whether the checkbox is visually invalid.\n\nUse 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.",
852
1025
  "type": "boolean"
853
1026
  },
854
1027
  {
@@ -877,28 +1050,32 @@
877
1050
  "attributes": [
878
1051
  {
879
1052
  "name": "label",
880
- "description": "The group label displayed above the checkboxes.",
1053
+ "description": "The group label displayed above the checkboxes.\n\nUse this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies.",
881
1054
  "value": { "type": "string" }
882
1055
  },
883
1056
  {
884
1057
  "name": "name",
885
- "description": "The name applied to child checkboxes when they do not provide one.",
1058
+ "description": "The name applied to child checkboxes when they do not provide one.\n\nUse 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`.",
886
1059
  "value": { "type": "string" }
887
1060
  },
888
1061
  {
889
1062
  "name": "optional",
890
- "description": "Whether to show optional text next to the label.",
1063
+ "description": "Whether to show optional text next to the label.\n\nUse this to indicate that selecting an option from the group is not required.",
891
1064
  "value": { "type": "boolean", "default": "false" }
892
1065
  },
893
- { "name": "help-text", "value": { "type": "string" } },
1066
+ {
1067
+ "name": "help-text",
1068
+ "description": "Help text displayed below the checkbox group.\n\nUse this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message.",
1069
+ "value": { "type": "string" }
1070
+ },
894
1071
  {
895
1072
  "name": "required",
896
- "description": "Makes the checkbox group required.",
1073
+ "description": "Whether at least one checkbox in the group must be selected.\n\nRequired validation is managed by the group. The individual checkboxes provide the submitted form values.",
897
1074
  "value": { "type": "boolean", "default": "false" }
898
1075
  },
899
1076
  {
900
1077
  "name": "invalid",
901
- "description": "Marks the checkbox group as invalid.",
1078
+ "description": "Whether the checkbox group is visually invalid.\n\nUse 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.",
902
1079
  "value": { "type": "boolean", "default": "false" }
903
1080
  }
904
1081
  ],
@@ -907,28 +1084,32 @@
907
1084
  "properties": [
908
1085
  {
909
1086
  "name": "label",
910
- "description": "The group label displayed above the checkboxes.",
1087
+ "description": "The group label displayed above the checkboxes.\n\nUse this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies.",
911
1088
  "type": "string"
912
1089
  },
913
1090
  {
914
1091
  "name": "name",
915
- "description": "The name applied to child checkboxes when they do not provide one.",
1092
+ "description": "The name applied to child checkboxes when they do not provide one.\n\nUse 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`.",
916
1093
  "type": "string"
917
1094
  },
918
1095
  {
919
1096
  "name": "optional",
920
- "description": "Whether to show optional text next to the label.",
1097
+ "description": "Whether to show optional text next to the label.\n\nUse this to indicate that selecting an option from the group is not required.",
921
1098
  "type": "boolean"
922
1099
  },
923
- { "name": "helpText", "type": "string" },
1100
+ {
1101
+ "name": "helpText",
1102
+ "description": "Help text displayed below the checkbox group.\n\nUse this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message.",
1103
+ "type": "string"
1104
+ },
924
1105
  {
925
1106
  "name": "required",
926
- "description": "Makes the checkbox group required.",
1107
+ "description": "Whether at least one checkbox in the group must be selected.\n\nRequired validation is managed by the group. The individual checkboxes provide the submitted form values.",
927
1108
  "type": "boolean"
928
1109
  },
929
1110
  {
930
1111
  "name": "invalid",
931
- "description": "Marks the checkbox group as invalid.",
1112
+ "description": "Whether the checkbox group is visually invalid.\n\nUse 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.",
932
1113
  "type": "boolean"
933
1114
  }
934
1115
  ],
@@ -942,77 +1123,77 @@
942
1123
  "attributes": [
943
1124
  {
944
1125
  "name": "options",
945
- "description": "The available options to select from",
1126
+ "description": "The available options to select from.\n\nUse this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.",
946
1127
  "value": { "type": "ComboboxOption[]", "default": "[]" }
947
1128
  },
948
1129
  {
949
1130
  "name": "label",
950
- "description": "Label above input",
1131
+ "description": "The label displayed above the input.\n\nUse this to give the combobox a visible and accessible name.",
951
1132
  "value": { "type": "string | undefined", "default": "''" }
952
1133
  },
953
1134
  {
954
1135
  "name": "placeholder",
955
- "description": "Input placeholder",
1136
+ "description": "Placeholder text displayed when the input is empty.\n\nUse this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.",
956
1137
  "value": { "type": "string | undefined", "default": "''" }
957
1138
  },
958
1139
  {
959
1140
  "name": "value",
960
- "description": "The input value",
1141
+ "description": "The selected or typed value.\n\nWhen an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.",
961
1142
  "value": { "type": "string", "default": "''" }
962
1143
  },
963
1144
  {
964
1145
  "name": "open-on-focus",
965
- "description": "Whether the popover opens when focus is on the text field",
1146
+ "description": "Whether the option list opens when the input receives focus.\n\nUse this when users should see available options before they start typing.",
966
1147
  "value": { "type": "boolean", "default": "false" }
967
1148
  },
968
1149
  {
969
1150
  "name": "select-on-blur",
970
- "description": "Select active option on blur",
1151
+ "description": "Whether the active option is selected when the input loses focus.\n\nWhen enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.",
971
1152
  "value": { "type": "boolean", "default": "true" }
972
1153
  },
973
1154
  {
974
1155
  "name": "match-text-segments",
975
- "description": "Whether the matching text segments in the options should be highlighted",
1156
+ "description": "Whether matching text segments in options are highlighted.\n\nUse this to visually emphasize the part of each option that matches the current input value.",
976
1157
  "value": { "type": "boolean", "default": "false" }
977
1158
  },
978
1159
  {
979
1160
  "name": "disable-static-filtering",
980
- "description": "Disable client-side static filtering",
1161
+ "description": "Whether built-in client-side filtering is disabled.\n\nUse this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.",
981
1162
  "value": { "type": "boolean", "default": "false" }
982
1163
  },
983
1164
  {
984
1165
  "name": "invalid",
985
- "description": "Renders the input field in an invalid state",
1166
+ "description": "Whether the combobox is visually invalid.\n\nUse this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.",
986
1167
  "value": { "type": "boolean", "default": "false" }
987
1168
  },
988
1169
  {
989
1170
  "name": "help-text",
990
- "description": "The content to display as the help text",
1171
+ "description": "Help text displayed below the input.\n\nUse this for supporting guidance or validation feedback.",
991
1172
  "value": { "type": "string | undefined", "default": "''" }
992
1173
  },
993
1174
  {
994
1175
  "name": "disabled",
995
- "description": "Whether the element is disabled",
1176
+ "description": "Whether the combobox is disabled.\n\nDisabled comboboxes cannot be focused, changed, or submitted with form data.",
996
1177
  "value": { "type": "boolean", "default": "false" }
997
1178
  },
998
1179
  {
999
1180
  "name": "required",
1000
- "description": "Whether the element is required",
1181
+ "description": "Whether the combobox is required before form submission.\n\nUse this when the user must provide a value before submitting the form.",
1001
1182
  "value": { "type": "boolean", "default": "false" }
1002
1183
  },
1003
1184
  {
1004
1185
  "name": "optional",
1005
- "description": "Whether to show optional text",
1186
+ "description": "Whether to show optional text next to the label.\n\nUse this to indicate that the combobox is not required.",
1006
1187
  "value": { "type": "boolean", "default": "false" }
1007
1188
  },
1008
1189
  {
1009
1190
  "name": "name",
1010
- "description": "Name attribute for form submission",
1191
+ "description": "The name submitted with the combobox value.\n\nUse this when the combobox belongs to a form and its value should be included in form data.",
1011
1192
  "value": { "type": "string | undefined", "default": "''" }
1012
1193
  },
1013
1194
  {
1014
1195
  "name": "autocomplete",
1015
- "description": "Autocomplete attribute for the input field",
1196
+ "description": "The autocomplete attribute passed to the internal input.\n\nDefaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.",
1016
1197
  "value": { "type": "string | undefined", "default": "'off'" }
1017
1198
  }
1018
1199
  ],
@@ -1021,77 +1202,77 @@
1021
1202
  "properties": [
1022
1203
  {
1023
1204
  "name": "options",
1024
- "description": "The available options to select from",
1205
+ "description": "The available options to select from.\n\nUse this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.",
1025
1206
  "type": "ComboboxOption[]"
1026
1207
  },
1027
1208
  {
1028
1209
  "name": "label",
1029
- "description": "Label above input",
1210
+ "description": "The label displayed above the input.\n\nUse this to give the combobox a visible and accessible name.",
1030
1211
  "type": "string | undefined"
1031
1212
  },
1032
1213
  {
1033
1214
  "name": "placeholder",
1034
- "description": "Input placeholder",
1215
+ "description": "Placeholder text displayed when the input is empty.\n\nUse this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.",
1035
1216
  "type": "string | undefined"
1036
1217
  },
1037
1218
  {
1038
1219
  "name": "value",
1039
- "description": "The input value",
1220
+ "description": "The selected or typed value.\n\nWhen an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.",
1040
1221
  "type": "string"
1041
1222
  },
1042
1223
  {
1043
1224
  "name": "openOnFocus",
1044
- "description": "Whether the popover opens when focus is on the text field",
1225
+ "description": "Whether the option list opens when the input receives focus.\n\nUse this when users should see available options before they start typing.",
1045
1226
  "type": "boolean"
1046
1227
  },
1047
1228
  {
1048
1229
  "name": "selectOnBlur",
1049
- "description": "Select active option on blur",
1230
+ "description": "Whether the active option is selected when the input loses focus.\n\nWhen enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.",
1050
1231
  "type": "boolean"
1051
1232
  },
1052
1233
  {
1053
1234
  "name": "matchTextSegments",
1054
- "description": "Whether the matching text segments in the options should be highlighted",
1235
+ "description": "Whether matching text segments in options are highlighted.\n\nUse this to visually emphasize the part of each option that matches the current input value.",
1055
1236
  "type": "boolean"
1056
1237
  },
1057
1238
  {
1058
1239
  "name": "disableStaticFiltering",
1059
- "description": "Disable client-side static filtering",
1240
+ "description": "Whether built-in client-side filtering is disabled.\n\nUse this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.",
1060
1241
  "type": "boolean"
1061
1242
  },
1062
1243
  {
1063
1244
  "name": "invalid",
1064
- "description": "Renders the input field in an invalid state",
1245
+ "description": "Whether the combobox is visually invalid.\n\nUse this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.",
1065
1246
  "type": "boolean"
1066
1247
  },
1067
1248
  {
1068
1249
  "name": "helpText",
1069
- "description": "The content to display as the help text",
1250
+ "description": "Help text displayed below the input.\n\nUse this for supporting guidance or validation feedback.",
1070
1251
  "type": "string | undefined"
1071
1252
  },
1072
1253
  {
1073
1254
  "name": "disabled",
1074
- "description": "Whether the element is disabled",
1255
+ "description": "Whether the combobox is disabled.\n\nDisabled comboboxes cannot be focused, changed, or submitted with form data.",
1075
1256
  "type": "boolean"
1076
1257
  },
1077
1258
  {
1078
1259
  "name": "required",
1079
- "description": "Whether the element is required",
1260
+ "description": "Whether the combobox is required before form submission.\n\nUse this when the user must provide a value before submitting the form.",
1080
1261
  "type": "boolean"
1081
1262
  },
1082
1263
  {
1083
1264
  "name": "optional",
1084
- "description": "Whether to show optional text",
1265
+ "description": "Whether to show optional text next to the label.\n\nUse this to indicate that the combobox is not required.",
1085
1266
  "type": "boolean"
1086
1267
  },
1087
1268
  {
1088
1269
  "name": "name",
1089
- "description": "Name attribute for form submission",
1270
+ "description": "The name submitted with the combobox value.\n\nUse this when the combobox belongs to a form and its value should be included in form data.",
1090
1271
  "type": "string | undefined"
1091
1272
  },
1092
1273
  {
1093
1274
  "name": "autocomplete",
1094
- "description": "Autocomplete attribute for the input field",
1275
+ "description": "The autocomplete attribute passed to the internal input.\n\nDefaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.",
1095
1276
  "type": "string | undefined"
1096
1277
  }
1097
1278
  ],
@@ -1103,59 +1284,83 @@
1103
1284
  "description": "An input for dates.\n\nUses the `lang` attribute on either the element or on `<html>` to determine the locale options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)\n---\n",
1104
1285
  "doc-url": "",
1105
1286
  "attributes": [
1106
- { "name": "label", "value": { "type": "string" } },
1287
+ {
1288
+ "name": "label",
1289
+ "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.",
1290
+ "value": { "type": "string" }
1291
+ },
1107
1292
  {
1108
1293
  "name": "lang",
1109
- "description": "Takes precedence over the `<html>` lang attribute.",
1294
+ "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.",
1295
+ "value": { "type": "string" }
1296
+ },
1297
+ {
1298
+ "name": "name",
1299
+ "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.",
1300
+ "value": { "type": "string" }
1301
+ },
1302
+ {
1303
+ "name": "value",
1304
+ "description": "The selected date value.\n\nUse 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.",
1110
1305
  "value": { "type": "string" }
1111
1306
  },
1112
- { "name": "name", "value": { "type": "string" } },
1113
- { "name": "value", "value": { "type": "string" } },
1114
1307
  {
1115
1308
  "name": "header-format",
1116
- "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1309
+ "description": "The date format used in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1117
1310
  "value": { "type": "string", "default": "'MMMM yyyy'" }
1118
1311
  },
1119
1312
  {
1120
1313
  "name": "weekday-format",
1121
- "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1314
+ "description": "The weekday format shown above the calendar grid.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1122
1315
  "value": { "type": "string", "default": "'EEEEEE'" }
1123
1316
  },
1124
1317
  {
1125
1318
  "name": "day-format",
1126
- "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1319
+ "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1127
1320
  "value": { "type": "string", "default": "'PPPP'" }
1128
1321
  }
1129
1322
  ],
1130
1323
  "events": [],
1131
1324
  "js": {
1132
1325
  "properties": [
1133
- { "name": "label", "type": "string" },
1326
+ {
1327
+ "name": "label",
1328
+ "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.",
1329
+ "type": "string"
1330
+ },
1134
1331
  {
1135
1332
  "name": "lang",
1136
- "description": "Takes precedence over the `<html>` lang attribute.",
1333
+ "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.",
1334
+ "type": "string"
1335
+ },
1336
+ {
1337
+ "name": "name",
1338
+ "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.",
1339
+ "type": "string"
1340
+ },
1341
+ {
1342
+ "name": "value",
1343
+ "description": "The selected date value.\n\nUse 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.",
1137
1344
  "type": "string"
1138
1345
  },
1139
- { "name": "name", "type": "string" },
1140
- { "name": "value", "type": "string" },
1141
1346
  {
1142
1347
  "name": "headerFormat",
1143
- "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1348
+ "description": "The date format used in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1144
1349
  "type": "string"
1145
1350
  },
1146
1351
  {
1147
1352
  "name": "weekdayFormat",
1148
- "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1353
+ "description": "The weekday format shown above the calendar grid.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1149
1354
  "type": "string"
1150
1355
  },
1151
1356
  {
1152
1357
  "name": "isDayDisabled",
1153
- "description": "Lets you control if a date in the calendar should be disabled.\n\nThis needs to be set on the element instance in JavaScript, not as an HTML attribute.",
1358
+ "description": "Function used to disable dates in the calendar.\n\nSet this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar.",
1154
1359
  "type": "(day: Date) => boolean"
1155
1360
  },
1156
1361
  {
1157
1362
  "name": "dayFormat",
1158
- "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1363
+ "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1159
1364
  "type": "string"
1160
1365
  },
1161
1366
  { "name": "isCalendarOpen", "type": "boolean" },
@@ -1180,33 +1385,46 @@
1180
1385
  },
1181
1386
  {
1182
1387
  "name": "w-expandable",
1183
- "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)\n---\n\n\n### **Slots:**\n - **title** - Alternative to the `title` attribute should you need to provide some additional markup.",
1388
+ "description": "Expandable is a layout component used for creating expandable content areas on a page.\n---\n\n\n### **Slots:**\n - **title** - Alternative to the `title` attribute should you need to provide some additional markup.",
1184
1389
  "doc-url": "",
1185
1390
  "attributes": [
1186
1391
  {
1187
1392
  "name": "expanded",
1393
+ "description": "Controls component's expanded state",
1188
1394
  "value": { "type": "boolean", "default": "false" }
1189
1395
  },
1190
- { "name": "title", "value": { "type": "string" } },
1396
+ {
1397
+ "name": "title",
1398
+ "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.",
1399
+ "value": { "type": "string" }
1400
+ },
1191
1401
  {
1192
1402
  "name": "box",
1403
+ "description": "Will make the expandable a Box",
1193
1404
  "value": { "type": "boolean", "default": "false" }
1194
1405
  },
1195
1406
  {
1196
1407
  "name": "bleed",
1408
+ "description": "Will make the expandable full-width on the sm breakpoint size",
1197
1409
  "value": { "type": "boolean", "default": "false" }
1198
1410
  },
1199
1411
  { "name": "button-class", "value": { "type": "string" } },
1200
1412
  { "name": "content-class", "value": { "type": "string" } },
1201
1413
  {
1202
1414
  "name": "no-chevron",
1415
+ "description": "Controls chevron visibility",
1203
1416
  "value": { "type": "boolean", "default": "false" }
1204
1417
  },
1205
1418
  {
1206
1419
  "name": "animated",
1420
+ "description": "Will animate the expansion/collapse",
1207
1421
  "value": { "type": "boolean", "default": "false" }
1208
1422
  },
1209
- { "name": "heading-level", "value": { "type": "number" } },
1423
+ {
1424
+ "name": "heading-level",
1425
+ "description": "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.",
1426
+ "value": { "type": "number" }
1427
+ },
1210
1428
  {
1211
1429
  "name": "_hasTitle",
1212
1430
  "value": { "type": "boolean", "default": "true" }
@@ -1225,33 +1443,61 @@
1225
1443
  "events": [],
1226
1444
  "js": {
1227
1445
  "properties": [
1228
- { "name": "expanded", "type": "boolean" },
1229
- { "name": "title", "type": "string" },
1230
- { "name": "box", "type": "boolean" },
1231
- { "name": "bleed", "type": "boolean" },
1446
+ {
1447
+ "name": "expanded",
1448
+ "description": "Controls component's expanded state",
1449
+ "type": "boolean"
1450
+ },
1451
+ {
1452
+ "name": "title",
1453
+ "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.",
1454
+ "type": "string"
1455
+ },
1456
+ {
1457
+ "name": "box",
1458
+ "description": "Will make the expandable a Box",
1459
+ "type": "boolean"
1460
+ },
1461
+ {
1462
+ "name": "bleed",
1463
+ "description": "Will make the expandable full-width on the sm breakpoint size",
1464
+ "type": "boolean"
1465
+ },
1232
1466
  { "name": "buttonClass", "type": "string" },
1233
1467
  { "name": "contentClass", "type": "string" },
1234
- { "name": "noChevron", "type": "boolean" },
1235
- { "name": "animated", "type": "boolean" },
1236
- { "name": "headingLevel", "type": "number" },
1237
- { "name": "_hasTitle", "type": "boolean" },
1238
- { "name": "_showChevronUp", "type": "boolean" }
1468
+ {
1469
+ "name": "noChevron",
1470
+ "description": "Controls chevron visibility",
1471
+ "type": "boolean"
1472
+ },
1473
+ {
1474
+ "name": "animated",
1475
+ "description": "Will animate the expansion/collapse",
1476
+ "type": "boolean"
1477
+ },
1478
+ {
1479
+ "name": "headingLevel",
1480
+ "description": "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.",
1481
+ "type": "number"
1482
+ }
1239
1483
  ],
1240
1484
  "events": []
1241
1485
  }
1242
1486
  },
1243
1487
  {
1244
1488
  "name": "w-modal",
1245
- "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\n---\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.",
1489
+ "description": "Modals (or dialogs) display important information that users need to acknowledge.\n---\n\n\n### **Events:**\n - **shown**\n- **hidden**\n\n### **Slots:**\n - **header** - Typically where you would use the `w-modal-header` component.\n- **content** - The main content of the modal.\n- **footer** - Typically where you would use the `w-modal-footer` component, for things like actions.",
1246
1490
  "doc-url": "",
1247
1491
  "attributes": [
1248
1492
  {
1249
1493
  "name": "show",
1494
+ "description": "Controls if the modal should show or hide.\n\nYou can also call the `open()` and `close()` methods.",
1250
1495
  "value": { "type": "boolean", "default": "false" }
1251
1496
  },
1252
1497
  { "name": "content-id", "value": { "type": "string" } },
1253
1498
  {
1254
1499
  "name": "ignore-backdrop-clicks",
1500
+ "description": "Ignores clicks to the backdrop when set",
1255
1501
  "value": { "type": "boolean", "default": "false" }
1256
1502
  }
1257
1503
  ],
@@ -1275,12 +1521,17 @@
1275
1521
  ],
1276
1522
  "js": {
1277
1523
  "properties": [
1278
- { "name": "show", "type": "boolean" },
1524
+ {
1525
+ "name": "show",
1526
+ "description": "Controls if the modal should show or hide.\n\nYou can also call the `open()` and `close()` methods.",
1527
+ "type": "boolean"
1528
+ },
1279
1529
  { "name": "contentId", "type": "string" },
1280
- { "name": "ignoreBackdropClicks", "type": "boolean" },
1281
- { "name": "dialogEl", "type": "HTMLDialogElement" },
1282
- { "name": "dialogInnerEl", "type": "HTMLElement" },
1283
- { "name": "contentEl", "type": "HTMLElement" }
1530
+ {
1531
+ "name": "ignoreBackdropClicks",
1532
+ "description": "Ignores clicks to the backdrop when set",
1533
+ "type": "boolean"
1534
+ }
1284
1535
  ],
1285
1536
  "events": [
1286
1537
  { "name": "shown", "type": "CustomEvent" },
@@ -1290,7 +1541,7 @@
1290
1541
  },
1291
1542
  {
1292
1543
  "name": "w-modal-footer",
1293
- "description": "The footer section of a modal, typically where you place actions.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\n---\n",
1544
+ "description": "The footer section of a modal, typically where you place actions.\n---\n",
1294
1545
  "doc-url": "",
1295
1546
  "attributes": [],
1296
1547
  "events": [],
@@ -1298,16 +1549,22 @@
1298
1549
  },
1299
1550
  {
1300
1551
  "name": "w-modal-header",
1301
- "description": "The header section of a modal, typically where you place the title and a close button.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-modal--docs)\n---\n\n\n### **Events:**\n - **backClicked**\n\n### **Slots:**\n - **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.",
1552
+ "description": "The header section of a modal, typically where you place the title and a close button.\n---\n\n\n### **Events:**\n - **backClicked**\n\n### **Slots:**\n - **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.",
1302
1553
  "doc-url": "",
1303
1554
  "attributes": [
1304
- { "name": "title", "value": { "type": "string" } },
1555
+ {
1556
+ "name": "title",
1557
+ "description": "A short but descriptive title for the modal",
1558
+ "value": { "type": "string" }
1559
+ },
1305
1560
  {
1306
1561
  "name": "back",
1562
+ "description": "Whether the modal header should have a back button",
1307
1563
  "value": { "type": "boolean", "default": "false" }
1308
1564
  },
1309
1565
  {
1310
1566
  "name": "no-close",
1567
+ "description": "Lets you hide the close button in the header",
1311
1568
  "value": { "type": "boolean", "default": "false" }
1312
1569
  }
1313
1570
  ],
@@ -1320,31 +1577,39 @@
1320
1577
  "events": [{ "name": "backClicked", "type": "CustomEvent" }],
1321
1578
  "js": {
1322
1579
  "properties": [
1323
- { "name": "title", "type": "string" },
1324
- { "name": "back", "type": "boolean" },
1325
- { "name": "noClose", "type": "boolean" },
1326
- { "name": "titleEl", "type": "HTMLElement" },
1327
- { "name": "titleClasses" },
1328
- { "name": "backButton" },
1329
- { "name": "closeButton" }
1580
+ {
1581
+ "name": "title",
1582
+ "description": "A short but descriptive title for the modal",
1583
+ "type": "string"
1584
+ },
1585
+ {
1586
+ "name": "back",
1587
+ "description": "Whether the modal header should have a back button",
1588
+ "type": "boolean"
1589
+ },
1590
+ {
1591
+ "name": "noClose",
1592
+ "description": "Lets you hide the close button in the header",
1593
+ "type": "boolean"
1594
+ }
1330
1595
  ],
1331
1596
  "events": [{ "name": "backClicked", "type": "CustomEvent" }]
1332
1597
  }
1333
1598
  },
1334
1599
  {
1335
1600
  "name": "w-page-indicator",
1336
- "description": "A page indicator component that displays a series of dots representing pages.\nOne dot is highlighted to indicate the currently selected page.\n---\n",
1601
+ "description": "A page indicator component that displays a series of dots representing pages.\n\nOne dot is highlighted to indicate the currently selected page.\n---\n",
1337
1602
  "doc-url": "",
1338
1603
  "attributes": [
1339
1604
  {
1340
1605
  "name": "selected-page",
1341
- "description": "Currently selected page (1-based index, clamped to valid range)",
1342
- "value": { "type": "number" }
1606
+ "description": "Currently selected page (1-based index)",
1607
+ "value": { "type": "number", "default": "1" }
1343
1608
  },
1344
1609
  {
1345
1610
  "name": "page-count",
1346
- "description": "Total number of pages (minimum 1)",
1347
- "value": { "type": "number" }
1611
+ "description": "Total number of pages",
1612
+ "value": { "type": "number", "default": "1" }
1348
1613
  }
1349
1614
  ],
1350
1615
  "events": [],
@@ -1352,12 +1617,12 @@
1352
1617
  "properties": [
1353
1618
  {
1354
1619
  "name": "selectedPage",
1355
- "description": "Currently selected page (1-based index, clamped to valid range)",
1620
+ "description": "Currently selected page (1-based index)",
1356
1621
  "type": "number"
1357
1622
  },
1358
1623
  {
1359
1624
  "name": "pageCount",
1360
- "description": "Total number of pages (minimum 1)",
1625
+ "description": "Total number of pages",
1361
1626
  "type": "number"
1362
1627
  }
1363
1628
  ],
@@ -1366,73 +1631,145 @@
1366
1631
  },
1367
1632
  {
1368
1633
  "name": "w-pagination",
1369
- "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)\n---\n\n\n### **Events:**\n - **page-click** - Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.",
1634
+ "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n---\n\n\n### **Events:**\n - **page-click** - Triggered when a link in the pagination is clicked. Contains the page number in `string` form.",
1370
1635
  "doc-url": "",
1371
1636
  "attributes": [
1372
- { "name": "base-url", "value": { "type": "string" } },
1373
- { "name": "pages", "value": { "type": "number" } },
1374
- { "name": "current-page", "value": { "type": "number" } },
1375
- { "name": "visible-pages", "value": { "type": "number" } }
1637
+ {
1638
+ "name": "base-url",
1639
+ "description": "The base URL used to construct page links, for example `/search?page=`.\n\nThe page number is appended to this URL.",
1640
+ "value": { "type": "string" }
1641
+ },
1642
+ {
1643
+ "name": "pages",
1644
+ "description": "The total number of pages.",
1645
+ "value": { "type": "number" }
1646
+ },
1647
+ {
1648
+ "name": "current-page",
1649
+ "description": "The currently active page number.",
1650
+ "value": { "type": "number", "default": "1" }
1651
+ },
1652
+ {
1653
+ "name": "visible-pages",
1654
+ "description": "The maximum number of page numbers visible.",
1655
+ "value": { "type": "number", "default": "7" }
1656
+ }
1376
1657
  ],
1377
1658
  "events": [
1378
1659
  {
1379
1660
  "name": "page-click",
1380
1661
  "type": "CustomEvent",
1381
- "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
1662
+ "description": "Triggered when a link in the pagination is clicked. Contains the page number in `string` form."
1382
1663
  }
1383
1664
  ],
1384
1665
  "js": {
1385
1666
  "properties": [
1386
- { "name": "baseUrl", "type": "string" },
1387
- { "name": "pages", "type": "number" },
1388
- { "name": "currentPageNumber", "type": "number" },
1389
- { "name": "visiblePages", "type": "number" }
1667
+ {
1668
+ "name": "baseUrl",
1669
+ "description": "The base URL used to construct page links, for example `/search?page=`.\n\nThe page number is appended to this URL.",
1670
+ "type": "string"
1671
+ },
1672
+ {
1673
+ "name": "pages",
1674
+ "description": "The total number of pages.",
1675
+ "type": "number"
1676
+ },
1677
+ {
1678
+ "name": "currentPageNumber",
1679
+ "description": "The currently active page number.",
1680
+ "type": "number"
1681
+ },
1682
+ {
1683
+ "name": "visiblePages",
1684
+ "description": "The maximum number of page numbers visible.",
1685
+ "type": "number"
1686
+ }
1390
1687
  ],
1391
1688
  "events": [
1392
1689
  {
1393
1690
  "name": "page-click",
1394
1691
  "type": "CustomEvent",
1395
- "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
1692
+ "description": "Triggered when a link in the pagination is clicked. Contains the page number in `string` form."
1396
1693
  }
1397
1694
  ]
1398
1695
  }
1399
1696
  },
1400
1697
  {
1401
1698
  "name": "w-pill",
1402
- "description": "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.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-pill--docs)\n---\n\n\n### **Events:**\n - **w-pill-click**\n- **w-pill-close**",
1699
+ "description": "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.\n---\n\n\n### **Events:**\n - **w-pill-click** - Fires when the pill itself is clicked.\n- **w-pill-close** - Fires when the pill's close button is clicked.",
1403
1700
  "doc-url": "",
1404
1701
  "attributes": [
1405
1702
  {
1406
1703
  "name": "can-close",
1704
+ "description": "Whether the pill should be removable via a close button.",
1407
1705
  "value": { "type": "boolean", "default": "false" }
1408
1706
  },
1409
1707
  {
1410
1708
  "name": "suggestion",
1709
+ "description": "Whether the pill should be rendered as a suggestion.",
1411
1710
  "value": { "type": "boolean", "default": "false" }
1412
1711
  },
1413
1712
  { "name": "open-sr-label", "value": { "type": "string" } },
1414
- { "name": "open-aria-label", "value": { "type": "string" } },
1713
+ {
1714
+ "name": "open-aria-label",
1715
+ "description": "Label read by screen readers when targeting the pill.",
1716
+ "value": { "type": "string" }
1717
+ },
1415
1718
  { "name": "close-sr-label", "value": { "type": "string" } },
1416
- { "name": "close-aria-label", "value": { "type": "string" } }
1719
+ {
1720
+ "name": "close-aria-label",
1721
+ "description": "Label read by screen readers when targeting the close button.",
1722
+ "value": { "type": "string" }
1723
+ }
1417
1724
  ],
1418
1725
  "events": [
1419
- { "name": "w-pill-click", "type": "CustomEvent" },
1420
- { "name": "w-pill-close", "type": "CustomEvent" }
1726
+ {
1727
+ "name": "w-pill-click",
1728
+ "type": "CustomEvent",
1729
+ "description": "Fires when the pill itself is clicked."
1730
+ },
1731
+ {
1732
+ "name": "w-pill-close",
1733
+ "type": "CustomEvent",
1734
+ "description": "Fires when the pill's close button is clicked."
1735
+ }
1421
1736
  ],
1422
1737
  "js": {
1423
1738
  "properties": [
1424
- { "name": "canClose", "type": "boolean" },
1425
- { "name": "suggestion", "type": "boolean" },
1739
+ {
1740
+ "name": "canClose",
1741
+ "description": "Whether the pill should be removable via a close button.",
1742
+ "type": "boolean"
1743
+ },
1744
+ {
1745
+ "name": "suggestion",
1746
+ "description": "Whether the pill should be rendered as a suggestion.",
1747
+ "type": "boolean"
1748
+ },
1426
1749
  { "name": "openSrLabel", "type": "string" },
1427
- { "name": "openAriaLabel", "type": "string" },
1750
+ {
1751
+ "name": "openAriaLabel",
1752
+ "description": "Label read by screen readers when targeting the pill.",
1753
+ "type": "string"
1754
+ },
1428
1755
  { "name": "closeSrLabel", "type": "string" },
1429
- { "name": "closeAriaLabel", "type": "string" },
1430
- { "name": "openFilterSrText" },
1431
- { "name": "removeFilterSrText" }
1756
+ {
1757
+ "name": "closeAriaLabel",
1758
+ "description": "Label read by screen readers when targeting the close button.",
1759
+ "type": "string"
1760
+ }
1432
1761
  ],
1433
1762
  "events": [
1434
- { "name": "w-pill-click", "type": "CustomEvent" },
1435
- { "name": "w-pill-close", "type": "CustomEvent" }
1763
+ {
1764
+ "name": "w-pill-click",
1765
+ "type": "CustomEvent",
1766
+ "description": "Fires when the pill itself is clicked."
1767
+ },
1768
+ {
1769
+ "name": "w-pill-close",
1770
+ "type": "CustomEvent",
1771
+ "description": "Fires when the pill's close button is clicked."
1772
+ }
1436
1773
  ]
1437
1774
  }
1438
1775
  },