@vaadin/multi-select-combo-box 23.1.0-alpha4 → 23.1.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.1.0-alpha4",
+  "version": "23.1.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,18 +33,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "23.1.0-alpha4",
-    "@vaadin/component-base": "23.1.0-alpha4",
-    "@vaadin/field-base": "23.1.0-alpha4",
-    "@vaadin/input-container": "23.1.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
+    "@vaadin/combo-box": "23.1.0-beta3",
+    "@vaadin/component-base": "23.1.0-beta3",
+    "@vaadin/field-base": "23.1.0-beta3",
+    "@vaadin/input-container": "23.1.0-beta3",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta3",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
+  "gitHead": "c787ceb8a312f88631c6d429ff320d5f89b1b838"
 }

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

@@ -30,6 +30,16 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
 
   static get properties() {
     return {
+      disabled: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
+      readonly: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
       label: {
         type: String,
       },
@@ -49,7 +59,6 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
           align-self: center;
           white-space: nowrap;
           box-sizing: border-box;
-          min-width: 0;
         }
 
         [part='label'] {
@@ -57,7 +66,7 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
           text-overflow: ellipsis;
         }
 
-        :host([part~='overflow']) [part='remove-button'] {
+        :host(:is([readonly], [disabled], [part~='overflow'])) [part='remove-button'] {
           display: none !important;
         }
       </style>

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

@@ -9,10 +9,9 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-multi-select-combo-box-container',
   css`
-    .wrapper {
+    #wrapper {
       display: flex;
       width: 100%;
-      min-width: 0;
     }
   `,
   {
@@ -40,7 +39,7 @@ class MultiSelectComboBoxContainer extends InputContainer {
       const slots = content.querySelectorAll('slot');
 
       const wrapper = document.createElement('div');
-      wrapper.setAttribute('class', 'wrapper');
+      wrapper.setAttribute('id', 'wrapper');
       content.insertBefore(wrapper, slots[2]);
 
       wrapper.appendChild(slots[0]);

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

@@ -179,6 +179,10 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
    * @override
    */
   _onFocusout(event) {
+    // Disable combo-box logic that updates selectedItem
+    // based on the overlay focused index on input blur
+    this._ignoreCommitValue = true;
+
     super._onFocusout(event);
 
     if (this.readonly && !this._closeOnBlurIsPrevented) {
@@ -186,6 +190,26 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     }
   }
 
+  /**
+   * Override method inherited from the combo-box
+   * to not commit an already selected item again
+   * on blur, which would result in un-selecting.
+   * @protected
+   * @override
+   */
+  _detectAndDispatchChange() {
+    if (this._ignoreCommitValue) {
+      this._ignoreCommitValue = false;
+
+      // Reset internal combo-box state
+      this.selectedItem = null;
+      this._inputElementValue = '';
+      return;
+    }
+
+    super._detectAndDispatchChange();
+  }
+
   /**
    * @param {CustomEvent} event
    * @protected

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

@@ -17,6 +17,19 @@ class MultiSelectComboBoxScroller extends ComboBoxScroller {
     return 'vaadin-multi-select-combo-box-scroller';
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('aria-multiselectable', 'true');
+  }
+
+  /** @private */
+  __getAriaSelected(_focusedIndex, itemIndex) {
+    const item = this.items[itemIndex];
+    return this.__isItemSelected(item, null, this.itemIdPath).toString();
+  }
+
   /** @private */
   __isItemSelected(item, _selectedItem, itemIdPath) {
     if (item instanceof ComboBoxPlaceholder) {

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

@@ -20,6 +20,14 @@ import { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
 import { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+export interface MultiSelectComboBoxI18n {
+  cleared: string;
+  focused: string;
+  selected: string;
+  deselected: string;
+  total: string;
+}
+
 /**
  * Fired when the user commits a value change.
  */
@@ -30,7 +38,7 @@ export type MultiSelectComboBoxChangeEvent<TItem> = Event & {
 /**
  * Fired when the user sets a custom value.
  */
-export type MultiSelectComboBoxCustomValuesSetEvent = CustomEvent<string>;
+export type MultiSelectComboBoxCustomValueSetEvent = CustomEvent<string>;
 
 /**
  * Fired when the `filter` property changes.
@@ -50,7 +58,7 @@ export type MultiSelectComboBoxSelectedItemsChangedEvent<TItem> = CustomEvent<{
 export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap {
   change: MultiSelectComboBoxChangeEvent<TItem>;
 
-  'custom-values-set': MultiSelectComboBoxCustomValuesSetEvent;
+  'custom-value-set': MultiSelectComboBoxCustomValueSetEvent;
 
   'filter-changed': MultiSelectComboBoxFilterChangedEvent;
 
@@ -79,6 +87,7 @@ 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
  * `label`                | The label element
  * `input-field`          | The element that wraps prefix, value and suffix
@@ -112,7 +121,6 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * -----------------------------------------------------|----------------------------|--------
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
- * `--vaadin-multi-select-combo-box-chip-min-width`     | Min width of the chip      | `60px`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *
  * ### Internal components
@@ -130,7 +138,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} custom-values-set - Fired when the user sets a custom value.
+ * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
  * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
@@ -138,9 +146,9 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
 declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
   /**
    * When true, the user can input a value that is not present in the items list.
-   * @attr {boolean} allow-custom-values
+   * @attr {boolean} allow-custom-value
    */
-  allowCustomValues: boolean;
+  allowCustomValue: boolean;
 
   /**
    * Set true to prevent the overlay from opening automatically.
@@ -199,6 +207,30 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   itemValuePath: 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 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',
+   * }
+   * ```
+   */
+  i18n: MultiSelectComboBoxI18n;
+
   /**
    * True if the dropdown is open, false otherwise.
    */
@@ -210,6 +242,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   pageSize: number;
 
+  /**
+   * A hint to the user of what can be entered in the control.
+   * The placeholder will be only displayed in the case when
+   * there is no item selected.
+   */
+  placeholder: string;
+
   /**
    * Custom function for rendering the content of every item.
    * Receives three arguments:

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

@@ -7,6 +7,7 @@ import './vaadin-multi-select-combo-box-chip.js';
 import './vaadin-multi-select-combo-box-container.js';
 import './vaadin-multi-select-combo-box-internal.js';
 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 { processTemplates } from '@vaadin/component-base/src/templates.js';
@@ -18,7 +19,6 @@ import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixi
 
 const multiSelectComboBox = css`
   :host {
-    --chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 4em);
     --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
   }
 
@@ -26,6 +26,11 @@ const multiSelectComboBox = css`
     display: none !important;
   }
 
+  #chips {
+    display: flex;
+    align-items: center;
+  }
+
   :host([has-value]) ::slotted(input:placeholder-shown) {
     color: transparent !important;
   }
@@ -37,11 +42,12 @@ const multiSelectComboBox = css`
 
   [part='chip'] {
     flex: 0 1 auto;
-    min-width: var(--chip-min-width);
   }
 
-  :host([readonly]) [part~='chip'] {
-    pointer-events: none;
+  :host(:is([readonly], [disabled])) ::slotted(input) {
+    flex-grow: 0;
+    flex-basis: 0;
+    padding: 0;
   }
 `;
 
@@ -69,6 +75,7 @@ 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
  * `label`                | The label element
  * `input-field`          | The element that wraps prefix, value and suffix
@@ -102,7 +109,6 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * -----------------------------------------------------|----------------------------|--------
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
- * `--vaadin-multi-select-combo-box-chip-min-width`     | Min width of the chip      | `60px`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *
  * ### Internal components
@@ -120,7 +126,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} custom-values-set - Fired when the user sets a custom value.
+ * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
  * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
@@ -153,7 +159,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           disabled="[[disabled]]"
           readonly="[[readonly]]"
           auto-open-disabled="[[autoOpenDisabled]]"
-          allow-custom-value="[[allowCustomValues]]"
+          allow-custom-value="[[allowCustomValue]]"
           data-provider="[[dataProvider]]"
           filter="{{filter}}"
           filtered-items="[[filteredItems]]"
@@ -172,14 +178,17 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
             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="input"></slot>
             <div id="clearButton" part="clear-button" slot="suffix"></div>
             <div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix"></div>
@@ -249,6 +258,43 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         type: 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 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 present, it specifies that the field is read-only.
        */
@@ -308,13 +354,24 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
       /**
        * When true, the user can input a value that is not present in the items list.
-       * @attr {boolean} allow-custom-values
+       * @attr {boolean} allow-custom-value
        */
-      allowCustomValues: {
+      allowCustomValue: {
         type: Boolean,
         value: false,
       },
 
+      /**
+       * A hint to the user of what can be entered in the control.
+       * The placeholder will be only displayed in the case when
+       * there is no item selected.
+       */
+      placeholder: {
+        type: String,
+        value: '',
+        observer: '_placeholderChanged',
+      },
+
       /**
        * Custom function for rendering the content of every item.
        * Receives three arguments:
@@ -355,6 +412,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         type: Array,
         value: () => [],
       },
+
+      /** @private */
+      _focusedChipIndex: {
+        type: Number,
+        value: -1,
+        observer: '_focusedChipIndexChanged',
+      },
     };
   }
 
@@ -401,7 +465,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
    * @return {boolean}
    */
   checkValidity() {
-    return this.required ? this._hasValue : true;
+    return this.required && !this.readonly ? this._hasValue : true;
   }
 
   /**
@@ -413,9 +477,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     super._disabledChanged(disabled, oldDisabled);
 
     if (disabled || oldDisabled) {
-      this._chips.forEach((chip) => {
-        chip.toggleAttribute('disabled', disabled);
-      });
+      this.__updateChips();
     }
   }
 
@@ -441,6 +503,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     super._setFocused(focused);
 
     if (!focused) {
+      this._focusedChipIndex = -1;
       this.validate();
     }
   }
@@ -464,6 +527,26 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this.__updateChips();
   }
 
+  /**
+   * Override method from `DelegateStateMixin` to set required state
+   * using `aria-required` attribute instead of `required`, in order
+   * to prevent screen readers from announcing "invalid entry".
+   * @protected
+   * @override
+   */
+  _delegateAttribute(name, value) {
+    if (!this.stateTarget) {
+      return;
+    }
+
+    if (name === 'required') {
+      this._delegateAttribute('aria-required', value ? 'true' : false);
+      return;
+    }
+
+    super._delegateAttribute(name, value);
+  }
+
   /**
    * Setting clear button visible reduces total space available
    * for rendering chips, and making it hidden increases it.
@@ -480,18 +563,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     if (readonly) {
       this.__savedItems = this.$.comboBox._getOverlayItems();
       this.$.comboBox._setOverlayItems(Array.from(this.selectedItems));
-
-      // Update chips to hide remove button
-      this._chips.forEach((chip) => {
-        chip.setAttribute('readonly', '');
-      });
+      this.__updateChips();
     } else if (oldReadonly) {
       this.$.comboBox._setOverlayItems(this.__savedItems);
       this.__savedItems = null;
-
-      this._chips.forEach((chip) => {
-        chip.removeAttribute('readonly');
-      });
+      this.__updateChips();
     }
   }
 
@@ -505,12 +581,35 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this.$.comboBox.pageSize = this.pageSize;
   }
 
+  /** @private */
+  _placeholderChanged(placeholder) {
+    const tmpPlaceholder = this.__tmpA11yPlaceholder;
+    // Do not store temporary placeholder
+    if (tmpPlaceholder !== placeholder) {
+      this.__savedPlaceholder = placeholder;
+
+      if (tmpPlaceholder) {
+        this.placeholder = tmpPlaceholder;
+      }
+    }
+  }
+
   /** @private */
   _selectedItemsChanged(selectedItems) {
     this._hasValue = Boolean(selectedItems && selectedItems.length);
 
     this._toggleHasValue();
 
+    // Use placeholder for announcing items
+    if (this._hasValue) {
+      const tmpPlaceholder = selectedItems.map((item) => this._getItemLabel(item, this.itemLabelPath)).join(', ');
+      this.__tmpA11yPlaceholder = tmpPlaceholder;
+      this.placeholder = tmpPlaceholder;
+    } else {
+      delete this.__tmpA11yPlaceholder;
+      this.placeholder = this.__savedPlaceholder;
+    }
+
     // Re-render chips
     this.__updateChips();
 
@@ -580,11 +679,19 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this.$.comboBox.clear();
   }
 
+  /** @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}`);
+  }
+
   /** @private */
   __removeItem(item) {
     const itemsCopy = [...this.selectedItems];
     itemsCopy.splice(itemsCopy.indexOf(item), 1);
     this.__updateSelection(itemsCopy);
+    this.__announceItem(item, false, itemsCopy.length);
   }
 
   /** @private */
@@ -592,9 +699,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     const itemsCopy = [...this.selectedItems];
 
     const index = this._findIndex(item, itemsCopy, this.itemIdPath);
+    const itemLabel = this._getItemLabel(item, this.itemLabelPath);
+
+    let isSelected = false;
+
     if (index !== -1) {
       // Do not unselect when manually typing and committing an already selected item.
-      if (this.filter.toLowerCase() === this._getItemLabel(item, this.itemLabelPath).toLowerCase()) {
+      if (this.filter.toLowerCase() === itemLabel.toLowerCase()) {
         this.__clearFilter();
         return;
       }
@@ -602,12 +713,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       itemsCopy.splice(index, 1);
     } else {
       itemsCopy.push(item);
+      isSelected = true;
     }
 
     this.__updateSelection(itemsCopy);
 
     // Suppress `value-changed` event.
     this.__clearFilter();
+
+    this.__announceItem(itemLabel, isSelected, itemsCopy.length);
   }
 
   /** @private */
@@ -626,8 +740,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     chip.setAttribute('slot', 'prefix');
 
     chip.item = item;
-    chip.toggleAttribute('disabled', this.disabled);
-    chip.toggleAttribute('readonly', this.readonly);
+    chip.disabled = this.disabled;
+    chip.readonly = this.readonly;
 
     const label = this._getItemLabel(item, this.itemLabelPath);
     chip.label = label;
@@ -640,18 +754,21 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   }
 
   /** @private */
-  __getMinWidth(chip) {
+  __getOverflowWidth() {
+    const chip = this.$.overflow;
+
     chip.style.visibility = 'hidden';
-    chip.style.display = 'block';
-    chip.style.minWidth = 'var(--chip-min-width)';
+    chip.removeAttribute('hidden');
 
-    const result = parseInt(getComputedStyle(chip).minWidth);
+    // Detect max possible width of the overflow chip
+    chip.setAttribute('part', 'chip overflow');
+    const overflowStyle = getComputedStyle(chip);
+    const overflowWidth = chip.clientWidth + parseInt(overflowStyle.marginInlineStart);
 
-    chip.style.minWidth = '';
-    chip.style.display = '';
+    chip.setAttribute('hidden', '');
     chip.style.visibility = '';
 
-    return result;
+    return overflowWidth;
   }
 
   /** @private */
@@ -661,46 +778,36 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
 
     // Clear all chips except the overflow
-    const chips = Array.from(this._chips).reverse();
-    const overflow = chips.pop();
-
-    chips.forEach((chip) => {
-      chip.remove();
+    Array.from(this._chips).forEach((chip) => {
+      if (chip !== this.$.overflow) {
+        chip.remove();
+      }
     });
 
     const items = [...this.selectedItems];
 
-    let refNode = overflow.nextElementSibling;
-
-    // Use overflow chip to measure min-width
-    const chipMinWidth = this.__getMinWidth(overflow);
-    const inputMinWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
-    const containerStyle = getComputedStyle(this._inputField);
+    // Detect available remaining width for chips
+    const totalWidth = this._inputField.$.wrapper.clientWidth;
+    const inputWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
 
-    // Detect available width for chips
-    let totalWidth =
-      parseInt(containerStyle.width) -
-      parseInt(containerStyle.paddingLeft) -
-      parseInt(containerStyle.paddingRight) -
-      this.$.toggleButton.clientWidth -
-      inputMinWidth;
+    let remainingWidth = totalWidth - inputWidth;
 
-    if (this.clearButtonVisible) {
-      totalWidth -= this.$.clearButton.clientWidth;
+    if (items.length > 1) {
+      remainingWidth -= this.__getOverflowWidth();
     }
 
-    for (let i = items.length - 1; i >= 0; i--) {
-      // Ensure there is enough space for another chip
-      if (totalWidth < chipMinWidth) {
+    // 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);
+
+      if (this.$.chips.clientWidth > remainingWidth) {
+        chip.remove();
         break;
       }
 
-      const item = items.pop();
-      const chip = this.__createChip(item);
-      this._inputField.insertBefore(chip, refNode);
-
+      items.pop();
       refNode = chip;
-      totalWidth -= chipMinWidth;
     }
 
     this._overflowItems = items;
@@ -715,6 +822,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     event.stopPropagation();
 
     this.__updateSelection([]);
+
+    announce(this.i18n.cleared);
   }
 
   /**
@@ -725,8 +834,121 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
    */
   _onKeyDown(event) {
     const items = this.selectedItems || [];
-    if (!this.readonly && event.key === 'Backspace' && items.length && this.inputElement.value === '') {
-      this.__removeItem(items[items.length - 1]);
+
+    if (event.key === 'Escape' && this.clearButtonVisible && items.length) {
+      this.selectedItems = [];
+      return;
+    }
+
+    const chips = Array.from(this._chips).slice(1);
+
+    if (!this.readonly && chips.length > 0) {
+      switch (event.key) {
+        case 'Backspace':
+          this._onBackSpace(chips);
+          break;
+        case 'ArrowLeft':
+          this._onArrowLeft(chips);
+          break;
+        case 'ArrowRight':
+          this._onArrowRight(chips);
+          break;
+        default:
+          this._focusedChipIndex = -1;
+          break;
+      }
+    }
+  }
+
+  /** @private */
+  _onArrowLeft(chips) {
+    if (this.inputElement.value !== '' || this.opened) {
+      return;
+    }
+
+    const idx = this._focusedChipIndex;
+    let newIdx;
+
+    if (this.getAttribute('dir') !== 'rtl') {
+      if (idx === -1) {
+        // Focus last chip
+        newIdx = chips.length - 1;
+      } else if (idx > 0) {
+        // Focus prev chip
+        newIdx = idx - 1;
+      }
+    } else if (idx === chips.length - 1) {
+      // Blur last chip
+      newIdx = -1;
+    } else if (idx > -1) {
+      // Focus next chip
+      newIdx = idx + 1;
+    }
+
+    if (newIdx !== undefined) {
+      this._focusedChipIndex = newIdx;
+    }
+  }
+
+  /** @private */
+  _onArrowRight(chips) {
+    if (this.inputElement.value !== '' || this.opened) {
+      return;
+    }
+
+    const idx = this._focusedChipIndex;
+    let newIdx;
+
+    if (this.getAttribute('dir') === 'rtl') {
+      if (idx === -1) {
+        // Focus last chip
+        newIdx = chips.length - 1;
+      } else if (idx > 0) {
+        // Focus prev chip
+        newIdx = idx - 1;
+      }
+    } else if (idx === chips.length - 1) {
+      // Blur last chip
+      newIdx = -1;
+    } else if (idx > -1) {
+      // Focus next chip
+      newIdx = idx + 1;
+    }
+
+    if (newIdx !== undefined) {
+      this._focusedChipIndex = newIdx;
+    }
+  }
+
+  /** @private */
+  _onBackSpace(chips) {
+    if (this.inputElement.value !== '' || this.opened) {
+      return;
+    }
+
+    const idx = this._focusedChipIndex;
+    if (idx === -1) {
+      this._focusedChipIndex = chips.length - 1;
+    } else {
+      this.__removeItem(chips[idx].item);
+      this._focusedChipIndex = -1;
+    }
+  }
+
+  /** @private */
+  _focusedChipIndexChanged(focusedIndex, oldFocusedIndex) {
+    if (focusedIndex > -1 || oldFocusedIndex > -1) {
+      const chips = Array.from(this._chips).slice(1);
+      chips.forEach((chip, index) => {
+        chip.toggleAttribute('focused', index === focusedIndex);
+      });
+
+      // Announce focused chip
+      if (focusedIndex > -1) {
+        const item = chips[focusedIndex].item;
+        const itemLabel = this._getItemLabel(item, this.itemLabelPath);
+        announce(`${itemLabel} ${this.i18n.focused}`);
+      }
     }
   }
 
@@ -748,10 +970,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     // Do not set combo-box value
     event.preventDefault();
 
+    // Stop the original event
+    event.stopPropagation();
+
     this.__clearFilter();
 
     this.dispatchEvent(
-      new CustomEvent('custom-values-set', {
+      new CustomEvent('custom-value-set', {
         detail: event.detail,
         composed: true,
         bubbles: true,

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

@@ -22,6 +22,15 @@ const chip = css`
     cursor: var(--lumo-clickable-cursor);
   }
 
+  :host([focused]) {
+    background-color: var(--lumo-primary-color);
+    color: var(--lumo-primary-contrast-color);
+  }
+
+  :host([focused]) [part='remove-button'] {
+    color: inherit;
+  }
+
   :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
     padding-inline-end: 0;
   }
@@ -36,19 +45,19 @@ const chip = css`
   :host([part~='overflow'])::after {
     position: absolute;
     content: '';
-    width: 3px;
-    height: calc(1.875em - 1px);
-    border-left: 2px solid;
-    border-radius: 4px 0 0 4px;
+    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([part~='overflow'])::before {
-    left: -4px;
+    left: calc(-1 * var(--lumo-space-s) / 2);
   }
 
   :host([part~='overflow'])::after {
-    left: -8px;
+    left: calc(-1 * var(--lumo-space-s));
   }
 
   :host([part~='overflow-two']) {
@@ -79,9 +88,11 @@ const chip = css`
     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 {
@@ -93,11 +104,6 @@ const chip = css`
     -webkit-text-fill-color: var(--lumo-disabled-text-color);
     pointer-events: none;
   }
-
-  :host([readonly]) [part='remove-button'],
-  :host([disabled]) [part='remove-button'] {
-    display: none;
-  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {

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

@@ -30,14 +30,18 @@ const multiSelectComboBox = css`
     padding-inline-start: 0;
   }
 
-  :host([readonly]) [part~='chip'] {
-    opacity: 0.7;
+  :host([has-value]) ::slotted(input:placeholder-shown) {
+    caret-color: var(--lumo-body-text-color) !important;
   }
 
   [part~='chip']:not(:last-of-type) {
     margin-inline-end: var(--lumo-space-xs);
   }
 
+  [part~='overflow']:not([hidden]) + :not(:empty) {
+    margin-inline-start: var(--lumo-space-xs);
+  }
+
   [part='toggle-button']::before {
     content: var(--lumo-icons-dropdown);
   }

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

@@ -15,11 +15,15 @@ const chip = css`
     margin-inline-end: 0.25rem;
     padding: 0 0.5rem;
     border-radius: 4px;
-    background-color: hsla(214, 53%, 23%, 0.1);
+    background-color: rgba(0, 0, 0, 0.08);
     cursor: default;
     font-family: var(--material-font-family);
   }
 
+  :host([focused]) {
+    background-color: rgba(0, 0, 0, 0.16);
+  }
+
   :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
     padding-inline-end: 0;
   }
@@ -33,19 +37,19 @@ const chip = css`
   :host([part~='overflow'])::after {
     position: absolute;
     content: '';
-    width: 3px;
-    height: 20px;
-    border-left: 2px solid;
-    border-radius: 4px 0 0 4px;
-    border-color: hsla(214, 53%, 23%, 0.1);
+    width: 100%;
+    height: 100%;
+    border-left: 0.125rem solid;
+    border-radius: 0.25rem;
+    border-color: rgba(0, 0, 0, 0.08);
   }
 
   :host([part~='overflow'])::before {
-    left: -4px;
+    left: -0.25rem;
   }
 
   :host([part~='overflow'])::after {
-    left: -8px;
+    left: -0.5rem;
   }
 
   :host([part~='overflow-two']) {
@@ -79,6 +83,7 @@ const chip = css`
     box-sizing: border-box;
     width: 20px;
     height: 20px;
+    margin-inline-start: auto;
     line-height: 20px;
     padding: 0;
     font-size: 0.75em;
@@ -93,11 +98,6 @@ const chip = css`
     -webkit-text-fill-color: var(--material-disabled-text-color);
     pointer-events: none;
   }
-
-  :host([readonly]) [part='remove-button'],
-  :host([disabled]) [part='remove-button'] {
-    display: none;
-  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {

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

@@ -25,8 +25,8 @@ registerStyles(
 );
 
 const multiSelectComboBox = css`
-  :host([readonly]) [part~='chip'] {
-    opacity: 0.5;
+  :host([has-value]) ::slotted(input:placeholder-shown) {
+    caret-color: var(--material-body-text-color) !important;
   }
 
   [part='input-field'] {