@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
@@ -143,18 +143,19 @@
143
143
  "declarations": [
144
144
  {
145
145
  "kind": "class",
146
- "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)",
146
+ "description": "A single-line input component used for entering and editing textual or numeric data.",
147
147
  "name": "WarpTextField",
148
- "members": [
148
+ "slots": [
149
149
  {
150
- "kind": "field",
151
- "name": "shadowRootOptions",
152
- "type": {
153
- "text": "object"
154
- },
155
- "static": true,
156
- "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
150
+ "description": "Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).",
151
+ "name": "suffix"
157
152
  },
153
+ {
154
+ "description": "Use with `<w-affix>` to include a prefix, for example a search icon.",
155
+ "name": "prefix"
156
+ }
157
+ ],
158
+ "members": [
158
159
  {
159
160
  "kind": "field",
160
161
  "name": "disabled",
@@ -162,6 +163,8 @@
162
163
  "text": "boolean"
163
164
  },
164
165
  "default": "false",
166
+ "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.",
167
+ "summary": "Makes the element not focusable and hides it from form submits",
165
168
  "attribute": "disabled",
166
169
  "reflects": true
167
170
  },
@@ -172,24 +175,18 @@
172
175
  "text": "boolean"
173
176
  },
174
177
  "default": "false",
178
+ "description": "Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.",
179
+ "summary": "Mark the form field as invalid.",
175
180
  "attribute": "invalid",
176
181
  "reflects": true
177
182
  },
178
- {
179
- "kind": "field",
180
- "name": "id",
181
- "type": {
182
- "text": "string"
183
- },
184
- "attribute": "id",
185
- "reflects": true
186
- },
187
183
  {
188
184
  "kind": "field",
189
185
  "name": "label",
190
186
  "type": {
191
187
  "text": "string"
192
188
  },
189
+ "description": "Either a `label` or an `aria-label` must be provided.",
193
190
  "attribute": "label",
194
191
  "reflects": true
195
192
  },
@@ -199,6 +196,8 @@
199
196
  "type": {
200
197
  "text": "string"
201
198
  },
199
+ "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
200
+ "summary": "Description shown below the input field",
202
201
  "attribute": "help-text",
203
202
  "reflects": true
204
203
  },
@@ -208,6 +207,7 @@
208
207
  "type": {
209
208
  "text": "string"
210
209
  },
210
+ "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.",
211
211
  "attribute": "size",
212
212
  "reflects": true
213
213
  },
@@ -217,6 +217,7 @@
217
217
  "type": {
218
218
  "text": "number"
219
219
  },
220
+ "description": "Use with `type=\"number\"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).",
220
221
  "attribute": "max",
221
222
  "reflects": true
222
223
  },
@@ -226,6 +227,7 @@
226
227
  "type": {
227
228
  "text": "number"
228
229
  },
230
+ "description": "Use with `type=\"number\"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).",
229
231
  "attribute": "min",
230
232
  "reflects": true
231
233
  },
@@ -235,24 +237,47 @@
235
237
  "type": {
236
238
  "text": "number"
237
239
  },
240
+ "deprecated": "Use the native `minlength` attribute",
238
241
  "attribute": "min-length",
239
242
  "reflects": true
240
243
  },
244
+ {
245
+ "kind": "field",
246
+ "name": "minlength",
247
+ "type": {
248
+ "text": "number"
249
+ },
250
+ "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.",
251
+ "attribute": "minlength",
252
+ "reflects": true
253
+ },
241
254
  {
242
255
  "kind": "field",
243
256
  "name": "maxLength",
244
257
  "type": {
245
258
  "text": "number"
246
259
  },
260
+ "deprecated": "Use the native `maxlength` attribute",
247
261
  "attribute": "max-length",
248
262
  "reflects": true
249
263
  },
264
+ {
265
+ "kind": "field",
266
+ "name": "maxlength",
267
+ "type": {
268
+ "text": "number"
269
+ },
270
+ "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.",
271
+ "attribute": "maxlength",
272
+ "reflects": true
273
+ },
250
274
  {
251
275
  "kind": "field",
252
276
  "name": "pattern",
253
277
  "type": {
254
278
  "text": "string"
255
279
  },
280
+ "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)",
256
281
  "attribute": "pattern",
257
282
  "reflects": true
258
283
  },
@@ -262,6 +287,8 @@
262
287
  "type": {
263
288
  "text": "string"
264
289
  },
290
+ "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.",
291
+ "summary": "Shown in the textfield when it doesn't have a value",
265
292
  "attribute": "placeholder",
266
293
  "reflects": true
267
294
  },
@@ -283,6 +310,7 @@
283
310
  "text": "boolean"
284
311
  },
285
312
  "default": "false",
313
+ "description": "Whether the input can be selected but not changed by the user.",
286
314
  "attribute": "readonly",
287
315
  "reflects": true
288
316
  },
@@ -293,6 +321,7 @@
293
321
  "text": "boolean"
294
322
  },
295
323
  "default": "false",
324
+ "description": "Whether user input is required on the input before form submission.",
296
325
  "attribute": "required",
297
326
  "reflects": true
298
327
  },
@@ -302,6 +331,7 @@
302
331
  "type": {
303
332
  "text": "string"
304
333
  },
334
+ "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).",
305
335
  "attribute": "type",
306
336
  "reflects": true
307
337
  },
@@ -311,6 +341,7 @@
311
341
  "type": {
312
342
  "text": "string"
313
343
  },
344
+ "description": "Lets you set the current value.",
314
345
  "attribute": "value",
315
346
  "reflects": true
316
347
  },
@@ -320,6 +351,7 @@
320
351
  "type": {
321
352
  "text": "string"
322
353
  },
354
+ "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.",
323
355
  "attribute": "name",
324
356
  "reflects": true
325
357
  },
@@ -329,6 +361,8 @@
329
361
  "type": {
330
362
  "text": "number"
331
363
  },
364
+ "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.",
365
+ "summary": "Forces `number` inputs to be a whole number of `step`",
332
366
  "attribute": "step",
333
367
  "reflects": true
334
368
  },
@@ -338,6 +372,7 @@
338
372
  "type": {
339
373
  "text": "string | undefined"
340
374
  },
375
+ "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.",
341
376
  "attribute": "autocomplete",
342
377
  "reflects": true
343
378
  },
@@ -346,7 +381,9 @@
346
381
  "name": "formatter",
347
382
  "type": {
348
383
  "text": "(value: string) => string"
349
- }
384
+ },
385
+ "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).",
386
+ "summary": "Function to format value when the input field"
350
387
  },
351
388
  {
352
389
  "kind": "field",
@@ -397,14 +434,6 @@
397
434
  "type": {
398
435
  "text": "suffixSlotChange() => void"
399
436
  }
400
- },
401
- {
402
- "name": "_hasPrefix",
403
- "kind": "field"
404
- },
405
- {
406
- "name": "_hasSuffix",
407
- "kind": "field"
408
437
  }
409
438
  ],
410
439
  "attributes": [
@@ -414,6 +443,8 @@
414
443
  "text": "boolean"
415
444
  },
416
445
  "default": "false",
446
+ "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.",
447
+ "summary": "Makes the element not focusable and hides it from form submits",
417
448
  "fieldName": "disabled"
418
449
  },
419
450
  {
@@ -422,20 +453,16 @@
422
453
  "text": "boolean"
423
454
  },
424
455
  "default": "false",
456
+ "description": "Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.",
457
+ "summary": "Mark the form field as invalid.",
425
458
  "fieldName": "invalid"
426
459
  },
