@warp-ds/elements 2.10.0-next.2 → 2.10.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 (59) hide show
  1. package/dist/custom-elements.json +149 -69
  2. package/dist/docs/combobox/accessibility.md +71 -0
  3. package/dist/docs/combobox/api.md +60 -30
  4. package/dist/docs/combobox/combobox.md +203 -30
  5. package/dist/docs/combobox/examples.md +44 -0
  6. package/dist/docs/combobox/usage.md +28 -0
  7. package/dist/docs/icon/accessibility.md +5 -0
  8. package/dist/docs/icon/api.md +37 -0
  9. package/dist/docs/icon/examples.md +45 -0
  10. package/dist/docs/icon/icon.md +107 -0
  11. package/dist/docs/icon/usage.md +11 -0
  12. package/dist/docs/link/api.md +18 -22
  13. package/dist/docs/link/examples.md +75 -0
  14. package/dist/docs/link/link.md +111 -22
  15. package/dist/docs/link/usage.md +18 -0
  16. package/dist/index.d.ts +443 -171
  17. package/dist/packages/affix/affix.js +3 -3
  18. package/dist/packages/affix/affix.js.map +3 -3
  19. package/dist/packages/alert/alert.js +1 -1
  20. package/dist/packages/alert/alert.js.map +3 -3
  21. package/dist/packages/attention/attention.js.map +3 -3
  22. package/dist/packages/button/button.js.map +2 -2
  23. package/dist/packages/checkbox/checkbox.d.ts +40 -11
  24. package/dist/packages/checkbox/checkbox.js.map +2 -2
  25. package/dist/packages/checkbox-group/checkbox-group.d.ts +30 -5
  26. package/dist/packages/checkbox-group/checkbox-group.js.map +2 -2
  27. package/dist/packages/combobox/combobox.a11y.test.js +24 -0
  28. package/dist/packages/combobox/combobox.d.ts +65 -45
  29. package/dist/packages/combobox/combobox.hydration.test.js +39 -1
  30. package/dist/packages/combobox/combobox.js +13 -13
  31. package/dist/packages/combobox/combobox.js.map +3 -3
  32. package/dist/packages/combobox/combobox.stories.js +28 -15
  33. package/dist/packages/combobox/combobox.test.js +110 -0
  34. package/dist/packages/datepicker/datepicker.js.map +3 -3
  35. package/dist/packages/expandable/expandable.js +2 -2
  36. package/dist/packages/expandable/expandable.js.map +3 -3
  37. package/dist/packages/icon/icon.d.ts +13 -3
  38. package/dist/packages/icon/icon.js +2 -2
  39. package/dist/packages/icon/icon.js.map +3 -3
  40. package/dist/packages/icon/icon.react.stories.d.ts +1 -1
  41. package/dist/packages/icon/react.d.ts +2 -2
  42. package/dist/packages/link/link.d.ts +15 -16
  43. package/dist/packages/link/link.js.map +2 -2
  44. package/dist/packages/modal/modal.d.ts +1 -0
  45. package/dist/packages/modal/modal.js +4 -4
  46. package/dist/packages/modal/modal.js.map +2 -2
  47. package/dist/packages/modal-header/modal-header.js +1 -1
  48. package/dist/packages/modal-header/modal-header.js.map +3 -3
  49. package/dist/packages/pagination/pagination.js.map +3 -3
  50. package/dist/packages/pill/pill.js.map +3 -3
  51. package/dist/packages/select/select.js.map +3 -3
  52. package/dist/packages/step/step.js +1 -1
  53. package/dist/packages/step/step.js.map +3 -3
  54. package/dist/packages/toast/toast.js +3 -3
  55. package/dist/packages/toast/toast.js.map +3 -3
  56. package/dist/packages/toast/toast.stories.d.ts +1 -5
  57. package/dist/packages/toast/toast.stories.js +0 -17
  58. package/dist/web-types.json +129 -72
  59. package/package.json +1 -1
