@vaadin/select 25.4.0-alpha3 → 25.4.0-alpha5

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 (7) hide show
  1. package/custom-elements.json +20 -131
  2. package/package.json +16 -16
  3. package/src/styles/vaadin-select-base-styles.js +8 -2
  4. package/src/styles/vaadin-select-value-button-base-styles.js +3 -8
  5. package/src/vaadin-select-base-mixin.js +1 -3
  6. package/web-types.json +4 -3
  7. package/web-types.lit.json +4 -3
package/custom-elements.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "vaadin-select.js",
7
+ "path": "vaadin-select-item.js",
8
8
  "declarations": [],
9
9
  "exports": [
10
10
  {
@@ -12,7 +12,7 @@
12
12
  "name": "*",
13
13
  "declaration": {
14
14
  "name": "*",
15
- "module": "src/vaadin-select.js"
15
+ "module": "src/vaadin-select-item.js"
16
16
  }
17
17
  }
18
18
  ]
@@ -34,7 +34,7 @@
34
34
  },
35
35
  {
36
36
  "kind": "javascript-module",
37
- "path": "vaadin-select-item.js",
37
+ "path": "vaadin-select.js",
38
38
  "declarations": [],
39
39
  "exports": [
40
40
  {
@@ -42,7 +42,7 @@
42
42
  "name": "*",
43
43
  "declaration": {
44
44
  "name": "*",
45
- "module": "src/vaadin-select-item.js"
45
+ "module": "src/vaadin-select.js"
46
46
  }
47
47
  }
48
48
  ]
@@ -120,10 +120,6 @@
120
120
  "type": {
121
121
  "text": "boolean"
122
122
  }
123
- },
124
- "inheritedFrom": {
125
- "name": "ValidateMixin",
126
- "package": "@vaadin/field-base/src/validate-mixin.js"
127
123
  }
128
124
  },
129
125
  {
@@ -136,8 +132,8 @@
136
132
  "description": "If true, the user cannot interact with this element.",
137
133
  "attribute": "disabled",
138
134
  "inheritedFrom": {
139
- "name": "TabindexMixin",
140
- "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
135
+ "name": "DisabledMixin",
136
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
141
137
  }
142
138
  },
143
139
  {
@@ -189,8 +185,7 @@
189
185
  "type": {
190
186
  "text": "!Array<!SelectItemData>"
191
187
  },
192
- "description": "An array containing items that will be rendered as the options of the select.\n\n#### Example\n```js\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\nNote: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.\nTo render the item with a custom component, provide a tag name by the `component` property.",
193
- "attribute": "items"
188
+ "description": "An array containing items that will be rendered as the options of the select.\n\n#### Example\n```js\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\nNote: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.\nTo render the item with a custom component, provide a tag name by the `component` property."
194
189
  },
195
190
  {
196
191
  "kind": "field",
@@ -278,8 +273,7 @@
278
273
  "text": "!SelectRenderer | undefined"
279
274
  },
280
275
  "description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
281
- "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead",
282
- "attribute": "renderer"
276
+ "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead"
283
277
  },
284
278
  {
285
279
  "kind": "method",
@@ -401,8 +395,8 @@
401
395
  "description": "If true, the user cannot interact with this element.",
402
396
  "fieldName": "disabled",
403
397
  "inheritedFrom": {
404
- "name": "TabindexMixin",
405
- "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
398
+ "name": "DisabledMixin",
399
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
406
400
  }
407
401
  },
408
402
  {
@@ -505,15 +499,6 @@
505
499
  "description": "When present, it specifies that the element is read-only.",
506
500
  "fieldName": "readonly"
507
501
  },
