@vaadin/multi-select-combo-box 24.0.0-alpha9 → 24.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -37,18 +37,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "24.0.0-alpha9",
-    "@vaadin/component-base": "24.0.0-alpha9",
-    "@vaadin/field-base": "24.0.0-alpha9",
-    "@vaadin/input-container": "24.0.0-alpha9",
-    "@vaadin/lit-renderer": "24.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@vaadin/combo-box": "24.0.0-beta2",
+    "@vaadin/component-base": "24.0.0-beta2",
+    "@vaadin/field-base": "24.0.0-beta2",
+    "@vaadin/input-container": "24.0.0-beta2",
+    "@vaadin/lit-renderer": "24.0.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -56,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
 }

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

@@ -152,20 +152,6 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     super._initScroller(comboBox);
   }
 
-  /**
-   * Override method from `InputMixin`.
-   *
-   * @protected
-   * @override
-   */
-  clear() {
-    super.clear();
-
-    if (this.inputElement) {
-      this.inputElement.value = '';
-    }
-  }
-
   /**
    * Override Enter handler to keep overlay open
    * when item is selected or unselected.

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

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { ComboBoxDefaultItem, ComboBoxItemMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
+import type { DirMixinClass } from '@vaadin/component-base/src/dir-mixin.js';
+import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { MultiSelectComboBox } from './vaadin-multi-select-combo-box.js';
+
+/**
+ * An item element used by the `<vaadin-multi-select-combo-box>` dropdown.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name   | Description
+ * ------------|--------------
+ * `checkmark` | The graphical checkmark shown for a selected item
+ * `content`   | The element that wraps the item content
+ *
+ * The following state attributes are exposed for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `selected`   | Set when the item is selected
+ * `focused`    | Set when the item is focused
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ */
+declare class MultiSelectComboBoxItem extends HTMLElement {}
+
+interface MultiSelectComboBoxItem<TItem = ComboBoxDefaultItem>
+  extends ComboBoxItemMixinClass<TItem, MultiSelectComboBox>,
+    DirMixinClass,
+    ThemableMixinClass {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-multi-select-combo-box-item': MultiSelectComboBoxItem;
+  }
+}
+
+export { MultiSelectComboBoxItem };

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

@@ -3,35 +3,59 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ComboBoxItem } from '@vaadin/combo-box/src/vaadin-combo-box-item.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * An element used for items in `<vaadin-multi-select-combo-box>`.
+ * An item element used by the `<vaadin-multi-select-combo-box>` dropdown.
  *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ----------|-------------
- * `content` | The element that wraps the item content
+ * Part name   | Description
+ * ------------|--------------
+ * `checkmark` | The graphical checkmark shown for a selected item
+ * `content`   | The element that wraps the item content
  *
  * The following state attributes are exposed for styling:
  *
- * Attribute  | Description                   | Part name
- * -----------|-------------------------------|-----------
- * `selected` | Set when the item is selected | :host
- * `focused`  | Set when the item is focused  | :host
+ * Attribute    | Description
+ * -------------|-------------
+ * `selected`   | Set when the item is selected
+ * `focused`    | Set when the item is focused
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
- * @extends ComboBoxItem
+ * @mixes ComboBoxItemMixin
+ * @mixes ThemableMixin
+ * @mixes DirMixin
  * @private
  */
-class MultiSelectComboBoxItem extends ComboBoxItem {
+export class MultiSelectComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-multi-select-combo-box-item';
   }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
 }
 
 customElements.define(MultiSelectComboBoxItem.is, MultiSelectComboBoxItem);

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+
+/**
+ * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
+ */
+declare class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-multi-select-combo-box-overlay': MultiSelectComboBoxOverlay;
+  }
+}
+
+export { MultiSelectComboBoxOverlay };

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

@@ -3,7 +3,8 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ComboBoxOverlay } from '@vaadin/combo-box/src/vaadin-combo-box-overlay.js';
+import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -15,20 +16,44 @@ registerStyles(
         var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
       );
     }
