@warp-ds/elements 2.9.0-next.5 → 2.9.0-next.6

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 (65) hide show
  1. package/dist/custom-elements.json +159 -97
  2. package/dist/docs/affix/affix.md +25 -23
  3. package/dist/docs/affix/api.md +25 -23
  4. package/dist/docs/alert/alert.md +12 -12
  5. package/dist/docs/alert/api.md +12 -12
  6. package/dist/docs/attention/api.md +46 -46
  7. package/dist/docs/attention/attention.md +46 -46
  8. package/dist/docs/badge/accessibility.md +44 -0
  9. package/dist/docs/badge/api.md +12 -8
  10. package/dist/docs/badge/badge.md +191 -10
  11. package/dist/docs/badge/examples.md +82 -0
  12. package/dist/docs/badge/usage.md +53 -0
  13. package/dist/docs/button/api.md +46 -42
  14. package/dist/docs/button/button.md +46 -42
  15. package/dist/docs/card/api.md +11 -11
  16. package/dist/docs/card/card.md +11 -11
  17. package/dist/docs/combobox/api.md +62 -62
  18. package/dist/docs/combobox/combobox.md +62 -62
  19. package/dist/docs/datepicker/api.md +74 -66
  20. package/dist/docs/datepicker/datepicker.md +74 -66
  21. package/dist/docs/expandable/api.md +26 -26
  22. package/dist/docs/expandable/expandable.md +26 -26
  23. package/dist/docs/link/api.md +28 -28
  24. package/dist/docs/link/link.md +28 -28
  25. package/dist/docs/page-indicator/api.md +6 -6
  26. package/dist/docs/page-indicator/page-indicator.md +6 -6
  27. package/dist/docs/pagination/api.md +3 -3
  28. package/dist/docs/pagination/pagination.md +3 -3
  29. package/dist/docs/pill/api.md +19 -15
  30. package/dist/docs/pill/pill.md +19 -15
  31. package/dist/docs/select/api.md +44 -44
  32. package/dist/docs/select/select.md +44 -44
  33. package/dist/docs/slider/api.md +80 -78
  34. package/dist/docs/slider/slider.md +80 -78
  35. package/dist/docs/slider-thumb/api.md +28 -76
  36. package/dist/docs/slider-thumb/slider-thumb.md +28 -76
  37. package/dist/docs/switch/api.md +16 -16
  38. package/dist/docs/switch/switch.md +16 -16
  39. package/dist/docs/tab/api.md +26 -40
  40. package/dist/docs/tab/tab.md +26 -40
  41. package/dist/docs/tab-panel/api.md +1 -17
  42. package/dist/docs/tab-panel/tab-panel.md +1 -17
  43. package/dist/docs/tabs/api.md +3 -3
  44. package/dist/docs/tabs/tabs.md +3 -3
  45. package/dist/docs/textarea/api.md +42 -40
  46. package/dist/docs/textarea/textarea.md +42 -40
  47. package/dist/docs/textfield/accessibility.md +15 -0
  48. package/dist/docs/textfield/api.md +86 -83
  49. package/dist/docs/textfield/examples.md +147 -0
  50. package/dist/docs/textfield/textfield.md +279 -86
  51. package/dist/docs/textfield/usage.md +30 -0
  52. package/dist/index.d.ts +220 -196
  53. package/dist/packages/badge/badge.d.ts +7 -5
  54. package/dist/packages/badge/badge.js.map +2 -2
  55. package/dist/packages/datepicker/datepicker.js +1 -1
  56. package/dist/packages/datepicker/datepicker.js.map +2 -2
  57. package/dist/packages/datepicker/datepicker.react.stories.d.ts +9 -1
  58. package/dist/packages/datepicker/react.d.ts +4 -0
  59. package/dist/packages/datepicker/react.js +4 -0
  60. package/dist/packages/textfield/textfield.d.ts +57 -60
  61. package/dist/packages/textfield/textfield.js +5 -5
  62. package/dist/packages/textfield/textfield.js.map +2 -2
  63. package/dist/packages/textfield/textfield.react.stories.d.ts +1 -1
  64. package/dist/web-types.json +392 -116
  65. package/package.json +1 -1
