@vaadin/multi-select-combo-box 25.0.0-alpha7 → 25.0.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -39,21 +39,21 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha7",
-    "@vaadin/combo-box": "25.0.0-alpha7",
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/field-base": "25.0.0-alpha7",
-    "@vaadin/input-container": "25.0.0-alpha7",
-    "@vaadin/item": "25.0.0-alpha7",
-    "@vaadin/lit-renderer": "25.0.0-alpha7",
-    "@vaadin/overlay": "25.0.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
+    "@vaadin/a11y-base": "25.0.0-alpha9",
+    "@vaadin/combo-box": "25.0.0-alpha9",
+    "@vaadin/component-base": "25.0.0-alpha9",
+    "@vaadin/field-base": "25.0.0-alpha9",
+    "@vaadin/input-container": "25.0.0-alpha9",
+    "@vaadin/item": "25.0.0-alpha9",
+    "@vaadin/lit-renderer": "25.0.0-alpha9",
+    "@vaadin/overlay": "25.0.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@vaadin/chai-plugins": "25.0.0-alpha9",
+    "@vaadin/test-runner-commands": "25.0.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
 }

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

@@ -3,57 +3,56 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '@vaadin/component-base/src/style-props.js';
 import { css } from 'lit';
 import { comboBoxStyles } from '@vaadin/combo-box/src/styles/vaadin-combo-box-base-styles.js';
 
 export const multiSelectComboBoxStyles = [
   comboBoxStyles,
   css`
-    @layer base {
-      :host {
-        max-width: 100%;
-        --_input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4rem);
-        --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, var(--vaadin-chip-min-width, 48px));
-        --_wrapper-gap: var(--vaadin-multi-select-combo-box-chips-gap, 2px);
-      }
-
-      #chips {
-        display: flex;
-        align-items: center;
-        gap: var(--vaadin-multi-select-combo-box-chips-gap, 2px);
-      }
-
-      ::slotted(input) {
-        box-sizing: border-box;
-        flex: 1 0 var(--_input-min-width);
-      }
-
-      ::slotted([slot='chip']),
-      ::slotted([slot='overflow']) {
-        flex: 0 1 auto;
-      }
-
-      ::slotted([slot='chip']) {
-        overflow: hidden;
-      }
-
-      :host(:is([readonly], [disabled])) ::slotted(input) {
-        flex-grow: 0;
-        flex-basis: 0;
-        padding: 0;
-      }
-
-      :host([readonly]:not([disabled])) [part$='button'] {
-        cursor: var(--vaadin-clickable-cursor);
-      }
-
-      :host([auto-expand-vertically]) #chips {
-        display: contents;
-      }
-
-      :host([auto-expand-horizontally]) [class$='container'] {
-        width: auto;
-      }
+    :host {
+      max-width: 100%;
+      --_input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4rem);
+      --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, var(--vaadin-chip-min-width, 48px));
+      --_wrapper-gap: var(--vaadin-multi-select-combo-box-chips-gap, 2px);
+    }
+
+    #chips {
+      display: flex;
+      align-items: center;
+      gap: var(--vaadin-multi-select-combo-box-chips-gap, 2px);
+    }
+
+    ::slotted(input) {
+      box-sizing: border-box;
+      flex: 1 0 var(--_input-min-width);
+    }
+
+    ::slotted([slot='chip']),
+    ::slotted([slot='overflow']) {
+      flex: 0 1 auto;
+    }
+
+    ::slotted([slot='chip']) {
+      overflow: hidden;
+    }
+
+    :host(:is([readonly], [disabled])) ::slotted(input) {
+      flex-grow: 0;
+      flex-basis: 0;
+      padding: 0;
+    }
+
+    :host([readonly]:not([disabled])) [part$='button'] {
+      cursor: var(--vaadin-clickable-cursor);
+    }
+
+    :host([auto-expand-vertically]) #chips {
+      display: contents;
+    }
+
+    :host([auto-expand-horizontally]) [class$='container'] {
+      width: auto;
     }
   `,
 ];

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

