@vaadin/multi-select-combo-box 23.1.0-alpha2 → 23.1.0-beta1

package/package.json

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

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

@@ -30,18 +30,46 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
 
   static get properties() {
     return {
+      disabled: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
+      readonly: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
       label: {
-        type: String
+        type: String,
       },
 
       item: {
-        type: Object
-      }
+        type: Object,
+      },
     };
   }
 
   static get template() {
     return html`
+      <style>
+        :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(:is([readonly], [disabled], [part~='overflow'])) [part='remove-button'] {
+          display: none !important;
+        }
+      </style>
       <div part="label">[[label]]</div>
       <div part="remove-button" role="button" on-click="_onRemoveClick"></div>
     `;
@@ -54,11 +82,11 @@ class MultiSelectComboBoxChip extends ThemableMixin(PolymerElement) {
     this.dispatchEvent(
       new CustomEvent('item-removed', {
         detail: {
-          item: this.item
+          item: this.item,
         },
         bubbles: true,
-        composed: true
-      })
+        composed: true,
+      }),
     );
   }
 }

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

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

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

@@ -51,8 +51,8 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
   static get properties() {
     return {
       _target: {
-        type: Object
-      }
+        type: Object,
+      },
     };
   }
 
@@ -65,6 +65,17 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     return this.querySelector('[part="clear-button"]');
   }
 
+  /**
+   * Override method inherited from the combo-box
+   * to allow opening dropdown when readonly.
+   * @override
+   */
+  open() {
+    if (!this.disabled && !(this.readonly && this._getOverlayItems().length === 0)) {
+      this.opened = true;
+    }
+  }
+
   /**
    * @protected
    * @override
@@ -81,24 +92,17 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     this._toggleElement = this.querySelector('.toggle-button');
   }
 
-  /** @protected */
-  _isClearButton(event) {
-    return (
-      super._isClearButton(event) ||
-      (event.type === 'input' && !event.isTrusted) || // fake input event dispatched by clear button
-      event.composedPath()[0].getAttribute('part') === 'clear-button'
-    );
-  }
-
   /**
-   * @param {!Event} event
+   * Override method from `InputMixin`.
+   *
    * @protected
+   * @override
    */
-  _onChange(event) {
-    super._onChange(event);
+  clear() {
+    super.clear();
 
-    if (this._isClearButton(event)) {
-      this._clear();
+    if (this.inputElement) {
+      this.inputElement.value = '';
     }
   }
 
@@ -120,6 +124,11 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
    * @override
    */
   _closeOrCommit() {
+    if (this.readonly) {
+      this.close();
+      return;
+    }
+
     if (this.__enterPressed) {
       this.__enterPressed = null;
 
@@ -134,6 +143,49 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     super._closeOrCommit();
   }
 
+  /**
+   * Override method inherited from the combo-box
+   * to not update focused item when readonly.
+   * @protected
+   * @override
+   */
+  _onArrowDown() {
+    if (!this.readonly) {
+      super._onArrowDown();
+    } else if (!this.opened) {
+      this.open();
+    }
+  }
+
+  /**
+   * Override method inherited from the combo-box
+   * to not update focused item when readonly.
+   * @protected
+   * @override
+   */
+  _onArrowUp() {
+    if (!this.readonly) {
+      super._onArrowUp();
+    } else if (!this.opened) {
+      this.open();
+    }
+  }
+
+  /**
+   * Override method inherited from the combo-box
+   * to close dropdown on blur when readonly.
+   * @param {FocusEvent} event
+   * @protected
+   * @override
+   */
+  _onFocusout(event) {
+    super._onFocusout(event);
+
+    if (this.readonly && !this._closeOnBlurIsPrevented) {
+      this.close();
+    }
+  }
+
   /**
    * @param {CustomEvent} event
    * @protected
@@ -142,6 +194,11 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
   _overlaySelectedItemChanged(event) {
     event.stopPropagation();
 
+    // Do not un-select on click when readonly
+    if (this.readonly) {
+      return;
+    }
+
     if (event.detail.item instanceof ComboBoxPlaceholder) {
       return;
     }
@@ -150,9 +207,9 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
       this.dispatchEvent(
         new CustomEvent('combo-box-item-selected', {
           detail: {
-            item: event.detail.item
-          }
-        })
+            item: event.detail.item,
+          },
+        }),
       );
     }
   }

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

@@ -16,7 +16,7 @@ registerStyles(
       );
     }
   `,
-  { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' }
+  { moduleId: 'vaadin-multi-select-combo-box-overlay-styles' },
 );
 
 /**

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

@@ -17,15 +17,39 @@ 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) {
       return false;
     }
 
+    if (this.comboBox.readonly) {
+      return false;
+    }
+
     const host = this.comboBox.getRootNode().host;
     return host._findIndex(item, host.selectedItems, itemIdPath) > -1;
   }
+
+  /** @private */
+  __updateElement(el, index) {
+    super.__updateElement(el, index);
+
+    el.toggleAttribute('readonly', this.comboBox.readonly);
+  }
 }
 
 customElements.define(MultiSelectComboBoxScroller.is, MultiSelectComboBoxScroller);

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

@@ -9,6 +9,7 @@ import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js
 import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
 import { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
@@ -19,6 +20,13 @@ 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;
+  selected: string;
+  deselected: string;
+  total: string;
+}
+
 /**
  * Fired when the user commits a value change.
  */
@@ -78,6 +86,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
@@ -85,6 +94,9 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * `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:
@@ -102,6 +114,14 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * `opened`               | Set when the dropdown is open
  * `readonly`             | Set to a readonly element
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom property                                      | Description                | Default
+ * -----------------------------------------------------|----------------------------|--------
+ * `--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-input-min-width`    | Min width of the input     | `4em`
+ *
  * ### Internal components
  *
  * In addition to `<vaadin-multi-select-combo-box>` itself, the following internal
@@ -186,6 +206,28 @@ 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 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.
    */
@@ -219,13 +261,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
   addEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 
@@ -241,6 +283,7 @@ interface MultiSelectComboBox
     DisabledMixinClass,
     DelegateStateMixinClass,
     DelegateFocusMixinClass,
+    ResizeMixinClass,
     ThemableMixinClass,
     ElementMixinClass,
     ControllerMixinClass {}

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

@@ -7,7 +7,9 @@ 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';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
@@ -16,34 +18,41 @@ import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shar
 import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const multiSelectComboBox = css`
+  :host {
+    --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
+  }
+
   [hidden] {
     display: none !important;
   }
 
-  :host([has-value]) ::slotted(input:placeholder-shown) {
-    color: transparent !important;
+  #chips {
+    display: flex;
+    align-items: center;
   }
 
-  :host([has-value]) [class$='container'] {
-    width: auto;
+  :host([has-value]) ::slotted(input:placeholder-shown) {
+    color: transparent !important;
   }
 
   ::slotted(input) {
     box-sizing: border-box;
-    flex: 1 0 4em;
+    flex: 1 0 var(--input-min-width);
   }
 
-  [part~='chip'] {
+  [part='chip'] {
     flex: 0 1 auto;
   }
 
-  :host([readonly]) [part~='chip'] {
-    pointer-events: none;
+  :host(:is([readonly], [disabled])) ::slotted(input) {
+    flex-grow: 0;
+    flex-basis: 0;
+    padding: 0;
   }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'vaadin-multi-select-combo-box-styles'
+  moduleId: 'vaadin-multi-select-combo-box-styles',
 });
 
 /**
@@ -66,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
@@ -73,6 +83,9 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * `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:
@@ -90,6 +103,14 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * `opened`               | Set when the dropdown is open
  * `readonly`             | Set to a readonly element
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom property                                      | Description                | Default
+ * -----------------------------------------------------|----------------------------|--------
+ * `--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-input-min-width`    | Min width of the input     | `4em`
+ *
  * ### Internal components
  *
  * In addition to `<vaadin-multi-select-combo-box>` itself, the following internal
@@ -114,8 +135,9 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * @mixes ElementMixin
  * @mixes ThemableMixin
  * @mixes InputControlMixin
+ * @mixes ResizeMixin
  */
-class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(PolymerElement))) {
+class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-multi-select-combo-box';
   }
@@ -155,6 +177,18 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
             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="input"></slot>
             <div id="clearButton" part="clear-button" slot="suffix"></div>
             <div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix"></div>
@@ -180,12 +214,23 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
        */
       autoOpenDisabled: Boolean,
 
+      /**
+       * Set to true to display the clear icon which clears the input.
+       * @attr {boolean} clear-button-visible
+       */
+      clearButtonVisible: {
+        type: Boolean,
+        reflectToAttribute: true,
+        observer: '_clearButtonVisibleChanged',
+        value: false,
+      },
+
       /**
        * A full set of items to filter the visible options from.
        * The items can be of either `String` or `Object` type.
        */
       items: {
-        type: Array
+        type: Array,
       },
 
       /**
@@ -193,7 +238,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
        * @attr {string} item-label-path
        */
       itemLabelPath: {
-        type: String
+        type: String,
       },
 
       /**
@@ -202,7 +247,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
        * @attr {string} item-value-path
        */
       itemValuePath: {
-        type: String
+        type: String,
       },
 
       /**
@@ -210,7 +255,51 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
        * @attr {string} item-id-path
        */
       itemIdPath: {
-        type: String
+        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 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',
+            selected: 'added to selection',
+            deselected: 'removed from selection',
+            total: '{count} items selected',
+          };
+        },
+      },
+
+      /**
+       * When present, it specifies that the field is read-only.
+       */
+      readonly: {
+        type: Boolean,
+        value: false,
+        observer: '_readonlyChanged',
+        reflectToAttribute: true,
       },
 
       /**
@@ -220,7 +309,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
       selectedItems: {
         type: Array,
         value: () => [],
-        notify: true
+        notify: true,
       },
 
       /**
@@ -230,7 +319,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
         type: Boolean,
         notify: true,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -240,7 +329,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
       pageSize: {
         type: Number,
         value: 50,
-        observer: '_pageSizeChanged'
+        observer: '_pageSizeChanged',
       },
 
       /**
@@ -257,7 +346,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
        */
       dataProvider: {
         type: Object,
-        observer: '_dataProviderChanged'
+        observer: '_dataProviderChanged',
       },
 
       /**
@@ -266,7 +355,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
        */
       allowCustomValues: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
