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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta2",
   "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-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",
+    "@vaadin/a11y-base": "25.0.0-beta2",
+    "@vaadin/combo-box": "25.0.0-beta2",
+    "@vaadin/component-base": "25.0.0-beta2",
+    "@vaadin/field-base": "25.0.0-beta2",
+    "@vaadin/input-container": "25.0.0-beta2",
+    "@vaadin/item": "25.0.0-beta2",
+    "@vaadin/lit-renderer": "25.0.0-beta2",
+    "@vaadin/overlay": "25.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-beta2",
+    "@vaadin/test-runner-commands": "25.0.0-beta2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta2",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
 }

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

@@ -13,7 +13,7 @@ import type { ComboBoxBaseMixinClass } from '@vaadin/combo-box/src/vaadin-combo-
 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 { 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';
@@ -32,11 +32,11 @@ 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>>(
@@ -50,13 +50,13 @@ export declare function MultiSelectComboBoxMixin<TItem, T extends Constructor<HT
   Constructor<DisabledMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<FocusMixinClass> &
+  Constructor<I18nMixinClass<MultiSelectComboBoxI18n>> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputControlMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
   Constructor<MultiSelectComboBoxMixinClass<TItem>> &
-  Constructor<OverlayClassMixinClass> &
   Constructor<ResizeMixinClass> &
   Constructor<SlotStylesMixinClass> &
   Constructor<ValidateMixinClass> &
@@ -99,12 +99,12 @@ export declare class MultiSelectComboBoxMixinClass<TItem> {
   itemIdPath: 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',

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

@@ -7,6 +7,7 @@ import { announce } from '@vaadin/a11y-base/src/announce.js';
 import { ComboBoxDataProviderMixin } from '@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxItemsMixin } from '@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js';
 import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -14,16 +15,26 @@ import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 
+const DEFAULT_I18N = {
+  cleared: 'Selection cleared',
+  focused: 'focused. Press Backspace to remove',
+  selected: 'added to selection',
+  deselected: 'removed from selection',
+  total: '{count} items selected',
+};
+
 /**
  * @polymerMixin
  * @mixes ComboBoxDataProviderMixin
  * @mixes ComboBoxItemsMixin
+ * @mixes I18nMixin
  * @mixes InputControlMixin
  * @mixes ResizeMixin
  */
 export const MultiSelectComboBoxMixin = (superClass) =>
-  class MultiSelectComboBoxMixinClass extends ComboBoxDataProviderMixin(
-    ComboBoxItemsMixin(InputControlMixin(ResizeMixin(superClass))),
+  class MultiSelectComboBoxMixinClass extends I18nMixin(
+    DEFAULT_I18N,
+    ComboBoxDataProviderMixin(ComboBoxItemsMixin(InputControlMixin(ResizeMixin(superClass)))),
   ) {
     static get properties() {
       return {
@@ -72,43 +83,6 @@ export const MultiSelectComboBoxMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * 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 has the following JSON structure and default values:
-         * ```
-         * {
-         *   // Screen reader announcement on clear button click.
-         *   cleared: 'Selection cleared',
-         *   // Screen reader announcement when a chip is focused.
-         *   focused: ' focused. Press Backspace to remove',
-         *   // Screen reader announcement when item is selected.
-         *   selected: 'added to selection',
-         *   // Screen reader announcement when item is deselected.
-         *   deselected: 'removed from selection',
-         *   // Screen reader announcement of the selected items count.
-         *   // {count} is replaced with the actual count of items.
-         *   total: '{count} items selected',
-         * }
-         * ```
-         * @type {!MultiSelectComboBoxI18n}
-         * @default {English/US}
-         */
-        i18n: {
-          type: Object,
-          value: () => {
-            return {
-              cleared: 'Selection cleared',
-              focused: 'focused. Press Backspace to remove',
-              selected: 'added to selection',
-              deselected: 'removed from selection',
-              total: '{count} items selected',
-            };
-          },
-        },
-
         /**
          * When true, filter string isn't cleared after selecting an item.
          */
@@ -244,6 +218,37 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       ];
     }
 
+    /**
+     * 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',
+     *   // Screen reader announcement when a chip is focused.
+     *   focused: ' focused. Press Backspace to remove',
+     *   // Screen reader announcement when item is selected.
+     *   selected: 'added to selection',
+     *   // Screen reader announcement when item is deselected.
+     *   deselected: 'removed from selection',
+     *   // Screen reader announcement of the selected items count.
+     *   // {count} is replaced with the actual count of items.
+     *   total: '{count} items selected',
+     * }
+     * ```
+     * @return {!MultiSelectComboBoxI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /** @protected */
     get slotStyles() {
       const tag = this.localName;
@@ -384,7 +389,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     clear() {
       this.__updateSelection([]);
 
-      announce(this.i18n.cleared);
+      announce(this.__effectiveI18n.cleared);
     }
 
     /**
@@ -750,8 +755,8 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     /** @private */
     __announceItem(itemLabel, isSelected, itemCount) {
       const state = isSelected ? 'selected' : 'deselected';
-      const total = this.i18n.total.replace('{count}', itemCount || 0);
-      announce(`${itemLabel} ${this.i18n[state]} ${total}`);
+      const total = this.__effectiveI18n.total.replace('{count}', itemCount || 0);
+      announce(`${itemLabel} ${this.__effectiveI18n[state]} ${total}`);
     }
 
     /** @private */
@@ -1218,7 +1223,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         if (focusedIndex > -1) {
           const item = chips[focusedIndex].item;
           const itemLabel = this._getItemLabel(item);
-          announce(`${itemLabel} ${this.i18n.focused}`);
+          announce(`${itemLabel} ${this.__effectiveI18n.focused}`);
         }
       }
     }

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

@@ -8,11 +8,11 @@ import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-ove
 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 { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-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 { multiSelectComboBoxOverlayStyles } from './styles/vaadin-multi-select-combo-box-overlay-core-styles.js';
+import { multiSelectComboBoxOverlayStyles } from './styles/vaadin-multi-select-combo-box-overlay-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.

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

@@ -8,7 +8,7 @@ import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-plac
 import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { multiSelectComboBoxScrollerStyles } from './styles/vaadin-multi-select-combo-box-scroller-core-styles.js';
+import { multiSelectComboBoxScrollerStyles } from './styles/vaadin-multi-select-combo-box-scroller-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.

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

@@ -13,7 +13,6 @@ import type { ComboBoxDataProviderMixinClass } from '@vaadin/combo-box/src/vaadi
 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 { ElementMixinClass } from '@vaadin/component-base/src/element-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';
@@ -105,6 +104,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * `chips`                | The element that wraps slotted chips for selected items
  * `label`                | The label element
  * `input-field`          | The element that wraps prefix, value and suffix
+ * `field-button`         | Set on both clear and toggle buttons
  * `clear-button`         | The clear button
  * `error-message`        | The error message element
  * `helper-text`          | The helper text element wrapper
@@ -123,6 +123,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * `has-label`            | Set when the element has a label
  * `has-helper`           | Set when the element has helper text or slot
  * `has-error-message`    | Set when the element has an error message
+ * `has-tooltip`          | Set when the element has a slotted tooltip
  * `invalid`              | Set when the element is invalid
  * `focused`              | Set when the element is focused
  * `focus-ring`           | Set when the element is keyboard focused
@@ -189,7 +190,6 @@ interface MultiSelectComboBox<TItem = ComboBoxDefaultItem>
     DelegateStateMixinClass,
     DelegateFocusMixinClass,
     MultiSelectComboBoxMixinClass<TItem>,
-    OverlayClassMixinClass,
     ResizeMixinClass,
     ThemableMixinClass,
     ThemePropertyMixinClass,

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

@@ -16,7 +16,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { multiSelectComboBoxStyles } from './styles/vaadin-multi-select-combo-box-core-styles.js';
+import { multiSelectComboBoxStyles } from './styles/vaadin-multi-select-combo-box-base-styles.js';
 import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.js';
 
 /**
@@ -42,6 +42,7 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
  * `chips`                | The element that wraps slotted chips for selected items
  * `label`                | The label element
  * `input-field`          | The element that wraps prefix, value and suffix
+ * `field-button`         | Set on both clear and toggle buttons
  * `clear-button`         | The clear button
  * `error-message`        | The error message element
  * `helper-text`          | The helper text element wrapper
@@ -60,6 +61,7 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
  * `has-label`            | Set when the element has a label
  * `has-helper`           | Set when the element has helper text or slot
  * `has-error-message`    | Set when the element has an error message
+ * `has-tooltip`          | Set when the element has a slotted tooltip
  * `invalid`              | Set when the element is invalid
  * `focused`              | Set when the element is focused
  * `focus-ring`           | Set when the element is keyboard focused
@@ -133,8 +135,8 @@ class MultiSelectComboBox extends MultiSelectComboBoxMixin(
             <slot name="chip"></slot>
           </div>
           <slot name="input"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-          <div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
+          <div id="clearButton" part="field-button clear-button" slot="suffix" aria-hidden="true"></div>
+          <div id="toggleButton" part="field-button toggle-button" slot="suffix" aria-hidden="true"></div>
         </vaadin-multi-select-combo-box-container>
 
         <div part="helper-text">

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

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-multi-select-combo-box.js';
+import './src/vaadin-multi-select-combo-box.js';
 export * from './src/vaadin-multi-select-combo-box.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "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`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`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.",
+          "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": "page-size",
@@ -51,17 +51,6 @@
                 ]
               }
             },
-            {
-              "name": "overlay-class",
-              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "opened",
               "description": "True if the dropdown is open, false otherwise.",
@@ -120,6 +109,15 @@
                 ]
               }
             },
+            {
+              "name": "i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "value": {
+                "type": [
+                  "Object"
+                ]
+              }
+            },
             {
               "name": "autofocus",
               "description": "Specify that this control should have input focus when the page loads.",
@@ -416,17 +414,6 @@
                   ]
                 }
               },
-              {
-                "name": "overlayClass",
-                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "opened",
                 "description": "True if the dropdown is open, false otherwise.",
@@ -489,6 +476,17 @@
                   ]
                 }
               },
+              {
+                "name": "itemLabelGenerator",
+                "description": "A function that is used to generate the label for dropdown\nitems based on the item. Receives one argument:\n- `item` The item to generate the label for.",
+                "value": {
+                  "type": [
+                    "Object",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "itemLabelPath",
                 "description": "Path for label of the item. If `items` is an array of objects, the\n`itemLabelPath` is used to fetch the displayed string label for each\nitem.\n\nThe item label is also used for matching items when processing user\ninput, i.e., for filtering and selecting items.",
@@ -507,6 +505,15 @@
                   ]
                 }
               },
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
+                "value": {
+                  "type": [
+                    "MultiSelectComboBoxI18n"
+                  ]
+                }
+              },
               {
                 "name": "autofocus",
                 "description": "Specify that this control should have input focus when the page loads.",
@@ -716,15 +723,6 @@
                   ]
                 }
               },
-              {
-                "name": "i18n",
-                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
-                "value": {
-                  "type": [
-                    "MultiSelectComboBoxI18n"
-                  ]
-                }
-              },
               {
                 "name": "keepFilter",
                 "description": "When true, filter string isn't cleared after selecting an item.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "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`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`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.",
+          "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": [
             {
@@ -152,13 +152,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": ".overlayClass",
-              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": ".items",
               "description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
@@ -180,6 +173,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".itemLabelGenerator",
+              "description": "A function that is used to generate the label for dropdown\nitems based on the item. Receives one argument:\n- `item` The item to generate the label for.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".itemLabelPath",
               "description": "Path for label of the item. If `items` is an array of objects, the\n`itemLabelPath` is used to fetch the displayed string label for each\nitem.\n\nThe item label is also used for matching items when processing user\ninput, i.e., for filtering and selecting items.",
@@ -194,6 +194,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".label",
               "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
@@ -271,13 +278,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": ".i18n",
-              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n  // Screen reader announcement on clear button click.\n  cleared: 'Selection cleared',\n  // Screen reader announcement when a chip is focused.\n  focused: ' focused. Press Backspace to remove',\n  // Screen reader announcement when item is selected.\n  selected: 'added to selection',\n  // Screen reader announcement when item is deselected.\n  deselected: 'removed from selection',\n  // Screen reader announcement of the selected items count.\n  // {count} is replaced with the actual count of items.\n  total: '{count} items selected',\n}\n```",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": ".selectedItems",
               "description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",

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

@@ -1,33 +0,0 @@
-/**
- * @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';
-
-export const multiSelectComboBoxChipStyles = css`
-  :host {
-    display: inline-flex;
-    align-items: center;
-    align-self: center;
-    white-space: nowrap;
-    box-sizing: border-box;
-  }
-
-  [part='label'] {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  :host([hidden]),
-  :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
-    display: none !important;
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
-  }
-`;

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

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const multiSelectComboBoxStyles: CSSResult;

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

@@ -1,51 +0,0 @@
-/**
- * @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';
-
-export const multiSelectComboBoxStyles = css`
-  :host {
-    max-width: 100%;
-    --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
-    --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
-  }
-
-  :host([opened]) {
-    pointer-events: auto;
-  }
-
-  #chips {
-    display: flex;
-    align-items: center;
-  }
-
-  ::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([auto-expand-vertically]) #chips {
-    display: contents;
-  }
-
-  :host([auto-expand-horizontally]) [class$='container'] {
-    width: auto;
-  }
-`;

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

@@ -1,21 +0,0 @@
-/**
- * @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';
-
-export const multiSelectComboBoxOverlayStyles = css`
-  #overlay {
-    width: var(
-      --vaadin-multi-select-combo-box-overlay-width,
-      var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
-    );
-  }
-
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-`;

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

@@ -1,27 +0,0 @@
-/**
- * @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';
-
-export const multiSelectComboBoxScrollerStyles = css`
-  :host {
-    display: block;
-    min-height: 1px;
-    overflow: auto;
-
-    /* Fixes item background from getting on top of scrollbars on Safari */
-    transform: translate3d(0, 0, 0);
-
-    /* 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);
-    position: relative;
-  }
-`;

package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.d.ts

@@ -1,10 +0,0 @@
-/**
- * @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/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

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

@@ -1,107 +0,0 @@
-/**
- * @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/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const chip = css`
-  :host {
-    font-size: var(--lumo-font-size-xxs);
-    line-height: 1;
-    color: var(--lumo-body-text-color);
-    border-radius: var(--lumo-border-radius-s);
-    background-color: var(--lumo-contrast-20pct);
-    cursor: var(--lumo-clickable-cursor);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  :host([disabled]) {
-    background-color: var(--lumo-contrast-10pct);
-  }
-
-  :host([focused]) [part='remove-button'] {
-    color: inherit;
-  }
-
-  :host([slot='overflow']) {
-    position: relative;
-    min-width: var(--lumo-size-xxs);
-    margin-inline-start: var(--lumo-space-s);
-  }
-
-  :host([slot='overflow'])::before,
-  :host([slot='overflow'])::after {
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 100%;
-    border-left: calc(var(--lumo-space-s) / 4) solid;
-    border-radius: var(--lumo-border-radius-s);
-    border-color: var(--lumo-contrast-30pct);
-  }
-
-  :host([slot='overflow'])::before {
-    left: calc(-1 * var(--lumo-space-s) / 2);
-  }
-
-  :host([slot='overflow'])::after {
-    left: calc(-1 * var(--lumo-space-s));
-  }
-
-  :host([count='2']) {
-    margin-inline-start: calc(var(--lumo-space-s) / 2);
-  }
-
-  :host([count='2'])::after {
-    display: none;
-  }
-
-  :host([count='1']) {
-    margin-inline-start: 0;
-  }
-
-  :host([count='1'])::before,
-  :host([count='1'])::after {
-    display: none;
-  }
-
-  [part='label'] {
-    font-weight: 500;
-    line-height: 1.25;
-  }
-
-  [part='remove-button'] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: -0.3125em;
-    margin-bottom: -0.3125em;
-    margin-inline-start: auto;
-    width: 1.25em;
-    height: 1.25em;
-    font-size: 1.5em;
-    transition: none;
-  }
-
-  [part='remove-button']::before {
-    content: var(--lumo-icons-cross);
-  }
-
-  :host([disabled]) [part='label'] {
-    color: var(--lumo-disabled-text-color);
-    -webkit-text-fill-color: var(--lumo-disabled-text-color);
-    pointer-events: none;
-  }
-`;
-
-registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {
-  moduleId: 'lumo-multi-select-combo-box-chip',
-});

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

@@ -1,10 +0,0 @@
-/**
- * @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/input-container/theme/lumo/vaadin-input-container-styles.js';
-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';

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

@@ -1,121 +0,0 @@
-/**
- * @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/input-container/theme/lumo/vaadin-input-container-styles.js';
-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-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-overlay' },
-);
-
-registerStyles(
-  'vaadin-multi-select-combo-box-container',
-  css`
-    :host([auto-expand-vertically]) {
-      padding-block: var(--lumo-space-xs);
-    }
-  `,
-  { moduleId: 'lumo-multi-select-combo-box-container' },
-);
-
-const multiSelectComboBox = css`
-  :host {
-    --_wrapper-gap: 0;
-  }
-
-  :host([has-value]) {
-    padding-inline-start: 0;
-  }
-
-  :host([has-value]) ::slotted(input:placeholder-shown) {
-    caret-color: var(--lumo-body-text-color) !important;
-  }
-
-  [part='label'] {
-    flex-shrink: 0;
-  }
-
-  /* Override input-container styles */
-  [part='input-field'] ::slotted([slot='chip']),
-  [part='input-field'] ::slotted([slot='overflow']) {
-    min-height: auto;
-    padding: 0.3125em calc(0.5em + var(--lumo-border-radius-s) / 4);
-    color: var(--lumo-body-text-color);
-    mask-image: none;
-  }
-
-  :host([auto-expand-vertically]) ::slotted([slot='chip']) {
-    margin-block: calc(var(--lumo-space-xs) / 2);
-  }
-
-  ::slotted([slot='chip']:not([readonly]):not([disabled])) {
-    padding-inline-end: 0;
-  }
-
-  :host([auto-expand-vertically]) ::slotted([slot='input']) {
-    min-height: calc(var(--lumo-text-field-size, var(--lumo-size-m)) - 2 * var(--lumo-space-xs));
-  }
-
-  ::slotted([slot='chip']:not(:last-of-type)),
-  ::slotted([slot='overflow']:not(:last-of-type)) {
-    margin-inline-end: var(--lumo-space-xs);
-  }
-
-  ::slotted([slot='chip'][focused]) {
-    background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
-    color: var(--lumo-primary-contrast-color);
-  }
-
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-dropdown);
-  }
-
-  :host([readonly][has-value]) [part='toggle-button'] {
-    color: var(--lumo-contrast-60pct);
-    cursor: var(--lumo-clickable-cursor);
-  }
-`;
-
-registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'lumo-multi-select-combo-box',
-});

package/theme/lumo/vaadin-multi-select-combo-box.d.ts

@@ -1,8 +0,0 @@
-/**
- * @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-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/lumo/vaadin-multi-select-combo-box.js

@@ -1,8 +0,0 @@
-/**
- * @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-multi-select-combo-box-chip-styles.js';
-import './vaadin-multi-select-combo-box-styles.js';
-import '../../src/vaadin-multi-select-combo-box.js';