@@ -7,108 +7,106 @@ import '@vaadin/component-base/src/style-props.js';
 import { css } from 'lit';
 
 export const multiSelectComboBoxChipStyles = css`
-  @layer base {
-    :host {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      white-space: nowrap;
-      box-sizing: border-box;
-      gap: var(--vaadin-chip-gap, var(--vaadin-chip-padding, 0.3em));
-      background: var(--vaadin-chip-background, var(--vaadin-background-container));
-      color: var(--vaadin-chip-color, var(--vaadin-color));
-      font-size: var(--vaadin-chip-font-size, 0.875em);
-      font-weight: var(--vaadin-chip-font-weight, 500);
-      line-height: var(--vaadin-input-field-value-line-height, inherit);
-      padding: 0 var(--vaadin-chip-padding, 0.3em);
-      height: var(--vaadin-chip-height, calc(1lh / 0.875));
-      border-radius: var(--vaadin-chip-border-radius, var(--vaadin-radius-m));
-      border: var(--vaadin-chip-border-width, 1px) solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
-      cursor: default;
-    }
-
-    :host(:not([slot='overflow'])) {
-      min-width: min(
-        max-content,
-        var(--vaadin-multi-select-combo-box-chip-min-width, var(--vaadin-chip-min-width, 48px))
-      );
-    }
-
-    :host([focused]) {
-      outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
-      outline-offset: calc(var(--vaadin-chip-border-width, 1px) * -1);
-    }
-
-    [part='label'] {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    [part='remove-button'] {
-      flex: none;
-      display: block;
-      margin-inline: auto calc(var(--vaadin-chip-padding, 0.3em) * -1);
-      color: var(--vaadin-chip-remove-button-color, var(--vaadin-color-subtle));
-      cursor: var(--vaadin-clickable-cursor);
-    }
-
-    [part='remove-button']::before {
-      content: '';
-      display: block;
-      width: var(--vaadin-icon-size, 1lh);
-      height: var(--vaadin-icon-size, 1lh);
-      background: currentColor;
-      mask-image: var(--_vaadin-icon-cross);
-    }
-
-    :host([disabled]) {
-      cursor: var(--vaadin-disabled-cursor);
-    }
-
-    :host([disabled]) [part='label'] {
-      --vaadin-chip-color: var(--vaadin-color-disabled);
-    }
-
-    :host([hidden]),
-    :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
-      display: none !important;
-    }
-
-    :host([slot='overflow']) {
-      position: relative;
-      margin-inline-start: 8px;
-      min-width: 1.5em;
-    }
-
-    :host([slot='overflow'])::before,
-    :host([slot='overflow'])::after {
-      content: '';
-      position: absolute;
-      inset: calc(var(--vaadin-chip-border-width, 1px) * -1);
-      border-inline-start: 2px solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
-      border-radius: inherit;
-    }
-
-    :host([slot='overflow'])::before {
-      left: calc(-4px - var(--vaadin-chip-border-width, 1px));
-    }
-
-    :host([slot='overflow'])::after {
-      left: calc(-8px - var(--vaadin-chip-border-width, 1px));
-    }
-
-    :host([count='2']) {
-      margin-inline-start: 4px;
-    }
-
-    :host([count='1']) {
-      margin-inline-start: 0;
-    }
-
-    :host([count='2'])::after,
-    :host([count='1'])::before,
-    :host([count='1'])::after {
-      display: none;
-    }
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    box-sizing: border-box;
+    gap: var(--vaadin-chip-gap, var(--vaadin-chip-padding, 0.3em));
+    background: var(--vaadin-chip-background, var(--vaadin-background-container));
+    color: var(--vaadin-chip-color, var(--vaadin-color));
+    font-size: var(--vaadin-chip-font-size, 0.875em);
+    font-weight: var(--vaadin-chip-font-weight, 500);
+    line-height: var(--vaadin-input-field-value-line-height, inherit);
+    padding: 0 var(--vaadin-chip-padding, 0.3em);
+    height: var(--vaadin-chip-height, calc(1lh / 0.875));
+    border-radius: var(--vaadin-chip-border-radius, var(--vaadin-radius-m));
+    border: var(--vaadin-chip-border-width, 1px) solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
+    cursor: default;
+  }
+
+  :host(:not([slot='overflow'])) {
+    min-width: min(
+      max-content,
+      var(--vaadin-multi-select-combo-box-chip-min-width, var(--vaadin-chip-min-width, 48px))
+    );
+  }
+
+  :host([focused]) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: calc(var(--vaadin-chip-border-width, 1px) * -1);
+  }
+
+  [part='label'] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [part='remove-button'] {
+    flex: none;
+    display: block;
+    margin-inline: auto calc(var(--vaadin-chip-padding, 0.3em) * -1);
+    color: var(--vaadin-chip-remove-button-color, var(--vaadin-color-subtle));
+    cursor: var(--vaadin-clickable-cursor);
+  }
+
+  [part='remove-button']::before {
+    content: '';
+    display: block;
+    width: var(--vaadin-icon-size, 1lh);
+    height: var(--vaadin-icon-size, 1lh);
+    background: currentColor;
+    mask-image: var(--_vaadin-icon-cross);
+  }
+
+  :host([disabled]) {
+    cursor: var(--vaadin-disabled-cursor);
+  }
+
+  :host([disabled]) [part='label'] {
+    --vaadin-chip-color: var(--vaadin-color-disabled);
+  }
+
+  :host([hidden]),
+  :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
+    display: none !important;
+  }
+
+  :host([slot='overflow']) {
+    position: relative;
+    margin-inline-start: 8px;
+    min-width: 1.5em;
+  }
+
+  :host([slot='overflow'])::before,
+  :host([slot='overflow'])::after {
+    content: '';
+    position: absolute;
+    inset: calc(var(--vaadin-chip-border-width, 1px) * -1);
+    border-inline-start: 2px solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
+    border-radius: inherit;
+  }
+
+  :host([slot='overflow'])::before {
+    left: calc(-4px - var(--vaadin-chip-border-width, 1px));
+  }
+
+  :host([slot='overflow'])::after {
+    left: calc(-8px - var(--vaadin-chip-border-width, 1px));
+  }
+
+  :host([count='2']) {
+    margin-inline-start: 4px;
+  }
+
+  :host([count='1']) {
+    margin-inline-start: 0;
+  }
+
+  :host([count='2'])::after,
+  :host([count='1'])::before,
+  :host([count='1'])::after {
+    display: none;
   }
 `;

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

@@ -12,6 +12,10 @@ export const multiSelectComboBoxStyles = css`
     --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
   }
 
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
   #chips {
     display: flex;
     align-items: center;

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

@@ -9,13 +9,11 @@ import { comboBoxOverlayStyles } from '@vaadin/combo-box/src/styles/vaadin-combo
 export const multiSelectComboBoxOverlayStyles = [
   comboBoxOverlayStyles,
   css`
-    @layer base {
-      #overlay {
-        width: var(
-          --vaadin-multi-select-combo-box-overlay-width,
-          var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
-        );
-      }
+    #overlay {
+      width: var(
+        --vaadin-multi-select-combo-box-overlay-width,
+        var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
+      );
     }
   `,
 ];

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

@@ -28,7 +28,7 @@ import { multiSelectComboBoxChipStyles } from './styles/vaadin-multi-select-comb
  * @extends HTMLElement
  * @private
  */
-class MultiSelectComboBoxChip extends LumoInjectionMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class MultiSelectComboBoxChip extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
   static get is() {
     return 'vaadin-multi-select-combo-box-chip';
   }

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

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

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

@@ -8,8 +8,12 @@ import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-foc
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import type { ComboBoxDataProvider, ComboBoxItemModel } from '@vaadin/combo-box/src/vaadin-combo-box.js';
+import type { ComboBoxItemModel } from '@vaadin/combo-box/src/vaadin-combo-box.js';
+import type { ComboBoxBaseMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-base-mixin.js';
+import type { ComboBoxDataProviderMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
+import type { ComboBoxItemsMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
@@ -38,6 +42,9 @@ export interface MultiSelectComboBoxI18n {
 export declare function MultiSelectComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ClearButtonMixinClass> &
+  Constructor<ComboBoxBaseMixinClass> &
+  Constructor<ComboBoxDataProviderMixinClass<TItem>> &
+  Constructor<ComboBoxItemsMixinClass<TItem>> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -49,6 +56,7 @@ export declare function MultiSelectComboBoxMixin<TItem, T extends Constructor<HT
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
   Constructor<MultiSelectComboBoxMixinClass<TItem>> &
+  Constructor<OverlayClassMixinClass> &
   Constructor<ResizeMixinClass> &
   Constructor<SlotStylesMixinClass> &
   Constructor<ValidateMixinClass> &
@@ -76,44 +84,6 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   allowCustomValue: boolean;
 
-  /**
-   * Set true to prevent the overlay from opening automatically.
-   * @attr {boolean} auto-open-disabled
-   */
-  autoOpenDisabled: boolean;
-
-  /**
-   * Function that provides items lazily. Receives two arguments:
-   *
-   * - `params` - Object with the following properties:
-   *   - `params.page` Requested page index
-   *   - `params.pageSize` Current page size
-   *   - `params.filter` Currently applied filter
-   *
-   * - `callback(items, size)` - Callback function with arguments:
-   *   - `items` Current page of items
-   *   - `size` Total number of items.
-   */
-  dataProvider: ComboBoxDataProvider<TItem> | null | undefined;
-
-  /**
-   * A subset of items, filtered based on the user input. Filtered items
-   * can be assigned directly to omit the internal filtering functionality.
-   * The items can be of either `String` or `Object` type.
-   */
-  filteredItems: TItem[] | undefined;
-
-  /**
-   * Filtering string the user has typed into the input field.
-   */
-  filter: string;
-
-  /**
-   * A full set of items to filter the visible options from.
-   * The items can be of either `String` or `Object` type.
-   */
-  items: TItem[] | undefined;
-
   /**
    * A function used to generate CSS class names for dropdown
    * items and selected chips based on the item. The return
@@ -122,25 +92,12 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   itemClassNameGenerator: (item: TItem) => string;
 
-  /**
-   * The item property used for a visual representation of the item.
-   * @attr {string} item-label-path
-   */
-  itemLabelPath: string;
-
   /**
    * Path for the id of the item, used to detect whether the item is selected.
    * @attr {string} item-id-path
    */
   itemIdPath: string;
 
-  /**
-   * Path for the value of the item. If `items` is an array of objects,
-   * this property is used as a string value for the selected item.
-   * @attr {string} item-value-path
-   */
-  itemValuePath: string;
-
   /**
    * The object used to localize this component.
    * To change the default localization, replace the entire
@@ -176,24 +133,6 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   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.
-   */
-  opened: boolean;
-
-  /**
-   * Number of items fetched at a time from the data provider.
-   * @attr {number} page-size
-   */
-  pageSize: number;
-
   /**
    * A hint to the user of what can be entered in the control.
    * The placeholder will be only displayed in the case when
@@ -226,16 +165,6 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
    */
   selectedItemsOnTop: boolean;
 
-  /**
-   * Total number of items.
-   */
-  size: number | undefined;
-
-  /**
-   * Clears the cached pages and reloads data from data provider when needed.
-   */
-  clearCache(): void;
-
   /**
    * Clears the selected items.
    */