427
- {
428
- "name": "id",
429
- "type": {
430
- "text": "string"
431
- },
432
- "fieldName": "id"
433
- },
434
460
  {
435
461
  "name": "label",
436
462
  "type": {
437
463
  "text": "string"
438
464
  },
465
+ "description": "Either a `label` or an `aria-label` must be provided.",
439
466
  "fieldName": "label"
440
467
  },
441
468
  {
@@ -443,6 +470,8 @@
443
470
  "type": {
444
471
  "text": "string"
445
472
  },
473
+ "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.",
474
+ "summary": "Description shown below the input field",
446
475
  "fieldName": "helpText"
447
476
  },
448
477
  {
@@ -450,6 +479,7 @@
450
479
  "type": {
451
480
  "text": "string"
452
481
  },
482
+ "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.",
453
483
  "fieldName": "size"
454
484
  },
455
485
  {
@@ -457,6 +487,7 @@
457
487
  "type": {
458
488
  "text": "number"
459
489
  },
490
+ "description": "Use with `type=\"number\"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).",
460
491
  "fieldName": "max"
461
492
  },
462
493
  {
@@ -464,6 +495,7 @@
464
495
  "type": {
465
496
  "text": "number"
466
497
  },
498
+ "description": "Use with `type=\"number\"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).",
467
499
  "fieldName": "min"
468
500
  },
469
501
  {
@@ -471,20 +503,39 @@
471
503
  "type": {
472
504
  "text": "number"
473
505
  },
506
+ "deprecated": "Use the native `minlength` attribute",
474
507
  "fieldName": "minLength"
475
508
  },
509
+ {
510
+ "name": "minlength",
511
+ "type": {
512
+ "text": "number"
513
+ },
514
+ "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.",
515
+ "fieldName": "minlength"
516
+ },
476
517
  {
477
518
  "name": "max-length",
478
519
  "type": {
479
520
  "text": "number"
480
521
  },
522
+ "deprecated": "Use the native `maxlength` attribute",
481
523
  "fieldName": "maxLength"
482
524
  },
525
+ {
526
+ "name": "maxlength",
527
+ "type": {
528
+ "text": "number"
529
+ },
530
+ "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.",
531
+ "fieldName": "maxlength"
532
+ },
483
533
  {
484
534
  "name": "pattern",
485
535
  "type": {
486
536
  "text": "string"
487
537
  },
538
+ "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)",
488
539
  "fieldName": "pattern"
489
540
  },
490
541
  {
@@ -492,6 +543,8 @@
492
543
  "type": {
493
544
  "text": "string"
494
545
  },
546
+ "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.",
547
+ "summary": "Shown in the textfield when it doesn't have a value",
495
548
  "fieldName": "placeholder"
496
549
  },
497
550
  {
@@ -509,6 +562,7 @@
509
562
  "text": "boolean"
510
563
  },
511
564
  "default": "false",
565
+ "description": "Whether the input can be selected but not changed by the user.",
512
566
  "fieldName": "readonly"
513
567
  },
514
568
  {
@@ -517,6 +571,7 @@
517
571
  "text": "boolean"
518
572
  },
519
573
  "default": "false",
574
+ "description": "Whether user input is required on the input before form submission.",
520
575
  "fieldName": "required"
521
576
  },
522
577
  {
@@ -524,6 +579,7 @@
524
579
  "type": {
525
580
  "text": "string"
526
581
  },
582
+ "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).",
527
583
  "fieldName": "type"
528
584
  },
529
585
  {
@@ -531,6 +587,7 @@
531
587
  "type": {
532
588
  "text": "string"
533
589
  },
590
+ "description": "Lets you set the current value.",
534
591
  "fieldName": "value"
535
592
  },
536
593
  {
@@ -538,6 +595,7 @@
538
595
  "type": {
539
596
  "text": "string"
540
597
  },
598
+ "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.",
541
599
  "fieldName": "name"
542
600
  },
543
601
  {
@@ -545,6 +603,8 @@
545
603
  "type": {
546
604
  "text": "number"
547
605
  },
606
+ "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.",
607
+ "summary": "Forces `number` inputs to be a whole number of `step`",
548
608
  "fieldName": "step"
549
609
  },