508
- {
509
- "name": "renderer",
510
- "type": {
511
- "text": "!SelectRenderer | undefined"
512
- },
513
- "description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
514
- "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead",
515
- "fieldName": "renderer"
516
- },
517
502
  {
518
503
  "name": "required",
519
504
  "type": {
@@ -735,22 +720,6 @@
735
720
  "text": "!Array<!Element> | undefined"
736
721
  },
737
722
  "description": "A read-only list of items from which a selection can be made.\nIt is populated from the elements passed to the light DOM,\nand updated dynamically when adding or removing items.",
738
- "attribute": "items",
739
- "readonly": true,
740
- "inheritedFrom": {
741
- "name": "ListMixin",
742
- "package": "@vaadin/a11y-base/src/list-mixin.js"
743
- }
744
- },
745
- {
746
- "kind": "field",
747
- "name": "orientation",
748
- "privacy": "public",
749
- "type": {
750
- "text": "string"
751
- },
752
- "description": "Define how items are disposed in the dom.\nPossible values are: `horizontal|vertical`.\nIt also changes navigation keys from left/right to up/down.",
753
- "attribute": "orientation",
754
723
  "readonly": true,
755
724
  "inheritedFrom": {
756
725
  "name": "ListMixin",
@@ -785,18 +754,6 @@
785
754
  "package": "@vaadin/a11y-base/src/list-mixin.js"
786
755
  }
787
756
  },
788
- {
789
- "name": "orientation",
790
- "type": {
791
- "text": "string"
792
- },
793
- "description": "Define how items are disposed in the dom.\nPossible values are: `horizontal|vertical`.\nIt also changes navigation keys from left/right to up/down.",
794
- "fieldName": "orientation",
795
- "inheritedFrom": {
796
- "name": "ListMixin",
797
- "package": "@vaadin/a11y-base/src/list-mixin.js"
798
- }
799
- },
800
757
  {
801
758
  "name": "selected",
802
759
  "type": {
@@ -957,7 +914,6 @@
957
914
  "text": "object"
958
915
  },
959
916
  "description": "Object with properties that is passed to `renderer` function",
960
- "attribute": "model",
961
917
  "inheritedFrom": {
962
918
  "name": "OverlayMixin",
963
919
  "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js"
@@ -1027,7 +983,6 @@
1027
983
  "text": "HTMLElement"
1028
984
  },
1029
985
  "description": "Owner element passed with renderer function",
1030
- "attribute": "owner",
1031
986
  "inheritedFrom": {
1032
987
  "name": "OverlayMixin",
1033
988
  "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js"
@@ -1041,7 +996,6 @@
1041
996
  "text": "object"
1042
997
  },
1043
998
  "description": "The element next to which this overlay should be aligned.\nThe position of the overlay relative to the positionTarget can be adjusted\nwith properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`\nand `noVerticalOverlap`.",
1044
- "attribute": "position-target",
1045
999
  "inheritedFrom": {
1046
1000
  "name": "PositionMixin",
1047
1001
  "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js"
@@ -1055,7 +1009,6 @@
1055
1009
  "text": "OverlayRenderer | null | undefined"
1056
1010
  },
1057
1011
  "description": "Custom function for rendering the content of the overlay.\nReceives three arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `owner` The host element of the renderer function.\n- `model` The object with the properties related with rendering.",
1058
- "attribute": "renderer",
1059
1012
  "inheritedFrom": {
1060
1013
  "name": "OverlayMixin",
1061
1014
  "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js"
@@ -1064,11 +1017,7 @@
1064
1017
  {
1065
1018
  "kind": "method",
1066
1019
  "name": "requestContentUpdate",
1067
- "description": "Requests an update for the content of the overlay.\nWhile performing the update, it invokes the renderer passed in the `renderer` property.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.",
1068
- "inheritedFrom": {
1069
- "name": "OverlayMixin",
1070
- "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js"
1071
- }
1020
+ "description": "Requests an update for the content of the overlay.\nWhile performing the update, it invokes the renderer passed in the `renderer` property.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested."
1072
1021
  },
1073
1022
  {
1074
1023
  "kind": "field",
@@ -1092,7 +1041,6 @@
1092
1041
  "text": "HTMLElement"
1093
1042
  },
1094
1043
  "description": "Set to specify the element which should be focused on overlay close,\nif `restoreFocusOnClose` is set to true.",
1095
- "attribute": "restore-focus-node",
1096
1044
  "inheritedFrom": {
1097
1045
  "name": "OverlayFocusMixin",
1098
1046
  "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
@@ -1281,30 +1229,6 @@
1281
1229
  "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js"
1282
1230
  }
1283
1231
  },
1284
- {
1285
- "name": "owner",
1286
- "type": {
1287
- "text": "HTMLElement"
1288
- },
1289
- "description": "Owner element passed with renderer function",
1290
- "fieldName": "owner",
1291
- "inheritedFrom": {
1292
- "name": "OverlayMixin",
1293
- "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js"
1294
- }
1295
- },
1296
- {
1297
- "name": "renderer",
1298
- "type": {
1299
- "text": "OverlayRenderer | null | undefined"
1300
- },
1301
- "description": "Custom function for rendering the content of the overlay.\nReceives three arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `owner` The host element of the renderer function.\n- `model` The object with the properties related with rendering.",
1302
- "fieldName": "renderer",
1303
- "inheritedFrom": {
1304
- "name": "OverlayMixin",
1305
- "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js"
1306
- }
1307
- },
1308
1232
  {
1309
1233
  "name": "required-vertical-space",
1310
1234
  "type": {
@@ -1317,18 +1241,6 @@
1317
1241
  "package": "@vaadin/overlay/src/vaadin-overlay-position-mixin.js"
1318
1242
  }
1319
1243
  },
1320
- {
1321
- "name": "restore-focus-node",
1322
- "type": {
1323
- "text": "HTMLElement"
1324
- },
1325
- "description": "Set to specify the element which should be focused on overlay close,\nif `restoreFocusOnClose` is set to true.",
1326
- "fieldName": "restoreFocusNode",
1327
- "inheritedFrom": {
1328
- "name": "OverlayFocusMixin",
1329
- "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
1330
- }
1331
- },
1332
1244
  {
1333
1245
  "name": "restore-focus-on-close",
1334
1246
  "type": {
@@ -1476,8 +1388,8 @@
1476
1388
  }
1477
1389
  },
1478
1390
  "inheritedFrom": {
1479
- "name": "ValidateMixin",
1480
- "package": "@vaadin/field-base/src/validate-mixin.js"
1391
+ "name": "SelectBaseMixin",
1392
+ "module": "src/vaadin-select-base-mixin.js"
1481
1393
  }
1482
1394
  },
1483
1395
  {
@@ -1490,8 +1402,8 @@
1490
1402
  "description": "If true, the user cannot interact with this element.",
1491
1403
  "attribute": "disabled",
1492
1404
  "inheritedFrom": {
1493
- "name": "TabindexMixin",
1494
- "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
1405
+ "name": "DisabledMixin",
1406
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
1495
1407
  }
1496
1408
  },
1497
1409
  {
@@ -1544,7 +1456,6 @@
1544
1456
  "text": "!Array<!SelectItemData>"
1545
1457
  },
1546
1458
  "description": "An array containing items that will be rendered as the options of the select.\n\n#### Example\n```js\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\nNote: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.\nTo render the item with a custom component, provide a tag name by the `component` property.",
1547
- "attribute": "items",
1548
1459
  "inheritedFrom": {
1549
1460
  "name": "SelectBaseMixin",
1550
1461
  "module": "src/vaadin-select-base-mixin.js"
@@ -1657,7 +1568,6 @@
1657
1568
  },
1658
1569
  "description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
1659
1570
  "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead",
1660
- "attribute": "renderer",
1661
1571
  "inheritedFrom": {
1662
1572
  "name": "SelectBaseMixin",
1663
1573
  "module": "src/vaadin-select-base-mixin.js"
@@ -1718,15 +1628,11 @@
1718
1628
  ],
