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

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 (103) hide show
  1. package/dist/custom-elements.json +281 -58
  2. package/dist/docs/button/accessibility.md +42 -0
  3. package/dist/docs/button/api.md +63 -39
  4. package/dist/docs/button/button.md +322 -40
  5. package/dist/docs/button/examples.md +126 -0
  6. package/dist/docs/button/usage.md +89 -0
  7. package/dist/docs/card/accessibility.md +74 -0
  8. package/dist/docs/card/api.md +9 -3
  9. package/dist/docs/card/card.md +234 -3
  10. package/dist/docs/card/examples.md +75 -0
  11. package/dist/docs/card/usage.md +76 -0
  12. package/dist/docs/modal/accessibility.md +1 -0
  13. package/dist/docs/modal/api.md +51 -0
  14. package/dist/docs/modal/examples.md +67 -0
  15. package/dist/docs/modal/modal.md +238 -0
  16. package/dist/docs/modal/usage.md +110 -0
  17. package/dist/docs/modal-footer/accessibility.md +1 -0
  18. package/dist/docs/modal-footer/api.md +11 -0
  19. package/dist/docs/modal-footer/examples.md +1 -0
  20. package/dist/docs/modal-footer/modal-footer.md +23 -0
  21. package/dist/docs/modal-footer/usage.md +1 -0
  22. package/dist/docs/modal-header/accessibility.md +1 -0
  23. package/dist/docs/modal-header/api.md +42 -0
  24. package/dist/docs/modal-header/examples.md +1 -0
  25. package/dist/docs/modal-header/modal-header.md +54 -0
  26. package/dist/docs/modal-header/usage.md +1 -0
  27. package/dist/docs/page-indicator/api.md +6 -6
  28. package/dist/docs/page-indicator/examples.md +8 -0
  29. package/dist/docs/page-indicator/page-indicator.md +23 -6
  30. package/dist/docs/page-indicator/usage.md +8 -0
  31. package/dist/docs/pagination/api.md +12 -10
  32. package/dist/docs/pagination/examples.md +20 -0
  33. package/dist/docs/pagination/pagination.md +50 -12
  34. package/dist/docs/pagination/usage.md +18 -0
  35. package/dist/docs/pill/accessibility.md +2 -0
  36. package/dist/docs/pill/api.md +10 -26
  37. package/dist/docs/pill/examples.md +23 -0
  38. package/dist/docs/pill/pill.md +43 -28
  39. package/dist/docs/pill/usage.md +8 -0
  40. package/dist/index.d.ts +341 -301
  41. package/dist/packages/affix/affix.js.map +1 -1
  42. package/dist/packages/attention/attention.js +23 -21
  43. package/dist/packages/attention/attention.js.map +4 -4
  44. package/dist/packages/attention/attention.test.js +1 -1
  45. package/dist/packages/breadcrumbs/breadcrumbs.js.map +1 -1
  46. package/dist/packages/button/button.d.ts +54 -37
  47. package/dist/packages/button/button.js +17 -15
  48. package/dist/packages/button/button.js.map +4 -4
  49. package/dist/packages/button/button.react.stories.d.ts +2 -2
  50. package/dist/packages/button/react.d.ts +1 -1
  51. package/dist/packages/card/card.d.ts +9 -6
  52. package/dist/packages/card/card.js.map +3 -3
  53. package/dist/packages/checkbox/checkbox.test.js +1 -1
  54. package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +1 -1
  55. package/dist/packages/checkbox-group/checkbox-group.js.map +1 -1
  56. package/dist/packages/combobox/combobox.js.map +1 -1
  57. package/dist/packages/datepicker/DatePicker.test.js +1 -1
  58. package/dist/packages/datepicker/datepicker.js.map +1 -1
  59. package/dist/packages/datepicker/datepicker.test.js +1 -1
  60. package/dist/packages/link/link.test.js +1 -1
  61. package/dist/packages/modal/index.d.ts +4 -4
  62. package/dist/packages/modal/index.js +4 -4
  63. package/dist/packages/modal/modal.d.ts +21 -12
  64. package/dist/packages/modal/modal.js +4 -4
  65. package/dist/packages/modal/modal.js.map +3 -3
  66. package/dist/packages/modal/modal.react.stories.d.ts +3 -3
  67. package/dist/packages/modal/modal.stories.d.ts +2 -1
  68. package/dist/packages/modal/modal.stories.js +85 -3
  69. package/dist/packages/modal/react.d.ts +2 -2
  70. package/dist/packages/modal-footer/modal-footer.d.ts +5 -3
  71. package/dist/packages/modal-footer/modal-footer.js +4 -4
  72. package/dist/packages/modal-footer/modal-footer.js.map +3 -3
  73. package/dist/packages/modal-footer/react.d.ts +1 -1
  74. package/dist/packages/modal-header/modal-header.d.ts +21 -11
  75. package/dist/packages/modal-header/modal-header.js +3 -1
  76. package/dist/packages/modal-header/modal-header.js.map +4 -4
  77. package/dist/packages/modal-header/react.d.ts +2 -2
  78. package/dist/packages/page-indicator/page-indicator.d.ts +9 -14
  79. package/dist/packages/page-indicator/page-indicator.js.map +3 -3
  80. package/dist/packages/pagination/pagination.d.ts +11 -11
  81. package/dist/packages/pagination/pagination.js.map +3 -3
  82. package/dist/packages/pagination/pagination.test.js +1 -1
  83. package/dist/packages/pill/pill.d.ts +14 -29
  84. package/dist/packages/pill/pill.js.map +3 -3
  85. package/dist/packages/pill/pill.react.stories.d.ts +2 -2
  86. package/dist/packages/pill/react.d.ts +1 -1
  87. package/dist/packages/radio/radio.test.js +1 -1
  88. package/dist/packages/radio-group/radio-group.a11y.test.js +1 -1
  89. package/dist/packages/radio-group/radio-group.js.map +1 -1
  90. package/dist/packages/select/select.js.map +1 -1
  91. package/dist/packages/slider/slider.js.map +1 -1
  92. package/dist/packages/slider/slider.test.js +1 -1
  93. package/dist/packages/slider-thumb/slider-thumb.js.map +1 -1
  94. package/dist/packages/step/step.js.map +1 -1
  95. package/dist/packages/switch/switch.a11y.test.js +1 -1
  96. package/dist/packages/tabs/tabs.a11y.test.js +1 -1
  97. package/dist/packages/tabs/tabs.test.js +1 -1
  98. package/dist/packages/textarea/textarea.js.map +1 -1
  99. package/dist/packages/textarea/textarea.test.js +1 -1
  100. package/dist/packages/textfield/textfield.test.js +1 -1
  101. package/dist/packages/toast/toast.js.map +1 -1
  102. package/dist/web-types.json +290 -73
  103. package/package.json +5 -5
