@warp-ds/elements 2.2.0-next.12 → 2.2.0-next.14

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 (62) hide show
  1. package/dist/custom-elements.json +2082 -920
  2. package/dist/packages/attention/index.js +11 -11
  3. package/dist/packages/attention/index.js.map +4 -4
  4. package/dist/packages/breadcrumbs/index.js.map +1 -1
  5. package/dist/packages/combobox/combobox.stories.d.ts +14 -0
  6. package/dist/packages/combobox/combobox.stories.js +95 -0
  7. package/dist/packages/combobox/index.d.ts +100 -0
  8. package/dist/packages/combobox/index.js +2492 -0
  9. package/dist/packages/combobox/index.js.map +7 -0
  10. package/dist/packages/combobox/locales/da/messages.d.mts +1 -0
  11. package/dist/packages/combobox/locales/da/messages.mjs +1 -0
  12. package/dist/packages/combobox/locales/en/messages.d.mts +1 -0
  13. package/dist/packages/combobox/locales/en/messages.mjs +1 -0
  14. package/dist/packages/combobox/locales/fi/messages.d.mts +1 -0
  15. package/dist/packages/combobox/locales/fi/messages.mjs +1 -0
  16. package/dist/packages/combobox/locales/nb/messages.d.mts +1 -0
  17. package/dist/packages/combobox/locales/nb/messages.mjs +1 -0
  18. package/dist/packages/combobox/locales/sv/messages.d.mts +1 -0
  19. package/dist/packages/combobox/locales/sv/messages.mjs +1 -0
  20. package/dist/packages/combobox/styles.d.ts +1 -0
  21. package/dist/packages/combobox/styles.js +2 -0
  22. package/dist/packages/expandable/index.d.ts +2 -0
  23. package/dist/packages/expandable/index.js +20 -11
  24. package/dist/packages/expandable/index.js.map +4 -4
  25. package/dist/packages/slider/Slider.d.ts +2 -0
  26. package/dist/packages/slider/Slider.js +8 -0
  27. package/dist/packages/slider/SliderThumb.d.ts +2 -0
  28. package/dist/packages/slider/SliderThumb.js +8 -0
  29. package/dist/packages/slider/index.d.ts +2 -0
  30. package/dist/packages/slider/index.js +2791 -0
  31. package/dist/packages/slider/index.js.map +7 -0
  32. package/dist/packages/slider/oddbird-css-anchor-positioning.d.ts +2 -0
  33. package/dist/packages/slider/oddbird-css-anchor-positioning.js +3 -0
  34. package/dist/packages/slider/slider-thumb.d.ts +60 -0
  35. package/dist/packages/slider/slider-thumb.js +2663 -0
  36. package/dist/packages/slider/slider-thumb.js.map +7 -0
  37. package/dist/packages/slider/slider.d.ts +51 -0
  38. package/dist/packages/slider/slider.js +2569 -0
  39. package/dist/packages/slider/slider.js.map +7 -0
  40. package/dist/packages/slider/slider.stories.d.ts +17 -0
  41. package/dist/packages/slider/slider.stories.js +203 -0
  42. package/dist/packages/slider/slider.test.d.ts +4 -0
  43. package/dist/packages/slider/slider.test.js +62 -0
  44. package/dist/packages/slider/styles/w-slider-thumb.styles.d.ts +1 -0
  45. package/dist/packages/slider/styles/w-slider-thumb.styles.js +132 -0
  46. package/dist/packages/slider/styles/w-slider.styles.d.ts +1 -0
  47. package/dist/packages/slider/styles/w-slider.styles.js +118 -0
  48. package/dist/packages/slider/styles.d.ts +1 -0
  49. package/dist/packages/slider/styles.js +2 -0
  50. package/dist/packages/textfield/index.d.ts +12 -1
  51. package/dist/packages/textfield/index.js +77 -28
  52. package/dist/packages/textfield/index.js.map +4 -4
  53. package/dist/packages/textfield/styles/w-textfield.styles.d.ts +1 -0
  54. package/dist/packages/textfield/styles/w-textfield.styles.js +46 -0
  55. package/dist/packages/textfield/styles.js +1 -1
  56. package/dist/packages/textfield/textfield.stories.d.ts +1 -0
  57. package/dist/packages/textfield/textfield.stories.js +19 -0
  58. package/dist/packages/textfield/textfield.test.d.ts +1 -0
  59. package/dist/packages/textfield/textfield.test.js +62 -3
  60. package/dist/vscode.html-custom-data.json +148 -24
  61. package/dist/web-types.json +382 -51
  62. package/package.json +5 -3
package/dist/custom-elements.json CHANGED
@@ -1588,48 +1588,49 @@
1588
1588
  },
1589
1589
  {
1590
1590
  "kind": "javascript-module",
1591
- "path": "packages/datepicker/datepicker.ts",
1591
+ "path": "packages/combobox/index.ts",
1592
1592
  "declarations": [
1593
+ {
1594
+ "kind": "variable",
1595
+ "name": "ccCombobox",
1596
+ "type": {
1597
+ "text": "object"
1598
+ },
1599
+ "default": "{ wrapper: 'relative', base: 'absolute left-0 right-0 s-bg pb-4 rounded-8 overflow-hidden shadow-m', listbox: 'm-0 p-0 select-none list-none', option: 'block cursor-pointer p-8', optionUnselected: 'hover:s-bg-hover', optionSelected: 's-bg-selected hover:s-bg-selected-hover', textMatch: 'font-bold', a11y: 'sr-only', }"
1600
+ },
1593
1601
  {
1594
1602
  "kind": "class",
1595
- "description": "An input for dates.\n\nUses the `lang` attribute on either the element or on `<html>` to determine the locale options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)",
1596
- "name": "WarpDatepicker",
1603
+ "description": "A combobox element for text input with selectable options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)",
1604
+ "name": "WarpCombobox",
1597
1605
  "members": [
1598
1606
  {
1599
1607
  "kind": "field",
1600
- "name": "shadowRootOptions",
1608
+ "name": "options",
1601
1609
  "type": {
1602
- "text": "object"
1610
+ "text": "ComboboxOption[]"
1603
1611
  },
1604
- "static": true,
1605
- "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
1612
+ "default": "[]",
1613
+ "description": "The available options to select from",
1614
+ "attribute": "options"
1606
1615
  },
1607
1616
  {
1608
1617
  "kind": "field",
1609
1618
  "name": "label",
1610
1619
  "type": {
1611
- "text": "string"
1620
+ "text": "string | undefined"
1612
1621
  },
1622
+ "description": "Label above input",
1613
1623
  "attribute": "label",
1614
1624
  "reflects": true
1615
1625
  },
1616
1626
  {
1617
1627
  "kind": "field",
1618
- "name": "lang",
1619
- "type": {
1620
- "text": "string"
1621
- },
1622
- "description": "Takes precedence over the `<html>` lang attribute.",
1623
- "attribute": "lang",
1624
- "reflects": true
1625
- },
1626
- {
1627
- "kind": "field",
1628
- "name": "name",
1628
+ "name": "placeholder",
1629
1629
  "type": {
1630
- "text": "string"
1630
+ "text": "string | undefined"
1631
1631
  },
1632
- "attribute": "name",
1632
+ "description": "Input placeholder",
1633
+ "attribute": "placeholder",
1633
1634
  "reflects": true
1634
1635
  },
1635
1636
  {
@@ -1638,590 +1639,1160 @@
1638
1639
  "type": {
1639
1640
  "text": "string"
1640
1641
  },
1642
+ "default": "''",
1643
+ "description": "The input value",
1641
1644
  "attribute": "value",
1642
1645
  "reflects": true
1643
1646
  },
1644
1647
  {
1645
1648
  "kind": "field",
1646
- "name": "headerFormat",
1649
+ "name": "openOnFocus",
1647
1650
  "type": {
1648
- "text": "string"
1651
+ "text": "boolean"
1649
1652
  },
1650
- "default": "'MMMM yyyy'",
1651
- "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1652
- "attribute": "header-format"
1653
+ "default": "false",
1654
+ "description": "Whether the popover opens when focus is on the text field",
1655
+ "attribute": "open-on-focus"
1653
1656
  },
1654
1657
  {
1655
1658
  "kind": "field",
1656
- "name": "weekdayFormat",
1659
+ "name": "selectOnBlur",
1657
1660
  "type": {
1658
- "text": "string"
1661
+ "text": "boolean"
1659
1662
  },
1660
- "default": "'EEEEEE'",
1661
- "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1662
- "attribute": "weekday-format"
1663
+ "default": "true",
1664
+ "description": "Select active option on blur",
1665
+ "attribute": "select-on-blur"
1663
1666
  },
1664
1667
  {
1665
1668
  "kind": "field",
1666
- "name": "isDayDisabled",
1669
+ "name": "matchTextSegments",
1667
1670
  "type": {
1668
- "text": "(day: Date) => boolean"
1671
+ "text": "boolean"
1669
1672
  },
1670
- "description": "Lets you control if a date in the calendar should be disabled.\n\nThis needs to be set on the element instance in JavaScript, not as an HTML attribute."
1673
+ "default": "false",
1674
+ "description": "Whether the matching text segments in the options should be highlighted",
1675
+ "attribute": "match-text-segments"
1671
1676
  },
1672
1677
  {
1673
1678
  "kind": "field",
1674
- "name": "dayFormat",
1679
+ "name": "disableStaticFiltering",
1675
1680
  "type": {
1676
- "text": "string"
1681
+ "text": "boolean"
1677
1682
  },
1678
- "default": "'PPPP'",
1679
- "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1680
- "attribute": "day-format"
1683
+ "default": "false",
1684
+ "description": "Disable client-side static filtering",
1685
+ "attribute": "disable-static-filtering"
1681
1686
  },
1682
1687
  {
1683
1688
  "kind": "field",
1684
- "name": "isCalendarOpen",
1689
+ "name": "invalid",
1685
1690
  "type": {
1686
1691
  "text": "boolean"
1687
1692
  },
1688
- "default": "false"
1693
+ "default": "false",
1694
+ "description": "Renders the input field in an invalid state",
1695
+ "attribute": "invalid",
1696
+ "reflects": true
1689
1697
  },
1690
1698
  {
1691
1699
  "kind": "field",
1692
- "name": "navigationDate",
1700
+ "name": "helpText",
1693
1701
  "type": {
1694
- "text": "Date"
1695
- }
1702
+ "text": "string | undefined"
1703
+ },
1704
+ "description": "The content to display as the help text",
1705
+ "attribute": "help-text",
1706
+ "reflects": true
1696
1707
  },
1697
1708
  {
1698
1709
  "kind": "field",
1699
- "name": "selectedDate",
1710
+ "name": "disabled",
1700
1711
  "type": {
1701
- "text": "Date | null"
1712
+ "text": "boolean"
1702
1713
  },
1703
- "readonly": true
1714
+ "default": "false",
1715
+ "description": "Whether the element is disabled",
1716
+ "attribute": "disabled",
1717
+ "reflects": true
1704
1718
  },
1705
1719
  {
1706
1720
  "kind": "field",
1707
- "name": "month",
1708
- "readonly": true
1721
+ "name": "required",
1722
+ "type": {
1723
+ "text": "boolean"
1724
+ },
1725
+ "default": "false",
1726
+ "description": "Whether the element is required",
1727
+ "attribute": "required",
1728
+ "reflects": true
1709
1729
  },
1710
1730
  {
1711
1731
  "kind": "field",
1712
- "name": "weeks",
1713
- "readonly": true
1732
+ "name": "optional",
1733
+ "type": {
1734
+ "text": "boolean"
1735
+ },
1736
+ "default": "false",
1737
+ "description": "Whether to show optional text",
1738
+ "attribute": "optional",
1739
+ "reflects": true
1714
1740
  },
1715
1741
  {
1716
1742
  "kind": "field",
1717
- "name": "calendar",
1743
+ "name": "containerClassName",
1718
1744
  "type": {
1719
- "text": "HTMLDivElement"
1720
- }
1745
+ "text": "string | undefined"
1746
+ },
1747
+ "description": "Additional container styling",
1748
+ "attribute": "class-name",
1749
+ "reflects": true
1721
1750
  },
1722
1751
  {
1723
1752
  "kind": "field",
1724
- "name": "input",
1753
+ "name": "listClassName",
1725
1754
  "type": {
1726
- "text": "HTMLInputElement"
1727
- }
1755
+ "text": "string | undefined"
1756
+ },
1757
+ "description": "Additional list styling",
1758
+ "attribute": "list-class-name",
1759
+ "reflects": true
1728
1760
  },
1729
1761
  {
1730
1762
  "kind": "field",
1731
- "name": "toggleButton",
1763
+ "name": "name",
1732
1764
  "type": {
1733
- "text": "HTMLButtonElement"
1734
- }
1765
+ "text": "string | undefined"
1766
+ },
1767
+ "description": "Name attribute for form submission",
1768
+ "attribute": "name",
1769
+ "reflects": true
1735
1770
  },
1736
1771
  {
1737
1772
  "kind": "field",
1738
- "name": "wrapper",
1739
- "type": {
1740
- "text": "HTMLDivElement"
1741
- }
1773
+ "name": "_listboxId",
1774
+ "privacy": "private",
1775
+ "readonly": true
1742
1776
  },
1743
1777
  {
1744
1778
  "kind": "field",
1745
- "name": "previousMonthButton",
1746
- "type": {
1747
- "text": "HTMLButtonElement"
1748
- },
1749
- "description": "This is the first focusable element, needed for the modal focus trap.\n\nDon't cache this and other `@query` fields from inside the calendar modal.\nThey work the first time, but once the calendar is closed and reopened\nthe query will point to an element that doesn't exist anymore."
1779
+ "name": "_id",
1780
+ "privacy": "private",
1781
+ "readonly": true
1750
1782
  },
1751
1783
  {
1752
1784
  "kind": "field",
1753
- "name": "todayCell",
1754
- "type": {
1755
- "text": "HTMLTableCellElement"
1756
- }
1785
+ "name": "_helpId",
1786
+ "privacy": "private",
1787
+ "readonly": true
1757
1788
  },
1758
1789
  {
1759
1790
  "kind": "field",
1760
- "name": "selectedCell",
1761
- "type": {
1762
- "text": "HTMLTableCellElement"
1763
- }
1791
+ "name": "_navigationValueOrInputValue",
1792
+ "privacy": "private",
1793
+ "readonly": true
1764
1794
  },
1765
1795
  {
1766
1796
  "kind": "method",
1767
- "name": "#toggleCalendarOpen",
1797
+ "name": "_createOptionsWithIdAndMatch",
1768
1798
  "privacy": "private",
1799
+ "return": {
1800
+ "type": {
1801
+ "text": "OptionWithIdAndMatch[]"
1802
+ }
1803
+ },
1769
1804
  "parameters": [
1770
1805
  {
1771
- "name": "e",
1806
+ "name": "options",
1772
1807
  "type": {
1773
- "text": "MouseEvent | KeyboardEvent"
1808
+ "text": "ComboboxOption[]"
1809
+ }
1810
+ },
1811
+ {
1812
+ "name": "currentInputValue",
1813
+ "type": {
1814
+ "text": "string"
1774
1815
  }
1775
1816
  }
1776
- ]
1817
+ ],
1818
+ "description": "Generate options with unique IDs and match information"
1777
1819
  },
1778
1820
  {
1779
1821
  "kind": "method",
1780
- "name": "#nextMonth",
1781
- "privacy": "private"
1822
+ "name": "_getAriaText",
1823
+ "privacy": "private",
1824
+ "parameters": [
1825
+ {
1826
+ "name": "options",
1827
+ "type": {
1828
+ "text": "OptionWithIdAndMatch[]"
1829
+ }
1830
+ },
1831
+ {
1832
+ "name": "value",
1833
+ "type": {
1834
+ "text": "string"
1835
+ }
1836
+ }
1837
+ ],
1838
+ "description": "Get ARIA text for screen readers"
1782
1839
  },
1783
1840
  {
1784
1841
  "kind": "method",
1785
- "name": "#previousMonth",
1786
- "privacy": "private"
1842
+ "name": "_getOptionClasses",
1843
+ "privacy": "private",
1844
+ "parameters": [
1845
+ {
1846
+ "name": "option",
1847
+ "type": {
1848
+ "text": "OptionWithIdAndMatch"
1849
+ }
1850
+ }
1851
+ ],
1852
+ "description": "Get option classes"
1787
1853
  },
1788
1854
  {
1789
1855
  "kind": "method",
1790
- "name": "#dispatchChangeEvent",
1791
- "privacy": "private"
1856
+ "name": "_handleKeyDown",
1857
+ "privacy": "private",
1858
+ "parameters": [
1859
+ {
1860
+ "name": "e",
1861
+ "type": {
1862
+ "text": "KeyboardEvent"
1863
+ }
1864
+ }
1865
+ ],
1866
+ "description": "Handle keyboard navigation"
1792
1867
  },
1793
1868
  {
1794
1869
  "kind": "method",
1795
- "name": "#onInput",
1870
+ "name": "_findAndSetActiveOption",
1796
1871
  "privacy": "private",
1797
1872
  "parameters": [
1798
1873
  {
1799
1874
  "name": "e",
1800
1875
  "type": {
1801
- "text": "InputEvent"
1876
+ "text": "KeyboardEvent"
1802
1877
  }
1803
1878
  }
1804
- ]
1879
+ ],
1880
+ "description": "Find and set active option based on keyboard navigation"
1805
1881
  },
1806
1882
  {
1807
1883
  "kind": "method",
1808
- "name": "#onInputClick",
1884
+ "name": "_handleSelect",
1885
+ "privacy": "private",
1886
+ "parameters": [
1887
+ {
1888
+ "name": "option",
1889
+ "type": {
1890
+ "text": "OptionWithIdAndMatch"
1891
+ }
1892
+ }
1893
+ ],
1894
+ "description": "Handle option selection"
1895
+ },
1896
+ {
1897
+ "kind": "method",
1898
+ "name": "_handleChange",
1899
+ "privacy": "private",
1900
+ "parameters": [
1901
+ {
1902
+ "name": "newValue",
1903
+ "type": {
1904
+ "text": "string"
1905
+ }
1906
+ }
1907
+ ],
1908
+ "description": "Handle input change"
1909
+ },
1910
+ {
1911
+ "kind": "method",
1912
+ "name": "_handleFocus",
1913
+ "privacy": "private",
1914
+ "description": "Handle input focus"
1915
+ },
1916
+ {
1917
+ "kind": "method",
1918
+ "name": "_handleBlur",
1809
1919
  "privacy": "private",
1810
1920
  "parameters": [
1811
1921
  {
1812
1922
  "name": "e",
1813
1923
  "type": {
1814
- "text": "PointerEvent"
1924
+ "text": "FocusEvent"
1815
1925
  }
1816
1926
  }
1817
- ]
1927
+ ],
1928
+ "description": "Handle input blur"
1818
1929
  },
1819
1930
  {
1820
1931
  "kind": "method",
1821
- "name": "#onInputKeyDown",
1932
+ "name": "_handleOptionClick",
1822
1933
  "privacy": "private",
1823
1934
  "parameters": [
1824
1935
  {
1825
1936
  "name": "e",
1826
1937
  "type": {
1827
- "text": "KeyboardEvent"
1938
+ "text": "MouseEvent"
1939
+ }
1940
+ },
1941
+ {
1942
+ "name": "option",
1943
+ "type": {
1944
+ "text": "OptionWithIdAndMatch"
1828
1945
  }
1829
1946
  }
1830
- ]
1947
+ ],
1948
+ "description": "Handle option click"
1831
1949
  },
1832
1950
  {
1833
1951
  "kind": "method",
1834
- "name": "#onCalendarKeyDown",
1952
+ "name": "_handleContainerBlur",
1835
1953
  "privacy": "private",
1836
1954
  "parameters": [
1837
1955
  {
1838
1956
  "name": "e",
1839
1957
  "type": {
1840
- "text": "KeyboardEvent"
1958
+ "text": "FocusEvent"
1841
1959
  }
1842
1960
  }
1843
- ]
1961
+ ],
1962
+ "description": "Handle container blur"
1844
1963
  },
1845
1964
  {
1846
1965
  "kind": "method",
1847
- "name": "#onCalendarSelect",
1966
+ "name": "_renderTextMatch",
1848
1967
  "privacy": "private",
1849
1968
  "parameters": [
1850
1969
  {
1851
- "name": "event",
1970
+ "name": "display",
1852
1971
  "type": {
1853
- "text": "MouseEvent | KeyboardEvent"
1972
+ "text": "string"
1973
+ }
1974
+ },
1975
+ {
1976
+ "name": "option",
1977
+ "type": {
1978
+ "text": "OptionWithIdAndMatch"
1854
1979
  }
1855
1980
  }
1856
- ]
1981
+ ],
1982
+ "description": "Render highlighted text match"
1857
1983
  }
1858
1984
  ],
1859
1985
  "attributes": [
1860
1986
  {
1861
- "name": "label",
1987
+ "name": "options",
1862
1988
  "type": {
1863
- "text": "string"
1989
+ "text": "ComboboxOption[]"
1864
1990
  },
1865
- "fieldName": "label"
1991
+ "default": "[]",
1992
+ "description": "The available options to select from",
1993
+ "fieldName": "options"
1866
1994
  },
1867
1995
  {
1868
- "name": "lang",
1996
+ "name": "label",
1869
1997
  "type": {
1870
- "text": "string"
1998
+ "text": "string | undefined"
1871
1999
  },
1872
- "description": "Takes precedence over the `<html>` lang attribute.",
1873
- "fieldName": "lang"
2000
+ "description": "Label above input",
2001
+ "fieldName": "label"
1874
2002
  },
1875
2003
  {
1876
- "name": "name",
2004
+ "name": "placeholder",
1877
2005
  "type": {
1878
- "text": "string"
2006
+ "text": "string | undefined"
1879
2007
  },
1880
- "fieldName": "name"
2008
+ "description": "Input placeholder",
2009
+ "fieldName": "placeholder"
1881
2010
  },
1882
2011
  {
1883
2012
  "name": "value",
1884
2013
  "type": {
1885
2014
  "text": "string"
1886
2015
  },
2016
+ "default": "''",
2017
+ "description": "The input value",
1887
2018
  "fieldName": "value"
1888
2019
  },
1889
2020
  {
1890
- "name": "header-format",
2021
+ "name": "open-on-focus",
1891
2022
  "type": {
1892
- "text": "string"
2023
+ "text": "boolean"
1893
2024
  },
1894
- "default": "'MMMM yyyy'",
1895
- "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1896
- "fieldName": "headerFormat"
2025
+ "default": "false",
2026
+ "description": "Whether the popover opens when focus is on the text field",
2027
+ "fieldName": "openOnFocus"
1897
2028
  },
1898
2029
  {
1899
- "name": "weekday-format",
2030
+ "name": "select-on-blur",
1900
2031
  "type": {
1901
- "text": "string"
2032
+ "text": "boolean"
1902
2033
  },
1903
- "default": "'EEEEEE'",
1904
- "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1905
- "fieldName": "weekdayFormat"
2034
+ "default": "true",
2035
+ "description": "Select active option on blur",
2036
+ "fieldName": "selectOnBlur"
1906
2037
  },
1907
2038
  {
1908
- "name": "day-format",
2039
+ "name": "match-text-segments",
1909
2040
  "type": {
1910
- "text": "string"
2041
+ "text": "boolean"
1911
2042
  },
1912
- "default": "'PPPP'",
1913
- "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
1914
- "fieldName": "dayFormat"
1915
- }
1916
- ],
1917
- "mixins": [
1918
- {
1919
- "name": "FormControlMixin",
1920
- "package": "@open-wc/form-control"
1921
- }
1922
- ],
1923
- "superclass": {
1924
- "name": "LitElement",
1925
- "package": "lit"
1926
- },
1927
- "tagName": "w-datepicker",
1928
- "customElement": true
1929
- }
1930
- ],
1931
- "exports": [
1932
- {
1933
- "kind": "custom-element-definition",
1934
- "name": "w-datepicker",
1935
- "declaration": {
1936
- "name": "WarpDatepicker",
1937
- "module": "packages/datepicker/datepicker.ts"
1938
- }
1939
- },
1940
- {
1941
- "kind": "js",
1942
- "name": "WarpDatepicker",
1943
- "declaration": {
1944
- "name": "WarpDatepicker",
1945
- "module": "packages/datepicker/datepicker.ts"
1946
- }
1947
- }
1948
- ]
1949
- },
1950
- {
1951
- "kind": "javascript-module",
1952
- "path": "packages/datepicker/index.ts",
1953
- "declarations": [],
1954
- "exports": [
1955
- {
1956
- "kind": "js",
1957
- "name": "*",
1958
- "declaration": {
1959
- "name": "*",
1960
- "package": "./datepicker.js"
1961
- }
1962
- }
1963
- ]
1964
- },
1965
- {
1966
- "kind": "javascript-module",
1967
- "path": "packages/dead-toggle/index.ts",
1968
- "declarations": [
1969
- {
1970
- "kind": "class",
1971
- "description": "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.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)",
1972
- "name": "WarpDeadToggle",
1973
- "members": [
2043
+ "default": "false",
2044
+ "description": "Whether the matching text segments in the options should be highlighted",
2045
+ "fieldName": "matchTextSegments"
2046
+ },
1974
2047
  {
1975
- "kind": "field",
1976
- "name": "type",
2048
+ "name": "disable-static-filtering",
1977
2049
  "type": {
1978
- "text": "'radio' | 'checkbox'"
2050
+ "text": "boolean"
1979
2051
  },
1980
- "default": "'radio'",
1981
- "attribute": "type"
2052
+ "default": "false",
2053
+ "description": "Disable client-side static filtering",
2054
+ "fieldName": "disableStaticFiltering"
1982
2055
  },
1983
2056
  {
1984
- "kind": "field",
1985
- "name": "checked",
2057
+ "name": "invalid",
1986
2058
  "type": {
1987
2059
  "text": "boolean"
1988
2060
  },
1989
2061
  "default": "false",
1990
- "attribute": "checked",
1991
- "reflects": true
2062
+ "description": "Renders the input field in an invalid state",
2063
+ "fieldName": "invalid"
1992
2064
  },
1993
2065
  {
1994
- "kind": "field",
1995
- "name": "indeterminate",
2066
+ "name": "help-text",
1996
2067
  "type": {
1997
- "text": "boolean"
2068
+ "text": "string | undefined"
1998
2069
  },
1999
- "default": "false",
2000
- "attribute": "indeterminate",
2001
- "reflects": true
2070
+ "description": "The content to display as the help text",
2071
+ "fieldName": "helpText"
2002
2072
  },
2003
2073
  {
2004
- "kind": "field",
2005
- "name": "invalid",
2074
+ "name": "disabled",
2006
2075
  "type": {
2007
2076
  "text": "boolean"
2008
2077
  },
2009
2078
  "default": "false",
2010
- "attribute": "invalid",
2011
- "reflects": true
2012
- }
2013
- ],
2014
- "attributes": [
2079
+ "description": "Whether the element is disabled",
2080
+ "fieldName": "disabled"
2081
+ },
2015
2082
  {
2016
- "name": "type",
2083
+ "name": "required",
2017
2084
  "type": {
2018
- "text": "'radio' | 'checkbox'"
2085
+ "text": "boolean"
2019
2086
  },
2020
- "default": "'radio'",
2021
- "fieldName": "type"
2087
+ "default": "false",
2088
+ "description": "Whether the element is required",
2089
+ "fieldName": "required"
2022
2090
  },
2023
2091
  {
2024
- "name": "checked",
2092
+ "name": "optional",
2025
2093
  "type": {
2026
2094
  "text": "boolean"
2027
2095
  },
2028
2096
  "default": "false",
2029
- "fieldName": "checked"
2097
+ "description": "Whether to show optional text",
2098
+ "fieldName": "optional"
2030
2099
  },
2031
2100
  {
2032
- "name": "indeterminate",
2101
+ "name": "class-name",
2033
2102
  "type": {
2034
- "text": "boolean"
2103
+ "text": "string | undefined"
2035
2104
  },
2036
- "default": "false",
2037
- "fieldName": "indeterminate"
2105
+ "description": "Additional container styling",
2106
+ "fieldName": "containerClassName"
2038
2107
  },
2039
2108
  {
2040
- "name": "invalid",
2109
+ "name": "list-class-name",
2041
2110
  "type": {
2042
- "text": "boolean"
2111
+ "text": "string | undefined"
2043
2112
  },
2044
- "default": "false",
2045
- "fieldName": "invalid"
2113
+ "description": "Additional list styling",
2114
+ "fieldName": "listClassName"
2115
+ },
2116
+ {
2117
+ "name": "name",
2118
+ "type": {
2119
+ "text": "string | undefined"
2120
+ },
2121
+ "description": "Name attribute for form submission",
2122
+ "fieldName": "name"
2046
2123
  }
2047
2124
  ],
2048
2125
  "superclass": {
2049
2126
  "name": "LitElement",
2050
2127
  "package": "lit"
2051
2128
  },
2052
- "tagName": "w-dead-toggle",
2129
+ "tagName": "w-combobox",
2053
2130
  "customElement": true
2054
2131
  }
2055
2132
  ],
2056
2133
  "exports": [
2057
2134
  {
2058
2135
  "kind": "js",
2059
- "name": "WarpDeadToggle",
2136
+ "name": "ccCombobox",
2060
2137
  "declaration": {
2061
- "name": "WarpDeadToggle",
2062
- "module": "packages/dead-toggle/index.ts"
2138
+ "name": "ccCombobox",
2139
+ "module": "packages/combobox/index.ts"
2140
+ }
2141
+ },
2142
+ {
2143
+ "kind": "js",
2144
+ "name": "WarpCombobox",
2145
+ "declaration": {
2146
+ "name": "WarpCombobox",
2147
+ "module": "packages/combobox/index.ts"
2063
2148
  }
2064
2149
  },
2065
2150
  {
2066
2151
  "kind": "custom-element-definition",
2067
- "name": "w-dead-toggle",
2152
+ "name": "w-combobox",
2068
2153
  "declaration": {
2069
- "name": "WarpDeadToggle",
2070
- "module": "packages/dead-toggle/index.ts"
2154
+ "name": "WarpCombobox",
2155
+ "module": "packages/combobox/index.ts"
2071
2156
  }
2072
2157
  }
2073
2158
  ]
2074
2159
  },
