@vaadin/multi-select-combo-box 25.4.0-alpha1 → 25.4.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.4.0-alpha1",
+  "version": "25.4.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -37,23 +37,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.4.0-alpha1",
-    "@vaadin/combo-box": "25.4.0-alpha1",
-    "@vaadin/component-base": "25.4.0-alpha1",
-    "@vaadin/field-base": "25.4.0-alpha1",
-    "@vaadin/input-container": "25.4.0-alpha1",
-    "@vaadin/item": "25.4.0-alpha1",
-    "@vaadin/lit-renderer": "25.4.0-alpha1",
-    "@vaadin/overlay": "25.4.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.4.0-alpha1",
+    "@vaadin/a11y-base": "25.4.0-alpha3",
+    "@vaadin/combo-box": "25.4.0-alpha3",
+    "@vaadin/component-base": "25.4.0-alpha3",
+    "@vaadin/field-base": "25.4.0-alpha3",
+    "@vaadin/input-container": "25.4.0-alpha3",
+    "@vaadin/item": "25.4.0-alpha3",
+    "@vaadin/lit-renderer": "25.4.0-alpha3",
+    "@vaadin/overlay": "25.4.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "25.4.0-alpha3",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.4.0-alpha1",
-    "@vaadin/chai-plugins": "25.4.0-alpha1",
-    "@vaadin/test-runner-commands": "25.4.0-alpha1",
+    "@vaadin/aura": "25.4.0-alpha3",
+    "@vaadin/chai-plugins": "25.4.0-alpha3",
+    "@vaadin/test-runner-commands": "25.4.0-alpha3",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.4.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.4.0-alpha3",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -61,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "be38ec1866e96508f3f4591f95c949ef55903a34"
+  "gitHead": "db7e679c1a8af00840cc05ddcbefff68dfed1e45"
 }

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

@@ -12,6 +12,8 @@ export const multiSelectComboBoxStyles = [
   css`
     :host {
       max-width: 100%;
+      /* Content stays at the top, keep the default guide height */
+      --_field-input-height: var(--_field-input-default-height);
       --_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, 48px);
       --_wrapper-gap: var(--vaadin-multi-select-combo-box-chips-gap, 2px);
@@ -35,13 +37,13 @@ export const multiSelectComboBoxStyles = [
       flex: 1 0 var(--_input-min-width);
     }
 
-    ::slotted([slot='chip']),
-    ::slotted([slot='overflow']) {
+    ::slotted([slot='chip']) {
       flex: 0 1 auto;
+      overflow: hidden;
     }
 
-    ::slotted([slot='chip']) {
-      overflow: hidden;
+    ::slotted([slot='overflow']) {
+      flex: none;
     }
 
     :host(:is([readonly], [disabled])) ::slotted(input) {

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

@@ -52,6 +52,10 @@ export const multiSelectComboBoxChipStyles = css`
     translate: 25%;
   }
 
+  :host(:dir(rtl)) [part='remove-button'] {
+    translate: -25%;
+  }
+
   [part='remove-button']::before {
     content: '';
     display: block;
@@ -62,11 +66,8 @@ export const multiSelectComboBoxChipStyles = css`
   }
 
   :host([disabled]) {
-    cursor: var(--vaadin-disabled-cursor);
-  }
-
-  :host([disabled]) [part='label'] {
     --vaadin-chip-text-color: var(--vaadin-text-color-disabled);
+    cursor: var(--vaadin-disabled-cursor);
   }
 
   :host([hidden]),
@@ -90,11 +91,11 @@ export const multiSelectComboBoxChipStyles = css`
   }
 
   :host([slot='overflow'])::before {
-    left: calc(-4px - var(--vaadin-chip-border-width, 1px));
+    inset-inline-start: calc(-4px - var(--vaadin-chip-border-width, 1px));
   }
 
   :host([slot='overflow'])::after {
-    left: calc(-8px - var(--vaadin-chip-border-width, 1px));
+    inset-inline-start: calc(-8px - var(--vaadin-chip-border-width, 1px));
   }
 
   :host([count='2']) {

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

@@ -860,27 +860,49 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       return chip;
     }
 
+    /**
+     * Returns the width of the element with its fraction, unlike `clientWidth`.
+     * The chips do not shrink below their `max-width`, so a rounding error moves the input out.
+     * @private
+     */
+    __getUsedWidth(element) {
+      return parseFloat(getComputedStyle(element).width);
+    }
+
     /** @private */