550
610
  {
@@ -552,6 +612,7 @@
552
612
  "type": {
553
613
  "text": "string | undefined"
554
614
  },
615
+ "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.",
555
616
  "fieldName": "autocomplete"
556
617
  }
557
618
  ],
@@ -608,8 +669,7 @@
608
669
  "default": "null",
609
670
  "summary": "Accessible label for icon-button variants.",
610
671
  "attribute": "aria-label",
611
- "reflects": true,
612
- "description": "Used to override the default `aria-label`s for the internal button when `search` or `clear` is enabled."
672
+ "reflects": true
613
673
  },
614
674
  {
615
675
  "kind": "field",
@@ -618,7 +678,7 @@
618
678
  "text": "boolean"
619
679
  },
620
680
  "default": "false",
621
- "description": "Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.",
681
+ "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.",
622
682
  "summary": "Renders a clear icon button.",
623
683
  "attribute": "clear"
624
684
  },
@@ -629,7 +689,7 @@
629
689
  "text": "boolean"
630
690
  },
631
691
  "default": "false",
632
- "description": "Shows a clickable search icon, typically in a prefix slot for search fields.",
692
+ "description": "Add this property to render a clickable Warp search icon.",
633
693
  "summary": "Renders a search icon button.",
634
694
  "attribute": "search"
635
695
  },
@@ -642,8 +702,7 @@
642
702
  "default": "''",
643
703
  "summary": "Text label shown as prefix/suffix content.",
644
704
  "attribute": "label",
645
- "reflects": true,
646
- "description": "Displays plain text such as a currency or unit label (for example `kr` or `%`) instead of an icon button."
705
+ "reflects": true
647
706
  },
648
707
  {
649
708
  "kind": "field",
@@ -654,8 +713,7 @@
654
713
  "default": "null",
655
714
  "summary": "Icon name rendered as prefix/suffix content.",
656
715
  "attribute": "icon",
657
- "reflects": true,
658
- "description": "Displays a non-interactive `w-icon` in the affix area using the provided icon name (for example `Search` or `Close`) instead of text."
716
+ "reflects": true
659
717
  },
660
718
  {
661
719
  "kind": "field",
@@ -776,8 +834,7 @@
776
834
  "reflects": true,
777
835
  "parsedType": {
778
836
  "text": "'negative' | 'positive' | 'warning' | 'info'"
779
- },
780
- "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."
837
+ }
781
838
  },
782
839
  {
783
840
  "kind": "field",
@@ -788,8 +845,7 @@
788
845
  "default": "false",
789
846
  "summary": "Whether the alert is visible.",
790
847
  "attribute": "show",
791
- "reflects": true,
792
- "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`)."
848
+ "reflects": true
793
849
  },
794
850
  {
795
851
  "kind": "field",
@@ -800,8 +856,7 @@
800
856
  "default": "'alert'",
801
857
  "summary": "ARIA role announced to assistive technology.",
802
858
  "attribute": "role",
803
- "reflects": true,
804
- "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."
859
+ "reflects": true
805
860
  }
806
861
  ],