2075
2160
  {
2076
2161
  "kind": "javascript-module",
2077
- "path": "packages/expandable/index.ts",
2162
+ "path": "packages/datepicker/datepicker.ts",
2078
2163
  "declarations": [
2079
- {
2080
- "kind": "variable",
2081
- "name": "ccBox",
2082
- "type": {
2083
- "text": "object"
2084
- },
2085
- "default": "{ base: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8 info: 's-bg-info-subtle', neutral: 's-surface-sunken', bordered: 'border-2 s-border s-bg', }"
2086
- },
2087
- {
2088
- "kind": "variable",
2089
- "name": "ccExpandable",
2090
- "type": {
2091
- "text": "object"
2092
- },
2093
- "default": "{ wrapper: 'will-change-height s-text', box: 's-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8', bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8', chevron: 'inline-block align-middle s-icon', chevronNonBox: 'ml-8', chevronTransform: 'transform transition-transform transform-gpu ease-in-out', chevronExpand: '-rotate-180', chevronCollapse: 'rotate-180', // These are web component specific classes, using the ::part-selector: elementsChevronDownTransform: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out', elementsChevronUpTransform: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out', elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180', elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180', expansion: 'overflow-hidden', expansionNotExpanded: 'h-0 invisible', button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline', buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8', contentWithTitle: 'pt-0', title: 'flex w-full justify-between items-center', titleType: 't4', }"
2094
- },
2095
2164
  {
2096
2165
  "kind": "class",
2097
- "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)",
2098
- "name": "WarpExpandable",
2099
- "slots": [
2100
- {
2101
- "description": "Alternative to the `title` attribute should you need to provide some additional markup.",
2102
- "name": "title"
2103
- }
2104
- ],
2166
+ "description": "An input for dates.\n\nUses the `lang` attribute on either the element or on `<html>` to determine the locale options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)",
2167
+ "name": "WarpDatepicker",
2105
2168
  "members": [
2106
2169
  {
2107
2170
  "kind": "field",
2108
- "name": "expanded",
2171
+ "name": "shadowRootOptions",
2109
2172
  "type": {
2110
- "text": "boolean"
2173
+ "text": "object"
2111
2174
  },
2112
- "default": "false",
2113
- "attribute": "expanded",
2114
- "reflects": true
2175
+ "static": true,
2176
+ "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
2115
2177
  },
2116
2178
  {
2117
2179
  "kind": "field",
2118
- "name": "title",
2180
+ "name": "label",
2119
2181
  "type": {
2120
2182
  "text": "string"
2121
2183
  },
2122
- "attribute": "title"
2184
+ "attribute": "label",
2185
+ "reflects": true
2123
2186
  },
2124
2187
  {
2125
2188
  "kind": "field",
2126
- "name": "box",
2189
+ "name": "lang",
2127
2190
  "type": {
2128
- "text": "boolean"
2191
+ "text": "string"
2129
2192
  },
2130
- "default": "false",
2131
- "attribute": "box"
2193
+ "description": "Takes precedence over the `<html>` lang attribute.",
2194
+ "attribute": "lang",
2195
+ "reflects": true
2132
2196
  },
2133
2197
  {
2134
2198
  "kind": "field",
2135
- "name": "bleed",
2199
+ "name": "name",
2136
2200
  "type": {
2137
- "text": "boolean"
2201
+ "text": "string"
2138
2202
  },
2139
- "default": "false",
2140
- "attribute": "bleed"
2203
+ "attribute": "name",
2204
+ "reflects": true
2141
2205
  },
2142
2206
  {
2143
2207
  "kind": "field",
2144
- "name": "buttonClass",
2208
+ "name": "value",
2145
2209
  "type": {
2146
2210
  "text": "string"
2147
2211
  },
2148
- "attribute": "button-class"
2212
+ "attribute": "value",
2213
+ "reflects": true
2149
2214
  },
2150
2215
  {
2151
2216
  "kind": "field",
2152
- "name": "contentClass",
2217
+ "name": "headerFormat",
2153
2218
  "type": {
2154
2219
  "text": "string"
2155
2220
  },
2156
- "attribute": "content-class"
2221
+ "default": "'MMMM yyyy'",
2222
+ "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
2223
+ "attribute": "header-format"
2157
2224
  },
2158
2225
  {
2159
2226
  "kind": "field",
2160
- "name": "noChevron",
2227
+ "name": "weekdayFormat",
2161
2228
  "type": {
2162
- "text": "boolean"
2229
+ "text": "string"
2163
2230
  },
2164
- "default": "false",
2165
- "attribute": "no-chevron"
2231
+ "default": "'EEEEEE'",
2232
+ "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
2233
+ "attribute": "weekday-format"
2166
2234
  },
2167
2235
  {
2168
2236
  "kind": "field",
2169
- "name": "animated",
2237
+ "name": "isDayDisabled",
2170
2238
  "type": {
2171
- "text": "boolean"
2239
+ "text": "(day: Date) => boolean"
2172
2240
  },
2173
- "default": "false",
2174
- "attribute": "animated"
2241
+ "description": "Lets you control if a date in the calendar should be disabled.\n\nThis needs to be set on the element instance in JavaScript, not as an HTML attribute."
2175
2242
  },
2176
2243
  {
2177
2244
  "kind": "field",
2178
- "name": "headingLevel",
2245
+ "name": "dayFormat",
2179
2246
  "type": {
2180
- "text": "number"
2247
+ "text": "string"
2181
2248
  },
2182
- "attribute": "heading-level"
2249
+ "default": "'PPPP'",
2250
+ "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
2251
+ "attribute": "day-format"
2183
2252
  },
2184
2253
  {
2185
2254
  "kind": "field",
2186
- "name": "_hasTitle",
2255
+ "name": "isCalendarOpen",
2187
2256
  "type": {
2188
2257
  "text": "boolean"
2189
2258
  },
2190
- "default": "true",
2191
- "attribute": "_hasTitle"
2259
+ "default": "false"
2192
2260
  },
2193
2261
  {
2194
2262
  "kind": "field",
2195
- "name": "_showChevronUp",
2263
+ "name": "navigationDate",
2196
2264
  "type": {
2197
- "text": "boolean"
2198
- },
2199
- "default": "false",
2200
- "attribute": "_showChevronUp"
2265
+ "text": "Date"
2266
+ }
2201
2267
  },
2202
2268
  {
2203
2269
  "kind": "field",
2204
- "name": "#wrapperClasses",
2205
- "privacy": "private",
2270
+ "name": "selectedDate",
2271
+ "type": {
2272
+ "text": "Date | null"
2273
+ },
2206
2274
  "readonly": true
2207
2275
  },
2208
2276
  {
2209
2277
  "kind": "field",
2210
- "name": "#buttonClasses",
2211
- "privacy": "private",
2278
+ "name": "month",
2212
2279
  "readonly": true
2213
2280
  },
2214
2281
  {
2215
2282
  "kind": "field",
2216
- "name": "#chevronClasses",
2217
- "privacy": "private",
2283
+ "name": "weeks",
2218
2284
  "readonly": true
2219
2285
  },
2220
2286
  {
2221
2287
  "kind": "field",
2222
- "name": "#chevronIcon",
2223
- "privacy": "private",
2224
- "readonly": true
2288
+ "name": "calendar",
2289
+ "type": {
2290
+ "text": "HTMLDivElement"
2291
+ }
2292
+ },
2293
+ {
2294
+ "kind": "field",
2295
+ "name": "input",
2296
+ "type": {
2297
+ "text": "HTMLInputElement"
2298
+ }
2299
+ },
2300
+ {
2301
+ "kind": "field",
2302
+ "name": "toggleButton",
2303
+ "type": {
2304
+ "text": "HTMLButtonElement"
2305
+ }
2306
+ },
2307
+ {
2308
+ "kind": "field",
2309
+ "name": "wrapper",
2310
+ "type": {
2311
+ "text": "HTMLDivElement"
2312
+ }
2313
+ },
2314
+ {
2315
+ "kind": "field",
2316
+ "name": "previousMonthButton",
2317
+ "type": {
2318
+ "text": "HTMLButtonElement"
2319
+ },
2320
+ "description": "This is the first focusable element, needed for the modal focus trap.\n\nDon't cache this and other `@query` fields from inside the calendar modal.\nThey work the first time, but once the calendar is closed and reopened\nthe query will point to an element that doesn't exist anymore."
2321
+ },
2322
+ {
2323
+ "kind": "field",
2324
+ "name": "todayCell",
2325
+ "type": {
2326
+ "text": "HTMLTableCellElement"
2327
+ }
2328
+ },
2329
+ {
2330
+ "kind": "field",
2331
+ "name": "selectedCell",
2332
+ "type": {
2333
+ "text": "HTMLTableCellElement"
2334
+ }
2335
+ },
2336
+ {
2337
+ "kind": "method",
2338
+ "name": "#toggleCalendarOpen",
2339
+ "privacy": "private",
2340
+ "parameters": [
2341
+ {
2342
+ "name": "e",
2343
+ "type": {
2344
+ "text": "MouseEvent | KeyboardEvent"
2345
+ }
2346
+ }
2347
+ ]
2348
+ },
2349
+ {
2350
+ "kind": "method",
2351
+ "name": "#nextMonth",
2352
+ "privacy": "private"
2353
+ },
2354
+ {
2355
+ "kind": "method",
2356
+ "name": "#previousMonth",
2357
+ "privacy": "private"
2358
+ },
2359
+ {
2360
+ "kind": "method",
2361
+ "name": "#dispatchChangeEvent",
2362
+ "privacy": "private"
2363
+ },
2364
+ {
2365
+ "kind": "method",
2366
+ "name": "#onInput",
2367
+ "privacy": "private",
2368
+ "parameters": [
2369
+ {
2370
+ "name": "e",
2371
+ "type": {
2372
+ "text": "InputEvent"
2373
+ }
2374
+ }
2375
+ ]
2376
+ },
2377
+ {
2378
+ "kind": "method",
2379
+ "name": "#onInputClick",
2380
+ "privacy": "private",
2381
+ "parameters": [
2382
+ {
2383
+ "name": "e",
2384
+ "type": {
2385
+ "text": "PointerEvent"
2386
+ }
2387
+ }
2388
+ ]
2389
+ },
2390
+ {
2391
+ "kind": "method",
2392
+ "name": "#onInputKeyDown",
2393
+ "privacy": "private",
2394
+ "parameters": [
2395
+ {
2396
+ "name": "e",
2397
+ "type": {
2398
+ "text": "KeyboardEvent"
2399
+ }
2400
+ }
2401
+ ]
2402
+ },
2403
+ {
2404
+ "kind": "method",
2405
+ "name": "#onCalendarKeyDown",
2406
+ "privacy": "private",
2407
+ "parameters": [
2408
+ {
2409
+ "name": "e",
2410
+ "type": {
2411
+ "text": "KeyboardEvent"
2412
+ }
2413
+ }
2414
+ ]
2415
+ },
2416
+ {
2417
+ "kind": "method",
2418
+ "name": "#onCalendarSelect",
2419
+ "privacy": "private",
2420
+ "parameters": [
2421
+ {
2422
+ "name": "event",
2423
+ "type": {
2424
+ "text": "MouseEvent | KeyboardEvent"
2425
+ }
2426
+ }
2427
+ ]
2428
+ }
2429
+ ],
2430
+ "attributes": [
2431
+ {
2432
+ "name": "label",
2433
+ "type": {
2434
+ "text": "string"
2435
+ },
2436
+ "fieldName": "label"
2437
+ },
2438
+ {
2439
+ "name": "lang",
2440
+ "type": {
2441
+ "text": "string"
2442
+ },
2443
+ "description": "Takes precedence over the `<html>` lang attribute.",
2444
+ "fieldName": "lang"
2445
+ },
2446
+ {
2447
+ "name": "name",
2448
+ "type": {
2449
+ "text": "string"
2450
+ },
2451
+ "fieldName": "name"
2452
+ },
2453
+ {
2454
+ "name": "value",
2455
+ "type": {
2456
+ "text": "string"
2457
+ },
2458
+ "fieldName": "value"
2459
+ },
2460
+ {
2461
+ "name": "header-format",
2462
+ "type": {
2463
+ "text": "string"
2464
+ },
2465
+ "default": "'MMMM yyyy'",
2466
+ "description": "Decides the format of the date as shown in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
2467
+ "fieldName": "headerFormat"
2468
+ },
2469
+ {
2470
+ "name": "weekday-format",
2471
+ "type": {
2472
+ "text": "string"
2473
+ },
2474
+ "default": "'EEEEEE'",
2475
+ "description": "Decides the format of the weekday as shown above the grid of dates in the calendar.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
2476
+ "fieldName": "weekdayFormat"
2477
+ },
2478
+ {
2479
+ "name": "day-format",
2480
+ "type": {
2481
+ "text": "string"
2482
+ },
2483
+ "default": "'PPPP'",
2484
+ "description": "Decides the format of the day in the calendar as read to screen readers.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).",
2485
+ "fieldName": "dayFormat"
2486
+ }
2487
+ ],
2488
+ "mixins": [
2489
+ {
2490
+ "name": "FormControlMixin",
2491
+ "package": "@open-wc/form-control"
2492
+ }
2493
+ ],
2494
+ "superclass": {
2495
+ "name": "LitElement",
2496
+ "package": "lit"
2497
+ },
2498
+ "tagName": "w-datepicker",
2499
+ "customElement": true
2500
+ }
2501
+ ],
2502
+ "exports": [
2503
+ {
2504
+ "kind": "custom-element-definition",
2505
+ "name": "w-datepicker",
2506
+ "declaration": {
2507
+ "name": "WarpDatepicker",
2508
+ "module": "packages/datepicker/datepicker.ts"
2509
+ }
2510
+ },
2511
+ {
2512
+ "kind": "js",
2513
+ "name": "WarpDatepicker",
2514
+ "declaration": {
2515
+ "name": "WarpDatepicker",
2516
+ "module": "packages/datepicker/datepicker.ts"
2517
+ }
2518
+ }
2519
+ ]
2520
+ },
2521
+ {
2522
+ "kind": "javascript-module",
2523
+ "path": "packages/datepicker/index.ts",
2524
+ "declarations": [],
2525
+ "exports": [
2526
+ {
2527
+ "kind": "js",
2528
+ "name": "*",
2529
+ "declaration": {
2530
+ "name": "*",
2531
+ "package": "./datepicker.js"
2532
+ }
2533
+ }
2534
+ ]
2535
+ },
2536
+ {
2537
+ "kind": "javascript-module",
2538
+ "path": "packages/dead-toggle/index.ts",
2539
+ "declarations": [
2540
+ {
2541
+ "kind": "class",
2542
+ "description": "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.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-dead-toggle--docs)",
2543
+ "name": "WarpDeadToggle",
2544
+ "members": [
2545
+ {
2546
+ "kind": "field",
2547
+ "name": "type",
2548
+ "type": {
2549
+ "text": "'radio' | 'checkbox'"
2550
+ },
2551
+ "default": "'radio'",
2552
+ "attribute": "type"
2553
+ },
2554
+ {
2555
+ "kind": "field",
2556
+ "name": "checked",
2557
+ "type": {
2558
+ "text": "boolean"
2559
+ },
2560
+ "default": "false",
2561
+ "attribute": "checked",
2562
+ "reflects": true
2563
+ },
2564
+ {
2565
+ "kind": "field",
2566
+ "name": "indeterminate",
2567
+ "type": {
2568
+ "text": "boolean"
2569
+ },
2570
+ "default": "false",
2571
+ "attribute": "indeterminate",
2572
+ "reflects": true
2573
+ },
2574
+ {
2575
+ "kind": "field",
2576
+ "name": "invalid",
2577
+ "type": {
2578
+ "text": "boolean"
2579
+ },
2580
+ "default": "false",
2581
+ "attribute": "invalid",
2582
+ "reflects": true
2583
+ }
2584
+ ],
2585
+ "attributes": [
2586
+ {
2587
+ "name": "type",
2588
+ "type": {
2589
+ "text": "'radio' | 'checkbox'"
2590
+ },
2591
+ "default": "'radio'",
2592
+ "fieldName": "type"
2593
+ },
2594
+ {
2595
+ "name": "checked",
2596
+ "type": {
2597
+ "text": "boolean"
2598
+ },
2599
+ "default": "false",
2600
+ "fieldName": "checked"
2601
+ },
2602
+ {
2603
+ "name": "indeterminate",
2604
+ "type": {
2605
+ "text": "boolean"
2606
+ },
2607
+ "default": "false",
2608
+ "fieldName": "indeterminate"
2609
+ },
2610
+ {
2611
+ "name": "invalid",
2612
+ "type": {
2613
+ "text": "boolean"
2614
+ },
2615
+ "default": "false",
2616
+ "fieldName": "invalid"
2617
+ }
2618
+ ],
2619
+ "superclass": {
2620
+ "name": "LitElement",
2621
+ "package": "lit"
2622
+ },
2623
+ "tagName": "w-dead-toggle",
2624
+ "customElement": true
2625
+ }
2626
+ ],
2627
+ "exports": [
2628
+ {
2629
+ "kind": "js",
2630
+ "name": "WarpDeadToggle",
2631
+ "declaration": {
2632
+ "name": "WarpDeadToggle",
2633
+ "module": "packages/dead-toggle/index.ts"
2634
+ }
2635
+ },
2636
+ {
2637
+ "kind": "custom-element-definition",
2638
+ "name": "w-dead-toggle",
2639
+ "declaration": {
2640
+ "name": "WarpDeadToggle",
2641
+ "module": "packages/dead-toggle/index.ts"
2642
+ }
2643
+ }
2644
+ ]
2645
+ },
2646
+ {
2647
+ "kind": "javascript-module",
2648
+ "path": "packages/expandable/index.ts",
2649
+ "declarations": [
2650
+ {
2651
+ "kind": "variable",
2652
+ "name": "ccBox",
2653
+ "type": {
2654
+ "text": "object"
2655
+ },
2656
+ "default": "{ base: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8 info: 's-bg-info-subtle', neutral: 's-surface-sunken', bordered: 'border-2 s-border s-bg', }"
2657
+ },
2658
+ {
2659
+ "kind": "variable",
2660
+ "name": "ccExpandable",
2661
+ "type": {
2662
+ "text": "object"
2663
+ },
2664
+ "default": "{ wrapper: 'will-change-height s-text', box: 's-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8', bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8', chevron: 'inline-block align-middle s-icon', chevronNonBox: 'ml-8', chevronTransform: 'transform transition-transform transform-gpu ease-in-out', chevronExpand: '-rotate-180', chevronCollapse: 'rotate-180', // These are web component specific classes, using the ::part-selector: elementsChevronDownTransform: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out', elementsChevronUpTransform: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out', elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180', elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180', expansion: 'overflow-hidden', expansionNotExpanded: 'h-0 invisible', button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline', buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8', contentWithTitle: 'pt-0', title: 'flex w-full justify-between items-center', titleType: 't4', }"
2665
+ },
2666
+ {
2667
+ "kind": "class",
2668
+ "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)",
2669
+ "name": "WarpExpandable",
2670
+ "slots": [
2671
+ {
2672
+ "description": "Alternative to the `title` attribute should you need to provide some additional markup.",
2673
+ "name": "title"
2674
+ }
2675
+ ],
2676
+ "members": [
2677
+ {
2678
+ "kind": "field",
2679
+ "name": "expanded",
2680
+ "type": {
2681
+ "text": "boolean"
2682
+ },
2683
+ "default": "false",
2684
+ "attribute": "expanded",
2685
+ "reflects": true
2686
+ },
2687
+ {
2688
+ "kind": "field",
2689
+ "name": "title",
2690
+ "type": {
2691
+ "text": "string"
2692
+ },
2693
+ "attribute": "title"
2694
+ },
2695
+ {
2696
+ "kind": "field",
2697
+ "name": "box",
2698
+ "type": {
2699
+ "text": "boolean"
2700
+ },
2701
+ "default": "false",
2702
+ "attribute": "box"
2703
+ },
2704
+ {
2705
+ "kind": "field",
2706
+ "name": "bleed",
2707
+ "type": {
2708
+ "text": "boolean"
2709
+ },
2710
+ "default": "false",
2711
+ "attribute": "bleed"
2712
+ },
2713
+ {
2714
+ "kind": "field",
2715
+ "name": "buttonClass",
2716
+ "type": {
2717
+ "text": "string"
2718
+ },
2719
+ "attribute": "button-class"
2720
+ },
2721
+ {
2722
+ "kind": "field",
2723
+ "name": "contentClass",
2724
+ "type": {
2725
+ "text": "string"
2726
+ },
2727
+ "attribute": "content-class"
2728
+ },
2729
+ {
2730
+ "kind": "field",
2731
+ "name": "noChevron",
2732
+ "type": {
2733
+ "text": "boolean"
2734
+ },
2735
+ "default": "false",
2736
+ "attribute": "no-chevron"
2737
+ },
2738
+ {
2739
+ "kind": "field",
2740
+ "name": "animated",
2741
+ "type": {
2742
+ "text": "boolean"
2743
+ },
2744
+ "default": "false",
2745
+ "attribute": "animated"
2746
+ },
2747
+ {
2748
+ "kind": "field",
2749
+ "name": "headingLevel",
2750
+ "type": {
2751
+ "text": "number"
2752
+ },
2753
+ "attribute": "heading-level"
2754
+ },
2755
+ {
2756
+ "kind": "field",
2757
+ "name": "_hasTitle",
2758
+ "type": {
2759
+ "text": "boolean"
2760
+ },
2761
+ "default": "true",
2762
+ "attribute": "_hasTitle"
2763
+ },
2764
+ {
2765
+ "kind": "field",
2766
+ "name": "_showChevronUp",
2767
+ "type": {
2768
+ "text": "boolean"
2769
+ },
2770
+ "default": "false",
2771
+ "attribute": "_showChevronUp"
2772
+ },
2773
+ {
2774
+ "kind": "field",
2775
+ "name": "#wrapperClasses",
2776
+ "privacy": "private",
2777
+ "readonly": true
2778
+ },
2779
+ {
2780
+ "kind": "field",
2781
+ "name": "#buttonClasses",
2782
+ "privacy": "private",
2783
+ "readonly": true
2784
+ },
2785
+ {
2786
+ "kind": "field",
2787
+ "name": "#chevronClasses",
2788
+ "privacy": "private",
2789
+ "readonly": true
2790
+ },
2791
+ {
2792
+ "kind": "field",
2793
+ "name": "#chevronIcon",
2794
+ "privacy": "private",
2795
+ "readonly": true
2225
2796
  },
2226
2797
  {
2227
2798
  "kind": "field",
@@ -2980,250 +3551,579 @@
2980
3551
  "tagName": "w-pagination",
2981
3552
  "customElement": true
2982
3553
  }
2983
- ],
3554
+ ],
3555
+ "exports": [
3556
+ {
3557
+ "kind": "custom-element-definition",
3558
+ "name": "w-pagination",
3559
+ "declaration": {
3560
+ "name": "WarpPagination",
3561
+ "module": "packages/pagination/index.ts"
3562
+ }
3563
+ },
3564
+ {
3565
+ "kind": "js",
3566
+ "name": "WarpPagination",
3567
+ "declaration": {
3568
+ "name": "WarpPagination",
3569
+ "module": "packages/pagination/index.ts"
3570
+ }
3571
+ }
3572
+ ]
3573
+ },
3574
+ {
3575
+ "kind": "javascript-module",
3576
+ "path": "packages/pill/index.ts",
3577
+ "declarations": [
3578
+ {
3579
+ "kind": "variable",
3580
+ "name": "pillStyles",
3581
+ "type": {
3582
+ "text": "object"
3583
+ },
3584
+ "default": "{ wrapper: 'flex items-center', button: 'inline-flex items-center focusable text-xs transition-all', suggestion: 'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold', filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted', label: 'pl-12 py-8 rounded-l-full', labelWithoutClose: 'pr-12 rounded-r-full', labelWithClose: 'pr-2', close: 'pr-12 pl-4 py-8 rounded-r-full', closeIcon: 'h-16', a11y: 'sr-only', }"
3585
+ },
3586
+ {
3587
+ "kind": "class",
3588
+ "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)",
3589
+ "name": "WarpPill",
3590
+ "members": [
3591
+ {
3592
+ "kind": "field",
3593
+ "name": "canClose",
3594
+ "type": {
3595
+ "text": "boolean"
3596
+ },
3597
+ "default": "false",
3598
+ "attribute": "can-close"
3599
+ },
3600
+ {
3601
+ "kind": "field",
3602
+ "name": "suggestion",
3603
+ "type": {
3604
+ "text": "boolean"
3605
+ },
3606
+ "default": "false",
3607
+ "attribute": "suggestion"
3608
+ },
3609
+ {
3610
+ "kind": "field",
3611
+ "name": "openSrLabel",
3612
+ "type": {
3613
+ "text": "string"
3614
+ },
3615
+ "deprecated": "Used \"open-arial-label\" instead.",
3616
+ "attribute": "open-sr-label"
3617
+ },
3618
+ {
3619
+ "kind": "field",
3620
+ "name": "openAriaLabel",
3621
+ "type": {
3622
+ "text": "string"
3623
+ },
3624
+ "attribute": "open-aria-label"
3625
+ },
3626
+ {
3627
+ "kind": "field",
3628
+ "name": "closeSrLabel",
3629
+ "type": {
3630
+ "text": "string"
3631
+ },
3632
+ "deprecated": "Used \"close-arial-label\" instead.",
3633
+ "attribute": "close-sr-label"
3634
+ },
3635
+ {
3636
+ "kind": "field",
3637
+ "name": "closeAriaLabel",
3638
+ "type": {
3639
+ "text": "string"
3640
+ },
3641
+ "attribute": "close-aria-label"
3642
+ },
3643
+ {
3644
+ "kind": "field",
3645
+ "name": "openFilterSrText"
3646
+ },
3647
+ {
3648
+ "kind": "field",
3649
+ "name": "removeFilterSrText"
3650
+ }
3651
+ ],
3652
+ "events": [
3653
+ {
3654
+ "name": "w-pill-click",
3655
+ "type": {
3656
+ "text": "CustomEvent"
3657
+ }
3658
+ },
3659
+ {
3660
+ "name": "w-pill-close",
3661
+ "type": {
3662
+ "text": "CustomEvent"
3663
+ }
3664
+ }
3665
+ ],
3666
+ "attributes": [
3667
+ {
3668
+ "name": "can-close",
3669
+ "type": {
3670
+ "text": "boolean"
3671
+ },
3672
+ "default": "false",
3673
+ "fieldName": "canClose"
3674
+ },
3675
+ {
3676
+ "name": "suggestion",
3677
+ "type": {
3678
+ "text": "boolean"
3679
+ },
3680
+ "default": "false",
3681
+ "fieldName": "suggestion"
3682
+ },
3683
+ {
3684
+ "name": "open-sr-label",
3685
+ "type": {
3686
+ "text": "string"
3687
+ },
3688
+ "deprecated": "Used \"open-arial-label\" instead.",
3689
+ "fieldName": "openSrLabel"
3690
+ },
3691
+ {
3692
+ "name": "open-aria-label",
3693
+ "type": {
3694
+ "text": "string"
3695
+ },
3696
+ "fieldName": "openAriaLabel"
3697
+ },
3698
+ {
3699
+ "name": "close-sr-label",
3700
+ "type": {
3701
+ "text": "string"
3702
+ },
3703
+ "deprecated": "Used \"close-arial-label\" instead.",
3704
+ "fieldName": "closeSrLabel"
3705
+ },
3706
+ {
3707
+ "name": "close-aria-label",
3708
+ "type": {
3709
+ "text": "string"
3710
+ },
3711
+ "fieldName": "closeAriaLabel"
3712
+ }
3713
+ ],
3714
+ "superclass": {
3715
+ "name": "LitElement",
3716
+ "package": "lit"
3717
+ },
3718
+ "tagName": "w-pill",
3719
+ "customElement": true
3720
+ }
3721
+ ],
3722
+ "exports": [
3723
+ {
3724
+ "kind": "js",
3725
+ "name": "pillStyles",
3726
+ "declaration": {
3727
+ "name": "pillStyles",
3728
+ "module": "packages/pill/index.ts"
3729
+ }
3730
+ },
3731
+ {
3732
+ "kind": "custom-element-definition",
3733
+ "name": "w-pill",
3734
+ "declaration": {
3735
+ "name": "WarpPill",
3736
+ "module": "packages/pill/index.ts"
3737
+ }
3738
+ },
3739
+ {
3740
+ "kind": "js",
3741
+ "name": "WarpPill",
3742
+ "declaration": {
3743
+ "name": "WarpPill",
3744
+ "module": "packages/pill/index.ts"
3745
+ }
3746
+ }
3747
+ ]
3748
+ },
3749
+ {
3750
+ "kind": "javascript-module",
3751
+ "path": "packages/rip-and-tear-checkbox/index.ts",
3752
+ "declarations": [],
2984
3753
  "exports": [
2985
3754
  {
2986
3755
  "kind": "custom-element-definition",
2987
- "name": "w-pagination",
3756
+ "name": "w-checkbox",
2988
3757
  "declaration": {
2989
- "name": "WarpPagination",
2990
- "module": "packages/pagination/index.ts"
3758
+ "name": "WCheckbox",
3759
+ "module": "/packages/rip-and-tear-checkbox/checkbox"
3760
+ }
3761
+ }
3762
+ ]
3763
+ },
3764
+ {
3765
+ "kind": "javascript-module",
3766
+ "path": "packages/rip-and-tear-radio/index.ts",
3767
+ "declarations": [],
3768
+ "exports": [
3769
+ {
3770
+ "kind": "custom-element-definition",
3771
+ "name": "w-radio",
3772
+ "declaration": {
3773
+ "name": "WRadio",
3774
+ "module": "/packages/rip-and-tear-radio/radio"
2991
3775
  }
2992
3776
  },
2993
3777
  {
2994
- "kind": "js",
2995
- "name": "WarpPagination",
3778
+ "kind": "custom-element-definition",
3779
+ "name": "w-radio-group",
2996
3780
  "declaration": {
2997
- "name": "WarpPagination",
2998
- "module": "packages/pagination/index.ts"
3781
+ "name": "WRadioGroup",
3782
+ "module": "/packages/rip-and-tear-radio/radio-group"
2999
3783
  }
3000
3784
  }
3001
3785
  ]
3002
3786
  },
3003
3787
  {
3004
3788
  "kind": "javascript-module",
3005
- "path": "packages/pill/index.ts",
3789
+ "path": "packages/select/index.ts",
3006
3790
  "declarations": [
3007
3791
  {
3008
3792
  "kind": "variable",
3009
- "name": "pillStyles",
3793
+ "name": "ccSelect",
3010
3794
  "type": {
3011
3795
  "text": "object"
3012
3796
  },
3013
- "default": "{ wrapper: 'flex items-center', button: 'inline-flex items-center focusable text-xs transition-all', suggestion: 'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold', filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted', label: 'pl-12 py-8 rounded-l-full', labelWithoutClose: 'pr-12 rounded-r-full', labelWithClose: 'pr-2', close: 'pr-12 pl-4 py-8 rounded-r-full', closeIcon: 'h-16', a11y: 'sr-only', }"
3797
+ "default": "{ base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current', default: 's-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active', disabled: 's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none', invalid: 's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!', readOnly: 's-text bg-transparent pl-0 border-0 pointer-events-none before:hidden', wrapper: 'relative', selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `, chevron: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer', chevronDisabled: 'opacity-25', }"
3798
+ },
3799
+ {
3800
+ "kind": "variable",
3801
+ "name": "ccLabel",
3802
+ "type": {
3803
+ "text": "object"
3804
+ },
3805
+ "default": "{ base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text', optional: 'pl-8 font-normal text-s s-text-subtle', }"
3806
+ },
3807
+ {
3808
+ "kind": "variable",
3809
+ "name": "ccHelpText",
3810
+ "type": {
3811
+ "text": "object"
3812
+ },
3813
+ "default": "{ base: 'text-xs mt-4 block', color: 's-text-subtle', colorInvalid: 's-text-negative', }"
3014
3814
  },
3015
3815
  {
3016
3816
  "kind": "class",
3017
- "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)",
3018
- "name": "WarpPill",
3817
+ "description": "A dropdown component for selecting a single value.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)",
3818
+ "name": "WarpSelect",
3019
3819
  "members": [
3020
3820
  {
3021
3821
  "kind": "field",
3022
- "name": "canClose",
3822
+ "name": "autoFocus",
3023
3823
  "type": {
3024
3824
  "text": "boolean"
3025
3825
  },
3026
- "default": "false",
3027
- "attribute": "can-close"
3826
+ "description": "Whether the element should receive focus on render",
3827
+ "attribute": "auto-focus",
3828
+ "reflects": true
3028
3829
  },
3029
3830
  {
3030
3831
  "kind": "field",
3031
- "name": "suggestion",
3832
+ "name": "invalid",
3032
3833
  "type": {
3033
3834
  "text": "boolean"
3034
3835
  },
3035
- "default": "false",
3036
- "attribute": "suggestion"
3836
+ "description": "Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error",
3837
+ "attribute": "invalid",
3838
+ "reflects": true
3037
3839
  },
3038
3840
  {
3039
3841
  "kind": "field",
3040
- "name": "openSrLabel",
3842
+ "name": "always",
3843
+ "type": {
3844
+ "text": "boolean"
3845
+ },
3846
+ "description": "Whether to always show a hint",
3847
+ "attribute": "always",
3848
+ "reflects": true
3849
+ },
3850
+ {
3851
+ "kind": "field",
3852
+ "name": "hint",
3041
3853
  "type": {
3042
3854
  "text": "string"
3043
3855
  },
3044
- "deprecated": "Used \"open-arial-label\" instead.",
3045
- "attribute": "open-sr-label"
3856
+ "description": "The content displayed as the help text",
3857
+ "attribute": "hint",
3858
+ "reflects": true
3046
3859
  },
3047
3860
  {
3048
3861
  "kind": "field",
3049
- "name": "openAriaLabel",
3862
+ "name": "label",
3050
3863
  "type": {
3051
3864
  "text": "string"
3052
3865
  },
3053
- "attribute": "open-aria-label"
3866
+ "description": "The content to disply as the label",
3867
+ "attribute": "label",
3868
+ "reflects": true
3054
3869
  },
3055
3870
  {
3056
3871
  "kind": "field",
3057
- "name": "closeSrLabel",
3872
+ "name": "optional",
3873
+ "type": {
3874
+ "text": "boolean"
3875
+ },
3876
+ "description": "Whether to show optional text",
3877
+ "attribute": "optional",
3878
+ "reflects": true
3879
+ },
3880
+ {
3881
+ "kind": "field",
3882
+ "name": "disabled",
3883
+ "type": {
3884
+ "text": "boolean"
3885
+ },
3886
+ "description": "Renders the field in a disabled state.",
3887
+ "attribute": "disabled",
3888
+ "reflects": true
3889
+ },
3890
+ {
3891
+ "kind": "field",
3892
+ "name": "readOnly",
3893
+ "type": {
3894
+ "text": "boolean"
3895
+ },
3896
+ "description": "Renders the field in a readonly state.",
3897
+ "attribute": "read-only",
3898
+ "reflects": true
3899
+ },
3900
+ {
3901
+ "kind": "field",
3902
+ "name": "name",
3058
3903
  "type": {
3059
3904
  "text": "string"
3060
3905
  },
3061
- "deprecated": "Used \"close-arial-label\" instead.",
3062
- "attribute": "close-sr-label"
3906
+ "attribute": "name",
3907
+ "reflects": true
3063
3908
  },
3064
3909
  {
3065
3910
  "kind": "field",
3066
- "name": "closeAriaLabel",
3911
+ "name": "value",
3067
3912
  "type": {
3068
3913
  "text": "string"
3069
3914
  },
3070
- "attribute": "close-aria-label"
3915
+ "attribute": "value",
3916
+ "reflects": true
3917
+ },
3918
+ {
3919
+ "kind": "method",
3920
+ "name": "handleKeyDown",
3921
+ "parameters": [
3922
+ {
3923
+ "name": "event",
3924
+ "type": {
3925
+ "text": "KeyboardEvent"
3926
+ }
3927
+ }
3928
+ ]
3071
3929
  },
3072
3930
  {
3073
3931
  "kind": "field",
3074
- "name": "openFilterSrText"
3932
+ "name": "#classes",
3933
+ "privacy": "private",
3934
+ "readonly": true
3075
3935
  },
3076
3936
  {
3077
3937
  "kind": "field",
3078
- "name": "removeFilterSrText"
3938
+ "name": "#helpTextClasses",
3939
+ "privacy": "private",
3940
+ "readonly": true
3941
+ },
3942
+ {
3943
+ "kind": "field",
3944
+ "name": "#chevronClasses",
3945
+ "privacy": "private",
3946
+ "readonly": true
3947
+ },
3948
+ {
3949
+ "kind": "field",
3950
+ "name": "#id",
3951
+ "privacy": "private",
3952
+ "readonly": true
3953
+ },
3954
+ {
3955
+ "kind": "field",
3956
+ "name": "#helpId",
3957
+ "privacy": "private",
3958
+ "readonly": true
3959
+ },
3960
+ {
3961
+ "kind": "method",
3962
+ "name": "onChange",
3963
+ "parameters": [
3964
+ {
3965
+ "name": "{ target }"
3966
+ }
3967
+ ]
3968
+ },
3969
+ {
3970
+ "kind": "field",
3971
+ "name": "_options",
3972
+ "attribute": "_options"
3079
3973
  }
3080
3974
  ],
3081
- "events": [
3975
+ "attributes": [
3082
3976
  {
3083
- "name": "w-pill-click",
3977
+ "name": "auto-focus",
3084
3978
  "type": {
3085
- "text": "CustomEvent"
3086
- }
3979
+ "text": "boolean"
3980
+ },
3981
+ "description": "Whether the element should receive focus on render",
3982
+ "fieldName": "autoFocus"
3087
3983
  },
3088
3984
  {
3089
- "name": "w-pill-close",
3985
+ "name": "invalid",
3090
3986
  "type": {
3091
- "text": "CustomEvent"
3092
- }
3093
- }
3094
- ],
3095
- "attributes": [
3987
+ "text": "boolean"
3988
+ },
3989
+ "description": "Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error",
3990
+ "fieldName": "invalid"
3991
+ },
3096
3992
  {
3097
- "name": "can-close",
3993
+ "name": "always",
3098
3994
  "type": {
3099
3995
  "text": "boolean"
3100
3996
  },
3101
- "default": "false",
3102
- "fieldName": "canClose"
3997
+ "description": "Whether to always show a hint",
3998
+ "fieldName": "always"
3103
3999
  },
3104
4000
  {
3105
- "name": "suggestion",
4001
+ "name": "hint",
4002
+ "type": {
4003
+ "text": "string"
4004
+ },
4005
+ "description": "The content displayed as the help text",
4006
+ "fieldName": "hint"
4007
+ },
4008
+ {
4009
+ "name": "label",
4010
+ "type": {
4011
+ "text": "string"
4012
+ },
4013
+ "description": "The content to disply as the label",
4014
+ "fieldName": "label"
4015
+ },
4016
+ {
4017
+ "name": "optional",
4018
+ "type": {
4019
+ "text": "boolean"
4020
+ },
4021
+ "description": "Whether to show optional text",
4022
+ "fieldName": "optional"
4023
+ },
4024
+ {
4025
+ "name": "disabled",
3106
4026
  "type": {
3107
4027
  "text": "boolean"
3108
4028
  },
3109
- "default": "false",
3110
- "fieldName": "suggestion"
4029
+ "description": "Renders the field in a disabled state.",
4030
+ "fieldName": "disabled"
3111
4031
  },
3112
4032
  {
3113
- "name": "open-sr-label",
4033
+ "name": "read-only",
3114
4034
  "type": {
3115
- "text": "string"
4035
+ "text": "boolean"
3116
4036
  },
3117
- "deprecated": "Used \"open-arial-label\" instead.",
3118
- "fieldName": "openSrLabel"
4037
+ "description": "Renders the field in a readonly state.",
4038
+ "fieldName": "readOnly"
3119
4039
  },
3120
4040
  {
3121
- "name": "open-aria-label",
3122
- "type": {
3123
- "text": "string"
3124
- },
3125
- "fieldName": "openAriaLabel"
4041
+ "name": "_options",
4042
+ "fieldName": "_options"
3126
4043
  },
3127
4044
  {
3128
- "name": "close-sr-label",
4045
+ "name": "name",
3129
4046
  "type": {
3130
4047
  "text": "string"
3131
4048
  },
3132
- "deprecated": "Used \"close-arial-label\" instead.",
3133
- "fieldName": "closeSrLabel"
4049
+ "fieldName": "name"
3134
4050
  },
3135
4051
  {
3136
- "name": "close-aria-label",
4052
+ "name": "value",
3137
4053
  "type": {
3138
4054
  "text": "string"
3139
4055
  },
3140
- "fieldName": "closeAriaLabel"
4056
+ "fieldName": "value"
4057
+ }
4058
+ ],
4059
+ "mixins": [
4060
+ {
4061
+ "name": "FormControlMixin",
4062
+ "package": "@open-wc/form-control"
3141
4063
  }
3142
4064
  ],
3143
4065
  "superclass": {
3144
4066
  "name": "LitElement",
3145
4067
  "package": "lit"
3146
4068
  },
3147
- "tagName": "w-pill",
4069
+ "tagName": "w-select",
3148
4070
  "customElement": true
3149
4071
  }
3150
4072
  ],