@@ -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.1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -397,76 +397,185 @@
397
397
  },
398
398
  {
399
399
  "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",
400
+ "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
401
  "doc-url": "",
402
402
  "attributes": [
403
403
  {
404
404
  "name": "type",
405
+ "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
406
  "value": { "type": "'button' | 'submit' | 'reset'" }
406
407
  },
407
408
  {
408
409
  "name": "autofocus",
410
+ "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
411
  "value": { "type": "boolean", "default": "false" }
410
412
  },
411
413
  {
412
414
  "name": "variant",
415
+ "description": "Visual style of the button.\nDefaults to `secondary`. Use the variant that matches the action priority, risk, and placement.",
413
416
  "value": {
414
417
  "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'"
415
418
  }
416
419
  },
417
420
  {
418
421
  "name": "quiet",
422
+ "description": "Deprecated quiet visual treatment flag\nUse `variant=\"quiet\"` instead.",
419
423
  "value": { "type": "boolean", "default": "false" }
420
424
  },
421
425
  {
422
426
  "name": "icon-only",
427
+ "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
428
  "value": { "type": "boolean", "default": "false" }
424
429
  },
425
430
  {
426
431
  "name": "small",
432
+ "description": "Renders the compact button size.\nUse this in dense layouts where the default button size is too large.",
427
433
  "value": { "type": "boolean", "default": "false" }
428
434
  },
429
435
  {
430
436
  "name": "loading",
437
+ "description": "Shows the loading state.\nUse after the user has triggered an action and the action is in progress.",
431
438
  "value": { "type": "boolean", "default": "false" }
432
439
  },
433
- { "name": "href", "value": { "type": "string" } },
434
- { "name": "target", "value": { "type": "string" } },
440
+ {
441
+ "name": "href",
442
+ "description": "URL for rendering the button as a link.\nWhen set, the component renders `w-link` instead of a native `button`.",
443
+ "value": { "type": "string" }
444
+ },
445
+ {
446
+ "name": "target",
447
+ "description": "Link browsing context.\nPassed to the rendered link when `href` is set.",
448
+ "value": { "type": "string" }
449
+ },
435
450
  {
436
451
  "name": "disabled",
452
+ "description": "Visually disables the button.\nDisabled buttons are discouraged because they can hide the reason an action is unavailable.",
437
453
  "value": { "type": "boolean", "default": "false" }
438
454
  },
439
- { "name": "rel", "value": { "type": "string" } },
455
+ {
456
+ "name": "rel",
457
+ "description": "Link relationship.\nPassed to the rendered link when `href` is set. If `target=\"_blank\"` is set and `rel` is omitted, `noopener` is used.",
458
+ "value": { "type": "string" }
459
+ },
440
460
  {
441
461
  "name": "full-width",
462
+ "description": "Makes the button fill its parent width.\nUseful in narrow layouts where the button should span the available inline space.",
442
463
  "value": { "type": "boolean", "default": "false" }
443
464
  },
444
- { "name": "button-class", "value": { "type": "string" } },
445
- { "name": "name", "value": { "type": "string" } },
446
- { "name": "value", "value": { "type": "string" } }
465
+ {
466
+ "name": "button-class",
467
+ "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.",
468
+ "value": { "type": "string" }
469
+ },
470
+ {
471
+ "name": "name",
472
+ "description": "Form control name.\nUsed when the button participates in form handling.",
473
+ "value": { "type": "string" }
474
+ },
475
+ {
476
+ "name": "value",
477
+ "description": "Form control value.\nUsed with `name` when the button participates in form handling. Resets to its initial value when the form is reset.",
478
+ "value": { "type": "string" }
479
+ },
480
+ {
481
+ "name": "commandfor",
482
+ "description": "The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
483
+ "value": { "type": "string" }
484
+ },
485
+ {
486
+ "name": "command",
487
+ "description": "The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
488
+ "value": { "type": "string" }
489
+ }
447
490
  ],
448
491
  "events": [],
449
492
  "js": {
450
493
  "properties": [
451
- { "name": "type", "type": "'button' | 'submit' | 'reset'" },
452
- { "name": "autofocus", "type": "boolean" },
494
+ {
495
+ "name": "type",
496
+ "description": "Native button type.\nControls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.",
497
+ "type": "'button' | 'submit' | 'reset'"
498
+ },
499
+ {
500
+ "name": "autofocus",
501
+ "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.",
502
+ "type": "boolean"
503
+ },
453
504
  {
454
505
  "name": "variant",
506
+ "description": "Visual style of the button.\nDefaults to `secondary`. Use the variant that matches the action priority, risk, and placement.",
455
507
  "type": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'"
456
508
  },
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" }
509
+ {
510
+ "name": "quiet",
511
+ "description": "Deprecated quiet visual treatment flag\nUse `variant=\"quiet\"` instead.",
512
+ "type": "boolean"
513
+ },
514
+ {
515
+ "name": "iconOnly",
516
+ "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.",
517
+ "type": "boolean"
518
+ },
519
+ {
520
+ "name": "small",
521
+ "description": "Renders the compact button size.\nUse this in dense layouts where the default button size is too large.",
522
+ "type": "boolean"
523
+ },
524
+ {
525
+ "name": "loading",
526
+ "description": "Shows the loading state.\nUse after the user has triggered an action and the action is in progress.",
527
+ "type": "boolean"
528
+ },
529
+ {
530
+ "name": "href",
531
+ "description": "URL for rendering the button as a link.\nWhen set, the component renders `w-link` instead of a native `button`.",
532
+ "type": "string"
533
+ },
534
+ {
535
+ "name": "target",
536
+ "description": "Link browsing context.\nPassed to the rendered link when `href` is set.",
537
+ "type": "string"
538
+ },
539
+ {
540
+ "name": "disabled",
541
+ "description": "Visually disables the button.\nDisabled buttons are discouraged because they can hide the reason an action is unavailable.",
542
+ "type": "boolean"
543
+ },
544
+ {
545
+ "name": "rel",
546
+ "description": "Link relationship.\nPassed to the rendered link when `href` is set. If `target=\"_blank\"` is set and `rel` is omitted, `noopener` is used.",
547
+ "type": "string"
548
+ },
549
+ {
550
+ "name": "fullWidth",
551
+ "description": "Makes the button fill its parent width.\nUseful in narrow layouts where the button should span the available inline space.",
552
+ "type": "boolean"
553
+ },
554
+ {
555
+ "name": "buttonClass",
556
+ "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.",
557
+ "type": "string"
558
+ },
559
+ {
560
+ "name": "name",
561
+ "description": "Form control name.\nUsed when the button participates in form handling.",
562
+ "type": "string"
563
+ },
564
+ {
565
+ "name": "value",
566
+ "description": "Form control value.\nUsed with `name` when the button participates in form handling. Resets to its initial value when the form is reset.",
567
+ "type": "string"
568
+ },
569
+ {
570
+ "name": "commandfor",
571
+ "description": "The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
572
+ "type": "string"
573
+ },
574
+ {
575
+ "name": "command",
576
+ "description": "The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.",
577
+ "type": "string"
578
+ }
470
579
  ],
471
580
  "events": []
472
581
  }
@@ -749,23 +858,38 @@
749
858
  "attributes": [
750
859
  {
751
860
  "name": "selected",
861
+ "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
862
  "value": { "type": "boolean", "default": "false" }
753
863
  },
754
864
  {
755
865
  "name": "flat",
866
+ "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
867
  "value": { "type": "boolean", "default": "false" }
757
868
  },
758
869
  {
759
870
  "name": "clickable",
871
+ "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
872
  "value": { "type": "boolean", "default": "false" }
761
873
  }
762
874
  ],
763
875
  "events": [],
764
876
  "js": {
765
877
  "properties": [
766
- { "name": "selected", "type": "boolean" },
767
- { "name": "flat", "type": "boolean" },
768
- { "name": "clickable", "type": "boolean" },
878
+ {
879
+ "name": "selected",
880
+ "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.",
881
+ "type": "boolean"
882
+ },
883
+ {
884
+ "name": "flat",
885
+ "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.",
886
+ "type": "boolean"
887
+ },
888
+ {
889
+ "name": "clickable",
890
+ "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.",
891
+ "type": "boolean"
892
+ },
769
893
  { "name": "buttonText" }
770
894
  ],
771
895
  "events": []
@@ -1242,16 +1366,18 @@
1242
1366
  },
1243
1367
  {
1244
1368
  "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.",
1369
+ "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
1370
  "doc-url": "",
1247
1371
  "attributes": [
1248
1372
  {
1249
1373
  "name": "show",
1374
+ "description": "Controls if the modal should show or hide.\n\nYou can also call the `open()` and `close()` methods.",
1250
1375
  "value": { "type": "boolean", "default": "false" }
1251
1376
  },
1252
1377
  { "name": "content-id", "value": { "type": "string" } },
1253
1378
  {
1254
1379
  "name": "ignore-backdrop-clicks",
1380
+ "description": "Ignores clicks to the backdrop when set",
1255
1381
  "value": { "type": "boolean", "default": "false" }
1256
1382
  }
1257
1383
  ],
@@ -1275,12 +1401,17 @@
1275
1401
  ],
1276
1402
  "js": {
1277
1403
  "properties": [
1278
- { "name": "show", "type": "boolean" },
1404
+ {
1405
+ "name": "show",
1406
+ "description": "Controls if the modal should show or hide.\n\nYou can also call the `open()` and `close()` methods.",
1407
+ "type": "boolean"
1408
+ },
1279
1409
  { "name": "contentId", "type": "string" },
1280
- { "name": "ignoreBackdropClicks", "type": "boolean" },
1281
- { "name": "dialogEl", "type": "HTMLDialogElement" },
1282
- { "name": "dialogInnerEl", "type": "HTMLElement" },
1283
- { "name": "contentEl", "type": "HTMLElement" }
1410
+ {
1411
+ "name": "ignoreBackdropClicks",
1412
+ "description": "Ignores clicks to the backdrop when set",
1413
+ "type": "boolean"
1414
+ }
1284
1415
  ],
1285
1416
  "events": [
1286
1417
  { "name": "shown", "type": "CustomEvent" },
@@ -1290,7 +1421,7 @@
1290
1421
  },
1291
1422
  {
1292
1423
  "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",
1424
+ "description": "The footer section of a modal, typically where you place actions.\n---\n",
1294
1425
  "doc-url": "",
1295
1426
  "attributes": [],
1296
1427
  "events": [],
@@ -1298,16 +1429,22 @@
1298
1429
  },
1299
1430
  {
1300
1431
  "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.",
1432
+ "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
1433
  "doc-url": "",
1303
1434
  "attributes": [
1304
- { "name": "title", "value": { "type": "string" } },
1435
+ {
1436
+ "name": "title",
1437
+ "description": "A short but descriptive title for the modal",
1438
+ "value": { "type": "string" }
1439
+ },
1305
1440
  {
1306
1441
  "name": "back",
1442
+ "description": "Whether the modal header should have a back button",
1307
1443
  "value": { "type": "boolean", "default": "false" }
1308
1444
  },
1309
1445
  {
1310
1446
  "name": "no-close",
1447
+ "description": "Lets you hide the close button in the header",
1311
1448
  "value": { "type": "boolean", "default": "false" }
1312
1449
  }
1313
1450
  ],
@@ -1320,31 +1457,39 @@
1320
1457
  "events": [{ "name": "backClicked", "type": "CustomEvent" }],
1321
1458
  "js": {
1322
1459
  "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" }
1460
+ {
1461
+ "name": "title",
1462
+ "description": "A short but descriptive title for the modal",
1463
+ "type": "string"
1464
+ },
1465
+ {
1466
+ "name": "back",
1467
+ "description": "Whether the modal header should have a back button",
1468
+ "type": "boolean"
1469
+ },
1470
+ {
1471
+ "name": "noClose",
1472
+ "description": "Lets you hide the close button in the header",
1473
+ "type": "boolean"
1474
+ }
1330
1475
  ],
1331
1476
  "events": [{ "name": "backClicked", "type": "CustomEvent" }]
1332
1477
  }
1333
1478
  },
