@vaadin/select 25.3.0-alpha1 → 25.3.0-alpha11

package/src/vaadin-select.d.ts

@@ -7,7 +7,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
 
-export interface SelectItem {
+export interface SelectItemData {
   label?: string;
   value?: string;
   component?: string;
@@ -15,6 +15,11 @@ export interface SelectItem {
   className?: string;
 }
 
+/**
+ * @deprecated Use `SelectItemData` instead.
+ */
+export type SelectItem = SelectItemData;
+
 /**
  * Fired when the user commits a value change.
  */
@@ -90,7 +95,26 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
  *
  * ### Rendering
  *
- * Alternatively, the content of the select can be populated by using the renderer callback function.
+ * Alternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`
+ * with `<vaadin-select-item>` children:
+ *
+ * ```html
+ * <vaadin-select>
+ *   <vaadin-select-list-box slot="overlay">
+ *     <vaadin-select-item value="recent">Most recent first</vaadin-select-item>
+ *     <vaadin-select-item value="rating-asc">Rating: low to high</vaadin-select-item>
+ *     <vaadin-select-item value="rating-desc">Rating: high to low</vaadin-select-item>
+ *   </vaadin-select-list-box>
+ * </vaadin-select>
+ * ```
+ *
+ * * Hint: By setting the `label` property of inner vaadin-items you will
+ * be able to change the visual representation of the selected value in the input part.
+ *
+ * #### Renderer (deprecated)
+ *
+ * The content of the select can also be populated by using the renderer callback function, although
+ * this approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.
  *
  * The renderer function provides `root`, `select` arguments.
  * Generate DOM content, append it to the `root` element and control the state
@@ -118,9 +142,6 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
  * in the next renderer call and will be provided with the `root` argument.
  * On first call it will be empty.
  *
- * * Hint: By setting the `label` property of inner vaadin-items you will
- * be able to change the visual representation of the selected value in the input part.
- *
  * ### Styling
  *
  * The following custom properties are available for styling:
@@ -163,12 +184,12 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
  *
  * ### Internal components
  *
- * In addition to `<vaadin-select>` itself, the following internal
- * components are themable:
+ * In addition to `<vaadin-select>` itself, the following internal components are used
+ * and themable:
  *
  * - `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).
- * - `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
- * - `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+ * - [`<vaadin-select-list-box>`](#/elements/vaadin-select-list-box) - a list-box element.
+ * - [`<vaadin-select-item>`](#/elements/vaadin-select-item) - an item element.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/src/vaadin-select.js

@@ -46,7 +46,26 @@ import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
  *
  * ### Rendering
  *
- * Alternatively, the content of the select can be populated by using the renderer callback function.
+ * Alternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`
+ * with `<vaadin-select-item>` children:
+ *
+ * ```html
+ * <vaadin-select>
+ *   <vaadin-select-list-box slot="overlay">
+ *     <vaadin-select-item value="recent">Most recent first</vaadin-select-item>
+ *     <vaadin-select-item value="rating-asc">Rating: low to high</vaadin-select-item>
+ *     <vaadin-select-item value="rating-desc">Rating: high to low</vaadin-select-item>
+ *   </vaadin-select-list-box>
+ * </vaadin-select>
+ * ```
+ *
+ * * Hint: By setting the `label` property of inner vaadin-items you will
+ * be able to change the visual representation of the selected value in the input part.
+ *
+ * #### Renderer (deprecated)
+ *
+ * The content of the select can also be populated by using the renderer callback function, although
+ * this approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.
  *
  * The renderer function provides `root`, `select` arguments.
  * Generate DOM content, append it to the `root` element and control the state
@@ -74,9 +93,6 @@ import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
  * in the next renderer call and will be provided with the `root` argument.
  * On first call it will be empty.
  *
- * * Hint: By setting the `label` property of inner vaadin-items you will
- * be able to change the visual representation of the selected value in the input part.
- *
  * ### Styling
  *
  * The following custom properties are available for styling:
@@ -119,12 +135,12 @@ import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
  *
  * ### Internal components
  *
- * In addition to `<vaadin-select>` itself, the following internal
- * components are themable:
+ * In addition to `<vaadin-select>` itself, the following internal components are used
+ * and themable:
  *
  * - `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).
- * - `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
- * - `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+ * - [`<vaadin-select-list-box>`](#/elements/vaadin-select-list-box) - a list-box element.
+ * - [`<vaadin-select-item>`](#/elements/vaadin-select-item) - an item element.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -134,6 +150,7 @@ import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-select
  * @extends HTMLElement
  */
@@ -188,7 +205,7 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(Lum
         .positionTarget="${this._inputContainer}"
         .opened="${this.opened}"
         .withBackdrop="${this._phone}"
-        .renderer="${this.renderer || this.__defaultRenderer}"
+        .renderer="${this.__slottedListBox ? undefined : this.renderer || this.__defaultRenderer}"
         ?phone="${this._phone}"
         theme="${ifDefined(this._theme)}"
         ?no-vertical-overlap="${this.noVerticalOverlap}"
@@ -196,7 +213,7 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(Lum
         @opened-changed="${this._onOpenedChanged}"
         @vaadin-overlay-open="${this._onOverlayOpen}"
       >
-        <slot name="overlay"></slot>
+        <slot name="overlay" @slotchange="${this.__onOverlaySlotChange}"></slot>
       </vaadin-select-overlay>
 
       <slot name="tooltip"></slot>

package/vaadin-select-item.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-select-item.js';

package/vaadin-select-item.js

@@ -0,0 +1,2 @@
+import './src/vaadin-select-item.js';
+export * from './src/vaadin-select-item.js';

package/vaadin-select-list-box.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-select-list-box.js';

package/vaadin-select-list-box.js

@@ -0,0 +1,2 @@
+import './src/vaadin-select-list-box.js';
+export * from './src/vaadin-select-list-box.js';

package/web-types.json

@@ -1,18 +1,157 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/select",
-  "version": "25.3.0-alpha1",
+  "version": "25.3.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "vaadin-select-item",
+          "description": "`<vaadin-select-item>` is a Web Component for creating `<vaadin-select>` items.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name    | Description\n-------------|----------------\n`checkmark`  | The graphical checkmark shown for a selected item\n`content`    | The element that wraps the slot\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`active`     | Set when the item is pressed down, either with mouse, touch or the keyboard.\n`disabled`   | Set when the item is disabled.\n`focus-ring` | Set when the item is focused using the keyboard.\n`focused`    | Set when the item is focused.\n`selected`   | Set when the item is selected\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:----------------------------------|\n| `--vaadin-item-border-radius`    |\n| `--vaadin-item-checkmark-color`  |\n| `--vaadin-item-gap`              |\n| `--vaadin-item-height`           |\n| `--vaadin-item-padding`          |\n| `--vaadin-item-text-align`       |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "selected",
+              "description": "If true, the item is in selected state.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "label",
+                "description": "String that can be set to visually represent the selected item in `vaadin-select`.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "selected",
+                "description": "If true, the item is in selected state.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "value",
+                "description": "Submittable string value. The default value is the trimmed text content of the element.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vaadin-select-list-box",
+          "description": "`<vaadin-select-list-box>` is a Web Component for wrapping `<vaadin-select>` items.\n\n```html\n<vaadin-select>\n  <vaadin-select-list-box slot=\"overlay\">\n    <vaadin-select-item value=\"foo\">Foo</vaadin-select-item>\n    <vaadin-select-item value=\"bar\">Bar</vaadin-select-item>\n  </vaadin-select-list-box>\n</vaadin-select>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name         | Description\n------------------|------------------------\n`items`           | The items container\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "selected",
+              "description": "The index of the item selected in the items array.\nNote: Not updated when used in `multiple` selection mode.",
+              "value": {
+                "type": [
+                  "number"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "selected",
+                "description": "The index of the item selected in the items array.\nNote: Not updated when used in `multiple` selection mode.",
+                "value": {
+                  "type": [
+                    "number"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "vaadin-select",
-          "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\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\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.3.0-alpha1/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha1/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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 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\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\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.3.0-alpha11/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "accessible-description-ref",
+              "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.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
             {
               "name": "accessible-name",
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "value": {
                 "type": [
                   "string"
@@ -21,7 +160,7 @@
             },
             {
               "name": "accessible-name-ref",
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "value": {
                 "type": [
                   "string"
@@ -150,9 +289,7 @@
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -168,9 +305,18 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessibleDescriptionRef",
+                "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.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
               {
                 "name": "accessibleName",
-                "description": "String used to label the component to screen reader users.",
+                "description": "String used to label the component for screen reader users.",
                 "value": {
                   "type": [
                     "string"
@@ -179,7 +325,7 @@
               },
               {
                 "name": "accessibleNameRef",
-                "description": "Id of the element used as label of the component to screen reader users.",
+                "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
                 "value": {
                   "type": [
                     "string"
@@ -236,7 +382,7 @@
                 "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.",
                 "value": {
                   "type": [
-                    "Array<SelectItem>"
+                    "Array<SelectItemData>"
                   ]
                 }
               },

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/select",
-  "version": "25.3.0-alpha1",
+  "version": "25.3.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -14,21 +14,84 @@
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "vaadin-select-item",
+          "description": "`<vaadin-select-item>` is a Web Component for creating `<vaadin-select>` items.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name    | Description\n-------------|----------------\n`checkmark`  | The graphical checkmark shown for a selected item\n`content`    | The element that wraps the slot\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`active`     | Set when the item is pressed down, either with mouse, touch or the keyboard.\n`disabled`   | Set when the item is disabled.\n`focus-ring` | Set when the item is focused using the keyboard.\n`focused`    | Set when the item is focused.\n`selected`   | Set when the item is selected\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:----------------------------------|\n| `--vaadin-item-border-radius`    |\n| `--vaadin-item-checkmark-color`  |\n| `--vaadin-item-gap`              |\n| `--vaadin-item-height`           |\n| `--vaadin-item-padding`          |\n| `--vaadin-item-text-align`       |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".label",
+              "description": "String that can be set to visually represent the selected item in `vaadin-select`.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?selected",
+              "description": "If true, the item is in selected state.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".value",
+              "description": "Submittable string value. The default value is the trimmed text content of the element.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
+        {
+          "name": "vaadin-select-list-box",
+          "description": "`<vaadin-select-list-box>` is a Web Component for wrapping `<vaadin-select>` items.\n\n```html\n<vaadin-select>\n  <vaadin-select-list-box slot=\"overlay\">\n    <vaadin-select-item value=\"foo\">Foo</vaadin-select-item>\n    <vaadin-select-item value=\"bar\">Bar</vaadin-select-item>\n  </vaadin-select-list-box>\n</vaadin-select>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name         | Description\n------------------|------------------------\n`items`           | The items container\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.\nWhen the element is disabled, the selected item is\nnot updated when `selected` property is changed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".selected",
+              "description": "The index of the item selected in the items array.\nNote: Not updated when used in `multiple` selection mode.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
         {
           "name": "vaadin-select",
-          "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\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\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.3.0-alpha1/#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha1/#/elements/vaadin-item).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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 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\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\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.3.0-alpha11/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha11/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": ".accessibleDescriptionRef",
+              "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.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".accessibleName",
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".accessibleNameRef",
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "value": {
                 "kind": "expression"
               }