@warp-ds/elements 2.9.0-next.6 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +62 -21
- package/dist/docs/affix/affix.md +24 -38
- package/dist/docs/affix/examples.md +24 -38
- package/dist/docs/alert/accessibility.md +4 -9
- package/dist/docs/alert/alert.md +24 -39
- package/dist/docs/alert/examples.md +20 -30
- package/dist/docs/attention/accessibility.md +50 -0
- package/dist/docs/attention/api.md +40 -27
- package/dist/docs/attention/attention.md +276 -27
- package/dist/docs/attention/examples.md +91 -0
- package/dist/docs/attention/usage.md +91 -0
- package/dist/docs/badge/badge.md +23 -36
- package/dist/docs/badge/examples.md +23 -36
- package/dist/docs/textarea/accessibility.md +5 -0
- package/dist/docs/textarea/api.md +32 -47
- package/dist/docs/textarea/examples.md +81 -0
- package/dist/docs/textarea/textarea.md +133 -49
- package/dist/docs/textarea/usage.md +9 -0
- package/dist/docs/textfield/examples.md +32 -49
- package/dist/docs/textfield/textfield.md +39 -60
- package/dist/docs/textfield/usage.md +7 -11
- package/dist/index.d.ts +236 -134
- package/dist/packages/attention/attention.d.ts +46 -37
- package/dist/packages/attention/attention.js +20 -20
- package/dist/packages/attention/attention.js.map +3 -3
- package/dist/packages/textarea/textarea.d.ts +38 -29
- package/dist/packages/textarea/textarea.js.map +2 -2
- package/dist/web-types.json +182 -38
- package/package.json +1 -2
|
@@ -7,21 +7,17 @@ Placeholder text can be used to describe the expected value or formatting for th
|
|
|
7
7
|
Placeholder text will only appear when the textfield is empty, and must not be used as a
|
|
8
8
|
substitute for labeling the element with a visible label.
|
|
9
9
|
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
</style-isolate>
|
|
13
|
-
|
|
10
|
+
<elements-example>
|
|
11
|
+
|
|
14
12
|
```html
|
|
15
13
|
<w-textfield label="Email" placeholder="ola.nordmann@finn.no"></w-textfield>
|
|
16
14
|
```
|
|
17
15
|
|
|
16
|
+
</elements-example>
|
|
17
|
+
|
|
18
18
|
### Prefix label
|
|
19
19
|
|
|
20
|
-
<
|
|
21
|
-
<w-textfield label="Price">
|
|
22
|
-
<w-affix slot="prefix" label="kr"></w-affix>
|
|
23
|
-
</w-textfield>
|
|
24
|
-
</style-isolate>
|
|
20
|
+
<elements-example>
|
|
25
21
|
|
|
26
22
|
```html
|
|
27
23
|
<w-textfield label="Price">
|
|
@@ -29,45 +25,37 @@ substitute for labeling the element with a visible label.
|
|
|
29
25
|
</w-textfield>
|
|
30
26
|
```
|
|
31
27
|
|
|
32
|
-
|
|
28
|
+
</elements-example>
|
|
33
29
|
|
|
34
|
-
|
|
35
|
-
<w-textfield label="Price">
|
|
36
|
-
<w-affix slot="suffix" label="kr"></w-affix>
|
|
37
|
-
</w-textfield>
|
|
38
|
-
</style-isolate>
|
|
30
|
+
### Suffix Label
|
|
39
31
|
|
|
32
|
+
<elements-example>
|
|
33
|
+
|
|
40
34
|
```html
|
|
41
35
|
<w-textfield label="Price">
|
|
42
36
|
<w-affix slot="suffix" label="kr"></w-affix>
|
|
43
37
|
</w-textfield>
|
|
44
38
|
```
|
|
45
39
|
|
|
46
|
-
|
|
40
|
+
</elements-example>
|
|
47
41
|
|
|
48
|
-
|
|
49
|
-
<w-textfield label="Search">
|
|
50
|
-
<w-affix slot="prefix" search></w-affix>
|
|
51
|
-
</w-textfield>
|
|
52
|
-
</style-isolate>
|
|
42
|
+
### Prefix Search Icon
|
|
53
43
|
|
|
44
|
+
<elements-example>
|
|
45
|
+
|
|
54
46
|
```html
|
|
55
47
|
<w-textfield label="Search">
|
|
56
48
|
<w-affix slot="prefix" search></w-affix>
|
|
57
49
|
</w-textfield>
|
|
58
50
|
```
|
|
59
51
|
|
|
52
|
+
</elements-example>
|
|
53
|
+
|
|
60
54
|
### Suffix Search Icon
|
|
61
55
|
|
|
62
56
|
If you wrap the textfield with affix in a form element, clicking the search button will automatically submit the form
|
|
63
57
|
|
|
64
|
-
<
|
|
65
|
-
<form>
|
|
66
|
-
<w-textfield label="Search">
|
|
67
|
-
<w-affix slot="suffix" search></w-affix>
|
|
68
|
-
</w-textfield>
|
|
69
|
-
</form>
|
|
70
|
-
</style-isolate>
|
|
58
|
+
<elements-example>
|
|
71
59
|
|
|
72
60
|
```html
|
|
73
61
|
<form>
|
|
@@ -77,15 +65,13 @@ If you wrap the textfield with affix in a form element, clicking the search butt
|
|
|
77
65
|
</form>
|
|
78
66
|
```
|
|
79
67
|
|
|
68
|
+
</elements-example>
|
|
69
|
+
|
|
80
70
|
### Suffix Clear Icon
|
|
81
71
|
|
|
82
72
|
Clicking the clear button will reset the textfield
|
|
83
73
|
|
|
84
|
-
<
|
|
85
|
-
<w-textfield label="Search input">
|
|
86
|
-
<w-affix slot="suffix" clear></w-affix>
|
|
87
|
-
</w-textfield>
|
|
88
|
-
</style-isolate>
|
|
74
|
+
<elements-example>
|
|
89
75
|
|
|
90
76
|
```html
|
|
91
77
|
<w-textfield label="Search input">
|
|
@@ -93,20 +79,20 @@ Clicking the clear button will reset the textfield
|
|
|
93
79
|
</w-textfield>
|
|
94
80
|
```
|
|
95
81
|
|
|
96
|
-
|
|
82
|
+
</elements-example>
|
|
97
83
|
|
|
98
|
-
|
|
99
|
-
<w-textfield label="Award">
|
|
100
|
-
<w-affix slot="prefix" icon="AwardMedal"></w-affix>
|
|
101
|
-
</w-textfield>
|
|
102
|
-
</style-isolate>
|
|
84
|
+
### Affix with arbitrary icon
|
|
103
85
|
|
|
86
|
+
<elements-example>
|
|
87
|
+
|
|
104
88
|
```html
|
|
105
89
|
<w-textfield label="Award">
|
|
106
90
|
<w-affix slot="prefix" icon="AwardMedal"></w-affix>
|
|
107
91
|
</w-textfield>
|
|
108
92
|
```
|
|
109
93
|
|
|
94
|
+
</elements-example>
|
|
95
|
+
|
|
110
96
|
### Disabled
|
|
111
97
|
|
|
112
98
|
Keep in mind that using disabled in its current form is an anti-pattern.
|
|
@@ -116,13 +102,8 @@ it is disabled because of poor lighting conditions or other reasons.
|
|
|
116
102
|
|
|
117
103
|
Please consider more informative alternatives before choosing to use disabled on an element.
|
|
118
104
|
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
<w-textfield label="Email" disabled value="ola.nordmann@finn.no"></w-textfield>
|
|
122
|
-
<w-textfield label="Email" disabled></w-textfield>
|
|
123
|
-
</div>
|
|
124
|
-
</style-isolate>
|
|
125
|
-
|
|
105
|
+
<elements-example>
|
|
106
|
+
|
|
126
107
|
```html
|
|
127
108
|
<div class="flex flex-col space-y-32">
|
|
128
109
|
<w-textfield label="Email" disabled value="ola.nordmann@finn.no"></w-textfield>
|
|
@@ -130,13 +111,13 @@ Please consider more informative alternatives before choosing to use disabled on
|
|
|
130
111
|
</div>
|
|
131
112
|
```
|
|
132
113
|
|
|
114
|
+
</elements-example>
|
|
115
|
+
|
|
133
116
|
### Read only
|
|
134
117
|
|
|
135
118
|
The readonly boolean attribute makes the w-textfield's text content immutable. Unlike disabled the w-textfield remains focusable and the contents can still be copied. See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/readOnly) for more information.
|
|
136
119
|
|
|
137
|
-
<
|
|
138
|
-
<w-textfield label="Email" type="email" value="ola.nordmann@finn.no" readonly></w-textfield>
|
|
139
|
-
</style-isolate>
|
|
120
|
+
<elements-example>
|
|
140
121
|
|
|
141
122
|
```html
|
|
142
123
|
<w-textfield
|
|
@@ -146,3 +127,5 @@ The readonly boolean attribute makes the w-textfield's text content immutable. U
|
|
|
146
127
|
readonly
|
|
147
128
|
></w-textfield>
|
|
148
129
|
```
|
|
130
|
+
|
|
131
|
+
</elements-example>
|
|
@@ -6,27 +6,21 @@ A single-line input component used for entering and editing textual or numeric d
|
|
|
6
6
|
|
|
7
7
|
## Usage
|
|
8
8
|
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
</style-isolate>
|
|
12
|
-
|
|
9
|
+
<elements-example>
|
|
10
|
+
|
|
13
11
|
```html
|
|
14
12
|
<w-textfield label="Email" type="email"></w-textfield>
|
|
15
13
|
```
|
|
16
14
|
|
|
15
|
+
</elements-example>
|
|
16
|
+
|
|
17
17
|
### Validation
|
|
18
18
|
|
|
19
19
|
Set the `invalid` attribute to display a textfield as invalid.
|
|
20
20
|
|
|
21
21
|
`invalid` should be paired with `help-text` to provide feedback to the user about how to correct the error.
|
|
22
22
|
|
|
23
|
-
<
|
|
24
|
-
<w-textfield
|
|
25
|
-
label="Email"
|
|
26
|
-
invalid
|
|
27
|
-
help-text="An email should have an @ sign and a domain name, for example ola.nordmann@finn.no"
|
|
28
|
-
></w-textfield>
|
|
29
|
-
</style-isolate>
|
|
23
|
+
<elements-example>
|
|
30
24
|
|
|
31
25
|
```html
|
|
32
26
|
<w-textfield
|
|
@@ -36,6 +30,8 @@ Set the `invalid` attribute to display a textfield as invalid.
|
|
|
36
30
|
></w-textfield>
|
|
37
31
|
```
|
|
38
32
|
|
|
33
|
+
</elements-example>
|
|
34
|
+
|
|
39
35
|
## Accessibility
|
|
40
36
|
|
|
41
37
|
If a visible label isn't specified, an `aria-label` must be provided to the text field for accessibility. If the field is labeled by a separate element, an `aria-labelledby` property must be provided using the `id` of the labeling element instead.
|
|
@@ -62,21 +58,17 @@ Placeholder text can be used to describe the expected value or formatting for th
|
|
|
62
58
|
Placeholder text will only appear when the textfield is empty, and must not be used as a
|
|
63
59
|
substitute for labeling the element with a visible label.
|
|
64
60
|
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
</style-isolate>
|
|
68
|
-
|
|
61
|
+
<elements-example>
|
|
62
|
+
|
|
69
63
|
```html
|
|
70
64
|
<w-textfield label="Email" placeholder="ola.nordmann@finn.no"></w-textfield>
|
|
71
65
|
```
|
|
72
66
|
|
|
67
|
+
</elements-example>
|
|
68
|
+
|
|
73
69
|
### Prefix label
|
|
74
70
|
|
|
75
|
-
<
|
|
76
|
-
<w-textfield label="Price">
|
|
77
|
-
<w-affix slot="prefix" label="kr"></w-affix>
|
|
78
|
-
</w-textfield>
|
|
79
|
-
</style-isolate>
|
|
71
|
+
<elements-example>
|
|
80
72
|
|
|
81
73
|
```html
|
|
82
74
|
<w-textfield label="Price">
|
|
@@ -84,45 +76,37 @@ substitute for labeling the element with a visible label.
|
|
|
84
76
|
</w-textfield>
|
|
85
77
|
```
|
|
86
78
|
|
|
87
|
-
|
|
79
|
+
</elements-example>
|
|
88
80
|
|
|
89
|
-
|
|
90
|
-
<w-textfield label="Price">
|
|
91
|
-
<w-affix slot="suffix" label="kr"></w-affix>
|
|
92
|
-
</w-textfield>
|
|
93
|
-
</style-isolate>
|
|
81
|
+
### Suffix Label
|
|
94
82
|
|
|
83
|
+
<elements-example>
|
|
84
|
+
|
|
95
85
|
```html
|
|
96
86
|
<w-textfield label="Price">
|
|
97
87
|
<w-affix slot="suffix" label="kr"></w-affix>
|
|
98
88
|
</w-textfield>
|
|
99
89
|
```
|
|
100
90
|
|
|
101
|
-
|
|
91
|
+
</elements-example>
|
|
102
92
|
|
|
103
|
-
|
|
104
|
-
<w-textfield label="Search">
|
|
105
|
-
<w-affix slot="prefix" search></w-affix>
|
|
106
|
-
</w-textfield>
|
|
107
|
-
</style-isolate>
|
|
93
|
+
### Prefix Search Icon
|
|
108
94
|
|
|
95
|
+
<elements-example>
|
|
96
|
+
|
|
109
97
|
```html
|
|
110
98
|
<w-textfield label="Search">
|
|
111
99
|
<w-affix slot="prefix" search></w-affix>
|
|
112
100
|
</w-textfield>
|
|
113
101
|
```
|
|
114
102
|
|
|
103
|
+
</elements-example>
|
|
104
|
+
|
|
115
105
|
### Suffix Search Icon
|
|
116
106
|
|
|
117
107
|
If you wrap the textfield with affix in a form element, clicking the search button will automatically submit the form
|
|
118
108
|
|
|
119
|
-
<
|
|
120
|
-
<form>
|
|
121
|
-
<w-textfield label="Search">
|
|
122
|
-
<w-affix slot="suffix" search></w-affix>
|
|
123
|
-
</w-textfield>
|
|
124
|
-
</form>
|
|
125
|
-
</style-isolate>
|
|
109
|
+
<elements-example>
|
|
126
110
|
|
|
127
111
|
```html
|
|
128
112
|
<form>
|
|
@@ -132,15 +116,13 @@ If you wrap the textfield with affix in a form element, clicking the search butt
|
|
|
132
116
|
</form>
|
|
133
117
|
```
|
|
134
118
|
|
|
119
|
+
</elements-example>
|
|
120
|
+
|
|
135
121
|
### Suffix Clear Icon
|
|
136
122
|
|
|
137
123
|
Clicking the clear button will reset the textfield
|
|
138
124
|
|
|
139
|
-
<
|
|
140
|
-
<w-textfield label="Search input">
|
|
141
|
-
<w-affix slot="suffix" clear></w-affix>
|
|
142
|
-
</w-textfield>
|
|
143
|
-
</style-isolate>
|
|
125
|
+
<elements-example>
|
|
144
126
|
|
|
145
127
|
```html
|
|
146
128
|
<w-textfield label="Search input">
|
|
@@ -148,20 +130,20 @@ Clicking the clear button will reset the textfield
|
|
|
148
130
|
</w-textfield>
|
|
149
131
|
```
|
|
150
132
|
|
|
151
|
-
|
|
133
|
+
</elements-example>
|
|
152
134
|
|
|
153
|
-
|
|
154
|
-
<w-textfield label="Award">
|
|
155
|
-
<w-affix slot="prefix" icon="AwardMedal"></w-affix>
|
|
156
|
-
</w-textfield>
|
|
157
|
-
</style-isolate>
|
|
135
|
+
### Affix with arbitrary icon
|
|
158
136
|
|
|
137
|
+
<elements-example>
|
|
138
|
+
|
|
159
139
|
```html
|
|
160
140
|
<w-textfield label="Award">
|
|
161
141
|
<w-affix slot="prefix" icon="AwardMedal"></w-affix>
|
|
162
142
|
</w-textfield>
|
|
163
143
|
```
|
|
164
144
|
|
|
145
|
+
</elements-example>
|
|
146
|
+
|
|
165
147
|
### Disabled
|
|
166
148
|
|
|
167
149
|
Keep in mind that using disabled in its current form is an anti-pattern.
|
|
@@ -171,13 +153,8 @@ it is disabled because of poor lighting conditions or other reasons.
|
|
|
171
153
|
|
|
172
154
|
Please consider more informative alternatives before choosing to use disabled on an element.
|
|
173
155
|
|
|
174
|
-
<
|
|
175
|
-
|
|
176
|
-
<w-textfield label="Email" disabled value="ola.nordmann@finn.no"></w-textfield>
|
|
177
|
-
<w-textfield label="Email" disabled></w-textfield>
|
|
178
|
-
</div>
|
|
179
|
-
</style-isolate>
|
|
180
|
-
|
|
156
|
+
<elements-example>
|
|
157
|
+
|
|
181
158
|
```html
|
|
182
159
|
<div class="flex flex-col space-y-32">
|
|
183
160
|
<w-textfield label="Email" disabled value="ola.nordmann@finn.no"></w-textfield>
|
|
@@ -185,13 +162,13 @@ Please consider more informative alternatives before choosing to use disabled on
|
|
|
185
162
|
</div>
|
|
186
163
|
```
|
|
187
164
|
|
|
165
|
+
</elements-example>
|
|
166
|
+
|
|
188
167
|
### Read only
|
|
189
168
|
|
|
190
169
|
The readonly boolean attribute makes the w-textfield's text content immutable. Unlike disabled the w-textfield remains focusable and the contents can still be copied. See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/readOnly) for more information.
|
|
191
170
|
|
|
192
|
-
<
|
|
193
|
-
<w-textfield label="Email" type="email" value="ola.nordmann@finn.no" readonly></w-textfield>
|
|
194
|
-
</style-isolate>
|
|
171
|
+
<elements-example>
|
|
195
172
|
|
|
196
173
|
```html
|
|
197
174
|
<w-textfield
|
|
@@ -202,6 +179,8 @@ The readonly boolean attribute makes the w-textfield's text content immutable. U
|
|
|
202
179
|
></w-textfield>
|
|
203
180
|
```
|
|
204
181
|
|
|
182
|
+
</elements-example>
|
|
183
|
+
|
|
205
184
|
## API Documentation
|
|
206
185
|
|
|
207
186
|
### Properties
|
|
@@ -1,26 +1,20 @@
|
|
|
1
1
|
## Usage
|
|
2
2
|
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
</style-isolate>
|
|
6
|
-
|
|
3
|
+
<elements-example>
|
|
4
|
+
|
|
7
5
|
```html
|
|
8
6
|
<w-textfield label="Email" type="email"></w-textfield>
|
|
9
7
|
```
|
|
10
8
|
|
|
9
|
+
</elements-example>
|
|
10
|
+
|
|
11
11
|
### Validation
|
|
12
12
|
|
|
13
13
|
Set the `invalid` attribute to display a textfield as invalid.
|
|
14
14
|
|
|
15
15
|
`invalid` should be paired with `help-text` to provide feedback to the user about how to correct the error.
|
|
16
16
|
|
|
17
|
-
<
|
|
18
|
-
<w-textfield
|
|
19
|
-
label="Email"
|
|
20
|
-
invalid
|
|
21
|
-
help-text="An email should have an @ sign and a domain name, for example ola.nordmann@finn.no"
|
|
22
|
-
></w-textfield>
|
|
23
|
-
</style-isolate>
|
|
17
|
+
<elements-example>
|
|
24
18
|
|
|
25
19
|
```html
|
|
26
20
|
<w-textfield
|
|
@@ -29,3 +23,5 @@ Set the `invalid` attribute to display a textfield as invalid.
|
|
|
29
23
|
help-text="An email should have an @ sign and a domain name, for example ola.nordmann@finn.no"
|
|
30
24
|
></w-textfield>
|
|
31
25
|
```
|
|
26
|
+
|
|
27
|
+
</elements-example>
|