@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/MultiComboBox.js

@@ -13,9 +13,10 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isShow, isDown, isUp, isSpace, isSpaceCtrl, isSpaceShift, isRight, isHome, isEnd, isTabNext, isTabPrevious, isUpShift, isDownShift, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isHomeCtrl, isEndCtrl, isCtrlA, isDeleteShift, isInsertShift, isInsertCtrl, isBackSpace, isDelete, isEscape, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isShow, isDown, isUp, isSpace, isSpaceCtrl, isSpaceShift, isRight, isHome, isEnd, isTabNext, isTabPrevious, isUpShift, isDownShift, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isHomeCtrl, isEndCtrl, isCtrlA, isInsertShift, isBackSpace, isDelete, isEscape, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isPhone, isAndroid, isFirefox, } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
@@ -25,13 +26,13 @@ import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
-import MultiComboBoxItem from "./MultiComboBoxItem.js";
+import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import MultiComboBoxItem, { isInstanceOfMultiComboBoxItem } from "./MultiComboBoxItem.js";
 import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
-import GroupHeaderListItem from "./GroupHeaderListItem.js";
-import Tokenizer, { ClipboardDataOperation } from "./Tokenizer.js";
+import ListItemGroupHeader from "./ListItemGroupHeader.js";
+import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
 import Icon from "./Icon.js";
 import Popover from "./Popover.js";
@@ -41,10 +42,9 @@ import StandardListItem from "./StandardListItem.js";
 import ToggleButton from "./ToggleButton.js";
 import * as Filters from "./Filters.js";
 import Button from "./Button.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, MULTICOMBOBOX_DIALOG_OK_BUTTON, VALUE_STATE_ERROR_ALREADY_SELECTED, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, VALUE_STATE_ERROR_ALREADY_SELECTED, MCB_SELECTED_ITEMS, INPUT_CLEAR_ICON_ACC_NAME, FORM_MIXED_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js";
-import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPopoverTemplate.lit.js";
 // Styles
 import multiCbxStyles from "./generated/themes/MultiComboBox.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
@@ -52,80 +52,89 @@ import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 import MultiComboBoxPopover from "./generated/themes/MultiComboBoxPopover.css.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
+import CheckBox from "./CheckBox.js";
+import Input from "./Input.js";
+import "./types/PopoverHorizontalAlign.js";
+import SuggestionItem from "./SuggestionItem.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-multi-combobox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.
+ * The `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.
  *
  * The drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.
  * The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.
- * <h3>Structure</h3>
- * The <code>ui5-multi-combobox</code> consists of the following elements:
- * <ul>
- * <li> Tokenizer - a list of tokens with selected options.</li>
- * <li> Input field - displays the selected option/s as token/s. Users can type to filter the list.</li>
- * <li> Drop-down arrow - expands\collapses the option list.</li>
- * <li> Option list - the list of available options.</li>
- * </ul>
- * <h3>Keyboard Handling</h3>
+ * ### Structure
+ * The `ui5-multi-combobox` consists of the following elements:
  *
- * The <code>ui5-multi-combobox</code> provides advanced keyboard handling.
+ * -  Tokenizer - a list of tokens with selected options.
+ * -  Input field - displays the selected option/s as token/s. Users can type to filter the list.
+ * -  Drop-down arrow - expands\collapses the option list.
+ * -  Option list - the list of available options.
  *
- * <h4>Picker</h4>
- * If the <code>ui5-multi-combobox</code> is focused,
- * you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
- * Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys
- * to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys.
- * <br>
+ * ### Keyboard Handling
  *
- * <h4>Tokens</h4>
- * <ul>
- * <li> Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available). </li>
- * <li> Delete -  deletes the token and focuses the previous token. </li>
- * <li> Backspace -  deletes the token and focus the next token. </li>
- * </ul>
+ * The `ui5-multi-combobox` provides advanced keyboard handling.
  *
- * <h3>CSS Shadow Parts</h3>
+ * #### Picker
+ * If the `ui5-multi-combobox` is focused,
+ * you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.
+ * Once the drop-down is opened, you can use the `UP` and `DOWN` arrow keys
+ * to navigate through the available options and select one by pressing the `Space` or `Enter` keys.
  *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-multi-combobox</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)</li>
- * </ul>
+ * #### Tokens
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/MultiComboBox";</code>
+ * -  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).
+ * -  Delete -  deletes the token and focuses the previous token.
+ * -  Backspace -  deletes the token and focus the next token.
  *
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/MultiComboBox.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.MultiComboBox
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-multi-combobox
+ * @extends UI5Element
  * @public
- * @appenddocs sap.ui.webc.main.MultiComboBoxItem sap.ui.webc.main.MultiComboBoxGroupItem
  * @since 0.11.0
+ * @csspart token-\{index\} - Used to style each token(where `token-0` corresponds to the first item)
  */
 let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
+    get formValidityMessage() {
+        return MultiComboBox_1.i18nBundle.getText(FORM_MIXED_TEXTFIELD_REQUIRED);
+    }
+    get formValidity() {
+        const selectedItems = (this.items || []).filter(item => item.selected);
+        return { valueMissing: this.required && !this.value && !selectedItems.length };
+    }
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        const selectedItems = (this.items || []).filter(item => item.selected);
+        if (selectedItems.length) {
+            const formData = new FormData();
+            formData.append(this.name, this.value);
+            for (let i = 0; i < selectedItems.length; i++) {
+                formData.append(this.name, selectedItems[i].text);
+            }
+            return formData;
+        }
+        return this.value;
+    }
     constructor() {
         super();
         this._filteredItems = [];
+        this.selectedItems = [];
         this._previouslySelectedItems = [];
         this.selectedValues = [];
         this._itemsBeforeOpen = [];
         this._inputLastValue = "";
-        this._valueBeforeOpen = "";
         this._deleting = false;
         this._validationTimeout = null;
         this._handleResizeBound = this._handleResize.bind(this);
         this.valueBeforeAutoComplete = "";
-        this._lastValue = "";
+        this._lastValue = this.getAttribute("value") || "";
         this.currentItemIdx = -1;
-        this.FormSupport = undefined;
     }
     onEnterDOM() {
         ResizeHandler.register(this, this._handleResizeBound);
@@ -136,22 +145,58 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _handleResize() {
         this._inputWidth = this.offsetWidth;
     }
+    _handleMobileInput(e) {
+        if (!this._getRespPopover().open) {
+            return;
+        }
+        const target = e.target;
+        const value = target.value;
+        if (!this.noValidation && !this._filterItems(value).length) {
+            this._dialogInputValueState = ValueState.Negative;
+        }
+        else {
+            this._dialogInputValueState = this.valueState;
+        }
+        this.value = value;
+        this._shouldFilterItems = true;
+        this.valueBeforeAutoComplete = value;
+        this.fireEvent("input");
+    }
     _inputChange() {
-        this.fireEvent("change");
+        if (!this._clearingValue && this._lastValue !== this.value) {
+            this._lastValue = this.value;
+            this.fireEvent("change");
+        }
     }
-    togglePopover() {
-        this._tokenizer.closeMorePopover();
-        this.allItemsPopover?.toggle(this);
+    _mobileInputChange(e) {
+        this._inputChange.call(this);
+        const { value } = e.target;
+        const matchingItem = this.items.find(item => item.text === value);
+        if (!matchingItem) {
+            return;
+        }
+        const initiallySelected = matchingItem?.selected;
+        const changePrevented = this.fireSelectionChange();
+        if (!changePrevented) {
+            matchingItem.selected = !initiallySelected;
+            this._getResponsivePopover().preventFocusRestore = false;
+            this._getResponsivePopover().open = false;
+            this.value = "";
+        }
+    }
+    _togglePopover() {
+        this._tokenizer.open = false;
+        this._getRespPopover().toggle(this);
     }
     togglePopoverByDropdownIcon() {
         this._shouldFilterItems = false;
-        this.allItemsPopover?.toggle(this);
-        this._tokenizer.closeMorePopover();
+        this._getRespPopover().toggle(this);
+        this._tokenizer.open = false;
     }
     _showFilteredItems() {
         this.filterSelected = true;
         this._showMorePressed = true;
-        this.togglePopover();
+        this._togglePopover();
     }
     filterSelectedItems(e) {
         this.filterSelected = e.target.pressed;
@@ -160,11 +205,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     /**
      * Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.MultiComboBox.prototype.open
-     * @defaultvalue false
-     * @readonly
+     * @default false
      * @public
      */
     get open() {
@@ -196,11 +237,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
         }
         this._effectiveValueState = this.valueState;
-        if (!filteredItems.length && value && !this.allowCustomValues) {
+        if (!filteredItems.length && value && !this.noValidation) {
             const newValue = this.valueBeforeAutoComplete || this._inputLastValue;
             input.value = newValue;
             this.value = newValue;
-            this.valueState = ValueState.Error;
+            this.valueState = ValueState.Negative;
             this._shouldAutocomplete = false;
             this._resetValueState(oldValueState);
             return;
@@ -210,10 +251,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._filteredItems = filteredItems;
         if (!isPhone()) {
             if (filteredItems.length === 0) {
-                this.allItemsPopover?.close();
+                this._getRespPopover().open = false;
             }
             else {
-                this.allItemsPopover?.showAt(this);
+                this._getRespPopover().opener = this;
+                this._getRespPopover().open = true;
             }
         }
         this.fireEvent("input");
@@ -252,10 +294,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const lastTokenBeingDeleted = tokensCount - 1 === 0 && this._deleting;
         const allTokensAreBeingDeleted = selectedTokens === tokensCount && this._deleting;
         const relatedTarget = e.relatedTarget;
-        const isFocusingPopover = this.staticAreaItem === relatedTarget;
-        const isFocusingInput = this._inputDom === relatedTarget;
-        const isFocusingMorePopover = e.relatedTarget === this._tokenizer.staticAreaItem;
-        if (!relatedTarget?.hasAttribute("ui5-token") && !isFocusingPopover && !isFocusingInput && !isFocusingMorePopover) {
+        if (!this.shadowRoot?.contains(relatedTarget)) {
             this._tokenizer.tokens.forEach(token => {
                 token.selected = false;
             });
@@ -273,6 +312,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _tokenizerFocusIn() {
         this._tokenizerFocused = true;
         this.focused = false;
+        this._tokenizer.scrollToEnd();
     }
     _onkeydown(e) {
         const isArrowDownCtrl = isDownCtrl(e);
@@ -291,7 +331,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         // CTRL + Arrow Down navigation is performed by the ItemNavigation module of the List,
         // here we only implement the text selection of the selected item
-        if (isArrowDownCtrl && !this.allItemsPopover?.opened) {
+        if (isArrowDownCtrl && !this._getRespPopover().open) {
             setTimeout(() => this._inputDom.setSelectionRange(0, this._inputDom.value.length), 0);
         }
         if (isLeftCtrl(e) || isRightCtrl(e)) {
@@ -299,12 +339,12 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             return;
         }
         if (isInsertShift(e)) {
-            this._handleInsertPaste();
+            this._handleInsertPaste(e);
             return;
         }
         if (isCtrl && e.key.toLowerCase() === "i" && this._tokenizer.tokens.length > 0) {
             e.preventDefault();
-            this.togglePopover();
+            this._togglePopover();
         }
         if (isSpaceShift(e)) {
             e.preventDefault();
@@ -324,8 +364,18 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         this._shouldAutocomplete = !this.noTypeahead && !(isBackSpace(e) || isDelete(e) || isEscape(e) || isEnter(e));
     }
+    _selectItems(matchingItems) {
+        this._previouslySelectedItems = this._getSelectedItems();
+        matchingItems.forEach(item => {
+            item.selected = true;
+            this.value = "";
+            const changePrevented = this.fireSelectionChange();
+            if (changePrevented) {
+                this._revertSelection();
+            }
+        });
+    }
     _handlePaste(e) {
-        e.preventDefault();
         if (this.readonly || !e.clipboardData) {
             return;
         }
@@ -333,9 +383,17 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (!pastedText) {
             return;
         }
-        this._createTokenFromText(pastedText);
+        this._handleTokenCreationUponPaste(pastedText, e);
     }
-    async _handleInsertPaste() {
+    _handleTokenCreationUponPaste(pastedText, e) {
+        const separatedText = pastedText.split(/\r\n|\r|\n|\t/g).filter(t => !!t);
+        const matchingItems = this.items.filter(item => separatedText.includes(item.text) && !item.selected);
+        if (matchingItems.length > 1) {
+            e.preventDefault();
+            this._selectItems(matchingItems);
+        }
+    }
+    async _handleInsertPaste(e) {
         if (this.readonly || isFirefox()) {
             return;
         }
@@ -343,26 +401,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (!pastedText) {
             return;
         }
-        this._createTokenFromText(pastedText);
-    }
-    _createTokenFromText(pastedText) {
-        const separatedText = pastedText.split(/\r\n|\r|\n|\t/g).filter(t => !!t);
-        const matchingItems = this.items.filter(item => separatedText.indexOf(item.text) > -1 && !item.selected);
-        if (separatedText.length > 1) {
-            this._previouslySelectedItems = this._getSelectedItems();
-            matchingItems.forEach(item => {
-                item.selected = true;
-                this.value = "";
-                const changePrevented = this.fireSelectionChange();
-                if (changePrevented) {
-                    this._revertSelection();
-                }
-            });
-        }
-        else {
-            this.value = pastedText;
-            this.fireEvent("input");
-        }
+        this._handleTokenCreationUponPaste(pastedText, e);
     }
     _handleShow(e) {
         const items = this.items;
@@ -377,7 +416,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._isOpenedByKeyboard = true;
         this._shouldFilterItems = false;
         this._filteredItems = this.items;
-        this.togglePopover();
+        this._togglePopover();
         if (!focusedToken && matchingItem) {
             this._itemToFocus = matchingItem;
             return;
@@ -410,7 +449,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (isAutoCompleted) {
             this.value = this.valueBeforeAutoComplete;
         }
-        if (!this.allowCustomValues || (!this.open && this.allowCustomValues)) {
+        if (!this.noValidation || (!this.open && this.noValidation)) {
             this.value = this._lastValue;
         }
     }
@@ -431,7 +470,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _handleTab() {
-        this.allItemsPopover?.close();
+        this._getRespPopover().open = false;
     }
     _handleSelectAll() {
         const filteredItems = this._filteredItems;
@@ -445,27 +484,55 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._revertSelection();
         }
     }
-    _onValueStateKeydown(e) {
+    async _onListHeaderKeydown(e) {
         const isArrowDown = isDown(e);
         const isArrowUp = isUp(e);
+        const isSelectAllFocused = e.target.classList.contains("ui5-mcb-select-all-checkbox");
         if (isTabNext(e) || isTabPrevious(e)) {
             this._onItemTab();
             return;
         }
         e.preventDefault();
         if (isArrowDown || isDownCtrl(e)) {
+            if (this.showSelectAll && !isSelectAllFocused) {
+                return this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox").focus();
+            }
             this._handleArrowDown();
         }
         if (isArrowUp || isUpCtrl(e)) {
-            this._shouldAutocomplete = true;
-            this._inputDom.focus();
+            if (e.target === this.valueStateHeader || !this.valueStateHeader) {
+                this._shouldAutocomplete = true;
+                return this._inputDom.focus();
+            }
+            if (this.showSelectAll && isSelectAllFocused) {
+                this.valueStateHeader?.focus();
+            }
+        }
+    }
+    _handleSelectAllCheckboxClick(e) {
+        if (!this.filterSelected) {
+            this._handleSelectAll();
+            this.filterSelected = false;
+        }
+        else {
+            this._previouslySelectedItems = this._getSelectedItems();
+            this.selectedItems?.forEach(item => {
+                item.selected = e.target.checked;
+            });
+            if (!e.target.checked) {
+                this.filterSelected = false;
+            }
+            const changePrevented = this.fireSelectionChange();
+            if (changePrevented) {
+                this._revertSelection();
+            }
         }
     }
-    async _onItemKeydown(e) {
+    _onItemKeydown(e) {
         const isFirstItem = this.list?.items[0] === e.target;
         const isArrowUp = isUp(e) || isUpCtrl(e);
         if (this.hasValueStateMessage && !this.valueStateHeader) {
-            await this._setValueStateHeader();
+            this._setValueStateHeader();
         }
         if (isTabNext(e) || isTabPrevious(e)) {
             this._onItemTab();
@@ -493,18 +560,23 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.list?.items[this.list?._itemNavigation._currentIndex].focus();
         }
         if (isShow(e)) {
-            this.togglePopover();
+            this._togglePopover();
         }
         if (isCtrlA(e)) {
             this._handleSelectAll();
             return;
         }
-        if (((isArrowUp && isFirstItem) || isHome(e)) && this.valueStateHeader) {
-            this.valueStateHeader.focus();
-        }
-        if (!this.valueStateHeader && isFirstItem && isArrowUp) {
-            this._inputDom.focus();
-            this._shouldAutocomplete = true;
+        if (isFirstItem && isArrowUp) {
+            if (this.showSelectAll) {
+                this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox").focus();
+            }
+            else if (this.valueStateHeader) {
+                this.valueStateHeader.focus();
+            }
+            else {
+                this._inputDom.focus();
+                this._shouldAutocomplete = true;
+            }
         }
     }
     _handleArrowCtrl(e) {
@@ -519,20 +591,26 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _onItemTab() {
         this._inputDom.focus();
-        this.allItemsPopover?.close();
+        this._getRespPopover().open = false;
     }
-    async _handleArrowNavigation(e, isDownControl) {
+    _handleArrowNavigation(e, isDownControl) {
         const isArrowDown = isDownControl || isDown(e);
         const hasSuggestions = this.items.length;
-        const isOpen = this.allItemsPopover?.opened;
+        const isOpen = this._getRespPopover().open;
         e.preventDefault();
         if (this.hasValueStateMessage && !this.valueStateHeader) {
-            await this._setValueStateHeader();
+            this._setValueStateHeader();
         }
-        if (isArrowDown && isOpen && this.valueStateHeader) {
-            this.value = this.valueBeforeAutoComplete || this.value;
-            this.valueStateHeader.focus();
-            return;
+        if (isArrowDown && isOpen) {
+            if (this.valueStateHeader) {
+                this.value = this.valueBeforeAutoComplete || this.value;
+                this.valueStateHeader.focus();
+                return;
+            }
+            if (this.showSelectAll) {
+                this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox").focus();
+                return;
+            }
         }
         if (isArrowDown && hasSuggestions) {
             this._handleArrowDown();
@@ -541,12 +619,14 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._navigateToPrevItem();
         }
     }
-    _handleArrowDown() {
-        const isOpen = this.allItemsPopover?.opened;
-        const firstListItem = this.list?.items[0];
+    async _handleArrowDown() {
+        const isOpen = this._getRespPopover().open;
+        const firstListItem = this.list?.listItems[0];
         if (isOpen) {
             firstListItem && this.list?._itemNavigation.setCurrentItem(firstListItem);
             this.value = this.valueBeforeAutoComplete || this.value;
+            // wait item navigation to apply correct tabindex
+            await renderFinished();
             firstListItem?.focus();
         }
         else if (!this.readonly) {
@@ -628,15 +708,15 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const matchingItem = this.items.find(item => (item.text.toLowerCase() === lowerCaseValue && !item.isGroupItem));
         const oldValueState = this.valueState;
         const innerInput = this._innerInput;
-        if (this.FormSupport) {
-            this.FormSupport.triggerFormSubmit(this);
+        if (this._internals?.form) {
+            submitForm(this);
         }
         if (matchingItem) {
             if (matchingItem.selected) {
                 if (this._validationTimeout) {
                     return;
                 }
-                this.valueState = ValueState.Error;
+                this.valueState = ValueState.Negative;
                 this._performingSelectionTwice = true;
                 this._resetValueState(oldValueState, () => {
                     this._performingSelectionTwice = false;
@@ -652,19 +732,19 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 }
             }
             innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
-            this.allItemsPopover?.close();
+            this._getRespPopover().open = false;
         }
     }
     _resetValueState(valueState, callback) {
         this._validationTimeout = setTimeout(() => {
             this._effectiveValueState = this.valueState;
+            this._dialogInputValueState = valueState;
             this.valueState = valueState;
             this._validationTimeout = null;
             callback && callback();
         }, 2000);
     }
     _onTokenizerKeydown(e) {
-        const isCtrl = !!(e.metaKey || e.ctrlKey);
         if (isRight(e)) {
             const lastTokenIndex = this._tokenizer.tokens.length - this._tokenizer.overflownTokens.length - 1;
             if (e.target === this._tokenizer.tokens[lastTokenIndex]) {
@@ -673,22 +753,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 }, 0);
             }
         }
-        if ((isCtrl && ["c", "x"].includes(e.key.toLowerCase())) || isDeleteShift(e) || isInsertCtrl(e)) {
-            e.preventDefault();
-            const isCut = e.key.toLowerCase() === "x" || isDeleteShift(e);
-            const selectedTokens = this._tokenizer.tokens.filter(token => token.selected);
-            if (isCut) {
-                const cutResult = this._tokenizer._fillClipboard(ClipboardDataOperation.cut, selectedTokens);
-                selectedTokens.forEach(token => {
-                    this._tokenizer.deleteToken(token);
-                });
-                this.focus();
-                return cutResult;
-            }
-            return this._tokenizer._fillClipboard(ClipboardDataOperation.copy, selectedTokens);
-        }
         if (isInsertShift(e)) {
-            this._handleInsertPaste();
+            this._handleInsertPaste(e);
         }
         if (isHome(e)) {
             this._handleHome(e);
@@ -700,10 +766,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._preventTokenizerToggle = true;
             this._handleShow(e);
         }
-        if (isCtrl && e.key.toLowerCase() === "i" && this._tokenizer.tokens.length > 0) {
-            e.preventDefault();
-            this.togglePopover();
-        }
     }
     _filterItems(str) {
         const itemsToFilter = this.items.filter(item => !item.isGroupItem);
@@ -713,7 +775,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     /**
      * Returns true if the group header should be shown (if there is a filtered suggestion item for this group item)
-     *
      * @private
      */
     static _groupItemFilter(item, idx, allItems, filteredItems) {
@@ -735,7 +796,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._itemToFocus?.focus();
         }
         else {
-            this.allItemsPopover?.focus();
+            this._getRespPopover().focus();
         }
         this._previouslySelectedItems = this._getSelectedItems();
         this._isOpenedByKeyboard = false;
@@ -755,7 +816,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._previouslySelectedItems = this._getSelectedItems();
         }
         // sync list items and cb items
-        this.syncItems(e.target.items);
+        this.syncItems(e.target.listItems);
         // don't call selection change right after selection as user can cancel it on phone
         if (!isPhone()) {
             changePrevented = this.fireSelectionChange();
@@ -766,8 +827,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         // casted to KeyboardEvent since isSpace and isSpaceCtrl accepts KeyboardEvent only
         const castedEvent = { key: e.detail.key };
+        if (!e.detail.selectedItems.length && this.filterSelected) {
+            this.filterSelected = false;
+        }
         if (!e.detail.selectionComponentPressed && !isSpace(castedEvent) && !isSpaceCtrl(castedEvent)) {
-            this.allItemsPopover?.close();
+            this._getRespPopover().open = false;
             this.value = "";
             // if the item (not checkbox) is clicked, call the selection change
             if (isPhone()) {
@@ -798,33 +862,34 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.fireEvent("value-changed");
         return changePrevented;
     }
-    async _getRespPopover() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        this.allItemsPopover = staticAreaItem.querySelector(`.ui5-multi-combobox-all-items-responsive-popover`);
+    _getRespPopover() {
+        return this.shadowRoot.querySelector(`.ui5-multi-combobox-all-items-responsive-popover`);
     }
     async _getList() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        this.list = staticAreaItem.querySelector(".ui5-multi-combobox-all-items-list");
+        await renderFinished();
+        this.list = this.shadowRoot.querySelector(".ui5-multi-combobox-all-items-list");
         return this.list;
     }
     _click() {
         if (isPhone() && !this.readonly && !this._showMorePressed && !this._deleting) {
-            this.allItemsPopover?.showAt(this);
+            this._getRespPopover().opener = this;
+            this._getRespPopover().open = true;
         }
         this._showMorePressed = false;
     }
-    async handleBeforeTokenizerPopoverOpen() {
+    handleBeforeTokenizerPopoverOpen() {
         const tokens = this._tokenizer.tokens;
         const hasTruncatedToken = tokens.length === 1 && tokens[0].isTruncatable;
-        const popover = (await this._getResponsivePopover());
-        if (hasTruncatedToken) {
-            popover?.close(false, false, true);
+        const popover = this._getResponsivePopover();
+        if (hasTruncatedToken && popover) {
+            popover.preventFocusRestore = true;
+            popover.open = false;
         }
     }
     _afterClosePicker() {
         // close device's keyboard and prevent further typing
         if (isPhone()) {
-            this.blur();
+            this._dialogInputValueState = this.valueState;
         }
         this._toggle();
         this._iconPressed = false;
@@ -839,6 +904,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             };
         });
         this._valueBeforeOpen = this.value;
+        this._dialogInputValueState = this.valueState;
+        // in order to use the autocomplete feature of the input we should not set value in state
+        this._innerInput.value = this.value;
         if (this.filterSelected) {
             const selectedItems = this._filteredItems.filter(item => item.selected);
             this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
@@ -877,14 +945,21 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const input = this._innerInput;
         const autoCompletedChars = input && (input.selectionEnd || 0) - (input.selectionStart || 0);
         const value = input && input.value;
-        this.FormSupport = getFeature("FormSupport");
+        if (this.open) {
+            this._getList().then(list => {
+                const selectedItemsCount = list?.querySelectorAll("[ui5-li][selected]")?.length;
+                const allItemsCount = list?.querySelectorAll("[ui5-li]")?.length;
+                this._allSelected = selectedItemsCount === allItemsCount;
+            });
+        }
+        this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
         this._inputLastValue = value;
         if (input && !input.value) {
             this.valueBeforeAutoComplete = "";
             this._filteredItems = this.items;
         }
         this.items.forEach(item => {
-            item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+            item._getRealDomRef = () => this._getRespPopover().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
         });
         this.tokenizerAvailable = this._getSelectedItems().length > 0;
         this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
@@ -893,7 +968,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         // Typehead causes issues on Android devices, so we disable it for now
         // If there is already a selection the autocomplete has already been performed
-        if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars) {
+        if (this._shouldAutocomplete && !isAndroid()) {
             const item = this._getFirstMatchingItem(value);
             // Keep the original typed in text intact
             this.valueBeforeAutoComplete = value;
@@ -907,13 +982,20 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     async onAfterRendering() {
-        await this._getRespPopover();
+        this._getRespPopover();
         await this._getList();
         this.toggle(this.shouldDisplayOnlyValueStateMessage);
         this.storeResponsivePopoverWidth();
         this._deleting = false;
         // force resize of the tokenizer on invalidation
         this._tokenizer._handleResize();
+        this._tokenizer.preventInitialFocus = true;
+        if (this._getRespPopover()?.open) {
+            this._tokenizer.expanded = true;
+        }
+        if (this._tokenizer.expanded && this.hasAttribute("focused")) {
+            this._tokenizer.scrollToEnd();
+        }
     }
     get _isPhone() {
         return isPhone();
@@ -921,6 +1003,17 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _onIconMousedown() {
         this._iconPressed = true;
     }
+    _clear() {
+        this.value = "";
+        this._inputDom.value = "";
+        this.fireEvent("input");
+        if (!this._isPhone) {
+            this.focus();
+        }
+    }
+    _iconMouseDown() {
+        this._clearingValue = true;
+    }
     storeResponsivePopoverWidth() {
         if (this.open && !this._listWidth) {
             this._listWidth = this.list.offsetWidth;
@@ -936,11 +1029,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     handleCancel() {
         this._itemsBeforeOpen.forEach(item => {
-            if (item.ref instanceof MultiComboBoxItem) {
+            if (isInstanceOfMultiComboBoxItem(item.ref)) {
                 item.ref.selected = item.selected;
             }
         });
-        this.togglePopover();
+        this._togglePopover();
         this.value = this._valueBeforeOpen;
     }
     handleOK() {
@@ -950,13 +1043,17 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 this._revertSelection();
             }
         }
-        if (!this.allowCustomValues) {
+        if (!this.noValidation) {
             this.value = "";
         }
-        this.togglePopover();
+        this._togglePopover();
     }
-    async openPopover() {
-        (await this._getPopover())?.showAt(this);
+    openPopover() {
+        const popover = this._getPopover();
+        if (popover) {
+            popover.opener = this;
+            popover.open = true;
+        }
     }
     _forwardFocusToInner() {
         this._innerInput.focus();
@@ -968,47 +1065,54 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         return this;
     }
-    async closePopover() {
-        (await this._getPopover())?.close();
+    closePopover() {
+        if (this._getPopover()) {
+            this._getPopover().open = false;
+        }
     }
-    async _getPopover() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        return (staticAreaItem.querySelector("[ui5-popover]"));
+    _getPopover() {
+        return this.shadowRoot.querySelector("[ui5-popover]");
     }
-    async _getResponsivePopover() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        return staticAreaItem.querySelector("[ui5-responsive-popover]");
+    _getResponsivePopover() {
+        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
     }
-    async _setValueStateHeader() {
-        const responsivePopover = await this._getResponsivePopover();
+    _setValueStateHeader() {
+        const responsivePopover = this._getResponsivePopover();
         this.valueStateHeader = responsivePopover.querySelector("div.ui5-responsive-popover-header.ui5-valuestatemessage-root");
     }
     get _tokenizer() {
         return this.shadowRoot.querySelector("[ui5-tokenizer]");
     }
     inputFocusIn(e) {
-        if (!isPhone() || this.readonly) {
+        if (!isPhone()) {
             this.focused = true;
             this._tokenizer.expanded = true;
+            this._tokenizer.scrollToEnd();
         }
         else {
             this._innerInput.blur();
         }
+        this._clearingValue = false;
         if (!isPhone() && ((e.relatedTarget?.tagName !== "UI5-STATIC-AREA-ITEM") || !e.relatedTarget)) {
             this._innerInput.setSelectionRange(0, this.value.length);
         }
         this._tokenizer.tokens.forEach(token => {
             token.selected = false;
         });
-        this._lastValue = this.value;
         this.valueBeforeAutoComplete = "";
     }
     inputFocusOut(e) {
-        if (!this.shadowRoot.contains(e.relatedTarget) && !this._deleting) {
+        const responsivePopover = this._getResponsivePopover();
+        const popover = this._getPopover();
+        const focusIsGoingInPopover = [responsivePopover, popover].some(popup => popup?.contains(e.relatedTarget));
+        if ((!this.shadowRoot.contains(e.relatedTarget) || focusIsGoingInPopover) && !this._deleting && !this._clearingValue) {
             this.focused = false;
+            if (this._lastValue !== this.value) {
+                this._inputChange();
+            }
             this._tokenizer.expanded = this.open;
             // remove the value if user focus out the input and focus is not going in the popover
-            if (!isPhone() && !this.allowCustomValues && (this.staticAreaItem !== e.relatedTarget)) {
+            if (!isPhone() && !this.noValidation && !focusIsGoingInPopover) {
                 this.value = "";
             }
         }
@@ -1020,16 +1124,17 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return !isPhone() && (this.focused || this._tokenizerFocused);
     }
     get selectedItemsListMode() {
-        return this.readonly ? "None" : "MultiSelect";
+        return this.readonly ? "None" : "Multiple";
     }
     get _listItemsType() {
         return this.readonly ? "Inactive" : "Active";
     }
     get hasValueState() {
-        return this.valueState !== ValueState.None;
+        return (this.valueState !== ValueState.None) || (this._dialogInputValueState !== ValueState.None);
     }
     get hasValueStateMessage() {
-        return this.hasValueState && this.valueState !== ValueState.Success;
+        const valueState = isPhone() ? this._dialogInputValueState : this.valueState;
+        return this.hasValueState && valueState !== ValueState.Positive;
     }
     get ariaValueStateHiddenText() {
         if (!this.hasValueState) {
@@ -1045,13 +1150,14 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return `${text}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
     }
     get valueStateDefaultText() {
-        if (this.valueState === ValueState.None) {
+        const valueState = isPhone() ? this._dialogInputValueState : this.valueState;
+        if (valueState === ValueState.None) {
             return "";
         }
         if (this._performingSelectionTwice) {
             return MultiComboBox_1.i18nBundle.getText(VALUE_STATE_ERROR_ALREADY_SELECTED);
         }
-        return this.valueStateTextMappings[this.valueState];
+        return this.valueStateTextMappings[valueState];
     }
     get valueStateTextId() {
         return this.hasValueState ? `ui5-multi-combobox-valueStateDesc` : undefined;
@@ -1066,15 +1172,16 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
      * This method is relevant for sap_horizon theme only
      */
     get _valueStateMessageIcon() {
-        if (this.valueState === ValueState.None) {
+        const valueState = (isPhone() && this.open) ? this._dialogInputValueState : this.valueState;
+        if (valueState === ValueState.None) {
             return "";
         }
         return {
-            [ValueState.Error]: "error",
-            [ValueState.Warning]: "alert",
-            [ValueState.Success]: "sys-enter-2",
+            [ValueState.Negative]: "error",
+            [ValueState.Critical]: "alert",
+            [ValueState.Positive]: "sys-enter-2",
             [ValueState.Information]: "information",
-        }[this.valueState];
+        }[valueState];
     }
     get _tokensCountText() {
         if (!this._tokenizer) {
@@ -1099,24 +1206,24 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     get valueStateTypeMappings() {
         return {
-            [ValueState.Success]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+            [ValueState.Positive]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
             [ValueState.Information]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
-            [ValueState.Error]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-            [ValueState.Warning]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+            [ValueState.Negative]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+            [ValueState.Critical]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
         };
     }
     get valueStateTextMappings() {
         return {
-            [ValueState.Success]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
-            [ValueState.Error]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
-            [ValueState.Warning]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            [ValueState.Positive]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            [ValueState.Negative]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            [ValueState.Critical]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
             [ValueState.Information]: MultiComboBox_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
         };
     }
     get _innerInput() {
         if (isPhone()) {
-            if (this.allItemsPopover?.opened) {
-                return this.allItemsPopover.querySelector("input");
+            if (this._getRespPopover()?.open) {
+                return this._getRespPopover().querySelector("[ui5-input]").shadowRoot.querySelector("input");
             }
         }
         return this._inputDom;
@@ -1127,11 +1234,14 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     get _iconAccessibleNameText() {
         return MultiComboBox_1.i18nBundle.getText(SELECT_OPTIONS);
     }
+    get _showSelectedButtonAccessibleNameText() {
+        return MultiComboBox_1.i18nBundle.getText(SHOW_SELECTED_BUTTON);
+    }
     get _dialogOkButton() {
         return MultiComboBox_1.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
     }
     get _tokenizerExpanded() {
-        if (isPhone() || this.readonly) {
+        if (isPhone()) {
             return false;
         }
         if (this._preventTokenizerToggle) {
@@ -1142,12 +1252,21 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return shouldBeExpanded;
     }
     get _valueStatePopoverHorizontalAlign() {
-        return this.effectiveDir !== "rtl" ? "Left" : "Right";
+        return this.effectiveDir !== "rtl" ? "Start" : "End";
     }
     get iconsCount() {
         const slottedIconsCount = this.icon?.length || 0;
+        const clearIconCount = Number(this._effectiveShowClearIcon) ?? 0;
         const arrowDownIconsCount = this.readonly ? 0 : 1;
-        return slottedIconsCount + arrowDownIconsCount;
+        return slottedIconsCount + clearIconCount + arrowDownIconsCount;
+    }
+    get clearIconAccessibleName() {
+        return MultiComboBox_1.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
+    }
+    get selectAllCheckboxLabel() {
+        const items = this.items.filter(item => !item.isGroupItem);
+        const selected = items.filter(item => item.selected);
+        return MultiComboBox_1.i18nBundle.getText(MCB_SELECTED_ITEMS, selected.length, items.length);
     }
     get classes() {
         return {
@@ -1160,10 +1279,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             popoverValueState: {
                 "ui5-valuestatemessage-root": true,
                 "ui5-valuestatemessage-header": true,
-                "ui5-valuestatemessage--success": this.valueState === ValueState.Success,
-                "ui5-valuestatemessage--error": this.valueState === ValueState.Error,
-                "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
-                "ui5-valuestatemessage--information": this.valueState === ValueState.Information,
+                "ui5-valuestatemessage--success": (this.valueState === ValueState.Positive) || (this._dialogInputValueState === ValueState.Positive),
+                "ui5-valuestatemessage--error": (this.valueState === ValueState.Negative) || (this._dialogInputValueState === ValueState.Negative),
+                "ui5-valuestatemessage--warning": (this.valueState === ValueState.Critical) || (this._dialogInputValueState === ValueState.Critical),
+                "ui5-valuestatemessage--information": (this.valueState === ValueState.Information) || (this._dialogInputValueState === ValueState.Information),
             },
         };
     }
@@ -1190,6 +1309,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
 __decorate([
     property()
 ], MultiComboBox.prototype, "value", void 0);
+__decorate([
+    property()
+], MultiComboBox.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "noTypeahead", void 0);
@@ -1198,7 +1320,7 @@ __decorate([
 ], MultiComboBox.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Boolean })
-], MultiComboBox.prototype, "allowCustomValues", void 0);
+], MultiComboBox.prototype, "noValidation", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "disabled", void 0);
@@ -1214,18 +1336,27 @@ __decorate([
 __decorate([
     property({ type: ComboBoxFilter, defaultValue: ComboBoxFilter.StartsWithPerTerm })
 ], MultiComboBox.prototype, "filter", void 0);
+__decorate([
+    property({ type: Boolean })
+], MultiComboBox.prototype, "showClearIcon", void 0);
 __decorate([
     property()
 ], MultiComboBox.prototype, "accessibleName", void 0);
 __decorate([
     property()
 ], MultiComboBox.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Boolean })
+], MultiComboBox.prototype, "showSelectAll", void 0);
 __decorate([
     property({ type: ValueState, defaultValue: ValueState.None })
 ], MultiComboBox.prototype, "_effectiveValueState", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "_open", void 0);
+__decorate([
+    property()
+], MultiComboBox.prototype, "_valueBeforeOpen", void 0);
 __decorate([
     property({ type: Object, noAttribute: true, multiple: true })
 ], MultiComboBox.prototype, "_filteredItems", void 0);
@@ -1253,6 +1384,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], MultiComboBox.prototype, "_performingSelectionTwice", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBox.prototype, "_allSelected", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBox.prototype, "_effectiveShowClearIcon", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.None })
+], MultiComboBox.prototype, "_dialogInputValueState", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "tokenizerAvailable", void 0);
@@ -1269,63 +1409,66 @@ MultiComboBox = MultiComboBox_1 = __decorate([
     customElement({
         tag: "ui5-multi-combobox",
         languageAware: true,
+        formAssociated: true,
         renderer: litRender,
         template: MultiComboBoxTemplate,
-        staticAreaTemplate: MultiComboBoxPopoverTemplate,
-        styles: multiCbxStyles,
-        staticAreaStyles: [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss, MultiComboBoxPopover],
+        styles: [
+            multiCbxStyles,
+            ResponsivePopoverCommonCss,
+            ValueStateMessageCss,
+            SuggestionsCss,
+            MultiComboBoxPopover,
+        ],
         dependencies: [
             MultiComboBoxItem,
             MultiComboBoxGroupItem,
             Tokenizer,
             Token,
             Icon,
+            Input,
             ResponsivePopover,
             Popover,
             List,
             StandardListItem,
-            GroupHeaderListItem,
+            ListItemGroupHeader,
             ToggleButton,
             Button,
+            CheckBox,
+            SuggestionItem,
         ],
     })
     /**
      * Fired when the input operation has finished by pressing Enter or on focusout.
-     *
-     * @event sap.ui.webc.main.MultiComboBox#change
      * @public
      */
     ,
     event("change")
     /**
-     * Fired when the value of the component changes at each keystroke.
-     *
-     * @event sap.ui.webc.main.MultiComboBox#input
+     * Fired when the value of the component changes at each keystroke or clear icon is pressed.
      * @public
      */
     ,
     event("input")
     /**
      * Fired when the dropdown is opened or closed.
-     *
-     * @event sap.ui.webc.main.MultiComboBox#open-change
      * @since 1.0.0-rc.5
      * @public
      */
     ,
     event("open-change")
     /**
-     * Fired when selection is changed by user interaction
-     * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
-     *
-     * @event sap.ui.webc.main.MultiComboBox#selection-change
-     * @param {Array} items an array of the selected items.
+     * Fired when selection is changed by user interaction.
+     * @param {IMultiComboBoxItem[]} items an array of the selected items.
      * @public
+     * @allowPreventDefault
      */
     ,
     event("selection-change", {
         detail: {
-            items: { type: Array },
+            /**
+             * @public
+             */
+            items: { type: (Array) },
         },
     })
 ], MultiComboBox);