@vaadin/select 25.0.0-alpha12 → 25.0.0-alpha14
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/package.json +15 -15
- package/src/vaadin-select-base-mixin.d.ts +0 -2
- package/src/vaadin-select-base-mixin.js +1 -5
- package/web-types.json +2 -24
- package/web-types.lit.json +2 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/select",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha14",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,28 +36,28 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
40
|
-
"@vaadin/button": "25.0.0-
|
|
41
|
-
"@vaadin/component-base": "25.0.0-
|
|
42
|
-
"@vaadin/field-base": "25.0.0-
|
|
43
|
-
"@vaadin/input-container": "25.0.0-
|
|
44
|
-
"@vaadin/item": "25.0.0-
|
|
45
|
-
"@vaadin/list-box": "25.0.0-
|
|
46
|
-
"@vaadin/lit-renderer": "25.0.0-
|
|
47
|
-
"@vaadin/overlay": "25.0.0-
|
|
48
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
39
|
+
"@vaadin/a11y-base": "25.0.0-alpha14",
|
|
40
|
+
"@vaadin/button": "25.0.0-alpha14",
|
|
41
|
+
"@vaadin/component-base": "25.0.0-alpha14",
|
|
42
|
+
"@vaadin/field-base": "25.0.0-alpha14",
|
|
43
|
+
"@vaadin/input-container": "25.0.0-alpha14",
|
|
44
|
+
"@vaadin/item": "25.0.0-alpha14",
|
|
45
|
+
"@vaadin/list-box": "25.0.0-alpha14",
|
|
46
|
+
"@vaadin/lit-renderer": "25.0.0-alpha14",
|
|
47
|
+
"@vaadin/overlay": "25.0.0-alpha14",
|
|
48
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha14",
|
|
49
49
|
"lit": "^3.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
53
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
52
|
+
"@vaadin/chai-plugins": "25.0.0-alpha14",
|
|
53
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha14",
|
|
54
54
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
55
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
55
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha14",
|
|
56
56
|
"sinon": "^18.0.0"
|
|
57
57
|
},
|
|
58
58
|
"web-types": [
|
|
59
59
|
"web-types.json",
|
|
60
60
|
"web-types.lit.json"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "8ebeeeca4b5b6564eff954d6582d0d6760464e51"
|
|
63
63
|
}
|
|
@@ -10,7 +10,6 @@ import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
|
10
10
|
import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
11
11
|
import type { TabindexMixinClass } from '@vaadin/a11y-base/src/tabindex-mixin.js';
|
|
12
12
|
import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
13
|
-
import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
14
13
|
import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
|
|
15
14
|
import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
|
|
16
15
|
import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
|
|
@@ -25,7 +24,6 @@ export declare function SelectBaseMixin<T extends Constructor<HTMLElement>>(
|
|
|
25
24
|
Constructor<FocusMixinClass> &
|
|
26
25
|
Constructor<KeyboardMixinClass> &
|
|
27
26
|
Constructor<LabelMixinClass> &
|
|
28
|
-
Constructor<OverlayClassMixinClass> &
|
|
29
27
|
Constructor<SelectBaseMixinClass> &
|
|
30
28
|
Constructor<TabindexMixinClass> &
|
|
31
29
|
Constructor<ValidateMixinClass> &
|
|
@@ -8,7 +8,6 @@ import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.j
|
|
|
8
8
|
import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
9
9
|
import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
10
10
|
import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
|
|
11
|
-
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
12
11
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
13
12
|
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
14
13
|
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
@@ -21,12 +20,9 @@ import { ButtonController } from './button-controller.js';
|
|
|
21
20
|
* @mixes DelegateStateMixin
|
|
22
21
|
* @mixes FieldMixin
|
|
23
22
|
* @mixes KeyboardMixin
|
|
24
|
-
* @mixes OverlayClassMixin
|
|
25
23
|
*/
|
|
26
24
|
export const SelectBaseMixin = (superClass) =>
|
|
27
|
-
class SelectBaseMixin extends
|
|
28
|
-
DelegateFocusMixin(DelegateStateMixin(KeyboardMixin(FieldMixin(superClass)))),
|
|
29
|
-
) {
|
|
25
|
+
class SelectBaseMixin extends DelegateFocusMixin(DelegateStateMixin(KeyboardMixin(FieldMixin(superClass)))) {
|
|
30
26
|
static get properties() {
|
|
31
27
|
return {
|
|
32
28
|
/**
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/select",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha14",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-select",
|
|
11
|
-
"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 the renderer callback function.\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* 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### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n---------------------------------|-----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-select-overlay-width` | Width of the overlay |\n\n`<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
11
|
+
"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 the renderer callback function.\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* 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### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n---------------------------------|-----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-select-overlay-width` | Width of the overlay |\n\n`<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha14/#/elements/vaadin-text-field) for the styling documentation.\n\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|----------------\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|-----------------------------\n`opened` | Set when the select is open\n`phone` | Set when the overlay is shown in phone mode\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha14/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha14/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha14/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -120,17 +120,6 @@
|
|
|
120
120
|
]
|
|
121
121
|
}
|
|
122
122
|
},
|
|
123
|
-
{
|
|
124
|
-
"name": "overlay-class",
|
|
125
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
126
|
-
"value": {
|
|
127
|
-
"type": [
|
|
128
|
-
"string",
|
|
129
|
-
"null",
|
|
130
|
-
"undefined"
|
|
131
|
-
]
|
|
132
|
-
}
|
|
133
|
-
},
|
|
134
123
|
{
|
|
135
124
|
"name": "opened",
|
|
136
125
|
"description": "Set when the select is open",
|
|
@@ -315,17 +304,6 @@
|
|
|
315
304
|
]
|
|
316
305
|
}
|
|
317
306
|
},
|
|
318
|
-
{
|
|
319
|
-
"name": "overlayClass",
|
|
320
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
321
|
-
"value": {
|
|
322
|
-
"type": [
|
|
323
|
-
"string",
|
|
324
|
-
"null",
|
|
325
|
-
"undefined"
|
|
326
|
-
]
|
|
327
|
-
}
|
|
328
|
-
},
|
|
329
307
|
{
|
|
330
308
|
"name": "items",
|
|
331
309
|
"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.",
|
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.0.0-
|
|
4
|
+
"version": "25.0.0-alpha14",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-select",
|
|
19
|
-
"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 the renderer callback function.\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* 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### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n---------------------------------|-----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-select-overlay-width` | Width of the overlay |\n\n`<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
19
|
+
"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 the renderer callback function.\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* 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### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n---------------------------------|-----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-select-overlay-width` | Width of the overlay |\n\n`<vaadin-select>` provides mostly the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha14/#/elements/vaadin-text-field) for the styling documentation.\n\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|----------------\n`toggle-button` | The toggle button\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|-----------------------------\n`opened` | Set when the select is open\n`phone` | Set when the overlay is shown in phone mode\n\nThere are two exceptions in terms of styling compared to `<vaadin-text-field>`:\n- the `clear-button` shadow DOM part does not exist in `<vaadin-select>`.\n- the `input-prevented` state attribute is not supported by `<vaadin-select>`.\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha14/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha14/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha14/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -110,13 +110,6 @@
|
|
|
110
110
|
"kind": "expression"
|
|
111
111
|
}
|
|
112
112
|
},
|
|
113
|
-
{
|
|
114
|
-
"name": ".overlayClass",
|
|
115
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
116
|
-
"value": {
|
|
117
|
-
"kind": "expression"
|
|
118
|
-
}
|
|
119
|
-
},
|
|
120
113
|
{
|
|
121
114
|
"name": ".items",
|
|
122
115
|
"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.",
|