@vaadin/number-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.
Files changed (5) hide show
  1. package/custom-elements.json +95 -36
  2. package/package.json +11 -11
  3. package/src/vaadin-number-field.js +1 -0
  4. package/web-types.json +24 -8
  5. package/web-types.lit.json +10 -3
package/custom-elements.json CHANGED
@@ -26,6 +26,20 @@
26
26
  "description": "A mixin providing common number field functionality.",
27
27
  "name": "NumberFieldMixin",
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 to screen reader users.",
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": "Id of the element used as label of the component to screen reader users.",
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",
@@ -427,12 +441,24 @@
427
441
  }
428
442
  ],
429
443
  "attributes": [
444
+ {
445
+ "name": "accessible-description-ref",
446
+ "type": {
447
+ "text": "string"
448
+ },
449
+ "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.",
450
+ "fieldName": "accessibleDescriptionRef",
451
+ "inheritedFrom": {
452
+ "name": "FieldMixin",
453
+ "package": "@vaadin/field-base/src/field-mixin.js"
454
+ }
455
+ },
430
456
  {
431
457
  "name": "accessible-name",
432
458
  "type": {
433
459
  "text": "string"
434
460
  },
435
- "description": "String used to label the component to screen reader users.",
461
+ "description": "String used to label the component for screen reader users.",
436
462
  "fieldName": "accessibleName",
437
463
  "inheritedFrom": {
438
464
  "name": "FieldMixin",
@@ -444,7 +470,7 @@
444
470
  "type": {
445
471
  "text": "string"
446
472
  },
447
- "description": "Id of the element used as label of the component to screen reader users.",
473
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
448
474
  "fieldName": "accessibleNameRef",
449
475
  "inheritedFrom": {
450
476
  "name": "FieldMixin",
@@ -745,6 +771,20 @@
745
771
  "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-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 clear, decrease and increase 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`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\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.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
746
772
  "name": "NumberField",
747
773
  "members": [
774
+ {
775
+ "kind": "field",
776
+ "name": "accessibleDescriptionRef",
777
+ "privacy": "public",
778
+ "type": {
779
+ "text": "string"
780
+ },
781
+ "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.",
782
+ "attribute": "accessible-description-ref",
783
+ "inheritedFrom": {
784
+ "name": "FieldMixin",
785
+ "package": "@vaadin/field-base/src/field-mixin.js"
786
+ }
787
+ },
748
788
  {
749
789
  "kind": "field",
750
790
  "name": "accessibleName",
@@ -752,7 +792,7 @@
752
792
  "type": {
753
793
  "text": "string"
754
794
  },
755
- "description": "String used to label the component to screen reader users.",
795
+ "description": "String used to label the component for screen reader users.",
756
796
  "attribute": "accessible-name",
757
797
  "inheritedFrom": {
758
798
  "name": "FieldMixin",
@@ -766,7 +806,7 @@
766
806
  "type": {
767
807
  "text": "string"
768
808
  },
769
- "description": "Id of the element used as label of the component to screen reader users.",
809
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
770
810
  "attribute": "accessible-name-ref",
771
811
  "inheritedFrom": {
772
812
  "name": "FieldMixin",
@@ -1185,41 +1225,25 @@
1185
1225
  "name": "value-changed"
1186
1226
  }
1187
1227
  ],
1188
- "mixins": [
1189
- {
1190
- "name": "NumberFieldMixin",
1191
- "module": "src/vaadin-number-field-mixin.js"
1192
- },
1193
- {
1194
- "name": "ThemableMixin",
1195
- "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
1196
- },
1197
- {
1198
- "name": "ElementMixin",
1199
- "package": "@vaadin/component-base/src/element-mixin.js"
1200
- },
1228
+ "attributes": [
1201
1229
  {
1202
- "name": "PolylitMixin",
1203
- "package": "@vaadin/component-base/src/polylit-mixin.js"
1230
+ "name": "accessible-description-ref",
1231
+ "type": {
1232
+ "text": "string"
1233
+ },
1234
+ "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.",
1235
+ "fieldName": "accessibleDescriptionRef",
1236
+ "inheritedFrom": {
1237
+ "name": "FieldMixin",
1238
+ "package": "@vaadin/field-base/src/field-mixin.js"
1239
+ }
1204
1240
  },
1205
- {
1206
- "name": "LumoInjectionMixin",
1207
- "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
1208
- }
1209
- ],
1210
- "superclass": {
1211
- "name": "LitElement",
1212
- "package": "lit"
1213
- },
1214
- "tagName": "vaadin-number-field",
1215
- "customElement": true,
1216
- "attributes": [
1217
1241
  {
1218
1242
  "name": "accessible-name",
1219
1243
  "type": {
1220
1244
  "text": "string"
1221
1245
  },
1222
- "description": "String used to label the component to screen reader users.",
1246
+ "description": "String used to label the component for screen reader users.",
1223
1247
  "fieldName": "accessibleName",
1224
1248
  "inheritedFrom": {
1225
1249
  "name": "FieldMixin",
@@ -1231,7 +1255,7 @@
1231
1255
  "type": {
1232
1256
  "text": "string"
1233
1257
  },
1234
- "description": "Id of the element used as label of the component to screen reader users.",
1258
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
1235
1259
  "fieldName": "accessibleNameRef",
1236
1260
  "inheritedFrom": {
1237
1261
  "name": "FieldMixin",
@@ -1490,6 +1514,13 @@
1490
1514
  "module": "src/vaadin-number-field-mixin.js"
1491
1515
  }
1492
1516
  },
1517
+ {
1518
+ "type": {
1519
+ "text": "string"
1520
+ },
1521
+ "description": "The theme variants to apply to the component.",
1522
+ "name": "theme"
1523
+ },
1493
1524
  {
1494
1525
  "name": "title",
1495
1526
  "type": {
@@ -1514,7 +1545,35 @@
1514
1545
  "package": "@vaadin/field-base/src/clear-button-mixin.js"
1515
1546
  }
1516
1547
  }
1517
- ]
1548
+ ],
1549
+ "mixins": [
1550
+ {
1551
+ "name": "NumberFieldMixin",
1552
+ "module": "src/vaadin-number-field-mixin.js"
1553
+ },
1554
+ {
1555
+ "name": "ThemableMixin",
1556
+ "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
1557
+ },
1558
+ {
1559
+ "name": "ElementMixin",
1560
+ "package": "@vaadin/component-base/src/element-mixin.js"
1561
+ },
1562
+ {
1563
+ "name": "PolylitMixin",
1564
+ "package": "@vaadin/component-base/src/polylit-mixin.js"
1565
+ },
1566
+ {
1567
+ "name": "LumoInjectionMixin",
1568
+ "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
1569
+ }
1570
+ ],
1571
+ "superclass": {
1572
+ "name": "LitElement",
1573
+ "package": "lit"
1574
+ },
1575
+ "tagName": "vaadin-number-field",
1576
+ "customElement": true
1518
1577
  }
1519
1578
  ],
1520
1579
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/number-field",
3
- "version": "25.2.7",
3
+ "version": "25.3.0-alpha10",
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.2.7",
39
- "@vaadin/component-base": "~25.2.7",
40
- "@vaadin/field-base": "~25.2.7",
41
- "@vaadin/input-container": "~25.2.7",
42
- "@vaadin/vaadin-themable-mixin": "~25.2.7",
38
+ "@vaadin/a11y-base": "25.3.0-alpha10",
39
+ "@vaadin/component-base": "25.3.0-alpha10",
40
+ "@vaadin/field-base": "25.3.0-alpha10",
41
+ "@vaadin/input-container": "25.3.0-alpha10",
42
+ "@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
43
43
  "lit": "^3.0.0"
44
44
  },
45
45
  "devDependencies": {
46
- "@vaadin/aura": "~25.2.7",
47
- "@vaadin/chai-plugins": "~25.2.7",
48
- "@vaadin/test-runner-commands": "~25.2.7",
46
+ "@vaadin/aura": "25.3.0-alpha10",
47
+ "@vaadin/chai-plugins": "25.3.0-alpha10",
48
+ "@vaadin/test-runner-commands": "25.3.0-alpha10",
49
49
  "@vaadin/testing-helpers": "^2.0.0",
50
- "@vaadin/vaadin-lumo-styles": "~25.2.7",
50
+ "@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
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": "14be1af674f3968cce68c6eb4742340694c4a949"
58
+ "gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
59
59
  }
package/src/vaadin-number-field.js CHANGED
@@ -123,6 +123,7 @@ import { NumberFieldMixin } from './vaadin-number-field-mixin.js';
123
123
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
124
124
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
125
125
  *
126
+ * @attr {string} theme - The theme variants to apply to the component.
126
127
  * @customElement vaadin-number-field
127
128
  * @extends HTMLElement
128
129
  */
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/number-field",
4
- "version": "25.2.7",
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-number-field",
11
11
  "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-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 clear, decrease and increase 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`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\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.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
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 to screen reader users.",
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": "Id of the element used as label of the component to screen reader users.",
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 to screen reader users.",
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": "Id of the element used as label of the component to screen reader users.",
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/number-field",
4
- "version": "25.2.7",
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-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-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 clear, decrease and increase 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`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\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.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
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 to screen reader users.",
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": "Id of the element used as label of the component to screen reader users.",
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
  }