@vaadin/multi-select-combo-box 25.3.0-dev.1fa5a51482 → 25.3.0-rc1

package/custom-elements.json

@@ -26,6 +26,20 @@
           "description": "",
           "name": "MultiSelectComboBoxMixin",
           "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 +47,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 +61,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",
@@ -334,8 +348,12 @@
               "type": {
                 "text": "string"
               },
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
-              "attribute": "item-id-path"
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
+              "attribute": "item-id-path",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
+              }
             },
             {
               "kind": "field",
@@ -492,6 +510,20 @@
                 "package": "@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "partialMatchMode",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
+              "attribute": "partial-match-mode",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -533,7 +565,11 @@
             {
               "kind": "method",
               "name": "requestContentUpdate",
-              "description": "Requests an update for the content of items.\nWhile performing the update, it invokes the renderer (passed in the `renderer` property) once an item.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested."
+              "description": "Requests an update for the content of items.\nWhile performing the update, it invokes the renderer (passed in the `renderer` property) once an item.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
+              }
             },
             {
               "kind": "field",
@@ -655,12 +691,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",
@@ -672,7 +720,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",
@@ -860,8 +908,12 @@
               "type": {
                 "text": "string"
               },
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
-              "fieldName": "itemIdPath"
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
+              "fieldName": "itemIdPath",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
+              }
             },
             {
               "name": "item-label-path",
@@ -963,6 +1015,18 @@
                 "package": "@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js"
               }
             },
+            {
+              "name": "partial-match-mode",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
+              "fieldName": "partialMatchMode",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
+              }
+            },
             {
               "name": "placeholder",
               "type": {
@@ -1110,9 +1174,23 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name              | Description\n-----------------------|----------------\n`chips`                | The element that wraps slotted chips for selected items\n`label`                | The label element\n`input-field`          | The element that wraps prefix, value and suffix\n`field-button`         | Set on both clear and toggle buttons\n`clear-button`         | The clear 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`overlay`              | The overlay container\n`content`              | The overlay content\n`loader`               | The loading indicator shown while loading items\n\nThe following state attributes are available for styling:\n\nAttribute              | Description\n-----------------------|-----------------\n`disabled`             | Set to a disabled element\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`has-tooltip`          | Set when the element has a slotted tooltip\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`loading`              | Set when loading items from the data provider\n`opened`               | Set when the dropdown is open\n`readonly`             | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom property                                      | Description                | Default\n-----------------------------------------------------|----------------------------|--------\n`--vaadin-field-default-width`                       | Default width of the field | `12em`\n`--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`\n`--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`\n`--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-chip>`\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name              | Description\n-----------------------|----------------\n`chips`                | The element that wraps slotted chips for selected items\n`label`                | The label element\n`input-field`          | The element that wraps prefix, value and suffix\n`field-button`         | Set on both clear and toggle buttons\n`clear-button`         | The clear 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`overlay`              | The overlay container\n`content`              | The overlay content\n`loader`               | The loading indicator shown while loading items\n\nThe following state attributes are available for styling:\n\nAttribute              | Description\n-----------------------|-----------------\n`disabled`             | Set to a disabled element\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`has-tooltip`          | Set when the element has a slotted tooltip\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`loading`              | Set when loading items from the data provider\n`opened`               | Set when the dropdown is open\n`readonly`             | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                     |\n:-------------------------------------------------------|\n| `--vaadin-chip-background`                            |\n| `--vaadin-chip-border-color`                          |\n| `--vaadin-chip-border-radius`                         |\n| `--vaadin-chip-border-width`                          |\n| `--vaadin-chip-font-size`                             |\n| `--vaadin-chip-font-weight`                           |\n| `--vaadin-chip-gap`                                   |\n| `--vaadin-chip-height`                                |\n| `--vaadin-chip-padding`                               |\n| `--vaadin-chip-remove-button-text-color`              |\n| `--vaadin-chip-text-color`                            |\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-multi-select-combo-box-chip-min-width`      |\n| `--vaadin-multi-select-combo-box-chips-gap`           |\n| `--vaadin-multi-select-combo-box-input-min-width`     |\n| `--vaadin-multi-select-combo-box-overlay-max-height`  |\n| `--vaadin-multi-select-combo-box-overlay-width`       |\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-chip>`\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "MultiSelectComboBox",
           "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",
@@ -1120,7 +1198,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",
@@ -1134,7 +1212,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",
@@ -1441,11 +1519,11 @@
               "type": {
                 "text": "string"
               },
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
               "attribute": "item-id-path",
               "inheritedFrom": {
-                "name": "MultiSelectComboBoxMixin",
-                "module": "src/vaadin-multi-select-combo-box-mixin.js"
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
               }
             },
             {
@@ -1611,6 +1689,20 @@
                 "package": "@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "partialMatchMode",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
+              "attribute": "partial-match-mode",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -1658,8 +1750,8 @@
               "name": "requestContentUpdate",
               "description": "Requests an update for the content of items.\nWhile performing the update, it invokes the renderer (passed in the `renderer` property) once an item.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.",
               "inheritedFrom": {
-                "name": "MultiSelectComboBoxMixin",
-                "module": "src/vaadin-multi-select-combo-box-mixin.js"
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
               }
             },
             {
@@ -1807,12 +1899,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",
@@ -1824,7 +1928,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",
@@ -2028,11 +2132,11 @@
               "type": {
                 "text": "string"
               },
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
               "fieldName": "itemIdPath",
               "inheritedFrom": {
-                "name": "MultiSelectComboBoxMixin",
-                "module": "src/vaadin-multi-select-combo-box-mixin.js"
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
               }
             },
             {
@@ -2143,6 +2247,18 @@
                 "package": "@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js"
               }
             },
