@vaadin/select 25.3.0-dev.3a3c2d7d2a → 25.3.0

package/custom-elements.json

@@ -17,6 +17,36 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "vaadin-select-list-box.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/vaadin-select-list-box.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "vaadin-select-item.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/vaadin-select-item.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-select-base-mixin.js",
@@ -26,6 +56,20 @@
           "description": "",
           "name": "SelectBaseMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "accessibleDescriptionRef",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "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.",
+              "attribute": "accessible-description-ref",
+              "inheritedFrom": {
+                "name": "FieldMixin",
+                "package": "@vaadin/field-base/src/field-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "accessibleName",
@@ -33,7 +77,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "attribute": "accessible-name",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -47,7 +91,7 @@
               "type": {
                 "text": "string"
               },
-              "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.",
               "attribute": "accessible-name-ref",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -143,7 +187,7 @@
               "name": "items",
               "privacy": "public",
               "type": {
-                "text": "!Array<!SelectItem>"
+                "text": "!Array<!SelectItemData>"
               },
               "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.",
               "attribute": "items"
@@ -234,12 +278,14 @@
                 "text": "!SelectRenderer | undefined"
               },
               "description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
+              "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead",
               "attribute": "renderer"
             },
             {
               "kind": "method",
               "name": "requestContentUpdate",
-              "description": "Requests an update for the content of the select.\nWhile performing the update, it invokes the renderer passed in the `renderer` property.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested."
+              "description": "Requests an update for the content of the select.\nWhile performing the update, it invokes the renderer passed in the `renderer` property.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.",
+              "deprecated": "This method is deprecated and will be removed in Vaadin 26"
             },
             {
               "kind": "field",
@@ -299,12 +345,24 @@
             }
           ],
           "attributes": [
+            {
+              "name": "accessible-description-ref",
+              "type": {
+                "text": "string"
+              },
+              "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.",
+              "fieldName": "accessibleDescriptionRef",
+              "inheritedFrom": {
+                "name": "FieldMixin",
+                "package": "@vaadin/field-base/src/field-mixin.js"
+              }
+            },
             {
               "name": "accessible-name",
               "type": {
                 "text": "string"
               },
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "fieldName": "accessibleName",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -316,7 +374,7 @@
               "type": {
                 "text": "string"
               },
-              "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.",
               "fieldName": "accessibleNameRef",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -453,6 +511,7 @@
                 "text": "!SelectRenderer | undefined"
               },
               "description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
+              "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead",
               "fieldName": "renderer"
             },
             {
@@ -512,6 +571,294 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-select-item.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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.",
+          "name": "SelectItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "attribute": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "String that can be set to visually represent the selected item in `vaadin-select`.",
+              "name": "label",
+              "kind": "field"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the item is in selected state.",
+              "attribute": "selected",
+              "inheritedFrom": {
+                "name": "ItemMixin",
+                "package": "@vaadin/item/src/vaadin-item-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "Submittable string value. The default value is the trimmed text content of the element.",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "ItemMixin",
+                "package": "@vaadin/item/src/vaadin-item-mixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the item is in selected state.",
+              "fieldName": "selected",
+              "inheritedFrom": {
+                "name": "ItemMixin",
+                "package": "@vaadin/item/src/vaadin-item-mixin.js"
+              }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ItemMixin",
+              "package": "@vaadin/item/src/vaadin-item-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "DirMixin",
+              "package": "@vaadin/component-base/src/dir-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-select-item",
+          "customElement": true,
+          "events": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SelectItem",
+          "declaration": {
+            "name": "SelectItem",
+            "module": "src/vaadin-select-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-select-list-box.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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.",
+          "name": "SelectListBox",
+          "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "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.",
+              "attribute": "disabled",
+              "inheritedFrom": {
+                "name": "ListMixin",
+                "package": "@vaadin/a11y-base/src/list-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "privacy": "public",
+              "type": {
+                "text": "!Array<!Element> | undefined"
+              },
+              "description": "A read-only list of items from which a selection can be made.\nIt is populated from the elements passed to the light DOM,\nand updated dynamically when adding or removing items.",
+              "attribute": "items",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ListMixin",
+                "package": "@vaadin/a11y-base/src/list-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Define how items are disposed in the dom.\nPossible values are: `horizontal|vertical`.\nIt also changes navigation keys from left/right to up/down.",
+              "attribute": "orientation",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ListMixin",
+                "package": "@vaadin/a11y-base/src/list-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "privacy": "public",
+              "type": {
+                "text": "number"
+              },
+              "description": "The index of the item selected in the items array.\nNote: Not updated when used in `multiple` selection mode.",
+              "attribute": "selected",
+              "inheritedFrom": {
+                "name": "ListMixin",
+                "package": "@vaadin/a11y-base/src/list-mixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "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.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "ListMixin",
+                "package": "@vaadin/a11y-base/src/list-mixin.js"
+              }
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "string"
+              },
+              "description": "Define how items are disposed in the dom.\nPossible values are: `horizontal|vertical`.\nIt also changes navigation keys from left/right to up/down.",
+              "fieldName": "orientation",
+              "inheritedFrom": {
+                "name": "ListMixin",
+                "package": "@vaadin/a11y-base/src/list-mixin.js"
+              }
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "number"
+              },
+              "description": "The index of the item selected in the items array.\nNote: Not updated when used in `multiple` selection mode.",
+              "fieldName": "selected",
+              "inheritedFrom": {
+                "name": "ListMixin",
+                "package": "@vaadin/a11y-base/src/list-mixin.js"
+              }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ListMixin",
+              "package": "@vaadin/a11y-base/src/list-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "DirMixin",
+              "package": "@vaadin/component-base/src/dir-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-select-list-box",
+          "customElement": true,
+          "events": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SelectListBox",
+          "declaration": {
+            "name": "SelectListBox",
+            "module": "src/vaadin-select-list-box.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-select-overlay-mixin.js",
@@ -521,6 +868,20 @@
           "description": "",
           "name": "SelectOverlayMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "attribute": "autofocus",
+              "inheritedFrom": {
+                "name": "OverlayFocusMixin",
+                "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "bringToFront",
@@ -553,7 +914,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "attribute": "focus-trap",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -824,12 +1185,24 @@
             }
           ],
           "attributes": [
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "OverlayFocusMixin",
+                "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "fieldName": "focusTrap",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -1034,9 +1407,23 @@
       "declarations": [
         {
           "kind": "class",
-          "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>`](#/elements/vaadin-button).\n- `<vaadin-select-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).\n- `<vaadin-select-item>` - has the same API as [`<vaadin-item>`](#/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 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-helper-color`              |\n| `--vaadin-input-field-helper-font-size`          |\n| `--vaadin-input-field-helper-font-weight`        |\n| `--vaadin-input-field-helper-line-height`        |\n| `--vaadin-input-field-label-color`               |\n| `--vaadin-input-field-label-font-size`           |\n| `--vaadin-input-field-label-font-weight`         |\n| `--vaadin-input-field-label-line-height`         |\n| `--vaadin-input-field-padding`                   |\n| `--vaadin-input-field-placeholder-color`         |\n| `--vaadin-input-field-required-indicator`        |\n| `--vaadin-input-field-required-indicator-color`  |\n| `--vaadin-input-field-top-end-radius`            |\n| `--vaadin-input-field-top-start-radius`          |\n| `--vaadin-input-field-value-color`               |\n| `--vaadin-input-field-value-font-size`           |\n| `--vaadin-input-field-value-font-weight`         |\n| `--vaadin-input-field-value-line-height`         |\n| `--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>`](#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Select",
           "members": [
+            {
+              "kind": "field",
+              "name": "accessibleDescriptionRef",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "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.",
+              "attribute": "accessible-description-ref",
+              "inheritedFrom": {
+                "name": "FieldMixin",
+                "package": "@vaadin/field-base/src/field-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "accessibleName",
@@ -1044,7 +1431,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "attribute": "accessible-name",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -1058,7 +1445,7 @@
               "type": {
                 "text": "string"
               },
-              "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.",
               "attribute": "accessible-name-ref",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -1154,7 +1541,7 @@
               "name": "items",
               "privacy": "public",
               "type": {
-                "text": "!Array<!SelectItem>"
+                "text": "!Array<!SelectItemData>"
               },
               "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.",
               "attribute": "items",
@@ -1269,6 +1656,7 @@
                 "text": "!SelectRenderer | undefined"
               },
               "description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
+              "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead",
               "attribute": "renderer",
               "inheritedFrom": {
                 "name": "SelectBaseMixin",
@@ -1279,6 +1667,7 @@
               "kind": "method",
               "name": "requestContentUpdate",
               "description": "Requests an update for the content of the select.\nWhile performing the update, it invokes the renderer passed in the `renderer` property.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.",
+              "deprecated": "This method is deprecated and will be removed in Vaadin 26",
               "inheritedFrom": {
                 "name": "SelectBaseMixin",
                 "module": "src/vaadin-select-base-mixin.js"
@@ -1372,41 +1761,25 @@
               "name": "value-changed"
             }
           ],
-          "mixins": [
-            {
-              "name": "SelectBaseMixin",
-              "module": "src/vaadin-select-base-mixin.js"
-            },
-            {
-              "name": "ElementMixin",
-              "package": "@vaadin/component-base/src/element-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
-            },
+          "attributes": [
             {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
+              "name": "accessible-description-ref",
+              "type": {
+                "text": "string"
+              },
+              "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.",
+              "fieldName": "accessibleDescriptionRef",
+              "inheritedFrom": {
+                "name": "FieldMixin",
+                "package": "@vaadin/field-base/src/field-mixin.js"
+              }
             },
-            {
-              "name": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-select",
-          "customElement": true,
-          "attributes": [
             {
               "name": "accessible-name",
               "type": {
                 "text": "string"
               },
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "fieldName": "accessibleName",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -1418,7 +1791,7 @@
               "type": {
                 "text": "string"
               },
-              "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.",
               "fieldName": "accessibleNameRef",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -1575,6 +1948,7 @@
                 "text": "!SelectRenderer | undefined"
               },
               "description": "Custom function for rendering the content of the `<vaadin-select>`.\nReceives two arguments:\n\n- `root` The internal container DOM element. Append your content to it.\n- `select` The reference to the `<vaadin-select>` element.",
+              "deprecated": "Use a slotted `<vaadin-select-list-box>` or the `items` property instead",
               "fieldName": "renderer",
               "inheritedFrom": {
                 "name": "SelectBaseMixin",
@@ -1593,6 +1967,13 @@
                 "package": "@vaadin/field-base/src/validate-mixin.js"
               }
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            },
             {
               "name": "value",
               "type": {
@@ -1605,7 +1986,35 @@
                 "module": "src/vaadin-select-base-mixin.js"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "SelectBaseMixin",
+              "module": "src/vaadin-select-base-mixin.js"
+            },
+            {
+              "name": "ElementMixin",
+              "package": "@vaadin/component-base/src/element-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-select",
+          "customElement": true
         }
       ],
       "exports": [