@@ -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.0-next.4",
4
+ "version": "2.9.0-next.5",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -51,74 +51,217 @@
51
51
  },
52
52
  {
53
53
  "name": "w-textfield",
54
- "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)\n---\n",
54
+ "description": "A single-line input component used for entering and editing textual or numeric data.\n---\n\n\n### **Slots:**\n - **suffix** - Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).\n- **prefix** - Use with `<w-affix>` to include a prefix, for example a search icon.",
55
55
  "doc-url": "",
56
56
  "attributes": [
57
57
  {
58
58
  "name": "disabled",
59
+ "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.",
59
60
  "value": { "type": "boolean", "default": "false" }
60
61
  },
61
62
  {
62
63
  "name": "invalid",
64
+ "description": "Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.",
63
65
  "value": { "type": "boolean", "default": "false" }
64
66
  },
65
- { "name": "id", "value": { "type": "string" } },
66
- { "name": "label", "value": { "type": "string" } },
67
- { "name": "help-text", "value": { "type": "string" } },
68
- { "name": "size", "value": { "type": "string" } },
69
- { "name": "max", "value": { "type": "number" } },
70
- { "name": "min", "value": { "type": "number" } },
67
+ {
68
+ "name": "label",
69
+ "description": "Either a `label` or an `aria-label` must be provided.",
70
+ "value": { "type": "string" }
71
+ },
72
+ {
73
+ "name": "help-text",
74
+ "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
75
+ "value": { "type": "string" }
76
+ },
77
+ {
78
+ "name": "size",
79
+ "description": "Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.",
80
+ "value": { "type": "string" }
81
+ },
82
+ {
83
+ "name": "max",
84
+ "description": "Use with `type=\"number\"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).",
85
+ "value": { "type": "number" }
86
+ },
87
+ {
88
+ "name": "min",
89
+ "description": "Use with `type=\"number\"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).",
90
+ "value": { "type": "number" }
91
+ },
71
92
  { "name": "min-length", "value": { "type": "number" } },
93
+ {
94
+ "name": "minlength",
95
+ "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required.",
96
+ "value": { "type": "number" }
97
+ },
72
98
  { "name": "max-length", "value": { "type": "number" } },
73
- { "name": "pattern", "value": { "type": "string" } },
74
- { "name": "placeholder", "value": { "type": "string" } },
99
+ {
100
+ "name": "maxlength",
101
+ "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed.",
102
+ "value": { "type": "number" }
103
+ },
104
+ {
105
+ "name": "pattern",
106
+ "description": "Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)",
107
+ "value": { "type": "string" }
108
+ },
109
+ {
110
+ "name": "placeholder",
111
+ "description": "Set a text that is shown in the textfield when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.",
112
+ "value": { "type": "string" }
113
+ },
75
114
  {
76
115
  "name": "read-only",
77
116
  "value": { "type": "boolean", "default": "false" }
78
117
  },
79
118
  {
80
119
  "name": "readonly",
120
+ "description": "Whether the input can be selected but not changed by the user.",
81
121
  "value": { "type": "boolean", "default": "false" }
82
122
  },
83
123
  {
84
124
  "name": "required",
125
+ "description": "Whether user input is required on the input before form submission.",
85
126
  "value": { "type": "boolean", "default": "false" }
86
127
  },
87
- { "name": "type", "value": { "type": "string" } },
88
- { "name": "value", "value": { "type": "string" } },
89
- { "name": "name", "value": { "type": "string" } },
90
- { "name": "step", "value": { "type": "number" } },
128
+ {
129
+ "name": "type",
130
+ "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).",
131
+ "value": { "type": "string" }
132
+ },
133
+ {
134
+ "name": "value",
135
+ "description": "Lets you set the current value.",
136
+ "value": { "type": "string" }
137
+ },
138
+ {
139
+ "name": "name",
140
+ "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.",
141
+ "value": { "type": "string" }
142
+ },
143
+ {
144
+ "name": "step",
145
+ "description": "When used with `number` this attribute forces inputs to be a whole number of `step`.\n\nFor example with a `step=\"5\"` only values that divide evenly on 5 are allowed.\nUsing arrow up and down in the input field increments and decrements by 5.",
146
+ "value": { "type": "number" }
147
+ },
91
148
  {
92
149
  "name": "autocomplete",
150
+ "description": "A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.",
93
151
  "value": { "type": "string | undefined" }
94
152
  }
95
153
  ],
154
+ "slots": [
155
+ {
156
+ "name": "suffix",
157
+ "description": "Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek)."
158
+ },
159
+ {
160
+ "name": "prefix",
161
+ "description": "Use with `<w-affix>` to include a prefix, for example a search icon."
162
+ }
163
+ ],
96
164
  "events": [],
97
165
  "js": {
98
166
  "properties": [
99
- { "name": "disabled", "type": "boolean" },
100
- { "name": "invalid", "type": "boolean" },
101
- { "name": "id", "type": "string" },
102
- { "name": "label", "type": "string" },
103
- { "name": "helpText", "type": "string" },
104
- { "name": "size", "type": "string" },
105
- { "name": "max", "type": "number" },
106
- { "name": "min", "type": "number" },
167
+ {
168
+ "name": "disabled",
169
+ "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.",
170
+ "type": "boolean"
171
+ },
172
+ {
173
+ "name": "invalid",
174
+ "description": "Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.",
175
+ "type": "boolean"
176
+ },
177
+ {
178
+ "name": "label",
179
+ "description": "Either a `label` or an `aria-label` must be provided.",
180
+ "type": "string"
181
+ },
182
+ {
183
+ "name": "helpText",
184
+ "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
185
+ "type": "string"
186
+ },
187
+ {
188
+ "name": "size",
189
+ "description": "Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.",
190
+ "type": "string"
191
+ },
192
+ {
193
+ "name": "max",
194
+ "description": "Use with `type=\"number\"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).",
195
+ "type": "number"
196
+ },
197
+ {
198
+ "name": "min",
199
+ "description": "Use with `type=\"number\"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).",
200
+ "type": "number"
201
+ },
107
202
  { "name": "minLength", "type": "number" },
203
+ {
204
+ "name": "minlength",
205
+ "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required.",
206
+ "type": "number"
207
+ },
108
208
  { "name": "maxLength", "type": "number" },
109
- { "name": "pattern", "type": "string" },
110
- { "name": "placeholder", "type": "string" },
209
+ {
210
+ "name": "maxlength",
211
+ "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed.",
212
+ "type": "number"
213
+ },
214
+ {
215
+ "name": "pattern",
216
+ "description": "Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)",
217
+ "type": "string"
218
+ },
219
+ {
220
+ "name": "placeholder",
221
+ "description": "Set a text that is shown in the textfield when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.",
222
+ "type": "string"
223
+ },
111
224
  { "name": "readOnly", "type": "boolean" },
112
- { "name": "readonly", "type": "boolean" },
113
- { "name": "required", "type": "boolean" },
114
- { "name": "type", "type": "string" },
115
- { "name": "value", "type": "string" },
116
- { "name": "name", "type": "string" },
117
- { "name": "step", "type": "number" },
118
- { "name": "autocomplete", "type": "string | undefined" },
119
- { "name": "formatter", "type": "(value: string) => string" },
120
- { "name": "_hasPrefix" },
121
- { "name": "_hasSuffix" }
225
+ {
226
+ "name": "readonly",
227
+ "description": "Whether the input can be selected but not changed by the user.",
228
+ "type": "boolean"
229
+ },
230
+ {
231
+ "name": "required",
232
+ "description": "Whether user input is required on the input before form submission.",
233
+ "type": "boolean"
234
+ },
235
+ {
236
+ "name": "type",
237
+ "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).",
238
+ "type": "string"
239
+ },
240
+ {
241
+ "name": "value",
242
+ "description": "Lets you set the current value.",
243
+ "type": "string"
244
+ },
245
+ {
246
+ "name": "name",
247
+ "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.",
248
+ "type": "string"
249
+ },
250
+ {
251
+ "name": "step",
252
+ "description": "When used with `number` this attribute forces inputs to be a whole number of `step`.\n\nFor example with a `step=\"5\"` only values that divide evenly on 5 are allowed.\nUsing arrow up and down in the input field increments and decrements by 5.",
253
+ "type": "number"
254
+ },
255
+ {
256
+ "name": "autocomplete",
257
+ "description": "A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.",
258
+ "type": "string | undefined"
259
+ },
260
+ {
261
+ "name": "formatter",
262
+ "description": "Function to format value when the input field.\n\nOnly active when the input field does not have focus,\nsimilar to the accessible input [masking example from Filament Group](https://filamentgroup.github.io/politespace/demo/demo.html).",
263
+ "type": "(value: string) => string"
264
+ }
122
265
  ],
123
266
  "events": []
124
267
  }
@@ -151,31 +294,19 @@
151
294
  "events": [],
152
295
  "js": {
153
296
  "properties": [
154
- {
155
- "name": "ariaLabel",
156
- "description": "Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled.",
157
- "type": "string | null"
158
- },
297
+ { "name": "ariaLabel", "type": "string | null" },
159
298
  {
160
299
  "name": "clear",
161
- "description": "Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.",
300
+ "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.",
162
301
  "type": "boolean"
163
302
  },
164
303
  {
165
304
  "name": "search",
166
- "description": "Shows a clickable search icon, typically in a prefix slot for search fields.",
305
+ "description": "Add this property to render a clickable Warp search icon.",
167
306
  "type": "boolean"
168
307
  },
169
- {
170
- "name": "label",
171
- "description": "Displays plain text such as a currency or unit label (for example `kr` or `%`) instead of an icon button.",
172
- "type": "string"
173
- },
174
- {
175
- "name": "icon",
176
- "description": "Displays a non-interactive `w-icon` in the affix area using the provided icon name (for example `Search` or `Close`) instead of text.",
177
- "type": "string | null"
178
- },
308
+ { "name": "label", "type": "string" },
309
+ { "name": "icon", "type": "string | null" },
179
310
  { "name": "_icon" }
180
311
  ],
181
312
  "events": []
@@ -207,19 +338,10 @@
207
338
  "properties": [
208
339
  {
209
340
  "name": "variant",
210
- "description": "Controls both the color treatment and icon used by the component. Accepted values are `info`, `warning`, `positive`, and `negative`. Use the variant that matches the message severity so users can quickly distinguish informative messages from warnings, errors, and confirmations.",
211
341
  "type": "'negative' | 'positive' | 'warning' | 'info'"
212
342
  },
213
- {
214
- "name": "show",
215
- "description": "Alerts are hidden by default (`false`). Set this to `true` to render and expand the content. This is reflected as an attribute, so visibility can be controlled from markup (`show`) or from JavaScript (`element.show = true`).",
216
- "type": "boolean"
217
- },
218
- {
219
- "name": "role",
220
- "description": "Defaults to `alert` so urgent changes are announced by screen readers. Override this only when your use case requires a different announcement behavior, for example a less assertive live region strategy.",
221
- "type": "string"
222
- }
343
+ { "name": "show", "type": "boolean" },
344
+ { "name": "role", "type": "string" }
223
345
  ],
224
346
  "events": []
225
347
  }
@@ -431,31 +553,41 @@
431
553
  },
