@vaadin/multi-select-combo-box 25.0.0-alpha2 → 25.0.0-alpha20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha20",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,6 @@
     "lit.d.ts",
     "lit.js",
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,27 +36,27 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha2",
-    "@vaadin/combo-box": "25.0.0-alpha2",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/field-base": "25.0.0-alpha2",
-    "@vaadin/input-container": "25.0.0-alpha2",
-    "@vaadin/item": "25.0.0-alpha2",
-    "@vaadin/lit-renderer": "25.0.0-alpha2",
-    "@vaadin/overlay": "25.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
+    "@vaadin/a11y-base": "25.0.0-alpha20",
+    "@vaadin/combo-box": "25.0.0-alpha20",
+    "@vaadin/component-base": "25.0.0-alpha20",
+    "@vaadin/field-base": "25.0.0-alpha20",
+    "@vaadin/input-container": "25.0.0-alpha20",
+    "@vaadin/item": "25.0.0-alpha20",
+    "@vaadin/lit-renderer": "25.0.0-alpha20",
+    "@vaadin/overlay": "25.0.0-alpha20",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha20",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha20",
+    "@vaadin/test-runner-commands": "25.0.0-alpha20",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha20",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "c948aae591a30b432f3784000d4677674cae56e0"
 }

package/src/{vaadin-multi-select-combo-box-styles.d.ts → styles/vaadin-multi-select-combo-box-base-styles.d.ts}

@@ -5,6 +5,4 @@
  */
 import type { CSSResult } from 'lit';
 
-export const multiSelectComboBox: CSSResult;
-
-export const multiSelectComboBoxChip: CSSResult;
+export const multiSelectComboBoxStyles: CSSResult;

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * 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/styles/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`
+    :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

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * 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/styles/style-props.js';
+import { css } from 'lit';
+
+export const multiSelectComboBoxChipStyles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    box-sizing: border-box;
+    gap: var(--vaadin-chip-gap, 0);
+    background: var(--vaadin-chip-background, var(--vaadin-background-container));
+    color: var(--vaadin-chip-color, var(--vaadin-text-color));
+    font-size: max(11px, 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-secondary));
+    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;
+    margin-block: calc(var(--vaadin-chip-border-width, 1px) * -1);
+  }
+
+  [part='remove-button'] {
+    flex: none;
+    display: block;
+    margin-inline-start: auto;
+    margin-block: calc(var(--vaadin-chip-border-width, 1px) * -1);
+    color: var(--vaadin-chip-remove-button-color, var(--vaadin-text-color-secondary));
+    cursor: var(--vaadin-clickable-cursor);
+    translate: 25%;
+  }
+
+  [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-text-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-secondary));
+    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;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      border: 1px solid !important;
+    }
+
+    [part='remove-button']::before {
+      background: CanvasText;
+    }
+  }
+`;

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+import { comboBoxOverlayStyles } from '@vaadin/combo-box/src/styles/vaadin-combo-box-overlay-base-styles.js';
+
+export const multiSelectComboBoxOverlayStyles = [
+  comboBoxOverlayStyles,
+  css`
+    #overlay {
+      width: var(
+        --vaadin-multi-select-combo-box-overlay-width,
+        var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
+      );
+    }
+  `,
+];

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { comboBoxScrollerStyles } from '@vaadin/combo-box/src/styles/vaadin-combo-box-scroller-base-styles.js';
+
+export const multiSelectComboBoxScrollerStyles = comboBoxScrollerStyles;

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

@@ -6,8 +6,9 @@
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { multiSelectComboBoxChip } from './vaadin-multi-select-combo-box-styles.js';
+import { multiSelectComboBoxChipStyles } from './styles/vaadin-multi-select-combo-box-chip-base-styles.js';
 
 /**
  * An element used by `<vaadin-multi-select-combo-box>` to display selected items.
@@ -27,13 +28,13 @@ import { multiSelectComboBoxChip } from './vaadin-multi-select-combo-box-styles.
  * @extends HTMLElement
  * @private
  */
-class MultiSelectComboBoxChip extends ThemableMixin(PolylitMixin(LitElement)) {
+class MultiSelectComboBoxChip extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
   static get is() {
     return 'vaadin-multi-select-combo-box-chip';
   }
 
   static get styles() {
-    return multiSelectComboBoxChip;
+    return multiSelectComboBoxChipStyles;
   }
 
   static get properties() {

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

@@ -27,6 +27,8 @@ class MultiSelectComboBoxContainer extends InputContainer {
           display: flex;
           width: 100%;
           min-width: 0;
+          gap: var(--_wrapper-gap);
+          align-self: start;
         }
 
         :host([auto-expand-vertically]) #wrapper {

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

@@ -3,11 +3,13 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-base-styles.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -37,21 +39,15 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes DirMixin
  * @private
  */
-export class MultiSelectComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+export class MultiSelectComboBoxItem extends ComboBoxItemMixin(
+  ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-multi-select-combo-box-item';
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: block;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-    `;
+    return itemStyles;
   }
 
   /** @protected */

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 { I18nMixinClass } from '@vaadin/component-base/src/i18n-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';
@@ -28,21 +32,25 @@ export type MultiSelectComboBoxRenderer<TItem> = (
 ) => void;
 
 export interface MultiSelectComboBoxI18n {
-  cleared: string;
-  focused: string;
-  selected: string;
-  deselected: string;
-  total: string;
+  cleared?: string;
+  focused?: string;
+  selected?: string;
+  deselected?: string;
+  total?: string;
 }
 
 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> &
   Constructor<FieldMixinClass> &
   Constructor<FocusMixinClass> &
+  Constructor<I18nMixinClass<MultiSelectComboBoxI18n>> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputControlMixinClass> &
   Constructor<InputMixinClass> &
@@ -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,12 +92,6 @@ 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
@@ -135,19 +99,12 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
   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
-   * _i18n_ object or just the property you want to modify.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following JSON structure and default values:
-   * ```
+   * ```js
    * {
    *   // Screen reader announcement on clear button click.
    *   cleared: 'Selection cleared',
@@ -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.
    */