1719
1629
  "events": [
1720
1630
  {
1721
- "name": "change",
1722
1631
  "type": {
1723
- "text": "CustomEvent"
1632
+ "text": "Event"
1724
1633
  },
1725
1634
  "description": "Fired when the user commits a value change.",
1726
- "inheritedFrom": {
1727
- "name": "SelectBaseMixin",
1728
- "module": "src/vaadin-select-base-mixin.js"
1729
- }
1635
+ "name": "change"
1730
1636
  },
1731
1637
  {
1732
1638
  "type": {
@@ -1743,15 +1649,11 @@
1743
1649
  "name": "opened-changed"
1744
1650
  },
1745
1651
  {
1746
- "name": "validated",
1747
1652
  "type": {
1748
1653
  "text": "CustomEvent"
1749
1654
  },
1750
1655
  "description": "Fired whenever the field is validated.",
1751
- "inheritedFrom": {
1752
- "name": "ValidateMixin",
1753
- "package": "@vaadin/field-base/src/validate-mixin.js"
1754
- }
1656
+ "name": "validated"
1755
1657
  },
1756
1658
  {
1757
1659
  "type": {
@@ -1818,8 +1720,8 @@
1818
1720
  "description": "If true, the user cannot interact with this element.",
1819
1721
  "fieldName": "disabled",
1820
1722
  "inheritedFrom": {
1821
- "name": "TabindexMixin",
1822
- "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
1723
+ "name": "DisabledMixin",
1724
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
1823
1725
  }
1824
1726
  },
1825
1727
  {
@@ -1942,19 +1844,6 @@
1942
1844
  "module": "src/vaadin-select-base-mixin.js"
1943
1845
  }
1944
1846
  },
1945
- {
1946
- "name": "renderer",
1947
- "type": {
1948
- "text": "!SelectRenderer | undefined"
1949
- },
1950
- "description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
1951
- "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead",
1952
- "fieldName": "renderer",
1953
- "inheritedFrom": {
1954
- "name": "SelectBaseMixin",
1955
- "module": "src/vaadin-select-base-mixin.js"
1956
- }
1957
- },
1958
1847
  {
1959
1848
  "name": "required",
1960
1849
  "type": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/select",
3
- "version": "25.4.0-alpha3",
3
+ "version": "25.4.0-alpha5",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,24 +37,24 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@open-wc/dedupe-mixin": "^1.3.0",
40
- "@vaadin/a11y-base": "25.4.0-alpha3",
41
- "@vaadin/button": "25.4.0-alpha3",
42
- "@vaadin/component-base": "25.4.0-alpha3",
43
- "@vaadin/field-base": "25.4.0-alpha3",
44
- "@vaadin/input-container": "25.4.0-alpha3",
45
- "@vaadin/item": "25.4.0-alpha3",
46
- "@vaadin/list-box": "25.4.0-alpha3",
47
- "@vaadin/lit-renderer": "25.4.0-alpha3",
48
- "@vaadin/overlay": "25.4.0-alpha3",
49
- "@vaadin/vaadin-themable-mixin": "25.4.0-alpha3",
40
+ "@vaadin/a11y-base": "25.4.0-alpha5",
41
+ "@vaadin/button": "25.4.0-alpha5",
42
+ "@vaadin/component-base": "25.4.0-alpha5",
43
+ "@vaadin/field-base": "25.4.0-alpha5",
44
+ "@vaadin/input-container": "25.4.0-alpha5",
45
+ "@vaadin/item": "25.4.0-alpha5",
46
+ "@vaadin/list-box": "25.4.0-alpha5",
47
+ "@vaadin/lit-renderer": "25.4.0-alpha5",
48
+ "@vaadin/overlay": "25.4.0-alpha5",
49
+ "@vaadin/vaadin-themable-mixin": "25.4.0-alpha5",
50
50
  "lit": "^3.0.0"
51
51
  },
52
52
  "devDependencies": {
53
- "@vaadin/aura": "25.4.0-alpha3",
54
- "@vaadin/chai-plugins": "25.4.0-alpha3",
55
- "@vaadin/test-runner-commands": "25.4.0-alpha3",
53
+ "@vaadin/aura": "25.4.0-alpha5",
54
+ "@vaadin/chai-plugins": "25.4.0-alpha5",
55
+ "@vaadin/test-runner-commands": "25.4.0-alpha5",
56
56
  "@vaadin/testing-helpers": "^2.0.0",
57
- "@vaadin/vaadin-lumo-styles": "25.4.0-alpha3",
57
+ "@vaadin/vaadin-lumo-styles": "25.4.0-alpha5",
58
58
  "sinon": "^22.0.0"
59
59
  },
60
60
  "customElements": "custom-elements.json",
@@ -62,5 +62,5 @@
62
62
  "web-types.json",
63
63
  "web-types.lit.json"
64
64
  ],
65
- "gitHead": "db7e679c1a8af00840cc05ddcbefff68dfed1e45"
65
+ "gitHead": "65e9c9e49c0a723b08ee91b9aae8b901e91a3597"
66
66
  }
