@vaadin/multi-select-combo-box 24.0.0-alpha1 → 24.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -37,14 +37,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "24.0.0-alpha1",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/field-base": "24.0.0-alpha1",
-    "@vaadin/input-container": "24.0.0-alpha1",
-    "@vaadin/lit-renderer": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/combo-box": "24.0.0-alpha11",
+    "@vaadin/component-base": "24.0.0-alpha11",
+    "@vaadin/field-base": "24.0.0-alpha11",
+    "@vaadin/input-container": "24.0.0-alpha11",
+    "@vaadin/lit-renderer": "24.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -56,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

package/src/lit/renderer-directives.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { TemplateResult } from 'lit';

package/src/lit/renderer-directives.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { directive } from 'lit/directive.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';
@@ -66,7 +66,8 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
           text-overflow: ellipsis;
         }
 
-        :host(:is([readonly], [disabled], [part~='overflow'])) [part='remove-button'] {
+        :host([hidden]),
+        :host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
           display: none !important;
         }
       </style>

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { InputContainer } from '@vaadin/input-container/src/vaadin-input-container.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-multi-select-combo-box-item.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ComboBoxItem } from '@vaadin/combo-box/src/vaadin-combo-box-item.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ComboBoxOverlay } from '@vaadin/combo-box/src/vaadin-combo-box-overlay.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ComboBoxPlaceholder } from '@vaadin/combo-box/src/vaadin-combo-box-placeholder.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type {
@@ -9,13 +9,13 @@ import type {
   ComboBoxItemModel,
 } from '@vaadin/combo-box/src/vaadin-combo-box.js';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
-import type { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import type { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
@@ -106,17 +106,13 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  *
  * Part name              | Description
  * -----------------------|----------------
- * `chips`                | The element that wraps chips for selected items
- * `chip`                 | Chip shown for every selected item
+ * `chips`                | The element that wraps slotted chips for selected items
  * `label`                | The label element
  * `input-field`          | The element that wraps prefix, value and suffix
  * `clear-button`         | The clear button
  * `error-message`        | The error message element
  * `helper-text`          | The helper text element wrapper
  * `required-indicator`   | The `required` state indicator element
- * `overflow`             | The chip shown when component width is not enough to fit all chips
- * `overflow-one`         | Set on the overflow chip when only one chip does not fit
- * `overflow-two`         | Set on the overflow chip when two chips do not fit
  * `toggle-button`        | The toggle button
  *
  * The following state attributes are available for styling:
@@ -258,6 +254,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   loading: boolean;
 
+  /**
+   * A space-delimited list of CSS class names to set on the overlay element.
+   *
+   * @attr {string} overlay-class
+   */
+  overlayClass: string;
+
   /**
    * True if the dropdown is open, false otherwise.
    */

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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.js';
@@ -10,6 +10,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
@@ -23,10 +24,6 @@ const multiSelectComboBox = css`
     --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
   }
 
-  [hidden] {
-    display: none !important;
-  }
-
   #chips {
     display: flex;
     align-items: center;
@@ -37,7 +34,8 @@ const multiSelectComboBox = css`
     flex: 1 0 var(--input-min-width);
   }
 
-  [part='chip'] {
+  ::slotted([slot='chip']),
+  ::slotted([slot='overflow']) {
     flex: 0 1 auto;
   }
 
@@ -72,17 +70,13 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  *
  * Part name              | Description
  * -----------------------|----------------
- * `chips`                | The element that wraps chips for selected items
- * `chip`                 | Chip shown for every selected item
+ * `chips`                | The element that wraps slotted chips for selected items
  * `label`                | The label element
  * `input-field`          | The element that wraps prefix, value and suffix
  * `clear-button`         | The clear button
  * `error-message`        | The error message element
  * `helper-text`          | The helper text element wrapper
  * `required-indicator`   | The `required` state indicator element
- * `overflow`             | The chip shown when component width is not enough to fit all chips
- * `overflow-one`         | Set on the overflow chip when only one chip does not fit
- * `overflow-two`         | Set on the overflow chip when two chips do not fit
  * `toggle-button`        | The toggle button
  *
  * The following state attributes are available for styling:
@@ -160,6 +154,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           readonly="[[readonly]]"
           auto-open-disabled="[[autoOpenDisabled]]"
           allow-custom-value="[[allowCustomValue]]"
+          overlay-class="[[overlayClass]]"
           data-provider="[[dataProvider]]"
           filter="{{filter}}"
           last-filter="{{_lastFilter}}"
@@ -182,18 +177,10 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
             invalid="[[invalid]]"
             theme$="[[_theme]]"
           >
-            <vaadin-multi-select-combo-box-chip
-              id="overflow"
-              slot="prefix"
-              part$="[[_getOverflowPart(_overflowItems.length)]]"
-              disabled="[[disabled]]"
-              readonly="[[readonly]]"
-              label="[[_getOverflowLabel(_overflowItems.length)]]"
-              title$="[[_getOverflowTitle(_overflowItems)]]"
-              hidden$="[[_isOverflowHidden(_overflowItems.length)]]"
-              on-mousedown="_preventBlur"
-            ></vaadin-multi-select-combo-box-chip>
-            <div id="chips" part="chips" slot="prefix"></div>
+            <slot name="overflow" slot="prefix"></slot>
+            <div id="chips" part="chips" slot="prefix">
+              <slot name="chip"></slot>
+            </div>
             <slot name="input"></slot>
             <div
               id="clearButton"
@@ -319,6 +306,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         reflectToAttribute: true,
       },
 
+      /**
+       * A space-delimited list of CSS class names to set on the overlay element.
+       *
+       * @attr {string} overlay-class
+       */
+      overlayClass: {
+        type: String,
+      },
+
       /**
        * When present, it specifies that the field is read-only.
        */
@@ -469,7 +465,10 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   }
 
   static get observers() {
-    return ['_selectedItemsChanged(selectedItems, selectedItems.*)'];
+    return [
+      '_selectedItemsChanged(selectedItems, selectedItems.*)',
+      '__updateOverflowChip(_overflow, _overflowItems, disabled, readonly)',
+    ];
   }
 
   /** @protected */
@@ -496,7 +495,18 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
   /** @protected */
   get _chips() {
-    return this.shadowRoot.querySelectorAll('[part~="chip"]');
+    return [...this.querySelectorAll('[slot="chip"]')];
+  }
+
+  /**
+   * Override a getter from `InputMixin` to compute
+   * the presence of value based on `selectedItems`.
+   *
+   * @protected
+   * @override
+   */
+  get _hasValue() {
+    return this.selectedItems && this.selectedItems.length > 0;
   }
 
   /** @protected */
@@ -519,6 +529,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this._tooltipController.setShouldShow((target) => !target.opened);
 
     this._inputField = this.shadowRoot.querySelector('[part="input-field"]');
+
+    this._overflowController = new SlotController(this, 'overflow', 'vaadin-multi-select-combo-box-chip', {
+      initializer: (chip) => {
+        chip.addEventListener('mousedown', (e) => this._preventBlur(e));
+        this._overflow = chip;
+      },
+    });
+    this.addController(this._overflowController);
+
     this.__updateChips();
 
     processTemplates(this);
@@ -716,34 +735,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     return this.$.comboBox._getItemLabel(item);
   }
 