3151
4073
  "exports": [
3152
4074
  {
3153
4075
  "kind": "js",
3154
- "name": "pillStyles",
4076
+ "name": "ccSelect",
3155
4077
  "declaration": {
3156
- "name": "pillStyles",
3157
- "module": "packages/pill/index.ts"
4078
+ "name": "ccSelect",
4079
+ "module": "packages/select/index.ts"
3158
4080
  }
3159
4081
  },
3160
4082
  {
3161
- "kind": "custom-element-definition",
3162
- "name": "w-pill",
4083
+ "kind": "js",
4084
+ "name": "ccLabel",
3163
4085
  "declaration": {
3164
- "name": "WarpPill",
3165
- "module": "packages/pill/index.ts"
4086
+ "name": "ccLabel",
4087
+ "module": "packages/select/index.ts"
3166
4088
  }
3167
4089
  },
3168
4090
  {
3169
4091
  "kind": "js",
3170
- "name": "WarpPill",
3171
- "declaration": {
3172
- "name": "WarpPill",
3173
- "module": "packages/pill/index.ts"
3174
- }
3175
- }
3176
- ]
3177
- },
3178
- {
3179
- "kind": "javascript-module",
3180
- "path": "packages/rip-and-tear-checkbox/index.ts",
3181
- "declarations": [],
3182
- "exports": [
3183
- {
3184
- "kind": "custom-element-definition",
3185
- "name": "w-checkbox",
4092
+ "name": "ccHelpText",
3186
4093
  "declaration": {
3187
- "name": "WCheckbox",
3188
- "module": "/packages/rip-and-tear-checkbox/checkbox"
4094
+ "name": "ccHelpText",
4095
+ "module": "packages/select/index.ts"
3189
4096
  }
3190
- }
3191
- ]
3192
- },
3193
- {
3194
- "kind": "javascript-module",
3195
- "path": "packages/rip-and-tear-radio/index.ts",
3196
- "declarations": [],
3197
- "exports": [
4097
+ },
3198
4098
  {
3199
- "kind": "custom-element-definition",
3200
- "name": "w-radio",
4099
+ "kind": "js",
4100
+ "name": "WarpSelect",
3201
4101
  "declaration": {
3202
- "name": "WRadio",
3203
- "module": "/packages/rip-and-tear-radio/radio"
4102
+ "name": "WarpSelect",
4103
+ "module": "packages/select/index.ts"
3204
4104
  }
3205
4105
  },
3206
4106
  {
3207
4107
  "kind": "custom-element-definition",
3208
- "name": "w-radio-group",
4108
+ "name": "w-select",
3209
4109
  "declaration": {
3210
- "name": "WRadioGroup",
3211
- "module": "/packages/rip-and-tear-radio/radio-group"
4110
+ "name": "WarpSelect",
4111
+ "module": "packages/select/index.ts"
3212
4112
  }
3213
4113
  }
3214
4114
  ]
3215
4115
  },
3216
4116
  {
3217
4117
  "kind": "javascript-module",
3218
- "path": "packages/select/index.ts",
4118
+ "path": "packages/textfield/index.ts",
3219
4119
  "declarations": [
3220
4120
  {
3221
4121
  "kind": "variable",
3222
- "name": "ccSelect",
4122
+ "name": "ccinput",
3223
4123
  "type": {
3224
4124
  "text": "object"
3225
4125
  },
3226
- "default": "{ base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current', default: 's-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active', disabled: 's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none', invalid: 's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!', readOnly: 's-text bg-transparent pl-0 border-0 pointer-events-none before:hidden', wrapper: 'relative', selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `, chevron: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer', chevronDisabled: 'opacity-25', }"
4126
+ "default": "{ // input classes base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true default: 'border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly placeholder: 'placeholder:s-text-placeholder', suffix: 'pr-40', prefix: 'pl-[var(--w-prefix-width,_40px)]', // textarea classes textArea: 'min-h-[42] sm:min-h-[45]', }"
3227
4127
  },
3228
4128
  {
3229
4129
  "kind": "variable",
@@ -3243,17 +4143,25 @@
3243
4143
  },
3244
4144
  {
3245
4145
  "kind": "class",
3246
- "description": "A dropdown component for selecting a single value.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)",
3247
- "name": "WarpSelect",
4146
+ "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)",
4147
+ "name": "WarpTextField",
3248
4148
  "members": [
3249
4149
  {
3250
4150
  "kind": "field",
3251
- "name": "autoFocus",
4151
+ "name": "shadowRootOptions",
4152
+ "type": {
4153
+ "text": "object"
4154
+ },
4155
+ "static": true,
4156
+ "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
4157
+ },
4158
+ {
4159
+ "kind": "field",
4160
+ "name": "disabled",
3252
4161
  "type": {
3253
4162
  "text": "boolean"
3254
4163
  },
3255
- "description": "Whether the element should receive focus on render",
3256
- "attribute": "auto-focus",
4164
+ "attribute": "disabled",
3257
4165
  "reflects": true
3258
4166
  },
3259
4167
  {
@@ -3262,473 +4170,409 @@
3262
4170
  "type": {
3263
4171
  "text": "boolean"
3264
4172
  },
3265
- "description": "Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error",
3266
4173
  "attribute": "invalid",
3267
4174
  "reflects": true
3268
4175
  },
3269
4176
  {
3270
4177
  "kind": "field",
3271
- "name": "always",
4178
+ "name": "id",
3272
4179
  "type": {
3273
- "text": "boolean"
4180
+ "text": "string"
3274
4181
  },
3275
- "description": "Whether to always show a hint",
3276
- "attribute": "always",
4182
+ "attribute": "id",
3277
4183
  "reflects": true
3278
4184
  },
3279
4185
  {
3280
4186
  "kind": "field",
3281
- "name": "hint",
4187
+ "name": "label",
3282
4188
  "type": {
3283
4189
  "text": "string"
3284
4190
  },
3285
- "description": "The content displayed as the help text",
3286
- "attribute": "hint",
4191
+ "attribute": "label",
3287
4192
  "reflects": true
3288
4193
  },
3289
4194
  {
3290
4195
  "kind": "field",
3291
- "name": "label",
4196
+ "name": "helpText",
3292
4197
  "type": {
3293
4198
  "text": "string"
3294
4199
  },
3295
- "description": "The content to disply as the label",
3296
- "attribute": "label",
4200
+ "attribute": "help-text",
3297
4201
  "reflects": true
3298
4202
  },
3299
4203
  {
3300
4204
  "kind": "field",
3301
- "name": "optional",
4205
+ "name": "size",
3302
4206
  "type": {
3303
- "text": "boolean"
4207
+ "text": "string"
3304
4208
  },
3305
- "description": "Whether to show optional text",
3306
- "attribute": "optional",
4209
+ "attribute": "size",
3307
4210
  "reflects": true
3308
4211
  },
3309
4212
  {
3310
4213
  "kind": "field",
3311
- "name": "disabled",
4214
+ "name": "max",
3312
4215
  "type": {
3313
- "text": "boolean"
4216
+ "text": "number"
3314
4217
  },
3315
- "description": "Renders the field in a disabled state.",
3316
- "attribute": "disabled",
4218
+ "attribute": "max",
3317
4219
  "reflects": true
3318
4220
  },
3319
4221
  {
3320
4222
  "kind": "field",
3321
- "name": "readOnly",
4223
+ "name": "min",
3322
4224
  "type": {
3323
- "text": "boolean"
4225
+ "text": "number"
3324
4226
  },
3325
- "description": "Renders the field in a readonly state.",
3326
- "attribute": "read-only",
4227
+ "attribute": "min",
3327
4228
  "reflects": true
3328
4229
  },
3329
4230
  {
3330
4231
  "kind": "field",
3331
- "name": "name",
4232
+ "name": "minLength",
4233
+ "type": {
4234
+ "text": "number"
4235
+ },
4236
+ "attribute": "min-length",
4237
+ "reflects": true
4238
+ },
4239
+ {
4240
+ "kind": "field",
4241
+ "name": "maxLength",
4242
+ "type": {
4243
+ "text": "number"
4244
+ },
4245
+ "attribute": "max-length",
4246
+ "reflects": true
4247
+ },
4248
+ {
4249
+ "kind": "field",
4250
+ "name": "pattern",
3332
4251
  "type": {
3333
4252
  "text": "string"
3334
4253
  },
3335
- "attribute": "name",
4254
+ "attribute": "pattern",
3336
4255
  "reflects": true
3337
4256
  },
3338
4257
  {
3339
4258
  "kind": "field",
3340
- "name": "value",
4259
+ "name": "placeholder",
3341
4260
  "type": {
3342
4261
  "text": "string"
3343
4262
  },
3344
- "attribute": "value",
4263
+ "attribute": "placeholder",
3345
4264
  "reflects": true
3346
4265
  },
3347
4266
  {
3348
- "kind": "method",
3349
- "name": "handleKeyDown",
3350
- "parameters": [
3351
- {
3352
- "name": "event",
3353
- "type": {
3354
- "text": "KeyboardEvent"
3355
- }
3356
- }
3357
- ]
4267
+ "kind": "field",
4268
+ "name": "readOnly",
4269
+ "type": {
4270
+ "text": "boolean"
4271
+ },
4272
+ "attribute": "read-only",
4273
+ "reflects": true
3358
4274
  },
3359
4275
  {
3360
4276
  "kind": "field",
3361
- "name": "#classes",
3362
- "privacy": "private",
3363
- "readonly": true
4277
+ "name": "required",
4278
+ "type": {
4279
+ "text": "boolean"
4280
+ },
4281
+ "attribute": "required",
4282
+ "reflects": true
3364
4283
  },
3365
4284
  {
3366
4285
  "kind": "field",
3367
- "name": "#helpTextClasses",
3368
- "privacy": "private",
3369
- "readonly": true
4286
+ "name": "type",
4287
+ "type": {
4288
+ "text": "string"
4289
+ },
4290
+ "default": "'text'",
4291
+ "attribute": "type",
4292
+ "reflects": true
3370
4293
  },
3371
4294
  {
3372
4295
  "kind": "field",
3373
- "name": "#chevronClasses",
3374
- "privacy": "private",
3375
- "readonly": true
4296
+ "name": "value",
4297
+ "type": {
4298
+ "text": "string"
4299
+ },
4300
+ "attribute": "value",
4301
+ "reflects": true
3376
4302
  },
3377
4303
  {
3378
4304
  "kind": "field",
3379
- "name": "#id",
3380
- "privacy": "private",
3381
- "readonly": true
4305
+ "name": "name",
4306
+ "type": {
4307
+ "text": "string"
4308
+ },
4309
+ "attribute": "name",
4310
+ "reflects": true
3382
4311
  },
3383
4312
  {
3384
4313
  "kind": "field",
3385
- "name": "#helpId",
3386
- "privacy": "private",
3387
- "readonly": true
4314
+ "name": "formatter",
4315
+ "type": {
4316
+ "text": "(value: string) => string"
4317
+ },
4318
+ "description": "Function to format value when the input field.\n\nOnly active when the input field does not have focus,\nsimilar to the accessible input masking example from Filament Group\n\nhttps://css-tricks.com/input-masking/\nhttps://filamentgroup.github.io/politespace/demo/demo.html"
3388
4319
  },
3389
4320
  {
3390
4321
  "kind": "method",
3391
- "name": "onChange",
4322
+ "name": "handler",
3392
4323
  "parameters": [
3393
4324
  {
3394
- "name": "{ target }"
4325
+ "name": "e",
4326
+ "type": {
4327
+ "text": "Event"
4328
+ }
3395
4329
  }
3396
4330
  ]
3397
4331
  },
3398
4332
  {
3399
- "kind": "field",
3400
- "name": "_options",
3401
- "attribute": "_options"
4333
+ "kind": "method",
4334
+ "name": "prefixSlotChange"
4335
+ },
4336
+ {
4337
+ "kind": "method",
4338
+ "name": "suffixSlotChange"
3402
4339
  }
3403
4340
  ],
3404
4341
  "attributes": [
3405
4342
  {
3406
- "name": "auto-focus",
4343
+ "name": "disabled",
3407
4344
  "type": {
3408
4345
  "text": "boolean"
3409
4346
  },
3410
- "description": "Whether the element should receive focus on render",
3411
- "fieldName": "autoFocus"
4347
+ "fieldName": "disabled"
3412
4348
  },
3413
4349
  {
3414
4350
  "name": "invalid",
3415
4351
  "type": {
3416
4352
  "text": "boolean"
3417
4353
  },
3418
- "description": "Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error",
3419
4354
  "fieldName": "invalid"
3420
4355
  },
3421
4356
  {
3422
- "name": "always",
3423
- "type": {
3424
- "text": "boolean"
3425
- },
3426
- "description": "Whether to always show a hint",
3427
- "fieldName": "always"
3428
- },
3429
- {
3430
- "name": "hint",
4357
+ "name": "id",
3431
4358
  "type": {
3432
4359
  "text": "string"
3433
4360
  },
3434
- "description": "The content displayed as the help text",
3435
- "fieldName": "hint"
4361
+ "fieldName": "id"
3436
4362
  },
3437
4363
  {
3438
4364
  "name": "label",
3439
4365
  "type": {
3440
4366
  "text": "string"
3441
4367
  },
3442
- "description": "The content to disply as the label",
3443
4368
  "fieldName": "label"
3444
4369
  },
3445
4370
  {
3446
- "name": "optional",
4371
+ "name": "help-text",
3447
4372
  "type": {
3448
- "text": "boolean"
4373
+ "text": "string"
3449
4374
  },
3450
- "description": "Whether to show optional text",
3451
- "fieldName": "optional"
4375
+ "fieldName": "helpText"
3452
4376
  },
3453
4377
  {
3454
- "name": "disabled",
4378
+ "name": "size",
3455
4379
  "type": {
3456
- "text": "boolean"
4380
+ "text": "string"
3457
4381
  },
3458
- "description": "Renders the field in a disabled state.",
3459
- "fieldName": "disabled"
4382
+ "fieldName": "size"
3460
4383
  },
3461
4384
  {
3462
- "name": "read-only",
4385
+ "name": "max",
3463
4386
  "type": {
3464
- "text": "boolean"
4387
+ "text": "number"
3465
4388
  },
3466
- "description": "Renders the field in a readonly state.",
3467
- "fieldName": "readOnly"
3468
- },
3469
- {
3470
- "name": "_options",
3471
- "fieldName": "_options"
4389
+ "fieldName": "max"
3472
4390
  },
3473
4391
  {
3474
- "name": "name",
4392
+ "name": "min",
3475
4393
  "type": {
3476
- "text": "string"
4394
+ "text": "number"
3477
4395
  },
3478
- "fieldName": "name"
4396
+ "fieldName": "min"
3479
4397
  },
3480
4398
  {
3481
- "name": "value",
3482
- "type": {
3483
- "text": "string"
3484
- },
3485
- "fieldName": "value"
3486
- }
3487
- ],
3488
- "mixins": [
3489
- {
3490
- "name": "FormControlMixin",
3491
- "package": "@open-wc/form-control"
3492
- }
3493
- ],
3494
- "superclass": {
3495
- "name": "LitElement",
3496
- "package": "lit"
3497
- },
3498
- "tagName": "w-select",
3499
- "customElement": true
3500
- }
3501
- ],
3502
- "exports": [
3503
- {
3504
- "kind": "js",
3505
- "name": "ccSelect",
3506
- "declaration": {
3507
- "name": "ccSelect",
3508
- "module": "packages/select/index.ts"
3509
- }
3510
- },
3511
- {
3512
- "kind": "js",
3513
- "name": "ccLabel",
3514
- "declaration": {
3515
- "name": "ccLabel",
3516
- "module": "packages/select/index.ts"
3517
- }
3518
- },
3519
- {
3520
- "kind": "js",
3521
- "name": "ccHelpText",
3522
- "declaration": {
3523
- "name": "ccHelpText",
3524
- "module": "packages/select/index.ts"
3525
- }
3526
- },
3527
- {
3528
- "kind": "js",
3529
- "name": "WarpSelect",
3530
- "declaration": {
3531
- "name": "WarpSelect",
3532
- "module": "packages/select/index.ts"
3533
- }
3534
- },
3535
- {
3536
- "kind": "custom-element-definition",
3537
- "name": "w-select",
3538
- "declaration": {
3539
- "name": "WarpSelect",
3540
- "module": "packages/select/index.ts"
3541
- }
3542
- }
3543
- ]
3544
- },
3545
- {
3546
- "kind": "javascript-module",
3547
- "path": "packages/steps/index.ts",
3548
- "declarations": [
3549
- {
3550
- "kind": "class",
3551
- "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)",
3552
- "name": "WarpSteps",
3553
- "members": [
3554
- {
3555
- "kind": "field",
3556
- "name": "horizontal",
4399
+ "name": "min-length",
3557
4400
  "type": {
3558
- "text": "boolean"
4401
+ "text": "number"
3559
4402
  },
3560
- "default": "false",
3561
- "attribute": "horizontal",
3562
- "reflects": true
4403
+ "fieldName": "minLength"
3563
4404
  },
3564
4405
  {
3565
- "kind": "field",
3566
- "name": "right",
4406
+ "name": "max-length",
3567
4407
  "type": {
3568
- "text": "boolean"
4408
+ "text": "number"
3569
4409
  },
3570
- "default": "false",
3571
- "attribute": "right",
3572
- "reflects": true
4410
+ "fieldName": "maxLength"
3573
4411
  },
3574
4412
  {
3575
- "kind": "method",
3576
- "name": "updateStepsContext"
3577
- }
3578
- ],
3579
- "attributes": [
3580
- {
3581
- "name": "horizontal",
4413
+ "name": "pattern",
3582
4414
  "type": {
3583
- "text": "boolean"
4415
+ "text": "string"
3584
4416
  },
3585
- "default": "false",
3586
- "fieldName": "horizontal"
4417
+ "fieldName": "pattern"
3587
4418
  },
3588
4419
  {
3589
- "name": "right",
4420
+ "name": "placeholder",
3590
4421
  "type": {
3591
- "text": "boolean"
4422
+ "text": "string"
3592
4423
  },
3593
- "default": "false",
3594
- "fieldName": "right"
3595
- }
3596
- ],
3597
- "superclass": {
3598
- "name": "LitElement",
3599
- "package": "lit"
3600
- },
3601
- "tagName": "w-steps",
3602
- "customElement": true
3603
- },
3604
- {
3605
- "kind": "class",
3606
- "description": "Individual step component that shows a single step in a process",
3607
- "name": "WarpStep",
3608
- "members": [
4424
+ "fieldName": "placeholder"
4425
+ },
3609
4426
  {
3610
- "kind": "field",
3611
- "name": "active",
4427
+ "name": "read-only",
3612
4428
  "type": {
3613
4429
  "text": "boolean"
3614
4430
  },
3615
- "default": "false",
3616
- "attribute": "active",
3617
- "reflects": true
4431
+ "fieldName": "readOnly"
3618
4432
  },
3619
4433
  {
3620
- "kind": "field",
3621
- "name": "completed",
4434
+ "name": "required",
3622
4435
  "type": {
3623
4436
  "text": "boolean"
3624
4437
  },
3625
- "default": "false",
3626
- "attribute": "completed",
3627
- "reflects": true
4438
+ "fieldName": "required"
3628
4439
  },
3629
4440
  {
3630
- "kind": "field",
3631
- "name": "_context",
4441
+ "name": "type",
3632
4442
  "type": {
3633
- "text": "StepsContext"
4443
+ "text": "string"
3634
4444
  },
3635
- "privacy": "private",
3636
- "default": "{ horizontal: false, right: false, isLast: false, isFirst: false }"
3637
- },
3638
- {
3639
- "kind": "method",
3640
- "name": "setContext",
3641
- "parameters": [
3642
- {
3643
- "name": "context",
3644
- "type": {
3645
- "text": "StepsContext"
3646
- }
3647
- }
3648
- ]
4445
+ "default": "'text'",
4446
+ "fieldName": "type"
3649
4447
  },
3650
4448
  {
3651
- "kind": "method",
3652
- "name": "getAriaLabel"
3653
- }
3654
- ],
3655
- "attributes": [
3656
- {
3657
- "name": "active",
4449
+ "name": "value",
3658
4450
  "type": {
3659
- "text": "boolean"
4451
+ "text": "string"
3660
4452
  },
3661
- "default": "false",
3662
- "fieldName": "active"
4453
+ "fieldName": "value"
3663
4454
  },
3664
4455
  {
3665
- "name": "completed",
4456
+ "name": "name",
3666
4457
  "type": {
3667
- "text": "boolean"
4458
+ "text": "string"
3668
4459
  },
3669
- "default": "false",
3670
- "fieldName": "completed"
4460
+ "fieldName": "name"
4461
+ }
4462
+ ],
4463
+ "mixins": [
4464
+ {
4465
+ "name": "FormControlMixin",
4466
+ "package": "@open-wc/form-control"
3671
4467
  }
3672
4468
  ],
3673
4469
  "superclass": {
3674
4470
  "name": "LitElement",
3675
4471
  "package": "lit"
3676
4472
  },
3677
- "tagName": "w-step",
4473
+ "tagName": "w-textfield",
3678
4474
  "customElement": true
3679
4475
  }
3680
4476
  ],
3681
4477
  "exports": [
3682
4478
  {
3683
- "kind": "custom-element-definition",
3684
- "name": "w-steps",
4479
+ "kind": "js",
4480
+ "name": "ccinput",
3685
4481
  "declaration": {
3686
- "name": "WarpSteps",
3687
- "module": "packages/steps/index.ts"
4482
+ "name": "ccinput",
4483
+ "module": "packages/textfield/index.ts"
4484
+ }
4485
+ },
4486
+ {
4487
+ "kind": "js",
4488
+ "name": "ccLabel",
4489
+ "declaration": {
4490
+ "name": "ccLabel",
4491
+ "module": "packages/textfield/index.ts"
3688
4492
  }
3689
4493
  },
3690
4494
  {
3691
- "kind": "custom-element-definition",
3692
- "name": "w-step",
4495
+ "kind": "js",
4496
+ "name": "ccHelpText",
3693
4497
  "declaration": {
3694
- "name": "WarpStep",
3695
- "module": "packages/steps/index.ts"
4498
+ "name": "ccHelpText",
4499
+ "module": "packages/textfield/index.ts"
3696
4500
  }
3697
4501
  },
3698
4502
  {
3699
- "kind": "js",
3700
- "name": "WarpSteps",
4503
+ "kind": "custom-element-definition",
4504
+ "name": "w-textfield",
3701
4505
  "declaration": {
3702
- "name": "WarpSteps",
3703
- "module": "packages/steps/index.ts"
4506
+ "name": "WarpTextField",
4507
+ "module": "packages/textfield/index.ts"
3704
4508
  }
3705
4509
  },
3706
4510
  {
3707
4511
  "kind": "js",
3708
- "name": "WarpStep",
4512
+ "name": "WarpTextField",
3709
4513
  "declaration": {
3710
- "name": "WarpStep",
3711
- "module": "packages/steps/index.ts"
4514
+ "name": "WarpTextField",
4515
+ "module": "packages/textfield/index.ts"
3712
4516
  }
3713
4517
  }
3714
4518
  ]
3715
4519
  },