1334
1479
  {
1335
1480
  "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",
1481
+ "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
1482
  "doc-url": "",
1338
1483
  "attributes": [
1339
1484
  {
1340
1485
  "name": "selected-page",
1341
- "description": "Currently selected page (1-based index, clamped to valid range)",
1342
- "value": { "type": "number" }
1486
+ "description": "Currently selected page (1-based index)",
1487
+ "value": { "type": "number", "default": "1" }
1343
1488
  },
1344
1489
  {
1345
1490
  "name": "page-count",
1346
- "description": "Total number of pages (minimum 1)",
1347
- "value": { "type": "number" }
1491
+ "description": "Total number of pages",
1492
+ "value": { "type": "number", "default": "1" }
1348
1493
  }
1349
1494
  ],
1350
1495
  "events": [],
@@ -1352,12 +1497,12 @@
1352
1497
  "properties": [
1353
1498
  {
1354
1499
  "name": "selectedPage",
1355
- "description": "Currently selected page (1-based index, clamped to valid range)",
1500
+ "description": "Currently selected page (1-based index)",
1356
1501
  "type": "number"
1357
1502
  },
1358
1503
  {
1359
1504
  "name": "pageCount",
1360
- "description": "Total number of pages (minimum 1)",
1505
+ "description": "Total number of pages",
1361
1506
  "type": "number"
1362
1507
  }
1363
1508
  ],
@@ -1366,73 +1511,145 @@
1366
1511
  },
