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

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 (55) hide show
  1. package/dist/custom-elements.json +178 -3297
  2. package/dist/index.d.ts +39 -771
  3. package/dist/packages/checkbox/checkbox-group.js +11 -3
  4. package/dist/packages/checkbox/checkbox.js +201 -2572
  5. package/dist/packages/combobox/combobox.react.stories.d.ts +1 -1
  6. package/dist/packages/combobox/combobox.test.d.ts +2 -0
  7. package/dist/packages/combobox/combobox.test.js +21 -0
  8. package/dist/packages/combobox/index.d.ts +2 -4
  9. package/dist/packages/combobox/index.js +9 -8
  10. package/dist/packages/combobox/index.js.map +2 -2
  11. package/dist/packages/deadtoggle/index.js +51 -2547
  12. package/dist/packages/pageindicator/index.js +44 -28
  13. package/dist/packages/pagination/index.js +183 -2484
  14. package/dist/packages/radio/radio-group-styles.js +3 -3
  15. package/dist/packages/radio/radio-group.js +313 -2619
  16. package/dist/packages/radio/radio-styles.js +0 -1
  17. package/dist/packages/radio/radio.js +109 -2556
  18. package/dist/packages/radio/radio.stories.js +47 -3688
  19. package/dist/packages/slider/slider-thumb.js +400 -2647
  20. package/dist/packages/slider/slider.js +272 -2603
  21. package/dist/packages/stepindicator/index.js +189 -2459
  22. package/dist/packages/tabs/index.d.ts +0 -1
  23. package/dist/packages/tabs/index.js +1 -0
  24. package/dist/packages/tabs/tab-panel.d.ts +3 -3
  25. package/dist/packages/tabs/tab-panel.js +9 -13
  26. package/dist/packages/tabs/tab.d.ts +1 -2
  27. package/dist/packages/tabs/tab.js +80 -2453
  28. package/dist/packages/tabs/tabs.d.ts +2 -4
  29. package/dist/packages/tabs/tabs.js +263 -2444
  30. package/dist/packages/tabs/tabs.react.stories.js +26 -27
  31. package/dist/packages/tabs/tabs.stories.js +58 -58
  32. package/dist/packages/textarea/textarea.js +210 -2465
  33. package/dist/packages/textfield/index.d.ts +1 -0
  34. package/dist/packages/textfield/index.js +18 -17
  35. package/dist/packages/textfield/index.js.map +2 -2
  36. package/dist/packages/textfield/textfield.react.stories.d.ts +1 -1
  37. package/dist/packages/textfield/textfield.test.js +9 -0
  38. package/dist/web-types.json +42 -830
  39. package/package.json +1 -37
  40. package/dist/packages/checkbox/checkbox-group.js.map +0 -7
  41. package/dist/packages/checkbox/checkbox.js.map +0 -7
  42. package/dist/packages/deadtoggle/index.js.map +0 -7
  43. package/dist/packages/pageindicator/index.js.map +0 -7
  44. package/dist/packages/pagination/index.js.map +0 -7
  45. package/dist/packages/radio/radio-group-styles.js.map +0 -7
  46. package/dist/packages/radio/radio-group.js.map +0 -7
  47. package/dist/packages/radio/radio-styles.js.map +0 -7
  48. package/dist/packages/radio/radio.js.map +0 -7
  49. package/dist/packages/radio/radio.stories.js.map +0 -7
  50. package/dist/packages/slider/slider-thumb.js.map +0 -7
  51. package/dist/packages/slider/slider.js.map +0 -7
  52. package/dist/packages/stepindicator/index.js.map +0 -7
  53. package/dist/packages/tabs/tab.js.map +0 -7
  54. package/dist/packages/tabs/tabs.js.map +0 -7
  55. package/dist/packages/textarea/textarea.js.map +0 -7
package/dist/packages/tabs/tabs.react.stories.js CHANGED
@@ -4,48 +4,47 @@ export default {
4
4
  title: 'Components/Tabs',
5
5
  component: Tabs,
6
6
  };
