@api-client/ui 0.3.0 → 0.3.2

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 (24) hide show
  1. package/build/src/md/input/Input.d.ts +4 -3
  2. package/build/src/md/input/Input.d.ts.map +1 -1
  3. package/build/src/md/input/Input.js +15 -11
  4. package/build/src/md/input/Input.js.map +1 -1
  5. package/build/src/md/text-field/internals/common.styles.d.ts.map +1 -1
  6. package/build/src/md/text-field/internals/common.styles.js +11 -8
  7. package/build/src/md/text-field/internals/common.styles.js.map +1 -1
  8. package/build/src/md/text-field/internals/filled.styles.d.ts.map +1 -1
  9. package/build/src/md/text-field/internals/filled.styles.js +4 -0
  10. package/build/src/md/text-field/internals/filled.styles.js.map +1 -1
  11. package/build/src/md/text-field/internals/outlined.styles.d.ts.map +1 -1
  12. package/build/src/md/text-field/internals/outlined.styles.js +29 -9
  13. package/build/src/md/text-field/internals/outlined.styles.js.map +1 -1
  14. package/build/src/styles/m3/native.css +270 -0
  15. package/build/src/styles/m3/theme.css +155 -0
  16. package/build/src/styles/m3/tokens.css +512 -0
  17. package/demo/md/inputs/input.html +39 -0
  18. package/demo/md/inputs/input.ts +203 -418
  19. package/package.json +20 -4
  20. package/scripts/copy-assets.js +21 -0
  21. package/src/md/input/Input.ts +16 -11
  22. package/src/md/text-field/internals/common.styles.ts +11 -8
  23. package/src/md/text-field/internals/filled.styles.ts +4 -0
  24. package/src/md/text-field/internals/outlined.styles.ts +29 -9