807
862
  "attributes": [
@@ -1742,8 +1797,14 @@
1742
1797
  "declarations": [
1743
1798
  {
1744
1799
  "kind": "class",
1745
- "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)",
1800
+ "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.",
1746
1801
  "name": "WarpBadge",
1802
+ "slots": [
1803
+ {
1804
+ "description": "The content of the badge, which is typically a short string like \"New\" or \"4\".",
1805
+ "name": ""
1806
+ }
1807
+ ],
1747
1808
  "members": [
1748
1809
  {
1749
1810
  "kind": "field",
@@ -1751,6 +1812,7 @@
1751
1812
  "type": {
1752
1813
  "text": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
1753
1814
  },
1815
+ "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.",
1754
1816
  "attribute": "variant",
1755
1817
  "reflects": true
1756
1818
  },
@@ -1760,6 +1822,7 @@
1760
1822
  "type": {
1761
1823
  "text": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
1762
1824
  },
1825
+ "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`.",
1763
1826
  "attribute": "position",
1764
1827
  "reflects": true
1765
1828
  }
@@ -1770,6 +1833,7 @@
1770
1833
  "type": {
1771
1834
  "text": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'"
1772
1835
  },
1836
+ "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.",
1773
1837
  "fieldName": "variant"
1774
1838
  },
1775
1839
  {
@@ -1777,6 +1841,7 @@
1777
1841
  "type": {
1778
1842
  "text": "'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'"
1779
1843
  },
1844
+ "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`.",
1780
1845
  "fieldName": "position"
1781
1846
  }
1782
1847
  ],
@@ -2890,6 +2955,7 @@
2890
2955
  "text": "ComboboxOption[]"
2891
2956
  },
2892
2957
  "default": "[]",
2958
+ "description": "The available options to select from",
2893
2959
  "attribute": "options"
2894
2960
  },
2895
2961
  {
@@ -2899,6 +2965,7 @@
2899
2965
  "text": "string | undefined"
2900
2966
  },
2901
2967
  "default": "''",
2968
+ "description": "Label above input",
2902
2969
  "attribute": "label",
2903
2970
  "reflects": true
2904
2971
  },
@@ -2909,6 +2976,7 @@
2909
2976
  "text": "string | undefined"
2910
2977
  },
2911
2978
  "default": "''",
2979
+ "description": "Input placeholder",
2912
2980
  "attribute": "placeholder",
2913
2981
  "reflects": true
2914
2982
  },
@@ -2919,6 +2987,7 @@
2919
2987
  "text": "string"
2920
2988
  },
2921
2989
  "default": "''",
2990
+ "description": "The input value",
2922
2991
  "attribute": "value",
2923
2992
  "reflects": true
2924
2993
  },
@@ -2929,6 +2998,7 @@
2929
2998
  "text": "boolean"
2930
2999
  },
2931
3000
  "default": "false",
3001
+ "description": "Whether the popover opens when focus is on the text field",
2932
3002
  "attribute": "open-on-focus",
2933
3003
  "reflects": true
2934
3004
  },
@@ -2939,6 +3009,7 @@
2939
3009
  "text": "boolean"
2940
3010
  },
2941
3011
  "default": "true",
3012
+ "description": "Select active option on blur",
2942
3013
  "attribute": "select-on-blur",
2943
3014
  "reflects": true
2944
3015
  },
@@ -2949,6 +3020,7 @@
2949
3020
  "text": "boolean"
2950
3021
  },
2951
3022
  "default": "false",
3023
+ "description": "Whether the matching text segments in the options should be highlighted",
2952
3024
  "attribute": "match-text-segments",
2953
3025
  "reflects": true
2954
3026
  },
@@ -2959,6 +3031,7 @@
2959
3031
  "text": "boolean"
2960
3032
  },
2961
3033
  "default": "false",
3034
+ "description": "Disable client-side static filtering",
2962
3035
  "attribute": "disable-static-filtering",
2963
3036
  "reflects": true
2964
3037
  },
@@ -2969,6 +3042,7 @@
2969
3042
  "text": "boolean"
2970
3043
  },
2971
3044
  "default": "false",
3045
+ "description": "Renders the input field in an invalid state",
2972
3046
  "attribute": "invalid",
2973
3047
  "reflects": true
2974
3048
  },
@@ -2979,6 +3053,7 @@
2979
3053
  "text": "string | undefined"
2980
3054
  },
2981
3055
  "default": "''",
3056
+ "description": "The content to display as the help text",
2982
3057
  "attribute": "help-text",
2983
3058
  "reflects": true
2984
3059
  },