7
- export const Default = () => (React.createElement(React.Fragment, null,
8
- React.createElement(Tabs, { active: "tab1" },
9
- React.createElement(Tab, { name: "tab1", label: "First Tab" }),
10
- React.createElement(Tab, { name: "tab2", label: "Second Tab" }),
11
- React.createElement(Tab, { name: "tab3", label: "Third Tab" })),
12
- React.createElement(TabPanel, { name: "tab1" },
7
+ export const Default = () => (React.createElement(Tabs, { active: "tab1" },
8
+ React.createElement(Tab, { for: "tab1", label: "First Tab" }),
9
+ React.createElement(Tab, { for: "tab2", label: "Second Tab" }),
10
+ React.createElement(Tab, { for: "tab3", label: "Third Tab" }),
11
+ React.createElement(TabPanel, { id: "tab1" },
13
12
  React.createElement("p", null, "Content for the first tab. This panel is visible when the first tab is active.")),
14
- React.createElement(TabPanel, { name: "tab2", hidden: true },
13
+ React.createElement(TabPanel, { id: "tab2", hidden: true },
15
14
  React.createElement("p", null, "Content for the second tab. This panel is visible when the second tab is active.")),
16
- React.createElement(TabPanel, { name: "tab3", hidden: true },
15
+ React.createElement(TabPanel, { id: "tab3", hidden: true },
17
16
  React.createElement("p", null, "Content for the third tab. This panel is visible when the third tab is active."))));
18
17
  export const WithIcons = () => (React.createElement(React.Fragment, null,
19
18
  React.createElement(Tabs, { active: "home" },
20
- React.createElement(Tab, { name: "home", label: "Home" },
19
+ React.createElement(Tab, { for: "home", label: "Home" },
21
20
  React.createElement("span", { slot: "icon" }, "\uD83C\uDFE0")),
22
- React.createElement(Tab, { name: "search", label: "Search" },
21
+ React.createElement(Tab, { for: "search", label: "Search" },
23
22
  React.createElement("span", { slot: "icon" }, "\uD83D\uDD0D")),
24
- React.createElement(Tab, { name: "profile", label: "Profile" },
23
+ React.createElement(Tab, { for: "profile", label: "Profile" },
25
24
  React.createElement("span", { slot: "icon" }, "\uD83D\uDC64"))),
26
- React.createElement(TabPanel, { name: "home" },
25
+ React.createElement(TabPanel, { id: "home" },
27
26
  React.createElement("p", null, "Welcome to the home page!")),
28
- React.createElement(TabPanel, { name: "search", hidden: true },
27
+ React.createElement(TabPanel, { id: "search", hidden: true },
29
28
  React.createElement("p", null, "Search functionality goes here.")),
30
- React.createElement(TabPanel, { name: "profile", hidden: true },
29
+ React.createElement(TabPanel, { id: "profile", hidden: true },
31
30
  React.createElement("p", null, "User profile information."))));
32
31
  export const ManyTabs = () => (React.createElement(React.Fragment, null,
33
- React.createElement(Tabs, { active: "tab1" },
34
- React.createElement(Tab, { name: "tab1", label: "Tab 1" }),
35
- React.createElement(Tab, { name: "tab2", label: "Tab 2" }),
36
- React.createElement(Tab, { name: "tab3", label: "Tab 3" }),
37
- React.createElement(Tab, { name: "tab4", label: "Tab 4" }),
38
- React.createElement(Tab, { name: "tab5", label: "Tab 5" }),
39
- React.createElement(Tab, { name: "tab6", label: "Tab 6" })),
40
- React.createElement(TabPanel, { name: "tab1" },
32
+ React.createElement(Tabs, { active: "tab1", id: 'tabs-many' },
33
+ React.createElement(Tab, { for: "tab1", label: "Tab 1" }),
34
+ React.createElement(Tab, { for: "tab2", label: "Tab 2" }),
35
+ React.createElement(Tab, { for: "tab3", label: "Tab 3" }),
36
+ React.createElement(Tab, { for: "tab4", label: "Tab 4" }),
37
+ React.createElement(Tab, { for: "tab5", label: "Tab 5" }),
38
+ React.createElement(Tab, { for: "tab6", label: "Tab 6" })),
39
+ React.createElement(TabPanel, { id: "tab1" },
41
40
  React.createElement("p", null, "Content for tab 1")),
42
- React.createElement(TabPanel, { name: "tab2", hidden: true },
41
+ React.createElement(TabPanel, { id: "tab2", hidden: true },
43
42
  React.createElement("p", null, "Content for tab 2")),
44
- React.createElement(TabPanel, { name: "tab3", hidden: true },
43
+ React.createElement(TabPanel, { id: "tab3", hidden: true },
45
44
  React.createElement("p", null, "Content for tab 3")),
46
- React.createElement(TabPanel, { name: "tab4", hidden: true },
45
+ React.createElement(TabPanel, { id: "tab4", hidden: true },
47
46
  React.createElement("p", null, "Content for tab 4")),
48
- React.createElement(TabPanel, { name: "tab5", hidden: true },
47
+ React.createElement(TabPanel, { id: "tab5", hidden: true },
49
48
  React.createElement("p", null, "Content for tab 5")),
50
- React.createElement(TabPanel, { name: "tab6", hidden: true },
49
+ React.createElement(TabPanel, { id: "tab6", hidden: true },
51
50
  React.createElement("p", null, "Content for tab 6"))));
package/dist/packages/tabs/tabs.stories.js CHANGED
@@ -9,85 +9,85 @@ const meta = {
9
9
  export default meta;
10
10
  export const Default = () => html `
11
11
  <w-tabs active="tab1">
12
- <w-tab name="tab1" label="First Tab"></w-tab>
13
- <w-tab name="tab2" label="Second Tab"></w-tab>
14
- <w-tab name="tab3" label="Third Tab"></w-tab>
15
- </w-tabs>
16
-
17
- <w-tab-panel name="tab1">
18
- <p>Content for the first tab. This panel is visible when the first tab is active.</p>
19
- </w-tab-panel>
12
+
13
+ <w-tab for="tab1" label="First Tab"></w-tab>
14
+ <w-tab-panel id="tab1">
15
+ <p>Content for the first tab. This panel is visible when the first tab is active.</p>
16
+ </w-tab-panel>
17
+
18
+ <w-tab for="tab2" label="Second Tab"></w-tab>
19
+ <w-tab-panel id="tab2" hidden>
20
+ <p>Content for the second tab. This panel is visible when the second tab is active.</p>
21
+ </w-tab-panel>
20
22
 
21
- <w-tab-panel name="tab2" hidden>
22
- <p>Content for the second tab. This panel is visible when the second tab is active.</p>
23
- </w-tab-panel>
23
+ <w-tab for="tab3" label="Third Tab"></w-tab>
24
+ <w-tab-panel id="tab3" hidden>
25
+ <p>Content for the third tab. This panel is visible when the third tab is active.</p>
26
+ </w-tab-panel>
24
27
 
25
- <w-tab-panel name="tab3" hidden>
26
- <p>Content for the third tab. This panel is visible when the third tab is active.</p>
27
- </w-tab-panel>
28
+ </w-tabs>
29
+
28
30
  `;
29
31
  export const WithIcons = () => html `
30
32
  <w-tabs active="info">
31
- <w-tab name="info" label="Info">
33
+ <w-tab for="info" label="Info">
32
34
  <span slot="icon">
33
- <w-icon-info-16></w-icon-info-16>
35
+ <w-icon-info-16></w-icon-info-16>
34
36
  </span>
35
37
  </w-tab>
36
- <w-tab name="done" label="Done">
38
+ <w-tab-panel id="info">
39
+ <p>Info content.</p>
40
+ </w-tab-panel>
41
+
42
+ <w-tab for="done" label="Done">
37
43
  <span slot="icon">
38
- <w-icon-success-16></w-icon-success-16>
44
+ <w-icon-success-16></w-icon-success-16>
39
45
  </span>
40
46
  </w-tab>
41
- <w-tab name="error" label="Failures">
47
+ <w-tab-panel id="done" hidden>
48
+ <p>Done content.</p>
49
+ </w-tab-panel>
50
+
51
+ <w-tab for="error" label="Failures">
42
52
  <span slot="icon">
43
- <w-icon-error-16></w-icon-error-16>
53
+ <w-icon-error-16></w-icon-error-16>
44
54
  </span>
45
55
  </w-tab>
56
+ <w-tab-panel id="error" hidden>
57
+ <p>Error content.</p>
58
+ </w-tab-panel>
46
59
  </w-tabs>
47
-
48
- <w-tab-panel name="home">
49
- <p>Welcome to the home page!</p>
50
- </w-tab-panel>
51
-
52
- <w-tab-panel name="search" hidden>
53
- <p>Search functionality goes here.</p>
54
- </w-tab-panel>
55
-
56
- <w-tab-panel name="profile" hidden>
57
- <p>User profile information.</p>
58
- </w-tab-panel>
59
60
  `;
60
61
  export const ManyTabs = () => html `
61
62
  <w-tabs active="tab1">
62
- <w-tab name="tab1" label="Tab 1"></w-tab>
63
- <w-tab name="tab2" label="Tab 2"></w-tab>
64
- <w-tab name="tab3" label="Tab 3"></w-tab>
65
- <w-tab name="tab4" label="Tab 4"></w-tab>
66
- <w-tab name="tab5" label="Tab 5"></w-tab>
67
- <w-tab name="tab6" label="Tab 6"></w-tab>
68
- </w-tabs>
63
+ <w-tab for="tab1" label="Tab 1"></w-tab>
64
+ <w-tab-panel id="tab1">
65
+ <p>Content for tab 1</p>
66
+ </w-tab-panel>
69
67
 
70
- <w-tab-panel name="tab1">
71
- <p>Content for tab 1</p>
72
- </w-tab-panel>
68
+ <w-tab for="tab2" label="Tab 2"></w-tab>
69
+ <w-tab-panel id="tab2" hidden>
70
+ <p>Content for tab 2</p>
71
+ </w-tab-panel>
73
72
 
74
- <w-tab-panel name="tab2" hidden>
75
- <p>Content for tab 2</p>
76
- </w-tab-panel>
73
+ <w-tab for="tab3" label="Tab 3"></w-tab>
74
+ <w-tab-panel id="tab3" hidden>
75
+ <p>Content for tab 3</p>
76
+ </w-tab-panel>
77
77
 
78
- <w-tab-panel name="tab3" hidden>
79
- <p>Content for tab 3</p>
80
- </w-tab-panel>
78
+ <w-tab for="tab4" label="Tab 4"></w-tab>
79
+ <w-tab-panel id="tab4" hidden>
80
+ <p>Content for tab 4</p>
81
+ </w-tab-panel>
81
82
 
82
- <w-tab-panel name="tab4" hidden>
83
- <p>Content for tab 4</p>
84
- </w-tab-panel>
83
+ <w-tab for="tab5" label="Tab 5"></w-tab>
84
+ <w-tab-panel id="tab5" hidden>
85
+ <p>Content for tab 5</p>
86
+ </w-tab-panel>
85
87
 
86
- <w-tab-panel name="tab5" hidden>
87
- <p>Content for tab 5</p>
88
- </w-tab-panel>
89
-
90
- <w-tab-panel name="tab6" hidden>
91
- <p>Content for tab 6</p>
92
- </w-tab-panel>
88
+ <w-tab for="tab6" label="Tab 6"></w-tab>
89
+ <w-tab-panel id="tab6" hidden>
90
+ <p>Content for tab 6</p>
91
+ </w-tab-panel>
92
+ </w-tabs>
93
93
  `;