-    __getWrapperWidth() {
-      return this._inputField.$.wrapper.clientWidth;
+    __getWrapperGap() {
+      // The gap computes to `normal` when not set, which is 0 in a flex container
+      return parseFloat(getComputedStyle(this._inputField.$.wrapper).columnGap) || 0;
     }
 
     /** @private */
-    __getOverflowWidth() {
+    __getWrapperWidth() {
+      // Exclude the gap between the chips and the input
+      return this.__getUsedWidth(this._inputField.$.wrapper) - this.__getWrapperGap();
+    }
+
+    /**
+     * Returns the width that the overflow chip with the given count takes,
+     * including its margins and the gap between it and the chips.
+     * @private
+     */
+    __getOverflowWidth(count) {
       const chip = this._overflow;
 
+      // The `_overflowItems` observer sets the final label and count afterwards
       chip.style.visibility = 'hidden';
       chip.removeAttribute('hidden');
+      chip.label = `${count}`;
+      chip.setAttribute('count', `${count}`);
 
-      const count = chip.getAttribute('count');
+      // The chip uses `box-sizing: border-box`, so its width includes padding and border
+      const { marginInlineStart, marginInlineEnd } = getComputedStyle(chip);
+      const overflowWidth =
+        this.__getUsedWidth(chip) +
+        parseFloat(marginInlineStart) +
+        parseFloat(marginInlineEnd) +
+        this.__getWrapperGap();
 
-      // Detect max possible width of the overflow chip
-      // 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 = '';
 
@@ -912,7 +934,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         return;
       }
 
-      const inputWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
+      const inputWidth = parseFloat(getComputedStyle(this.inputElement).flexBasis);
 
       if (this.collapseChips) {
         this._overflowItems = this.__updateChipsCollapsed(this.selectedItems, inputWidth);
@@ -931,7 +953,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         return chip;
       });
 
-      const allChipsFit = this.__getWrapperWidth() - this.$.chips.clientWidth >= inputWidth;
+      const allChipsFit = this.__getWrapperWidth() - this.__getUsedWidth(this.$.chips) >= inputWidth;
       return { chips, allChipsFit };
     }
 
@@ -958,21 +980,28 @@ export const MultiSelectComboBoxMixin = (superClass) =>
 
       // Remove chips from the end until there is enough width for the input element to fit,
       // keeping at least one chip visible
-      const overflowWidth = this.__getOverflowWidth();
+      const wrapperWidth = this.__getWrapperWidth();
+      // Start from the width for the largest count, and measure the exact count only
+      // when the chips would fit with the estimate, as the label width varies per count
+      let overflowWidth = this.__getOverflowWidth(items.length - 1);
       let visibleCount = chips.length;
 
       while (visibleCount > 1) {
         visibleCount -= 1;
         chips[visibleCount].remove();
 
-        if (this.__getWrapperWidth() - this.$.chips.clientWidth >= inputWidth + overflowWidth) {
-          break;
+        const chipsWidth = this.__getUsedWidth(this.$.chips);
+        if (wrapperWidth - chipsWidth >= inputWidth + overflowWidth) {
+          overflowWidth = this.__getOverflowWidth(items.length - visibleCount);
+          if (wrapperWidth - chipsWidth >= inputWidth + overflowWidth) {
+            break;
+          }
         }
       }
 
       if (visibleCount === 1) {
         const chipMinWidth = parseInt(getComputedStyle(this).getPropertyValue('--_chip-min-width'));
-        const remainingWidth = this.__getWrapperWidth() - inputWidth - overflowWidth;
+        const remainingWidth = wrapperWidth - inputWidth - overflowWidth;
         chips[0].style.maxWidth = `${Math.max(chipMinWidth, remainingWidth)}px`;
       }
 
@@ -981,11 +1010,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
 
     /** @private */
     __updateChipsDefault(items, inputWidth) {
-      let remainingWidth = this.__getWrapperWidth() - inputWidth;
-
-      if (items.length > 1) {
-        remainingWidth -= this.__getOverflowWidth();
-      }
+      const availableWidth = this.__getWrapperWidth() - inputWidth;
 
       const chipMinWidth = parseInt(getComputedStyle(this).getPropertyValue('--_chip-min-width'));
 
@@ -994,7 +1019,12 @@ export const MultiSelectComboBoxMixin = (superClass) =>
         const chip = this.__createChip(items[i]);
         this.insertBefore(chip, refNode);
 
-        if (this.$.chips.clientWidth > remainingWidth) {
+        // Reserve space for the overflow chip with the count of the items that are not
+        // added yet, measured with a chip rendered so that the spacing between them counts
+        const remainingWidth =
+          items.length > 1 ? availableWidth - this.__getOverflowWidth(Math.max(i, 1)) : availableWidth;
+
+        if (this.__getUsedWidth(this.$.chips) > remainingWidth) {
           // If there is no more space for chips, or if there is at least one
           // chip already shown, collapse all remaining chips to the overflow
           if (remainingWidth < chipMinWidth || refNode !== null) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/multi-select-combo-box",
-  "version": "25.4.0-alpha1",
+  "version": "25.4.0-alpha3",
   "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.4.0-alpha1",
+  "version": "25.4.0-alpha3",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {