@warp-ds/elements 2.4.0-next.4 → 2.4.0-next.5

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