@vaadin/multi-select-combo-box 25.0.0-alpha3 → 25.0.0-alpha4

package/package.json

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

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

@@ -0,0 +1,33 @@
+/**
+ * @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-overlay-styles.js

@@ -0,0 +1,21 @@
+/**
+ * @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-styles.js

@@ -0,0 +1,30 @@
+/**
+ * @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);
+
+    /* Enable momentum scrolling on iOS */
+    -webkit-overflow-scrolling: touch;
+
+    /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+    box-shadow: 0 0 0 white;
+  }
+
+  #selector {
+    border-width: var(--_vaadin-multi-select-combo-box-items-container-border-width);
+    border-style: var(--_vaadin-multi-select-combo-box-items-container-border-style);
+    border-color: var(--_vaadin-multi-select-combo-box-items-container-border-color, transparent);
+    position: relative;
+  }
+`;

package/src/{vaadin-multi-select-combo-box-styles.d.ts → styles/vaadin-multi-select-combo-box-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/{vaadin-multi-select-combo-box-styles.js → styles/vaadin-multi-select-combo-box-styles.js}

@@ -3,9 +3,9 @@
  * 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 '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
-export const multiSelectComboBox = css`
+export const multiSelectComboBoxStyles = css`
   :host {
     max-width: 100%;
     --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
@@ -45,30 +45,3 @@ export const multiSelectComboBox = css`
     width: auto;
   }
 `;
-
-export const multiSelectComboBoxChip = 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/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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-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-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 CSSInjectionMixin(ThemableMixin(PolylitMixin(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-internal.js

@@ -10,6 +10,7 @@ import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { MultiSelectComboBoxInternalMixin } from './vaadin-multi-select-combo-box-internal-mixin.js';
 
@@ -22,7 +23,9 @@ import { MultiSelectComboBoxInternalMixin } from './vaadin-multi-select-combo-bo
  * @mixes ThemableMixin
  * @private
  */
-class MultiSelectComboBoxInternal extends MultiSelectComboBoxInternalMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class MultiSelectComboBoxInternal extends MultiSelectComboBoxInternalMixin(
+  CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))),
+) {
   static get is() {
     return 'vaadin-multi-select-combo-box-internal';
   }

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-core-styles.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-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(
+  CSSInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(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-overlay.js

@@ -3,29 +3,16 @@
  * 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 { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-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 { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-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%;
-  }
-`;
+import { multiSelectComboBoxOverlayStyles } from './styles/vaadin-multi-select-combo-box-overlay-styles.js';
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
@@ -39,7 +26,7 @@ const multiSelectComboBoxOverlayStyles = css`
  * @private
  */
 class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(
-  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+  OverlayMixin(DirMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-multi-select-combo-box-overlay';

package/src/vaadin-multi-select-combo-box-scroller.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 { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';
 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
+import { multiSelectComboBoxScrollerStyles } from './styles/vaadin-multi-select-combo-box-scroller-styles.js';
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
@@ -17,35 +19,13 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
  * @mixes ComboBoxScrollerMixin
  * @private
  */
-export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
+export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(CSSInjectionMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-multi-select-combo-box-scroller';
   }
 
   static get styles() {
-    return 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);
-
-        /* Enable momentum scrolling on iOS */
-        -webkit-overflow-scrolling: touch;
-
-        /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-        box-shadow: 0 0 0 white;
-      }
-
-      #selector {
-        border-width: var(--_vaadin-multi-select-combo-box-items-container-border-width);
-        border-style: var(--_vaadin-multi-select-combo-box-items-container-border-style);
-        border-color: var(--_vaadin-multi-select-combo-box-items-container-border-color, transparent);
-        position: relative;
-      }
-    `;
+    return multiSelectComboBoxScrollerStyles;
   }
 
   /** @protected */

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

@@ -12,9 +12,10 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { multiSelectComboBoxStyles } from './styles/vaadin-multi-select-combo-box-styles.js';
 import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.js';
-import { multiSelectComboBox } from './vaadin-multi-select-combo-box-styles.js';
 
 /**
  * `<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends
@@ -99,13 +100,15 @@ import { multiSelectComboBox } from './vaadin-multi-select-combo-box-styles.js';
  * @mixes ThemableMixin
  * @mixes MultiSelectComboBoxMixin
  */
-class MultiSelectComboBox extends MultiSelectComboBoxMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class MultiSelectComboBox extends MultiSelectComboBoxMixin(
+  CSSInjectionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-multi-select-combo-box';
   }
 
   static get styles() {
-    return [inputFieldShared, multiSelectComboBox];
+    return [inputFieldShared, multiSelectComboBoxStyles];
   }
 
   /** @protected */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha4",
   "description-markup": "markdown",
   "contributions": {
     "html": {

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-alpha3",
+  "version": "25.0.0-alpha4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {