@warp-ds/elements 2.4.0-next.2 → 2.4.0

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 (47) hide show
  1. package/dist/custom-elements.json +178 -3297
  2. package/dist/index.d.ts +39 -771
  3. package/dist/packages/checkbox/checkbox-group.js +11 -3
  4. package/dist/packages/checkbox/checkbox.js +201 -2572
  5. package/dist/packages/combobox/combobox.react.stories.d.ts +1 -1
  6. package/dist/packages/combobox/combobox.test.d.ts +2 -0
  7. package/dist/packages/combobox/combobox.test.js +21 -0
  8. package/dist/packages/combobox/index.d.ts +2 -4
  9. package/dist/packages/combobox/index.js +9 -8
  10. package/dist/packages/combobox/index.js.map +2 -2
  11. package/dist/packages/deadtoggle/index.js +51 -2547
  12. package/dist/packages/pageindicator/index.js +44 -28
  13. package/dist/packages/pagination/index.js +183 -2484
  14. package/dist/packages/radio/radio-group-styles.js +3 -3
  15. package/dist/packages/radio/radio-group.js +313 -2619
  16. package/dist/packages/radio/radio-styles.js +0 -1
  17. package/dist/packages/radio/radio.js +109 -2556
  18. package/dist/packages/radio/radio.stories.js +47 -3688
  19. package/dist/packages/slider/slider-thumb.js +400 -2647
  20. package/dist/packages/slider/slider.js +272 -2603
  21. package/dist/packages/stepindicator/index.js +189 -2459
  22. package/dist/packages/tabs/tab.js +91 -2451
  23. package/dist/packages/tabs/tabs.js +251 -2444
  24. package/dist/packages/textarea/textarea.js +210 -2465
  25. package/dist/packages/textfield/index.d.ts +1 -0
  26. package/dist/packages/textfield/index.js +18 -17
  27. package/dist/packages/textfield/index.js.map +2 -2
  28. package/dist/packages/textfield/textfield.react.stories.d.ts +1 -1
  29. package/dist/packages/textfield/textfield.test.js +9 -0
  30. package/dist/web-types.json +42 -830
  31. package/package.json +1 -37
  32. package/dist/packages/checkbox/checkbox-group.js.map +0 -7
  33. package/dist/packages/checkbox/checkbox.js.map +0 -7
  34. package/dist/packages/deadtoggle/index.js.map +0 -7
  35. package/dist/packages/pageindicator/index.js.map +0 -7
  36. package/dist/packages/pagination/index.js.map +0 -7
  37. package/dist/packages/radio/radio-group-styles.js.map +0 -7
  38. package/dist/packages/radio/radio-group.js.map +0 -7
  39. package/dist/packages/radio/radio-styles.js.map +0 -7
  40. package/dist/packages/radio/radio.js.map +0 -7
  41. package/dist/packages/radio/radio.stories.js.map +0 -7
  42. package/dist/packages/slider/slider-thumb.js.map +0 -7
  43. package/dist/packages/slider/slider.js.map +0 -7
  44. package/dist/packages/stepindicator/index.js.map +0 -7
  45. package/dist/packages/tabs/tab.js.map +0 -7
  46. package/dist/packages/tabs/tabs.js.map +0 -7
  47. package/dist/packages/textarea/textarea.js.map +0 -7
package/dist/index.d.ts CHANGED
@@ -17,21 +17,8 @@ import type { ModalHeader } from "./packages/modal/modal-header.ts";
17
17
  import type { ModalMain } from "./packages/modal/modal-main.ts";
18
18
  import type { WarpToastContainer } from "./packages/toast/toast-container.ts";
19
19
  import type { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
20
- import type { WarpCombobox } from "./packages/combobox/index.ts";
21
- import type { WarpDeadToggle } from "./packages/deadtoggle/index.ts";
22
- import type { WarpPageIndicator } from "./packages/pageindicator/index.ts";
23
- import type { WarpPagination } from "./packages/pagination/index.ts";
24
- import type { WRadio } from "./packages/radio/radio.ts";
25
- import type { WRadioGroup } from "./packages/radio/radio-group.ts";
26
- import type { WCheckbox } from "./packages/checkbox/checkbox.ts";
27
- import type { WCheckboxGroup } from "./packages/checkbox/checkbox-group.ts";
28
- import type { WarpSliderThumb } from "./packages/slider/slider-thumb.ts";
29
- import type { WarpSlider } from "./packages/slider/slider.ts";
30
- import type { WarpStepIndicator, WarpStep } from "./packages/stepindicator/index.ts";
31
20
  import type { WarpSwitch } from "./packages/switch/index.ts";
32
- import type { WarpTab } from "./packages/tabs/tab.ts";
33
- import type { WarpTabs } from "./packages/tabs/tabs.ts";
34
- import type { WarpTextarea } from "./packages/textarea/textarea.ts";
21
+ import type { WarpCombobox } from "./packages/combobox/index.ts";
35
22
 
36
23
  /**
37
24
  * This type can be used to create scoped tags for your components.
@@ -456,6 +443,8 @@ export type WarpTextFieldProps = {
456
443
  "name"?: WarpTextField['name'];
457
444
  /** */
458
445
  "step"?: WarpTextField['step'];
446
+ /** */
447
+ "autocomplete"?: WarpTextField['autocomplete'];
459
448
  /** Function to format value when the input field.
460
449
 
461
450
  Only active when the input field does not have focus,
@@ -587,6 +576,21 @@ the query will point to an element that doesn't exist anymore. */
587
576
  }
588
577
 
589
578
 
579
+ export type WarpSwitchProps = {
580
+ /** */
581
+ "name"?: WarpSwitch['name'];
582
+ /** */
583
+ "value"?: WarpSwitch['value'];
584
+ /** */
585
+ "checked"?: WarpSwitch['checked'];
586
+ /** */
587
+ "disabled"?: WarpSwitch['disabled'];
588
+
589
+ /** */
590
+ "onchange"?: (e: CustomEvent<CustomEvent>) => void;
591
+ }
592
+
593
+
590
594
  export type WarpComboboxProps = {
591
595
  /** The available options to select from */
592
596
  "options"?: WarpCombobox['options'];
@@ -624,363 +628,10 @@ export type WarpComboboxProps = {
624
628
  "required"?: WarpCombobox['required'];
625
629
  /** Whether to show optional text */
626
630
  "optional"?: WarpCombobox['optional'];
627
- /** Additional container styling */
628
- "class-name"?: WarpCombobox['containerClassName'];
629
- /** Additional container styling */
630
- "containerClassName"?: WarpCombobox['containerClassName'];
631
- /** Additional list styling */
632
- "list-class-name"?: WarpCombobox['listClassName'];
633
- /** Additional list styling */
634
- "listClassName"?: WarpCombobox['listClassName'];
635
631
  /** Name attribute for form submission */
636
632
  "name"?: WarpCombobox['name'];
637
-
638
-
639
- }
640
-
641
-
642
- export type WarpDeadToggleProps = {
643
- /** */
644
- "type"?: WarpDeadToggle['type'];
645
- /** */
646
- "checked"?: WarpDeadToggle['checked'];
647
- /** */
648
- "indeterminate"?: WarpDeadToggle['indeterminate'];
649
- /** */
650
- "invalid"?: WarpDeadToggle['invalid'];
651
- /** */
652
- "disabled"?: WarpDeadToggle['disabled'];
653
-
654
-
655
- }
656
-
657
-
658
- export type WarpPageIndicatorProps = {
659
- /** Currently selected page (1-based index) */
660
- "selected-page"?: WarpPageIndicator['selectedPage'];
661
- /** Currently selected page (1-based index) */
662
- "selectedPage"?: WarpPageIndicator['selectedPage'];
663
- /** Total number of pages */
664
- "page-count"?: WarpPageIndicator['pageCount'];
665
- /** Total number of pages */
666
- "pageCount"?: WarpPageIndicator['pageCount'];
667
-
668
-
669
- }
670
-
671
-
672
- export type WarpPaginationProps = {
673
- /** */
674
- "base-url"?: WarpPagination['baseUrl'];
675
- /** */
676
- "baseUrl"?: WarpPagination['baseUrl'];
677
- /** */
678
- "pages"?: WarpPagination['pages'];
679
- /** */
680
- "current-page"?: WarpPagination['currentPageNumber'];
681
- /** */
682
- "currentPageNumber"?: WarpPagination['currentPageNumber'];
683
- /** */
684
- "visible-pages"?: WarpPagination['visiblePages'];
685
- /** */
686
- "visiblePages"?: WarpPagination['visiblePages'];
687
-
688
- /** Triggered when a link button in the pagination is clicked. Contains the page number in `string` form. */
689
- "onpage-click"?: (e: CustomEvent<CustomEvent>) => void;
690
- }
691
-
692
-
693
- export type WRadioProps = {
694
- /** The string pointing to a form's id. */
695
- "form"?: WRadio['form'];
696
- /** The radio's value. When selected, the radio group will receive this value. */
697
- "value"?: WRadio['value'];
698
- /** The radio's value. When selected, the radio group will receive this value. */
699
- "appearance"?: WRadio['appearance'];
700
- /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
701
- attribute can typically be omitted. */
702
- "size"?: WRadio['size'];
703
- /** Disables the radio. */
704
- "disabled"?: WRadio['disabled'];
705
- /** */
706
- "checked"?: WRadio['checked'];
707
-
708
-
709
- }
710
-
711
-
712
- export type WRadioGroupProps = {
713
- /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
714
- instead. */
715
- "label"?: WRadioGroup['label'];
716
- /** The radio groups's hint. If you need to display HTML, use the `hint` slot instead. */
717
- "hint"?: WRadioGroup['hint'];
718
- /** The name of the radio group, submitted as a name/value pair with form data. */
719
- "name"?: WRadioGroup['name'];
720
- /** Disables the radio group and all child radios. */
721
- "disabled"?: WRadioGroup['disabled'];
722
- /** The orientation in which to show radio items. */
723
- "orientation"?: WRadioGroup['orientation'];
724
- /** The default value of the form control. Primarily used for resetting the form control. */
725
- "value"?: WRadioGroup['defaultValue'];
726
- /** The default value of the form control. Primarily used for resetting the form control. */
727
- "defaultValue"?: WRadioGroup['defaultValue'];
728
- /** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
729
- "size"?: WRadioGroup['size'];
730
- /** Ensures a child radio is checked before allowing the containing form to submit. */
731
- "required"?: WRadioGroup['required'];
732
- /** Used for SSR. if true, will show slotted label on initial render. */
733
- "with-label"?: WRadioGroup['withLabel'];
734
- /** Used for SSR. if true, will show slotted label on initial render. */
735
- "withLabel"?: WRadioGroup['withLabel'];
736
- /** Used for SSR. if true, will show slotted hint on initial render. */
737
- "with-hint"?: WRadioGroup['withHint'];
738
- /** Used for SSR. if true, will show slotted hint on initial render. */
739
- "withHint"?: WRadioGroup['withHint'];
740
- /** */
741
- "hasRadioButtons"?: WRadioGroup['hasRadioButtons'];
742
- /** */
743
- "defaultSlot"?: WRadioGroup['defaultSlot'];
744
-
745
- /** */
746
- "oninput"?: (e: CustomEvent<InputEvent>) => void;
747
- /** */
748
- "onchange"?: (e: CustomEvent<Event>) => void;
749
- }
750
-
751
-
752
- export type WCheckboxProps = {
753
- /** */
754
- "title"?: WCheckbox['title'];
755
- /** The name of the checkbox, submitted as a name/value pair with form data. */
756
- "name"?: WCheckbox['name'];
757
- /** The value of the checkbox, submitted as a name/value pair with form data. */
758
- "value"?: WCheckbox['value'];
759
- /** The checkbox's size. */
760
- "size"?: WCheckbox['size'];
761
- /** Disables the checkbox. */
762
- "disabled"?: WCheckbox['disabled'];
763
- /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
764
- all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
765
- "indeterminate"?: WCheckbox['indeterminate'];
766
- /** The default value of the form control. Primarily used for resetting the form control. */
767
- "checked"?: WCheckbox['defaultChecked'];
768
- /** The default value of the form control. Primarily used for resetting the form control. */
769
- "defaultChecked"?: WCheckbox['defaultChecked'];
770
- /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
771
- to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
772
- the same document or shadow root for this to work. */
773
- "form"?: WCheckbox['form'];
774
- /** Makes the checkbox a required field. */
775
- "required"?: WCheckbox['required'];
776
- /** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */
777
- "hint"?: WCheckbox['hint'];
778
- /** */
779
- "input"?: WCheckbox['input'];
780
-
781
- /** */
782
- "onchange"?: (e: CustomEvent<Event>) => void;
783
- }
784
-
785
-
786
- export type WCheckboxGroupProps = {
787
-
788
-
789
- }
790
-
791
-
792
- export type WarpSliderThumbProps = {
793
- /** */
794
- "aria-label"?: WarpSliderThumb['ariaLabel'];
795
- /** */
796
- "ariaLabel"?: WarpSliderThumb['ariaLabel'];
797
- /** */
798
- "aria-description"?: WarpSliderThumb['ariaDescription'];
799
- /** */
800
- "ariaDescription"?: WarpSliderThumb['ariaDescription'];
801
- /** */
802
- "label"?: WarpSliderThumb['label'];
803
- /** */
804
- "name"?: WarpSliderThumb['name'];
805
- /** */
806
- "value"?: WarpSliderThumb['value'];
807
- /** */
808
- "disabled"?: WarpSliderThumb['disabled'];
809
- /** */
810
- "invalid"?: WarpSliderThumb['invalid'];
811
- /** Set by `<w-slider>` */
812
- "allowValuesOutsideRange"?: WarpSliderThumb['allowValuesOutsideRange'];
813
- /** Set by `<w-slider>` */
814
- "markers"?: WarpSliderThumb['markers'];
815
- /** Set by `<w-slider>` */
816
- "required"?: WarpSliderThumb['required'];
817
- /** Set by `<w-slider>` */
818
- "step"?: WarpSliderThumb['step'];
819
- /** Set by `<w-slider>` */
820
- "min"?: WarpSliderThumb['min'];
821
- /** Set by `<w-slider>` */
822
- "max"?: WarpSliderThumb['max'];
823
- /** Set by `<w-slider>` */
824
- "suffix"?: WarpSliderThumb['suffix'];
825
- /** JS hook to help you format the numeric value how you want. */
826
- "formatter"?: WarpSliderThumb['formatter'];
827
- /** */
828
- "range"?: WarpSliderThumb['range'];
829
- /** */
830
- "textfield"?: WarpSliderThumb['textfield'];
831
-
832
- /** */
833
- "onslidervalidity"?: (e: CustomEvent<CustomEvent>) => void;
834
- }
835
-
836
-
837
- export type WarpSliderProps = {
838
- /** The slider fieldset label. Required for proper accessibility.
839
-
840
- If you need to display HTML, use the `label` slot instead. */
841
- "label"?: WarpSlider['label'];
842
- /** */
843
- "disabled"?: WarpSlider['disabled'];
844
- /** */
845
- "allow-values-outside-range"?: WarpSlider['allowValuesOutsideRange'];
846
- /** */
847
- "allowValuesOutsideRange"?: WarpSlider['allowValuesOutsideRange'];
848
- /** */
849
- "error"?: WarpSlider['error'];
850
- /** */
851
- "help-text"?: WarpSlider['helpText'];
852
- /** */
853
- "helpText"?: WarpSlider['helpText'];
854
- /** */
855
- "invalid"?: WarpSlider['invalid'];
856
- /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
857
- "required"?: WarpSlider['required'];
858
- /** */
859
- "min"?: WarpSlider['min'];
860
- /** */
861
- "max"?: WarpSlider['max'];
862
- /** Pass a value similar to step to create visual markers at that interval */
863
- "markers"?: WarpSlider['markers'];
864
- /** */
865
- "step"?: WarpSlider['step'];
866
- /** Suffix used in text input fields and for the min and max values of the slider. */
867
- "suffix"?: WarpSlider['suffix'];
868
- /** Function to format the to- and from labels and value in the slider thumb tooltip. */
869
- "formatter"?: WarpSlider['formatter'];
870
- /** */
871
- "_invalidMessage"?: WarpSlider['_invalidMessage'];
872
- /** */
873
- "_hasInternalError"?: WarpSlider['_hasInternalError'];
874
-
875
-
876
- }
877
-
878
-
879
- export type WarpStepIndicatorProps = {
880
- /** */
881
- "horizontal"?: WarpStepIndicator['horizontal'];
882
- /** */
883
- "right"?: WarpStepIndicator['right'];
884
-
885
-
886
- }
887
-
888
-
889
- export type WarpStepProps = {
890
- /** */
891
- "active"?: WarpStep['active'];
892
- /** */
893
- "completed"?: WarpStep['completed'];
894
-
895
-
896
- }
897
-
898
-
899
- export type WarpSwitchProps = {
900
- /** */
901
- "name"?: WarpSwitch['name'];
902
- /** */
903
- "value"?: WarpSwitch['value'];
904
- /** */
905
- "checked"?: WarpSwitch['checked'];
906
- /** */
907
- "disabled"?: WarpSwitch['disabled'];
908
-
909
- /** */
910
- "onchange"?: (e: CustomEvent<CustomEvent>) => void;
911
- }
912
-
913
-
914
- export type WarpTabProps = {
915
- /** */
916
- "name"?: WarpTab['name'];
917
- /** */
918
- "label"?: WarpTab['label'];
919
- /** */
920
- "active"?: WarpTab['active'];
921
- /** */
922
- "over"?: WarpTab['over'];
923
- /** */
924
- "tab-class"?: WarpTab['tabClass'];
925
- /** */
926
- "tabClass"?: WarpTab['tabClass'];
927
-
928
-
929
- }
930
-
931
-
932
- export type WarpTabsProps = {
933
- /** */
934
- "active"?: WarpTabs['active'];
935
- /** */
936
- "tab-class"?: WarpTabs['tabClass'];
937
- /** */
938
- "tabClass"?: WarpTabs['tabClass'];
939
-
940
- /** */
941
- "onchange"?: (e: CustomEvent<CustomEvent>) => void;
942
- }
943
-
944
-
945
- export type WarpTextareaProps = {
946
- /** */
947
- "disabled"?: WarpTextarea['disabled'];
948
- /** */
949
- "invalid"?: WarpTextarea['invalid'];
950
- /** */
951
- "label"?: WarpTextarea['label'];
952
- /** */
953
- "help-text"?: WarpTextarea['helpText'];
954
- /** */
955
- "helpText"?: WarpTextarea['helpText'];
956
- /** */
957
- "maximum-rows"?: WarpTextarea['maxRows'];
958
- /** */
959
- "maxRows"?: WarpTextarea['maxRows'];
960
- /** */
961
- "minimum-rows"?: WarpTextarea['minRows'];
962
- /** */
963
- "minRows"?: WarpTextarea['minRows'];
964
- /** */
965
- "name"?: WarpTextarea['name'];
966
- /** */
967
- "placeholder"?: WarpTextarea['placeholder'];
968
- /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
969
- "read-only"?: WarpTextarea['readOnly'];
970
- /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
971
- "readOnly"?: WarpTextarea['readOnly'];
972
- /** */
973
- "readonly"?: WarpTextarea['readonly'];
974
- /** */
975
- "required"?: WarpTextarea['required'];
976
- /** */
977
- "value"?: WarpTextarea['value'];
978
- /** */
979
- "optional"?: WarpTextarea['optional'];
980
- /** */
981
- "minHeight"?: WarpTextarea['minHeight'];
982
- /** */
983
- "maxHeight"?: WarpTextarea['maxHeight'];
633
+ /** Autocomplete attribute for the input field */
634
+ "autocomplete"?: WarpCombobox['autocomplete'];
984
635
 
985
636
 
986
637
  }
@@ -1309,6 +960,7 @@ export type WarpTextareaProps = {
1309
960
  * - `value`: undefined
1310
961
  * - `name`: undefined
1311
962
  * - `step`: undefined
963
+ * - `autocomplete`: undefined
1312
964
  * - `formatter`: Function to format value when the input field.
1313
965
  *
1314
966
  * Only active when the input field does not have focus,
@@ -1490,348 +1142,6 @@ export type WarpTextareaProps = {
1490
1142
  "w-datepicker": Partial<WarpDatepickerProps & BaseProps<WarpDatepicker> & BaseEvents>;
1491
1143
 
1492
1144
 
1493
- /**
1494
- * A combobox element for text input with selectable options.
1495
- *
1496
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
1497
- *
1498
- * ## Attributes & Properties
1499
- *
1500
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1501
- *
1502
- * - `options`: The available options to select from
1503
- * - `label`: Label above input
1504
- * - `placeholder`: Input placeholder
1505
- * - `value`: The input value
1506
- * - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field
1507
- * - `select-on-blur`/`selectOnBlur`: Select active option on blur
1508
- * - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted
1509
- * - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering
1510
- * - `invalid`: Renders the input field in an invalid state
1511
- * - `help-text`/`helpText`: The content to display as the help text
1512
- * - `disabled`: Whether the element is disabled
1513
- * - `required`: Whether the element is required
1514
- * - `optional`: Whether to show optional text
1515
- * - `class-name`/`containerClassName`: Additional container styling
1516
- * - `list-class-name`/`listClassName`: Additional list styling
1517
- * - `name`: Name attribute for form submission
1518
- *
1519
- * ## Methods
1520
- *
1521
- * Methods that can be called to access component functionality.
1522
- *
1523
- * - `resetFormControl() => void`: undefined
1524
- */
1525
- "w-combobox": Partial<WarpComboboxProps & BaseProps<WarpCombobox> & BaseEvents>;
1526
-
1527
-
1528
- /**
1529
- * Dead toggle can be used where the appearance of a checkbox or radio is needed - but for accessibility purposes an actual input element should not be present.
1530
- *
1531
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)
1532
- *
1533
- * ## Attributes & Properties
1534
- *
1535
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1536
- *
1537
- * - `type`: undefined
1538
- * - `checked`: undefined
1539
- * - `indeterminate`: undefined
1540
- * - `invalid`: undefined
1541
- * - `disabled`: undefined
1542
- */
1543
- "w-dead-toggle": Partial<WarpDeadToggleProps & BaseProps<WarpDeadToggle> & BaseEvents>;
1544
-
1545
-
1546
- /**
1547
- *
1548
- *
1549
- * ## Attributes & Properties
1550
- *
1551
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1552
- *
1553
- * - `selected-page`/`selectedPage`: Currently selected page (1-based index)
1554
- * - `page-count`/`pageCount`: Total number of pages
1555
- */
1556
- "w-pageindicator": Partial<WarpPageIndicatorProps & BaseProps<WarpPageIndicator> & BaseEvents>;
1557
-
1558
-
1559
- /**
1560
- * Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.
1561
- *
1562
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-pagination--docs)
1563
- *
1564
- * ## Attributes & Properties
1565
- *
1566
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1567
- *
1568
- * - `base-url`/`baseUrl`: undefined
1569
- * - `pages`: undefined
1570
- * - `current-page`/`currentPageNumber`: undefined
1571
- * - `visible-pages`/`visiblePages`: undefined
1572
- *
1573
- * ## Events
1574
- *
1575
- * Events that will be emitted by the component.
1576
- *
1577
- * - `page-click`: Triggered when a link button in the pagination is clicked. Contains the page number in `string` form.
1578
- */
1579
- "w-pagination": Partial<WarpPaginationProps & BaseProps<WarpPagination> & BaseEvents>;
1580
-
1581
-
1582
- /**
1583
- *
1584
- *
1585
- * ## Attributes & Properties
1586
- *
1587
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1588
- *
1589
- * - `form`: The string pointing to a form's id.
1590
- * - `value`: The radio's value. When selected, the radio group will receive this value.
1591
- * - `appearance`: The radio's value. When selected, the radio group will receive this value.
1592
- * - `size`: The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
1593
- * attribute can typically be omitted.
1594
- * - `disabled`: Disables the radio.
1595
- * - `checked`: undefined (property only)
1596
- *
1597
- * ## Methods
1598
- *
1599
- * Methods that can be called to access component functionality.
1600
- *
1601
- * - `setValue() => void`: undefined
1602
- */
1603
- "w-radio": Partial<WRadioProps & BaseProps<WRadio> & BaseEvents>;
1604
-
1605
-
1606
- /**
1607
- *
1608
- *
1609
- * ## Attributes & Properties
1610
- *
1611
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1612
- *
1613
- * - `label`: The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
1614
- * instead.
1615
- * - `hint`: The radio groups's hint. If you need to display HTML, use the `hint` slot instead.
1616
- * - `name`: The name of the radio group, submitted as a name/value pair with form data.
1617
- * - `disabled`: Disables the radio group and all child radios.
1618
- * - `orientation`: The orientation in which to show radio items.
1619
- * - `value`/`defaultValue`: The default value of the form control. Primarily used for resetting the form control.
1620
- * - `size`: The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden.
1621
- * - `required`: Ensures a child radio is checked before allowing the containing form to submit.
1622
- * - `with-label`/`withLabel`: Used for SSR. if true, will show slotted label on initial render.
1623
- * - `with-hint`/`withHint`: Used for SSR. if true, will show slotted hint on initial render.
1624
- * - `hasRadioButtons`: undefined (property only)
1625
- * - `defaultSlot`: undefined (property only)
1626
- * - `value`: The current value of the radio group, submitted as a name/value pair with form data. (property only)
1627
- * - `validationTarget`: We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on
1628
- * the first radio element. (property only) (readonly)
1629
- *
1630
- * ## Events
1631
- *
1632
- * Events that will be emitted by the component.
1633
- *
1634
- * - `input`: undefined
1635
- * - `change`: undefined
1636
- *
1637
- * ## Slots
1638
- *
1639
- * Areas where markup can be added to the component.
1640
- *
1641
- * - `label`: Alternative to the `label` attribute should you need custom HTML.
1642
- *
1643
- * ## Methods
1644
- *
1645
- * Methods that can be called to access component functionality.
1646
- *
1647
- * - `formResetCallback(args: Parameters<BaseFormAssociatedElement['formResetCallback']>) => void`: undefined
1648
- * - `focus(options?: FocusOptions) => void`: Sets focus on the radio group.
1649
- */
1650
- "w-radio-group": Partial<WRadioGroupProps & BaseProps<WRadioGroup> & BaseEvents>;
1651
-
1652
-
1653
- /**
1654
- *
1655
- *
1656
- * ## Attributes & Properties
1657
- *
1658
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1659
- *
1660
- * - `title`: undefined
1661
- * - `name`: The name of the checkbox, submitted as a name/value pair with form data.
1662
- * - `value`: The value of the checkbox, submitted as a name/value pair with form data.
1663
- * - `size`: The checkbox's size.
1664
- * - `disabled`: Disables the checkbox.
1665
- * - `indeterminate`: Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
1666
- * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
1667
- * - `checked`/`defaultChecked`: The default value of the form control. Primarily used for resetting the form control.
1668
- * - `form`: By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
1669
- * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
1670
- * the same document or shadow root for this to work.
1671
- * - `required`: Makes the checkbox a required field.
1672
- * - `hint`: The checkbox's hint. If you need to display HTML, use the `hint` slot instead.
1673
- * - `input`: undefined (property only)
1674
- * - `checked`: Draws the checkbox in a checked state. (property only)
1675
- *
1676
- * ## Events
1677
- *
1678
- * Events that will be emitted by the component.
1679
- *
1680
- * - `change`: undefined
1681
- *
1682
- * ## Methods
1683
- *
1684
- * Methods that can be called to access component functionality.
1685
- *
1686
- * - `handleDefaultCheckedChange() => void`: undefined
1687
- * - `handleValueOrCheckedChange() => void`: undefined
1688
- * - `handleStateChange() => void`: undefined
1689
- * - `handleDisabledChange() => void`: undefined
1690
- * - `formResetCallback() => void`: undefined
1691
- * - `click() => void`: Simulates a click on the checkbox.
1692
- * - `focus(options?: FocusOptions) => void`: Sets focus on the checkbox.
1693
- * - `blur() => void`: Removes focus from the checkbox.
1694
- */
1695
- "w-checkbox": Partial<WCheckboxProps & BaseProps<WCheckbox> & BaseEvents>;
1696
-
1697
-
1698
- /**
1699
- *
1700
- */
1701
- "w-checkbox-group": Partial<WCheckboxGroupProps & BaseProps<WCheckboxGroup> & BaseEvents>;
1702
-
1703
-
1704
- /**
1705
- * Component to place inside a `<w-slider>`.
1706
- *
1707
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
1708
- *
1709
- * ## Attributes & Properties
1710
- *
1711
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1712
- *
1713
- * - `aria-label`/`ariaLabel`: undefined
1714
- * - `aria-description`/`ariaDescription`: undefined
1715
- * - `label`: undefined
1716
- * - `name`: undefined
1717
- * - `value`: undefined
1718
- * - `disabled`: undefined
1719
- * - `invalid`: undefined
1720
- * - `allowValuesOutsideRange`: Set by `<w-slider>` (property only)
1721
- * - `markers`: Set by `<w-slider>` (property only)
1722
- * - `required`: Set by `<w-slider>` (property only)
1723
- * - `step`: Set by `<w-slider>` (property only)
1724
- * - `min`: Set by `<w-slider>` (property only)
1725
- * - `max`: Set by `<w-slider>` (property only)
1726
- * - `suffix`: Set by `<w-slider>` (property only)
1727
- * - `formatter`: JS hook to help you format the numeric value how you want. (property only)
1728
- * - `range`: undefined (property only)
1729
- * - `textfield`: undefined (property only)
1730
- * - `boundaryValue`: undefined (property only) (readonly)
1731
- * - `textFieldDisplayValue`: Value to display in the textfield (shows boundary when focused on empty value) (property only) (readonly)
1732
- * - `tooltipDisplayValue`: Value to display in the tooltip (property only) (readonly)
1733
- *
1734
- * ## Events
1735
- *
1736
- * Events that will be emitted by the component.
1737
- *
1738
- * - `slidervalidity`: undefined
1739
- *
1740
- * ## Methods
1741
- *
1742
- * Methods that can be called to access component functionality.
1743
- *
1744
- * - `resetFormControl() => void`: undefined
1745
- * - `updateFieldAfterValidation() => void`: undefined
1746
- */
1747
- "w-slider-thumb": Partial<WarpSliderThumbProps & BaseProps<WarpSliderThumb> & BaseEvents>;
1748
-
1749
-
1750
- /**
1751
- * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
1752
- *
1753
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
1754
- *
1755
- * ## Attributes & Properties
1756
- *
1757
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1758
- *
1759
- * - `label`: The slider fieldset label. Required for proper accessibility.
1760
- *
1761
- * If you need to display HTML, use the `label` slot instead.
1762
- * - `disabled`: undefined
1763
- * - `allow-values-outside-range`/`allowValuesOutsideRange`: undefined
1764
- * - `error`: undefined
1765
- * - `help-text`/`helpText`: undefined
1766
- * - `invalid`: undefined
1767
- * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit.
1768
- * - `min`: undefined
1769
- * - `max`: undefined
1770
- * - `markers`: Pass a value similar to step to create visual markers at that interval
1771
- * - `step`: undefined
1772
- * - `suffix`: Suffix used in text input fields and for the min and max values of the slider.
1773
- * - `formatter`: Function to format the to- and from labels and value in the slider thumb tooltip. (property only)
1774
- * - `_invalidMessage`: undefined (property only)
1775
- * - `_hasInternalError`: undefined (property only)
1776
- * - `edgeMin`: undefined (property only) (readonly)
1777
- * - `edgeMax`: undefined (property only) (readonly)
1778
- * - `componentHasError`: undefined (property only) (readonly)
1779
- * - `errorText`: undefined (property only) (readonly)
1780
- *
1781
- * ## Slots
1782
- *
1783
- * Areas where markup can be added to the component.
1784
- *
1785
- * - `(default)`: For single sliders place a `<w-slider-thumb>` in the default slot.
1786
- * - `label`: Label for the slider or range slider as a whole.
1787
- * - `description`: Optional description between the label and slider.
1788
- * - `from`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
1789
- * - `to`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
1790
- */
1791
- "w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
1792
-
1793
-
1794
- /**
1795
- * Steps are used to show progress through a process or to guide users through a multi-step task.
1796
- *
1797
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)
1798
- *
1799
- * ## Attributes & Properties
1800
- *
1801
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1802
- *
1803
- * - `horizontal`: undefined
1804
- * - `right`: undefined
1805
- *
1806
- * ## Methods
1807
- *
1808
- * Methods that can be called to access component functionality.
1809
- *
1810
- * - `updateStepsContext() => void`: undefined
1811
- */
1812
- "w-step-indicator": Partial<WarpStepIndicatorProps & BaseProps<WarpStepIndicator> & BaseEvents>;
1813
-
1814
-
1815
- /**
1816
- * Individual step component that shows a single step in a process
1817
- *
1818
- * ## Attributes & Properties
1819
- *
1820
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1821
- *
1822
- * - `active`: undefined
1823
- * - `completed`: undefined
1824
- *
1825
- * ## Methods
1826
- *
1827
- * Methods that can be called to access component functionality.
1828
- *
1829
- * - `setContext(context: StepsContext) => void`: undefined
1830
- * - `getAriaLabel() => void`: undefined
1831
- */
1832
- "w-step": Partial<WarpStepProps & BaseProps<WarpStep> & BaseEvents>;
1833
-
1834
-
1835
1145
  /**
1836
1146
  *
1837
1147
  *
@@ -1860,79 +1170,37 @@ export type WarpTextareaProps = {
1860
1170
 
1861
1171
 
1862
1172
  /**
1863
- * Individual tab component used within w-tabs container.
1864
- *
1865
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
1866
- *
1867
- * ## Attributes & Properties
1868
- *
1869
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1870
- *
1871
- * - `name`: undefined
1872
- * - `label`: undefined
1873
- * - `active`: undefined
1874
- * - `over`: undefined
1875
- * - `tab-class`/`tabClass`: undefined
1876
- */
1877
- "w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
1878
-
1879
-
1880
- /**
1881
- * Tabs are used to organize content by grouping similar information on the same page.
1882
- *
1883
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
1884
- *
1885
- * ## Attributes & Properties
1886
- *
1887
- * Component attributes and properties that can be applied to the element or by using JavaScript.
1888
- *
1889
- * - `active`: undefined
1890
- * - `tab-class`/`tabClass`: undefined
1891
- * - `tabs`: undefined (property only) (readonly)
1892
- * - `activeTab`: undefined (property only) (readonly)
1893
- *
1894
- * ## Events
1895
- *
1896
- * Events that will be emitted by the component.
1897
- *
1898
- * - `change`: undefined
1899
- */
1900
- "w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & BaseEvents>;
1901
-
1902
-
1903
- /**
1904
- * A single line text input element.
1173
+ * A combobox element for text input with selectable options.
1905
1174
  *
1906
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
1175
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
1907
1176
  *
1908
1177
  * ## Attributes & Properties
1909
1178
  *
1910
1179
  * Component attributes and properties that can be applied to the element or by using JavaScript.
1911
1180
  *
1912
- * - `disabled`: undefined
1913
- * - `invalid`: undefined
1914
- * - `label`: undefined
1915
- * - `help-text`/`helpText`: undefined
1916
- * - `maximum-rows`/`maxRows`: undefined
1917
- * - `minimum-rows`/`minRows`: undefined
1918
- * - `name`: undefined
1919
- * - `placeholder`: undefined
1920
- * - `read-only`/`readOnly`: undefined
1921
- * - `readonly`: undefined
1922
- * - `required`: undefined
1923
- * - `value`: undefined
1924
- * - `optional`: undefined
1925
- * - `minHeight`: undefined (property only)
1926
- * - `maxHeight`: undefined (property only)
1181
+ * - `options`: The available options to select from
1182
+ * - `label`: Label above input
1183
+ * - `placeholder`: Input placeholder
1184
+ * - `value`: The input value
1185
+ * - `open-on-focus`/`openOnFocus`: Whether the popover opens when focus is on the text field
1186
+ * - `select-on-blur`/`selectOnBlur`: Select active option on blur
1187
+ * - `match-text-segments`/`matchTextSegments`: Whether the matching text segments in the options should be highlighted
1188
+ * - `disable-static-filtering`/`disableStaticFiltering`: Disable client-side static filtering
1189
+ * - `invalid`: Renders the input field in an invalid state
1190
+ * - `help-text`/`helpText`: The content to display as the help text
1191
+ * - `disabled`: Whether the element is disabled
1192
+ * - `required`: Whether the element is required
1193
+ * - `optional`: Whether to show optional text
1194
+ * - `name`: Name attribute for form submission
1195
+ * - `autocomplete`: Autocomplete attribute for the input field
1927
1196
  *
1928
1197
  * ## Methods
1929
1198
  *
1930
1199
  * Methods that can be called to access component functionality.
1931
1200
  *
1932
1201
  * - `resetFormControl() => void`: undefined
1933
- * - `handler(e: InputEvent) => void`: undefined
1934
1202
  */
1935
- "w-textarea": Partial<WarpTextareaProps & BaseProps<WarpTextarea> & BaseEvents>;
1203
+ "w-combobox": Partial<WarpComboboxProps & BaseProps<WarpCombobox> & BaseEvents>;
1936
1204
  }
1937
1205
 
1938
1206
  export type CustomCssProperties = {