@vaadin/multi-select-combo-box 25.3.0-alpha1 → 25.3.0-alpha11

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",
@@ -170,7 +184,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "attribute": "clear-button-visible",
               "inheritedFrom": {
                 "name": "ClearButtonMixin",
@@ -655,12 +669,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 +698,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",
@@ -756,7 +782,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "fieldName": "clearButtonVisible",
               "inheritedFrom": {
                 "name": "ClearButtonMixin",
@@ -1113,6 +1139,20 @@
           "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.",
           "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 +1160,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 +1174,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",
@@ -1269,7 +1309,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "attribute": "clear-button-visible",
               "inheritedFrom": {
                 "name": "ClearButtonMixin",
@@ -1806,41 +1846,25 @@
               "name": "validated"
             }
           ],
-          "mixins": [
-            {
-              "name": "MultiSelectComboBoxMixin",
-              "module": "src/vaadin-multi-select-combo-box-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
-            },
-            {
-              "name": "ElementMixin",
-              "package": "@vaadin/component-base/src/element-mixin.js"
-            },
+          "attributes": [
             {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
+              "name": "accessible-description-ref",
+              "type": {
+                "text": "string"
+              },
+              "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+              "fieldName": "accessibleDescriptionRef",
+              "inheritedFrom": {
+                "name": "FieldMixin",
+                "package": "@vaadin/field-base/src/field-mixin.js"
+              }
             },
-            {
-              "name": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-multi-select-combo-box",
-          "customElement": true,
-          "attributes": [
             {
               "name": "accessible-name",
               "type": {
                 "text": "string"
               },
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "fieldName": "accessibleName",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -1852,7 +1876,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",
@@ -1948,7 +1972,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "fieldName": "clearButtonVisible",
               "inheritedFrom": {
                 "name": "ClearButtonMixin",
@@ -2255,6 +2279,13 @@
                 "package": "@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js"
               }
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            },
             {
               "name": "title",
               "type": {
@@ -2267,7 +2298,35 @@
                 "package": "@vaadin/field-base/src/input-control-mixin.js"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "MultiSelectComboBoxMixin",
+              "module": "src/vaadin-multi-select-combo-box-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "ElementMixin",
+              "package": "@vaadin/component-base/src/element-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-multi-select-combo-box",
+          "customElement": true
         }
       ],
       "exports": [

package/package.json

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

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

@@ -24,6 +24,7 @@ import { multiSelectComboBoxChipStyles } from './styles/vaadin-multi-select-comb
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-multi-select-combo-box-chip
  * @extends HTMLElement
  * @private

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

@@ -34,10 +34,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @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() {
@@ -60,3 +61,5 @@ export class MultiSelectComboBoxItem extends ComboBoxItemMixin(
 }
 
 defineCustomElement(MultiSelectComboBoxItem);
+
+export { MultiSelectComboBoxItem };

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

@@ -481,8 +481,10 @@ export const MultiSelectComboBoxMixin = (superClass) =>
           getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
       }
 
+      const isClosing = this.hasAttribute('closing');
+
       this._scroller.setProperties({
-        items: opened ? items : [],
+        items: opened || isClosing ? items : [],
         opened,
         focusedIndex,
         theme,
@@ -572,7 +574,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;
       }
 
@@ -580,12 +586,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();
       }
     }
@@ -1107,7 +1113,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
 
       if (this.clearButtonVisible && !this.opened && this.selectedItems && this.selectedItems.length) {
         event.stopPropagation();
-        this.selectedItems = [];
+        this._onClearAction();
       }
 
       super._onEscape(event);
@@ -1314,6 +1320,10 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     _overlaySelectedItemChanged(event) {
       event.stopPropagation();
 
+      if (this.hasAttribute('closing')) {
+        return;
+      }
+
       // Do not un-select on click when readonly
       if (this.readonly) {
         return;

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

@@ -17,6 +17,7 @@ import { multiSelectComboBoxOverlayStyles } from './styles/vaadin-multi-select-c
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-multi-select-combo-box-overlay
  * @extends HTMLElement
  * @private

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';
   }
@@ -72,3 +72,5 @@ export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMi
 }
 
 defineCustomElement(MultiSelectComboBoxScroller);
+
+export { MultiSelectComboBoxScroller };

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

@@ -96,6 +96,7 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-multi-select-combo-box
  * @extends HTMLElement
  */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.3.0-alpha1",
+  "version": "25.3.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -10,9 +10,18 @@
           "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.",
           "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"
@@ -93,7 +102,7 @@
             },
             {
               "name": "clear-button-visible",
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "value": {
                 "type": [
                   "boolean"
@@ -294,9 +303,7 @@
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -312,9 +319,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"
@@ -323,7 +339,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"
@@ -395,7 +411,7 @@
               },
               {
                 "name": "clearButtonVisible",
-                "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+                "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
                 "value": {
                   "type": [
                     "boolean"

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-alpha1",
+  "version": "25.3.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -19,16 +19,23 @@
           "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.",
           "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"
               }
@@ -84,7 +91,7 @@
             },
             {
               "name": "?clearButtonVisible",
-              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
+              "description": "Set to true to display the clear icon which clears the input.\nThis also enables clearing the input when pressing Esc key.",
               "value": {
                 "kind": "expression"
               }