3716
4520
  {
3717
4521
  "kind": "javascript-module",
3718
- "path": "packages/switch/index.ts",
4522
+ "path": "packages/slider/slider-thumb.ts",
3719
4523
  "declarations": [
3720
4524
  {
3721
4525
  "kind": "class",
3722
- "description": "",
3723
- "name": "WarpSwitch",
4526
+ "description": "Component to place inside a `<w-slider>`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)",
4527
+ "name": "WarpSliderThumb",
3724
4528
  "members": [
4529
+ {
4530
+ "kind": "field",
4531
+ "name": "shadowRootOptions",
4532
+ "type": {
4533
+ "text": "object"
4534
+ },
4535
+ "static": true,
4536
+ "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
4537
+ },
4538
+ {
4539
+ "kind": "field",
4540
+ "name": "ariaLabel",
4541
+ "type": {
4542
+ "text": "string"
4543
+ },
4544
+ "attribute": "aria-label"
4545
+ },
4546
+ {
4547
+ "kind": "field",
4548
+ "name": "ariaDescription",
4549
+ "type": {
4550
+ "text": "string"
4551
+ },
4552
+ "attribute": "aria-description"
4553
+ },
4554
+ {
4555
+ "kind": "field",
4556
+ "name": "label",
4557
+ "type": {
4558
+ "text": "string"
4559
+ },
4560
+ "attribute": "label"
4561
+ },
4562
+ {
4563
+ "kind": "field",
4564
+ "name": "name",
4565
+ "type": {
4566
+ "text": "string"
4567
+ },
4568
+ "attribute": "name"
4569
+ },
3725
4570
  {
3726
4571
  "kind": "field",
3727
4572
  "name": "value",
3728
4573
  "type": {
3729
- "text": "boolean"
4574
+ "text": "string"
3730
4575
  },
3731
- "default": "false",
3732
4576
  "attribute": "value",
3733
4577
  "reflects": true
3734
4578
  },
@@ -3738,26 +4582,152 @@
3738
4582
  "type": {
3739
4583
  "text": "boolean"
3740
4584
  },
3741
- "default": "false",
3742
4585
  "attribute": "disabled",
3743
4586
  "reflects": true
4587
+ },
4588
+ {
4589
+ "kind": "field",
4590
+ "name": "markers",
4591
+ "type": {
4592
+ "text": "string"
4593
+ },
4594
+ "description": "Set by `<w-slider>`"
4595
+ },
4596
+ {
4597
+ "kind": "field",
4598
+ "name": "step",
4599
+ "type": {
4600
+ "text": "number"
4601
+ },
4602
+ "description": "Set by `<w-slider>`"
4603
+ },
4604
+ {
4605
+ "kind": "field",
4606
+ "name": "min",
4607
+ "type": {
4608
+ "text": "string"
4609
+ },
4610
+ "description": "Set by `<w-slider>`"
4611
+ },
4612
+ {
4613
+ "kind": "field",
4614
+ "name": "max",
4615
+ "type": {
4616
+ "text": "string"
4617
+ },
4618
+ "description": "Set by `<w-slider>`"
4619
+ },
4620
+ {
4621
+ "kind": "field",
4622
+ "name": "suffix",
4623
+ "type": {
4624
+ "text": "string"
4625
+ },
4626
+ "description": "Set by `<w-slider>`"
4627
+ },
4628
+ {
4629
+ "kind": "field",
4630
+ "name": "formatter",
4631
+ "type": {
4632
+ "text": "(value: string) => string"
4633
+ },
4634
+ "description": "JS hook to help you format the numeric value how you want."
4635
+ },
4636
+ {
4637
+ "kind": "field",
4638
+ "name": "range",
4639
+ "type": {
4640
+ "text": "HTMLInputElement"
4641
+ }
4642
+ },
4643
+ {
4644
+ "kind": "field",
4645
+ "name": "textfield",
4646
+ "type": {
4647
+ "text": "WarpTextField"
4648
+ }
4649
+ },
4650
+ {
4651
+ "kind": "method",
4652
+ "name": "#showTooltip",
4653
+ "privacy": "private",
4654
+ "return": {
4655
+ "type": {
4656
+ "text": "void"
4657
+ }
4658
+ }
4659
+ },
4660
+ {
4661
+ "kind": "method",
4662
+ "name": "#hideTooltip",
4663
+ "privacy": "private",
4664
+ "return": {
4665
+ "type": {
4666
+ "text": "void"
4667
+ }
4668
+ }
4669
+ },
4670
+ {
4671
+ "kind": "method",
4672
+ "name": "#onInput",
4673
+ "privacy": "private",
4674
+ "return": {
4675
+ "type": {
4676
+ "text": "boolean"
4677
+ }
4678
+ },
4679
+ "parameters": [
4680
+ {
4681
+ "name": "e",
4682
+ "type": {
4683
+ "text": "InputEvent | CustomEvent"
4684
+ }
4685
+ }
4686
+ ]
3744
4687
  }
3745
4688
  ],
3746
4689
  "events": [
3747
4690
  {
3748
- "name": "change",
4691
+ "name": "slidervalidity",
3749
4692
  "type": {
3750
4693
  "text": "CustomEvent"
3751
4694
  }
3752
4695
  }
3753
4696
  ],
3754
4697
  "attributes": [
4698
+ {
4699
+ "name": "aria-label",
4700
+ "type": {
4701
+ "text": "string"
4702
+ },
4703
+ "fieldName": "ariaLabel"
4704
+ },
4705
+ {
4706
+ "name": "aria-description",
4707
+ "type": {
4708
+ "text": "string"
4709
+ },
4710
+ "fieldName": "ariaDescription"
4711
+ },
4712
+ {
4713
+ "name": "label",
4714
+ "type": {
4715
+ "text": "string"
4716
+ },
4717
+ "fieldName": "label"
4718
+ },
4719
+ {
4720
+ "name": "name",
4721
+ "type": {
4722
+ "text": "string"
4723
+ },
4724
+ "fieldName": "name"
4725
+ },
3755
4726
  {
3756
4727
  "name": "value",
3757
4728
  "type": {
3758
- "text": "boolean"
4729
+ "text": "string"
3759
4730
  },
3760
- "default": "false",
3761
4731
  "fieldName": "value"
3762
4732
  },
3763
4733
  {
@@ -3765,108 +4735,72 @@
3765
4735
  "type": {
3766
4736
  "text": "boolean"
3767
4737
  },
3768
- "default": "false",
3769
4738
  "fieldName": "disabled"
3770
4739
  }
3771
4740
  ],
4741
+ "mixins": [
4742
+ {
4743
+ "name": "FormControlMixin",
4744
+ "package": "@open-wc/form-control"
4745
+ }
4746
+ ],
3772
4747
  "superclass": {
3773
4748
  "name": "LitElement",
3774
4749
  "package": "lit"
3775
4750
  },
3776
- "tagName": "w-switch",
4751
+ "tagName": "w-slider-thumb",
3777
4752
  "customElement": true
3778
4753
  }
3779
4754
  ],