432
554
  {
433
555
  "name": "w-badge",
434
- "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)\n---\n",
556
+ "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n---\n\n\n### **Slots:**\n - _default_ - The content of the badge, which is typically a short string like \"New\" or \"4\".",
435
557
  "doc-url": "",
436
558
  "attributes": [
437
559
  {
438
560
  "name": "variant",
561
+ "description": "Controls the badge color treatment.\nIf omitted, the badge uses neutral styling without reflecting a `variant` attribute.\nAccepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.",
439
562
  "value": {
440
563
  "type": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
441
564
  }
442
565
  },
443
566
  {
444
567
  "name": "position",
568
+ "description": "Positions the badge in a corner of a parent element.\nUse this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.\nUse this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.",
445
569
  "value": {
446
570
  "type": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
447
571
  }
448
572
  }
449
573
  ],
574
+ "slots": [
575
+ {
576
+ "name": "",
577
+ "description": "The content of the badge, which is typically a short string like \"New\" or \"4\"."
578
+ }
579
+ ],
450
580
  "events": [],
451
581
  "js": {
452
582
  "properties": [
453
583
  {
454
584
  "name": "variant",
585
+ "description": "Controls the badge color treatment.\nIf omitted, the badge uses neutral styling without reflecting a `variant` attribute.\nAccepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.",
455
586
  "type": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
456
587
  },
457
588
  {
458
589
  "name": "position",
590
+ "description": "Positions the badge in a corner of a parent element.\nUse this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.\nUse this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.",
459
591
  "type": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
460
592
  }
461
593
  ],
@@ -782,21 +914,81 @@
782
914
  "events": [],
783
915
  "js": {
784
916
  "properties": [
785
- { "name": "options", "type": "ComboboxOption[]" },
786
- { "name": "label", "type": "string | undefined" },
787
- { "name": "placeholder", "type": "string | undefined" },
788
- { "name": "value", "type": "string" },
789
- { "name": "openOnFocus", "type": "boolean" },
790
- { "name": "selectOnBlur", "type": "boolean" },
791
- { "name": "matchTextSegments", "type": "boolean" },
792
- { "name": "disableStaticFiltering", "type": "boolean" },
793
- { "name": "invalid", "type": "boolean" },
794
- { "name": "helpText", "type": "string | undefined" },
795
- { "name": "disabled", "type": "boolean" },
796
- { "name": "required", "type": "boolean" },
797
- { "name": "optional", "type": "boolean" },
798
- { "name": "name", "type": "string | undefined" },
799
- { "name": "autocomplete", "type": "string | undefined" }
917
+ {
918
+ "name": "options",
919
+ "description": "The available options to select from",
920
+ "type": "ComboboxOption[]"
921
+ },
922
+ {
923
+ "name": "label",
924
+ "description": "Label above input",
925
+ "type": "string | undefined"
926
+ },
927
+ {
928
+ "name": "placeholder",
929
+ "description": "Input placeholder",
930
+ "type": "string | undefined"
931
+ },
932
+ {
933
+ "name": "value",
934
+ "description": "The input value",
935
+ "type": "string"
936
+ },
937
+ {
938
+ "name": "openOnFocus",
939
+ "description": "Whether the popover opens when focus is on the text field",
940
+ "type": "boolean"
941
+ },
942
+ {
943
+ "name": "selectOnBlur",
944
+ "description": "Select active option on blur",
945
+ "type": "boolean"
946
+ },
947
+ {
948
+ "name": "matchTextSegments",
949
+ "description": "Whether the matching text segments in the options should be highlighted",
950
+ "type": "boolean"
951
+ },
952
+ {
953
+ "name": "disableStaticFiltering",
954
+ "description": "Disable client-side static filtering",
955
+ "type": "boolean"
956
+ },
957
+ {
958
+ "name": "invalid",
959
+ "description": "Renders the input field in an invalid state",
960
+ "type": "boolean"
961
+ },
962
+ {
963
+ "name": "helpText",
964
+ "description": "The content to display as the help text",
965
+ "type": "string | undefined"
966
+ },
967
+ {
968
+ "name": "disabled",
969
+ "description": "Whether the element is disabled",
970
+ "type": "boolean"
971
+ },
972
+ {
973
+ "name": "required",
974
+ "description": "Whether the element is required",
975
+ "type": "boolean"
976
+ },
977
+ {
978
+ "name": "optional",
979
+ "description": "Whether to show optional text",
980
+ "type": "boolean"
981
+ },
982
+ {
983
+ "name": "name",
984
+ "description": "Name attribute for form submission",
985
+ "type": "string | undefined"
986
+ },
987
+ {
988
+ "name": "autocomplete",
989
+ "description": "Autocomplete attribute for the input field",
990
+ "type": "string | undefined"
991
+ }
800
992
  ],
801
993
  "events": []
802
994
  }
@@ -834,13 +1026,33 @@
834
1026
  "js": {
835
1027
  "properties": [
836
1028
  { "name": "label", "type": "string" },
837
- { "name": "lang", "type": "string" },
1029
+ {
1030
+ "name": "lang",
1031
+ "description": "Takes precedence over the `<html>` lang attribute.",
1032
+ "type": "string"
1033
+ },
838
1034
  { "name": "name", "type": "string" },
839
1035
  { "name": "value", "type": "string" },
840
- { "name": "headerFormat", "type": "string" },
841
- { "name": "weekdayFormat", "type": "string" },
842
- { "name": "isDayDisabled", "type": "(day: Date) => boolean" },
843
- { "name": "dayFormat", "type": "string" },
1036
+ {
1037
+ "name": "headerFormat",
1038
+ "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).",
1039
+ "type": "string"
1040
+ },
1041
+ {
1042
+ "name": "weekdayFormat",
1043
+ "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).",
1044
+ "type": "string"
1045
+ },
1046
+ {
1047
+ "name": "isDayDisabled",
1048
+ "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.",
1049
+ "type": "(day: Date) => boolean"
1050
+ },
1051
+ {
1052
+ "name": "dayFormat",
1053
+ "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).",
1054
+ "type": "string"
1055
+ },
844
1056
  { "name": "isCalendarOpen", "type": "boolean" },
845
1057
  { "name": "navigationDate", "type": "Date" },
846
1058
  { "name": "selectedDate", "type": "Date | null" },
@@ -1033,8 +1245,16 @@
1033
1245
  "events": [],
1034
1246
  "js": {
1035
1247
  "properties": [
1036
- { "name": "selectedPage", "type": "number" },
1037
- { "name": "pageCount", "type": "number" }
1248
+ {
1249
+ "name": "selectedPage",
1250
+ "description": "Currently selected page (1-based index, clamped to valid range)",
1251
+ "type": "number"
1252
+ },
1253
+ {
1254
+ "name": "pageCount",
1255
+ "description": "Total number of pages (minimum 1)",
1256
+ "type": "number"
1257
+ }
1038
1258
  ],
1039
1259
  "events": []
1040
1260
  }
@@ -1327,20 +1547,63 @@
1327
1547
  "events": [{ "name": "change", "type": "CustomEvent" }],
1328
1548
  "js": {
1329
1549
  "properties": [
1330
- { "name": "autoFocus", "type": "boolean" },
1331
- { "name": "autofocus", "type": "boolean" },
1332
- { "name": "helpText", "type": "string" },
1333
- { "name": "invalid", "type": "boolean" },
1334
- { "name": "always", "type": "boolean" },
1335
- { "name": "hint", "type": "string" },
1336
- { "name": "label", "type": "string" },
1337
- { "name": "optional", "type": "boolean" },
1338
- { "name": "disabled", "type": "boolean" },
1339
- { "name": "readOnly", "type": "boolean" },
1340
- { "name": "readonly", "type": "boolean" },
1550
+ {
1551
+ "name": "autoFocus",
1552
+ "description": "Whether the element should receive focus on render.",
1553
+ "type": "boolean"
1554
+ },
1555
+ {
1556
+ "name": "autofocus",
1557
+ "description": "Whether the element should receive focus on render",
1558
+ "type": "boolean"
1559
+ },
1560
+ {
1561
+ "name": "helpText",
1562
+ "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
1563
+ "type": "string"
1564
+ },
1565
+ {
1566
+ "name": "invalid",
1567
+ "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
1568
+ "type": "boolean"
1569
+ },
1570
+ {
1571
+ "name": "always",
1572
+ "description": "Whether to always show a hint.",
1573
+ "type": "boolean"
1574
+ },
1575
+ {
1576
+ "name": "hint",
1577
+ "description": "The content displayed as the help text.",
1578
+ "type": "string"
1579
+ },
1580
+ {
1581
+ "name": "label",
1582
+ "description": "The content to disply as the label",
1583
+ "type": "string"
1584
+ },
1585
+ {
1586
+ "name": "optional",
1587
+ "description": "Whether to show optional text",
1588
+ "type": "boolean"
1589
+ },
1590
+ {
1591
+ "name": "disabled",
1592
+ "description": "Renders the field in a disabled state.",
1593
+ "type": "boolean"
1594
+ },
1595
+ {
1596
+ "name": "readOnly",
1597
+ "description": "Renders the field in a readonly state.",
1598
+ "type": "boolean"
1599
+ },
1600
+ {
1601
+ "name": "readonly",
1602
+ "description": "Renders the field in a readonly state.",
1603
+ "type": "boolean"
1604
+ },
1341
1605
  { "name": "name", "type": "string" },
1342
- { "name": "value", "type": "string" },
1343
- { "name": "_options" }
1606
+ { "name": "value", "type": "string" }
1344
1607
  ],
1345
1608
  "events": [{ "name": "change", "type": "CustomEvent" }]
1346
1609
  }
@@ -1380,13 +1643,7 @@
1380
1643
  "description": "Value to display in the tooltip",
1381
1644
  "type": "string | number"
1382
1645
  },
1383
- { "name": "ariaDescriptionText" },
1384
- { "name": "disabled" },
1385
- { "name": "invalid" },
1386
- { "name": "openEnded" },
1387
- { "name": "valueFormatter" },
1388
- { "name": "tooltipFormatter" },
1389
- { "name": "labelFormatter" }
1646
+ { "name": "ariaDescriptionText" }
1390
1647
  ],
1391
1648
  "events": [
1392
1649
  { "name": "thumbreset", "type": "CustomEvent" },
@@ -1467,29 +1724,52 @@
1467
1724
  "events": [],
1468
1725
  "js": {
1469
1726
  "properties": [
1470
- { "name": "label", "type": "string" },
1727
+ {
1728
+ "name": "label",
1729
+ "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead (f. ex. `<legend class=\"sr-only\" slot=\"label\">Production year</legend>`)",
1730
+ "type": "string"
1731
+ },
1471
1732
  { "name": "disabled", "type": "boolean" },
1472
- { "name": "openEnded", "type": "boolean" },
1733
+ {
1734
+ "name": "openEnded",
1735
+ "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".",
1736
+ "type": "boolean"
1737
+ },
1473
1738
  { "name": "error", "type": "string" },
1474
1739
  { "name": "helpText", "type": "string" },
1475
1740
  { "name": "invalid", "type": "boolean" },
1476
- { "name": "required", "type": "boolean" },
1741
+ {
1742
+ "name": "required",
1743
+ "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
1744
+ "type": "boolean"
1745
+ },
1477
1746
  { "name": "min", "type": "string" },
1478
1747
  { "name": "max", "type": "string" },
1479
- { "name": "markers", "type": "number" },
1748
+ {
1749
+ "name": "markers",
1750
+ "description": "Pass a value similar to step to create visual markers at that interval",
1751
+ "type": "number"
1752
+ },
1480
1753
  { "name": "step", "type": "number" },
1481
- { "name": "suffix", "type": "string" },
1754
+ {
1755
+ "name": "suffix",
1756
+ "description": "Suffix used in text input fields and for the min and max values of the slider.",
1757
+ "type": "string"
1758
+ },
1482
1759
  { "name": "hiddenTextfield", "type": "boolean" },
1483
1760
  {
1484
1761
  "name": "valueFormatter",
1762
+ "description": "Formatter for the tooltip and input mask values.",
1485
1763
  "type": "(value: string, slot: SliderSlot) => string"
1486
1764
  },
1487
1765
  {
1488
1766
  "name": "tooltipFormatter",
1767
+ "description": "Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example \"300+ hk\" instead of \"Max\" in the tooltip.",
1489
1768
  "type": "(value: string, slot: SliderSlot) => string"
1490
1769
  },
1491
1770
  {
1492
1771
  "name": "labelFormatter",
1772
+ "description": "Formatter for the min and max labels below the range.",
1493
1773
  "type": "(slot: SliderSlot) => string"
1494
1774
  },
1495
1775
  { "name": "fieldset", "type": "HTMLFieldSetElement" },
@@ -1619,9 +1899,7 @@
1619
1899
  },
1620
1900
  { "name": "ariaSelected", "type": "'true' | 'false'" },
1621
1901
  { "name": "active", "type": "boolean" },
1622
- { "name": "over", "type": "boolean" },
1623
- { "name": "_parentTabIndex" },
1624
- { "name": "_parentAriaSelected" }
1902
+ { "name": "over", "type": "boolean" }
1625
1903
  ],
1626
1904
  "events": []
1627
1905
  }
@@ -1644,9 +1922,7 @@
1644
1922
  "name": "active",
1645
1923
  "description": "Whether this panel is active (visible).\nSet by parent w-tabs via the _parentActive property.",
1646
1924
  "type": "boolean"
1647
- },
1648
- { "name": "_parentActive" },
1649
- { "name": "_parentAriaLabelledBy" }
1925
+ }
1650
1926
  ],
1651
1927
  "events": []
1652
1928
  }