@@ -2989,6 +3064,7 @@
2989
3064
  "text": "boolean"
2990
3065
  },
2991
3066
  "default": "false",
3067
+ "description": "Whether the element is disabled",
2992
3068
  "attribute": "disabled",
2993
3069
  "reflects": true
2994
3070
  },
@@ -2999,6 +3075,7 @@
2999
3075
  "text": "boolean"
3000
3076
  },
3001
3077
  "default": "false",
3078
+ "description": "Whether the element is required",
3002
3079
  "attribute": "required",
3003
3080
  "reflects": true
3004
3081
  },
@@ -3009,6 +3086,7 @@
3009
3086
  "text": "boolean"
3010
3087
  },
3011
3088
  "default": "false",
3089
+ "description": "Whether to show optional text",
3012
3090
  "attribute": "optional",
3013
3091
  "reflects": true
3014
3092
  },
@@ -3019,6 +3097,7 @@
3019
3097
  "text": "string | undefined"
3020
3098
  },
3021
3099
  "default": "''",
3100
+ "description": "Name attribute for form submission",
3022
3101
  "attribute": "name",
3023
3102
  "reflects": true
3024
3103
  },
@@ -3029,6 +3108,7 @@
3029
3108
  "text": "string | undefined"
3030
3109
  },
3031
3110
  "default": "'off'",
3111
+ "description": "Autocomplete attribute for the input field",
3032
3112
  "attribute": "autocomplete",
3033
3113
  "reflects": true
3034
3114
  },
@@ -3486,6 +3566,7 @@
3486
3566
  "type": {
3487
3567
  "text": "string"
3488
3568
  },
3569
+ "description": "Takes precedence over the `<html>` lang attribute.",
3489
3570
  "attribute": "lang",
3490
3571
  "reflects": true
3491
3572
  },
@@ -3514,6 +3595,7 @@
3514
3595
  "text": "string"
3515
3596
  },
3516
3597
  "default": "'MMMM yyyy'",
3598
+ "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).",
3517
3599
  "attribute": "header-format"
3518
3600
  },
3519
3601
  {
@@ -3523,6 +3605,7 @@
3523
3605
  "text": "string"
3524
3606
  },
3525
3607
  "default": "'EEEEEE'",
3608
+ "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).",
3526
3609
  "attribute": "weekday-format"
3527
3610
  },
3528
3611
  {
@@ -3530,7 +3613,8 @@
3530
3613
  "name": "isDayDisabled",
3531
3614
  "type": {
3532
3615
  "text": "(day: Date) => boolean"
3533
- }
3616
+ },
3617
+ "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."
3534
3618
  },
3535
3619
  {
3536
3620
  "kind": "field",
@@ -3539,6 +3623,7 @@
3539
3623
  "text": "string"
3540
3624
  },
3541
3625
  "default": "'PPPP'",
3626
+ "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).",
3542
3627
  "attribute": "day-format"
3543
3628
  },
3544
3629
  {
@@ -4533,6 +4618,7 @@
4533
4618
  "type": {
4534
4619
  "text": "number"
4535
4620
  },
4621
+ "description": "Currently selected page (1-based index, clamped to valid range)",
4536
4622
  "attribute": "selected-page",
4537
4623
  "reflects": true
4538
4624
  },
@@ -4542,6 +4628,7 @@
4542
4628
  "type": {
4543
4629
  "text": "number"
4544
4630
  },
4631
+ "description": "Total number of pages (minimum 1)",
4545
4632
  "attribute": "page-count",
4546
4633
  "reflects": true
4547
4634
  },
@@ -5835,6 +5922,7 @@
5835
5922
  "text": "boolean"
5836
5923
  },
5837
5924
  "default": "false",
5925
+ "description": "Whether the element should receive focus on render.",
5838
5926
  "deprecated": "Use the native `autofocus` attribute instead.",
5839
5927
  "attribute": "auto-focus",
5840
5928
  "reflects": true
@@ -5846,6 +5934,7 @@
5846
5934
  "text": "boolean"
5847
5935
  },
5848
5936
  "default": "false",
5937
+ "description": "Whether the element should receive focus on render",
5849
5938
  "attribute": "autofocus",
5850
5939
  "reflects": true
5851
5940
  },
@@ -5855,6 +5944,7 @@
5855
5944
  "type": {
5856
5945
  "text": "string"
5857
5946
  },
5947
+ "description": "The content displayed as the help text. Paired with `invalid` to show the text as a validation error.",
5858
5948
  "attribute": "help-text",
5859
5949
  "reflects": true
5860
5950
  },
@@ -5865,6 +5955,7 @@
5865
5955
  "text": "boolean"
5866
5956
  },
5867
5957
  "default": "false",
5958
+ "description": "Renders the field in an invalid state. Paired with `help-text` to provide feedback about the error.",
5868
5959
  "attribute": "invalid",
5869
5960
  "reflects": true
5870
5961
  },
@@ -5875,6 +5966,7 @@
5875
5966
  "text": "boolean"
5876
5967
  },
5877
5968
  "default": "false",
5969
+ "description": "Whether to always show a hint.",
5878
5970
  "deprecated": "Use `help-text` instead and only set it if you want to display the help text.",
5879
5971
  "attribute": "always",
5880
5972
  "reflects": true
@@ -5885,6 +5977,7 @@
5885
5977
  "type": {
5886
5978
  "text": "string"
5887
5979
  },
5980
+ "description": "The content displayed as the help text.",
5888
5981
  "deprecated": "Use `help-text` instead.",
5889
5982
  "attribute": "hint",
5890
5983
  "reflects": true
@@ -5895,6 +5988,7 @@
5895
5988
  "type": {
5896
5989
  "text": "string"
5897
5990
  },
5991
+ "description": "The content to disply as the label",
5898
5992
  "attribute": "label",
5899
5993
  "reflects": true
5900
5994
  },
@@ -5905,6 +5999,7 @@
5905
5999
  "text": "boolean"
5906
6000
  },
5907
6001
  "default": "false",
6002
+ "description": "Whether to show optional text",
5908
6003
  "attribute": "optional",
5909
6004
  "reflects": true
5910
6005
  },
@@ -5915,6 +6010,7 @@
5915
6010
  "text": "boolean"
5916
6011
  },
5917
6012
  "default": "false",
6013
+ "description": "Renders the field in a disabled state.",
5918
6014
  "attribute": "disabled",
5919
6015
  "reflects": true
5920
6016
  },
@@ -5925,6 +6021,7 @@
5925
6021
  "text": "boolean"
5926
6022
  },
5927
6023
  "default": "false",
6024
+ "description": "Renders the field in a readonly state.",
5928
6025
  "deprecated": "Use the native readonly attribute instead.",
5929
6026
  "attribute": "read-only",
5930
6027
  "reflects": true
@@ -5936,6 +6033,7 @@
5936
6033
  "text": "boolean"
5937
6034
  },
5938
6035
  "default": "false",
6036
+ "description": "Renders the field in a readonly state.",
5939
6037
  "attribute": "readonly",
5940
6038
  "reflects": true
5941
6039
  },
@@ -6127,10 +6225,6 @@
6127
6225
  "type": {
6128
6226
  "text": "onChange(event: Event) => void"
6129
6227
  }
6130
- },
6131
- {
6132
- "name": "_options",
6133
- "kind": "field"
6134
6228
  }
6135
6229
  ],
6136
6230
  "events": [
@@ -6550,30 +6644,6 @@
6550
6644
  "kind": "field",
6551
6645
  "name": "ariaDescriptionText",
6552
6646
  "readonly": true
6553
- },
6554
- {
6555
- "name": "disabled",
6556
- "kind": "field"
6557
- },
6558
- {
6559
- "name": "invalid",
6560
- "kind": "field"
6561
- },
6562
- {
6563
- "name": "openEnded",
6564
- "kind": "field"
6565
- },
6566
- {
6567
- "name": "valueFormatter",
6568
- "kind": "field"
6569
- },
6570
- {
6571
- "name": "tooltipFormatter",
6572
- "kind": "field"
6573
- },
6574
- {
6575
- "name": "labelFormatter",
6576
- "kind": "field"
6577
6647
  }
6578
6648
  ],
6579
6649
  "events": [
@@ -6708,6 +6778,7 @@
6708
6778
  "type": {
6709
6779
  "text": "string"
6710
6780
  },
6781
+ "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>`)",
6711
6782
  "attribute": "label",
6712
6783
  "reflects": true
6713
6784
  },
@@ -6728,6 +6799,7 @@
6728
6799
  "text": "boolean"
6729
6800
  },
6730
6801
  "default": "false",
6802
+ "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".",
6731
6803
  "attribute": "open-ended"
6732
6804
  },
6733
6805
  {
@@ -6765,6 +6837,7 @@
6765
6837
  "text": "boolean"
6766
6838
  },
6767
6839
  "default": "false",
6840
+ "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
6768
6841
  "attribute": "required",
6769
6842
  "reflects": true
6770
6843
  },
@@ -6792,6 +6865,7 @@
6792
6865
  "type": {
6793
6866
  "text": "number"
6794
6867
  },
6868
+ "description": "Pass a value similar to step to create visual markers at that interval",
6795
6869
  "attribute": "markers",
6796
6870
  "reflects": true
6797
6871
  },
@@ -6810,6 +6884,7 @@
6810
6884
  "type": {
6811
6885
  "text": "string"
6812
6886
  },
6887
+ "description": "Suffix used in text input fields and for the min and max values of the slider.",
6813
6888
  "attribute": "suffix",
6814
6889
  "reflects": true
6815
6890
  },
@@ -6828,21 +6903,24 @@
6828
6903
  "name": "valueFormatter",
6829
6904
  "type": {
6830
6905
  "text": "(value: string, slot: SliderSlot) => string"
6831
- }
6906
+ },
6907
+ "description": "Formatter for the tooltip and input mask values."
6832
6908
  },
6833
6909
  {
6834
6910
  "kind": "field",
6835
6911
  "name": "tooltipFormatter",
6836
6912
  "type": {
6837
6913
  "text": "(value: string, slot: SliderSlot) => string"
6838
- }
6914
+ },
6915
+ "description": "Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example \"300+ hk\" instead of \"Max\" in the tooltip."
6839
6916
  },
6840
6917
  {
6841
6918
  "kind": "field",
6842
6919
  "name": "labelFormatter",
6843
6920
  "type": {
6844
6921
  "text": "(slot: SliderSlot) => string"
6845
- }
6922
+ },
6923
+ "description": "Formatter for the min and max labels below the range."
6846
6924
  },
6847
6925
  {
6848
6926
  "kind": "field",
@@ -7642,14 +7720,6 @@
7642
7720
  "kind": "method",
7643
7721
  "name": "syncAriaControls",
7644
7722
  "privacy": "private"
7645
- },
7646
- {
7647
- "name": "_parentTabIndex",
7648
- "kind": "field"
7649
- },
7650
- {
7651
- "name": "_parentAriaSelected",
7652
- "kind": "field"
7653
7723
  }
7654
7724
  ],
7655
7725
  "attributes": [
@@ -7766,14 +7836,6 @@
7766
7836
  "kind": "method",
7767
7837
  "name": "syncA11yState",
7768
7838
  "privacy": "private"
7769
- },
7770
- {
7771
- "name": "_parentActive",
7772
- "kind": "field"
7773
- },
7774
- {
7775
- "name": "_parentAriaLabelledBy",
7776
- "kind": "field"
7777
7839
  }
7778
7840
  ],
7779
7841
  "attributes": [