package/src/styles/vaadin-select-base-styles.js CHANGED
@@ -19,6 +19,12 @@ export const selectStyles = css`
19
19
  display: contents;
20
20
  }
21
21
 
22
+ :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) [part='input-field']::before {
23
+ content: '\\2003' / '';
24
+ width: 0;
25
+ margin-inline-end: calc(var(--vaadin-input-field-gap, var(--vaadin-gap-s)) * -1);
26
+ }
27
+
22
28
  :host(:not([focus-ring])) [part='input-field'] {
23
29
  outline: none;
24
30
  }
@@ -65,11 +71,11 @@ export const selectStyles = css`
65
71
  }
66
72
 
67
73
  :host([theme~='align-center']) ::slotted([slot='value']) {
68
- justify-content: center;
74
+ justify-content: safe center;
69
75
  }
70
76
 
71
77
  :host([theme~='align-end']) ::slotted([slot='value']) {
72
- justify-content: end;
78
+ justify-content: safe end;
73
79
  }
74
80
 
75
81
  :host([theme~='align-left']) ::slotted([slot='value']) {
package/src/styles/vaadin-select-value-button-base-styles.js CHANGED
@@ -16,19 +16,14 @@ export const valueButton = css`
16
16
  align-items: center;
17
17
  }
18
18
 
19
- :host::before {
20
- content: '\\2003' / '';
21
- display: inline-block;
22
- width: 0;
23
- }
24
-
25
19
  ::slotted(*) {
20
+ display: inline-flex;
21
+ vertical-align: top;
26
22
  padding: 0;
27
23
  cursor: inherit;
28
24
  }
29
25
 
30
- .vaadin-button-container,
31
- [part='label'] {
26
+ .vaadin-button-container {
32
27
  display: contents;
33
28
  }
34
29
 
package/src/vaadin-select-base-mixin.js CHANGED
@@ -486,9 +486,6 @@ export const SelectBaseMixin = (superClass) =>
486
486
  labelItem._sourceItem = selected;
487
487
 
488
488
  this.__appendValueItemElement(labelItem, this.focusElement);
489
-
490
- // Ensure the item gets proper styles
491
- labelItem.selected = true;
492
489
  }
493
490
 
494
491
  /**
@@ -520,6 +517,7 @@ export const SelectBaseMixin = (superClass) =>
520
517
  __appendValueItemElement(itemElement, parent) {
521
518
  parent.appendChild(itemElement);
522
519
  itemElement.removeAttribute('tabindex');
520
+ itemElement.removeAttribute('selected');
523
521
  itemElement.removeAttribute('aria-selected');
524
522
  itemElement.removeAttribute('role');
525
523
  itemElement.removeAttribute('focused');
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/select",
4
- "version": "25.4.0-alpha3",
4
+ "version": "25.4.0-alpha5",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -138,7 +138,7 @@
138
138
  },
139
139
  {
140
140
  "name": "vaadin-select",
141
- "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`\nwith `<vaadin-select-item>` children:\n\n```html\n<vaadin-select>\n <vaadin-select-list-box slot=\"overlay\">\n <vaadin-select-item value=\"recent\">Most recent first</vaadin-select-item>\n <vaadin-select-item value=\"rating-asc\">Rating: low to high</vaadin-select-item>\n <vaadin-select-item value=\"rating-desc\">Rating: high to low</vaadin-select-item>\n </vaadin-select-list-box>\n</vaadin-select>\n```\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n#### Renderer (deprecated)\n\nThe content of the select can also be populated by using the renderer callback function, although\nthis approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\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 toggle button\n`field-button` | Set on the toggle 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`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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`invalid` | Set when the element is invalid\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`opened` | Set when the overlay is opened\n`phone` | Set when the overlay is shown in phone mode\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-height` |\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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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| `--vaadin-item-overlay-padding` |\n| `--vaadin-select-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal components are used\nand themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha3/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha3/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha3/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
141
+ "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`\nwith `<vaadin-select-item>` children:\n\n```html\n<vaadin-select>\n <vaadin-select-list-box slot=\"overlay\">\n <vaadin-select-item value=\"recent\">Most recent first</vaadin-select-item>\n <vaadin-select-item value=\"rating-asc\">Rating: low to high</vaadin-select-item>\n <vaadin-select-item value=\"rating-desc\">Rating: high to low</vaadin-select-item>\n </vaadin-select-list-box>\n</vaadin-select>\n```\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n#### Renderer (deprecated)\n\nThe content of the select can also be populated by using the renderer callback function, although\nthis approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\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 toggle button\n`field-button` | Set on the toggle 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`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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`invalid` | Set when the element is invalid\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`opened` | Set when the overlay is opened\n`phone` | Set when the overlay is shown in phone mode\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-height` |\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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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| `--vaadin-item-overlay-padding` |\n| `--vaadin-select-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal components are used\nand themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha5/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha5/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha5/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
142
142
  "attributes": [
143
143
  {
144
144
  "name": "accessible-description-ref",
@@ -457,7 +457,8 @@
457
457
  "SelectRenderer",
458
458
  "undefined"
459
459
  ]
460
- }
460
+ },
461
+ "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead"
461
462
  },
462
463
  {
463
464
  "name": "required",
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/select",
4
- "version": "25.4.0-alpha3",
4
+ "version": "25.4.0-alpha5",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -72,7 +72,7 @@
72
72
  },
73
73
  {
74
74
  "name": "vaadin-select",
75
- "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`\nwith `<vaadin-select-item>` children:\n\n```html\n<vaadin-select>\n <vaadin-select-list-box slot=\"overlay\">\n <vaadin-select-item value=\"recent\">Most recent first</vaadin-select-item>\n <vaadin-select-item value=\"rating-asc\">Rating: low to high</vaadin-select-item>\n <vaadin-select-item value=\"rating-desc\">Rating: high to low</vaadin-select-item>\n </vaadin-select-list-box>\n</vaadin-select>\n```\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n#### Renderer (deprecated)\n\nThe content of the select can also be populated by using the renderer callback function, although\nthis approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\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 toggle button\n`field-button` | Set on the toggle 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`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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`invalid` | Set when the element is invalid\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`opened` | Set when the overlay is opened\n`phone` | Set when the overlay is shown in phone mode\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-height` |\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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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| `--vaadin-item-overlay-padding` |\n| `--vaadin-select-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal components are used\nand themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha3/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha3/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha3/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
75
+ "description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`\nwith `<vaadin-select-item>` children:\n\n```html\n<vaadin-select>\n <vaadin-select-list-box slot=\"overlay\">\n <vaadin-select-item value=\"recent\">Most recent first</vaadin-select-item>\n <vaadin-select-item value=\"rating-asc\">Rating: low to high</vaadin-select-item>\n <vaadin-select-item value=\"rating-desc\">Rating: high to low</vaadin-select-item>\n </vaadin-select-list-box>\n</vaadin-select>\n```\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n#### Renderer (deprecated)\n\nThe content of the select can also be populated by using the renderer callback function, although\nthis approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\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 toggle button\n`field-button` | Set on the toggle 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`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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`invalid` | Set when the element is invalid\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`opened` | Set when the overlay is opened\n`phone` | Set when the overlay is shown in phone mode\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-height` |\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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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| `--vaadin-item-overlay-padding` |\n| `--vaadin-select-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal components are used\nand themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha5/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha5/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha5/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
76
76
  "extension": true,
77
77
  "attributes": [
78
78
  {
@@ -192,7 +192,8 @@
192
192
  "description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
193
193
  "value": {
194
194
  "kind": "expression"
195
- }
195
+ },
196
+ "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead"
196
197
  },
197
198
  {
198
199
  "name": "?required",