-  /** @private */
-  _getOverflowLabel(length) {
-    return length;
-  }
-
-  /** @private */
-  _getOverflowPart(length) {
-    let part = `chip overflow`;
-
-    if (length === 1) {
-      part += ' overflow-one';
-    } else if (length === 2) {
-      part += ' overflow-two';
-    }
-
-    return part;
-  }
-
-  /** @private */
-  _getOverflowTitle(items) {
-    return this._mergeItemLabels(items);
-  }
-
-  /** @private */
-  _isOverflowHidden(length) {
-    return length === 0;
-  }
-
   /** @private */
   _mergeItemLabels(items) {
     return items.map((item) => this._getItemLabel(item)).join(', ');
@@ -828,8 +819,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   /** @private */
   __createChip(item) {
     const chip = document.createElement('vaadin-multi-select-combo-box-chip');
-    chip.setAttribute('part', 'chip');
-    chip.setAttribute('slot', 'prefix');
+    chip.setAttribute('slot', 'chip');
 
     chip.item = item;
     chip.disabled = this.disabled;
@@ -847,16 +837,20 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
   /** @private */
   __getOverflowWidth() {
-    const chip = this.$.overflow;
+    const chip = this._overflow;
 
     chip.style.visibility = 'hidden';
     chip.removeAttribute('hidden');
 
+    const count = chip.getAttribute('count');
+
     // Detect max possible width of the overflow chip
-    chip.setAttribute('part', 'chip overflow');
+    // by measuring it with widest number (2 digits)
+    chip.setAttribute('count', '99');
     const overflowStyle = getComputedStyle(chip);
     const overflowWidth = chip.clientWidth + parseInt(overflowStyle.marginInlineStart);
 
+    chip.setAttribute('count', count);
     chip.setAttribute('hidden', '');
     chip.style.visibility = '';
 
@@ -870,10 +864,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
 
     // Clear all chips except the overflow
-    Array.from(this._chips).forEach((chip) => {
-      if (chip !== this.$.overflow) {
-        chip.remove();
-      }
+    this._chips.forEach((chip) => {
+      chip.remove();
     });
 
     const items = [...this.selectedItems];
@@ -891,7 +883,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     // Add chips until remaining width is exceeded
     for (let i = items.length - 1, refNode = null; i >= 0; i--) {
       const chip = this.__createChip(items[i]);
-      this.$.chips.insertBefore(chip, refNode);
+      this.insertBefore(chip, refNode);
 
       if (this.$.chips.clientWidth > remainingWidth) {
         chip.remove();
@@ -905,6 +897,21 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this._overflowItems = items;
   }
 
+  /** @private */
+  __updateOverflowChip(overflow, items, disabled, readonly) {
+    if (overflow) {
+      const count = items.length;
+
+      overflow.label = `${count}`;
+      overflow.setAttribute('count', `${count}`);
+      overflow.setAttribute('title', this._mergeItemLabels(items));
+      overflow.toggleAttribute('hidden', count === 0);
+
+      overflow.disabled = disabled;
+      overflow.readonly = readonly;
+    }
+  }
+
   /** @private */
   _onClearButtonTouchend(event) {
     // Cancel the following click and focus events
@@ -961,7 +968,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   _onKeyDown(event) {
     super._onKeyDown(event);
 
-    const chips = Array.from(this._chips).slice(1);
+    const chips = this._chips;
 
     if (!this.readonly && chips.length > 0) {
       switch (event.key) {
@@ -969,10 +976,10 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           this._onBackSpace(chips);
           break;
         case 'ArrowLeft':
-          this._onArrowLeft(chips);
+          this._onArrowLeft(chips, event);
           break;
         case 'ArrowRight':
-          this._onArrowRight(chips);
+          this._onArrowRight(chips, event);
           break;
         default:
           this._focusedChipIndex = -1;
@@ -982,15 +989,18 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   }
 
   /** @private */
-  _onArrowLeft(chips) {
-    if (this.inputElement.value !== '' || this.opened) {
+  _onArrowLeft(chips, event) {
+    if (this.inputElement.selectionStart !== 0) {
       return;
     }
 
     const idx = this._focusedChipIndex;
+    if (idx !== -1) {
+      event.preventDefault();
+    }
     let newIdx;
 
-    if (this.getAttribute('dir') !== 'rtl') {
+    if (!this.__isRTL) {
       if (idx === -1) {
         // Focus last chip
         newIdx = chips.length - 1;
@@ -1012,15 +1022,18 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   }
 
   /** @private */
-  _onArrowRight(chips) {
-    if (this.inputElement.value !== '' || this.opened) {
+  _onArrowRight(chips, event) {
+    if (this.inputElement.selectionStart !== 0) {
       return;
     }
 
     const idx = this._focusedChipIndex;
+    if (idx !== -1) {
+      event.preventDefault();
+    }
     let newIdx;
 
-    if (this.getAttribute('dir') === 'rtl') {
+    if (this.__isRTL) {
       if (idx === -1) {
         // Focus last chip
         newIdx = chips.length - 1;
@@ -1043,7 +1056,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
   /** @private */
   _onBackSpace(chips) {
-    if (this.inputElement.value !== '' || this.opened) {
+    if (this.inputElement.selectionStart !== 0) {
       return;
     }
 
@@ -1059,7 +1072,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   /** @private */
   _focusedChipIndexChanged(focusedIndex, oldFocusedIndex) {
     if (focusedIndex > -1 || oldFocusedIndex > -1) {
-      const chips = Array.from(this._chips).slice(1);
+      const chips = this._chips;
       chips.forEach((chip, index) => {
         chip.toggleAttribute('focused', index === focusedIndex);
       });
@@ -1126,17 +1139,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   __computeEffectiveFilteredItems(items, filteredItems, selectedItems, readonly) {
     return !items && readonly ? selectedItems : filteredItems;
   }
-
-  /**
-   * Override a method from `InputMixin` to
-   * compute the presence of value based on `selectedItems`.
-   *
-   * @protected
-   * @override
-   */
-  get _hasValue() {
-    return this.selectedItems && this.selectedItems.length > 0;
-  }
 }
 
 customElements.define(MultiSelectComboBox.is, MultiSelectComboBox);

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';
@@ -15,34 +15,26 @@ const chip = css`
   :host {
     font-size: var(--lumo-font-size-xxs);
     line-height: 1;
-    padding: 0.3125em calc(0.5em + var(--lumo-border-radius-s) / 4);
     color: var(--lumo-body-text-color);
     border-radius: var(--lumo-border-radius-s);
     background-color: var(--lumo-contrast-20pct);
     cursor: var(--lumo-clickable-cursor);
-  }
-
-  :host([focused]) {
-    background-color: var(--lumo-primary-color);
-    color: var(--lumo-primary-contrast-color);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   :host([focused]) [part='remove-button'] {
     color: inherit;
   }
 
-  :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
-    padding-inline-end: 0;
-  }
-
-  :host([part~='overflow']) {
+  :host([slot='overflow']) {
     position: relative;
     min-width: var(--lumo-size-xxs);
     margin-inline-start: var(--lumo-space-s);
   }
 
-  :host([part~='overflow'])::before,
-  :host([part~='overflow'])::after {
+  :host([slot='overflow'])::before,
+  :host([slot='overflow'])::after {
     position: absolute;
     content: '';
     width: 100%;
@@ -52,28 +44,28 @@ const chip = css`
     border-color: var(--lumo-contrast-30pct);
   }
 
-  :host([part~='overflow'])::before {
+  :host([slot='overflow'])::before {
     left: calc(-1 * var(--lumo-space-s) / 2);
   }
 
-  :host([part~='overflow'])::after {
+  :host([slot='overflow'])::after {
     left: calc(-1 * var(--lumo-space-s));
   }
 
-  :host([part~='overflow-two']) {
+  :host([count='2']) {
     margin-inline-start: calc(var(--lumo-space-s) / 2);
   }
 
-  :host([part~='overflow-two'])::after {
+  :host([count='2'])::after {
     display: none;
   }
 
-  :host([part~='overflow-one']) {
+  :host([count='1']) {
     margin-inline-start: 0;
   }
 
-  :host([part~='overflow-one'])::before,
-  :host([part~='overflow-one'])::after {
+  :host([count='1'])::before,
+  :host([count='1'])::after {
     display: none;
   }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';
@@ -34,12 +34,28 @@ const multiSelectComboBox = css`
     caret-color: var(--lumo-body-text-color) !important;
   }
 
-  [part~='chip']:not(:last-of-type) {
+  /* Override input-container styles */
+  ::slotted([slot='chip']),
+  ::slotted([slot='overflow']) {
+    min-height: auto;
+    padding: 0.3125em calc(0.5em + var(--lumo-border-radius-s) / 4);
+    color: var(--lumo-body-text-color);
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+
+  ::slotted([slot='chip']:not([readonly]):not([disabled])) {
+    padding-inline-end: 0;
+  }
+
+  ::slotted([slot='chip']:not(:last-of-type)),
+  ::slotted([slot='overflow']:not(:last-of-type)) {
     margin-inline-end: var(--lumo-space-xs);
   }
 
-  [part~='overflow']:not([hidden]) + :not(:empty) {
-    margin-inline-start: var(--lumo-space-xs);
+  ::slotted([slot='chip'][focused]) {
+    background-color: var(--lumo-primary-color);
+    color: var(--lumo-primary-contrast-color);
   }
 
   [part='toggle-button']::before {

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/combo-box/theme/lumo/vaadin-combo-box-item-styles.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';
@@ -13,28 +13,25 @@ const chip = css`
   :host {
     height: 1.25rem;
     margin-inline-end: 0.25rem;
-    padding: 0 0.5rem;
     border-radius: 4px;
     background-color: rgba(0, 0, 0, 0.08);
     cursor: default;
     font-family: var(--material-font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   :host([focused]) {
     background-color: rgba(0, 0, 0, 0.16);
   }
 
-  :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
-    padding-inline-end: 0;
-  }
-
-  :host([part~='overflow']) {
+  :host([slot='overflow']) {
     position: relative;
     margin-inline-start: 0.5rem;
   }
 
-  :host([part~='overflow'])::before,
-  :host([part~='overflow'])::after {
+  :host([slot='overflow'])::before,
+  :host([slot='overflow'])::after {
     position: absolute;
     content: '';
     width: 100%;
@@ -44,28 +41,28 @@ const chip = css`
     border-color: rgba(0, 0, 0, 0.08);
   }
 
-  :host([part~='overflow'])::before {
+  :host([slot='overflow'])::before {
     left: -0.25rem;
   }
 
-  :host([part~='overflow'])::after {
+  :host([slot='overflow'])::after {
     left: -0.5rem;
   }
 
-  :host([part~='overflow-two']) {
+  :host([count='2']) {
     margin-inline-start: 0.25rem;
   }
 
-  :host([part~='overflow-two'])::after {
+  :host([count='2'])::after {
     display: none;
   }
 
-  :host([part~='overflow-one']) {
+  :host([count='1']) {
     margin-inline-start: 0;
   }
 
-  :host([part~='overflow-one'])::before,
-  :host([part~='overflow-one'])::after {
+  :host([count='1'])::before,
+  :host([count='1'])::after {
     display: none;
   }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';
@@ -29,6 +29,16 @@ const multiSelectComboBox = css`
     caret-color: var(--material-body-text-color) !important;
   }
 
+  /* Override input-container styles */
+  ::slotted([slot='chip']),
+  ::slotted([slot='overflow']) {
+    padding: 0 0.5rem;
+  }
+
+  ::slotted([slot='chip']:not([readonly]):not([disabled])) {
+    padding-inline-end: 0;
+  }
+
   [part='input-field'] {
     height: auto;
     min-height: 32px;

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/combo-box/theme/material/vaadin-combo-box-item-styles.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "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 chips for selected items\n`chip`                 | Chip shown for every selected item\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`overflow`             | The chip shown when component width is not enough to fit all chips\n`overflow-one`         | Set on the overflow chip when only one chip does not fit\n`overflow-two`         | Set on the overflow chip when two chips do not fit\n`toggle-button`        | The toggle button\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-overlay>` - has the same API as `<vaadin-overlay>`.\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n- `<vaadin-multi-select-combo-box-container>` - has the same API as `<vaadin-input-container>`.\n\nNote: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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`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\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-overlay>` - has the same API as `<vaadin-overlay>`.\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n- `<vaadin-multi-select-combo-box-container>` - has the same API as `<vaadin-input-container>`.\n\nNote: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",
@@ -230,6 +230,17 @@
                 ]
               }
             },
+            {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "opened",
               "description": "True if the dropdown is open, false otherwise.",
@@ -528,6 +539,17 @@
                   ]
                 }
               },
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "selectedItems",
                 "description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "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 chips for selected items\n`chip`                 | Chip shown for every selected item\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`overflow`             | The chip shown when component width is not enough to fit all chips\n`overflow-one`         | Set on the overflow chip when only one chip does not fit\n`overflow-two`         | Set on the overflow chip when two chips do not fit\n`toggle-button`        | The toggle button\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-overlay>` - has the same API as `<vaadin-overlay>`.\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n- `<vaadin-multi-select-combo-box-container>` - has the same API as `<vaadin-input-container>`.\n\nNote: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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`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\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-overlay>` - has the same API as `<vaadin-overlay>`.\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n- `<vaadin-multi-select-combo-box-container>` - has the same API as `<vaadin-input-container>`.\n\nNote: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -180,6 +180,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".selectedItems",
               "description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",