@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/Select.js

@@ -11,11 +11,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import connectToComponent from "@ui5/webcomponents-base/dist/connectToComponent.js";
 import { isSpace, isUp, isDown, isEnter, isEscape, isHome, isEnd, isShow, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
-import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -30,17 +27,15 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import List from "./List.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_TITLE, LIST_ITEM_POSITION, SELECT_ROLE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
-import Option from "./Option.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_TITLE, LIST_ITEM_POSITION, SELECT_ROLE_DESCRIPTION, FORM_SELECTABLE_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 import Label from "./Label.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Popover from "./Popover.js";
-import StandardListItem from "./StandardListItem.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
+import "./ListItemBase.js";
 // Templates
 import SelectTemplate from "./generated/templates/SelectTemplate.lit.js";
-import SelectPopoverTemplate from "./generated/templates/SelectPopoverTemplate.lit.js";
 // Styles
 import selectCss from "./generated/themes/Select.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
@@ -49,84 +44,72 @@ import SelectPopoverCss from "./generated/themes/SelectPopover.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-select</code> component is used to create a drop-down list.
+ * The `ui5-select` component is used to create a drop-down list.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * There are two main usages of the <code>ui5-select></code>.
+ * There are two main usages of the `ui5-select>`.
+ *
+ * 1. With Option (`ui5-option`) web component:
  *
- * 1. With Option (<code>ui5-option</code>) web component:
- * <br>
  * The available options of the Select are defined by using the Option component.
- * The Option comes with predefined design and layout, including <code>icon</code>, <code>text</code> and <code>additional-text</code>.
- * <br><br>
+ * The Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.
+ *
+ * 2. With OptionCustom (`ui5-option-custom`) web component.
+ *
+ * Options with custom content are defined by using the OptionCustom component
+ * The OptionCustom component comes with no predefined layout and it expects consumers to define it.
  *
- * 2. With SelectMenu (<code>ui5-select-menu</code>) and SelectMenuOption (<code>ui5-select-menu-option</code>) web components:
- * <br>
- * The SelectMenu can be used as alternative to define the Select's dropdown
- * and can be used via the <code>menu</code> property of the Select to reference SelectMenu by its ID.
- * The component gives the possibility to customize the Select's dropdown
- * by slotting entirely custom options (via the SelectMenuOption component) and adding custom styles.
+ * ### Keyboard Handling
+ * The `ui5-select` provides advanced keyboard handling.
  *
- * <b>Note:</b> SelectMenu is a popover and placing it top-level in the HTML page is recommended,
- * because some page styles (for example transitions) can misplace the SelectMenu.
+ * - [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.
+ * - [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.
+ * - [Space], [Enter] - If the drop-down is opened - selects the focused option.
+ * - [Escape] - Closes the drop-down without changing the selection.
+ * - [Home] - Navigates to first option
+ * - [End] - Navigates to the last option
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-select</code> provides advanced keyboard handling.
- * <br>
- * <ul>
- * <li>[F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - Opens/closes the drop-down.</li>
- * <li>[UP, DOWN] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.</li>
- * <li>[SPACE, ENTER] - If the drop-down is opened - selects the focused option.</li>
- * <li>[ESC] - Closes the drop-down without changing the selection.</li>
- * <li>[HOME] - Navigates to first option</li>
- * <li>[END] - Navigates to the last option</li>
- * </ul>
- * <br>
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/Select";`
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents/dist/Select";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-select</code>)
+ * `import "@ui5/webcomponents/dist/IOption";` (comes with `ui5-select`)
+ * `import "@ui5/webcomponents/dist/OptionCustom";` (comes with `ui5-select`)
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Select
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-select
- * @appenddocs sap.ui.webc.main.Option sap.ui.webc.main.SelectMenu sap.ui.webc.main.SelectMenuOption
+ * @extends UI5Element
  * @public
  * @since 0.8.0
  */
 let Select = Select_1 = class Select extends UI5Element {
+    get formValidityMessage() {
+        return Select_1.i18nBundle.getText(FORM_SELECTABLE_REQUIRED);
+    }
+    get formValidity() {
+        const selectedOption = this.selectedOption;
+        return { valueMissing: this.required && (selectedOption && selectedOption.getAttribute("value") === "") };
+    }
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        const selectedOption = this.selectedOption;
+        if (selectedOption) {
+            return selectedOption.hasAttribute("value") ? selectedOption.value : selectedOption.textContent;
+        }
+        return "";
+    }
     constructor() {
         super();
-        this._syncedOptions = [];
         this._selectedIndexBeforeOpen = -1;
         this._escapePressed = false;
         this._lastSelectedOption = null;
         this._typedChars = "";
-        this._onMenuClick = this.onMenuClick.bind(this);
-        this._onMenuClose = this.onMenuClose.bind(this);
-        this._onMenuOpen = this.onMenuOpen.bind(this);
-        this._onMenuBeforeOpen = this.onMenuBeforeOpen.bind(this);
-        this._onMenuChange = this.onMenuChange.bind(this);
-        this._attachMenuListeners = this.attachMenuListeners.bind(this);
-        this._detachMenuListeners = this.detachMenuListeners.bind(this);
+        this._upgradeProperty("value");
     }
     onBeforeRendering() {
-        const menu = this._getSelectMenu();
-        if (menu) {
-            menu.value = this.value;
-            // To cause invalidation when the menu is used for another Select that could have the same value as the previous.
-            // Otherwise, the menu won't re-render.
-            menu.selectId = this.__id;
-        }
-        else {
-            this._syncSelection();
-        }
-        this._enableFormSupport();
+        this._ensureSingleSelection();
         this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
     }
     onAfterRendering() {
@@ -136,7 +119,18 @@ let Select = Select_1 = class Select extends UI5Element {
                 this._listWidth = this.responsivePopover.offsetWidth;
             }
         }
-        this._attachRealDomRefs();
+    }
+    _ensureSingleSelection() {
+        // if no item is selected => select the first one
+        // if multiple items are selected => select the last selected one
+        let selectedIndex = this.options.findLastIndex(option => option.selected);
+        selectedIndex = selectedIndex === -1 ? 0 : selectedIndex;
+        for (let i = 0; i < this.options.length; i++) {
+            this.options[i].selected = selectedIndex === i;
+            if (selectedIndex === i) {
+                break;
+            }
+        }
     }
     _onfocusin() {
         this.focused = true;
@@ -145,207 +139,67 @@ let Select = Select_1 = class Select extends UI5Element {
         this.focused = false;
     }
     get _isPickerOpen() {
-        const menu = this._getSelectMenu();
-        if (menu) {
-            return menu.open;
-        }
-        return !!this.responsivePopover && this.responsivePopover.opened;
+        return !!this.responsivePopover && this.responsivePopover.open;
     }
-    async _respPopover() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        return staticAreaItem.querySelector("[ui5-responsive-popover]");
+    _respPopover() {
+        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
     }
     /**
      * Defines the value of the component:
-     * <br>
-     * - when get - returns the value of the component, e.g. the <code>value</code> property of the selected option or its text content.
-     * <br>
-     * - when set - selects the option with matching <code>value</code> property or text content.
-     * <br><br>
-     * <b>Note:</b> If the given value does not match any existing option, the first option will get selected.
      *
+     * - when get - returns the value of the component, e.g. the `value` property of the selected option or its text content.
+     *
+     * - when set - selects the option with matching `value` property or text content.
+     *
+     * **Note:** If the given value does not match any existing option,
+     * the first option will get selected.
      * @public
-     * @type { string }
-     * @defaultvalue ""
-     * @name sap.ui.webc.main.Select.prototype.value
+     * @default ""
      * @since 1.20.0
      * @formProperty
      * @formEvents change liveChange
      */
     set value(newValue) {
-        const menu = this._getSelectMenu();
-        const selectOptions = Array.from(menu ? menu.children : this.children).filter(option => !option.getAttribute("disabled"));
-        selectOptions.forEach(option => {
+        const options = Array.from(this.children);
+        options.forEach(option => {
             option.selected = !!((option.getAttribute("value") || option.textContent) === newValue);
         });
     }
     get value() {
         return this.selectedOption?.value || this.selectedOption?.textContent || "";
     }
+    get _selectedIndex() {
+        return this.options.findIndex(option => option.selected);
+    }
     /**
-     * Currently selected <code>ui5-option</code> element.
-     * @readonly
-     * @type {sap.ui.webc.main.ISelectOption}
-     * @name sap.ui.webc.main.Select.prototype.selectedOption
+     * Currently selected `ui5-option` element.
      * @public
+     * @default undefined
      */
     get selectedOption() {
-        return this.selectOptions.find(option => option.selected);
+        return this.options.find(option => option.selected);
     }
-    onMenuClick(e) {
-        const optionIndex = e.detail.optionIndex;
-        this._handleSelectionChange(optionIndex);
+    get text() {
+        return this.selectedOption?.effectiveDisplayText;
     }
-    onMenuBeforeOpen() {
-        this._beforeOpen();
-    }
-    onMenuOpen() {
-        this._afterOpen();
-    }
-    onMenuClose() {
-        this._afterClose();
-    }
-    onMenuChange(e) {
-        this._text = e.detail.text;
-        this._selectedIndex = e.detail.selectedIndex;
-    }
-    _toggleSelectMenu() {
-        const menu = this._getSelectMenu();
-        if (!menu) {
-            return;
-        }
-        if (menu.open) {
-            menu.close();
-        }
-        else {
-            menu.showAt(this, this.offsetWidth);
-        }
-    }
-    onExitDOM() {
-        const menu = this._getSelectMenu();
-        if (menu) {
-            this._detachMenuListeners(menu);
-        }
-    }
-    async _toggleRespPopover() {
+    _toggleRespPopover() {
         if (this.disabled || this.readonly) {
             return;
         }
         this._iconPressed = true;
-        const menu = this._getSelectMenu();
-        if (menu) {
-            this._toggleSelectMenu();
-            return;
-        }
-        this.responsivePopover = await this._respPopover();
+        this.responsivePopover = this._respPopover();
         if (this._isPickerOpen) {
-            this.responsivePopover.close();
-        }
-        else {
-            this.responsivePopover.showAt(this);
-        }
-    }
-    async _attachRealDomRefs() {
-        this.responsivePopover = await this._respPopover();
-        this.options.forEach(option => {
-            option._getRealDomRef = () => this.responsivePopover.querySelector(`*[data-ui5-stable=${option.stableDomRef}]`);
-        });
-    }
-    _syncSelection() {
-        let lastSelectedOptionIndex = -1, firstEnabledOptionIndex = -1;
-        const options = this._filteredItems;
-        const syncOpts = options.map((opt, index) => {
-            if (opt.selected) {
-                lastSelectedOptionIndex = index;
-            }
-            if (firstEnabledOptionIndex === -1) {
-                firstEnabledOptionIndex = index;
-            }
-            opt.selected = false;
-            opt._focused = false;
-            return {
-                selected: false,
-                _focused: false,
-                icon: opt.icon,
-                value: opt.value,
-                textContent: opt.textContent,
-                title: opt.title,
-                additionalText: opt.additionalText,
-                id: opt._id,
-                stableDomRef: opt.stableDomRef,
-            };
-        });
-        if (lastSelectedOptionIndex > -1) {
-            syncOpts[lastSelectedOptionIndex].selected = true;
-            syncOpts[lastSelectedOptionIndex]._focused = true;
-            options[lastSelectedOptionIndex].selected = true;
-            options[lastSelectedOptionIndex]._focused = true;
-            this._text = syncOpts[lastSelectedOptionIndex].textContent;
-            this._selectedIndex = lastSelectedOptionIndex;
+            this.responsivePopover.open = false;
         }
         else {
-            this._text = "";
-            this._selectedIndex = -1;
-            if (syncOpts[firstEnabledOptionIndex]) {
-                syncOpts[firstEnabledOptionIndex].selected = true;
-                syncOpts[firstEnabledOptionIndex]._focused = true;
-                options[firstEnabledOptionIndex].selected = true;
-                options[firstEnabledOptionIndex]._focused = true;
-                this._selectedIndex = firstEnabledOptionIndex;
-                this._text = options[firstEnabledOptionIndex].textContent;
-            }
-        }
-        this._syncedOptions = syncOpts;
-    }
-    _getSelectMenu() {
-        return connectToComponent({
-            host: this,
-            propName: "menu",
-            onConnect: this._attachMenuListeners,
-            onDisconnect: this._detachMenuListeners,
-        });
-    }
-    attachMenuListeners(menu) {
-        menu.addEventListener("ui5-after-close", this._onMenuClose);
-        menu.addEventListener("ui5-after-open", this._onMenuOpen);
-        menu.addEventListener("ui5-before-open", this._onMenuBeforeOpen);
-        // @ts-ignore
-        menu.addEventListener("ui5-option-click", this._onMenuClick);
-        // @ts-ignore
-        menu.addEventListener("ui5-menu-change", this._onMenuChange);
-    }
-    detachMenuListeners(menu) {
-        menu.removeEventListener("ui5-after-close", this._onMenuClose);
-        menu.removeEventListener("ui5-after-open", this._onMenuOpen);
-        menu.removeEventListener("ui5-before-open", this._onMenuBeforeOpen);
-        // @ts-ignore
-        menu.removeEventListener("ui5-option-click", this._onMenuClick);
-        // @ts-ignore
-        menu.removeEventListener("ui5-menu-change", this._onMenuChange);
-    }
-    _enableFormSupport() {
-        const formSupport = getFeature("FormSupport");
-        if (formSupport) {
-            formSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-                const selectElement = element;
-                nativeInput.disabled = !!element.disabled;
-                nativeInput.value = selectElement.value;
-            });
-        }
-        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
+            this.responsivePopover.opener = this;
+            this.responsivePopover.open = true;
         }
     }
     _onkeydown(e) {
         const isTab = (isTabNext(e) || isTabPrevious(e));
         if (isTab && this._isPickerOpen) {
-            const menu = this._getSelectMenu();
-            if (menu) {
-                menu.close(false, false, true /* preventFocusRestore */);
-            }
-            else {
-                this.responsivePopover.close();
-            }
+            this.responsivePopover.open = false;
         }
         else if (isShow(e)) {
             e.preventDefault();
@@ -391,19 +245,20 @@ let Select = Select_1 = class Select extends UI5Element {
         const currentIndex = this._selectedIndex;
         const itemToSelect = this._searchNextItemByText(text);
         if (itemToSelect) {
-            const nextIndex = this.selectOptions.indexOf(itemToSelect);
+            const nextIndex = this.options.indexOf(itemToSelect);
             this._changeSelectedItem(this._selectedIndex, nextIndex);
             if (currentIndex !== this._selectedIndex) {
                 this.itemSelectionAnnounce();
+                this._scrollSelectedItem();
             }
         }
     }
     _searchNextItemByText(text) {
-        let orderedOptions = this.selectOptions.slice(0);
+        let orderedOptions = this.options.slice(0);
         const optionsAfterSelected = orderedOptions.splice(this._selectedIndex + 1, orderedOptions.length - this._selectedIndex);
         const optionsBeforeSelected = orderedOptions.splice(0, orderedOptions.length - 1);
         orderedOptions = optionsAfterSelected.concat(optionsBeforeSelected);
-        return orderedOptions.find(option => (option.displayText || option.textContent || "").toLowerCase().startsWith(text));
+        return orderedOptions.find(option => option.effectiveDisplayText.toLowerCase().startsWith(text));
     }
     _handleHomeKey(e) {
         e.preventDefault();
@@ -417,7 +272,7 @@ let Select = Select_1 = class Select extends UI5Element {
         if (this.readonly) {
             return;
         }
-        const lastIndex = this.selectOptions.length - 1;
+        const lastIndex = this.options.length - 1;
         this._changeSelectedItem(this._selectedIndex, lastIndex);
     }
     _onkeyup(e) {
@@ -430,24 +285,28 @@ let Select = Select_1 = class Select extends UI5Element {
             }
         }
     }
-    _getSelectedItemIndex(item) {
-        return this.selectOptions.findIndex(option => `${option._id}-li` === item.id);
+    _getItemIndex(item) {
+        return this.options.indexOf(item);
     }
     _select(index) {
-        this.selectOptions[this._selectedIndex].selected = false;
+        if (index < 0 || index >= this.options.length || this.options.length === 0) {
+            return;
+        }
+        if (this.options[this._selectedIndex]) {
+            this.options[this._selectedIndex].selected = false;
+        }
         if (this._selectedIndex !== index) {
-            this.fireEvent("live-change", { selectedOption: this.selectOptions[index] });
+            this.fireEvent("live-change", { selectedOption: this.options[index] });
         }
-        this._selectedIndex = index;
-        this.selectOptions[index].selected = true;
+        this.options[index].selected = true;
     }
     /**
      * The user clicked on an item from the list
      * @private
      */
     _handleItemPress(e) {
-        const item = e.detail.item;
-        const selectedItemIndex = this._getSelectedItemIndex(item);
+        const listItem = e.detail.item;
+        const selectedItemIndex = this._getItemIndex(listItem);
         this._handleSelectionChange(selectedItemIndex);
     }
     _itemMousedown(e) {
@@ -502,16 +361,13 @@ let Select = Select_1 = class Select extends UI5Element {
         }
     }
     _changeSelectedItem(oldIndex, newIndex) {
-        const options = this.selectOptions;
+        const options = this.options;
         const previousOption = options[oldIndex];
         previousOption.selected = false;
-        previousOption._focused = false;
         previousOption.focused = false;
         const nextOption = options[newIndex];
         nextOption.selected = true;
-        nextOption._focused = true;
         nextOption.focused = true;
-        this._selectedIndex = newIndex;
         this.fireEvent("live-change", { selectedOption: nextOption });
         if (!this._isPickerOpen) {
             // arrow pressed on closed picker - do selection change
@@ -519,10 +375,6 @@ let Select = Select_1 = class Select extends UI5Element {
         }
     }
     _getNextOptionIndex() {
-        const menu = this._getSelectMenu();
-        if (menu) {
-            return this._selectedIndex === (menu.options.length - 1) ? this._selectedIndex : (this._selectedIndex + 1);
-        }
         return this._selectedIndex === (this.options.length - 1) ? this._selectedIndex : (this._selectedIndex + 1);
     }
     _getPreviousOptionIndex() {
@@ -530,13 +382,19 @@ let Select = Select_1 = class Select extends UI5Element {
     }
     _beforeOpen() {
         this._selectedIndexBeforeOpen = this._selectedIndex;
-        this._lastSelectedOption = this.selectOptions[this._selectedIndex];
+        this._lastSelectedOption = this.options[this._selectedIndex];
     }
     _afterOpen() {
         this.opened = true;
         this.fireEvent("open");
         this.itemSelectionAnnounce();
         this._scrollSelectedItem();
+        this._applyFocusToSelectedItem();
+    }
+    _applyFocusToSelectedItem() {
+        this.options.forEach(option => {
+            option.focused = option.selected;
+        });
     }
     _afterClose() {
         this.opened = false;
@@ -546,46 +404,37 @@ let Select = Select_1 = class Select extends UI5Element {
             this._select(this._selectedIndexBeforeOpen);
             this._escapePressed = false;
         }
-        else if (this._lastSelectedOption !== this.selectOptions[this._selectedIndex]) {
-            this._fireChangeEvent(this.selectOptions[this._selectedIndex]);
-            this._lastSelectedOption = this.selectOptions[this._selectedIndex];
+        else if (this._lastSelectedOption !== this.options[this._selectedIndex]) {
+            this._fireChangeEvent(this.options[this._selectedIndex]);
+            this._lastSelectedOption = this.options[this._selectedIndex];
         }
         this.fireEvent("close");
     }
-    get selectOptions() {
-        const menu = this._getSelectMenu();
-        if (menu) {
-            return menu.options;
-        }
-        return this._filteredItems;
-    }
     get hasCustomLabel() {
         return !!this.label.length;
     }
     _fireChangeEvent(selectedOption) {
         const changePrevented = !this.fireEvent("change", { selectedOption }, true);
         //  Angular two way data binding
-        this.selectedItem = selectedOption.textContent;
         this.fireEvent("selected-item-changed");
         if (changePrevented) {
-            this.selectedItem = this._lastSelectedOption.textContent;
             this._select(this._selectedIndexBeforeOpen);
         }
     }
     get valueStateTextMappings() {
         return {
-            [ValueState.Success]: Select_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            [ValueState.Positive]: Select_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
             [ValueState.Information]: Select_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
-            [ValueState.Error]: Select_1.i18nBundle.getText(VALUE_STATE_ERROR),
-            [ValueState.Warning]: Select_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            [ValueState.Negative]: Select_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            [ValueState.Critical]: Select_1.i18nBundle.getText(VALUE_STATE_WARNING),
         };
     }
     get valueStateTypeMappings() {
         return {
-            [ValueState.Success]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+            [ValueState.Positive]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
             [ValueState.Information]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
-            [ValueState.Error]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-            [ValueState.Warning]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+            [ValueState.Negative]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+            [ValueState.Critical]: Select_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
         };
     }
     get valueStateText() {
@@ -617,21 +466,21 @@ let Select = Select_1 = class Select extends UI5Element {
         return Select_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
     }
     get _currentlySelectedOption() {
-        return this.selectOptions[this._selectedIndex];
+        return this.options[this._selectedIndex];
     }
     get _effectiveTabIndex() {
         return this.disabled
             || (this.responsivePopover // Handles focus on Tab/Shift + Tab when the popover is opened
-                && this.responsivePopover.opened) ? "-1" : "0";
+                && this.responsivePopover.open) ? "-1" : "0";
     }
     /**
     * This method is relevant for sap_horizon theme only
     */
     get _valueStateMessageInputIcon() {
         const iconPerValueState = {
-            Error: "error",
-            Warning: "alert",
-            Success: "sys-enter-2",
+            Negative: "error",
+            Critical: "alert",
+            Positive: "sys-enter-2",
             Information: "information",
         };
         return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
@@ -643,9 +492,9 @@ let Select = Select_1 = class Select extends UI5Element {
         return {
             popoverValueState: {
                 "ui5-valuestatemessage-root": true,
-                "ui5-valuestatemessage--success": this.valueState === ValueState.Success,
-                "ui5-valuestatemessage--error": this.valueState === ValueState.Error,
-                "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
+                "ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
+                "ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
+                "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
                 "ui5-valuestatemessage--information": this.valueState === ValueState.Information,
             },
             popover: {
@@ -659,8 +508,8 @@ let Select = Select_1 = class Select extends UI5Element {
                 "max-width": `${this.offsetWidth}px`,
             },
             responsivePopoverHeader: {
-                "display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
-                "width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
+                "display": this.options.length && this._listWidth === 0 ? "none" : "inline-block",
+                "width": `${this.options.length ? this._listWidth : this.offsetWidth}px`,
             },
             responsivePopover: {
                 "min-width": `${this.offsetWidth}px`,
@@ -677,7 +526,7 @@ let Select = Select_1 = class Select extends UI5Element {
         return !this.valueStateMessageText.length && this.hasValueStateText;
     }
     get hasValueStateText() {
-        return this.hasValueState && this.valueState !== ValueState.Success;
+        return this.hasValueState && this.valueState !== ValueState.Positive;
     }
     get shouldOpenValueStateMessagePopover() {
         return this.focused && this.hasValueStateText && !this._iconPressed
@@ -689,26 +538,24 @@ let Select = Select_1 = class Select extends UI5Element {
     get _isPhone() {
         return isPhone();
     }
-    get _filteredItems() {
-        return this.options.filter(option => !option.getAttribute("disabled"));
-    }
     itemSelectionAnnounce() {
         let text;
-        const optionsCount = this.selectOptions.length;
+        const optionsCount = this.options.length;
         const itemPositionText = Select_1.i18nBundle.getText(LIST_ITEM_POSITION, this._selectedIndex + 1, optionsCount);
         if (this.focused && this._currentlySelectedOption) {
             text = `${this._currentlySelectedOption.textContent} ${this._isPickerOpen ? itemPositionText : ""}`;
             announce(text, InvisibleMessageMode.Polite);
         }
     }
-    async openValueStatePopover() {
-        this.valueStatePopover = await this._getPopover();
+    openValueStatePopover() {
+        this.valueStatePopover = this._getPopover();
         if (this.valueStatePopover) {
-            this.valueStatePopover.showAt(this);
+            this.valueStatePopover.opener = this;
+            this.valueStatePopover.open = true;
         }
     }
     closeValueStatePopover() {
-        this.valueStatePopover && this.valueStatePopover.close();
+        this.valueStatePopover && (this.valueStatePopover.open = false);
     }
     toggleValueStatePopover(open) {
         if (open) {
@@ -721,17 +568,13 @@ let Select = Select_1 = class Select extends UI5Element {
     get selectedOptionIcon() {
         return this.selectedOption && this.selectedOption.icon;
     }
-    async _getPopover() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        return staticAreaItem.querySelector("[ui5-popover]");
+    _getPopover() {
+        return this.shadowRoot.querySelector("[ui5-popover]");
     }
     static async onDefine() {
         Select_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
 };
-__decorate([
-    property({ validator: DOMReference })
-], Select.prototype, "menu", void 0);
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "disabled", void 0);
@@ -753,9 +596,6 @@ __decorate([
 __decorate([
     property()
 ], Select.prototype, "accessibleNameRef", void 0);
-__decorate([
-    property({ type: String, noAttribute: true })
-], Select.prototype, "_text", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], Select.prototype, "_iconPressed", void 0);
@@ -768,15 +608,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "focused", void 0);
-__decorate([
-    property({ validator: Integer, defaultValue: -1, noAttribute: true })
-], Select.prototype, "_selectedIndex", void 0);
 __decorate([
     slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
 ], Select.prototype, "options", void 0);
-__decorate([
-    slot()
-], Select.prototype, "formSupport", void 0);
 __decorate([
     slot()
 ], Select.prototype, "valueStateMessage", void 0);
@@ -787,67 +621,63 @@ Select = Select_1 = __decorate([
     customElement({
         tag: "ui5-select",
         languageAware: true,
+        formAssociated: true,
         renderer: litRender,
         template: SelectTemplate,
-        staticAreaTemplate: SelectPopoverTemplate,
-        styles: selectCss,
-        staticAreaStyles: [
+        styles: [
+            selectCss,
             ResponsivePopoverCommonCss,
             ValueStateMessageCss,
             SelectPopoverCss,
         ],
         dependencies: [
-            Option,
             Label,
             ResponsivePopover,
             Popover,
             List,
-            StandardListItem,
             Icon,
             Button,
         ],
     })
     /**
      * Fired when the selected option changes.
-     *
-     * @event sap.ui.webc.main.Select#change
      * @allowPreventDefault
-     * @param {HTMLElement} selectedOption the selected option.
+     * @param {IOption} selectedOption the selected option.
      * @public
      */
     ,
     event("change", {
         detail: {
+            /**
+            * @public
+            */
             selectedOption: { type: HTMLElement },
         },
     })
     /**
      * Fired when the user navigates through the options, but the selection is not finalized,
      * or when pressing the ESC key to revert the current selection.
-     *
-     * @event sap.ui.webc.main.Select#live-change
-     * @param {HTMLElement} selectedOption the selected option.
+     * @param {IOption} selectedOption the selected option.
      * @public
      * @since 1.17.0
      */
     ,
     event("live-change", {
         detail: {
-            option: { type: HTMLElement },
+            /**
+            * @public
+            */
+            selectedOption: { type: HTMLElement },
         },
     })
     /**
      * Fired after the component's dropdown menu opens.
-     *
-     * @event sap.ui.webc.main.Select#open
      * @public
      */
     ,
     event("open")
     /**
      * Fired after the component's dropdown menu closes.
-     *
-     * @event sap.ui.webc.main.Select#close
      * @public
      */
     ,