+            {
+              "name": "partial-match-mode",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
+              "fieldName": "partialMatchMode",
+              "inheritedFrom": {
+                "name": "ComboBoxItemsMixin",
+                "package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
+              }
+            },
             {
               "name": "placeholder",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.3.0-dev.1fa5a51482",
+  "version": "25.3.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,23 +37,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-dev.1fa5a51482",
-    "@vaadin/combo-box": "25.3.0-dev.1fa5a51482",
-    "@vaadin/component-base": "25.3.0-dev.1fa5a51482",
-    "@vaadin/field-base": "25.3.0-dev.1fa5a51482",
-    "@vaadin/input-container": "25.3.0-dev.1fa5a51482",
-    "@vaadin/item": "25.3.0-dev.1fa5a51482",
-    "@vaadin/lit-renderer": "25.3.0-dev.1fa5a51482",
-    "@vaadin/overlay": "25.3.0-dev.1fa5a51482",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-dev.1fa5a51482",
+    "@vaadin/a11y-base": "25.3.0-rc1",
+    "@vaadin/combo-box": "25.3.0-rc1",
+    "@vaadin/component-base": "25.3.0-rc1",
+    "@vaadin/field-base": "25.3.0-rc1",
+    "@vaadin/input-container": "25.3.0-rc1",
+    "@vaadin/item": "25.3.0-rc1",
+    "@vaadin/lit-renderer": "25.3.0-rc1",
+    "@vaadin/overlay": "25.3.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-dev.1fa5a51482",
-    "@vaadin/chai-plugins": "25.3.0-dev.1fa5a51482",
-    "@vaadin/test-runner-commands": "25.3.0-dev.1fa5a51482",
+    "@vaadin/aura": "25.3.0-rc1",
+    "@vaadin/chai-plugins": "25.3.0-rc1",
+    "@vaadin/test-runner-commands": "25.3.0-rc1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-dev.1fa5a51482",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1cd5964b758ffbce3ddb6248a1997f55f8e0ebf6"
+  "gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
 }

package/src/vaadin-multi-select-combo-box-item.js

@@ -38,7 +38,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @customElement vaadin-multi-select-combo-box-item
  * @private
  */
