@vaadin/select 25.4.0-alpha4 → 25.4.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/select",
-  "version": "25.4.0-alpha4",
+  "version": "25.4.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -37,24 +37,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.4.0-alpha4",
-    "@vaadin/button": "25.4.0-alpha4",
-    "@vaadin/component-base": "25.4.0-alpha4",
-    "@vaadin/field-base": "25.4.0-alpha4",
-    "@vaadin/input-container": "25.4.0-alpha4",
-    "@vaadin/item": "25.4.0-alpha4",
-    "@vaadin/list-box": "25.4.0-alpha4",
-    "@vaadin/lit-renderer": "25.4.0-alpha4",
-    "@vaadin/overlay": "25.4.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "25.4.0-alpha4",
+    "@vaadin/a11y-base": "25.4.0-alpha6",
+    "@vaadin/button": "25.4.0-alpha6",
+    "@vaadin/component-base": "25.4.0-alpha6",
+    "@vaadin/field-base": "25.4.0-alpha6",
+    "@vaadin/input-container": "25.4.0-alpha6",
+    "@vaadin/item": "25.4.0-alpha6",
+    "@vaadin/list-box": "25.4.0-alpha6",
+    "@vaadin/lit-renderer": "25.4.0-alpha6",
+    "@vaadin/overlay": "25.4.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "25.4.0-alpha6",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.4.0-alpha4",
-    "@vaadin/chai-plugins": "25.4.0-alpha4",
-    "@vaadin/test-runner-commands": "25.4.0-alpha4",
+    "@vaadin/aura": "25.4.0-alpha6",
+    "@vaadin/chai-plugins": "25.4.0-alpha6",
+    "@vaadin/test-runner-commands": "25.4.0-alpha6",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.4.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "25.4.0-alpha6",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -62,5 +62,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "7809e4c099538333a6dbd11d8da18a0c6ec30dad"
+  "gitHead": "4ead7de23a27c47e5ef4cb172481f8c54e86691a"
 }

package/src/button-controller.js

@@ -16,6 +16,7 @@ export class ButtonController extends SlotController {
         host.ariaTarget = button;
         host.stateTarget = button;
 
+        button.setAttribute('role', 'combobox');
         button.setAttribute('aria-haspopup', 'listbox');
       },
     });

package/src/styles/vaadin-select-base-styles.js

@@ -19,6 +19,12 @@ export const selectStyles = css`
     display: contents;
   }
 
+  :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) [part='input-field']::before {
+    content: '\\2003' / '';
+    width: 0;
+    margin-inline-end: calc(var(--vaadin-input-field-gap, var(--vaadin-gap-s)) * -1);
+  }
+
   :host(:not([focus-ring])) [part='input-field'] {
     outline: none;
   }

package/src/styles/vaadin-select-value-button-base-styles.js

@@ -16,19 +16,14 @@ export const valueButton = css`
     align-items: center;
   }
 
-  :host::before {
-    content: '\\2003' / '';
-    display: inline-block;
-    width: 0;
-  }
-
   ::slotted(*) {
+    display: inline-flex;
+    vertical-align: top;
     padding: 0;
     cursor: inherit;
   }
 
-  .vaadin-button-container,
-  [part='label'] {
+  .vaadin-button-container {
     display: contents;
   }
 

package/src/vaadin-select-base-mixin.js

@@ -11,7 +11,6 @@ import { MediaQueryController } from '@vaadin/component-base/src/media-query-con
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
-import { LabelController } from '@vaadin/field-base/src/label-controller.js';
 import { ButtonController } from './button-controller.js';
 
 export const SelectBaseMixin = (superClass) =>
@@ -140,6 +139,9 @@ export const SelectBaseMixin = (superClass) =>
         /** @private */
         _items: Object,
 
+        /** @private */
+        _menuElement: Object,
+
         /**
          * The `<vaadin-select-list-box>` slotted directly into the overlay slot.
          * @private
@@ -162,14 +164,6 @@ export const SelectBaseMixin = (superClass) =>
       ];
     }
 
-    constructor() {
-      super();
-
-      this._itemId = `value-${this.localName}-${generateUniqueId()}`;
-      this._srLabelController = new LabelController(this);
-      this._srLabelController.slotName = 'sr-label';
-    }
-
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
@@ -188,8 +182,6 @@ export const SelectBaseMixin = (superClass) =>
       this._valueButtonController = new ButtonController(this);
       this.addController(this._valueButtonController);
 
-      this.addController(this._srLabelController);
-
       this.addController(
         new MediaQueryController(this._phoneMediaQuery, (matches) => {
           this._phone = matches;
@@ -233,8 +225,14 @@ export const SelectBaseMixin = (superClass) =>
         }
       }
 
-      if (props.has('accessibleName')) {
-        this._srLabelController.setLabel(this.accessibleName);
+      if (this.focusElement) {
+        if (props.has('opened') || props.has('_menuElement')) {
+          setOrRemoveAttribute(this.focusElement, 'aria-controls', this.opened && this._menuElement?.id);
+        }
+
+        if (props.has('readonly')) {
+          setOrRemoveAttribute(this.focusElement, 'aria-readonly', this.readonly && 'true');
+        }
       }
 
       // Validate when the required constraint is removed.
@@ -276,6 +274,9 @@ export const SelectBaseMixin = (superClass) =>
      */
     _assignMenuElement(menuElement) {
       if (menuElement && menuElement !== this.__lastMenuElement) {
+        if (!menuElement.id) {
+          menuElement.id = `${menuElement.localName}-${generateUniqueId()}`;
+        }
         this._menuElement = menuElement;
 
         // Ensure items are initialized
@@ -486,9 +487,6 @@ export const SelectBaseMixin = (superClass) =>
       labelItem._sourceItem = selected;
 
       this.__appendValueItemElement(labelItem, this.focusElement);
-
-      // Ensure the item gets proper styles
-      labelItem.selected = true;
     }
 
     /**
@@ -519,13 +517,14 @@ export const SelectBaseMixin = (superClass) =>
      */
     __appendValueItemElement(itemElement, parent) {
       parent.appendChild(itemElement);
+      itemElement.removeAttribute('id');
       itemElement.removeAttribute('tabindex');
+      itemElement.removeAttribute('selected');
       itemElement.removeAttribute('aria-selected');
       itemElement.removeAttribute('role');
       itemElement.removeAttribute('focused');
       itemElement.removeAttribute('focus-ring');
       itemElement.removeAttribute('active');
-      itemElement.setAttribute('id', this._itemId);
     }
 
     /** @private */
@@ -558,8 +557,6 @@ export const SelectBaseMixin = (superClass) =>
         }
         delete this._selectedChanging;
       }
-
-      this.__updateFieldAriaControllerLabelledBy();
     }
 
     /** @private */
@@ -655,31 +652,4 @@ export const SelectBaseMixin = (superClass) =>
       this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
       this.__dispatchChangePending = false;
     }
-
-    /** @override */
-    __updateFieldAriaControllerLabel() {
-      // NO-OP
-    }
-
-    /** @override */
-    __updateFieldAriaControllerLabelledBy() {
-      let labelId;
-      if (this.accessibleNameRef) {
-        labelId = this.accessibleNameRef;
-      } else if (this.accessibleName) {
-        labelId = this._srLabelController.defaultId;
-      } else if (this.hasAttribute('has-label')) {
-        labelId = this._labelNode?.id;
-      }
-
-      const selectedItem = this._items?.[this._menuElement.selected];
-      const itemId = selectedItem || this.placeholder ? this._itemId : null;
-
-      const ids = [labelId, itemId].filter(Boolean);
-      if (ids.length > 0) {
-        this._fieldAriaController.setLabelledBy(ids.join(' '));
-      } else {
-        this._fieldAriaController.setLabelledBy(null);
-      }
-    }
   };

package/src/vaadin-select.js

@@ -11,7 +11,6 @@ import './vaadin-select-value-button.js';
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
-import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -198,7 +197,7 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(Lum
   }
 
   static get styles() {
-    return [inputFieldShared, screenReaderOnly, selectStyles];
+    return [inputFieldShared, selectStyles];
   }
 
   /** @protected */
@@ -255,9 +254,6 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(Lum
       </vaadin-select-overlay>
 
       <slot name="tooltip"></slot>
-      <div class="sr-only">
-        <slot name="sr-label"></slot>
-      </div>
     `;
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/select",
-  "version": "25.4.0-alpha4",
+  "version": "25.4.0-alpha6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -138,7 +138,7 @@
         },
         {
           "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 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-alpha4/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha4/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha4/#/elements/vaadin-select-item) - an item element.\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 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-alpha6/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/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",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/select",
-  "version": "25.4.0-alpha4",
+  "version": "25.4.0-alpha6",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -72,7 +72,7 @@
         },
         {
           "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 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-alpha4/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha4/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha4/#/elements/vaadin-select-item) - an item element.\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 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-alpha6/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha6/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {