@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/MultiComboBox.js

@@ -9,50 +9,46 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { isShow, isDown, isUp, isSpace, isSpaceCtrl, isSpaceShift, isRight, isLeft, isHome, isEnd, isTabNext, isTabPrevious, isUpShift, isDownShift, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isHomeCtrl, isEndCtrl, isCtrlA, isInsertShift, isBackSpace, isDelete, isEscape, isEnter, isCtrlAltF8, } from "@ui5/webcomponents-base/dist/Keys.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";
-import "@ui5/webcomponents-icons/dist/multiselect-all.js";
-import "@ui5/webcomponents-icons/dist/not-editable.js";
+import { isPhone, isAndroid, isFirefox, isMac, } from "@ui5/webcomponents-base/dist/Device.js";
+import { attachListeners } from "@ui5/webcomponents-base/dist/util/valueStateNavigation.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 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 { getAssociatedLabelForTexts, getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
-import MultiComboBoxItem from "./MultiComboBoxItem.js";
-import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
-import GroupHeaderListItem from "./GroupHeaderListItem.js";
-import Tokenizer, { ClipboardDataOperation } from "./Tokenizer.js";
+import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import MultiComboBoxItem, { isInstanceOfMultiComboBoxItem } from "./MultiComboBoxItem.js";
+import MultiComboBoxItemGroup, { isInstanceOfMultiComboBoxItemGroup } from "./MultiComboBoxItemGroup.js";
+import ListItemGroup from "./ListItemGroup.js";
+import Tokenizer, { getTokensCountText } from "./Tokenizer.js";
 import Token from "./Token.js";
 import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
-import StandardListItem from "./StandardListItem.js";
+import ListItemStandard from "./ListItemStandard.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, SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, VALUE_STATE_ERROR_ALREADY_SELECTED, MCB_SELECTED_ITEMS, INPUT_CLEAR_ICON_ACC_NAME, } 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, VALUE_STATE_LINK, VALUE_STATE_LINKS, VALUE_STATE_LINK_MAC, VALUE_STATE_LINKS_MAC, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, COMBOBOX_AVAILABLE_OPTIONS, 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";
+import MultiComboBoxTemplate from "./MultiComboBoxTemplate.js";
 // Styles
 import multiCbxStyles from "./generated/themes/MultiComboBox.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 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 SuggestionItem from "./SuggestionItem.js";
@@ -82,6 +78,7 @@ import SuggestionItem from "./SuggestionItem.js";
  * 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.