-export class MultiSelectComboBoxItem extends ComboBoxItemMixin(
+class MultiSelectComboBoxItem extends ComboBoxItemMixin(
   ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
 ) {
   static get is() {
@@ -61,3 +61,5 @@ export class MultiSelectComboBoxItem extends ComboBoxItemMixin(
 }
 
 defineCustomElement(MultiSelectComboBoxItem);
+
+export { MultiSelectComboBoxItem };

package/src/vaadin-multi-select-combo-box-mixin.d.ts

@@ -100,12 +100,6 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   itemClassNameGenerator: (item: TItem) => string;
 
-  /**
-   * Path for the id of the item, used to detect whether the item is selected.
-   * @attr {string} item-id-path
-   */
-  itemIdPath: string;
-
   /**
    * The object used to localize this component. To change the default
    * localization, replace this with an object that provides all properties, or
@@ -177,12 +171,4 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    * Clears the selected items.
    */
   clear(): void;
-
-  /**
-   * Requests an update for the content of items.
-   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate(): void;
 }

package/src/vaadin-multi-select-combo-box-mixin.js

@@ -79,15 +79,6 @@ export const MultiSelectComboBoxMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * Path for the id of the item, used to detect whether the item is selected.
-         * @attr {string} item-id-path
-         */
-        itemIdPath: {
-          type: String,
-          sync: true,
-        },
-
         /**
          * When true, filter string isn't cleared after selecting an item.
          */
@@ -216,9 +207,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     static get observers() {
       return [
         '_selectedItemsChanged(selectedItems)',
-        '__openedOrItemsChanged(opened, _dropdownItems, loading, __keepOverlayOpened)',
         '__updateOverflowChip(_overflow, _overflowItems, disabled, readonly)',
-        '__updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
         '__updateTopGroup(selectedItemsOnTop, selectedItems, opened)',
       ];
     }
@@ -342,7 +331,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     updated(props) {
       super.updated(props);
 
-      ['loading', 'itemIdPath', 'itemClassNameGenerator', 'renderer'].forEach((prop) => {
+      ['loading', 'itemClassNameGenerator', 'renderer'].forEach((prop) => {
         if (props.has(prop)) {
           this._scroller[prop] = this[prop];
         }
@@ -433,21 +422,18 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /**
-     * Requests an update for the content of items.
-     * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
-     *
-     * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+     * Override method from `ComboBoxBaseMixin` to only open the dropdown
+     * when clicking on the label or the input field.
+     * @param {Event} event
+     * @protected
+     * @override
      */
-    requestContentUpdate() {
-      if (!this._scroller) {
-        return;
-      }
+    _onHostClick(event) {
+      const path = event.composedPath();
 
-      this._scroller.requestContentUpdate();
-
-      this._getItemElements().forEach((item) => {
-        item.requestContentUpdate();
-      });
+      if (path.includes(this._labelNode) || path.includes(this._inputField)) {
+        super._onHostClick(event);
+      }
     }
 
     /**
@@ -474,39 +460,15 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __updateScroller(opened, items, focusedIndex, theme) {
-      if (opened) {
-        this._scroller.style.maxHeight =
-          getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
-      }
-
-      const isClosing = this.hasAttribute('closing');
-
-      this._scroller.setProperties({
-        items: opened || isClosing ? items : [],
-        opened,
-        focusedIndex,
-        theme,
-      });
-    }
-
-    /** @private */
-    __openedOrItemsChanged(opened, items, loading, keepOverlayOpened) {
-      // Close the overlay if there are no items to display.
-      // See https://github.com/vaadin/vaadin-combo-box/pull/964
-      this._overlayOpened = opened && (keepOverlayOpened || loading || !!items?.length);
-    }
-
     /**
+     * Override method from `ComboBoxBaseMixin` to revert the input to the
+     * filter, as this component does not use `value` for the input text.
      * @protected
+     * @override
      */
-    _closeOrCommit() {
-      if (!this.opened) {
-        this._commitValue();
-      } else {
-        this.close();
-      }
+    _revertInputValue() {
+      this._inputElementValue = this.filter;
+      this._clearSelectionRange();
     }
 
     /**
@@ -537,6 +499,16 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     __commitUserInput() {
       if (this._focusedIndex > -1) {
         const focusedItem = this._dropdownItems[this._focusedIndex];
+        // Do not unselect an already selected item when it was focused by
+        // filtering, in which case the input value still equals the filter.
+        if (
+          this._lastFilter &&
+          this._lastFilter === this._inputElementValue &&
+          this._findIndex(focusedItem, this.selectedItems) !== -1
+        ) {
+          this.__clearInternalValue();
+          return;
+        }
         this.__selectItem(focusedItem);
       } else if (this._inputElementValue) {
         // Detect if input value doesn't match an existing item
@@ -574,7 +546,11 @@ export const MultiSelectComboBoxMixin = (superClass) =>
      * @protected
      */
     _setFocused(focused) {
-      if (!focused) {
+      // Do not validate, commit or close on internal blur triggered
+      // on overlay touch action needed to hide the virtual keyboard.
+      const blurred = !focused && !this._closeOnBlurIsPrevented;
+
+      if (blurred) {
         this._ignoreCommitValue = true;
       }
 
@@ -582,12 +558,12 @@ export const MultiSelectComboBoxMixin = (superClass) =>
 
       // Do not validate when focusout is caused by document
       // losing focus, which happens on browser tab switch.
-      if (!focused && document.hasFocus()) {
+      if (blurred && document.hasFocus()) {
         this._focusedChipIndex = -1;
         this._requestValidation();
       }
 
-      if (!focused && this.readonly && !this._closeOnBlurIsPrevented) {
+      if (blurred && this.readonly) {
         this.close();
       }
     }
@@ -691,67 +667,34 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /**
-     * Override combo-box method to group selected
-     * items at the top of the overlay.
+     * Override method from `ComboBoxItemsMixin` to show only selected
+     * items when read-only, and to group selected items at the top
+     * of the overlay when `selectedItemsOnTop` is set.
      *
      * @protected
      * @override
      */
     _setDropdownItems(items) {
+      super._setDropdownItems(this.__generateDropdownItems(items));
+    }
+
+    /** @private */
+    __generateDropdownItems(items) {
       if (this.readonly) {
-        this.__setDropdownItems(this.selectedItems);
-        return;
+        return this.selectedItems;
       }
 
       if (this.filter || !this.selectedItemsOnTop) {
-        this.__setDropdownItems(items);
-        return;
+        return items;
       }
 
       if (items?.length && this._topGroup?.length) {
         // Filter out items included to the top group.
-        const filteredItems = items.filter((item) => this._findIndex(item, this._topGroup, this.itemIdPath) === -1);
-
-        this.__setDropdownItems(this._topGroup.concat(filteredItems));
-        return;
-      }
-
-      this.__setDropdownItems(items);
-    }
-
-    /** @private */
-    __setDropdownItems(newItems) {
-      const oldItems = this._dropdownItems;
-      this._dropdownItems = newItems;
-
-      // Store the currently focused item if any. The focused index preserves
-      // in the case when more filtered items are loading but it is reset
-      // when the user types in a filter query.
-      const focusedItem = oldItems ? oldItems[this._focusedIndex] : null;
-
-      // When both the previously-focused entry and the new entry at the
-      // same index are placeholders (e.g. the Flow connector mid-scroll
-      // re-pushing `__setDropdownItems`), preserve `_focusedIndex` until
-      // a follow-up call lands a real item at that position.
-      if (
-        oldItems &&
-        oldItems[this._focusedIndex] instanceof ComboBoxPlaceholder &&
-        newItems[this._focusedIndex] instanceof ComboBoxPlaceholder
-      ) {
-        return;
+        const filteredItems = items.filter((item) => this._findIndex(item, this._topGroup) === -1);
+        return this._topGroup.concat(filteredItems);
       }
 
-      // Try to first set focus on the item that had been focused before `newItems` were updated
-      // if it is still present in the `newItems` array. Otherwise, set the focused index
-      // depending on the selected item or the filter query.
-      const focusedItemIndex = this.__getItemIndexByValue(newItems, this._getItemValue(focusedItem));
-      if (focusedItemIndex > -1) {
-        this._focusedIndex = focusedItemIndex;
-      } else {
-        // When the user filled in something that is different from the current value = filtering is enabled,
-        // set the focused index to the item that matches the filter query.
-        this._focusedIndex = this.__getItemIndexByLabel(newItems, this.filter);
-      }
+      return items;
     }
 
     /** @private */
@@ -760,17 +703,8 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /** @private */
-    _findIndex(item, selectedItems, itemIdPath) {
-      if (itemIdPath && item) {
-        for (let index = 0; index < selectedItems.length; index++) {
-          if (selectedItems[index] && selectedItems[index][itemIdPath] === item[itemIdPath]) {
-            return index;
-          }
-        }
-        return -1;
-      }
-
-      return selectedItems.indexOf(item);
+    _findIndex(item, items) {
+      return items.findIndex((other) => this._isSameItem(item, other));
     }
 
     /**
@@ -803,7 +737,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     /** @private */
     __removeItem(item) {
       const itemsCopy = [...this.selectedItems];
-      itemsCopy.splice(itemsCopy.indexOf(item), 1);
+      itemsCopy.splice(this._findIndex(item, itemsCopy), 1);
       this.__updateSelection(itemsCopy);
       const itemLabel = this._getItemLabel(item);
       this.__announceItem(itemLabel, false, itemsCopy.length);
@@ -813,7 +747,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     __selectItem(item) {
       const itemsCopy = [...this.selectedItems];
 
-      const index = this._findIndex(item, itemsCopy, this.itemIdPath);
+      const index = this._findIndex(item, itemsCopy);
       const itemLabel = this._getItemLabel(item);
 
       let isSelected = false;
@@ -867,7 +801,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       return (
         this._topGroup &&
         this._topGroup.some((item) => {
-          const selectedItem = this.selectedItems[this._findIndex(item, this.selectedItems, this.itemIdPath)];
+          const selectedItem = this.selectedItems[this._findIndex(item, this.selectedItems)];
           return selectedItem && item !== selectedItem;
         })
       );
@@ -1062,19 +996,16 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /**
-     * Override method from `ComboBoxBaseMixin` to deselect
-     * dropdown item by requesting content update on clear.
+     * Override method from `ComboBoxItemsMixin` to stop
+     * propagation of the clear button click event.
      * @param {Event} event
      * @protected
+     * @override
      */
     _onClearButtonClick(event) {
       event.stopPropagation();
 
       super._onClearButtonClick(event);
-
-      if (this.opened) {
-        this.requestContentUpdate();
-      }
     }
 
     /**

package/src/vaadin-multi-select-combo-box-scroller.js

@@ -17,7 +17,7 @@ import { multiSelectComboBoxScrollerStyles } from './styles/vaadin-multi-select-
  * @extends HTMLElement
  * @private
  */
-export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
+class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
   static get is() {
     return 'vaadin-multi-select-combo-box-scroller';
   }
@@ -43,10 +43,12 @@ export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMi
   }
 
   /**
+   * Override method from `ComboBoxScrollerMixin` to check
+   * the item against the selected items of the owner.
    * @protected
    * @override
    */
-  _isItemSelected(item, _selectedItem, itemIdPath) {
+  _isItemSelected(item) {
     if (item instanceof ComboBoxPlaceholder) {
       return false;
     }
@@ -55,7 +57,7 @@ export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMi
       return false;
     }
 
-    return this.owner._findIndex(item, this.owner.selectedItems, itemIdPath) > -1;
+    return this.owner.selectedItems.some((selectedItem) => this.owner._isSameItem(item, selectedItem));
   }
 
   /**
@@ -72,3 +74,5 @@ export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMi
 }
 
 defineCustomElement(MultiSelectComboBoxScroller);
+
+export { MultiSelectComboBoxScroller };

package/src/vaadin-multi-select-combo-box.d.ts

@@ -133,12 +133,59 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  *
  * The following custom CSS properties are available for styling:
  *
- * Custom property                                      | Description                | Default
- * -----------------------------------------------------|----------------------------|--------
- * `--vaadin-field-default-width`                       | Default width of the field | `12em`
- * `--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`
- * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
- * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
+ * Custom CSS property                                     |
+ * :-------------------------------------------------------|
+ * | `--vaadin-chip-background`                            |
+ * | `--vaadin-chip-border-color`                          |
+ * | `--vaadin-chip-border-radius`                         |
+ * | `--vaadin-chip-border-width`                          |
+ * | `--vaadin-chip-font-size`                             |
+ * | `--vaadin-chip-font-weight`                           |
+ * | `--vaadin-chip-gap`                                   |
+ * | `--vaadin-chip-height`                                |
+ * | `--vaadin-chip-padding`                               |
+ * | `--vaadin-chip-remove-button-text-color`              |
+ * | `--vaadin-chip-text-color`                            |
+ * | `--vaadin-field-default-width`                        |
+ * | `--vaadin-input-field-background`                     |
+ * | `--vaadin-input-field-border-color`                   |
+ * | `--vaadin-input-field-border-radius`                  |
+ * | `--vaadin-input-field-border-width`                   |
+ * | `--vaadin-input-field-bottom-end-radius`              |
+ * | `--vaadin-input-field-bottom-start-radius`            |
+ * | `--vaadin-input-field-button-text-color`              |
+ * | `--vaadin-input-field-container-gap`                  |
+ * | `--vaadin-input-field-disabled-background`            |
+ * | `--vaadin-input-field-disabled-text-color`            |
+ * | `--vaadin-input-field-error-color`                    |
+ * | `--vaadin-input-field-error-font-size`                |
+ * | `--vaadin-input-field-error-font-weight`              |
+ * | `--vaadin-input-field-error-line-height`              |
+ * | `--vaadin-input-field-gap`                            |
+ * | `--vaadin-input-field-helper-color`                   |
+ * | `--vaadin-input-field-helper-font-size`               |
+ * | `--vaadin-input-field-helper-font-weight`             |
+ * | `--vaadin-input-field-helper-line-height`             |
+ * | `--vaadin-input-field-label-color`                    |
+ * | `--vaadin-input-field-label-font-size`                |
+ * | `--vaadin-input-field-label-font-weight`              |
+ * | `--vaadin-input-field-label-line-height`              |
+ * | `--vaadin-input-field-padding`                        |
+ * | `--vaadin-input-field-placeholder-color`              |
+ * | `--vaadin-input-field-required-indicator`             |
+ * | `--vaadin-input-field-required-indicator-color`       |
+ * | `--vaadin-input-field-top-end-radius`                 |
+ * | `--vaadin-input-field-top-start-radius`               |
+ * | `--vaadin-input-field-value-color`                    |
+ * | `--vaadin-input-field-value-font-size`                |
+ * | `--vaadin-input-field-value-font-weight`              |
+ * | `--vaadin-input-field-value-line-height`              |
+ * | `--vaadin-item-overlay-padding`                       |
+ * | `--vaadin-multi-select-combo-box-chip-min-width`      |
+ * | `--vaadin-multi-select-combo-box-chips-gap`           |
+ * | `--vaadin-multi-select-combo-box-input-min-width`     |
+ * | `--vaadin-multi-select-combo-box-overlay-max-height`  |
+ * | `--vaadin-multi-select-combo-box-overlay-width`       |
  *
  * ### Internal components
  *

package/src/vaadin-multi-select-combo-box.js

@@ -71,12 +71,59 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
  *
  * The following custom CSS properties are available for styling:
  *
- * Custom property                                      | Description                | Default
- * -----------------------------------------------------|----------------------------|--------
- * `--vaadin-field-default-width`                       | Default width of the field | `12em`
- * `--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`
- * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
- * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
+ * Custom CSS property                                     |
+ * :-------------------------------------------------------|
+ * | `--vaadin-chip-background`                            |
+ * | `--vaadin-chip-border-color`                          |
+ * | `--vaadin-chip-border-radius`                         |
+ * | `--vaadin-chip-border-width`                          |
+ * | `--vaadin-chip-font-size`                             |
+ * | `--vaadin-chip-font-weight`                           |
+ * | `--vaadin-chip-gap`                                   |
+ * | `--vaadin-chip-height`                                |
+ * | `--vaadin-chip-padding`                               |
+ * | `--vaadin-chip-remove-button-text-color`              |
+ * | `--vaadin-chip-text-color`                            |
+ * | `--vaadin-field-default-width`                        |
+ * | `--vaadin-input-field-background`                     |
+ * | `--vaadin-input-field-border-color`                   |
+ * | `--vaadin-input-field-border-radius`                  |
+ * | `--vaadin-input-field-border-width`                   |
+ * | `--vaadin-input-field-bottom-end-radius`              |
+ * | `--vaadin-input-field-bottom-start-radius`            |
+ * | `--vaadin-input-field-button-text-color`              |
+ * | `--vaadin-input-field-container-gap`                  |
+ * | `--vaadin-input-field-disabled-background`            |
+ * | `--vaadin-input-field-disabled-text-color`            |
+ * | `--vaadin-input-field-error-color`                    |
+ * | `--vaadin-input-field-error-font-size`                |
+ * | `--vaadin-input-field-error-font-weight`              |
+ * | `--vaadin-input-field-error-line-height`              |
+ * | `--vaadin-input-field-gap`                            |
+ * | `--vaadin-input-field-helper-color`                   |
+ * | `--vaadin-input-field-helper-font-size`               |
+ * | `--vaadin-input-field-helper-font-weight`             |
+ * | `--vaadin-input-field-helper-line-height`             |
+ * | `--vaadin-input-field-label-color`                    |
+ * | `--vaadin-input-field-label-font-size`                |
+ * | `--vaadin-input-field-label-font-weight`              |
+ * | `--vaadin-input-field-label-line-height`              |
+ * | `--vaadin-input-field-padding`                        |
+ * | `--vaadin-input-field-placeholder-color`              |
+ * | `--vaadin-input-field-required-indicator`             |
+ * | `--vaadin-input-field-required-indicator-color`       |
+ * | `--vaadin-input-field-top-end-radius`                 |
+ * | `--vaadin-input-field-top-start-radius`               |
+ * | `--vaadin-input-field-value-color`                    |
+ * | `--vaadin-input-field-value-font-size`                |
+ * | `--vaadin-input-field-value-font-weight`              |
+ * | `--vaadin-input-field-value-line-height`              |
+ * | `--vaadin-item-overlay-padding`                       |
+ * | `--vaadin-multi-select-combo-box-chip-min-width`      |
+ * | `--vaadin-multi-select-combo-box-chips-gap`           |
+ * | `--vaadin-multi-select-combo-box-input-min-width`     |
+ * | `--vaadin-multi-select-combo-box-overlay-max-height`  |
+ * | `--vaadin-multi-select-combo-box-overlay-width`       |
  *
  * ### Internal components
  *

package/web-types.json

@@ -1,18 +1,27 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.3.0-dev.1fa5a51482",
+  "version": "25.3.0-rc1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-multi-select-combo-box",
-          "description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name              | Description\n-----------------------|----------------\n`chips`                | The element that wraps slotted chips for selected items\n`label`                | The label element\n`input-field`          | The element that wraps prefix, value and suffix\n`field-button`         | Set on both clear and toggle buttons\n`clear-button`         | The clear 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`overlay`              | The overlay container\n`content`              | The overlay content\n`loader`               | The loading indicator shown while loading items\n\nThe following state attributes are available for styling:\n\nAttribute              | Description\n-----------------------|-----------------\n`disabled`             | Set to a disabled element\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`has-tooltip`          | Set when the element has a slotted tooltip\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`loading`              | Set when loading items from the data provider\n`opened`               | Set when the dropdown is open\n`readonly`             | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom property                                      | Description                | Default\n-----------------------------------------------------|----------------------------|--------\n`--vaadin-field-default-width`                       | Default width of the field | `12em`\n`--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`\n`--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`\n`--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-chip>`\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name              | Description\n-----------------------|----------------\n`chips`                | The element that wraps slotted chips for selected items\n`label`                | The label element\n`input-field`          | The element that wraps prefix, value and suffix\n`field-button`         | Set on both clear and toggle buttons\n`clear-button`         | The clear 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`overlay`              | The overlay container\n`content`              | The overlay content\n`loader`               | The loading indicator shown while loading items\n\nThe following state attributes are available for styling:\n\nAttribute              | Description\n-----------------------|-----------------\n`disabled`             | Set to a disabled element\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`has-tooltip`          | Set when the element has a slotted tooltip\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`loading`              | Set when loading items from the data provider\n`opened`               | Set when the dropdown is open\n`readonly`             | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                     |\n:-------------------------------------------------------|\n| `--vaadin-chip-background`                            |\n| `--vaadin-chip-border-color`                          |\n| `--vaadin-chip-border-radius`                         |\n| `--vaadin-chip-border-width`                          |\n| `--vaadin-chip-font-size`                             |\n| `--vaadin-chip-font-weight`                           |\n| `--vaadin-chip-gap`                                   |\n| `--vaadin-chip-height`                                |\n| `--vaadin-chip-padding`                               |\n| `--vaadin-chip-remove-button-text-color`              |\n| `--vaadin-chip-text-color`                            |\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-multi-select-combo-box-chip-min-width`      |\n| `--vaadin-multi-select-combo-box-chips-gap`           |\n| `--vaadin-multi-select-combo-box-input-min-width`     |\n| `--vaadin-multi-select-combo-box-overlay-max-height`  |\n| `--vaadin-multi-select-combo-box-overlay-width`       |\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-chip>`\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "accessible-description-ref",
+              "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
             {
               "name": "accessible-name",
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "value": {
                 "type": [
                   "string"
@@ -21,7 +30,7 @@
             },
             {
               "name": "accessible-name-ref",
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "value": {
                 "type": [
                   "string"
@@ -156,7 +165,7 @@
             },
             {
               "name": "item-id-path",
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
               "value": {
                 "type": [
                   "string"
@@ -244,6 +253,15 @@
                 ]
               }
             },
+            {
+              "name": "partial-match-mode",
+              "description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
             {
               "name": "placeholder",
               "description": "A hint to the user of what can be entered in the control.\nThe placeholder will be only displayed in the case when\nthere is no item selected.",
@@ -310,9 +328,18 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessibleDescriptionRef",
+                "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
               {
                 "name": "accessibleName",
-                "description": "String used to label the component to screen reader users.",
+                "description": "String used to label the component for screen reader users.",
                 "value": {
                   "type": [
                     "string"
@@ -321,7 +348,7 @@
               },
               {
                 "name": "accessibleNameRef",
-                "description": "Id of the element used as label of the component to screen reader users.",
+                "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
                 "value": {
                   "type": [
                     "string"
@@ -495,7 +522,7 @@
               },
               {
                 "name": "itemIdPath",
-                "description": "Path for the id of the item, used to detect whether the item is selected.",
+                "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
                 "value": {
                   "type": [
                     "string"
@@ -603,6 +630,15 @@
                   ]
                 }
               },
+              {
+                "name": "partialMatchMode",
+                "description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
               {
                 "name": "placeholder",
                 "description": "A hint to the user of what can be entered in the control.\nThe placeholder will be only displayed in the case when\nthere is no item selected.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.3.0-dev.1fa5a51482",
+  "version": "25.3.0-rc1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,19 +16,26 @@
       "elements": [
         {
           "name": "vaadin-multi-select-combo-box",
-          "description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name              | Description\n-----------------------|----------------\n`chips`                | The element that wraps slotted chips for selected items\n`label`                | The label element\n`input-field`          | The element that wraps prefix, value and suffix\n`field-button`         | Set on both clear and toggle buttons\n`clear-button`         | The clear 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`overlay`              | The overlay container\n`content`              | The overlay content\n`loader`               | The loading indicator shown while loading items\n\nThe following state attributes are available for styling:\n\nAttribute              | Description\n-----------------------|-----------------\n`disabled`             | Set to a disabled element\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`has-tooltip`          | Set when the element has a slotted tooltip\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`loading`              | Set when loading items from the data provider\n`opened`               | Set when the dropdown is open\n`readonly`             | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom property                                      | Description                | Default\n-----------------------------------------------------|----------------------------|--------\n`--vaadin-field-default-width`                       | Default width of the field | `12em`\n`--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`\n`--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`\n`--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-chip>`\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name              | Description\n-----------------------|----------------\n`chips`                | The element that wraps slotted chips for selected items\n`label`                | The label element\n`input-field`          | The element that wraps prefix, value and suffix\n`field-button`         | Set on both clear and toggle buttons\n`clear-button`         | The clear 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`overlay`              | The overlay container\n`content`              | The overlay content\n`loader`               | The loading indicator shown while loading items\n\nThe following state attributes are available for styling:\n\nAttribute              | Description\n-----------------------|-----------------\n`disabled`             | Set to a disabled element\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`has-tooltip`          | Set when the element has a slotted tooltip\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`loading`              | Set when loading items from the data provider\n`opened`               | Set when the dropdown is open\n`readonly`             | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                     |\n:-------------------------------------------------------|\n| `--vaadin-chip-background`                            |\n| `--vaadin-chip-border-color`                          |\n| `--vaadin-chip-border-radius`                         |\n| `--vaadin-chip-border-width`                          |\n| `--vaadin-chip-font-size`                             |\n| `--vaadin-chip-font-weight`                           |\n| `--vaadin-chip-gap`                                   |\n| `--vaadin-chip-height`                                |\n| `--vaadin-chip-padding`                               |\n| `--vaadin-chip-remove-button-text-color`              |\n| `--vaadin-chip-text-color`                            |\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-multi-select-combo-box-chip-min-width`      |\n| `--vaadin-multi-select-combo-box-chips-gap`           |\n| `--vaadin-multi-select-combo-box-input-min-width`     |\n| `--vaadin-multi-select-combo-box-overlay-max-height`  |\n| `--vaadin-multi-select-combo-box-overlay-width`       |\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-chip>`\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": ".accessibleDescriptionRef",
+              "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".accessibleName",
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".accessibleNameRef",
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "value": {
                 "kind": "expression"
               }
@@ -161,7 +168,7 @@
             },
             {
               "name": ".itemIdPath",
-              "description": "Path for the id of the item, used to detect whether the item is selected.",
+              "description": "Path for the id of the item. If `items` is an array of objects,\nthe `itemIdPath` is used to compare and identify the same item\nin the selection and in `filteredItems` (items given by the\n`dataProvider` callback).",
               "value": {
                 "kind": "expression"
               }
@@ -243,6 +250,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".partialMatchMode",
+              "description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".placeholder",
               "description": "A hint to the user of what can be entered in the control.\nThe placeholder will be only displayed in the case when\nthere is no item selected.",