@vaadin/password-field 25.2.7 → 25.3.0-alpha10
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/custom-elements.json +67 -4
- package/package.json +12 -12
- package/src/vaadin-password-field-button.js +1 -0
- package/src/vaadin-password-field.js +3 -1
- package/web-types.json +42 -8
- package/web-types.lit.json +17 -3
package/custom-elements.json
CHANGED
|
@@ -190,6 +190,20 @@
|
|
|
190
190
|
"description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`field-button` | Set on both clear and reveal buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`reveal-button` | The eye icon which toggles the password visibility\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`input-prevented` | Temporarily set when invalid input is prevented\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`password-visible` | Set when the password is visible\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
191
191
|
"name": "PasswordField",
|
|
192
192
|
"members": [
|
|
193
|
+
{
|
|
194
|
+
"kind": "field",
|
|
195
|
+
"name": "accessibleDescriptionRef",
|
|
196
|
+
"privacy": "public",
|
|
197
|
+
"type": {
|
|
198
|
+
"text": "string"
|
|
199
|
+
},
|
|
200
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
201
|
+
"attribute": "accessible-description-ref",
|
|
202
|
+
"inheritedFrom": {
|
|
203
|
+
"name": "FieldMixin",
|
|
204
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
205
|
+
}
|
|
206
|
+
},
|
|
193
207
|
{
|
|
194
208
|
"kind": "field",
|
|
195
209
|
"name": "accessibleName",
|
|
@@ -197,7 +211,7 @@
|
|
|
197
211
|
"type": {
|
|
198
212
|
"text": "string"
|
|
199
213
|
},
|
|
200
|
-
"description": "String used to label the component
|
|
214
|
+
"description": "String used to label the component for screen reader users.",
|
|
201
215
|
"attribute": "accessible-name",
|
|
202
216
|
"inheritedFrom": {
|
|
203
217
|
"name": "FieldMixin",
|
|
@@ -211,7 +225,7 @@
|
|
|
211
225
|
"type": {
|
|
212
226
|
"text": "string"
|
|
213
227
|
},
|
|
214
|
-
"description": "
|
|
228
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
215
229
|
"attribute": "accessible-name-ref",
|
|
216
230
|
"inheritedFrom": {
|
|
217
231
|
"name": "FieldMixin",
|
|
@@ -395,6 +409,20 @@
|
|
|
395
409
|
"module": "src/vaadin-password-field-mixin.js"
|
|
396
410
|
}
|
|
397
411
|
},
|
|
412
|
+
{
|
|
413
|
+
"kind": "field",
|
|
414
|
+
"name": "inputMode",
|
|
415
|
+
"privacy": "public",
|
|
416
|
+
"type": {
|
|
417
|
+
"text": "string"
|
|
418
|
+
},
|
|
419
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
420
|
+
"attribute": "inputmode",
|
|
421
|
+
"inheritedFrom": {
|
|
422
|
+
"name": "TextFieldMixin",
|
|
423
|
+
"package": "@vaadin/text-field/src/vaadin-text-field-mixin.js"
|
|
424
|
+
}
|
|
425
|
+
},
|
|
398
426
|
{
|
|
399
427
|
"kind": "field",
|
|
400
428
|
"name": "invalid",
|
|
@@ -677,12 +705,24 @@
|
|
|
677
705
|
"tagName": "vaadin-password-field",
|
|
678
706
|
"customElement": true,
|
|
679
707
|
"attributes": [
|
|
708
|
+
{
|
|
709
|
+
"name": "accessible-description-ref",
|
|
710
|
+
"type": {
|
|
711
|
+
"text": "string"
|
|
712
|
+
},
|
|
713
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
714
|
+
"fieldName": "accessibleDescriptionRef",
|
|
715
|
+
"inheritedFrom": {
|
|
716
|
+
"name": "FieldMixin",
|
|
717
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
718
|
+
}
|
|
719
|
+
},
|
|
680
720
|
{
|
|
681
721
|
"name": "accessible-name",
|
|
682
722
|
"type": {
|
|
683
723
|
"text": "string"
|
|
684
724
|
},
|
|
685
|
-
"description": "String used to label the component
|
|
725
|
+
"description": "String used to label the component for screen reader users.",
|
|
686
726
|
"fieldName": "accessibleName",
|
|
687
727
|
"inheritedFrom": {
|
|
688
728
|
"name": "FieldMixin",
|
|
@@ -694,7 +734,7 @@
|
|
|
694
734
|
"type": {
|
|
695
735
|
"text": "string"
|
|
696
736
|
},
|
|
697
|
-
"description": "
|
|
737
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
698
738
|
"fieldName": "accessibleNameRef",
|
|
699
739
|
"inheritedFrom": {
|
|
700
740
|
"name": "FieldMixin",
|
|
@@ -821,6 +861,18 @@
|
|
|
821
861
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
822
862
|
}
|
|
823
863
|
},
|
|
864
|
+
{
|
|
865
|
+
"name": "inputmode",
|
|
866
|
+
"type": {
|
|
867
|
+
"text": "string"
|
|
868
|
+
},
|
|
869
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
870
|
+
"fieldName": "inputMode",
|
|
871
|
+
"inheritedFrom": {
|
|
872
|
+
"name": "TextFieldMixin",
|
|
873
|
+
"package": "@vaadin/text-field/src/vaadin-text-field-mixin.js"
|
|
874
|
+
}
|
|
875
|
+
},
|
|
824
876
|
{
|
|
825
877
|
"name": "invalid",
|
|
826
878
|
"type": {
|
|
@@ -965,6 +1017,17 @@
|
|
|
965
1017
|
"module": "src/vaadin-password-field-mixin.js"
|
|
966
1018
|
}
|
|
967
1019
|
},
|
|
1020
|
+
{
|
|
1021
|
+
"type": {
|
|
1022
|
+
"text": "string"
|
|
1023
|
+
},
|
|
1024
|
+
"description": "The theme variants to apply to the component.",
|
|
1025
|
+
"name": "theme",
|
|
1026
|
+
"inheritedFrom": {
|
|
1027
|
+
"name": "TextField",
|
|
1028
|
+
"package": "@vaadin/text-field/src/vaadin-text-field.js"
|
|
1029
|
+
}
|
|
1030
|
+
},
|
|
968
1031
|
{
|
|
969
1032
|
"name": "title",
|
|
970
1033
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/password-field",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.3.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,20 +35,20 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "
|
|
39
|
-
"@vaadin/button": "
|
|
40
|
-
"@vaadin/component-base": "
|
|
41
|
-
"@vaadin/field-base": "
|
|
42
|
-
"@vaadin/text-field": "
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-alpha10",
|
|
39
|
+
"@vaadin/button": "25.3.0-alpha10",
|
|
40
|
+
"@vaadin/component-base": "25.3.0-alpha10",
|
|
41
|
+
"@vaadin/field-base": "25.3.0-alpha10",
|
|
42
|
+
"@vaadin/text-field": "25.3.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/aura": "
|
|
48
|
-
"@vaadin/chai-plugins": "
|
|
49
|
-
"@vaadin/test-runner-commands": "
|
|
47
|
+
"@vaadin/aura": "25.3.0-alpha10",
|
|
48
|
+
"@vaadin/chai-plugins": "25.3.0-alpha10",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha10",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
|
|
52
52
|
"sinon": "^22.0.0"
|
|
53
53
|
},
|
|
54
54
|
"customElements": "custom-elements.json",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
|
|
60
60
|
}
|
|
@@ -15,6 +15,7 @@ import { passwordFieldButton } from './styles/vaadin-password-field-button-base-
|
|
|
15
15
|
/**
|
|
16
16
|
* An element used internally by `<vaadin-password-field>`. Not intended to be used separately.
|
|
17
17
|
*
|
|
18
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
18
19
|
* @customElement vaadin-password-field-button
|
|
19
20
|
* @extends HTMLElement
|
|
20
21
|
* @private
|
|
@@ -101,7 +101,7 @@ import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
|
|
|
101
101
|
* @customElement vaadin-password-field
|
|
102
102
|
* @extends TextField
|
|
103
103
|
*/
|
|
104
|
-
|
|
104
|
+
class PasswordField extends PasswordFieldMixin(TextField) {
|
|
105
105
|
static get is() {
|
|
106
106
|
return 'vaadin-password-field';
|
|
107
107
|
}
|
|
@@ -125,3 +125,5 @@ export class PasswordField extends PasswordFieldMixin(TextField) {
|
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
defineCustomElement(PasswordField);
|
|
128
|
+
|
|
129
|
+
export { PasswordField };
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/password-field",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -10,9 +10,18 @@
|
|
|
10
10
|
"name": "vaadin-password-field",
|
|
11
11
|
"description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`field-button` | Set on both clear and reveal buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`reveal-button` | The eye icon which toggles the password visibility\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`input-prevented` | Temporarily set when invalid input is prevented\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`password-visible` | Set when the password is visible\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "accessible-description-ref",
|
|
15
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
13
22
|
{
|
|
14
23
|
"name": "accessible-name",
|
|
15
|
-
"description": "String used to label the component
|
|
24
|
+
"description": "String used to label the component for screen reader users.",
|
|
16
25
|
"value": {
|
|
17
26
|
"type": [
|
|
18
27
|
"string"
|
|
@@ -21,7 +30,7 @@
|
|
|
21
30
|
},
|
|
22
31
|
{
|
|
23
32
|
"name": "accessible-name-ref",
|
|
24
|
-
"description": "
|
|
33
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
25
34
|
"value": {
|
|
26
35
|
"type": [
|
|
27
36
|
"string"
|
|
@@ -118,6 +127,15 @@
|
|
|
118
127
|
]
|
|
119
128
|
}
|
|
120
129
|
},
|
|
130
|
+
{
|
|
131
|
+
"name": "inputmode",
|
|
132
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
133
|
+
"value": {
|
|
134
|
+
"type": [
|
|
135
|
+
"string"
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
},
|
|
121
139
|
{
|
|
122
140
|
"name": "invalid",
|
|
123
141
|
"description": "Set to true when the field is invalid.",
|
|
@@ -222,9 +240,7 @@
|
|
|
222
240
|
"description": "The theme variants to apply to the component.",
|
|
223
241
|
"value": {
|
|
224
242
|
"type": [
|
|
225
|
-
"string"
|
|
226
|
-
"null",
|
|
227
|
-
"undefined"
|
|
243
|
+
"string"
|
|
228
244
|
]
|
|
229
245
|
}
|
|
230
246
|
},
|
|
@@ -249,9 +265,18 @@
|
|
|
249
265
|
],
|
|
250
266
|
"js": {
|
|
251
267
|
"properties": [
|
|
268
|
+
{
|
|
269
|
+
"name": "accessibleDescriptionRef",
|
|
270
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
271
|
+
"value": {
|
|
272
|
+
"type": [
|
|
273
|
+
"string"
|
|
274
|
+
]
|
|
275
|
+
}
|
|
276
|
+
},
|
|
252
277
|
{
|
|
253
278
|
"name": "accessibleName",
|
|
254
|
-
"description": "String used to label the component
|
|
279
|
+
"description": "String used to label the component for screen reader users.",
|
|
255
280
|
"value": {
|
|
256
281
|
"type": [
|
|
257
282
|
"string"
|
|
@@ -260,7 +285,7 @@
|
|
|
260
285
|
},
|
|
261
286
|
{
|
|
262
287
|
"name": "accessibleNameRef",
|
|
263
|
-
"description": "
|
|
288
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
264
289
|
"value": {
|
|
265
290
|
"type": [
|
|
266
291
|
"string"
|
|
@@ -366,6 +391,15 @@
|
|
|
366
391
|
]
|
|
367
392
|
}
|
|
368
393
|
},
|
|
394
|
+
{
|
|
395
|
+
"name": "inputMode",
|
|
396
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
397
|
+
"value": {
|
|
398
|
+
"type": [
|
|
399
|
+
"string"
|
|
400
|
+
]
|
|
401
|
+
}
|
|
402
|
+
},
|
|
369
403
|
{
|
|
370
404
|
"name": "invalid",
|
|
371
405
|
"description": "Set to true when the field is invalid.",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/password-field",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -19,16 +19,23 @@
|
|
|
19
19
|
"description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`field-button` | Set on both clear and reveal buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`reveal-button` | The eye icon which toggles the password visibility\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`input-prevented` | Temporarily set when invalid input is prevented\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`password-visible` | Set when the password is visible\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": ".accessibleDescriptionRef",
|
|
24
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"name": ".accessibleName",
|
|
24
|
-
"description": "String used to label the component
|
|
31
|
+
"description": "String used to label the component for screen reader users.",
|
|
25
32
|
"value": {
|
|
26
33
|
"kind": "expression"
|
|
27
34
|
}
|
|
28
35
|
},
|
|
29
36
|
{
|
|
30
37
|
"name": ".accessibleNameRef",
|
|
31
|
-
"description": "
|
|
38
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
32
39
|
"value": {
|
|
33
40
|
"kind": "expression"
|
|
34
41
|
}
|
|
@@ -110,6 +117,13 @@
|
|
|
110
117
|
"kind": "expression"
|
|
111
118
|
}
|
|
112
119
|
},
|
|
120
|
+
{
|
|
121
|
+
"name": ".inputMode",
|
|
122
|
+
"description": "A hint to the browser about the type of virtual keyboard to display\nwhen the user interacts with the field on a mobile device.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/inputmode",
|
|
123
|
+
"value": {
|
|
124
|
+
"kind": "expression"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
113
127
|
{
|
|
114
128
|
"name": "?invalid",
|
|
115
129
|
"description": "Set to true when the field is invalid.",
|