package/demo/md/inputs/input.ts CHANGED
@@ -35,432 +35,217 @@ class ComponentDemoPage extends DemoPage {
35
35
 
36
36
  <form method="get" action="#" @submit="${this._submitHandler}">
37
37
  <section class="demo-section">
38
- <h2 class="title-large">Regular text field</h2>
39
-
40
- <div class="input-compare">
41
- <h3 class="title-medium">Filled</h3>
42
- <h3 class="title-medium">Outlined</h3>
43
- <div class="input">
44
- <ui-filled-text-field label="Field label" name="regular-filled"></ui-filled-text-field>
45
- </div>
46
- <div class="input">
47
- <ui-outlined-text-field label="Field label" name="regular-outlined"></ui-outlined-text-field>
48
- </div>
38
+ <h2 class="display-large">Feature comparison</h2>
39
+ <div class="demo-grid">
40
+ <span>&nbsp</span>
41
+ <span class="column-title title-medium">Filled</span>
42
+ <span class="column-title title-medium">Outlined</span>
43
+
44
+ <span class="row-name title-small">Regular</span>
45
+ <ui-filled-text-field label="Field label" name="regular-filled"></ui-filled-text-field>
46
+ <ui-outlined-text-field label="Field label" name="regular-outlined"></ui-outlined-text-field>
47
+
48
+ <span class="row-name title-small">Required</span>
49
+ <ui-filled-text-field
50
+ label="Required label"
51
+ required
52
+ invalidText="This field is required"
53
+ name="required-filled"
54
+ ></ui-filled-text-field>
55
+ <ui-outlined-text-field
56
+ label="Required label"
57
+ required
58
+ invalidText="This field is required"
59
+ name="required-outlined"
60
+ ></ui-outlined-text-field>
61
+
62
+ <span class="row-name title-small">Prefix icon</span>
63
+ <ui-filled-text-field label="Prefix input" name="prefix-filled"
64
+ ><ui-icon slot="prefix" icon="search"></ui-icon
65
+ ></ui-filled-text-field>
66
+ <ui-outlined-text-field label="Prefix input" name="prefix-outlined"
67
+ ><ui-icon slot="prefix" icon="search"></ui-icon
68
+ ></ui-outlined-text-field>
69
+
70
+ <span class="row-name title-small">Suffix icon</span>
71
+ <ui-filled-text-field label="Suffix input" name="suffix-filled"
72
+ ><ui-icon slot="suffix" icon="close"></ui-icon
73
+ ></ui-filled-text-field>
74
+ <ui-outlined-text-field label="Suffix input" name="suffix-outlined"
75
+ ><ui-icon slot="suffix" icon="close"></ui-icon
76
+ ></ui-outlined-text-field>
77
+
78
+ <span class="row-name title-small">Suffix icon</span>
79
+ <ui-filled-text-field label="Your weight" name="suffix-text-filled"
80
+ ><span slot="suffix">kg</span></ui-filled-text-field
81
+ >
82
+ <ui-outlined-text-field label="Your weight" name="suffix-text-outlined"
83
+ ><span slot="suffix">kg</span></ui-outlined-text-field
84
+ >
85
+
86
+ <span class="row-name title-small">Hiding label</span>
87
+ <ui-filled-text-field label="No label floating" name="noFloat-filled" noFloating></ui-filled-text-field>
88
+ <ui-outlined-text-field
89
+ label="No label floating"
90
+ name="noFloat-outlined"
91
+ noFloating
92
+ ></ui-outlined-text-field>
93
+
94
+ <span class="row-name title-small">Supporting text</span>
95
+ <ui-filled-text-field
96
+ label="Text field"
97
+ name="supportingText-filled"
98
+ supportingText="This is a supporting text with a long value"
99
+ ></ui-filled-text-field>
100
+ <ui-outlined-text-field
101
+ label="Text field"
102
+ name="supportingText-outlined"
103
+ supportingText="This is a supporting text with a long value"
104
+ ></ui-outlined-text-field>
105
+
106
+ <span class="row-name title-small">Text counter</span>
107
+ <ui-filled-text-field label="Count text" name="counter-filled" maxLength="75"></ui-filled-text-field>
108
+ <ui-outlined-text-field label="Count text" name="counter-outlined" maxLength="75"></ui-outlined-text-field>
109
+
110
+ <span class="row-name title-small">Supporting text + counter</span>
111
+ <ui-filled-text-field
112
+ label="Supporting counter"
113
+ maxLength="12"
114
+ supportingText="Only alphanumeric values"
115
+ pattern="[a-zA-Z0-9]*"
116
+ invalidText="Invalid value"
117
+ ><ui-icon slot="suffix" icon="visibility"></ui-icon
118
+ ></ui-filled-text-field>
119
+ <ui-outlined-text-field
120
+ label="Supporting counter"
121
+ maxLength="12"
122
+ supportingText="Only alphanumeric values"
123
+ pattern="[a-zA-Z0-9]*"
124
+ ><ui-icon slot="suffix" icon="visibility"></ui-icon
125
+ ></ui-outlined-text-field>
49
126
  </div>
50
127
  </section>
51
128
 
52
129
  <section class="demo-section">
53
- <h2 class="title-large">Required text field</h2>
54
-
55
- <div class="input-compare">
56
- <h3 class="title-medium">Filled</h3>
57
- <h3 class="title-medium">Outlined</h3>
58
- <div class="input">
59
- <ui-filled-text-field
60
- label="Required label"
61
- required
62
- invalidText="This field is required"
63
- name="required-filled"
64
- ></ui-filled-text-field>
65
- </div>
66
- <div class="input">
67
- <ui-outlined-text-field
68
- label="Required label"
69
- required
70
- invalidText="This field is required"
71
- name="required-outlined"
72
- ></ui-outlined-text-field>
73
- </div>
130
+ <h2 class="display-large">States</h2>
131
+ <div class="demo-grid">
132
+ <span>&nbsp</span>
133
+ <span class="column-title title-medium">Filled</span>
134
+ <span class="column-title title-medium">Outlined</span>
135
+
136
+ <span class="row-name title-small">Disabled</span>
137
+ <ui-filled-text-field label="Input" name="disabled-filled" value="A value" disabled></ui-filled-text-field>
138
+ <ui-outlined-text-field
139
+ label="Input"
140
+ name="disabled-outlined"
141
+ value="A value"
142
+ disabled
143
+ ></ui-outlined-text-field>
144
+
145
+ <span class="row-name title-small">Read only</span>
146
+ <ui-filled-text-field label="Input" name="readonly-filled" value="A value" readonly></ui-filled-text-field>
147
+ <ui-outlined-text-field
148
+ label="Input"
149
+ name="readonly-outlined"
150
+ value="A value"
151
+ readonly
152
+ ></ui-outlined-text-field>
153
+
154
+ <span class="row-name title-small">Invalid</span>
155
+ <ui-filled-text-field
156
+ label="Input"
157
+ name="invalid-filled"
158
+ value="invalid"
159
+ invalid
160
+ invalidText="Minimum 20 characters."
161
+ ></ui-filled-text-field>
162
+ <ui-outlined-text-field
163
+ label="Input"
164
+ name="invalid-outlined"
165
+ value="invalid"
166
+ invalid
167
+ invalidText="Minimum 20 characters."
168
+ ></ui-outlined-text-field>
74
169
  </div>
75
170
  </section>
76
171
 
77
172
  <section class="demo-section">
78
- <h2 class="title-large">Prefix icon</h2>
79
-
80
- <div class="input-compare">
81
- <h3 class="title-medium">Filled</h3>
82
- <h3 class="title-medium">Outlined</h3>
83
- <div class="input">
84
- <ui-filled-text-field label="Prefix input" name="prefix-filled"
85
- ><ui-icon slot="prefix" icon="search"></ui-icon
86
- ></ui-filled-text-field>
87
- </div>
88
- <div class="input">
89
- <ui-outlined-text-field label="Prefix input" name="prefix-outlined"
90
- ><ui-icon slot="prefix" icon="search"></ui-icon
91
- ></ui-outlined-text-field>
92
- </div>
93
- </div>
94
- </section>
95
-
96
- <section class="demo-section">
97
- <h2 class="title-large">Suffix icon</h2>
98
-
99
- <div class="input-compare">
100
- <h3 class="title-medium">Filled</h3>
101
- <h3 class="title-medium">Outlined</h3>
102
- <div class="input">
103
- <ui-filled-text-field label="Suffix input" name="suffix-filled"
104
- ><ui-icon slot="suffix" icon="close"></ui-icon
105
- ></ui-filled-text-field>
106
- </div>
107
- <div class="input">
108
- <ui-outlined-text-field label="Suffix input" name="suffix-outlined"
109
- ><ui-icon slot="suffix" icon="close"></ui-icon
110
- ></ui-outlined-text-field>
111
- </div>
112
- </div>
113
- </section>
114
-
115
- <section class="demo-section">
116
- <h2 class="title-large">Suffix text</h2>
117
-
118
- <div class="input-compare">
119
- <h3 class="title-medium">Filled</h3>
120
- <h3 class="title-medium">Outlined</h3>
121
- <div class="input">
122
- <ui-filled-text-field label="Your weight" name="suffix-text-filled"
123
- ><span slot="suffix">kg</span></ui-filled-text-field
124
- >
125
- </div>
126
- <div class="input">
127
- <ui-outlined-text-field label="Your weight" name="suffix-text-outlined"
128
- ><span slot="suffix">kg</span></ui-outlined-text-field
129
- >
130
- </div>
131
- </div>
132
- </section>
133
-
134
- <section class="demo-section">
135
- <h2 class="title-large">Hiding label</h2>
136
-
137
- <div class="input-compare">
138
- <h3 class="title-medium">Filled</h3>
139
- <h3 class="title-medium">Outlined</h3>
140
- <div class="input">
141
- <ui-filled-text-field label="No label floating" name="noFloat-filled" noFloating></ui-filled-text-field>
142
- </div>
143
- <div class="input">
144
- <ui-outlined-text-field
145
- label="No label floating"
146
- name="noFloat-outlined"
147
- noFloating
148
- ></ui-outlined-text-field>
149
- </div>
150
- </div>
151
- </section>
152
-
153
- <section class="demo-section">
154
- <h2 class="title-large">Supporting text</h2>
155
-
156
- <div class="input-compare">
157
- <h3 class="title-medium">Filled</h3>
158
- <h3 class="title-medium">Outlined</h3>
159
- <div class="input">
160
- <ui-filled-text-field
161
- label="Text field"
162
- name="supportingText-filled"
163
- supportingText="This is a supporting text with a long value"
164
- ></ui-filled-text-field>
165
- </div>
166
- <div class="input">
167
- <ui-outlined-text-field
168
- label="Text field"
169
- name="supportingText-outlined"
170
- supportingText="This is a supporting text with a long value"
171
- ></ui-outlined-text-field>
172
- </div>
173
- </div>
174
- </section>
175
-
176
- <section class="demo-section">
177
- <h2 class="title-large">Text counter</h2>
178
-
179
- <div class="input-compare">
180
- <h3 class="title-medium">Filled</h3>
181
- <h3 class="title-medium">Outlined</h3>
182
- <div class="input">
183
- <ui-filled-text-field label="Count text" name="counter-filled" maxLength="75"></ui-filled-text-field>
184
- </div>
185
- <div class="input">
186
- <ui-outlined-text-field
187
- label="Count text"
188
- name="counter-outlined"
189
- maxLength="75"
190
- ></ui-outlined-text-field>
191
- </div>
192
- </div>
193
- </section>
194
-
195
- <section class="demo-section">
196
- <h2 class="title-large">Disabled input</h2>
197
-
198
- <div class="input-compare">
199
- <h3 class="title-medium">Filled</h3>
200
- <h3 class="title-medium">Outlined</h3>
201
- <div class="input">
202
- <ui-filled-text-field
203
- label="Input"
204
- name="disabled-filled"
205
- value="A value"
206
- disabled
207
- ></ui-filled-text-field>
208
- </div>
209
- <div class="input">
210
- <ui-outlined-text-field
211
- label="Input"
212
- name="disabled-outlined"
213
- value="A value"
214
- disabled
215
- ></ui-outlined-text-field>
216
- </div>
217
- </div>
218
- </section>
219
-
220
- <section class="demo-section">
221
- <h2 class="title-large">Read only input</h2>
222
-
223
- <div class="input-compare">
224
- <h3 class="title-medium">Filled</h3>
225
- <h3 class="title-medium">Outlined</h3>
226
- <div class="input">
227
- <ui-filled-text-field
228
- label="Input"
229
- name="readonly-filled"
230
- value="A value"
231
- readonly
232
- ></ui-filled-text-field>
233
- </div>
234
- <div class="input">
235
- <ui-outlined-text-field
236
- label="Input"
237
- name="readonly-outlined"
238
- value="A value"
239
- readonly
240
- ></ui-outlined-text-field>
241
- </div>
242
- </div>
243
- </section>
244
-
245
- <section class="demo-section">
246
- <h2 class="title-large">Invalid input</h2>
247
-
248
- <div class="input-compare">
249
- <h3 class="title-medium">Filled</h3>
250
- <h3 class="title-medium">Outlined</h3>
251
- <div class="input">
252
- <ui-filled-text-field
253
- label="Input"
254
- name="invalid-filled"
255
- value="invalid"
256
- invalid
257
- invalidText="Minimum 20 characters."
258
- ></ui-filled-text-field>
259
- </div>
260
- <div class="input">
261
- <ui-outlined-text-field
262
- label="Input"
263
- name="invalid-outlined"
264
- value="invalid"
265
- invalid
266
- invalidText="Minimum 20 characters."
267
- ></ui-outlined-text-field>
268
- </div>
269
- </div>
270
- </section>
271
-
272
- <section class="demo-section">
273
- <h2 class="title-large">Color</h2>
274
-
275
- <div class="input-compare">
276
- <h3 class="title-medium">Filled</h3>
277
- <h3 class="title-medium">Outlined</h3>
278
- <div class="input">
279
- <ui-filled-text-field label="Select a color" name="color-filled" type="color"></ui-filled-text-field>
280
- </div>
281
- <div class="input">
282
- <ui-outlined-text-field
283
- label="Select a color"
284
- name="color-outlined"
285
- type="color"
286
- ></ui-outlined-text-field>
287
- </div>
288
- </div>
289
- </section>
290
-
291
- <section class="demo-section">
292
- <h2 class="title-large">Date input</h2>
293
-
294
- <div class="input-compare">
295
- <h3 class="title-medium">Filled</h3>
296
- <h3 class="title-medium">Outlined</h3>
297
- <div class="input">
298
- <ui-filled-text-field label="Select a date" name="date-filled" type="date"></ui-filled-text-field>
299
- </div>
300
- <div class="input">
301
- <ui-outlined-text-field label="Select a date" name="date-outlined" type="date"></ui-outlined-text-field>
302
- </div>
303
- </div>
304
- </section>
305
-
306
- <section class="demo-section">
307
- <h2 class="title-large">Datetime-local input</h2>
308
-
309
- <div class="input-compare">
310
- <h3 class="title-medium">Filled</h3>
311
- <h3 class="title-medium">Outlined</h3>
312
- <div class="input">
313
- <ui-filled-text-field
314
- label="Select a date and time"
315
- name="datetime-local-filled"
316
- type="datetime-local"
317
- ></ui-filled-text-field>
318
- </div>
319
- <div class="input">
320
- <ui-outlined-text-field
321
- label="Select a date and time"
322
- name="datetime-local-outlined"
323
- type="datetime-local"
324
- ></ui-outlined-text-field>
325
- </div>
326
- </div>
327
- </section>
328
-
329
- <section class="demo-section">
330
- <h2 class="title-large">Month input</h2>
331
-
332
- <div class="input-compare">
333
- <h3 class="title-medium">Filled</h3>
334
- <h3 class="title-medium">Outlined</h3>
335
- <div class="input">
336
- <ui-filled-text-field label="Select month" name="month-filled" type="month"></ui-filled-text-field>
337
- </div>
338
- <div class="input">
339
- <ui-outlined-text-field label="Select month" name="month-outlined" type="month"></ui-outlined-text-field>
340
- </div>
341
- </div>
342
- </section>
343
-
344
- <section class="demo-section">
345
- <h2 class="title-large">Week input</h2>
346
-
347
- <div class="input-compare">
348
- <h3 class="title-medium">Filled</h3>
349
- <h3 class="title-medium">Outlined</h3>
350
- <div class="input">
351
- <ui-filled-text-field label="Select week" name="week-filled" type="week"></ui-filled-text-field>
352
- </div>
353
- <div class="input">
354
- <ui-outlined-text-field label="Select week" name="week-outlined" type="week"></ui-outlined-text-field>
355
- </div>
356
- </div>
357
- </section>
358
-
359
- <section class="demo-section">
360
- <h2 class="title-large">Time input</h2>
361
-
362
- <div class="input-compare">
363
- <h3 class="title-medium">Filled</h3>
364
- <h3 class="title-medium">Outlined</h3>
365
- <div class="input">
366
- <ui-filled-text-field label="Select time" name="time-filled" type="time"></ui-filled-text-field>
367
- </div>
368
- <div class="input">
369
- <ui-outlined-text-field label="Select time" name="time-outlined" type="time"></ui-outlined-text-field>
370
- </div>
371
- </div>
372
- </section>
373
-
374
- <section class="demo-section">
375
- <h2 class="title-large">Email input</h2>
376
-
377
- <div class="input-compare">
378
- <h3 class="title-medium">Filled</h3>
379
- <h3 class="title-medium">Outlined</h3>
380
- <div class="input">
381
- <ui-filled-text-field label="Enter email" name="email-filled" type="email"></ui-filled-text-field>
382
- </div>
383
- <div class="input">
384
- <ui-outlined-text-field label="Enter email" name="email-outlined" type="email"></ui-outlined-text-field>
385
- </div>
386
- </div>
387
- </section>
388
-
389
- <section class="demo-section">
390
- <h2 class="title-large">File input</h2>
391
-
392
- <div class="input-compare">
393
- <h3 class="title-medium">Filled</h3>
394
- <h3 class="title-medium">Outlined</h3>
395
- <div class="input">
396
- <ui-filled-text-field label="Select a file" name="file-filled" type="file"></ui-filled-text-field>
397
- </div>
398
- <div class="input">
399
- <ui-outlined-text-field label="Select a file" name="file-outlined" type="file"></ui-outlined-text-field>
400
- </div>
401
- </div>
402
- </section>
403
-
404
- <section class="demo-section">
405
- <h2 class="title-large">Number input</h2>
406
-
407
- <div class="input-compare">
408
- <h3 class="title-medium">Filled</h3>
409
- <h3 class="title-medium">Outlined</h3>
410
- <div class="input">
411
- <ui-filled-text-field
412
- label="Enter a number"
413
- name="number-filled"
414
- type="number"
415
- step="10"
416
- min="0"
417
- max="100"
418
- ></ui-filled-text-field>
419
- </div>
420
- <div class="input">
421
- <ui-outlined-text-field
422
- label="Enter a number"
423
- name="number-outlined"
424
- type="number"
425
- step="10"
426
- min="0"
427
- max="100"
428
- ></ui-outlined-text-field>
429
- </div>
430
- </div>
431
- </section>
432
-
433
- <section class="demo-section">
434
- <h2 class="title-large">Tel input</h2>
435
-
436
- <div class="input-compare">
437
- <h3 class="title-medium">Filled</h3>
438
- <h3 class="title-medium">Outlined</h3>
439
- <div class="input">
440
- <ui-filled-text-field label="Enter a phone number" name="tel-filled" type="tel"></ui-filled-text-field>
441
- </div>
442
- <div class="input">
443
- <ui-outlined-text-field
444
- label="Enter a phone number"
445
- name="tel-outlined"
446
- type="tel"
447
- ></ui-outlined-text-field>
448
- </div>
449
- </div>
450
- </section>
451
-
452
- <section class="demo-section">
453
- <h2 class="title-large">URL input</h2>
454
-
455
- <div class="input-compare">
456
- <h3 class="title-medium">Filled</h3>
457
- <h3 class="title-medium">Outlined</h3>
458
- <div class="input">
459
- <ui-filled-text-field label="Enter a url" name="url-filled" type="url"></ui-filled-text-field>
460
- </div>
461
- <div class="input">
462
- <ui-outlined-text-field label="Enter a url" name="url-outlined" type="url"></ui-outlined-text-field>
463
- </div>
173
+ <h2 class="display-large">Types</h2>
174
+
175
+ <div class="demo-grid">
176
+ <span>&nbsp</span>
177
+ <span class="column-title title-medium">Filled</span>
178
+ <span class="column-title title-medium">Outlined</span>
179
+
180
+ <span class="row-name title-small">Color</span>
181
+ <ui-filled-text-field label="Select a color" name="color-filled" type="color"></ui-filled-text-field>
182
+ <ui-outlined-text-field label="Select a color" name="color-outlined" type="color"></ui-outlined-text-field>
183
+
184
+ <span class="row-name title-small">Date</span>
185
+ <ui-filled-text-field label="Select a date" name="date-filled" type="date"></ui-filled-text-field>
186
+ <ui-outlined-text-field label="Select a date" name="date-outlined" type="date"></ui-outlined-text-field>
187
+
188
+ <span class="row-name title-small">Datetime-local</span>
189
+ <ui-filled-text-field
190
+ label="Select a date and time"
191
+ name="datetime-local-filled"
192
+ type="datetime-local"
193
+ ></ui-filled-text-field>
194
+ <ui-outlined-text-field
195
+ label="Select a date and time"
196
+ name="datetime-local-outlined"
197
+ type="datetime-local"
198
+ ></ui-outlined-text-field>
199
+
200
+ <span class="row-name title-small">Datetime-local</span>
201
+ <ui-filled-text-field label="Select month" name="month-filled" type="month"></ui-filled-text-field>
202
+ <ui-outlined-text-field label="Select month" name="month-outlined" type="month"></ui-outlined-text-field>
203
+
204
+ <span class="row-name title-small">Week</span>
205
+ <ui-filled-text-field label="Select week" name="week-filled" type="week"></ui-filled-text-field>
206
+ <ui-outlined-text-field label="Select week" name="week-outlined" type="week"></ui-outlined-text-field>
207
+
208
+ <span class="row-name title-small">Time</span>
209
+ <ui-filled-text-field label="Select time" name="time-filled" type="time"></ui-filled-text-field>
210
+ <ui-outlined-text-field label="Select time" name="time-outlined" type="time"></ui-outlined-text-field>
211
+
212
+ <span class="row-name title-small">Email</span>
213
+ <ui-filled-text-field label="Enter email" name="email-filled" type="email"></ui-filled-text-field>
214
+ <ui-outlined-text-field label="Enter email" name="email-outlined" type="email"></ui-outlined-text-field>
215
+
216
+ <span class="row-name title-small">File</span>
217
+ <ui-filled-text-field label="Select a file" name="file-filled" type="file"></ui-filled-text-field>
218
+ <ui-outlined-text-field label="Select a file" name="file-outlined" type="file"></ui-outlined-text-field>
219
+
220
+ <span class="row-name title-small">Number</span>
221
+ <ui-filled-text-field
222
+ label="Enter a number"
223
+ name="number-filled"
224
+ type="number"
225
+ step="10"
226
+ min="0"
227
+ max="100"
228
+ ></ui-filled-text-field>
229
+ <ui-outlined-text-field
230
+ label="Enter a number"
231
+ name="number-outlined"
232
+ type="number"
233
+ step="10"
234
+ min="0"
235
+ max="100"
236
+ ></ui-outlined-text-field>
237
+
238
+ <span class="row-name title-small">Tel</span>
239
+ <ui-filled-text-field label="Enter a phone number" name="tel-filled" type="tel"></ui-filled-text-field>
240
+ <ui-outlined-text-field
241
+ label="Enter a phone number"
242
+ name="tel-outlined"
243
+ type="tel"
244
+ ></ui-outlined-text-field>
245
+
246
+ <span class="row-name title-small">URL</span>
247
+ <ui-filled-text-field label="Enter a url" name="url-filled" type="url"></ui-filled-text-field>
248
+ <ui-outlined-text-field label="Enter a url" name="url-outlined" type="url"></ui-outlined-text-field>
464
249
  </div>
465
250
  </section>
466
251