@vaadin/multi-select-combo-box 24.8.4 → 25.0.0-alpha10

package/README.md

@@ -29,29 +29,6 @@ Once installed, import the component in your application:
 import '@vaadin/multi-select-combo-box';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/multi-select-combo-box/vaadin-multi-select-combo-box.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/multi-select-combo-box/theme/material/vaadin-multi-select-combo-box.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/multi-select-combo-box/theme/lumo/vaadin-multi-select-combo-box.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/multi-select-combo-box/src/vaadin-multi-select-combo-box.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +23,8 @@
     "lit.d.ts",
     "lit.js",
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -33,34 +35,31 @@
     "Vaadin",
     "multi-select-combo-box",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.8.4",
-    "@vaadin/combo-box": "~24.8.4",
-    "@vaadin/component-base": "~24.8.4",
-    "@vaadin/field-base": "~24.8.4",
-    "@vaadin/input-container": "~24.8.4",
-    "@vaadin/item": "~24.8.4",
-    "@vaadin/lit-renderer": "~24.8.4",
-    "@vaadin/overlay": "~24.8.4",
-    "@vaadin/vaadin-lumo-styles": "~24.8.4",
-    "@vaadin/vaadin-material-styles": "~24.8.4",
-    "@vaadin/vaadin-themable-mixin": "~24.8.4",
+    "@vaadin/a11y-base": "25.0.0-alpha10",
+    "@vaadin/combo-box": "25.0.0-alpha10",
+    "@vaadin/component-base": "25.0.0-alpha10",
+    "@vaadin/field-base": "25.0.0-alpha10",
+    "@vaadin/input-container": "25.0.0-alpha10",
+    "@vaadin/item": "25.0.0-alpha10",
+    "@vaadin/lit-renderer": "25.0.0-alpha10",
+    "@vaadin/overlay": "25.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.8.4",
-    "@vaadin/test-runner-commands": "~24.8.4",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

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/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,112 @@
+/**
+ * @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/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, var(--vaadin-chip-padding, 0.3em));
+    background: var(--vaadin-chip-background, var(--vaadin-background-container));
+    color: var(--vaadin-chip-color, var(--vaadin-color));
+    font-size: var(--vaadin-chip-font-size, 0.875em);
+    font-weight: var(--vaadin-chip-font-weight, 500);
+    line-height: var(--vaadin-input-field-value-line-height, inherit);
+    padding: 0 var(--vaadin-chip-padding, 0.3em);
+    height: var(--vaadin-chip-height, calc(1lh / 0.875));
+    border-radius: var(--vaadin-chip-border-radius, var(--vaadin-radius-m));
+    border: var(--vaadin-chip-border-width, 1px) solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
+    cursor: default;
+  }
+
+  :host(:not([slot='overflow'])) {
+    min-width: min(
+      max-content,
+      var(--vaadin-multi-select-combo-box-chip-min-width, var(--vaadin-chip-min-width, 48px))
+    );
+  }
+
+  :host([focused]) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: calc(var(--vaadin-chip-border-width, 1px) * -1);
+  }
+
+  [part='label'] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [part='remove-button'] {
+    flex: none;
+    display: block;
+    margin-inline: auto calc(var(--vaadin-chip-padding, 0.3em) * -1);
+    color: var(--vaadin-chip-remove-button-color, var(--vaadin-color-subtle));
+    cursor: var(--vaadin-clickable-cursor);
+  }
+
+  [part='remove-button']::before {
+    content: '';
+    display: block;
+    width: var(--vaadin-icon-size, 1lh);
+    height: var(--vaadin-icon-size, 1lh);
+    background: currentColor;
+    mask-image: var(--_vaadin-icon-cross);
+  }
+
+  :host([disabled]) {
+    cursor: var(--vaadin-disabled-cursor);
+  }
+
+  :host([disabled]) [part='label'] {
+    --vaadin-chip-color: var(--vaadin-color-disabled);
+  }
+
+  :host([hidden]),
+  :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
+    display: none !important;
+  }
+
+  :host([slot='overflow']) {
+    position: relative;
+    margin-inline-start: 8px;
+    min-width: 1.5em;
+  }
+
+  :host([slot='overflow'])::before,
+  :host([slot='overflow'])::after {
+    content: '';
+    position: absolute;
+    inset: calc(var(--vaadin-chip-border-width, 1px) * -1);
+    border-inline-start: 2px solid var(--vaadin-chip-border-color, var(--vaadin-border-color));
+    border-radius: inherit;
+  }
+
+  :host([slot='overflow'])::before {
+    left: calc(-4px - var(--vaadin-chip-border-width, 1px));
+  }
+
+  :host([slot='overflow'])::after {
+    left: calc(-8px - var(--vaadin-chip-border-width, 1px));
+  }
+
+  :host([count='2']) {
+    margin-inline-start: 4px;
+  }
+
+  :host([count='1']) {
+    margin-inline-start: 0;
+  }
+
+  :host([count='2'])::after,
+  :host([count='1'])::before,
+  :host([count='1'])::after {
+    display: none;
+  }
+`;

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

@@ -3,6 +3,6 @@
  * 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-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
+import type { CSSResult } from 'lit';
+
+export const multiSelectComboBoxStyles: CSSResult;

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

@@ -3,15 +3,19 @@
  * 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);
     --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
   }
 
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
   #chips {
     display: flex;
     align-items: center;
@@ -45,30 +49,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/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-overlay-core-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-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/styles/vaadin-multi-select-combo-box-scroller-core-styles.js

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

@@ -3,14 +3,12 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { multiSelectComboBoxChip } from './vaadin-multi-select-combo-box-styles.js';
-
-registerStyles('vaadin-multi-select-combo-box-chip', multiSelectComboBoxChip, {
-  moduleId: 'vaadin-multi-select-combo-box-chip',
-});
+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';
 
 /**
  * An element used by `<vaadin-multi-select-combo-box>` to display selected items.
@@ -30,25 +28,32 @@ registerStyles('vaadin-multi-select-combo-box-chip', multiSelectComboBoxChip, {
  * @extends HTMLElement
  * @private
  */