+ * [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.
  *
  * #### Tokens
  *
@@ -99,9 +96,154 @@ import SuggestionItem from "./SuggestionItem.js";
  * @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 && this.name) {
+            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();
+        /**
+         * Defines the value of the component.
+         *
+         * **Note:** The property is updated upon typing.
+         * @default ""
+         * @formEvents change input
+         * @formProperty
+         * @public
+         */
+        this.value = "";
+        /**
+         * Defines whether the value will be autcompleted to match an item
+         * @default false
+         * @public
+         * @since 1.4.0
+         */
+        this.noTypeahead = false;
+        /**
+         * Defines if the user input will be prevented, if no matching item has been found
+         * @default false
+         * @public
+         */
+        this.noValidation = false;
+        /**
+         * Defines whether the component is in disabled state.
+         *
+         * **Note:** A disabled component is completely noninteractive.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Defines the value state of the component.
+         * @default "None"
+         * @public
+         */
+        this.valueState = "None";
+        /**
+         * Defines whether the component is read-only.
+         *
+         * **Note:** A read-only component is not editable,
+         * but still provides visual feedback upon user interaction.
+         * @default false
+         * @public
+         */
+        this.readonly = false;
+        /**
+         * Defines whether the component is required.
+         * @default false
+         * @public
+         * @since 1.0.0-rc.5
+         */
+        this.required = false;
+        /**
+         * Defines the filter type of the component.
+         * @default "StartsWithPerTerm"
+         * @public
+         */
+        this.filter = "StartsWithPerTerm";
+        /**
+         * Defines whether the clear icon of the multi-combobox will be shown.
+         * @default false
+         * @public
+         * @since 1.20.1
+         */
+        this.showClearIcon = false;
+        /**
+         * Determines if the select all checkbox is visible on top of suggestions.
+         * @default false
+         * @public
+         */
+        this.showSelectAll = false;
+        this._effectiveValueState = "None";
+        /**
+         * Indicates whether the value state message popover is open.
+         * @private
+         */
+        this.valueStateOpen = false;
+        /**
+         * Indicates whether the Tokenizer n-more popover is open.
+         * @private
+         */
+        this.tokenizerOpen = false;
+        /**
+         * Indicates whether the items picker is open.
+         * @public
+         * @since 2.9.0
+         */
+        this.open = false;
+        this._valueBeforeOpen = this.value;
+        this.filterSelected = false;
+        this.focused = false;
+        this._tokenizerFocused = false;
+        this._iconPressed = false;
+        this._inputWidth = 0;
+        this._listWidth = 0;
+        this._performingSelectionTwice = false;
+        this._allSelected = false;
+        this._effectiveShowClearIcon = false;
+        this._dialogInputValueState = "None";
+        /**
+         * Indicates whether the tokenizer has tokens
+         * @private
+         */
+        this.tokenizerAvailable = false;
+        /**
+         * Indicates whether link navigation is being handled.
+         * @private
+         * @since 2.11.0
+         * @default false
+         */
+        this._handleLinkNavigation = false;
+        /**
+         * @private
+         */
+        this._linksListenersArray = [];
+        /**
+         * Indicates whether IME composition is currently active
+         * @default false
+         * @private
+         */
+        this._isComposing = false;
         this._filteredItems = [];
+        this.selectedItems = [];
         this._previouslySelectedItems = [];
         this.selectedValues = [];
         this._itemsBeforeOpen = [];
@@ -112,22 +254,29 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.valueBeforeAutoComplete = "";
         this._lastValue = this.getAttribute("value") || "";
         this.currentItemIdx = -1;
-        this.FormSupport = undefined;
+        this._valueStateLinks = [];
+        this._suppressNextLiveChange = false;
     }
     onEnterDOM() {
         ResizeHandler.register(this, this._handleResizeBound);
+        this._enableComposition();
     }
     onExitDOM() {
         ResizeHandler.deregister(this, this._handleResizeBound);
+        this._removeLinksEventListeners();
+        this._composition?.removeEventListeners();
     }
     _handleResize() {
         this._inputWidth = this.offsetWidth;
     }
     _handleMobileInput(e) {
+        if (!this.open || this.readonly) {
+            return;
+        }
         const target = e.target;
         const value = target.value;
-        if (!this.allowCustomValues && !this._filterItems(value).length) {
-            this._dialogInputValueState = ValueState.Error;
+        if (!this.noValidation && !this._filterItems(value).length) {
+            this._dialogInputValueState = ValueState.Negative;
         }
         else {
             this._dialogInputValueState = this.valueState;
@@ -135,18 +284,20 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.value = value;
         this._shouldFilterItems = true;
         this.valueBeforeAutoComplete = value;
-        this.fireEvent("input");
+        this.fireDecoratorEvent("input");
     }
     _inputChange() {
         if (!this._clearingValue && this._lastValue !== this.value) {
             this._lastValue = this.value;
-            this.fireEvent("change");
+            this.fireDecoratorEvent("change");
         }
     }
-    async _mobileInputChange(e) {
-        this._inputChange.call(this);
+    _onMobileInputKeydown(e) {
+        if (!isEnter(e)) {
+            return;
+        }
         const { value } = e.target;
-        const matchingItem = this.items.find(item => item.text === value);
+        const matchingItem = this._getItems().find(item => item.text === value);
         if (!matchingItem) {
             return;
         }
@@ -154,36 +305,29 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const changePrevented = this.fireSelectionChange();
         if (!changePrevented) {
             matchingItem.selected = !initiallySelected;
-            (await this._getResponsivePopover()).close();
+            this._getResponsivePopover().preventFocusRestore = false;
+            this.open = false;
             this.value = "";
         }
     }
-    _togglePopover() {
-        this._tokenizer.closeMorePopover();
-        this.allItemsPopover?.toggle(this);
+    _toggleTokenizerPopover() {
+        this.tokenizerOpen = false;
+        this.open = !this.open;
     }
     togglePopoverByDropdownIcon() {
         this._shouldFilterItems = false;
-        this.allItemsPopover?.toggle(this);
-        this._tokenizer.closeMorePopover();
+        this.open = !this.open;
+        this.tokenizerOpen = false;
     }
     _showFilteredItems() {
         this.filterSelected = true;
         this._showMorePressed = true;
-        this._togglePopover();
+        this._toggleTokenizerPopover();
     }
     filterSelectedItems(e) {
         this.filterSelected = e.target.pressed;
         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);
-    }
-    /**
-     * Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.
-     * @default false
-     * @public
-     */
-    get open() {
-        return this._open;
+        this.selectedItems = this._getItems().filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
     }
     get _showAllItemsButtonPressed() {
         return this.filterSelected;
@@ -192,6 +336,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return this.shadowRoot.querySelector("#ui5-multi-combobox-input");
     }
     _inputLiveChange(e) {
+        // This ensures proper input clearing after Enter-based token creation during composition
+        if (this._suppressNextLiveChange) {
+            this._suppressNextLiveChange = false;
+            return;
+        }
         const input = e.target;
         const value = input.value;
         const filteredItems = this._filterItems(value);
@@ -211,33 +360,37 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
         }
         this._effectiveValueState = this.valueState;
-        if (!filteredItems.length && value && !this.allowCustomValues) {
+        if (!this._isComposing && !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;
         }
-        this._inputLastValue = input.value;
+        if (!this._isComposing) {
+            this._inputLastValue = input.value;
+        }
         this.value = input.value;
         this._filteredItems = filteredItems;
         if (!isPhone()) {
             if (filteredItems.length === 0) {
-                this.allItemsPopover?.close();
+                this.open = false;
             }
             else {
-                this.allItemsPopover?.showAt(this);
+                this.open = true;
             }
         }
-        this.fireEvent("input");
+        this.fireDecoratorEvent("input");
     }
     _tokenDelete(e) {
         this._previouslySelectedItems = this._getSelectedItems();
-        const token = e.detail.ref;
-        const deletingItem = this.items.find(item => item._id === token.getAttribute("data-ui5-id"));
-        deletingItem.selected = false;
+        const token = e.detail.tokens;
+        const deletingItems = this._getItems().filter(item => token.some(t => t.getAttribute("data-ui5-id") === item._id));
+        deletingItems.forEach(item => {
+            item.selected = false;
+        });
         this._deleting = true;
         this._preventTokenizerToggle = true;
         this.focus();
@@ -250,16 +403,32 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (this._getSelectedItems().length) {
             return "";
         }
-        return this.placeholder;
+        return this.placeholder || "";
     }
-    _handleArrowLeft() {
+    // If the input is focused and the cursor is at the beginning/end of the input,
+    // focus the last token if the direction is LTR/ RTL
+    get _shouldFocusLastToken() {
         const inputDomRef = this._inputDom;
         const cursorPosition = inputDomRef.selectionStart || 0;
         const isTextSelected = ((inputDomRef.selectionEnd || 0) - cursorPosition) > 0;
-        if (cursorPosition === 0 && !isTextSelected) {
+        return cursorPosition === 0 && !isTextSelected;
+    }
+    _handleArrowKey(direction) {
+        if (this._shouldFocusLastToken && this.effectiveDir === direction) {
             this._tokenizer._focusLastToken();
         }
     }
+    _handleArrowLeft() {
+        this._handleArrowKey("ltr");
+    }
+    _handleArrowRight() {
+        this._handleArrowKey("rtl");
+    }
+    _onPopoverFocusOut() {
+        if (!isPhone() || !this._handleLinkNavigation) {
+            this._tokenizer.expanded = this.open;
+        }
+    }
     _tokenizerFocusOut(e) {
         this._tokenizerFocused = false;
         const tokensCount = this._tokenizer.tokens.length;
@@ -267,10 +436,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;
             });
@@ -306,7 +472,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.open) {
             setTimeout(() => this._inputDom.setSelectionRange(0, this._inputDom.value.length), 0);
         }
         if (isLeftCtrl(e) || isRightCtrl(e)) {
@@ -319,12 +485,16 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         if (isCtrl && e.key.toLowerCase() === "i" && this._tokenizer.tokens.length > 0) {
             e.preventDefault();
-            this._togglePopover();
+            this._toggleTokenizerPopover();
         }
         if (isSpaceShift(e)) {
             e.preventDefault();
         }
+        if (isCtrlAltF8(e)) {
+            return this._handleCtrlALtF8();
+        }
         if (e.key === "ArrowLeft"
+            || e.key === "ArrowRight"
             || e.key === "Show"
             || e.key === "PageUp"
             || e.key === "PageDown"
@@ -362,7 +532,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _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);
+        const matchingItems = this._getItems().filter(item => !item.isGroupItem && !item.selected && separatedText.includes(item.text));
         if (matchingItems.length > 1) {
             e.preventDefault();
             this._selectItems(matchingItems);
@@ -379,19 +549,19 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._handleTokenCreationUponPaste(pastedText, e);
     }
     _handleShow(e) {
-        const items = this.items;
+        const items = this._getItems();
         const selectedItem = this._getSelectedItems()[0];
         const focusedToken = this._tokenizer.tokens.find(token => token.focused);
         const value = this.value;
-        const matchingItem = this.items.find(item => item.text.localeCompare(value, undefined, { sensitivity: "base" }) === 0);
+        const matchingItem = this._getItems().find(item => item.text?.localeCompare(value, undefined, { sensitivity: "base" }) === 0);
         e.preventDefault();
         if (this.readonly) {
             return;
         }
         this._isOpenedByKeyboard = true;
         this._shouldFilterItems = false;
-        this._filteredItems = this.items;
-        this._togglePopover();
+        this._filteredItems = this._getItems();
+        this._toggleTokenizerPopover();
         if (!focusedToken && matchingItem) {
             this._itemToFocus = matchingItem;
             return;
@@ -403,7 +573,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._itemToFocus = items.find(item => item.text === focusedToken.text);
         }
         else {
-            this._itemToFocus = items[0];
+            this._itemToFocus = items.find(item => isInstanceOfMultiComboBoxItem(item));
         }
     }
     _handlePageUp(e) {
@@ -424,7 +594,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;
         }
     }
@@ -445,10 +615,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _handleTab() {
-        this.allItemsPopover?.close();
+        this.open = false;
     }
     _handleSelectAll() {
-        const filteredItems = this._filteredItems;
+        const filteredItems = this._getItems().filter(item => item._isVisible && !item.isGroupItem);
         const allItemsSelected = filteredItems.every(item => item.selected);
         this._previouslySelectedItems = filteredItems.filter(item => item.selected).map(item => item);
         filteredItems.forEach(item => {
@@ -459,7 +629,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._revertSelection();
         }
     }
-    async _onListHeaderKeydown(e) {
+    _onListHeaderKeydown(e) {
         const isArrowDown = isDown(e);
         const isArrowUp = isUp(e);
         const isSelectAllFocused = e.target.classList.contains("ui5-mcb-select-all-checkbox");
@@ -470,18 +640,15 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         e.preventDefault();
         if (isArrowDown || isDownCtrl(e)) {
             if (this.showSelectAll && !isSelectAllFocused) {
-                return (await this._getResponsivePopover()).querySelector(".ui5-mcb-select-all-checkbox").focus();
+                return this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox").focus();
             }
             this._handleArrowDown();
         }
         if (isArrowUp || isUpCtrl(e)) {
-            if (e.target === this.valueStateHeader || !this.valueStateHeader) {
+            if (e.target === this.valueStateHeader || (this.showSelectAll && isSelectAllFocused)) {
                 this._shouldAutocomplete = true;
                 return this._inputDom.focus();
             }
-            if (this.showSelectAll && isSelectAllFocused) {
-                this.valueStateHeader?.focus();
-            }
         }
     }
     _handleSelectAllCheckboxClick(e) {
@@ -491,7 +658,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         else {
             this._previouslySelectedItems = this._getSelectedItems();
-            this.selectedItems?.forEach(item => {
+            this.selectedItems?.filter(item => !item.isGroupItem).forEach(item => {
                 item.selected = e.target.checked;
             });
             if (!e.target.checked) {
@@ -503,11 +670,12 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
         }
     }
-    async _onItemKeydown(e) {
-        const isFirstItem = this.list?.items[0] === e.target;
+    _onItemKeydown(e) {
+        const isFirstItemGroup = this.list?.getSlottedNodes("items")[1] === e.target && this.list?.getSlottedNodes("items")[0].hasAttribute("ui5-li-group");
+        const isFirstItem = this.list?.getSlottedNodes("items")[0] === e.target || isFirstItemGroup;
         const isArrowUp = isUp(e) || isUpCtrl(e);
         if (this.hasValueStateMessage && !this.valueStateHeader) {
-            await this._setValueStateHeader();
+            this._setValueStateHeader();
         }
         if (isTabNext(e) || isTabPrevious(e)) {
             this._onItemTab();
@@ -515,27 +683,30 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         if (isHomeCtrl(e)) {
             this.list?._itemNavigation._handleHome();
-            this.list?.items[this.list?._itemNavigation._currentIndex].focus();
+            this.list?.getSlottedNodes("items")[this.list?._itemNavigation._currentIndex].focus();
         }
         if (isEndCtrl(e)) {
             this.list?._itemNavigation._handleEnd();
-            this.list?.items[this.list?._itemNavigation._currentIndex].focus();
+            this.list?.getSlottedNodes("items")[this.list?._itemNavigation._currentIndex].focus();
         }
         e.preventDefault();
+        if (isCtrlAltF8(e)) {
+            return this._handleCtrlALtF8();
+        }
         if (isDownShift(e) || isUpShift(e)) {
             this._handleItemRangeSelection(e);
             return;
         }
         if ((isUpCtrl(e)) && !isFirstItem) {
             this.list?._itemNavigation._handleUp();
-            this.list?.items[this.list?._itemNavigation._currentIndex].focus();
+            this.list?.getSlottedNodes("items")[this.list?._itemNavigation._currentIndex].focus();
         }
         if (isDownCtrl(e)) {
             this.list?._itemNavigation._handleDown();
-            this.list?.items[this.list?._itemNavigation._currentIndex].focus();
+            this.list?.getSlottedNodes("items")[this.list?._itemNavigation._currentIndex].focus();
         }
         if (isShow(e)) {
-            this._togglePopover();
+            this._toggleTokenizerPopover();
         }
         if (isCtrlA(e)) {
             this._handleSelectAll();
@@ -543,10 +714,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         if (isFirstItem && isArrowUp) {
             if (this.showSelectAll) {
-                (await this._getResponsivePopover()).querySelector(".ui5-mcb-select-all-checkbox").focus();
-            }
-            else if (this.valueStateHeader) {
-                this.valueStateHeader.focus();
+                if (isFirstItemGroup) {
+                    this.list?.getSlottedNodes("items")[0].focus();
+                    return;
+                }
+                this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox").focus();
             }
             else {
                 this._inputDom.focus();
@@ -565,40 +737,36 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _onItemTab() {
+        this._getResponsivePopover().preventFocusRestore = true;
         this._inputDom.focus();
-        this.allItemsPopover?.close();
+        this.open = false;
+        this._tokenizer.expanded = false;
     }
-    async _handleArrowNavigation(e, isDownControl) {
+    _handleArrowNavigation(e, isDownControl) {
         const isArrowDown = isDownControl || isDown(e);
-        const hasSuggestions = this.items.length;
-        const isOpen = this.allItemsPopover?.opened;
+        const hasSuggestions = this._getItems().length;
         e.preventDefault();
         if (this.hasValueStateMessage && !this.valueStateHeader) {
-            await this._setValueStateHeader();
+            this._setValueStateHeader();
         }
-        if (isArrowDown && isOpen) {
-            if (this.valueStateHeader) {
-                this.value = this.valueBeforeAutoComplete || this.value;
-                this.valueStateHeader.focus();
-                return;
-            }
+        if (isArrowDown && this.open) {
             if (this.showSelectAll) {
-                (await this._getResponsivePopover()).querySelector(".ui5-mcb-select-all-checkbox").focus();
+                this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox").focus();
                 return;
             }
         }
         if (isArrowDown && hasSuggestions) {
             this._handleArrowDown();
         }
-        if (!isArrowDown && !isOpen && !this.readonly) {
+        if (!isArrowDown && !this.open && !this.readonly) {
             this._navigateToPrevItem();
         }
     }
     async _handleArrowDown() {
-        const isOpen = this.allItemsPopover?.opened;
-        const firstListItem = this.list?.items[0];
-        if (isOpen) {
-            firstListItem && this.list?._itemNavigation.setCurrentItem(firstListItem);
+        const firstListItem = this.list?.getSlottedNodes("items")[0];
+        const focusRef = firstListItem?.hasAttribute("ui5-mcb-item-group") ? firstListItem.getFocusDomRef() : firstListItem;
+        if (this.open) {
+            firstListItem && focusRef && this.list?._itemNavigation.setCurrentItem(focusRef);
             this.value = this.valueBeforeAutoComplete || this.value;
             // wait item navigation to apply correct tabindex
             await renderFinished();
@@ -608,9 +776,16 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._navigateToNextItem();
         }
     }
+    _handleCtrlALtF8() {
+        const links = this.linksInAriaValueStateHiddenText;
+        if (links.length > 0) {
+            links[0].focus();
+        }
+        this._handleLinkNavigation = true;
+    }
     _handleItemRangeSelection(e) {
-        const items = this.items;
-        const listItems = this.list?.items;
+        const items = this._getItems();
+        const listItems = this.list?.getSlottedNodes("items");
         const currentItemIdx = Number(listItems?.indexOf(e.target));
         const nextItemIdx = currentItemIdx + 1;
         const prevItemIdx = currentItemIdx - 1;
@@ -629,7 +804,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _navigateToNextItem() {
-        const items = this.items;
+        const items = this._getItems();
         const itemsCount = items.length;
         const previousItemIdx = this.currentItemIdx;
         if (previousItemIdx > -1 && items[previousItemIdx].text !== this.value) {
@@ -638,9 +813,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (previousItemIdx >= itemsCount - 1) {
             return;
         }
-        let currentItem = this.items[++this.currentItemIdx];
+        let currentItem = this._getItems()[++this.currentItemIdx];
         while ((this.currentItemIdx < itemsCount - 1 && currentItem.selected) || currentItem.isGroupItem) {
-            currentItem = this.items[++this.currentItemIdx];
+            currentItem = this._getItems()[++this.currentItemIdx];
         }
         if (currentItem.selected === true || currentItem.isGroupItem) {
             this.currentItemIdx = previousItemIdx;
@@ -651,7 +826,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._innerInput.setSelectionRange(0, currentItem.text.length);
     }
     _navigateToPrevItem() {
-        const items = this.items;
+        const items = this._getItems();
         let previousItemIdx = this.currentItemIdx;
         if ((!this.value && previousItemIdx !== -1) || (previousItemIdx !== -1 && this.value && this.value !== items[previousItemIdx].text)) {
             previousItemIdx = -1;
@@ -663,9 +838,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.currentItemIdx = 0;
             return;
         }
-        let currentItem = this.items[--this.currentItemIdx];
+        let currentItem = this._getItems()[--this.currentItemIdx];
         while ((currentItem && this.currentItemIdx > 0) && (currentItem.selected || currentItem.isGroupItem)) {
-            currentItem = this.items[--this.currentItemIdx];
+            currentItem = this._getItems()[--this.currentItemIdx];
         }
         if (!currentItem) {
             return;
@@ -680,18 +855,15 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _handleEnter() {
         const lowerCaseValue = this.value.toLowerCase();
-        const matchingItem = this.items.find(item => (item.text.toLowerCase() === lowerCaseValue && !item.isGroupItem));
+        const matchingItem = this._getItems().find(item => (!item.isGroupItem && item.text.toLowerCase() === lowerCaseValue));
         const oldValueState = this.valueState;
         const innerInput = this._innerInput;
-        if (this.FormSupport) {
-            this.FormSupport.triggerFormSubmit(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;
@@ -701,13 +873,20 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 this._previouslySelectedItems = this._getSelectedItems();
                 matchingItem.selected = true;
                 this.value = "";
+                // during composition prevent _inputLiveChange for proper input clearing
+                if (this._isComposing) {
+                    this._suppressNextLiveChange = true;
+                }
                 const changePrevented = this.fireSelectionChange();
                 if (changePrevented) {
                     this._revertSelection();
                 }
             }
             innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
-            this.allItemsPopover?.close();
+            this.open = false;
+        }
+        else if (this._internals?.form) {
+            submitForm(this);
         }
     }
     _resetValueState(valueState, callback) {
@@ -716,12 +895,12 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._dialogInputValueState = valueState;
             this.valueState = valueState;
             this._validationTimeout = null;
+            this._innerInput.focus();
             callback && callback();
         }, 2000);
     }
     _onTokenizerKeydown(e) {
-        const isCtrl = !!(e.metaKey || e.ctrlKey);
-        if (isRight(e)) {
+        if ((isRight(e) && this.effectiveDir === "ltr") || (isLeft(e) && this.effectiveDir === "rtl")) {
             const lastTokenIndex = this._tokenizer.tokens.length - this._tokenizer.overflownTokens.length - 1;
             if (e.target === this._tokenizer.tokens[lastTokenIndex]) {
                 setTimeout(() => {
@@ -729,20 +908,6 @@ 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(e);
         }
@@ -756,16 +921,21 @@ 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);
+        const itemsToFilter = this._getItems().filter(item => !item.isGroupItem);
         const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
-        // Return the filtered items and their group items
-        return this.items.filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
+        this._getItems().forEach(item => {
+            if (isInstanceOfMultiComboBoxItem(item)) {
+                item._isVisible = filteredItems.includes(item);
+            }
+        });
+        return this.items.filter(item => {
+            if (item.isGroupItem) {
+                return item.items.some(listItem => listItem._isVisible) ? item : false;
+            }
+            return item._isVisible;
+        });
     }
     /**
      * Returns true if the group header should be shown (if there is a filtered suggestion item for this group item)
@@ -781,8 +951,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             return groupHasFilteredItems;
         }
     }
-    _afterOpenPicker() {
-        this._toggle();
+    _afterOpen() {
+        const action = this.open ? "open" : "close";
         if (!isPhone() && !this._isOpenedByKeyboard) {
             this._innerInput.focus();
         }
@@ -790,27 +960,45 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._itemToFocus?.focus();
         }
         else {
-            this.allItemsPopover?.focus();
+            this._getResponsivePopover().focus();
         }
+        this.fireDecoratorEvent(action);
         this._previouslySelectedItems = this._getSelectedItems();
         this._isOpenedByKeyboard = false;
     }
-    _toggle() {
-        this._open = !this._open;
-        this.fireEvent("open-change");
+    /**
+     * Retrieves a flat structure of all MultiComboBox items from the slotted nodes.
+     *
+     * @private
+     */
+    _getItems() {
+        const items = [];
+        const slottedItems = this.getSlottedNodes("items");
+        slottedItems.forEach(item => {
+            if (isInstanceOfMultiComboBoxItemGroup(item)) {
+                const groupItems = [item, ...item.items].filter(Boolean);
+                items.push(...groupItems);
+            }
+            else {
+                items.push(item);
+            }
+        });
+        return items;
     }
     _getSelectedItems() {
         // Angular 2 way data binding
-        this.selectedValues = this.items.filter(item => item.selected);
+        this.selectedValues = this._getItems().filter(item => item.selected);
         return this.selectedValues;
     }
     _listSelectionChange(e) {
         let changePrevented;
+        if (this.readonly) {
+            e.preventDefault();
+            return;
+        }
         if (!isPhone()) {
-            this._previouslySelectedItems = this._getSelectedItems();
+            this._previouslySelectedItems = e.detail.previouslySelectedItems;
         }
-        // sync list items and cb items
-        this.syncItems(e.target.items);
         // don't call selection change right after selection as user can cancel it on phone
         if (!isPhone()) {
             changePrevented = this.fireSelectionChange();
@@ -825,7 +1013,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.filterSelected = false;
         }
         if (!e.detail.selectionComponentPressed && !isSpace(castedEvent) && !isSpaceCtrl(castedEvent)) {
-            this.allItemsPopover?.close();
+            this.open = false;
             this.value = "";
             // if the item (not checkbox) is clicked, call the selection change
             if (isPhone()) {
@@ -835,63 +1023,54 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                     this._revertSelection();
                 }
             }
-            this.fireEvent("input");
+            this.fireDecoratorEvent("input");
+            return;
         }
         this.value = this.valueBeforeAutoComplete || "";
     }
-    syncItems(listItems) {
-        listItems.forEach(item => {
-            this.items.forEach(mcbItem => {
-                if (mcbItem._id === item.getAttribute("data-ui5-token-id")) {
-                    mcbItem.selected = item.selected;
-                }
-            });
-        });
-    }
     fireSelectionChange() {
-        const changePrevented = !this.fireEvent("selection-change", {
+        const changePrevented = !this.fireDecoratorEvent("selection-change", {
             items: this._getSelectedItems(),
-        }, true);
-        // Angular 2 way data binding
-        this.fireEvent("value-changed");
+        });
         return changePrevented;
     }
-    async _getRespPopover() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        this.allItemsPopover = staticAreaItem.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");
+    _getList() {
+        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.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() {
+    _beforeClose() {
+        this.open = false;
+    }
+    _afterClose() {
+        const action = this.open ? "open" : "close";
         // close device's keyboard and prevent further typing
         if (isPhone()) {
             this._dialogInputValueState = this.valueState;
-            this.blur();
+            this._tokenizer.expanded = false;
         }
-        this._toggle();
+        this.fireDecoratorEvent(action);
         this._iconPressed = false;
         this._preventTokenizerToggle = false;
         this.filterSelected = false;
     }
     _beforeOpen() {
-        this._itemsBeforeOpen = this.items.map(item => {
+        this.open = true;
+        this._itemsBeforeOpen = this._getItems().map(item => {
             return {
                 ref: item,
                 selected: item.selected,
@@ -903,8 +1082,46 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         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);
-        }
+            this.selectedItems = this._getItems().filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
+        }
+    }
+    _addLinksEventListeners() {
+        const links = this.linksInAriaValueStateHiddenText;
+        links.forEach((link, index) => {
+            this._linksListenersArray.push((e) => {
+                attachListeners(e, links, index, {
+                    closeValueState: () => {
+                        if (this.open) {
+                            this.open = false;
+                        }
+                        if (this.valueStateOpen) {
+                            this.valueStateOpen = false;
+                        }
+                    },
+                    navigateToItem: () => {
+                        this._handleLinkNavigation = false;
+                        if (this.open) {
+                            this._forwardFocusToInner();
+                            this._handleArrowDown();
+                        }
+                    },
+                    focusInput: () => {
+                        this._handleLinkNavigation = false;
+                        this._forwardFocusToInner();
+                    },
+                    isPopoverOpen: () => this.open,
+                });
+            });
+            link.addEventListener("keydown", this._linksListenersArray[index]);
+        });
+    }
+    _removeLinksEventListeners() {
+        const links = this.linksInAriaValueStateHiddenText;
+        links.forEach((link, index) => {
+            link.removeEventListener("keydown", this._linksListenersArray[index]);
+        });
+        this._linksListenersArray = [];
+        this._handleLinkNavigation = false;
     }
     _handleTypeAhead(item, filterValue) {
         if (!item) {
@@ -919,16 +1136,16 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._shouldAutocomplete = false;
     }
     _getFirstMatchingItem(current) {
-        if (!this.items.length) {
+        if (!this._getItems().length) {
             return;
         }
-        const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem && !item.selected);
+        const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.selected);
         if (matchingItems.length) {
             return matchingItems[0];
         }
     }
     _startsWithMatchingItems(str) {
-        return Filters.StartsWith(str, this.items, "text");
+        return Filters.StartsWith(str, this._getItems().filter(item => !item.isGroupItem), "text");
     }
     _revertSelection() {
         this._filteredItems.forEach(item => {
@@ -940,50 +1157,63 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         const autoCompletedChars = input && (input.selectionEnd || 0) - (input.selectionStart || 0);
         const value = input && input.value;
         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;
-            });
+            const list = this._getList();
+            const selectedListItemsCount = this.items.filter(item => item.selected).length;
+            this._allSelected = selectedListItemsCount > 0 && ((selectedListItemsCount === this.items.length) || (list?.getSlottedNodes("items").length === selectedListItemsCount));
         }
         this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
-        this.FormSupport = getFeature("FormSupport");
-        this._inputLastValue = value;
         if (input && !input.value) {
             this.valueBeforeAutoComplete = "";
-            this._filteredItems = this.items;
+            this._filteredItems = this._getItems();
         }
-        this.items.forEach(item => {
-            item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
-        });
         this.tokenizerAvailable = this._getSelectedItems().length > 0;
         this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
         if (!input || !value) {
+            this._getItems().forEach(item => {
+                if (isInstanceOfMultiComboBoxItem(item)) {
+                    item._isVisible = true;
+                    item._readonly = this.readonly;
+                }
+            });
             return;
         }
         // 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;
-            item && this._handleTypeAhead(item, value);
+            // Prevent typeahead during composition to avoid interfering with the composition process
+            if (!this._isComposing && item) {
+                // Keep the original typed in text intact
+                this.valueBeforeAutoComplete = value;
+                this._handleTypeAhead(item, value);
+            }
         }
         if (this._shouldFilterItems) {
             this._filteredItems = this._filterItems(this._shouldAutocomplete || !!autoCompletedChars ? this.valueBeforeAutoComplete : value);
         }
         else {
-            this._filteredItems = this.items;
+            this._filteredItems = this._getItems();
         }
     }
-    async onAfterRendering() {
-        await this._getRespPopover();
-        await this._getList();
-        this.toggle(this.shouldDisplayOnlyValueStateMessage);
+    onAfterRendering() {
+        this._getList();
+        this.valueStateOpen = this.shouldDisplayOnlyValueStateMessage || (this._handleLinkNavigation && !this.open);
         this.storeResponsivePopoverWidth();
         this._deleting = false;
         // force resize of the tokenizer on invalidation
         this._tokenizer._handleResize();
+        this._tokenizer.preventInitialFocus = true;
+        if (this.open && !isPhone()) {
+            this._tokenizer.expanded = true;
+        }
+        if (this._tokenizer.expanded && this.hasAttribute("focused")) {
+            this._tokenizer.scrollToEnd();
+        }
+        if (!arraysAreEqual(this._valueStateLinks, this.linksInAriaValueStateHiddenText)) {
+            this._removeLinksEventListeners();
+            this._addLinksEventListeners();
+            this._valueStateLinks = this.linksInAriaValueStateHiddenText;
+        }
     }
     get _isPhone() {
         return isPhone();
@@ -994,7 +1224,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _clear() {
         this.value = "";
         this._inputDom.value = "";
-        this.fireEvent("input");
+        this.fireDecoratorEvent("input");
         if (!this._isPhone) {
             this.focus();
         }
@@ -1007,21 +1237,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._listWidth = this.list.offsetWidth;
         }
     }
-    toggle(isToggled) {
-        if (isToggled && !this.open) {
-            this.openPopover();
-        }
-        else {
-            this.closePopover();
-        }
-    }
     handleCancel() {
         this._itemsBeforeOpen.forEach(item => {
-            if (item.ref instanceof MultiComboBoxItem) {
+            if (isInstanceOfMultiComboBoxItem(item.ref)) {
                 item.ref.selected = item.selected;
             }
         });
-        this._togglePopover();
+        this._toggleTokenizerPopover();
         this.value = this._valueBeforeOpen;
     }
     handleOK() {
@@ -1031,13 +1253,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 this._revertSelection();
             }
         }
-        if (!this.allowCustomValues) {
+        if (!this.noValidation) {
             this.value = "";
         }
-        this._togglePopover();
-    }
-    async openPopover() {
-        (await this._getPopover())?.showAt(this);
+        this._toggleTokenizerPopover();
     }
     _forwardFocusToInner() {
         this._innerInput.focus();
@@ -1049,34 +1268,30 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
         return this;
     }
-    async closePopover() {
-        (await this._getPopover())?.close();
-    }
-    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)) {
+        if (!isPhone() && e.target === this._innerInput) {
             this._innerInput.setSelectionRange(0, this.value.length);
         }
         this._tokenizer.tokens.forEach(token => {
@@ -1085,18 +1300,55 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.valueBeforeAutoComplete = "";
     }
     inputFocusOut(e) {
-        if (!this.shadowRoot.contains(e.relatedTarget) && !this._deleting && !this._clearingValue) {
+        const responsivePopover = this._getResponsivePopover();
+        const popover = this._getPopover();
+        const focusIsGoingInPopover = [responsivePopover, popover].some(popup => popup?.contains(e.relatedTarget));
+        const focusIsGoingInValueStatePopup = this?.contains(e.relatedTarget);
+        if (focusIsGoingInValueStatePopup || this._handleLinkNavigation) {
+            this.focused = false;
+            e.stopImmediatePropagation();
+            return;
+        }
+        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 = "";
             }
         }
     }
+    /**
+     * Enables IME composition handling.
+     * Dynamically loads the InputComposition feature and sets up event listeners.
+     * @private
+     */
+    _enableComposition() {
+        if (this._composition) {
+            return;
+        }
+        const setup = (InputCompositionClass) => {
+            this._composition = new InputCompositionClass({
+                getInputEl: () => this._innerInput,
+                updateCompositionState: (isComposing) => {
+                    this._isComposing = isComposing;
+                },
+            });
+            this._composition.addEventListeners();
+        };
+        if (MultiComboBox_1.composition) {
+            setup(MultiComboBox_1.composition);
+        }
+        else {
+            import("./features/InputComposition.js").then(CompositionModule => {
+                MultiComboBox_1.composition = CompositionModule.default;
+                setup(CompositionModule.default);
+            });
+        }
+    }
     get editable() {
         return !this.readonly;
     }
@@ -1104,17 +1356,21 @@ 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) || (this._dialogInputValueState !== ValueState.None);
+        const isValueStateSet = this.valueState !== ValueState.None;
+        if (isPhone()) {
+            return isValueStateSet || (this._dialogInputValueState !== ValueState.None);
+        }
+        return isValueStateSet;
     }
     get hasValueStateMessage() {
         const valueState = isPhone() ? this._dialogInputValueState : this.valueState;
-        return this.hasValueState && valueState !== ValueState.Success;
+        return this.hasValueState && valueState !== ValueState.Positive;
     }
     get ariaValueStateHiddenText() {
         if (!this.hasValueState) {
@@ -1127,7 +1383,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (this.shouldDisplayDefaultValueStateMessage) {
             return `${text} ${this.valueStateDefaultText || ""}`;
         }
-        return `${text}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+        let valueStateInnerText = this.valueStateMessage.map(el => el.textContent).join(" ");
+        // append space before the value state message text if it is not empty
+        valueStateInnerText = valueStateInnerText.trim().length ? ` ${valueStateInnerText}` : "";
+        if (this.getValueStateLinksShortcutsTextAcc) {
+            return `${text} ${this.getValueStateLinksShortcutsTextAcc}${valueStateInnerText}`;
+        }
+        return `${text}${valueStateInnerText}`;
     }
     get valueStateDefaultText() {
         const valueState = isPhone() ? this._dialogInputValueState : this.valueState;
@@ -1140,13 +1402,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return this.valueStateTextMappings[valueState];
     }
     get valueStateTextId() {
-        return this.hasValueState ? `ui5-multi-combobox-valueStateDesc` : undefined;
-    }
-    get valueStateMessageText() {
-        return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
+        return this.hasValueState ? `ui5-multi-combobox-valueStateDesc` : "";
     }
     get ariaLabelText() {
-        return getEffectiveAriaLabelText(this);
+        return getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);
     }
     /**
      * This method is relevant for sap_horizon theme only
@@ -1157,17 +1416,47 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             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",
         }[valueState];
     }
+    get linksInAriaValueStateHiddenText() {
+        const links = [];
+        if (this.valueStateMessage) {
+            this.valueStateMessage.forEach(element => {
+                if (element.children.length) {
+                    element.querySelectorAll("ui5-link").forEach(link => {
+                        links.push(link);
+                    });
+                }
+            });
+        }
+        return links;
+    }
+    get getValueStateLinksShortcutsTextAcc() {
+        const links = this.linksInAriaValueStateHiddenText;
+        if (!links.length) {
+            return "";
+        }
+        if (isMac()) {
+            return links.length === 1
+                ? MultiComboBox_1.i18nBundle.getText(VALUE_STATE_LINK_MAC)
+                : MultiComboBox_1.i18nBundle.getText(VALUE_STATE_LINKS_MAC);
+        }
+        return links.length === 1
+            ? MultiComboBox_1.i18nBundle.getText(VALUE_STATE_LINK)
+            : MultiComboBox_1.i18nBundle.getText(VALUE_STATE_LINKS);
+    }
+    get _valueStateLinksShortcutsTextAccId() {
+        return this.linksInAriaValueStateHiddenText.length > 0 ? `hiddenText-value-state-link-shortcut` : "";
+    }
     get _tokensCountText() {
         if (!this._tokenizer) {
             return;
         }
-        return this._tokenizer._tokensCountText();
+        return getTokensCountText(this.selectedValues.length);
     }
     get _tokensCountTextId() {
         return "ui5-multi-combobox-hiddenText-nMore";
@@ -1176,34 +1465,34 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return this._tokenizer.tokens.filter(token => token.selected).length;
     }
     get ariaDescribedByText() {
-        return this.valueStateTextId ? `${this._tokensCountTextId} ${this.valueStateTextId}` : `${this._tokensCountTextId}`;
+        return `${this._tokensCountTextId} ${this.valueStateTextId} ${this._valueStateLinksShortcutsTextAccId}`.trim();
     }
     get shouldDisplayDefaultValueStateMessage() {
         return !this.valueStateMessage.length && this.hasValueStateMessage;
     }
     get shouldDisplayOnlyValueStateMessage() {
-        return this.focused && !this.readonly && this.hasValueStateMessage && !this._iconPressed;
+        return this.focused && !this.readonly && this.hasValueStateMessage && !this._iconPressed && !this.open;
     }
     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("ui5-input").shadowRoot.querySelector("input");
+            if (this._getResponsivePopover()?.open) {
+                return this._getResponsivePopover().querySelector("[ui5-input]").shadowRoot.querySelector("input");
             }
         }
         return this._inputDom;
@@ -1221,7 +1510,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return MultiComboBox_1.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
     }
     get _tokenizerExpanded() {
-        if (isPhone() || this.readonly) {
+        if (isPhone()) {
             return false;
         }
         if (this._preventTokenizerToggle) {
@@ -1232,7 +1521,7 @@ 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;
@@ -1244,25 +1533,37 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return MultiComboBox_1.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
     }
     get selectAllCheckboxLabel() {
-        const items = this.items.filter(item => !item.isGroupItem);
+        const items = this._getItems().filter(item => !item.isGroupItem);
         const selected = items.filter(item => item.selected);
         return MultiComboBox_1.i18nBundle.getText(MCB_SELECTED_ITEMS, selected.length, items.length);
     }
+    get _popupLabel() {
+        return MultiComboBox_1.i18nBundle.getText(COMBOBOX_AVAILABLE_OPTIONS);
+    }
+    get responsivePopoverId() {
+        return `${this._id}-popover`;
+    }
     get classes() {
+        const popover = {
+            "ui5-multi-combobox-all-items-responsive-popover": true,
+            "ui5-suggestions-popover": true,
+            "ui5-popover-with-value-state-header-phone": this._isPhone && this.hasValueStateMessage,
+            "ui5-popover-with-value-state-header": !this._isPhone && this.hasValueStateMessage,
+        };
+        const popoverValueState = {
+            "ui5-valuestatemessage-root": true,
+            "ui5-valuestatemessage-header": true,
+            "ui5-valuestatemessage--success": (this.valueState === ValueState.Positive) || (isPhone() && this._dialogInputValueState === ValueState.Positive),
+            "ui5-valuestatemessage--error": (this.valueState === ValueState.Negative) || (isPhone() && this._dialogInputValueState === ValueState.Negative),
+            "ui5-valuestatemessage--warning": (this.valueState === ValueState.Critical) || (isPhone() && this._dialogInputValueState === ValueState.Critical),
+            "ui5-valuestatemessage--information": (this.valueState === ValueState.Information) || (isPhone() && this._dialogInputValueState === ValueState.Information),
+        };
         return {
-            popover: {
-                "ui5-multi-combobox-all-items-responsive-popover": true,
-                "ui5-suggestions-popover": true,
-                "ui5-popover-with-value-state-header-phone": this._isPhone && this.hasValueStateMessage,
-                "ui5-popover-with-value-state-header": !this._isPhone && this.hasValueStateMessage,
-            },
-            popoverValueState: {
-                "ui5-valuestatemessage-root": true,
-                "ui5-valuestatemessage-header": true,
-                "ui5-valuestatemessage--success": (this.valueState === ValueState.Success) || (this._dialogInputValueState === ValueState.Success),
-                "ui5-valuestatemessage--error": (this.valueState === ValueState.Error) || (this._dialogInputValueState === ValueState.Error),
-                "ui5-valuestatemessage--warning": (this.valueState === ValueState.Warning) || (this._dialogInputValueState === ValueState.Warning),
-                "ui5-valuestatemessage--information": (this.valueState === ValueState.Information) || (this._dialogInputValueState === ValueState.Information),
+            popover,
+            popoverValueState,
+            responsivePopoverHeaderValueState: {
+                "ui5-responsive-popover-header": true,
+                ...popoverValueState,
             },
         };
     }
@@ -1274,7 +1575,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 "display": this._listWidth === 0 ? "none" : "inline-block",
             },
             popoverHeader: {
-                "max-width": isPhone() ? "100%" : `${this._inputWidth}px`,
+                "max-width": isPhone() ? "100%" : `22rem`,
             },
             suggestionsPopover: {
                 "min-width": `${this._inputWidth}px`,
@@ -1282,13 +1583,13 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             },
         };
     }
-    static async onDefine() {
-        MultiComboBox_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-    }
 };
 __decorate([
     property()
 ], MultiComboBox.prototype, "value", void 0);
+__decorate([
+    property()
+], MultiComboBox.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "noTypeahead", void 0);
@@ -1297,12 +1598,12 @@ __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);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.None })
+    property()
 ], MultiComboBox.prototype, "valueState", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1311,7 +1612,7 @@ __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "required", void 0);
 __decorate([
-    property({ type: ComboBoxFilter, defaultValue: ComboBoxFilter.StartsWithPerTerm })
+    property()
 ], MultiComboBox.prototype, "filter", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1326,19 +1627,25 @@ __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "showSelectAll", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.None })
+    property()
 ], MultiComboBox.prototype, "_effectiveValueState", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBox.prototype, "valueStateOpen", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBox.prototype, "tokenizerOpen", void 0);
 __decorate([
     property({ type: Boolean })
-], MultiComboBox.prototype, "_open", void 0);
+], MultiComboBox.prototype, "open", void 0);
 __decorate([
     property()
 ], MultiComboBox.prototype, "_valueBeforeOpen", void 0);
 __decorate([
-    property({ type: Object, noAttribute: true, multiple: true })
+    property({ type: Array })
 ], MultiComboBox.prototype, "_filteredItems", void 0);
 __decorate([
-    property({ type: Object, noAttribute: true, multiple: true })
+    property({ type: Array })
 ], MultiComboBox.prototype, "_previouslySelectedItems", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1353,10 +1660,10 @@ __decorate([
     property({ type: Boolean, noAttribute: true })
 ], MultiComboBox.prototype, "_iconPressed", void 0);
 __decorate([
-    property({ validator: Integer, noAttribute: true })
+    property({ type: Number, noAttribute: true })
 ], MultiComboBox.prototype, "_inputWidth", void 0);
 __decorate([
-    property({ validator: Integer, noAttribute: true, defaultValue: 0 })
+    property({ type: Number, noAttribute: true })
 ], MultiComboBox.prototype, "_listWidth", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
@@ -1368,13 +1675,27 @@ __decorate([
     property({ type: Boolean, noAttribute: true })
 ], MultiComboBox.prototype, "_effectiveShowClearIcon", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.None })
+    property()
 ], MultiComboBox.prototype, "_dialogInputValueState", void 0);
 __decorate([
     property({ type: Boolean })
 ], MultiComboBox.prototype, "tokenizerAvailable", void 0);
 __decorate([
-    slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
+    property({ type: Boolean })
+], MultiComboBox.prototype, "_handleLinkNavigation", void 0);
+__decorate([
+    property({ type: Array })
+], MultiComboBox.prototype, "_linksListenersArray", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBox.prototype, "_isComposing", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        invalidateOnChildChange: true,
+        individualSlots: true,
+    })
 ], MultiComboBox.prototype, "items", void 0);
 __decorate([
     slot()
@@ -1382,27 +1703,35 @@ __decorate([
 __decorate([
     slot()
 ], MultiComboBox.prototype, "valueStateMessage", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], MultiComboBox, "i18nBundle", void 0);
 MultiComboBox = MultiComboBox_1 = __decorate([
     customElement({
         tag: "ui5-multi-combobox",
         languageAware: true,
-        renderer: litRender,
+        formAssociated: true,
+        renderer: jsxRender,
         template: MultiComboBoxTemplate,
-        staticAreaTemplate: MultiComboBoxPopoverTemplate,
-        styles: multiCbxStyles,
-        staticAreaStyles: [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss, MultiComboBoxPopover],
+        styles: [
+            multiCbxStyles,
+            ResponsivePopoverCommonCss,
+            ValueStateMessageCss,
+            SuggestionsCss,
+            MultiComboBoxPopover,
+        ],
         dependencies: [
             MultiComboBoxItem,
-            MultiComboBoxGroupItem,
+            MultiComboBoxItemGroup,
             Tokenizer,
             Token,
-            Input,
             Icon,
+            Input,
             ResponsivePopover,
             Popover,
             List,
-            StandardListItem,
-            GroupHeaderListItem,
+            ListItemStandard,
+            ListItemGroup,
             ToggleButton,
             Button,
             CheckBox,
@@ -1414,34 +1743,40 @@ MultiComboBox = MultiComboBox_1 = __decorate([
      * @public
      */
     ,
-    event("change")
+    event("change", {
+        bubbles: true,
+    })
     /**
      * Fired when the value of the component changes at each keystroke or clear icon is pressed.
      * @public
      */
     ,
-    event("input")
+    event("input", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the dropdown is opened.
+     * @since 2.0.0
+     * @public
+     */
+    ,
+    event("open")
     /**
-     * Fired when the dropdown is opened or closed.
-     * @since 1.0.0-rc.5
+     * Fired when the dropdown is closed.
+     * @since 2.0.0
      * @public
      */
     ,
-    event("open-change")
+    event("close")
     /**
      * Fired when selection is changed by user interaction.
      * @param {IMultiComboBoxItem[]} items an array of the selected items.
      * @public
-     * @allowPreventDefault
      */
     ,
     event("selection-change", {
-        detail: {
-            /**
-             * @public
-             */
-            items: { type: (Array) },
-        },
+        bubbles: true,
+        cancelable: true,
     })
 ], MultiComboBox);
 MultiComboBox.define();