package/dist/docs/icon/api.md ADDED
@@ -0,0 +1,37 @@
1
+ ## `<w-icon>` API
2
+
3
+ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
4
+
5
+ ### Properties
6
+
7
+ | Name | Type | Default | Summary |
8
+ |-|-|-|-|
9
+ | locale | `string` | `-` | Locale used for `<title>` text. |
10
+ | name | `string` | `-` | Icon filename (without .svg) |
11
+ | size | `'small' \| 'medium' \| 'large' \| string` | `"medium"` | Size: small, medium, large or pixel value (e.g. "32px"). |
12
+
13
+ ### Property Details
14
+
15
+ #### locale
16
+
17
+ Locale used for `<title>` text.
18
+
19
+ Reads the `lang` attribute from `<html>`, falls back to 'en'.
20
+
21
+ - Type: `string`
22
+ - Default: `-`
23
+
24
+ #### name
25
+
26
+ Icon filename (without .svg)
27
+
28
+ - Type: `string`
29
+ - Default: `-`
30
+
31
+ #### size
32
+
33
+ Size: small, medium, large or pixel value (e.g. "32px").
34
+
35
+ - Type: `'small' | 'medium' | 'large' | string`
36
+ - Default: `"medium"`
37
+
package/dist/docs/icon/examples.md ADDED
@@ -0,0 +1,45 @@
1
+ ## Examples
2
+
3
+ ### Small
4
+
5
+ <elements-example>
6
+
7
+ ```html
8
+ <w-icon name="Rocket" size="small"></w-icon>
9
+ ```
10
+
11
+ </elements-example>
12
+
13
+ ### Medium
14
+
15
+ This is the default size.
16
+
17
+ <elements-example>
18
+
19
+ ```html
20
+ <w-icon name="Rocket" size="medium"></w-icon>
21
+ ```
22
+
23
+ </elements-example>
24
+
25
+ ### Large
26
+
27
+ <elements-example>
28
+
29
+ ```html
30
+ <w-icon name="Rocket" size="large"></w-icon>
31
+ ```
32
+
33
+ </elements-example>
34
+
35
+ ### Custom size
36
+
37
+ You can set a pixel size as well if none of the presets fit your needs.
38
+
39
+ <elements-example>
40
+
41
+ ```html
42
+ <w-icon name="Rocket" size="13.37px"></w-icon>
43
+ ```
44
+
45
+ </elements-example>
package/dist/docs/icon/icon.md ADDED
@@ -0,0 +1,107 @@
1
+ # Icon (w-icon)
2
+
3
+ ## Description
4
+
5
+
6
+
7
+ ## Usage
8
+
9
+ See the [Icons overview](https://warp-ds.github.io/docs/components/icons/overview) for a list of available icons. Icon names are case sensitive.
10
+
11
+ <elements-example>
12
+
13
+ ```html
14
+ <w-icon name="Rocket"></w-icon>
15
+ ```
16
+
17
+ </elements-example>
18
+
19
+ ## Accessibility
20
+
21
+ Icons ship with a localized descriptive `<title>`.
22
+
23
+ Note that the description is about the icon itself, not its semantic meaning in every given context. If you for example make an icon button, make sure to include an `aria-label` on your button that describes its action.
24
+
25
+ ## Examples
26
+
27
+ ### Small
28
+
29
+ <elements-example>
30
+
31
+ ```html
32
+ <w-icon name="Rocket" size="small"></w-icon>
33
+ ```
34
+
35
+ </elements-example>
36
+
37
+ ### Medium
38
+
39
+ This is the default size.
40
+
41
+ <elements-example>
42
+
43
+ ```html
44
+ <w-icon name="Rocket" size="medium"></w-icon>
45
+ ```
46
+
47
+ </elements-example>
48
+
49
+ ### Large
50
+
51
+ <elements-example>
52
+
53
+ ```html
54
+ <w-icon name="Rocket" size="large"></w-icon>
55
+ ```
56
+
57
+ </elements-example>
58
+
59
+ ### Custom size
60
+
61
+ You can set a pixel size as well if none of the presets fit your needs.
62
+
63
+ <elements-example>
64
+
65
+ ```html
66
+ <w-icon name="Rocket" size="13.37px"></w-icon>
67
+ ```
68
+
69
+ </elements-example>
70
+
71
+ ## `<w-icon>` API
72
+
73
+ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
74
+
75
+ ### Properties
76
+
77
+ | Name | Type | Default | Summary |
78
+ |-|-|-|-|
79
+ | locale | `string` | `-` | Locale used for `<title>` text. |
80
+ | name | `string` | `-` | Icon filename (without .svg) |
81
+ | size | `'small' \| 'medium' \| 'large' \| string` | `"medium"` | Size: small, medium, large or pixel value (e.g. "32px"). |
82
+
83
+ ### Property Details
84
+
85
+ #### locale
86
+
87
+ Locale used for `<title>` text.
88
+
89
+ Reads the `lang` attribute from `<html>`, falls back to 'en'.
90
+
91
+ - Type: `string`
92
+ - Default: `-`
93
+
94
+ #### name
95
+
96
+ Icon filename (without .svg)
97
+
98
+ - Type: `string`
99
+ - Default: `-`
100
+
101
+ #### size
102
+
103
+ Size: small, medium, large or pixel value (e.g. "32px").
104
+
105
+ - Type: `'small' | 'medium' | 'large' | string`
106
+ - Default: `"medium"`
107
+
package/dist/docs/icon/usage.md ADDED
@@ -0,0 +1,11 @@
1
+ ## Usage
2
+
3
+ See the [Icons overview](https://warp-ds.github.io/docs/components/icons/overview) for a list of available icons. Icon names are case sensitive.
4
+
5
+ <elements-example>
6
+
7
+ ```html
8
+ <w-icon name="Rocket"></w-icon>
9
+ ```
10
+
11
+ </elements-example>
package/dist/docs/link/api.md CHANGED
@@ -6,77 +6,73 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
6
6
 
7
7
  | Name | Type | Default | Summary |
8
8
  |-|-|-|-|
9
- | autofocus | `boolean` | `false` | - |
10
- | disabled | `boolean` | `false` | - |
11
- | full-width | `boolean` | `false` | - |
12
- | href | `string` | `-` | - |
13
- | rel | `string` | `-` | - |
14
- | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
15
- | small | `boolean` | `false` | - |
16
- | target | `string` | `-` | - |
17
- | variant | [`ButtonVariant`](#buttonvariant) | `-` | - |
9
+ | autofocus | `boolean` | `false` | Focus the link after it is rendered |
10
+ | disabled | `boolean` | `false` | Applies disabled styling, but you need to disable clicks on your own. |
11
+ | full-width | `boolean` | `false` | Makes the link take up the full width of its parent |
12
+ | href | `string` | `-` | The URL the link points to |
13
+ | rel | `string` | `-` | Relationship of the linked URL. |
14
+ | small | `boolean` | `false` | Render a smaller version |
15
+ | target | `string` | `-` | Where to display the linked URL (e.g. `_blank`) |
16
+ | variant | [`ButtonVariant`](#buttonvariant) | `-` | Visual style for the link/button. |
18
17
 
19
18
  ### Property Details
20
19
 
21
20
  #### autofocus
22
21
 
23
-
22
+ Focus the link after it is rendered
24
23
 
25
24
  - Type: `boolean`
26
25
  - Default: `false`
27
26
 
28
27
  #### disabled
29
28
 
29
+ Applies disabled styling, but you need to disable clicks on your own.
30
30
 
31
+ The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.
31
32
 
32
33
  - Type: `boolean`
33
34
  - Default: `false`
34
35
 
35
36
  #### full-width
36
37
 
37
-
38
+ Makes the link take up the full width of its parent
38
39
 
39
40
  - Type: `boolean`
40
41
  - Default: `false`
41
42
 
42
43
  #### href
43
44
 
44
-
45
+ The URL the link points to
45
46
 
46
47
  - Type: `string`
47
48
  - Default: `-`
48
49
 
49
50
  #### rel
50
51
 
52
+ Relationship of the linked URL.
51
53
 
54
+ If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
52
55
 
53
56
  - Type: `string`
54
57
  - Default: `-`
55
58
 
56
- #### shadowRootOptions (JS only)
57
-
58
-
59
-
60
- - Type: `object`
61
- - Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
62
-
63
59
  #### small
64
60
 
65
-
61
+ Render a smaller version
66
62
 
67
63
  - Type: `boolean`
68
64
  - Default: `false`
69
65
 
70
66
  #### target
71
67
 
72
-
68
+ Where to display the linked URL (e.g. `_blank`)
73
69
 
74
70
  - Type: `string`
75
71
  - Default: `-`
76
72
 
77
73
  #### variant
78
74
 
79
-
75
+ Visual style for the link/button.
80
76
 
81
77
  - Type: [`ButtonVariant`](#buttonvariant)
82
78
  - Default: `-`
package/dist/docs/link/examples.md CHANGED
@@ -1 +1,76 @@
1
1
  ## Examples
2
+
3
+ ### Primary
4
+
5
+ <elements-example>
6
+
7
+ ```html
8
+ <w-link variant="primary" href="#">Go to the top of this page</w-link>
9
+ ```
10
+
11
+ </elements-example>
12
+
13
+ ### Secondary
14
+
15
+ This is the default appearance.
16
+
17
+ <elements-example>
18
+
19
+ ```html
20
+ <w-link href="#">Go to the top of this page</w-link>
21
+ ```
22
+
23
+ </elements-example>
24
+
25
+ ### Negative
26
+
27
+ <elements-example>
28
+
29
+ ```html
30
+ <w-link variant="negative" href="#">Go to the top of this page</w-link>
31
+ ```
32
+
33
+ </elements-example>
34
+
35
+ ### Utility
36
+
37
+ <elements-example>
38
+
39
+ ```html
40
+ <w-link variant="utility" href="#">Go to the top of this page</w-link>
41
+ ```
42
+
43
+ </elements-example>
44
+
45
+ ### Quiet
46
+
47
+ <elements-example>
48
+
49
+ ```html
50
+ <w-link variant="quiet" href="#">Go to the top of this page</w-link>
51
+ ```
52
+
53
+ </elements-example>
54
+
55
+ ### Small
56
+
57
+ All variants can be small.
58
+
59
+ <elements-example>
60
+
61
+ ```html
62
+ <w-link href="#" small>Go to the top of this page</w-link>
63
+ ```
64
+
65
+ </elements-example>
66
+
67
+ ### Full width
68
+
69
+
70
+ <elements-example>
71
+
72
+ ```html
73
+ <w-link href="#" full-width>Go to the top of this page</w-link>
74
+ ```
75
+
76
+ </elements-example>
package/dist/docs/link/link.md CHANGED
@@ -8,10 +8,103 @@ Buttons are used to perform actions, with different visuals for different needs.
8
8
 
9
9
  ## Usage
10
10
 
11
+ **Do:**
12
+
13
+ - Use the `<w-link>` component when you need a link that looks like a button.
14
+
15
+ **Do Not:**
16
+
17
+ - Use the `<w-link>` component when you need a link that looks like a link. In that case, use the native `<a>` tag.
18
+ - Use the `<w-link>` component when you need a button that looks like a button. In that case, use the native `<w-button>` tag.
19
+
20
+ The following table illustrates use cases and which element to use for the purpose.
21
+
22
+ | If desired behaviour is | and desired styling is | then use |
23
+ | ----------------------- | ---------------------- | ------------ |
24
+ | link | button | `<w-link>` |
25
+ | button | button | `<w-button>` |
26
+ | link | link | `<a>` |
27
+ | button | link | `<w-button>` |
28
+
11
29
  ## Accessibility
12
30
 
13
31
  ## Examples
14
32
 
33
+ ### Primary
34
+
35
+ <elements-example>
36
+
37
+ ```html
38
+ <w-link variant="primary" href="#">Go to the top of this page</w-link>
39
+ ```
40
+
41
+ </elements-example>
42
+
43
+ ### Secondary
44
+
45
+ This is the default appearance.
46
+
47
+ <elements-example>
48
+
49
+ ```html
50
+ <w-link href="#">Go to the top of this page</w-link>
51
+ ```
52
+
53
+ </elements-example>
54
+
55
+ ### Negative
56
+
57
+ <elements-example>
58
+
59
+ ```html
60
+ <w-link variant="negative" href="#">Go to the top of this page</w-link>
61
+ ```
62
+
63
+ </elements-example>
64
+
65
+ ### Utility
66
+
67
+ <elements-example>
68
+
69
+ ```html
70
+ <w-link variant="utility" href="#">Go to the top of this page</w-link>
71
+ ```
72
+
73
+ </elements-example>
74
+
75
+ ### Quiet
76
+
77
+ <elements-example>
78
+
79
+ ```html
80
+ <w-link variant="quiet" href="#">Go to the top of this page</w-link>
81
+ ```
82
+
83
+ </elements-example>
84
+
85
+ ### Small
86
+
87
+ All variants can be small.
88
+
89
+ <elements-example>
90
+
91
+ ```html
92
+ <w-link href="#" small>Go to the top of this page</w-link>
93
+ ```
94
+
95
+ </elements-example>
96
+
97
+ ### Full width
98
+
99
+
100
+ <elements-example>
101
+
102
+ ```html
103
+ <w-link href="#" full-width>Go to the top of this page</w-link>
104
+ ```
105
+
106
+ </elements-example>
107
+
15
108
  ## `<w-link>` API
16
109
 
17
110
  Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -20,77 +113,73 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
20
113
 
21
114
  | Name | Type | Default | Summary |
22
115
  |-|-|-|-|
23
- | autofocus | `boolean` | `false` | - |
24
- | disabled | `boolean` | `false` | - |
25
- | full-width | `boolean` | `false` | - |
26
- | href | `string` | `-` | - |
27
- | rel | `string` | `-` | - |
28
- | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
29
- | small | `boolean` | `false` | - |
30
- | target | `string` | `-` | - |
31
- | variant | [`ButtonVariant`](#buttonvariant) | `-` | - |
116
+ | autofocus | `boolean` | `false` | Focus the link after it is rendered |
117
+ | disabled | `boolean` | `false` | Applies disabled styling, but you need to disable clicks on your own. |
118
+ | full-width | `boolean` | `false` | Makes the link take up the full width of its parent |
119
+ | href | `string` | `-` | The URL the link points to |
120
+ | rel | `string` | `-` | Relationship of the linked URL. |
121
+ | small | `boolean` | `false` | Render a smaller version |
122
+ | target | `string` | `-` | Where to display the linked URL (e.g. `_blank`) |
123
+ | variant | [`ButtonVariant`](#buttonvariant) | `-` | Visual style for the link/button. |
32
124
 
33
125
  ### Property Details
34
126
 
35
127
  #### autofocus
36
128
 
37
-
129
+ Focus the link after it is rendered
38
130
 
39
131
  - Type: `boolean`
40
132
  - Default: `false`
41
133
 
42
134
  #### disabled
43
135
 
136
+ Applies disabled styling, but you need to disable clicks on your own.
44
137
 
138
+ The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.
45
139
 
46
140
  - Type: `boolean`
47
141
  - Default: `false`
48
142
 
49
143
  #### full-width
50
144
 
51
-
145
+ Makes the link take up the full width of its parent
52
146
 
53
147
  - Type: `boolean`
54
148
  - Default: `false`
55
149
 
56
150
  #### href
57
151
 
58
-
152
+ The URL the link points to
59
153
 
60
154
  - Type: `string`
61
155
  - Default: `-`
62
156
 
63
157
  #### rel
64
158
 
159
+ Relationship of the linked URL.
65
160
 
161
+ If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
66
162
 
67
163
  - Type: `string`
68
164
  - Default: `-`
69
165
 
70
- #### shadowRootOptions (JS only)
71
-
72
-
73
-
74
- - Type: `object`
75
- - Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
76
-
77
166
  #### small
78
167
 
79
-
168
+ Render a smaller version
80
169
 
81
170
  - Type: `boolean`
82
171
  - Default: `false`
83
172
 
84
173
  #### target
85
174
 
86
-
175
+ Where to display the linked URL (e.g. `_blank`)
87
176
 
88
177
  - Type: `string`
89
178
  - Default: `-`
90
179
 
91
180
  #### variant
92
181
 
93
-
182
+ Visual style for the link/button.
94
183
 
95
184
  - Type: [`ButtonVariant`](#buttonvariant)
96
185
  - Default: `-`
package/dist/docs/link/usage.md CHANGED
@@ -1 +1,19 @@
1
1
  ## Usage
2
+
3
+ **Do:**
4
+
5
+ - Use the `<w-link>` component when you need a link that looks like a button.
6
+
7
+ **Do Not:**
8
+
9
+ - Use the `<w-link>` component when you need a link that looks like a link. In that case, use the native `<a>` tag.
10
+ - Use the `<w-link>` component when you need a button that looks like a button. In that case, use the native `<w-button>` tag.
11
+
12
+ The following table illustrates use cases and which element to use for the purpose.
13
+
14
+ | If desired behaviour is | and desired styling is | then use |
15
+ | ----------------------- | ---------------------- | ------------ |
16
+ | link | button | `<w-link>` |
17
+ | button | button | `<w-button>` |
18
+ | link | link | `<a>` |
19
+ | button | link | `<w-button>` |