-class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
+class MultiSelectComboBoxChip extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
   static get is() {
     return 'vaadin-multi-select-combo-box-chip';
   }
 
+  static get styles() {
+    return multiSelectComboBoxChipStyles;
+  }
+
   static get properties() {
     return {
       disabled: {
         type: Boolean,
         reflectToAttribute: true,
+        sync: true,
       },
 
       readonly: {
         type: Boolean,
         reflectToAttribute: true,
+        sync: true,
       },
 
       label: {
         type: String,
+        sync: true,
       },
 
       item: {
@@ -57,10 +62,11 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
     };
   }
 
-  static get template() {
+  /** @protected */
+  render() {
     return html`
-      <div part="label">[[label]]</div>
-      <div part="remove-button" on-click="_onRemoveClick"></div>
+      <div part="label">${this.label}</div>
+      <div part="remove-button" @click="${this._onRemoveClick}"></div>
     `;
   }
 

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

@@ -3,29 +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, html } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { InputContainer } from '@vaadin/input-container/src/vaadin-input-container.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-multi-select-combo-box-container',
-  css`
-    #wrapper {
-      display: flex;
-      width: 100%;
-      min-width: 0;
-    }
-
-    :host([auto-expand-vertically]) #wrapper {
-      flex-wrap: wrap;
-    }
-  `,
-  {
-    moduleId: 'vaadin-multi-select-combo-box-container-styles',
-  },
-);
-
-let memoizedTemplate;
 
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
@@ -39,20 +19,22 @@ class MultiSelectComboBoxContainer extends InputContainer {
     return 'vaadin-multi-select-combo-box-container';
   }
 
-  static get template() {
-    if (!memoizedTemplate) {
-      memoizedTemplate = super.template.cloneNode(true);
-      const content = memoizedTemplate.content;
-      const slots = content.querySelectorAll('slot');
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        #wrapper {
+          display: flex;
+          width: 100%;
+          min-width: 0;
+          gap: var(--_wrapper-gap);
+        }
 
-      const wrapper = document.createElement('div');
-      wrapper.setAttribute('id', 'wrapper');
-      content.insertBefore(wrapper, slots[2]);
-
-      wrapper.appendChild(slots[0]);
-      wrapper.appendChild(slots[1]);
-    }
-    return memoizedTemplate;
+        :host([auto-expand-vertically]) #wrapper {
+          flex-wrap: wrap;
+        }
+      `,
+    ];
   }
 
   static get properties() {
@@ -69,6 +51,17 @@ class MultiSelectComboBoxContainer extends InputContainer {
       },
     };
   }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="wrapper">
+        <slot name="prefix"></slot>
+        <slot></slot>
+      </div>
+      <slot name="suffix"></slot>
+    `;
+  }
 }
 
 defineCustomElement(MultiSelectComboBoxContainer);

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

@@ -3,10 +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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -36,22 +39,20 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes DirMixin
  * @private
  */
-export class MultiSelectComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
+export class MultiSelectComboBoxItem extends ComboBoxItemMixin(
+  ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-multi-select-combo-box-item';
   }
 
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
+  static get styles() {
+    return itemStyles;
+  }
 
-        :host([hidden]) {
-          display: none !important;
-        }
-      </style>
+  /** @protected */
+  render() {
+    return html`
       <span part="checkmark" aria-hidden="true"></span>
       <div part="content">
         <slot></slot>