3780
4755
  "exports": [
3781
- {
3782
- "kind": "js",
3783
- "name": "WarpSwitch",
3784
- "declaration": {
3785
- "name": "WarpSwitch",
3786
- "module": "packages/switch/index.ts"
3787
- }
3788
- },
3789
4756
  {
3790
4757
  "kind": "custom-element-definition",
3791
- "name": "w-switch",
3792
- "declaration": {
3793
- "name": "WarpSwitch",
3794
- "module": "packages/switch/index.ts"
3795
- }
3796
- }
3797
- ]
3798
- },
3799
- {
3800
- "kind": "javascript-module",
3801
- "path": "packages/tabs/index.ts",
3802
- "declarations": [],
3803
- "exports": [
3804
- {
3805
- "kind": "js",
3806
- "name": "WarpTabs",
3807
- "declaration": {
3808
- "name": "WarpTabs",
3809
- "module": "./tabs.js"
3810
- }
3811
- },
3812
- {
3813
- "kind": "js",
3814
- "name": "WarpTab",
3815
- "declaration": {
3816
- "name": "WarpTab",
3817
- "module": "./tab.js"
3818
- }
3819
- },
3820
- {
3821
- "kind": "js",
3822
- "name": "WarpTabPanel",
4758
+ "name": "w-slider-thumb",
3823
4759
  "declaration": {
3824
- "name": "WarpTabPanel",
3825
- "module": "./tab-panel.js"
4760
+ "name": "WarpSliderThumb",
4761
+ "module": "packages/slider/slider-thumb.ts"
3826
4762
  }
3827
4763
  },
3828
4764
  {
3829
4765
  "kind": "js",
3830
- "name": "TabChangeEvent",
4766
+ "name": "WarpSliderThumb",
3831
4767
  "declaration": {
3832
- "name": "TabChangeEvent",
3833
- "module": "./tabs.js"
4768
+ "name": "WarpSliderThumb",
4769
+ "module": "packages/slider/slider-thumb.ts"
3834
4770
  }
3835
4771
  }
3836
- ]
3837
- },
3838
- {
3839
- "kind": "javascript-module",
3840
- "path": "packages/textfield/index.ts",
3841
- "declarations": [
3842
- {
3843
- "kind": "variable",
3844
- "name": "ccinput",
3845
- "type": {
3846
- "text": "object"
3847
- },
3848
- "default": "{ // wrapper classes wrapper: 'relative', // input classes base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true default: 'border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly placeholder: 'placeholder:s-text-placeholder', suffix: 'pr-40', prefix: 'pl-[var(--w-prefix-width,_40px)]', // textarea classes textArea: 'min-h-[42] sm:min-h-[45]', }"
3849
- },
3850
- {
3851
- "kind": "variable",
3852
- "name": "ccLabel",
3853
- "type": {
3854
- "text": "object"
3855
- },
3856
- "default": "{ base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text', optional: 'pl-8 font-normal text-s s-text-subtle', }"
3857
- },
3858
- {
3859
- "kind": "variable",
3860
- "name": "ccHelpText",
3861
- "type": {
3862
- "text": "object"
3863
- },
3864
- "default": "{ base: 'text-xs mt-4 block', color: 's-text-subtle', colorInvalid: 's-text-negative', }"
3865
- },
4772
+ ]
4773
+ },
4774
+ {
4775
+ "kind": "javascript-module",
4776
+ "path": "packages/slider/slider.ts",
4777
+ "declarations": [
3866
4778
  {
3867
4779
  "kind": "class",
3868
- "description": "A single line text input element.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)",
3869
- "name": "WarpTextField",
4780
+ "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)",
4781
+ "name": "WarpSlider",
4782
+ "slots": [
4783
+ {
4784
+ "description": "For single sliders place a `<w-slider-thumb>` in the default slot.",
4785
+ "name": ""
4786
+ },
4787
+ {
4788
+ "description": "Label for the slider or range slider as a whole.",
4789
+ "name": "label"
4790
+ },
4791
+ {
4792
+ "description": "Optional description between the label and slider.",
4793
+ "name": "description"
4794
+ },
4795
+ {
4796
+ "description": "Range sliders need to place a `<w-slider-thumb>` in the from and to slots.",
4797
+ "name": "from"
4798
+ },
4799
+ {
4800
+ "description": "Range sliders need to place a `<w-slider-thumb>` in the from and to slots.",
4801
+ "name": "to"
4802
+ }
4803
+ ],
3870
4804
  "members": [
3871
4805
  {
3872
4806
  "kind": "field",
@@ -3877,12 +4811,22 @@
3877
4811
  "static": true,
3878
4812
  "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
3879
4813
  },
4814
+ {
4815
+ "kind": "field",
4816
+ "name": "label",
4817
+ "type": {
4818
+ "text": "string"
4819
+ },
4820
+ "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead.",
4821
+ "attribute": "label"
4822
+ },
3880
4823
  {
3881
4824
  "kind": "field",
3882
4825
  "name": "disabled",
3883
4826
  "type": {
3884
4827
  "text": "boolean"
3885
4828
  },
4829
+ "default": "false",
3886
4830
  "attribute": "disabled",
3887
4831
  "reflects": true
3888
4832
  },
@@ -3892,341 +4836,559 @@
3892
4836
  "type": {
3893
4837
  "text": "boolean"
3894
4838
  },
4839
+ "default": "false",
3895
4840
  "attribute": "invalid",
3896
4841
  "reflects": true
3897
4842
  },
3898
4843
  {
3899
4844
  "kind": "field",
3900
- "name": "id",
4845
+ "name": "required",
3901
4846
  "type": {
3902
- "text": "string"
4847
+ "text": "boolean"
3903
4848
  },
3904
- "attribute": "id",
4849
+ "default": "false",
4850
+ "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
4851
+ "attribute": "required",
3905
4852
  "reflects": true
3906
4853
  },
3907
4854
  {
3908
4855
  "kind": "field",
3909
- "name": "label",
4856
+ "name": "min",
3910
4857
  "type": {
3911
4858
  "text": "string"
3912
4859
  },
3913
- "attribute": "label",
4860
+ "attribute": "min",
3914
4861
  "reflects": true
3915
4862
  },
3916
4863
  {
3917
4864
  "kind": "field",
3918
- "name": "helpText",
4865
+ "name": "max",
3919
4866
  "type": {
3920
4867
  "text": "string"
3921
4868
  },
3922
- "attribute": "help-text",
4869
+ "attribute": "max",
3923
4870
  "reflects": true
3924
4871
  },
3925
4872
  {
3926
4873
  "kind": "field",
3927
- "name": "size",
4874
+ "name": "markers",
3928
4875
  "type": {
3929
- "text": "string"
4876
+ "text": "number"
3930
4877
  },
3931
- "attribute": "size",
3932
- "reflects": true
4878
+ "description": "Pass a value similar to step to create visual markers at that interval",
4879
+ "attribute": "markers"
3933
4880
  },
3934
4881
  {
3935
4882
  "kind": "field",
3936
- "name": "max",
4883
+ "name": "step",
3937
4884
  "type": {
3938
4885
  "text": "number"
3939
4886
  },
3940
- "attribute": "max",
3941
- "reflects": true
4887
+ "attribute": "step"
3942
4888
  },
3943
4889
  {
3944
4890
  "kind": "field",
3945
- "name": "min",
4891
+ "name": "suffix",
3946
4892
  "type": {
3947
- "text": "number"
4893
+ "text": "string"
3948
4894
  },
3949
- "attribute": "min",
3950
- "reflects": true
4895
+ "description": "Suffix used in text input fields and for the min and max values of the slider.",
4896
+ "attribute": "suffix"
3951
4897
  },
3952
4898
  {
3953
4899
  "kind": "field",
3954
- "name": "minLength",
4900
+ "name": "formatter",
3955
4901
  "type": {
3956
- "text": "number"
4902
+ "text": "(value: string) => string"
3957
4903
  },
3958
- "attribute": "min-length",
3959
- "reflects": true
4904
+ "description": "Function to format the to- and from labels and value in the slider thumb tooltip."
3960
4905
  },
3961
4906
  {
3962
4907
  "kind": "field",
3963
- "name": "maxLength",
4908
+ "name": "#thumbSize",
4909
+ "privacy": "private",
3964
4910
  "type": {
3965
4911
  "text": "number"
3966
- },
3967
- "attribute": "max-length",
3968
- "reflects": true
4912
+ }
3969
4913
  },
3970
4914
  {
3971
- "kind": "field",
3972
- "name": "pattern",
4915
+ "kind": "method",
4916
+ "name": "#syncSliderThumbs",
4917
+ "privacy": "private",
4918
+ "return": {
4919
+ "type": {
4920
+ "text": "void"
4921
+ }
4922
+ }
4923
+ },
4924
+ {
4925
+ "kind": "method",
4926
+ "name": "#onInput",
4927
+ "privacy": "private",
4928
+ "parameters": [
4929
+ {
4930
+ "name": "e",
4931
+ "type": {
4932
+ "text": "InputEvent"
4933
+ }
4934
+ }
4935
+ ]
4936
+ },
4937
+ {
4938
+ "kind": "method",
4939
+ "name": "#onSliderValidity",
4940
+ "privacy": "private",
4941
+ "parameters": [
4942
+ {
4943
+ "name": "e",
4944
+ "type": {
4945
+ "text": "CustomEvent"
4946
+ }
4947
+ }
4948
+ ]
4949
+ },
4950
+ {
4951
+ "kind": "method",
4952
+ "name": "#updateActiveTrack",
4953
+ "privacy": "private",
4954
+ "parameters": [
4955
+ {
4956
+ "name": "input",
4957
+ "type": {
4958
+ "text": "WarpSliderThumb"
4959
+ }
4960
+ }
4961
+ ],
4962
+ "description": "We use CSS variables to fill the active track with a background color."
4963
+ },
4964
+ {
4965
+ "kind": "method",
4966
+ "name": "#getActiveRangeWidth",
4967
+ "privacy": "private",
4968
+ "return": {
4969
+ "type": {
4970
+ "text": "number"
4971
+ }
4972
+ }
4973
+ }
4974
+ ],
4975
+ "attributes": [
4976
+ {
4977
+ "name": "label",
3973
4978
  "type": {
3974
4979
  "text": "string"
3975
4980
  },
3976
- "attribute": "pattern",
3977
- "reflects": true
4981
+ "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead.",
4982
+ "fieldName": "label"
3978
4983
  },
3979
4984
  {
3980
- "kind": "field",
3981
- "name": "placeholder",
4985
+ "name": "disabled",
3982
4986
  "type": {
3983
- "text": "string"
4987
+ "text": "boolean"
3984
4988
  },
3985
- "attribute": "placeholder",
3986
- "reflects": true
4989
+ "default": "false",
4990
+ "fieldName": "disabled"
3987
4991
  },
3988
4992
  {
3989
- "kind": "field",
3990
- "name": "readOnly",
4993
+ "name": "invalid",
3991
4994
  "type": {
3992
4995
  "text": "boolean"
3993
4996
  },
3994
- "attribute": "read-only",
3995
- "reflects": true
4997
+ "default": "false",
4998
+ "fieldName": "invalid"
3996
4999
  },
3997
5000
  {
3998
- "kind": "field",
3999
5001
  "name": "required",
4000
5002
  "type": {
4001
5003
  "text": "boolean"
4002
5004
  },
4003
- "attribute": "required",
4004
- "reflects": true
5005
+ "default": "false",
5006
+ "description": "Ensures a child slider thumb has a value before allowing the containing form to submit.",
5007
+ "fieldName": "required"
4005
5008
  },
4006
5009
  {
4007
- "kind": "field",
4008
- "name": "type",
5010
+ "name": "min",
4009
5011
  "type": {
4010
5012
  "text": "string"
4011
5013
  },
4012
- "default": "'text'",
4013
- "attribute": "type",
4014
- "reflects": true
5014
+ "fieldName": "min"
4015
5015
  },
4016
5016
  {
4017
- "kind": "field",
4018
- "name": "value",
5017
+ "name": "max",
4019
5018
  "type": {
4020
5019
  "text": "string"
4021
5020
  },
4022
- "attribute": "value",
4023
- "reflects": true
5021
+ "fieldName": "max"
4024
5022
  },
4025
5023
  {
4026
- "kind": "field",
4027
- "name": "name",
5024
+ "name": "markers",
4028
5025
  "type": {
4029
- "text": "string"
5026
+ "text": "number"
4030
5027
  },
4031
- "attribute": "name",
4032
- "reflects": true
5028
+ "description": "Pass a value similar to step to create visual markers at that interval",
5029
+ "fieldName": "markers"
4033
5030
  },
4034
5031
  {
4035
- "kind": "method",
4036
- "name": "handler",
4037
- "parameters": [
4038
- {
4039
- "name": "e",
4040
- "type": {
4041
- "text": "Event"
4042
- }
4043
- }
4044
- ]
4045
- },
4046
- {
4047
- "kind": "method",
4048
- "name": "prefixSlotChange"
4049
- },
4050
- {
4051
- "kind": "method",
4052
- "name": "suffixSlotChange"
4053
- }
4054
- ],
4055
- "attributes": [
4056
- {
4057
- "name": "disabled",
5032
+ "name": "step",
4058
5033
  "type": {
4059
- "text": "boolean"
5034
+ "text": "number"
4060
5035
  },
4061
- "fieldName": "disabled"
5036
+ "fieldName": "step"
4062
5037
  },
4063
5038
  {
4064
- "name": "invalid",
5039
+ "name": "suffix",
4065
5040
  "type": {
4066
- "text": "boolean"
5041
+ "text": "string"
4067
5042
  },
4068
- "fieldName": "invalid"
4069
- },
5043
+ "description": "Suffix used in text input fields and for the min and max values of the slider.",
5044
+ "fieldName": "suffix"
5045
+ }
5046
+ ],
5047
+ "mixins": [
4070
5048
  {
4071
- "name": "id",
5049
+ "name": "FormControlMixin",
5050
+ "package": "@open-wc/form-control"
5051
+ }
5052
+ ],
5053
+ "superclass": {
5054
+ "name": "LitElement",
5055
+ "package": "lit"
5056
+ },
5057
+ "tagName": "w-slider",
5058
+ "customElement": true
5059
+ }
5060
+ ],
5061
+ "exports": [
5062
+ {
5063
+ "kind": "custom-element-definition",
5064
+ "name": "w-slider",
5065
+ "declaration": {
5066
+ "name": "WarpSlider",
5067
+ "module": "packages/slider/slider.ts"
5068
+ }
5069
+ },
5070
+ {
5071
+ "kind": "js",
5072
+ "name": "WarpSlider",
5073
+ "declaration": {
5074
+ "name": "WarpSlider",
5075
+ "module": "packages/slider/slider.ts"
5076
+ }
5077
+ }
5078
+ ]
5079
+ },
5080
+ {
5081
+ "kind": "javascript-module",
5082
+ "path": "packages/slider/index.ts",
5083
+ "declarations": [],
5084
+ "exports": [
5085
+ {
5086
+ "kind": "js",
5087
+ "name": "*",
5088
+ "declaration": {
5089
+ "name": "*",
5090
+ "package": "./slider.js"
5091
+ }
5092
+ },
5093
+ {
5094
+ "kind": "js",
5095
+ "name": "*",
5096
+ "declaration": {
5097
+ "name": "*",
5098
+ "package": "./slider-thumb.js"
5099
+ }
5100
+ }
5101
+ ]
5102
+ },
5103
+ {
5104
+ "kind": "javascript-module",
5105
+ "path": "packages/steps/index.ts",
5106
+ "declarations": [
5107
+ {
5108
+ "kind": "class",
5109
+ "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/components-steps--docs)",
5110
+ "name": "WarpSteps",
5111
+ "members": [
5112
+ {
5113
+ "kind": "field",
5114
+ "name": "horizontal",
4072
5115
  "type": {
4073
- "text": "string"
5116
+ "text": "boolean"
4074
5117
  },
4075
- "fieldName": "id"
5118
+ "default": "false",
5119
+ "attribute": "horizontal",
5120
+ "reflects": true
4076
5121
  },
4077
5122
  {
4078
- "name": "label",
5123
+ "kind": "field",
5124
+ "name": "right",
4079
5125
  "type": {
4080
- "text": "string"
5126
+ "text": "boolean"
4081
5127
  },
4082
- "fieldName": "label"
5128
+ "default": "false",
5129
+ "attribute": "right",
5130
+ "reflects": true
4083
5131
  },
4084
5132
  {
4085
- "name": "help-text",
5133
+ "kind": "method",
5134
+ "name": "updateStepsContext"
5135
+ }
5136
+ ],
5137
+ "attributes": [
5138
+ {
5139
+ "name": "horizontal",
4086
5140
  "type": {
4087
- "text": "string"
5141
+ "text": "boolean"
4088
5142
  },
4089
- "fieldName": "helpText"
5143
+ "default": "false",
5144
+ "fieldName": "horizontal"
4090
5145
  },
4091
5146
  {
4092
- "name": "size",
5147
+ "name": "right",
4093
5148
  "type": {
4094
- "text": "string"
5149
+ "text": "boolean"
4095
5150
  },
4096
- "fieldName": "size"
4097
- },
5151
+ "default": "false",
5152
+ "fieldName": "right"
5153
+ }
5154
+ ],
5155
+ "superclass": {
5156
+ "name": "LitElement",
5157
+ "package": "lit"
5158
+ },
5159
+ "tagName": "w-steps",
5160
+ "customElement": true
5161
+ },
5162
+ {
5163
+ "kind": "class",
5164
+ "description": "Individual step component that shows a single step in a process",
5165
+ "name": "WarpStep",
5166
+ "members": [
4098
5167
  {
4099
- "name": "max",
5168
+ "kind": "field",
5169
+ "name": "active",
4100
5170
  "type": {
4101
- "text": "number"
5171
+ "text": "boolean"
4102
5172
  },
4103
- "fieldName": "max"
5173
+ "default": "false",
5174
+ "attribute": "active",
5175
+ "reflects": true
4104
5176
  },
4105
5177
  {
4106
- "name": "min",
5178
+ "kind": "field",
5179
+ "name": "completed",
4107
5180
  "type": {
4108
- "text": "number"
5181
+ "text": "boolean"
4109
5182
  },
4110
- "fieldName": "min"
5183
+ "default": "false",
5184
+ "attribute": "completed",
5185
+ "reflects": true
4111
5186
  },
4112
5187
  {
4113
- "name": "min-length",
5188
+ "kind": "field",
5189
+ "name": "_context",
4114
5190
  "type": {
4115
- "text": "number"
5191
+ "text": "StepsContext"
4116
5192
  },
4117
- "fieldName": "minLength"
5193
+ "privacy": "private",
5194
+ "default": "{ horizontal: false, right: false, isLast: false, isFirst: false }"
4118
5195
  },
4119
5196
  {
4120
- "name": "max-length",
4121
- "type": {
4122
- "text": "number"
4123
- },
4124
- "fieldName": "maxLength"
5197
+ "kind": "method",
5198
+ "name": "setContext",
5199
+ "parameters": [
5200
+ {
5201
+ "name": "context",
5202
+ "type": {
5203
+ "text": "StepsContext"
5204
+ }
5205
+ }
5206
+ ]
4125
5207
  },
4126
5208
  {
4127
- "name": "pattern",
5209
+ "kind": "method",
5210
+ "name": "getAriaLabel"
5211
+ }
5212
+ ],
5213
+ "attributes": [
5214
+ {
5215
+ "name": "active",
4128
5216
  "type": {
4129
- "text": "string"
5217
+ "text": "boolean"
4130
5218
  },
4131
- "fieldName": "pattern"
5219
+ "default": "false",
5220
+ "fieldName": "active"
4132
5221
  },
4133
5222
  {
4134
- "name": "placeholder",
5223
+ "name": "completed",
4135
5224
  "type": {
4136
- "text": "string"
5225
+ "text": "boolean"
4137
5226
  },
4138
- "fieldName": "placeholder"
4139
- },
5227
+ "default": "false",
5228
+ "fieldName": "completed"
5229
+ }
5230
+ ],
5231
+ "superclass": {
5232
+ "name": "LitElement",
5233
+ "package": "lit"
5234
+ },
5235
+ "tagName": "w-step",
5236
+ "customElement": true
5237
+ }
5238
+ ],
5239
+ "exports": [
5240
+ {
5241
+ "kind": "custom-element-definition",
5242
+ "name": "w-steps",
5243
+ "declaration": {
5244
+ "name": "WarpSteps",
5245
+ "module": "packages/steps/index.ts"
5246
+ }
5247
+ },
5248
+ {
5249
+ "kind": "custom-element-definition",
5250
+ "name": "w-step",
5251
+ "declaration": {
5252
+ "name": "WarpStep",
5253
+ "module": "packages/steps/index.ts"
5254
+ }
5255
+ },
5256
+ {
5257
+ "kind": "js",
5258
+ "name": "WarpSteps",
5259
+ "declaration": {
5260
+ "name": "WarpSteps",
5261
+ "module": "packages/steps/index.ts"
5262
+ }
5263
+ },
5264
+ {
5265
+ "kind": "js",
5266
+ "name": "WarpStep",
5267
+ "declaration": {
5268
+ "name": "WarpStep",
5269
+ "module": "packages/steps/index.ts"
5270
+ }
5271
+ }
5272
+ ]
5273
+ },
5274
+ {
5275
+ "kind": "javascript-module",
5276
+ "path": "packages/switch/index.ts",
5277
+ "declarations": [
5278
+ {
5279
+ "kind": "class",
5280
+ "description": "",
5281
+ "name": "WarpSwitch",
5282
+ "members": [
4140
5283
  {
4141
- "name": "read-only",
5284
+ "kind": "field",
5285
+ "name": "value",
4142
5286
  "type": {
4143
5287
  "text": "boolean"
4144
5288
  },
4145
- "fieldName": "readOnly"
5289
+ "default": "false",
5290
+ "attribute": "value",
5291
+ "reflects": true
4146
5292
  },
4147
5293
  {
4148
- "name": "required",
5294
+ "kind": "field",
5295
+ "name": "disabled",
4149
5296
  "type": {
4150
5297
  "text": "boolean"
4151
5298
  },
4152
- "fieldName": "required"
4153
- },
5299
+ "default": "false",
5300
+ "attribute": "disabled",
5301
+ "reflects": true
5302
+ }
5303
+ ],
5304
+ "events": [
4154
5305
  {
4155
- "name": "type",
5306
+ "name": "change",
4156
5307
  "type": {
4157
- "text": "string"
4158
- },
4159
- "default": "'text'",
4160
- "fieldName": "type"
4161
- },
5308
+ "text": "CustomEvent"
5309
+ }
5310
+ }
5311
+ ],
5312
+ "attributes": [
4162
5313
  {
4163
5314
  "name": "value",
4164
5315
  "type": {
4165
- "text": "string"
5316
+ "text": "boolean"
4166
5317
  },
5318
+ "default": "false",
4167
5319
  "fieldName": "value"
4168
5320
  },
4169
5321
  {
4170
- "name": "name",
5322
+ "name": "disabled",
4171
5323
  "type": {
4172
- "text": "string"
5324
+ "text": "boolean"
4173
5325
  },
4174
- "fieldName": "name"
4175
- }
4176
- ],
4177
- "mixins": [
4178
- {
4179
- "name": "FormControlMixin",
4180
- "package": "@open-wc/form-control"
5326
+ "default": "false",
5327
+ "fieldName": "disabled"
4181
5328
  }
4182
5329
  ],
4183
5330
  "superclass": {
4184
5331
  "name": "LitElement",
4185
5332
  "package": "lit"
4186
5333
  },
4187
- "tagName": "w-textfield",
5334
+ "tagName": "w-switch",
4188
5335
  "customElement": true
4189
5336
  }
4190
5337
  ],
4191
5338
  "exports": [
4192
5339
  {
4193
5340
  "kind": "js",
4194
- "name": "ccinput",
5341
+ "name": "WarpSwitch",
4195
5342
  "declaration": {
4196
- "name": "ccinput",
4197
- "module": "packages/textfield/index.ts"
5343
+ "name": "WarpSwitch",
5344
+ "module": "packages/switch/index.ts"
4198
5345
  }
4199
5346
  },
5347
+ {
5348
+ "kind": "custom-element-definition",
5349
+ "name": "w-switch",
5350
+ "declaration": {
5351
+ "name": "WarpSwitch",
5352
+ "module": "packages/switch/index.ts"
5353
+ }
5354
+ }
5355
+ ]
5356
+ },
5357
+ {
5358
+ "kind": "javascript-module",
5359
+ "path": "packages/tabs/index.ts",
5360
+ "declarations": [],
5361
+ "exports": [
4200
5362
  {
4201
5363
  "kind": "js",
4202
- "name": "ccLabel",
5364
+ "name": "WarpTabs",
4203
5365
  "declaration": {
4204
- "name": "ccLabel",
4205
- "module": "packages/textfield/index.ts"
5366
+ "name": "WarpTabs",
5367
+ "module": "./tabs.js"
4206
5368
  }
4207
5369
  },
4208
5370
  {
4209
5371
  "kind": "js",
4210
- "name": "ccHelpText",
5372
+ "name": "WarpTab",
4211
5373
  "declaration": {
4212
- "name": "ccHelpText",
4213
- "module": "packages/textfield/index.ts"
5374
+ "name": "WarpTab",
5375
+ "module": "./tab.js"
4214
5376
  }
4215
5377
  },
4216
5378
  {
4217
- "kind": "custom-element-definition",
4218
- "name": "w-textfield",
5379
+ "kind": "js",
5380
+ "name": "WarpTabPanel",
4219
5381
  "declaration": {
4220
- "name": "WarpTextField",
4221
- "module": "packages/textfield/index.ts"
5382
+ "name": "WarpTabPanel",
5383
+ "module": "./tab-panel.js"
4222
5384
  }
4223
5385
  },
4224
5386
  {
4225
5387
  "kind": "js",
4226
- "name": "WarpTextField",
5388
+ "name": "TabChangeEvent",
4227
5389
  "declaration": {
4228
- "name": "WarpTextField",
4229
- "module": "packages/textfield/index.ts"
5390
+ "name": "TabChangeEvent",
5391
+ "module": "./tabs.js"
4230
5392
  }
4231
5393
  }
4232
5394
  ]