@vaadin/select 25.3.0-alpha3 → 25.3.0-alpha5

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",
@@ -143,7 +173,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,6 +264,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"
             },
             {
@@ -453,6 +484,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 +544,272 @@
         }
       ]
     },
+    {
+      "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"
+              }
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "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"
+              }
+            }
+          ],
+          "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",
@@ -1034,7 +1332,7 @@
       "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 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>`](#/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": [
             {
@@ -1154,7 +1452,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 +1567,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",
@@ -1575,6 +1874,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",

package/package.json

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

package/src/lit/renderer-directives.d.ts

@@ -52,6 +52,7 @@ export class SelectRendererDirective extends LitRendererDirective<Select, Select
  * @param renderer the renderer callback that returns a Lit template.
  * @param dependencies a single dependency or an array of dependencies
  *                     which trigger a re-render when changed.
+ * @deprecated Use a slotted `<vaadin-select-list-box>` or the `items` property instead
  */
 export declare function selectRenderer(
   renderer: SelectLitRenderer,

package/src/lit/renderer-directives.js

@@ -56,5 +56,6 @@ export class SelectRendererDirective extends LitRendererDirective {
  * @param renderer the renderer callback that returns a Lit template.
  * @param dependencies a single dependency or an array of dependencies
  *                     which trigger a re-render when changed.
+ * @deprecated Use a slotted `<vaadin-select-list-box>` or the `items` property instead
  */
 export const selectRenderer = directive(SelectRendererDirective);

package/src/vaadin-select-base-mixin.d.ts

@@ -13,7 +13,7 @@ import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegat
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
-import type { SelectItem, SelectRenderer } from './vaadin-select.js';
+import type { SelectItemData, SelectRenderer } from './vaadin-select.js';
 
 export declare function SelectBaseMixin<T extends Constructor<HTMLElement>>(
   base: T,
@@ -49,7 +49,7 @@ export declare class SelectBaseMixinClass {
    * Note: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.
    * To render the item with a custom component, provide a tag name by the `component` property.
    */
-  items: SelectItem[] | null | undefined;
+  items: SelectItemData[] | null | undefined;
 
   /**
    * Set when the select is open
@@ -62,6 +62,8 @@ export declare class SelectBaseMixinClass {
    *
    * - `root` The internal container DOM element. Append your content to it.
    * - `select` The reference to the `<vaadin-select>` element.
+   *
+   * @deprecated Use a slotted `<vaadin-select-list-box>` or the `items` property instead
    */
   renderer: SelectRenderer | undefined;
 

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

@@ -10,6 +10,7 @@ import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mi
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { issueWarning } from '@vaadin/component-base/src/warnings.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';
@@ -37,7 +38,7 @@ export const SelectBaseMixin = (superClass) =>
          * Note: each item is rendered by default as the internal `<vaadin-select-item>` that is an extension of `<vaadin-item>`.
          * To render the item with a custom component, provide a tag name by the `component` property.
          *
-         * @type {!Array<!SelectItem>}
+         * @type {!Array<!SelectItemData>}
          */
         items: {
           type: Array,
@@ -62,7 +63,9 @@ export const SelectBaseMixin = (superClass) =>
          *
          * - `root` The internal container DOM element. Append your content to it.
          * - `select` The reference to the `<vaadin-select>` element.
+         *
          * @type {!SelectRenderer | undefined}
+         * @deprecated Use a slotted `<vaadin-select-list-box>` or the `items` property instead
          */
         renderer: {
           type: Object,
@@ -138,6 +141,15 @@ export const SelectBaseMixin = (superClass) =>
 
         /** @private */
         _items: Object,
+
+        /**
+         * The `<vaadin-select-list-box>` slotted directly into the overlay slot.
+         * @private
+         */
+        __slottedListBox: {
+          type: Object,
+          sync: true,
+        },
       };
     }
 
@@ -199,6 +211,25 @@ export const SelectBaseMixin = (superClass) =>
       if (props.has('_phone')) {
         this.toggleAttribute('phone', this._phone);
       }
+
+      if (props.has('__slottedListBox')) {
+        const slottedListBox = this.__slottedListBox;
+        if (slottedListBox) {
+          // Slotted list-box takes precedence over the `renderer` and `items`.
+          if (this.items?.length || this.renderer) {
+            issueWarning(
+              'WARNING: Both a slotted <vaadin-select-list-box> and the "items" / "renderer"' +
+                ' property are set on <vaadin-select>. The slotted list-box takes precedence.',
+            );
+          }
+
+          this._assignMenuElement(slottedListBox);
+        } else if (props.get('__slottedListBox')) {
+          this._menuElement = null;
+          this._items = null;
+          this.__lastMenuElement = null;
+        }
+      }
     }
 
     /**
@@ -231,8 +262,8 @@ export const SelectBaseMixin = (superClass) =>
     }
 
     /**
-     * @param {SelectItem[] | undefined | null} newItems
-     * @param {SelectItem[] | undefined | null} oldItems
+     * @param {SelectItemData[] | undefined | null} newItems
+     * @param {SelectItemData[] | undefined | null} oldItems
      * @private
      */
     __itemsChanged(newItems, oldItems) {
@@ -241,6 +272,17 @@ export const SelectBaseMixin = (superClass) =>
       }
     }
 
+    /**
+     * Detects a `<vaadin-select-list-box>` slotted directly into the overlay
+     * slot (instead of the default one rendered into slotted `div` element).
+     *
+     * @param {!Event} e
+     * @private
+     */
+    __onOverlaySlotChange(e) {
+      this.__slottedListBox = e.target.assignedElements().find((el) => el._hasVaadinListMixin);
+    }
+
     /**
      * @param {HTMLElement} menuElement
      * @protected
@@ -467,7 +509,7 @@ export const SelectBaseMixin = (superClass) =>
     }
 
     /**
-     * @param {!SelectItem} item
+     * @param {!SelectItemData} item
      * @private
      */
     __createItemElement(item) {
@@ -651,6 +693,11 @@ export const SelectBaseMixin = (superClass) =>
      * @private
      */
     __defaultRenderer(root, _select) {
+      if (this.__slottedListBox) {
+        root.textContent = '';
+        return;
+      }
+
       if (!this.items || this.items.length === 0) {
         root.textContent = '';
         return;

package/src/vaadin-select-item.d.ts

@@ -8,7 +8,39 @@ import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * An element used internally by `<vaadin-select>`. Not intended to be used separately.
+ * `<vaadin-select-item>` is a Web Component for creating `<vaadin-select>` items.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name    | Description
+ * -------------|----------------
+ * `checkmark`  | The graphical checkmark shown for a selected item
+ * `content`    | The element that wraps the slot
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `active`     | Set when the item is pressed down, either with mouse, touch or the keyboard.
+ * `disabled`   | Set when the item is disabled.
+ * `focus-ring` | Set when the item is focused using the keyboard.
+ * `focused`    | Set when the item is focused.
+ * `selected`   | Set when the item is selected
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                |
+ * :----------------------------------|
+ * | `--vaadin-item-border-radius`    |
+ * | `--vaadin-item-checkmark-color`  |
+ * | `--vaadin-item-gap`              |
+ * | `--vaadin-item-height`           |
+ * | `--vaadin-item-padding`          |
+ * | `--vaadin-item-text-align`       |
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class SelectItem extends ItemMixin(DirMixin(ThemableMixin(HTMLElement))) {}
 

package/src/vaadin-select-item.js

@@ -13,11 +13,42 @@ import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * An element used internally by `<vaadin-select>`. Not intended to be used separately.
+ * `<vaadin-select-item>` is a Web Component for creating `<vaadin-select>` items.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name    | Description
+ * -------------|----------------
+ * `checkmark`  | The graphical checkmark shown for a selected item
+ * `content`    | The element that wraps the slot
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `active`     | Set when the item is pressed down, either with mouse, touch or the keyboard.
+ * `disabled`   | Set when the item is disabled.
+ * `focus-ring` | Set when the item is focused using the keyboard.
+ * `focused`    | Set when the item is focused.
+ * `selected`   | Set when the item is selected
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                |
+ * :----------------------------------|
+ * | `--vaadin-item-border-radius`    |
+ * | `--vaadin-item-checkmark-color`  |
+ * | `--vaadin-item-gap`              |
+ * | `--vaadin-item-height`           |
+ * | `--vaadin-item-padding`          |
+ * | `--vaadin-item-text-align`       |
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement vaadin-select-item
  * @extends HTMLElement
- * @protected
  */
 class SelectItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {

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

@@ -8,7 +8,26 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * An element used internally by `<vaadin-select>`. Not intended to be used separately.
+ * `<vaadin-select-list-box>` is a Web Component for wrapping `<vaadin-select>` items.
+ *
+ * ```html
+ * <vaadin-select>
+ *   <vaadin-select-list-box slot="overlay">
+ *     <vaadin-select-item value="foo">Foo</vaadin-select-item>
+ *     <vaadin-select-item value="bar">Bar</vaadin-select-item>
+ *   </vaadin-select-list-box>
+ * </vaadin-select>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name         | Description
+ * ------------------|------------------------
+ * `items`           | The items container
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class SelectListBox extends ListMixin(DirMixin(ThemableMixin(HTMLElement))) {}
 

package/src/vaadin-select-list-box.js

@@ -13,11 +13,29 @@ import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * An element used internally by `<vaadin-select>`. Not intended to be used separately.
+ * `<vaadin-select-list-box>` is a Web Component for wrapping `<vaadin-select>` items.
+ *
+ * ```html
+ * <vaadin-select>
+ *   <vaadin-select-list-box slot="overlay">
+ *     <vaadin-select-item value="foo">Foo</vaadin-select-item>
+ *     <vaadin-select-item value="bar">Bar</vaadin-select-item>
+ *   </vaadin-select-list-box>
+ * </vaadin-select>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name         | Description
+ * ------------------|------------------------
+ * `items`           | The items container
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement vaadin-select-list-box
  * @extends HTMLElement
- * @protected
  */
 class SelectListBox extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {

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

@@ -21,12 +21,14 @@ export const SelectOverlayMixin = (superClass) =>
     }
 
     /**
-     * Override method from OverlayFocusMixin to use slotted div as content root.
+     * Override method from OverlayFocusMixin to use the content root that
+     * actually holds the focused item, so focus is restored on close.
+     *
      * @protected
      * @override
      */
     get _contentRoot() {
-      return this._rendererRoot;
+      return this.owner.__slottedListBox || this._rendererRoot;
     }
 
     /**
@@ -70,7 +72,12 @@ export const SelectOverlayMixin = (superClass) =>
 
     /** @protected */
     _getMenuElement() {
-      return Array.from(this._rendererRoot.children).find((el) => el.localName !== 'style');
+      const slot = this.owner.shadowRoot.querySelector('slot[name="overlay"]');
+      const assigned = slot.assignedElements();
+      return (
+        assigned.find((el) => el._hasVaadinListMixin) ||
+        assigned.flatMap((el) => [...el.children]).find((el) => el._hasVaadinListMixin)
+      );
     }
 
     /** @private */

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.
  *
@@ -188,7 +204,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 +212,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,14 +1,139 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/select",
-  "version": "25.3.0-alpha3",
+  "version": "25.3.0-alpha5",
   "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",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "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": "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",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "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-alpha3/#/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-alpha3/#/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-alpha3/#/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-alpha5/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha5/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha5/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "accessible-name",
@@ -236,7 +361,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-alpha3",
+  "version": "25.3.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -14,9 +14,58 @@
   "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": "?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-alpha3/#/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-alpha3/#/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-alpha3/#/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-alpha5/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha5/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha5/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {