@vaadin/multi-select-combo-box 25.0.0-alpha8 → 25.0.0-beta1

package/package.json

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

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

@@ -3,7 +3,7 @@
  * 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 '@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';
 

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

@@ -3,7 +3,7 @@
  * 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 '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const multiSelectComboBoxChipStyles = css`
@@ -13,16 +13,17 @@ export const multiSelectComboBoxChipStyles = css`
     justify-content: center;
     white-space: nowrap;
     box-sizing: border-box;
-    gap: var(--vaadin-chip-gap, var(--vaadin-chip-padding, 0.3em));
+    gap: var(--vaadin-chip-gap, 0);
     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);
+    color: var(--vaadin-chip-text-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));
+    border: var(--vaadin-chip-border-width, 1px) solid
+      var(--vaadin-chip-border-color, var(--vaadin-border-color-secondary));
     cursor: default;
   }
 
@@ -41,14 +42,17 @@ export const multiSelectComboBoxChipStyles = css`
   [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: auto calc(var(--vaadin-chip-padding, 0.3em) * -1);
-    color: var(--vaadin-chip-remove-button-color, var(--vaadin-color-subtle));
+    margin-inline-start: auto;
+    margin-block: calc(var(--vaadin-chip-border-width, 1px) * -1);
+    color: var(--vaadin-chip-remove-button-text-color, var(--vaadin-text-color-secondary));
     cursor: var(--vaadin-clickable-cursor);
+    translate: 25%;
   }
 
   [part='remove-button']::before {
@@ -65,7 +69,7 @@ export const multiSelectComboBoxChipStyles = css`
   }
 
   :host([disabled]) [part='label'] {
-    --vaadin-chip-color: var(--vaadin-color-disabled);
+    --vaadin-chip-text-color: var(--vaadin-text-color-disabled);
   }
 
   :host([hidden]),
@@ -84,7 +88,7 @@ export const multiSelectComboBoxChipStyles = css`
     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-inline-start: 2px solid var(--vaadin-chip-border-color, var(--vaadin-border-color-secondary));
     border-radius: inherit;
   }
 
@@ -109,4 +113,14 @@ export const multiSelectComboBoxChipStyles = css`
   :host([count='1'])::after {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    :host {
+      border: 1px solid !important;
+    }
+
+    [part='remove-button']::before {
+      background: CanvasText;
+    }
+  }
 `;

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

@@ -8,7 +8,7 @@ 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 { multiSelectComboBoxChipStyles } from './styles/vaadin-multi-select-combo-box-chip-core-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.

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

@@ -28,6 +28,7 @@ class MultiSelectComboBoxContainer extends InputContainer {
           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

@@ -8,7 +8,7 @@ import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-m
 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-core-styles.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';
 

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.
    */