@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/dist/Input.js

@@ -15,11 +15,10 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { isPhone, isAndroid, } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { getFeature, getComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { isUp, isDown, isSpace, isEnter, isBackSpace, isDelete, isEscape, isTabNext, isPageUp, isPageDown, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import { getAssociatedLabelForTexts, getAllAccessibleNameRefTexts, registerUI5Element, deregisterUI5Element, } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
@@ -32,23 +31,22 @@ import "@ui5/webcomponents-icons/dist/information.js";
 import InputType from "./types/InputType.js";
 import Popover from "./Popover.js";
 import Icon from "./Icon.js";
-import "./types/PopoverHorizontalAlign.js";
 // Templates
 import InputTemplate from "./generated/templates/InputTemplate.lit.js";
+import InputPopoverTemplate from "./generated/templates/InputPopoverTemplate.lit.js";
 import { StartsWith } from "./Filters.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS, INPUT_SUGGESTIONS_TITLE, INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, INPUT_CLEAR_ICON_ACC_NAME, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS, INPUT_SUGGESTIONS_TITLE, INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, INPUT_CLEAR_ICON_ACC_NAME, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import inputStyles from "./generated/themes/Input.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 ResponsivePopover from "./ResponsivePopover.js";
 // all sementic events
 var INPUT_EVENTS;
 (function (INPUT_EVENTS) {
     INPUT_EVENTS["CHANGE"] = "change";
     INPUT_EVENTS["INPUT"] = "input";
-    INPUT_EVENTS["SELECTION_CHANGE"] = "selection-change";
+    INPUT_EVENTS["SUGGESTION_ITEM_SELECT"] = "suggestion-item-select";
 })(INPUT_EVENTS || (INPUT_EVENTS = {}));
 // all user interactions
 var INPUT_ACTIONS;
@@ -81,8 +79,8 @@ var INPUT_ACTIONS;
  *
  * - [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.
  * - [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.
- * - [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.
- * - [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.
+ * - [Down] - Focuses the next matching item in the suggestion list.
+ * - [Up] - Focuses the previous matching item in the suggestion list.
  * - [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.
  * - [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.
  * - [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.
@@ -98,18 +96,6 @@ var INPUT_ACTIONS;
  * @public
  */
 let Input = Input_1 = class Input extends UI5Element {
-    get formValidityMessage() {
-        return Input_1.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
-    }
-    get formValidity() {
-        return { valueMissing: this.required && !this.value };
-    }
-    async formElementAnchor() {
-        return this.getFocusDomRefAsync();
-    }
-    get formFormattedValue() {
-        return this.value;
-    }
     constructor() {
         super();
         // Indicates if there is selected suggestionItem.
@@ -122,7 +108,9 @@ let Input = Input_1 = class Input extends UI5Element {
         // Represents the value before user moves selection between the suggestion items
         // and its value remains the same when the user navigates up or down the list.
         // Note: Used to cancel selection upon [Escape].
-        this.valueBeforeSelectionStart = "";
+        this.valueBeforeItemPreview = "";
+        // Indicates if the user selection has been canceled with [Escape].
+        this.suggestionSelectionCancelled = false;
         // tracks the value between focus in and focus out to detect that change event should be fired.
         this.previousValue = "";
         // Indicates, if the component is rendering for first time.
@@ -135,8 +123,6 @@ let Input = Input_1 = class Input extends UI5Element {
         this.isTyping = false;
         // Suggestions array initialization
         this.suggestionObjects = [];
-        // Indicates whether the value of the input is comming from a suggestion item
-        this._isLatestValueFromSuggestions = false;
         this._handleResizeBound = this._handleResize.bind(this);
         this._keepInnerValue = false;
         this._focusedAfterClear = false;
@@ -155,19 +141,14 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         if (this.showSuggestions) {
             this.enableSuggestions();
-            this.suggestionObjects = this.Suggestions.defaultSlotProperties(this.typedInValue);
+            this.suggestionObjects = this.Suggestions?.defaultSlotProperties(this.typedInValue) || [];
         }
         this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
         this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
+        this.FormSupport = getFeature("FormSupport");
         const hasItems = !!this.suggestionItems.length;
         const hasValue = !!this.value;
         const isFocused = this.shadowRoot.querySelector("input") === getActiveElement();
-        if (this.shouldDisplayOnlyValueStateMessage) {
-            this.openValueStatePopover();
-        }
-        else {
-            this.closeValueStatePopover();
-        }
         if (this._isPhone) {
             this.open = this.openOnMobile;
         }
@@ -177,6 +158,12 @@ let Input = Input_1 = class Input extends UI5Element {
         else {
             this.open = hasValue && hasItems && isFocused && this.isTyping;
         }
+        if (this.FormSupport) {
+            this.FormSupport.syncNativeHiddenInput(this);
+        }
+        else if (this.name) {
+            console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
+        }
         const value = this.value;
         const innerInput = this.getInputDOMRefSync();
         if (!innerInput || !value) {
@@ -192,10 +179,22 @@ let Input = Input_1 = class Input extends UI5Element {
             }
         }
     }
-    onAfterRendering() {
+    get _effectiveShowSuggestions() {
+        return !!(this.showSuggestions && this.Suggestions);
+    }
+    async onAfterRendering() {
         const innerInput = this.getInputDOMRefSync();
-        if (this.Suggestions && this.showSuggestions && this.Suggestions._getPicker()) {
-            this._listWidth = this.Suggestions._getListWidth();
+        if (this.Suggestions && this.showSuggestions) {
+            this.Suggestions.toggle(this.open, {
+                preventFocusRestore: true,
+            });
+            this._listWidth = await this.Suggestions._getListWidth();
+        }
+        if (this.shouldDisplayOnlyValueStateMessage) {
+            this.openPopover();
+        }
+        else {
+            this.closePopover();
         }
         if (this._performTextSelection) {
             // this is required to syncronize lit-html input's value and user's input
@@ -257,12 +256,12 @@ let Input = Input_1 = class Input extends UI5Element {
         this._keyDown = false;
     }
     _handleUp(e) {
-        if (this.Suggestions && this.Suggestions.isOpened()) {
+        if (this.Suggestions?.isOpened()) {
             this.Suggestions.onUp(e);
         }
     }
     _handleDown(e) {
-        if (this.Suggestions && this.Suggestions.isOpened()) {
+        if (this.Suggestions?.isOpened()) {
             this.Suggestions.onDown(e);
         }
     }
@@ -277,21 +276,18 @@ let Input = Input_1 = class Input extends UI5Element {
         }
     }
     _handleEnter(e) {
-        const suggestionItemPressed = !!(this.Suggestions && this.Suggestions.onEnter(e));
+        // if a group item is focused, this is false
+        const suggestionItemPressed = !!(this.Suggestions?.onEnter(e));
         const innerInput = this.getInputDOMRefSync();
-        let matchingIndex = -1;
         // Check for autocompleted item
-        const matchingItem = this.suggestionItems.find((item, index) => {
-            matchingIndex = index;
+        const matchingItem = this.suggestionItems.find(item => {
             return (item.text && item.text === this.value) || (item.textContent === this.value);
         });
         if (matchingItem) {
             const itemText = matchingItem.text ? matchingItem.text : (matchingItem.textContent || "");
-            const listItem = this.Suggestions._getItems()[matchingIndex];
             innerInput.setSelectionRange(itemText.length, itemText.length);
             if (!suggestionItemPressed) {
-                this.fireSelectionChange(matchingItem, listItem, true);
-                this.acceptSuggestion(matchingItem, true);
+                this.selectSuggestion(matchingItem, true);
                 this.open = false;
             }
         }
@@ -300,8 +296,8 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         if (!suggestionItemPressed) {
             this.lastConfirmedValue = this.value;
-            if (this._internals?.form) {
-                submitForm(this);
+            if (this.FormSupport) {
+                this.FormSupport.triggerFormSubmit(this);
             }
             return;
         }
@@ -309,7 +305,7 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     _handlePageUp(e) {
         if (this._isSuggestionsFocused) {
-            this.Suggestions.onPageUp(e);
+            this.Suggestions?.onPageUp(e);
         }
         else {
             e.preventDefault();
@@ -317,7 +313,7 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     _handlePageDown(e) {
         if (this._isSuggestionsFocused) {
-            this.Suggestions.onPageDown(e);
+            this.Suggestions?.onPageDown(e);
         }
         else {
             e.preventDefault();
@@ -325,12 +321,12 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     _handleHome(e) {
         if (this._isSuggestionsFocused) {
-            this.Suggestions.onHome(e);
+            this.Suggestions?.onHome(e);
         }
     }
     _handleEnd(e) {
         if (this._isSuggestionsFocused) {
-            this.Suggestions.onEnd(e);
+            this.Suggestions?.onEnd(e);
         }
     }
     _handleEscape() {
@@ -343,9 +339,12 @@ let Input = Input_1 = class Input extends UI5Element {
             this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
             return;
         }
-        if (isOpen && this.Suggestions._isItemOnTarget()) {
+        if (isOpen && this.Suggestions?._isItemOnTarget()) {
             // Restore the value.
-            this.value = this.typedInValue || this.valueBeforeSelectionStart;
+            this.value = this.typedInValue || this.valueBeforeItemPreview;
+            // Mark that the selection has been cancelled, so the popover can close
+            // and not reopen, due to receiving focus.
+            this.suggestionSelectionCancelled = true;
             this.focused = true;
             return;
         }
@@ -357,12 +356,13 @@ let Input = Input_1 = class Input extends UI5Element {
             this.focused = true;
         }
     }
-    _onfocusin(e) {
+    async _onfocusin(e) {
+        await this.getInputDOMRef();
         this.focused = true; // invalidating property
         if (!this._focusedAfterClear) {
             this.previousValue = this.value;
         }
-        this.valueBeforeSelectionStart = this.value;
+        this.valueBeforeItemPreview = this.value;
         this._inputIconFocused = !!e.target && e.target === this.querySelector("[ui5-icon]");
         this._focusedAfterClear = false;
     }
@@ -373,21 +373,29 @@ let Input = Input_1 = class Input extends UI5Element {
     innerFocusIn() { }
     _onfocusout(e) {
         const toBeFocused = e.relatedTarget;
-        if (this.Suggestions?._getPicker().contains(toBeFocused) || this.getSlottedNodes("valueStateMessage").some(el => el.contains(toBeFocused))) {
-            return;
-        }
+        const focusedOutToSuggestions = this.Suggestions && toBeFocused && toBeFocused.shadowRoot && toBeFocused.shadowRoot.contains(this.Suggestions.responsivePopover);
+        const focusedOutToValueStateMessage = toBeFocused && toBeFocused.shadowRoot && toBeFocused.shadowRoot.querySelector(".ui5-valuestatemessage-root");
         this._keepInnerValue = false;
-        this.focused = false; // invalidating property
         if (this.showClearIcon && !this._effectiveShowClearIcon) {
             this._clearIconClicked = false;
             this._handleChange();
         }
+        // if focusout is triggered by pressing on suggestion item or value state message popover, skip invalidation, because re-rendering
+        // will happen before "itemPress" event, which will make item "active" state not visualized
+        if (focusedOutToSuggestions || focusedOutToValueStateMessage) {
+            e.stopImmediatePropagation();
+            return;
+        }
+        if (toBeFocused && (toBeFocused).classList.contains(this._id)) {
+            return;
+        }
         this.open = false;
         this._clearPopoverFocusAndSelection();
         if (!this._clearIconClicked) {
             this.previousValue = "";
         }
         this.lastConfirmedValue = "";
+        this.focused = false; // invalidating property
         this.isTyping = false;
         this._forceOpen = false;
     }
@@ -397,8 +405,8 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         this._isValueStateFocused = false;
         this.hasSuggestionItemSelected = false;
-        this.Suggestions._deselectItems();
-        this.Suggestions._clearItemFocus();
+        this.Suggestions?._deselectItems();
+        this.Suggestions?._clearItemFocus();
     }
     _click() {
         if (isPhone() && !this.readonly && this.Suggestions) {
@@ -419,9 +427,8 @@ let Input = Input_1 = class Input extends UI5Element {
     }
     _clear() {
         this.value = "";
-        this.fireEvent(INPUT_EVENTS.INPUT, { inputType: "" });
+        this.fireEvent(INPUT_EVENTS.INPUT);
         if (!this._isPhone) {
-            this.fireResetSelectionChange();
             this.focus();
             this._focusedAfterClear = true;
         }
@@ -458,6 +465,7 @@ let Input = Input_1 = class Input extends UI5Element {
             "historyUndo",
         ];
         this._shouldAutocomplete = !allowedEventTypes.includes(eventType) && !this.noTypeahead;
+        this.suggestionSelectionCancelled = false;
         if (e instanceof InputEvent) {
             // ---- Special cases of numeric Input ----
             // ---------------- Start -----------------
@@ -527,18 +535,16 @@ let Input = Input_1 = class Input extends UI5Element {
         this._associatedLabelsTexts = getAssociatedLabelForTexts(this);
         this._accessibleLabelsRefTexts = getAllAccessibleNameRefTexts(this);
     }
-    _closePicker() {
-        this.open = false;
-        this.openOnMobile = false;
+    _closeRespPopover() {
+        this.Suggestions.close(true);
     }
-    _afterOpenPicker() {
+    async _afterOpenPopover() {
         // Set initial focus to the native input
         if (isPhone()) {
-            (this.getInputDOMRef()).focus();
+            (await this.getInputDOMRef()).focus();
         }
-        this._handlePickerAfterOpen();
     }
-    _afterClosePicker() {
+    _afterClosePopover() {
         this.announceSelectedItem();
         // close device's keyboard and prevent further typing
         if (isPhone()) {
@@ -547,42 +553,31 @@ let Input = Input_1 = class Input extends UI5Element {
         }
         this.openOnMobile = false;
         this.open = false;
-        this.isTyping = false;
         this._forceOpen = false;
         if (this.hasSuggestionItemSelected) {
             this.focus();
         }
-        this._handlePickerAfterClose();
-    }
-    _handleSuggestionItemPress(e) {
-        this.Suggestions?.fnOnSuggestionItemPress(e);
-    }
-    _handleSelectionChange(e) {
-        this.Suggestions?.fnOnSuggestionItemPress(e);
-    }
-    _handleItemMouseOver(e) {
-        this.Suggestions?.fnOnSuggestionItemMouseOver(e);
     }
-    _handleItemMouseOut(e) {
-        this.Suggestions?.fnOnSuggestionItemMouseOut(e);
-    }
-    _handlePickerAfterOpen() {
-        this.Suggestions?._onOpen();
-    }
-    _handlePickerAfterClose() {
-        this.Suggestions?._onClose();
-    }
-    openValueStatePopover() {
-        this.valueStateOpen = true;
+    /**
+     * Checks if the value state popover is open.
+     */
+    isValueStateOpened() {
+        return !!this._isPopoverOpen;
     }
-    closeValueStatePopover() {
-        this.valueStateOpen = false;
+    async openPopover() {
+        const popover = await this._getPopover();
+        if (popover) {
+            this._isPopoverOpen = true;
+            popover.showAt(this);
+        }
     }
-    _handleValueStatePopoverAfterClose() {
-        this.valueStateOpen = false;
+    async closePopover() {
+        const popover = await this._getPopover();
+        popover && popover.close();
     }
-    _getValueStatePopover() {
-        return this.shadowRoot.querySelector("[ui5-popover]");
+    async _getPopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector("[ui5-popover]");
     }
     /**
      * Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open.
@@ -599,80 +594,123 @@ let Input = Input_1 = class Input extends UI5Element {
         if (this.Suggestions) {
             return;
         }
-        const Suggestions = getFeature("InputSuggestions");
+        const Suggestions = getComponentFeature("InputSuggestions");
         if (Suggestions) {
             this.Suggestions = new Suggestions(this, "suggestionItems", true, false);
         }
-        else {
-            throw new Error(`You have to import "@ui5/webcomponents/dist/features/InputSuggestions.js" module to use ui5-input suggestions`);
-        }
     }
-    acceptSuggestion(item, keyboardUsed) {
+    selectSuggestion(item, keyboardUsed) {
         if (item.groupItem) {
             return;
         }
         const value = this.typedInValue || this.value;
         const itemText = item.text || item.textContent || ""; // keep textContent for compatibility
-        const fireChange = keyboardUsed
+        const fireInput = keyboardUsed
             ? this.valueBeforeItemSelection !== itemText : value !== itemText;
         this.hasSuggestionItemSelected = true;
-        if (fireChange) {
+        const valueOriginal = this.value;
+        const valueBeforeItemSelectionOriginal = this.valueBeforeItemSelection;
+        const lastConfirmedValueOriginal = this.lastConfirmedValue;
+        const performTextSelectionOriginal = this._performTextSelection;
+        const typedInValueOriginal = this.typedInValue;
+        const previousValueOriginal = this.previousValue;
+        if (fireInput) {
             this.value = itemText;
             this.valueBeforeItemSelection = itemText;
             this.lastConfirmedValue = itemText;
             this._performTextSelection = true;
             this.fireEvent(INPUT_EVENTS.CHANGE);
+            if (isPhone()) {
+                this.fireEvent(INPUT_EVENTS.INPUT);
+            }
             // value might change in the change event handler
             this.typedInValue = this.value;
             this.previousValue = this.value;
         }
-        this.valueBeforeSelectionStart = "";
+        this.valueBeforeItemPreview = "";
+        this.suggestionSelectionCancelled = false;
+        // Fire suggestion-item-select event after input change events for backward compatibility, but revert all input properties set before suggestion was prevented.
+        // For v2.0 this code will be reworked.
+        const isCancelledByUser = !this.fireEvent(INPUT_EVENTS.SUGGESTION_ITEM_SELECT, { item }, true);
+        if (isCancelledByUser) {
+            this.Suggestions?._clearSelectedSuggestionAndAccInfo();
+            this.hasSuggestionItemSelected = false;
+            this.suggestionSelectionCancelled = true;
+            if (fireInput) {
+                // revert properties set during fireInput
+                if (itemText === this.value) { // If no chnages were made to the input value after suggestion-item-select was prevented - revert value to the original text
+                    this.value = valueOriginal;
+                }
+                this.valueBeforeItemSelection = valueBeforeItemSelectionOriginal;
+                this.lastConfirmedValue = lastConfirmedValueOriginal;
+                this._performTextSelection = performTextSelectionOriginal;
+                this.typedInValue = typedInValueOriginal;
+                this.previousValue = previousValueOriginal;
+            }
+        }
         this.isTyping = false;
         this.openOnMobile = false;
         this._forceOpen = false;
     }
+    previewSuggestion(item) {
+        this.valueBeforeItemSelection = this.value;
+        this.updateValueOnPreview(item);
+        this.announceSelectedItem();
+        this._previewItem = item;
+    }
     /**
-     * Updates the input value on item select.
-     * @param item The item that is on select
+     * Updates the input value on item preview.
+     * @param item The item that is on preview
      */
-    updateValueOnSelect(item) {
-        const nonSelectable = item.type === "Inactive" || item.groupItem;
-        const itemValue = nonSelectable ? this.valueBeforeSelectionStart : (item.effectiveTitle || item.textContent || "");
+    updateValueOnPreview(item) {
+        const noPreview = item.type === "Inactive" || item.groupItem;
+        const itemValue = noPreview ? this.valueBeforeItemPreview : (item.effectiveTitle || item.textContent || "");
         this.value = itemValue;
         this._performTextSelection = true;
     }
-    fireEventByAction(action, e) {
+    /**
+     * The suggestion item on preview.
+     * @default null
+     * @public
+     */
+    get previewItem() {
+        if (!this._previewItem) {
+            return null;
+        }
+        return this.getSuggestionByListItem(this._previewItem);
+    }
+    async fireEventByAction(action, e) {
         if (this.disabled || this.readonly) {
             return;
         }
-        const inputValue = this.getInputValue();
+        const inputValue = await this.getInputValue();
         const isUserInput = action === INPUT_ACTIONS.ACTION_ENTER;
         this.value = inputValue;
         this.typedInValue = inputValue;
-        this.valueBeforeSelectionStart = inputValue;
+        this.valueBeforeItemPreview = inputValue;
         if (isUserInput) { // input
             this.fireEvent(INPUT_EVENTS.INPUT, { inputType: e.inputType });
             // Angular two way data binding
             this.fireEvent("value-changed");
-            this.fireResetSelectionChange();
         }
     }
-    getInputValue() {
+    async getInputValue() {
         const domRef = this.getDomRef();
         if (domRef) {
-            return (this.getInputDOMRef()).value;
+            return (await this.getInputDOMRef()).value;
         }
         return "";
     }
-    getInputDOMRef() {
+    async getInputDOMRef() {
         if (isPhone() && this.Suggestions) {
-            return this.Suggestions._getPicker().querySelector(".ui5-input-inner-phone");
+            await this.Suggestions._getSuggestionPopover();
+            return this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
         }
         return this.nativeInput;
     }
     getInputDOMRefSync() {
-        if (isPhone() && this.Suggestions?._getPicker()) {
-            return this.Suggestions._getPicker().querySelector(".ui5-input-inner-phone").shadowRoot.querySelector("input");
+        if (isPhone() && this.Suggestions && this.Suggestions.responsivePopover) {
+            return this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone").shadowRoot.querySelector("input");
         }
         return this.nativeInput;
     }
@@ -687,6 +725,9 @@ let Input = Input_1 = class Input extends UI5Element {
     get nativeInputWidth() {
         return this.nativeInput ? this.nativeInput.offsetWidth : 0;
     }
+    getLabelableElementId() {
+        return this.getInputId();
+    }
     getSuggestionByListItem(item) {
         const key = parseInt(item.getAttribute("data-ui5-key"));
         return this.suggestionItems[key];
@@ -700,7 +741,10 @@ let Input = Input_1 = class Input extends UI5Element {
         if (!this.Suggestions) {
             return Promise.resolve(false);
         }
-        return this.Suggestions._isScrollable();
+        return this.Suggestions?._isScrollable();
+    }
+    getInputId() {
+        return `${this._id}-inner`;
     }
     /* Suggestions interface  */
     onItemMouseOver(e) {
@@ -722,50 +766,36 @@ let Input = Input_1 = class Input extends UI5Element {
     onItemMouseDown(e) {
         e.preventDefault();
     }
-    onItemSelected(suggestionItem, listItem, keyboardUsed) {
-        const shouldFireSelectionChange = !keyboardUsed && !listItem?.focused && this.valueBeforeItemSelection !== suggestionItem.text;
-        if (shouldFireSelectionChange) {
-            this.fireSelectionChange(suggestionItem, listItem, true);
-        }
-        this.acceptSuggestion(suggestionItem, keyboardUsed);
+    onItemSelected(item, keyboardUsed) {
+        this.selectSuggestion(item, keyboardUsed);
     }
-    onItemSelect(item) {
-        this.valueBeforeItemSelection = this.value;
-        this.updateValueOnSelect(item);
-        this.announceSelectedItem();
-        this.fireSelectionChange(this.getSuggestionByListItem(item), item, true);
+    onItemPreviewed(item) {
+        this.previewSuggestion(item);
+        this.fireEvent("suggestion-item-preview", {
+            item: this.getSuggestionByListItem(item),
+            targetRef: item,
+        });
     }
     get valueStateTypeMappings() {
         return {
-            "Positive": Input_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+            "Success": Input_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
             "Information": Input_1.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
-            "Negative": Input_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-            "Critical": Input_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+            "Error": Input_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+            "Warning": Input_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
         };
     }
     valueStateTextMappings() {
         return {
-            "Positive": Input_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            "Success": Input_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
             "Information": Input_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
-            "Negative": Input_1.i18nBundle.getText(VALUE_STATE_ERROR),
-            "Critical": Input_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            "Error": Input_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            "Warning": Input_1.i18nBundle.getText(VALUE_STATE_WARNING),
         };
     }
     announceSelectedItem() {
-        const invisibleText = this.shadowRoot.querySelector(`#selectionText`);
+        const invisibleText = this.shadowRoot.querySelector(`[id="${this._id}-selectionText"]`);
         invisibleText.textContent = this.itemSelectionAnnounce;
     }
-    fireSelectionChange(item, targetRef, isValueFromSuggestions) {
-        if (this.Suggestions) {
-            this.fireEvent(INPUT_EVENTS.SELECTION_CHANGE, { item, targetRef });
-            this._isLatestValueFromSuggestions = isValueFromSuggestions;
-        }
-    }
-    fireResetSelectionChange() {
-        if (this._isLatestValueFromSuggestions) {
-            this.fireSelectionChange(null, null, false);
-        }
-    }
     get _readonly() {
         return this.readonly && !this.disabled;
     }
@@ -782,20 +812,20 @@ let Input = Input_1 = class Input extends UI5Element {
         return this.type === InputType.Number;
     }
     get suggestionsTextId() {
-        return this.showSuggestions ? `suggestionsText` : "";
+        return this.showSuggestions ? `${this._id}-suggestionsText` : "";
     }
     get valueStateTextId() {
-        return this.hasValueState ? `valueStateDesc` : "";
+        return this.hasValueState ? `${this._id}-valueStateDesc` : "";
     }
     get accInfo() {
-        const ariaHasPopupDefault = this.showSuggestions ? "dialog" : undefined;
+        const ariaHasPopupDefault = this.showSuggestions ? "true" : undefined;
         const ariaAutoCompleteDefault = this.showSuggestions ? "list" : undefined;
         const ariaDescribedBy = this._inputAccInfo.ariaDescribedBy ? `${this.suggestionsTextId} ${this.valueStateTextId} ${this._inputAccInfo.ariaDescribedBy}`.trim() : `${this.suggestionsTextId} ${this.valueStateTextId}`.trim();
         const info = {
             "input": {
                 "ariaRoledescription": this._inputAccInfo && (this._inputAccInfo.ariaRoledescription || undefined),
                 "ariaDescribedBy": ariaDescribedBy || undefined,
-                "ariaInvalid": this.valueState === ValueState.Negative ? "true" : undefined,
+                "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
                 "ariaHasPopup": this._inputAccInfo.ariaHasPopup ? this._inputAccInfo.ariaHasPopup : ariaHasPopupDefault,
                 "ariaAutoComplete": this._inputAccInfo.ariaAutoComplete ? this._inputAccInfo.ariaAutoComplete : ariaAutoCompleteDefault,
                 "role": this._inputAccInfo && this._inputAccInfo.role,
@@ -822,7 +852,7 @@ let Input = Input_1 = class Input extends UI5Element {
         if (this.shouldDisplayDefaultValueStateMessage) {
             return this.valueStateText ? `${valueState} ${this.valueStateText}` : valueState;
         }
-        return `${valueState}`.concat(" ", this.valueStateMessage.map(el => el.textContent).join(" "));
+        return `${valueState}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
     }
     get itemSelectionAnnounce() {
         return this.Suggestions ? this.Suggestions.itemSelectionAnnounce : "";
@@ -842,9 +872,9 @@ let Input = Input_1 = class Input extends UI5Element {
             popoverValueState: {
                 "ui5-valuestatemessage-root": true,
                 "ui5-valuestatemessage-header": true,
-                "ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
-                "ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
-                "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
+                "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,
             },
         };
@@ -872,6 +902,9 @@ let Input = Input_1 = class Input extends UI5Element {
     get suggestionSeparators() {
         return "None";
     }
+    get valueStateMessageText() {
+        return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
+    }
     get shouldDisplayOnlyValueStateMessage() {
         return this.hasValueStateMessage && !this.readonly && !this.open && this.focused;
     }
@@ -882,7 +915,7 @@ let Input = Input_1 = class Input extends UI5Element {
         return this.valueState !== ValueState.None;
     }
     get hasValueStateMessage() {
-        return this.hasValueState && this.valueState !== ValueState.Positive
+        return this.hasValueState && this.valueState !== ValueState.Success
             && (!this._inputIconFocused // Handles the cases when valueStateMessage is forwarded (from datepicker e.g.)
                 || !!(this._isPhone && this.Suggestions)); // Handles Input with suggestions on mobile
     }
@@ -893,7 +926,7 @@ let Input = Input_1 = class Input extends UI5Element {
         return Input_1.i18nBundle.getText(INPUT_SUGGESTIONS);
     }
     get availableSuggestionsCount() {
-        if (this.showSuggestions && (this.value || this.Suggestions.isOpened())) {
+        if (this.showSuggestions && (this.value || this.Suggestions?.isOpened())) {
             const nonGroupItems = this.suggestionObjects.filter(item => !item.groupItem);
             switch (nonGroupItems.length) {
                 case 0:
@@ -913,7 +946,7 @@ let Input = Input_1 = class Input extends UI5Element {
         return isPhone();
     }
     get _isSuggestionsFocused() {
-        return !this.focused && this.Suggestions && this.Suggestions.isOpened();
+        return !this.focused && this.Suggestions?.isOpened();
     }
     /**
      * Returns the placeholder value.
@@ -927,9 +960,9 @@ let Input = Input_1 = class Input extends UI5Element {
      */
     get _valueStateInputIcon() {
         const iconPerValueState = {
-            Negative: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20ZM7.70711 13.7071C7.31658 14.0976 6.68342 14.0976 6.29289 13.7071C5.90237 13.3166 5.90237 12.6834 6.29289 12.2929L8.58579 10L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L10 8.58579L12.2929 6.29289C12.6834 5.90237 13.3166 5.90237 13.7071 6.29289C14.0976 6.68342 14.0976 7.31658 13.7071 7.70711L11.4142 10L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L10 11.4142L7.70711 13.7071Z" fill="#EE3939"/>`,
-            Critical: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M11.8619 0.49298C11.6823 0.187541 11.3544 0 11 0C10.6456 0 10.3177 0.187541 10.1381 0.49298L0.138066 17.493C-0.0438112 17.8022 -0.0461447 18.1851 0.13195 18.4965C0.310046 18.8079 0.641283 19 1 19H21C21.3587 19 21.69 18.8079 21.868 18.4965C22.0461 18.1851 22.0438 17.8022 21.8619 17.493L11.8619 0.49298ZM11 6C11.5523 6 12 6.44772 12 7V10C12 10.5523 11.5523 11 11 11C10.4477 11 10 10.5523 10 10V7C10 6.44772 10.4477 6 11 6ZM11 16C11.8284 16 12.5 15.3284 12.5 14.5C12.5 13.6716 11.8284 13 11 13C10.1716 13 9.5 13.6716 9.5 14.5C9.5 15.3284 10.1716 16 11 16Z" fill="#F58B00"/>`,
-            Positive: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10ZM14.7071 6.29289C14.3166 5.90237 13.6834 5.90237 13.2929 6.29289L8 11.5858L6.70711 10.2929C6.31658 9.90237 5.68342 9.90237 5.29289 10.2929C4.90237 10.6834 4.90237 11.3166 5.29289 11.7071L7.29289 13.7071C7.68342 14.0976 8.31658 14.0976 8.70711 13.7071L14.7071 7.70711C15.0976 7.31658 15.0976 6.68342 14.7071 6.29289Z" fill="#36A41D"/>`,
+            Error: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20ZM7.70711 13.7071C7.31658 14.0976 6.68342 14.0976 6.29289 13.7071C5.90237 13.3166 5.90237 12.6834 6.29289 12.2929L8.58579 10L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L10 8.58579L12.2929 6.29289C12.6834 5.90237 13.3166 5.90237 13.7071 6.29289C14.0976 6.68342 14.0976 7.31658 13.7071 7.70711L11.4142 10L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L10 11.4142L7.70711 13.7071Z" fill="#EE3939"/>`,
+            Warning: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M11.8619 0.49298C11.6823 0.187541 11.3544 0 11 0C10.6456 0 10.3177 0.187541 10.1381 0.49298L0.138066 17.493C-0.0438112 17.8022 -0.0461447 18.1851 0.13195 18.4965C0.310046 18.8079 0.641283 19 1 19H21C21.3587 19 21.69 18.8079 21.868 18.4965C22.0461 18.1851 22.0438 17.8022 21.8619 17.493L11.8619 0.49298ZM11 6C11.5523 6 12 6.44772 12 7V10C12 10.5523 11.5523 11 11 11C10.4477 11 10 10.5523 10 10V7C10 6.44772 10.4477 6 11 6ZM11 16C11.8284 16 12.5 15.3284 12.5 14.5C12.5 13.6716 11.8284 13 11 13C10.1716 13 9.5 13.6716 9.5 14.5C9.5 15.3284 10.1716 16 11 16Z" fill="#F58B00"/>`,
+            Success: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10ZM14.7071 6.29289C14.3166 5.90237 13.6834 5.90237 13.2929 6.29289L8 11.5858L6.70711 10.2929C6.31658 9.90237 5.68342 9.90237 5.29289 10.2929C4.90237 10.6834 4.90237 11.3166 5.29289 11.7071L7.29289 13.7071C7.68342 14.0976 8.31658 14.0976 8.70711 13.7071L14.7071 7.70711C15.0976 7.31658 15.0976 6.68342 14.7071 6.29289Z" fill="#36A41D"/>`,
             Information: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M3 0C1.34315 0 0 1.34315 0 3V15C0 16.6569 1.34315 18 3 18H15C16.6569 18 18 16.6569 18 15V3C18 1.34315 16.6569 0 15 0H3ZM9 6.5C9.82843 6.5 10.5 5.82843 10.5 5C10.5 4.17157 9.82843 3.5 9 3.5C8.17157 3.5 7.5 4.17157 7.5 5C7.5 5.82843 8.17157 6.5 9 6.5ZM9 8.5C9.55228 8.5 10 8.94772 10 9.5V13.5C10 14.0523 9.55228 14.5 9 14.5C8.44771 14.5 8 14.0523 8 13.5V9.5C8 8.94772 8.44771 8.5 9 8.5Z" fill="#1B90FF"/>`,
         };
         if (this.valueState !== ValueState.None) {
@@ -942,16 +975,16 @@ let Input = Input_1 = class Input extends UI5Element {
         return "";
     }
     get _valueStatePopoverHorizontalAlign() {
-        return this.effectiveDir !== "rtl" ? "Start" : "End";
+        return this.effectiveDir !== "rtl" ? "Left" : "Right";
     }
     /**
      * This method is relevant for sap_horizon theme only
      */
     get _valueStateMessageInputIcon() {
         const iconPerValueState = {
-            Negative: "error",
-            Critical: "alert",
-            Positive: "sys-enter-2",
+            Error: "error",
+            Warning: "alert",
+            Success: "sys-enter-2",
             Information: "information",
         };
         return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
@@ -984,11 +1017,7 @@ let Input = Input_1 = class Input extends UI5Element {
         return value;
     }
     static async onDefine() {
-        const Suggestions = getFeature("InputSuggestions");
-        [Input_1.i18nBundle] = await Promise.all([
-            getI18nBundle("@ui5/webcomponents"),
-            Suggestions ? Suggestions.init() : Promise.resolve(),
-        ]);
+        Input_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
 };
 __decorate([
@@ -1051,9 +1080,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean })
-], Input.prototype, "valueStateOpen", void 0);
 __decorate([
     property({ type: Boolean })
 ], Input.prototype, "_forceOpen", void 0);
@@ -1072,6 +1098,9 @@ __decorate([
 __decorate([
     property({ validator: Integer })
 ], Input.prototype, "_listWidth", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Input.prototype, "_isPopoverOpen", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], Input.prototype, "_inputIconFocused", void 0);
@@ -1087,28 +1116,29 @@ __decorate([
 __decorate([
     slot()
 ], Input.prototype, "icon", void 0);
+__decorate([
+    slot()
+], Input.prototype, "formSupport", void 0);
 __decorate([
     slot({
         type: HTMLElement,
         invalidateOnChildChange: true,
+        cloned: true,
     })
 ], Input.prototype, "valueStateMessage", void 0);
 Input = Input_1 = __decorate([
     customElement({
         tag: "ui5-input",
         languageAware: true,
-        formAssociated: true,
         renderer: litRender,
         template: InputTemplate,
-        styles: [
-            inputStyles,
-            ResponsivePopoverCommonCss,
-            ValueStateMessageCss,
-            SuggestionsCss,
-        ],
+        staticAreaTemplate: InputPopoverTemplate,
+        styles: inputStyles,
+        staticAreaStyles: [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss],
+        features: ["InputSuggestions"],
         get dependencies() {
-            const Suggestions = getFeature("InputSuggestions");
-            return [Popover, ResponsivePopover, Icon].concat(Suggestions ? Suggestions.dependencies : []);
+            const Suggestions = getComponentFeature("InputSuggestions");
+            return [Popover, Icon].concat(Suggestions ? Suggestions.dependencies : []);
         },
     })
     /**
@@ -1124,16 +1154,31 @@ Input = Input_1 = __decorate([
      */
     ,
     event("input")
+    /**
+     * Fired when a suggestion item, that is displayed in the suggestion popup, is selected.
+     * @param {HTMLElement} item The selected item.
+     * @public
+     * @allowPreventDefault
+     */
+    ,
+    event("suggestion-item-select", {
+        detail: {
+            /**
+            * @public
+            */
+            item: { type: HTMLElement },
+        },
+    })
     /**
      * Fired when the user navigates to a suggestion item via the ARROW keys,
      * as a preview, before the final selection.
      * @param {HTMLElement} item The previewed suggestion item.
      * @param {HTMLElement} targetRef The DOM ref of the suggestion item.
      * @public
-     * @since 2.0.0
+     * @since 1.0.0-rc.8
      */
     ,
-    event("selection-change", {
+    event("suggestion-item-preview", {
         detail: {
             /**
             * @public