@vaadin/text-field 25.3.0-alpha7 → 25.3.0-alpha9
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 +95 -36
- package/package.json +11 -11
- package/src/vaadin-text-field.js +4 -3
- package/web-types.json +24 -8
- package/web-types.lit.json +10 -3
package/custom-elements.json
CHANGED
|
@@ -26,6 +26,20 @@
|
|
|
26
26
|
"description": "A mixin providing common text field functionality.",
|
|
27
27
|
"name": "TextFieldMixin",
|
|
28
28
|
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "accessibleDescriptionRef",
|
|
32
|
+
"privacy": "public",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "string"
|
|
35
|
+
},
|
|
36
|
+
"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.",
|
|
37
|
+
"attribute": "accessible-description-ref",
|
|
38
|
+
"inheritedFrom": {
|
|
39
|
+
"name": "FieldMixin",
|
|
40
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
29
43
|
{
|
|
30
44
|
"kind": "field",
|
|
31
45
|
"name": "accessibleName",
|
|
@@ -33,7 +47,7 @@
|
|
|
33
47
|
"type": {
|
|
34
48
|
"text": "string"
|
|
35
49
|
},
|
|
36
|
-
"description": "String used to label the component
|
|
50
|
+
"description": "String used to label the component for screen reader users.",
|
|
37
51
|
"attribute": "accessible-name",
|
|
38
52
|
"inheritedFrom": {
|
|
39
53
|
"name": "FieldMixin",
|
|
@@ -47,7 +61,7 @@
|
|
|
47
61
|
"type": {
|
|
48
62
|
"text": "string"
|
|
49
63
|
},
|
|
50
|
-
"description": "
|
|
64
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
51
65
|
"attribute": "accessible-name-ref",
|
|
52
66
|
"inheritedFrom": {
|
|
53
67
|
"name": "FieldMixin",
|
|
@@ -399,12 +413,24 @@
|
|
|
399
413
|
}
|
|
400
414
|
],
|
|
401
415
|
"attributes": [
|
|
416
|
+
{
|
|
417
|
+
"name": "accessible-description-ref",
|
|
418
|
+
"type": {
|
|
419
|
+
"text": "string"
|
|
420
|
+
},
|
|
421
|
+
"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.",
|
|
422
|
+
"fieldName": "accessibleDescriptionRef",
|
|
423
|
+
"inheritedFrom": {
|
|
424
|
+
"name": "FieldMixin",
|
|
425
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
426
|
+
}
|
|
427
|
+
},
|
|
402
428
|
{
|
|
403
429
|
"name": "accessible-name",
|
|
404
430
|
"type": {
|
|
405
431
|
"text": "string"
|
|
406
432
|
},
|
|
407
|
-
"description": "String used to label the component
|
|
433
|
+
"description": "String used to label the component for screen reader users.",
|
|
408
434
|
"fieldName": "accessibleName",
|
|
409
435
|
"inheritedFrom": {
|
|
410
436
|
"name": "FieldMixin",
|
|
@@ -416,7 +442,7 @@
|
|
|
416
442
|
"type": {
|
|
417
443
|
"text": "string"
|
|
418
444
|
},
|
|
419
|
-
"description": "
|
|
445
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
420
446
|
"fieldName": "accessibleNameRef",
|
|
421
447
|
"inheritedFrom": {
|
|
422
448
|
"name": "FieldMixin",
|
|
@@ -739,6 +765,20 @@
|
|
|
739
765
|
"description": "`<vaadin-text-field>` is a web component that allows the user to input and edit text.\n\n```html\n<vaadin-text-field label=\"First Name\"></vaadin-text-field>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-field>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-field label=\"Email address\">\n <div slot=\"prefix\">Sent to:</div>\n <div slot=\"suffix\">@vaadin.com</div>\n</vaadin-text-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 the clear button\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\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\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.",
|
|
740
766
|
"name": "TextField",
|
|
741
767
|
"members": [
|
|
768
|
+
{
|
|
769
|
+
"kind": "field",
|
|
770
|
+
"name": "accessibleDescriptionRef",
|
|
771
|
+
"privacy": "public",
|
|
772
|
+
"type": {
|
|
773
|
+
"text": "string"
|
|
774
|
+
},
|
|
775
|
+
"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.",
|
|
776
|
+
"attribute": "accessible-description-ref",
|
|
777
|
+
"inheritedFrom": {
|
|
778
|
+
"name": "FieldMixin",
|
|
779
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
780
|
+
}
|
|
781
|
+
},
|
|
742
782
|
{
|
|
743
783
|
"kind": "field",
|
|
744
784
|
"name": "accessibleName",
|
|
@@ -746,7 +786,7 @@
|
|
|
746
786
|
"type": {
|
|
747
787
|
"text": "string"
|
|
748
788
|
},
|
|
749
|
-
"description": "String used to label the component
|
|
789
|
+
"description": "String used to label the component for screen reader users.",
|
|
750
790
|
"attribute": "accessible-name",
|
|
751
791
|
"inheritedFrom": {
|
|
752
792
|
"name": "FieldMixin",
|
|
@@ -760,7 +800,7 @@
|
|
|
760
800
|
"type": {
|
|
761
801
|
"text": "string"
|
|
762
802
|
},
|
|
763
|
-
"description": "
|
|
803
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
764
804
|
"attribute": "accessible-name-ref",
|
|
765
805
|
"inheritedFrom": {
|
|
766
806
|
"name": "FieldMixin",
|
|
@@ -1168,41 +1208,25 @@
|
|
|
1168
1208
|
"name": "value-changed"
|
|
1169
1209
|
}
|
|
1170
1210
|
],
|
|
1171
|
-
"
|
|
1172
|
-
{
|
|
1173
|
-
"name": "TextFieldMixin",
|
|
1174
|
-
"module": "src/vaadin-text-field-mixin.js"
|
|
1175
|
-
},
|
|
1176
|
-
{
|
|
1177
|
-
"name": "ThemableMixin",
|
|
1178
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1179
|
-
},
|
|
1180
|
-
{
|
|
1181
|
-
"name": "ElementMixin",
|
|
1182
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1183
|
-
},
|
|
1211
|
+
"attributes": [
|
|
1184
1212
|
{
|
|
1185
|
-
"name": "
|
|
1186
|
-
"
|
|
1213
|
+
"name": "accessible-description-ref",
|
|
1214
|
+
"type": {
|
|
1215
|
+
"text": "string"
|
|
1216
|
+
},
|
|
1217
|
+
"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.",
|
|
1218
|
+
"fieldName": "accessibleDescriptionRef",
|
|
1219
|
+
"inheritedFrom": {
|
|
1220
|
+
"name": "FieldMixin",
|
|
1221
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1222
|
+
}
|
|
1187
1223
|
},
|
|
1188
|
-
{
|
|
1189
|
-
"name": "LumoInjectionMixin",
|
|
1190
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1191
|
-
}
|
|
1192
|
-
],
|
|
1193
|
-
"superclass": {
|
|
1194
|
-
"name": "LitElement",
|
|
1195
|
-
"package": "lit"
|
|
1196
|
-
},
|
|
1197
|
-
"tagName": "vaadin-text-field",
|
|
1198
|
-
"customElement": true,
|
|
1199
|
-
"attributes": [
|
|
1200
1224
|
{
|
|
1201
1225
|
"name": "accessible-name",
|
|
1202
1226
|
"type": {
|
|
1203
1227
|
"text": "string"
|
|
1204
1228
|
},
|
|
1205
|
-
"description": "String used to label the component
|
|
1229
|
+
"description": "String used to label the component for screen reader users.",
|
|
1206
1230
|
"fieldName": "accessibleName",
|
|
1207
1231
|
"inheritedFrom": {
|
|
1208
1232
|
"name": "FieldMixin",
|
|
@@ -1214,7 +1238,7 @@
|
|
|
1214
1238
|
"type": {
|
|
1215
1239
|
"text": "string"
|
|
1216
1240
|
},
|
|
1217
|
-
"description": "
|
|
1241
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1218
1242
|
"fieldName": "accessibleNameRef",
|
|
1219
1243
|
"inheritedFrom": {
|
|
1220
1244
|
"name": "FieldMixin",
|
|
@@ -1473,6 +1497,13 @@
|
|
|
1473
1497
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1474
1498
|
}
|
|
1475
1499
|
},
|
|
1500
|
+
{
|
|
1501
|
+
"type": {
|
|
1502
|
+
"text": "string"
|
|
1503
|
+
},
|
|
1504
|
+
"description": "The theme variants to apply to the component.",
|
|
1505
|
+
"name": "theme"
|
|
1506
|
+
},
|
|
1476
1507
|
{
|
|
1477
1508
|
"name": "title",
|
|
1478
1509
|
"type": {
|
|
@@ -1497,7 +1528,35 @@
|
|
|
1497
1528
|
"package": "@vaadin/field-base/src/clear-button-mixin.js"
|
|
1498
1529
|
}
|
|
1499
1530
|
}
|
|
1500
|
-
]
|
|
1531
|
+
],
|
|
1532
|
+
"mixins": [
|
|
1533
|
+
{
|
|
1534
|
+
"name": "TextFieldMixin",
|
|
1535
|
+
"module": "src/vaadin-text-field-mixin.js"
|
|
1536
|
+
},
|
|
1537
|
+
{
|
|
1538
|
+
"name": "ThemableMixin",
|
|
1539
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1540
|
+
},
|
|
1541
|
+
{
|
|
1542
|
+
"name": "ElementMixin",
|
|
1543
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1544
|
+
},
|
|
1545
|
+
{
|
|
1546
|
+
"name": "PolylitMixin",
|
|
1547
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1548
|
+
},
|
|
1549
|
+
{
|
|
1550
|
+
"name": "LumoInjectionMixin",
|
|
1551
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1552
|
+
}
|
|
1553
|
+
],
|
|
1554
|
+
"superclass": {
|
|
1555
|
+
"name": "LitElement",
|
|
1556
|
+
"package": "lit"
|
|
1557
|
+
},
|
|
1558
|
+
"tagName": "vaadin-text-field",
|
|
1559
|
+
"customElement": true
|
|
1501
1560
|
}
|
|
1502
1561
|
],
|
|
1503
1562
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/text-field",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-alpha9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.3.0-
|
|
39
|
-
"@vaadin/component-base": "25.3.0-
|
|
40
|
-
"@vaadin/field-base": "25.3.0-
|
|
41
|
-
"@vaadin/input-container": "25.3.0-
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-alpha9",
|
|
39
|
+
"@vaadin/component-base": "25.3.0-alpha9",
|
|
40
|
+
"@vaadin/field-base": "25.3.0-alpha9",
|
|
41
|
+
"@vaadin/input-container": "25.3.0-alpha9",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha9",
|
|
43
43
|
"lit": "^3.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@vaadin/aura": "25.3.0-
|
|
47
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
48
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
46
|
+
"@vaadin/aura": "25.3.0-alpha9",
|
|
47
|
+
"@vaadin/chai-plugins": "25.3.0-alpha9",
|
|
48
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha9",
|
|
49
49
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
50
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
50
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha9",
|
|
51
51
|
"sinon": "^22.0.0"
|
|
52
52
|
},
|
|
53
53
|
"customElements": "custom-elements.json",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "cb915ebde095ec5b94a87af93dd4530f51984c52"
|
|
59
59
|
}
|
package/src/vaadin-text-field.js
CHANGED
|
@@ -115,12 +115,11 @@ import { TextFieldMixin } from './vaadin-text-field-mixin.js';
|
|
|
115
115
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
116
116
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
117
117
|
*
|
|
118
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
118
119
|
* @customElement vaadin-text-field
|
|
119
120
|
* @extends HTMLElement
|
|
120
121
|
*/
|
|
121
|
-
|
|
122
|
-
ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
123
|
-
) {
|
|
122
|
+
class TextField extends TextFieldMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
124
123
|
static get is() {
|
|
125
124
|
return 'vaadin-text-field';
|
|
126
125
|
}
|
|
@@ -182,3 +181,5 @@ export class TextField extends TextFieldMixin(
|
|
|
182
181
|
}
|
|
183
182
|
|
|
184
183
|
defineCustomElement(TextField);
|
|
184
|
+
|
|
185
|
+
export { TextField };
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/text-field",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -10,9 +10,18 @@
|
|
|
10
10
|
"name": "vaadin-text-field",
|
|
11
11
|
"description": "`<vaadin-text-field>` is a web component that allows the user to input and edit text.\n\n```html\n<vaadin-text-field label=\"First Name\"></vaadin-text-field>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-field>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-field label=\"Email address\">\n <div slot=\"prefix\">Sent to:</div>\n <div slot=\"suffix\">@vaadin.com</div>\n</vaadin-text-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 the clear button\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\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\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"
|
|
@@ -222,9 +231,7 @@
|
|
|
222
231
|
"description": "The theme variants to apply to the component.",
|
|
223
232
|
"value": {
|
|
224
233
|
"type": [
|
|
225
|
-
"string"
|
|
226
|
-
"null",
|
|
227
|
-
"undefined"
|
|
234
|
+
"string"
|
|
228
235
|
]
|
|
229
236
|
}
|
|
230
237
|
},
|
|
@@ -249,9 +256,18 @@
|
|
|
249
256
|
],
|
|
250
257
|
"js": {
|
|
251
258
|
"properties": [
|
|
259
|
+
{
|
|
260
|
+
"name": "accessibleDescriptionRef",
|
|
261
|
+
"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.",
|
|
262
|
+
"value": {
|
|
263
|
+
"type": [
|
|
264
|
+
"string"
|
|
265
|
+
]
|
|
266
|
+
}
|
|
267
|
+
},
|
|
252
268
|
{
|
|
253
269
|
"name": "accessibleName",
|
|
254
|
-
"description": "String used to label the component
|
|
270
|
+
"description": "String used to label the component for screen reader users.",
|
|
255
271
|
"value": {
|
|
256
272
|
"type": [
|
|
257
273
|
"string"
|
|
@@ -260,7 +276,7 @@
|
|
|
260
276
|
},
|
|
261
277
|
{
|
|
262
278
|
"name": "accessibleNameRef",
|
|
263
|
-
"description": "
|
|
279
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
264
280
|
"value": {
|
|
265
281
|
"type": [
|
|
266
282
|
"string"
|
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/text-field",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -19,16 +19,23 @@
|
|
|
19
19
|
"description": "`<vaadin-text-field>` is a web component that allows the user to input and edit text.\n\n```html\n<vaadin-text-field label=\"First Name\"></vaadin-text-field>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-field>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-field label=\"Email address\">\n <div slot=\"prefix\">Sent to:</div>\n <div slot=\"suffix\">@vaadin.com</div>\n</vaadin-text-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 the clear button\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\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\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
|
}
|