1367
1512
  {
1368
1513
  "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.",
1514
+ "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
1515
  "doc-url": "",
1371
1516
  "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" } }
1517
+ {
1518
+ "name": "base-url",
1519
+ "description": "The base URL used to construct page links, for example `/search?page=`.\n\nThe page number is appended to this URL.",
1520
+ "value": { "type": "string" }
1521
+ },
1522
+ {
1523
+ "name": "pages",
1524
+ "description": "The total number of pages.",
1525
+ "value": { "type": "number" }
1526
+ },
1527
+ {
1528
+ "name": "current-page",
1529
+ "description": "The currently active page number.",
1530
+ "value": { "type": "number", "default": "1" }
1531
+ },
1532
+ {
1533
+ "name": "visible-pages",
1534
+ "description": "The maximum number of page numbers visible.",
1535
+ "value": { "type": "number", "default": "7" }
1536
+ }
1376
1537
  ],
1377
1538
  "events": [
1378
1539
  {
1379
1540
  "name": "page-click",
1380
1541
  "type": "CustomEvent",
1381
- "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
1542
+ "description": "Triggered when a link in the pagination is clicked. Contains the page number in `string` form."
1382
1543
  }
1383
1544
  ],
1384
1545
  "js": {
1385
1546
  "properties": [
1386
- { "name": "baseUrl", "type": "string" },
1387
- { "name": "pages", "type": "number" },
1388
- { "name": "currentPageNumber", "type": "number" },
1389
- { "name": "visiblePages", "type": "number" }
1547
+ {
1548
+ "name": "baseUrl",
1549
+ "description": "The base URL used to construct page links, for example `/search?page=`.\n\nThe page number is appended to this URL.",
1550
+ "type": "string"
1551
+ },
1552
+ {
1553
+ "name": "pages",
1554
+ "description": "The total number of pages.",
1555
+ "type": "number"
1556
+ },
1557
+ {
1558
+ "name": "currentPageNumber",
1559
+ "description": "The currently active page number.",
1560
+ "type": "number"
1561
+ },
1562
+ {
1563
+ "name": "visiblePages",
1564
+ "description": "The maximum number of page numbers visible.",
1565
+ "type": "number"
1566
+ }
1390
1567
  ],
1391
1568
  "events": [
1392
1569
  {
1393
1570
  "name": "page-click",
1394
1571
  "type": "CustomEvent",
1395
- "description": "Triggered when a link button in the pagination is clicked. Contains the page number in `string` form."
1572
+ "description": "Triggered when a link in the pagination is clicked. Contains the page number in `string` form."
1396
1573
  }
1397
1574
  ]
1398
1575
  }
1399
1576
  },
1400
1577
  {
1401
1578
  "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**",
1579
+ "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
1580
  "doc-url": "",
1404
1581
  "attributes": [
1405
1582
  {
1406
1583
  "name": "can-close",
1584
+ "description": "Whether the pill should be removable via a close button.",
1407
1585
  "value": { "type": "boolean", "default": "false" }
1408
1586
  },
1409
1587
  {
1410
1588
  "name": "suggestion",
1589
+ "description": "Whether the pill should be rendered as a suggestion.",
1411
1590
  "value": { "type": "boolean", "default": "false" }
1412
1591
  },
1413
1592
  { "name": "open-sr-label", "value": { "type": "string" } },
1414
- { "name": "open-aria-label", "value": { "type": "string" } },
1593
+ {
1594
+ "name": "open-aria-label",
1595
+ "description": "Label read by screen readers when targeting the pill.",
1596
+ "value": { "type": "string" }
1597
+ },
1415
1598
  { "name": "close-sr-label", "value": { "type": "string" } },
1416
- { "name": "close-aria-label", "value": { "type": "string" } }
1599
+ {
1600
+ "name": "close-aria-label",
1601
+ "description": "Label read by screen readers when targeting the close button.",
1602
+ "value": { "type": "string" }
1603
+ }
1417
1604
  ],
1418
1605
  "events": [
1419
- { "name": "w-pill-click", "type": "CustomEvent" },
1420
- { "name": "w-pill-close", "type": "CustomEvent" }
1606
+ {
1607
+ "name": "w-pill-click",
1608
+ "type": "CustomEvent",
1609
+ "description": "Fires when the pill itself is clicked."
1610
+ },
1611
+ {
1612
+ "name": "w-pill-close",
1613
+ "type": "CustomEvent",
1614
+ "description": "Fires when the pill's close button is clicked."
1615
+ }
1421
1616
  ],
1422
1617
  "js": {
1423
1618
  "properties": [
1424
- { "name": "canClose", "type": "boolean" },
1425
- { "name": "suggestion", "type": "boolean" },
1619
+ {
1620
+ "name": "canClose",
1621
+ "description": "Whether the pill should be removable via a close button.",
1622
+ "type": "boolean"
1623
+ },
1624
+ {
1625
+ "name": "suggestion",
1626
+ "description": "Whether the pill should be rendered as a suggestion.",
1627
+ "type": "boolean"
1628
+ },
1426
1629
  { "name": "openSrLabel", "type": "string" },
1427
- { "name": "openAriaLabel", "type": "string" },
1630
+ {
1631
+ "name": "openAriaLabel",
1632
+ "description": "Label read by screen readers when targeting the pill.",
1633
+ "type": "string"
1634
+ },
1428
1635
  { "name": "closeSrLabel", "type": "string" },
1429
- { "name": "closeAriaLabel", "type": "string" },
1430
- { "name": "openFilterSrText" },
1431
- { "name": "removeFilterSrText" }
1636
+ {
1637
+ "name": "closeAriaLabel",
1638
+ "description": "Label read by screen readers when targeting the close button.",
1639
+ "type": "string"
1640
+ }
1432
1641
  ],
1433
1642
  "events": [
1434
- { "name": "w-pill-click", "type": "CustomEvent" },
1435
- { "name": "w-pill-close", "type": "CustomEvent" }
1643
+ {
1644
+ "name": "w-pill-click",
1645
+ "type": "CustomEvent",
1646
+ "description": "Fires when the pill itself is clicked."
1647
+ },
1648
+ {
1649
+ "name": "w-pill-close",
1650
+ "type": "CustomEvent",
1651
+ "description": "Fires when the pill's close button is clicked."
1652
+ }
1436
1653
  ]
1437
1654
  }
1438
1655
  },
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@warp-ds/elements",
3
3
  "type": "module",
4
- "version": "2.9.2-next.1",
5
- "packageManager": "pnpm@10.33.2",
4
+ "version": "2.10.0-next.2",
5
+ "packageManager": "pnpm@11.1.0",
6
6
  "description": "Custom elements for Warp",
7
7
  "exports": {
8
8
  ".": {
@@ -307,7 +307,7 @@
307
307
  },
308
308
  "license": "Apache-2.0",
309
309
  "devDependencies": {
310
- "@biomejs/biome": "2.4.14",
310
+ "@biomejs/biome": "2.4.15",
311
311
  "@chbphone55/classnames": "2.0.0",
312
312
  "@custom-elements-manifest/analyzer": "^0.11.0",
313
313
  "@eik/cli": "2.0.39",
@@ -333,7 +333,7 @@
333
333
  "@storybook/react-vite": "^10.3.5",
334
334
  "@storybook/web-components": "^10.3.5",
335
335
  "@storybook/web-components-vite": "^10.3.5",
336
- "@types/node": "24.12.2",
336
+ "@types/node": "24.12.4",
337
337
  "@types/react": "^19.2.0",
338
338
  "@types/react-dom": "^19.2.0",
339
339
  "@vitejs/plugin-react": "^6.0.1",
@@ -354,7 +354,7 @@
354
354
  "date-fns": "^4.1.0",
355
355
  "element-collapse": "1.1.0",
356
356
  "esbuild": "0.28.0",
357
- "express": "4.22.1",
357
+ "express": "4.22.2",
358
358
  "glob": "13.0.6",
359
359
  "globals": "17.6.0",
360
360
  "html-format": "1.1.7",