@@ -288,7 +377,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
       filter: {
         type: String,
         value: '',
-        notify: true
+        notify: true,
       },
 
       /**
@@ -301,8 +390,14 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
       /** @protected */
       _hasValue: {
         type: Boolean,
-        value: false
-      }
+        value: false,
+      },
+
+      /** @private */
+      _overflowItems: {
+        type: Array,
+        value: () => [],
+      },
     };
   }
 
@@ -334,7 +429,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
         this._setFocusElement(input);
         this.stateTarget = input;
         this.ariaTarget = input;
-      })
+      }),
     );
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
 
@@ -349,7 +444,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
    * @return {boolean}
    */
   checkValidity() {
-    return this.required ? this._hasValue : true;
+    return this.required && !this.readonly ? this._hasValue : true;
   }
 
   /**
@@ -361,9 +456,7 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
     super._disabledChanged(disabled, oldDisabled);
 
     if (disabled || oldDisabled) {
-      this._chips.forEach((chip) => {
-        chip.toggleAttribute('disabled', disabled);
-      });
+      this.__updateChips();
     }
   }
 
@@ -403,6 +496,59 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
     super._toggleHasValue(this._hasValue);
   }
 
+  /**
+   * Implement callback from `ResizeMixin` to update chips.
+   * @protected
+   * @override
+   */
+  _onResize() {
+    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.
+   * @private
+   */
+  _clearButtonVisibleChanged(visible, oldVisible) {
+    if (visible || oldVisible) {
+      this.__updateChips();
+    }
+  }
+
+  /** @private */
+  _readonlyChanged(readonly, oldReadonly) {
+    if (readonly) {
+      this.__savedItems = this.$.comboBox._getOverlayItems();
+      this.$.comboBox._setOverlayItems(Array.from(this.selectedItems));
+      this.__updateChips();
+    } else if (oldReadonly) {
+      this.$.comboBox._setOverlayItems(this.__savedItems);
+      this.__savedItems = null;
+      this.__updateChips();
+    }
+  }
+
   /** @private */
   _pageSizeChanged(pageSize, oldPageSize) {
     if (Math.floor(pageSize) !== pageSize || pageSize <= 0) {
@@ -419,9 +565,21 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
 
     this._toggleHasValue();
 
+    // Use placeholder for announcing items
+    if (this._hasValue) {
+      this.__savedPlaceholder = this.placeholder;
+      this.placeholder = selectedItems.map((item) => this._getItemLabel(item, this.itemLabelPath)).join(', ');
+    } else {
+      this.placeholder = this.__savedPlaceholder;
+    }
+
     // Re-render chips
     this.__updateChips();
 
+    if (this.readonly) {
+      this.$.comboBox._setOverlayItems(selectedItems);
+    }
+
     // Re-render scroller
     this.$.comboBox.$.dropdown._scroller.requestContentUpdate();
 
@@ -436,6 +594,34 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
     return item && Object.prototype.hasOwnProperty.call(item, itemLabelPath) ? item[itemLabelPath] : 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 items.map((item) => this._getItemLabel(item, this.itemLabelPath)).join(', ');
+  }
+
+  /** @private */
+  _isOverflowHidden(length) {
+    return length === 0;
+  }
+
   /** @private */
   _findIndex(item, selectedItems, itemIdPath) {
     if (itemIdPath && item) {
@@ -452,14 +638,23 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
 
   /** @private */
   __clearFilter() {
+    this.filter = '';
     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 */
@@ -467,9 +662,13 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
     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;
       }
@@ -477,12 +676,15 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
       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 */
@@ -501,8 +703,12 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
     chip.setAttribute('slot', 'prefix');
 
     chip.item = item;
-    chip.label = this._getItemLabel(item, this.itemLabelPath);
-    chip.toggleAttribute('disabled', this.disabled);
+    chip.disabled = this.disabled;
+    chip.readonly = this.readonly;
+
+    const label = this._getItemLabel(item, this.itemLabelPath);
+    chip.label = label;
+    chip.setAttribute('title', label);
 
     chip.addEventListener('item-removed', (e) => this._onItemRemoved(e));
     chip.addEventListener('mousedown', (e) => this._preventBlur(e));
@@ -510,22 +716,64 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
     return chip;
   }
 
+  /** @private */
+  __getOverflowWidth() {
+    const chip = this.$.overflow;
+
+    chip.style.visibility = 'hidden';
+    chip.removeAttribute('hidden');
+
+    // 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.setAttribute('hidden', '');
+    chip.style.visibility = '';
+
+    return overflowWidth;
+  }
+
   /** @private */
   __updateChips() {
     if (!this._inputField) {
       return;
     }
 
-    this._chips.forEach((chip) => {
-      chip.remove();
+    // Clear all chips except the overflow
+    Array.from(this._chips).forEach((chip) => {
+      if (chip !== this.$.overflow) {
+        chip.remove();
+      }
     });
 
     const items = [...this.selectedItems];
 
-    for (let i = items.length - 1; i >= 0; i--) {
+    // Detect available remaining width for chips
+    const totalWidth = this._inputField.$.wrapper.clientWidth;
+    const inputWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
+
+    let remainingWidth = totalWidth - inputWidth;
+
+    if (items.length > 1) {
+      remainingWidth -= this.__getOverflowWidth();
+    }
+
+    // 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._inputField.insertBefore(chip, this._inputField.firstElementChild);
+      this.$.chips.insertBefore(chip, refNode);
+
+      if (this.$.chips.clientWidth > remainingWidth) {
+        chip.remove();
+        break;
+      }
+
+      items.pop();
+      refNode = chip;
     }
+
+    this._overflowItems = items;
   }
 
   /**
@@ -537,6 +785,8 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
     event.stopPropagation();
 
     this.__updateSelection([]);
+
+    announce(this.i18n.cleared);
   }
 
   /**
@@ -576,8 +826,8 @@ class MultiSelectComboBox extends InputControlMixin(ThemableMixin(ElementMixin(P
       new CustomEvent('custom-values-set', {
         detail: event.detail,
         composed: true,
-        bubbles: true
-      })
+        bubbles: true,
+      }),
     );
   }
 

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

@@ -13,27 +13,63 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 
 const chip = css`
   :host {
-    display: inline-flex;
-    align-items: center;
-    align-self: center;
-    font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-xxs);
     line-height: 1;
-    padding: 0.3125em 0 0.3125em calc(0.5em + var(--lumo-border-radius-s) / 4);
+    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);
-    border-radius: var(--lumo-border-radius);
     background-color: var(--lumo-contrast-20pct);
     cursor: var(--lumo-clickable-cursor);
-    white-space: nowrap;
-    box-sizing: border-box;
-    min-width: 0;
+  }
+
+  :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
+    padding-inline-end: 0;
+  }
+
+  :host([part~='overflow']) {
+    position: relative;
+    min-width: var(--lumo-size-xxs);
+    margin-inline-start: var(--lumo-space-s);
+  }
+
+  :host([part~='overflow'])::before,
+  :host([part~='overflow'])::after {
+    position: absolute;
+    content: '';
+    width: 3px;
+    height: calc(1.875em - 1px);
+    border-left: 2px solid;
+    border-radius: 4px 0 0 4px;
+    border-color: var(--lumo-contrast-30pct);
+  }
+
+  :host([part~='overflow'])::before {
+    left: -4px;
+  }
+
+  :host([part~='overflow'])::after {
+    left: -8px;
+  }
+
+  :host([part~='overflow-two']) {
+    margin-inline-start: calc(var(--lumo-space-s) / 2);
+  }
+
+  :host([part~='overflow-two'])::after {
+    display: none;
+  }
+
+  :host([part~='overflow-one']) {
+    margin-inline-start: 0;
+  }
+
+  :host([part~='overflow-one'])::before,
+  :host([part~='overflow-one'])::after {
+    display: none;
   }
 
   [part='label'] {
-    color: var(--lumo-body-text-color);
     font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
     line-height: 1.25;
   }
 
@@ -43,8 +79,9 @@ const chip = css`
     justify-content: center;
     margin-top: -0.3125em;
     margin-bottom: -0.3125em;
-    width: var(--lumo-icon-size-s);
-    height: var(--lumo-icon-size-s);
+    margin-inline-start: auto;
+    width: 1.25em;
+    height: 1.25em;
     font-size: 1.5em;
   }
 
@@ -52,7 +89,7 @@ const chip = css`
     content: var(--lumo-icons-cross);
   }
 
-  :host([disabled]) [part] {
+  :host([disabled]) [part='label'] {
     color: var(--lumo-disabled-text-color);
     -webkit-text-fill-color: var(--lumo-disabled-text-color);
     pointer-events: none;
@@ -60,5 +97,5 @@ const chip = css`
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {
-  moduleId: 'lumo-multi-select-combo-box-chip'
+  moduleId: 'lumo-multi-select-combo-box-chip',
 });

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

@@ -10,24 +10,44 @@ import '@vaadin/vaadin-lumo-styles/typography.js';
 import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+registerStyles(
+  'vaadin-multi-select-combo-box-item',
+  css`
+    @media (any-hover: hover) {
+      :host(:hover[readonly]) {
+        background-color: transparent;
+        cursor: default;
+      }
+    }
+  `,
+  {
+    moduleId: 'lumo-multi-select-combo-box-item',
+  },
+);
+
 const multiSelectComboBox = css`
   :host([has-value]) {
     padding-inline-start: 0;
   }
 
-  :host([readonly]) [part~='chip'] {
-    opacity: 0.7;
-  }
-
   [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);
   }
+
+  :host([readonly][has-value]) [part='toggle-button'] {
+    color: var(--lumo-contrast-60pct);
+    cursor: var(--lumo-clickable-cursor);
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'lumo-multi-select-combo-box'
+  moduleId: 'lumo-multi-select-combo-box',
 });

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

@@ -11,20 +11,60 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 
 const chip = css`
   :host {
-    display: flex;
-    align-items: center;
-    align-self: center;
-    box-sizing: border-box;
     height: 1.25rem;
     margin-inline-end: 0.25rem;
-    padding-inline-start: 0.5rem;
+    padding: 0 0.5rem;
     border-radius: 4px;
     background-color: hsla(214, 53%, 23%, 0.1);
     cursor: default;
-    white-space: nowrap;
     font-family: var(--material-font-family);
   }
 
+  :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
+    padding-inline-end: 0;
+  }
+
+  :host([part~='overflow']) {
+    position: relative;
+    margin-inline-start: 0.5rem;
+  }
+
+  :host([part~='overflow'])::before,
+  :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);
+  }
+
+  :host([part~='overflow'])::before {
+    left: -4px;
+  }
+
+  :host([part~='overflow'])::after {
+    left: -8px;
+  }
+
+  :host([part~='overflow-two']) {
+    margin-inline-start: 0.25rem;
+  }
+
+  :host([part~='overflow-two'])::after {
+    display: none;
+  }
+
+  :host([part~='overflow-one']) {
+    margin-inline-start: 0;
+  }
+
+  :host([part~='overflow-one'])::before,
+  :host([part~='overflow-one'])::after {
+    display: none;
+  }
+
   [part='label'] {
     font-size: var(--material-caption-font-size);
     line-height: 1;
@@ -39,6 +79,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;
@@ -48,22 +89,13 @@ const chip = css`
     content: var(--material-icons-clear);
   }
 
-  /* Disabled */
-  :host([disabled]) [part] {
-    pointer-events: none;
-  }
-
   :host([disabled]) [part='label'] {
     color: var(--material-disabled-text-color);
     -webkit-text-fill-color: var(--material-disabled-text-color);
-  }
-
-  :host([disabled]) [part='remove-button'] {
-    color: hsla(0, 0%, 100%, 0.75);
-    -webkit-text-fill-color: hsla(0, 0%, 100%, 0.75);
+    pointer-events: none;
   }
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {
-  moduleId: 'material-multi-select-combo-box-chip'
+  moduleId: 'material-multi-select-combo-box-chip',
 });

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

@@ -9,11 +9,22 @@ import '@vaadin/vaadin-material-styles/typography.js';
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-const multiSelectComboBox = css`
-  :host([readonly]) [part~='chip'] {
-    opacity: 0.5;
-  }
+registerStyles(
+  'vaadin-multi-select-combo-box-item',
+  css`
+    @media (any-hover: hover) {
+      :host(:hover[readonly]) {
+        background-color: transparent;
+        cursor: default;
+      }
+    }
+  `,
+  {
+    moduleId: 'material-multi-select-combo-box-item',
+  },
+);
 
+const multiSelectComboBox = css`
   [part='input-field'] {
     height: auto;
     min-height: 32px;
@@ -30,8 +41,12 @@ const multiSelectComboBox = css`
   :host([opened]) [part='toggle-button'] {
     transform: rotate(180deg);
   }
+
+  :host([readonly][has-value]) [part='toggle-button'] {
+    color: var(--material-secondary-text-color);
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'material-multi-select-combo-box'
+  moduleId: 'material-multi-select-combo-box',
 });