@vaadin/multi-select-combo-box 25.3.0-rc1 → 25.4.0-alpha1

package/custom-elements.json

@@ -17,6 +17,40 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-multi-select-combo-box-highlight-mixin.js",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "A mixin that extends `ComboBoxHighlightMixin` with highlight states for the\nchips of the selected items and for the select all button, so that both can\nbe navigated with arrow keys while the DOM focus stays in the input.\n\nIn addition to the states of `ComboBoxHighlightMixin`, the state can be:\n\n- `{ type: 'chip', index }`: the chip at `index`.\n- `{ type: 'select-all' }`: the select all button.\n\nThe select all button is part of the item navigation and comes before the\nfirst item, so `_highlightNextItem()` and `_highlightPrevItem()` move the\nhighlight to it while it is available.\n\nExpects the host to provide a `_chips` getter that returns the chip elements,\nand a `_hasSelectAllButton` getter that tells whether the select all button\nis rendered and can be highlighted.",
+          "name": "MultiSelectComboBoxHighlightMixin",
+          "members": [],
+          "mixins": [
+            {
+              "name": "ComboBoxHighlightMixin",
+              "package": "@vaadin/combo-box/src/vaadin-combo-box-highlight-mixin.js"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass"
+            }
+          ],
+          "attributes": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MultiSelectComboBoxHighlightMixin",
+          "declaration": {
+            "name": "MultiSelectComboBoxHighlightMixin",
+            "module": "src/vaadin-multi-select-combo-box-highlight-mixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-multi-select-combo-box-mixin.js",
@@ -308,9 +342,9 @@
               "name": "i18n",
               "privacy": "public",
               "type": {
-                "text": "Object"
+                "text": "Object | undefined"
               },
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
+              "description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n  // Text of the select all button when no filter is set.\n  selectAll: 'Select All',\n  // Text of the select all button when no filter is set\n  // and all items are selected.\n  deselectAll: 'Deselect All',\n  // Text of the select all button when a filter is set.\n  selectFiltered: 'Select Filtered',\n  // Text of the select all button when a filter is set\n  // and all items matching the filter are selected.\n  deselectFiltered: 'Deselect Filtered',\n}\n```",
               "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
@@ -585,6 +619,20 @@
                 "package": "@vaadin/field-base/src/field-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "selectAllButtonVisible",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to show a button above the dropdown items for selecting\nor deselecting all items matching the current filter at once. Items\nthat do not match the filter keep their selection state.\n\nThe button is only supported with the `items` API. It is not shown\nwhen using `dataProvider`.",
+              "attribute": "select-all-button-visible",
+              "inheritedFrom": {
+                "name": "MultiSelectComboBoxSelectAllMixin",
+                "module": "src/vaadin-multi-select-combo-box-select-all-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "selectedItems",
@@ -882,9 +930,9 @@
             {
               "name": "i18n",
               "type": {
-                "text": "Object"
+                "text": "Object | undefined"
               },
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
               "fieldName": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
@@ -1071,6 +1119,18 @@
                 "package": "@vaadin/field-base/src/field-mixin.js"
               }
             },
+            {
+              "name": "select-all-button-visible",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to show a button above the dropdown items for selecting\nor deselecting all items matching the current filter at once. Items\nthat do not match the filter keep their selection state.\n\nThe button is only supported with the `items` API. It is not shown\nwhen using `dataProvider`.",
+              "fieldName": "selectAllButtonVisible",
+              "inheritedFrom": {
+                "name": "MultiSelectComboBoxSelectAllMixin",
+                "module": "src/vaadin-multi-select-combo-box-select-all-mixin.js"
+              }
+            },
             {
               "name": "selected-items",
               "type": {
@@ -1129,6 +1189,14 @@
               "name": "I18nMixin",
               "package": "@vaadin/component-base/src/i18n-mixin.js"
             },
+            {
+              "name": "MultiSelectComboBoxSelectAllMixin",
+              "module": "src/vaadin-multi-select-combo-box-select-all-mixin.js"
+            },
+            {
+              "name": "MultiSelectComboBoxHighlightMixin",
+              "module": "src/vaadin-multi-select-combo-box-highlight-mixin.js"
+            },
             {
               "name": "ComboBoxFocusIndexMixin",
               "package": "@vaadin/combo-box/src/vaadin-combo-box-focus-index-mixin.js"
@@ -1168,13 +1236,61 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-multi-select-combo-box-select-all-mixin.js",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "A mixin that manages the select all button of `<vaadin-multi-select-combo-box>`.",
+          "name": "MultiSelectComboBoxSelectAllMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "selectAllButtonVisible",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to show a button above the dropdown items for selecting\nor deselecting all items matching the current filter at once. Items\nthat do not match the filter keep their selection state.\n\nThe button is only supported with the `items` API. It is not shown\nwhen using `dataProvider`.",
+              "attribute": "select-all-button-visible"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "select-all-button-visible",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to show a button above the dropdown items for selecting\nor deselecting all items matching the current filter at once. Items\nthat do not match the filter keep their selection state.\n\nThe button is only supported with the `items` API. It is not shown\nwhen using `dataProvider`.",
+              "fieldName": "selectAllButtonVisible"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MultiSelectComboBoxSelectAllMixin",
+          "declaration": {
+            "name": "MultiSelectComboBoxSelectAllMixin",
+            "module": "src/vaadin-multi-select-combo-box-select-all-mixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-multi-select-combo-box.js",
       "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 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.",
+          "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-select-all`       | Set when the select all button is shown in the dropdown\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-aside-gap`                |\n| `--vaadin-input-field-label-aside-text-align`         |\n| `--vaadin-input-field-label-aside-width`              |\n| `--vaadin-input-field-label-color`                    |\n| `--vaadin-input-field-label-font-size`                |\n| `--vaadin-input-field-label-font-weight`              |\n| `--vaadin-input-field-label-line-height`              |\n| `--vaadin-input-field-padding`                        |\n| `--vaadin-input-field-placeholder-color`              |\n| `--vaadin-input-field-required-indicator`             |\n| `--vaadin-input-field-required-indicator-color`       |\n| `--vaadin-input-field-top-end-radius`                 |\n| `--vaadin-input-field-top-start-radius`               |\n| `--vaadin-input-field-value-color`                    |\n| `--vaadin-input-field-value-font-size`                |\n| `--vaadin-input-field-value-font-weight`              |\n| `--vaadin-input-field-value-line-height`              |\n| `--vaadin-item-overlay-padding`                       |\n| `--vaadin-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- `<vaadin-multi-select-combo-box-select-all-button>`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "MultiSelectComboBox",
           "members": [
             {
@@ -1475,9 +1591,9 @@
               "name": "i18n",
               "privacy": "public",
               "type": {
-                "text": "Object"
+                "text": "Object | undefined"
               },
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
+              "description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n  // Text of the select all button when no filter is set.\n  selectAll: 'Select All',\n  // Text of the select all button when no filter is set\n  // and all items are selected.\n  deselectAll: 'Deselect All',\n  // Text of the select all button when a filter is set.\n  selectFiltered: 'Select Filtered',\n  // Text of the select all button when a filter is set\n  // and all items matching the filter are selected.\n  deselectFiltered: 'Deselect Filtered',\n}\n```",
               "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
@@ -1768,6 +1884,20 @@
                 "package": "@vaadin/field-base/src/field-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "selectAllButtonVisible",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to show a button above the dropdown items for selecting\nor deselecting all items matching the current filter at once. Items\nthat do not match the filter keep their selection state.\n\nThe button is only supported with the `items` API. It is not shown\nwhen using `dataProvider`.",
+              "attribute": "select-all-button-visible",
+              "inheritedFrom": {
+                "name": "MultiSelectComboBoxSelectAllMixin",
+                "module": "src/vaadin-multi-select-combo-box-select-all-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "selectedItems",
@@ -2106,9 +2236,9 @@
             {
               "name": "i18n",
               "type": {
-                "text": "Object"
+                "text": "Object | undefined"
               },
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
               "fieldName": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
@@ -2307,6 +2437,18 @@
                 "package": "@vaadin/field-base/src/field-mixin.js"
               }
             },
+            {
+              "name": "select-all-button-visible",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to show a button above the dropdown items for selecting\nor deselecting all items matching the current filter at once. Items\nthat do not match the filter keep their selection state.\n\nThe button is only supported with the `items` API. It is not shown\nwhen using `dataProvider`.",
+              "fieldName": "selectAllButtonVisible",
+              "inheritedFrom": {
+                "name": "MultiSelectComboBoxSelectAllMixin",
+                "module": "src/vaadin-multi-select-combo-box-select-all-mixin.js"
+              }
+            },
             {
               "name": "selected-items",
               "type": {

package/package.json

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

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

@@ -23,6 +23,13 @@ export const multiSelectComboBoxStyles = [
       gap: var(--vaadin-multi-select-combo-box-chips-gap, 2px);
     }
 
+    :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) [part='input-field']::before {
+      content: '\\2003' / '';
+      width: 0;
+      align-self: start;
+      margin-inline-end: calc(var(--vaadin-input-field-gap, var(--vaadin-gap-s)) * -1);
+    }
+
     ::slotted(input) {
       box-sizing: border-box;
       flex: 1 0 var(--_input-min-width);
@@ -59,5 +66,9 @@ export const multiSelectComboBoxStyles = [
     :host([auto-expand-horizontally]) {
       --vaadin-field-default-width: auto;
     }
+
+    :host([has-select-all]) #overlay slot[name='overlay']::slotted(*) {
+      border-top: 1px solid var(--vaadin-border-color-secondary);
+    }
   `,
 ];

package/src/styles/vaadin-multi-select-combo-box-select-all-button-base-styles.js

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const multiSelectComboBoxSelectAllButtonStyles = css`
+  :host {
+    display: block;
+    flex: none;
+    box-sizing: border-box;
+    /* Do not let the label affect the width of the overlay */
+    contain: inline-size;
+    margin: var(--vaadin-item-overlay-padding, 4px);
+    padding: var(--vaadin-item-padding, var(--vaadin-padding-xs) var(--vaadin-padding-inline-container));
+    border-radius: var(--vaadin-item-border-radius, var(--vaadin-radius-m));
+    color: var(--vaadin-text-color);
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: start;
+    cursor: var(--vaadin-clickable-cursor);
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Reserve the same space as the item checkmark icon */
+  :host::before {
+    content: '';
+    display: inline-block;
+    width: var(--vaadin-icon-size, 1lh);
+    margin-inline-end: var(--vaadin-item-gap, var(--vaadin-gap-s));
+  }
+
+  :host([focused]) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
+  }
+`;

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ComboBoxHighlightMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-highlight-mixin.js';
+
+/**
+ * A mixin that extends `ComboBoxHighlightMixin` with highlight states for the
+ * chips of the selected items and for the select all button, so that both can
+ * be navigated with arrow keys while the DOM focus stays in the input.
+ */
+export declare function MultiSelectComboBoxHighlightMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ComboBoxHighlightMixinClass> & Constructor<MultiSelectComboBoxHighlightMixinClass> & T;
+
+// Nothing to declare, all state and methods are considered internal
+export declare class MultiSelectComboBoxHighlightMixinClass {}

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

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ComboBoxHighlightMixin } from '@vaadin/combo-box/src/vaadin-combo-box-highlight-mixin.js';
+
+/**
+ * A mixin that extends `ComboBoxHighlightMixin` with highlight states for the
+ * chips of the selected items and for the select all button, so that both can
+ * be navigated with arrow keys while the DOM focus stays in the input.
+ *
+ * In addition to the states of `ComboBoxHighlightMixin`, the state can be:
+ *
+ * - `{ type: 'chip', index }`: the chip at `index`.
+ * - `{ type: 'select-all' }`: the select all button.
+ *
+ * The select all button is part of the item navigation and comes before the
+ * first item, so `_highlightNextItem()` and `_highlightPrevItem()` move the
+ * highlight to it while it is available.
+ *
+ * Expects the host to provide a `_chips` getter that returns the chip elements,
+ * and a `_hasSelectAllButton` getter that tells whether the select all button
+ * is rendered and can be highlighted.
+ *
+ * @mixes ComboBoxHighlightMixin
+ */
+export const MultiSelectComboBoxHighlightMixin = (superClass) =>
+  class MultiSelectComboBoxHighlightMixinClass extends ComboBoxHighlightMixin(superClass) {
+    /** @protected */
+    get _isSelectAllHighlighted() {
+      return this._highlightState.type === 'select-all';
+    }
+
+    /**
+     * Override method from `ComboBoxHighlightMixin` to highlight
+     * the select all button before the first item.
+     * @protected
+     * @override
+     */
+    _highlightNextItem() {
+      if (!this._hasHighlightedItem && !this._isSelectAllHighlighted && this._hasSelectAllButton) {
+        this._highlightSelectAll();
+      } else {
+        super._highlightNextItem();
+      }
+    }
+
+    /**
+     * Override method from `ComboBoxHighlightMixin` to highlight
+     * the select all button when moving up from the first item.
+     * @protected
+     * @override
+     */
+    _highlightPrevItem() {
+      if (this._isSelectAllHighlighted) {
+        return;
+      }
+
+      if (this._highlightedItemIndex === 0 && this._hasSelectAllButton) {
+        this._highlightSelectAll();
+      } else {
+        super._highlightPrevItem();
+      }
+    }
+
+    /** @protected */
+    _highlightSelectAll() {
+      this._setHighlightState({ type: 'select-all' });
+    }
+
+    /** @protected */
+    _clearSelectAllHighlight() {
+      if (this._isSelectAllHighlighted) {
+        this._clearHighlight();
+      }
+    }
+
+    /** @protected */
+    get _hasHighlightedChip() {
+      return this._highlightState.type === 'chip';
+    }
+
+    /** @protected */
+    get _highlightedChip() {
+      return this._hasHighlightedChip ? this._chips[this._highlightState.index] : undefined;
+    }
+
+    /** @protected */
+    _highlightPrevChip() {
+      if (this._hasHighlightedChip) {
+        this._highlightChipAt(Math.max(0, this._highlightState.index - 1));
+      } else {
+        this._highlightLastChip();
+      }
+    }
+
+    /** @protected */
+    _highlightNextChip() {
+      if (this._hasHighlightedChip) {
+        const lastIndex = this._chips.length - 1;
+        this._highlightChipAt(this._highlightState.index < lastIndex ? this._highlightState.index + 1 : -1);
+      }
+    }
+
+    /** @protected */
+    _highlightLastChip() {
+      this._highlightChipAt(this._chips.length - 1);
+    }
+
+    /** @protected */
+    _highlightChipAt(index) {
+      if (index > -1) {
+        this._setHighlightState({ type: 'chip', index });
+      } else {
+        this._clearChipHighlight();
+      }
+    }
+
+    /** @protected */
+    _clearChipHighlight() {
+      if (this._hasHighlightedChip) {
+        this._clearHighlight();
+      }
+    }
+  };

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

@@ -24,6 +24,8 @@ import type { InputMixinClass } from '@vaadin/field-base/src/input-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 { MultiSelectComboBox } from './vaadin-multi-select-combo-box.js';
+import type { MultiSelectComboBoxHighlightMixinClass } from './vaadin-multi-select-combo-box-highlight-mixin.js';
+import type { MultiSelectComboBoxSelectAllMixinClass } from './vaadin-multi-select-combo-box-select-all-mixin.js';
 
 export type MultiSelectComboBoxRenderer<TItem> = (
   root: HTMLElement,
@@ -37,6 +39,10 @@ export interface MultiSelectComboBoxI18n {
   selected?: string;
   deselected?: string;
   total?: string;
+  selectAll?: string;
+  deselectAll?: string;
+  selectFiltered?: string;
+  deselectFiltered?: string;
 }
 
 export declare function MultiSelectComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
@@ -56,7 +62,9 @@ export declare function MultiSelectComboBoxMixin<TItem, T extends Constructor<HT
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
+  Constructor<MultiSelectComboBoxHighlightMixinClass> &
   Constructor<MultiSelectComboBoxMixinClass<TItem>> &
+  Constructor<MultiSelectComboBoxSelectAllMixinClass> &
   Constructor<ResizeMixinClass> &
   Constructor<SlotStylesMixinClass> &
   Constructor<ValidateMixinClass> &
@@ -102,9 +110,11 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
 
   /**
    * The object used to localize this component. To change the default
-   * localization, replace this with an object that provides all properties, or
+   * localization, set this to an object that provides all properties, or
    * just the individual properties you want to change.
    *
+   * When not set, defaults to `undefined`.
+   *
    * The object has the following JSON structure and default values:
    * ```js
    * {
@@ -119,10 +129,20 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    *   // Screen reader announcement of the selected items count.
    *   // {count} is replaced with the actual count of items.
    *   total: '{count} items selected',
+   *   // Text of the select all button when no filter is set.
+   *   selectAll: 'Select All',
+   *   // Text of the select all button when no filter is set
+   *   // and all items are selected.
+   *   deselectAll: 'Deselect All',
+   *   // Text of the select all button when a filter is set.
+   *   selectFiltered: 'Select Filtered',
+   *   // Text of the select all button when a filter is set
+   *   // and all items matching the filter are selected.
+   *   deselectFiltered: 'Deselect Filtered',
    * }
    * ```
    */
-  i18n: MultiSelectComboBoxI18n;
+  i18n: MultiSelectComboBoxI18n | undefined;
 
   /**
    * When true, filter string isn't cleared after selecting an item.