+
+    [part='content'] {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
   `,
   { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' },
 );
 
+let memoizedTemplate;
+
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  *
  * @extends ComboBoxOverlay
  * @private
  */
-class MultiSelectComboBoxOverlay extends ComboBoxOverlay {
+class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {
   static get is() {
     return 'vaadin-multi-select-combo-box-overlay';
   }
+
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+
+      const overlay = memoizedTemplate.content.querySelector('[part~="overlay"]');
+      overlay.removeAttribute('tabindex');
+
+      const loader = document.createElement('div');
+      loader.setAttribute('part', 'loader');
+
+      overlay.insertBefore(loader, overlay.firstElementChild);
+    }
+
+    return memoizedTemplate;
+  }
 }
 
 customElements.define(MultiSelectComboBoxOverlay.is, MultiSelectComboBoxOverlay);

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
+ */
+declare class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(HTMLElement) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-multi-select-combo-box-scroller': MultiSelectComboBoxScroller;
+  }
+}
+
+export { MultiSelectComboBoxScroller };

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

@@ -3,20 +3,52 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
-import { ComboBoxScroller } from '@vaadin/combo-box/src/vaadin-combo-box-scroller.js';
+import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  *
- * @extends ComboBoxScroller
+ * @extends HTMLElement
+ * @mixes ComboBoxScrollerMixin
  * @private
  */
-class MultiSelectComboBoxScroller extends ComboBoxScroller {
+export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolymerElement) {
   static get is() {
     return 'vaadin-multi-select-combo-box-scroller';
   }
 
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          min-height: 1px;
+          overflow: auto;
+
+          /* Fixes item background from getting on top of scrollbars on Safari */
+          transform: translate3d(0, 0, 0);
+
+          /* Enable momentum scrolling on iOS */
+          -webkit-overflow-scrolling: touch;
+
+          /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+          box-shadow: 0 0 0 white;
+        }
+
+        #selector {
+          border-width: var(--_vaadin-multi-select-combo-box-items-container-border-width);
+          border-style: var(--_vaadin-multi-select-combo-box-items-container-border-style);
+          border-color: var(--_vaadin-multi-select-combo-box-items-container-border-color, transparent);
+        }
+      </style>
+      <div id="selector">
+        <slot></slot>
+      </div>
+    `;
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -24,30 +56,32 @@ class MultiSelectComboBoxScroller extends ComboBoxScroller {
     this.setAttribute('aria-multiselectable', 'true');
   }
 
-  /** @private */
-  __getAriaSelected(_focusedIndex, itemIndex) {
-    const item = this.items[itemIndex];
-    return this.__isItemSelected(item, null, this.itemIdPath).toString();
-  }
-
-  /** @private */
-  __isItemSelected(item, _selectedItem, itemIdPath) {
+  /**
+   * @protected
+   * @override
+   */
+  _isItemSelected(item, _selectedItem, itemIdPath) {
     if (item instanceof ComboBoxPlaceholder) {
       return false;
     }
 
-    if (this.comboBox.readonly) {
+    if (this.owner.readonly) {
       return false;
     }
 
-    return this.comboBox._findIndex(item, this.comboBox.selectedItems, itemIdPath) > -1;
+    return this.owner._findIndex(item, this.owner.selectedItems, itemIdPath) > -1;
   }
 
-  /** @private */
-  __updateElement(el, index) {
-    super.__updateElement(el, index);
+  /**
+   * @param {HTMLElement} el
+   * @param {number} index
+   * @protected
+   * @override
+   */
+  _updateElement(el, index) {
+    super._updateElement(el, index);
 
-    el.toggleAttribute('readonly', this.comboBox.readonly);
+    el.toggleAttribute('readonly', this.owner.readonly);
   }
 }
 

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

@@ -16,6 +16,7 @@ import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin
 import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
+import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
@@ -254,6 +255,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   loading: boolean;
 
+  /**
+   * A space-delimited list of CSS class names to set on the overlay element.
+   *
+   * @attr {string} overlay-class
+   */
+  overlayClass: string;
+
   /**
    * True if the dropdown is open, false otherwise.
    */
@@ -332,6 +340,7 @@ interface MultiSelectComboBox
     SlotStylesMixinClass,
     LabelMixinClass,
     KeyboardMixinClass,
+    ClearButtonMixinClass,
     Omit<InputMixinClass, 'value'>,
     InputControlMixinClass,
     InputConstraintsMixinClass,

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

@@ -154,6 +154,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           readonly="[[readonly]]"
           auto-open-disabled="[[autoOpenDisabled]]"
           allow-custom-value="[[allowCustomValue]]"
+          overlay-class="[[overlayClass]]"
           data-provider="[[dataProvider]]"
           filter="{{filter}}"
           last-filter="{{_lastFilter}}"
@@ -305,6 +306,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         reflectToAttribute: true,
       },
 
+      /**
+       * A space-delimited list of CSS class names to set on the overlay element.
+       *
+       * @attr {string} overlay-class
+       */
+      overlayClass: {
+        type: String,
+      },
+
       /**
        * When present, it specifies that the field is read-only.
        */
@@ -488,6 +498,17 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     return [...this.querySelectorAll('[slot="chip"]')];
   }
 
+  /**
+   * Override a getter from `InputMixin` to compute
+   * the presence of value based on `selectedItems`.
+   *
+   * @protected
+   * @override
+   */
+  get _hasValue() {
+    return this.selectedItems && this.selectedItems.length > 0;
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -838,7 +859,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
   /** @private */
   __updateChips() {
-    if (!this._inputField) {
+    if (!this._inputField || !this.inputElement) {
       return;
     }
 
@@ -1118,17 +1139,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   __computeEffectiveFilteredItems(items, filteredItems, selectedItems, readonly) {
     return !items && readonly ? selectedItems : filteredItems;
   }
-
-  /**
-   * Override a method from `InputMixin` to
-   * compute the presence of value based on `selectedItems`.
-   *
-   * @protected
-   * @override
-   */
-  get _hasValue() {
-    return this.selectedItems && this.selectedItems.length > 0;
-  }
 }
 
 customElements.define(MultiSelectComboBox.is, MultiSelectComboBox);

package/theme/lumo/vaadin-multi-select-combo-box-styles.js

@@ -7,22 +7,44 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
+import { comboBoxItem } from '@vaadin/combo-box/theme/lumo/vaadin-combo-box-item-styles.js';
+import { comboBoxLoader, comboBoxOverlay } from '@vaadin/combo-box/theme/lumo/vaadin-combo-box-overlay-styles.js';
+import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
 import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
+import { loader } from '@vaadin/vaadin-lumo-styles/mixins/loader.js';
+import { menuOverlayCore } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
+import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+const multiSelectComboBoxItem = css`
+  @media (any-hover: hover) {
+    :host(:hover[readonly]) {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+`;
+
+registerStyles('vaadin-multi-select-combo-box-item', [item, comboBoxItem, multiSelectComboBoxItem], {
+  moduleId: 'lumo-multi-select-combo-box-item',
+});
+
 registerStyles(
-  'vaadin-multi-select-combo-box-item',
-  css`
-    @media (any-hover: hover) {
-      :host(:hover[readonly]) {
-        background-color: transparent;
-        cursor: default;
+  'vaadin-multi-select-combo-box-overlay',
+  [
+    overlay,
+    menuOverlayCore,
+    comboBoxOverlay,
+    loader,
+    comboBoxLoader,
+    css`
+      :host {
+        --_vaadin-multi-select-combo-box-items-container-border-width: var(--lumo-space-xs);
+        --_vaadin-multi-select-combo-box-items-container-border-style: solid;
       }
-    }
-  `,
-  {
-    moduleId: 'lumo-multi-select-combo-box-item',
-  },
+    `,
+  ],
+  { moduleId: 'lumo-multi-select-combo-box-overlay' },
 );
 
 const multiSelectComboBox = css`

package/theme/lumo/vaadin-multi-select-combo-box.js

@@ -3,9 +3,8 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/combo-box/theme/lumo/vaadin-combo-box-item-styles.js';
-import '@vaadin/combo-box/theme/lumo/vaadin-combo-box-dropdown-styles.js';
 import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';
+import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import './vaadin-multi-select-combo-box-chip-styles.js';
 import './vaadin-multi-select-combo-box-styles.js';
 import '../../src/vaadin-multi-select-combo-box.js';

package/theme/material/vaadin-multi-select-combo-box-styles.js

@@ -6,22 +6,42 @@
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
+import { comboBoxItem } from '@vaadin/combo-box/theme/material/vaadin-combo-box-item-styles.js';
+import { comboBoxLoader, comboBoxOverlay } from '@vaadin/combo-box/theme/material/vaadin-combo-box-overlay-styles.js';
+import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
+import { loader } from '@vaadin/vaadin-material-styles/mixins/loader.js';
+import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+const multiSelectComboBoxItem = css`
+  @media (any-hover: hover) {
+    :host(:hover[readonly]) {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+`;
+
+registerStyles('vaadin-multi-select-combo-box-item', [item, comboBoxItem, multiSelectComboBoxItem], {
+  moduleId: 'material-multi-select-combo-box-item',
+});
+
 registerStyles(
-  'vaadin-multi-select-combo-box-item',
-  css`
-    @media (any-hover: hover) {
-      :host(:hover[readonly]) {
-        background-color: transparent;
-        cursor: default;
+  'vaadin-multi-select-combo-box-overlay',
+  [
+    menuOverlay,
+    comboBoxOverlay,
+    loader,
+    comboBoxLoader,
+    css`
+      :host {
+        --_vaadin-multi-select-combo-box-items-container-border-width: 8px 0;
+        --_vaadin-multi-select-combo-box-items-container-border-style: solid;
       }
-    }
-  `,
-  {
-    moduleId: 'material-multi-select-combo-box-item',
-  },
+    `,
+  ],
+  { moduleId: 'material-multi-select-combo-box-overlay' },
 );
 
 const multiSelectComboBox = css`

package/theme/material/vaadin-multi-select-combo-box.js

@@ -3,9 +3,8 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/combo-box/theme/material/vaadin-combo-box-item-styles.js';
-import '@vaadin/combo-box/theme/material/vaadin-combo-box-dropdown-styles.js';
 import '@vaadin/input-container/theme/material/vaadin-input-container.js';
+import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import './vaadin-multi-select-combo-box-chip-styles.js';
 import './vaadin-multi-select-combo-box-styles.js';
 import '../../src/vaadin-multi-select-combo-box.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -99,30 +99,30 @@
               }
             },
             {
-              "name": "allowed-char-pattern",
-              "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
+              "name": "clear-button-visible",
+              "description": "Set to true to display the clear icon which clears the input.",
               "value": {
                 "type": [
-                  "string",
+                  "boolean",
                   "null",
                   "undefined"
                 ]
               }
             },
             {
-              "name": "autoselect",
-              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
+              "name": "allowed-char-pattern",
+              "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
               "value": {
                 "type": [
-                  "boolean",
+                  "string",
                   "null",
                   "undefined"
                 ]
               }
             },
             {
-              "name": "clear-button-visible",
-              "description": "Set to true to display the clear icon which clears the input.",
+              "name": "autoselect",
+              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
               "value": {
                 "type": [
                   "boolean",
@@ -230,6 +230,17 @@
                 ]
               }
             },
+            {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "opened",
               "description": "True if the dropdown is open, false otherwise.",
@@ -377,30 +388,30 @@
                 }
               },
               {
-                "name": "allowedCharPattern",
-                "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
+                "name": "clearButtonVisible",
+                "description": "Set to true to display the clear icon which clears the input.",
                 "value": {
                   "type": [
-                    "string",
+                    "boolean",
                     "null",
                     "undefined"
                   ]
                 }
               },
               {
-                "name": "autoselect",
-                "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
+                "name": "allowedCharPattern",
+                "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
                 "value": {
                   "type": [
-                    "boolean",
+                    "string",
                     "null",
                     "undefined"
                   ]
                 }
               },
               {
-                "name": "clearButtonVisible",
-                "description": "Set to true to display the clear icon which clears the input.",
+                "name": "autoselect",
+                "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
                 "value": {
                   "type": [
                     "boolean",
@@ -528,6 +539,17 @@
                   ]
                 }
               },
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "selectedItems",
                 "description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -48,15 +48,15 @@
               }
             },
             {
-              "name": "?autoselect",
-              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
+              "name": "?clearButtonVisible",
+              "description": "Set to true to display the clear icon which clears the input.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?clearButtonVisible",
-              "description": "Set to true to display the clear icon which clears the input.",
+              "name": "?autoselect",
+              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
               "value": {
                 "kind": "expression"
               }
@@ -180,6 +180,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".selectedItems",
               "description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",