@openui5/sap.ui.webc.main 1.94.0 → 1.97.0

package/src/sap/ui/webc/main/thirdparty/ComboBox.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/util/InvisibleMessage', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-down', 'sap/ui/webc/common/thirdparty/icons/decline', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', './ComboBoxFilters-f59100bd', './generated/i18n/i18n-defaults', './generated/templates/ComboBoxTemplate.lit', './generated/templates/ComboBoxPopoverTemplate.lit', './generated/themes/ComboBox.css', './generated/themes/ComboBoxPopover.css', './generated/themes/ResponsivePopoverCommon.css', './generated/themes/ValueStateMessage.css', './ComboBoxItem', './Icon', './Popover', './ResponsivePopover', './List', './BusyIndicator', './Button', './StandardListItem'], function (UI5Element, litRender, ValueState, Device, Integer, AriaLabelHelper, announce, slimArrowDown, decline, i18nBundle, Keys, ComboBoxFilters, i18nDefaults, ComboBoxTemplate_lit, ComboBoxPopoverTemplate_lit, ComboBox_css, ComboBoxPopover_css, ResponsivePopoverCommon_css, ValueStateMessage_css, ComboBoxItem, Icon, Popover, ResponsivePopover, List, BusyIndicator, Button, StandardListItem) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/util/InvisibleMessage', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-down', 'sap/ui/webc/common/thirdparty/icons/decline', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', './ComboBoxFilters-f59100bd', './generated/i18n/i18n-defaults', './generated/templates/ComboBoxTemplate.lit', './generated/templates/ComboBoxPopoverTemplate.lit', './generated/themes/ComboBox.css', './generated/themes/ComboBoxPopover.css', './generated/themes/ResponsivePopoverCommon.css', './generated/themes/ValueStateMessage.css', './generated/themes/Suggestions.css', './ComboBoxItem', './Icon', './Popover', './ResponsivePopover', './List', './BusyIndicator', './Button', './StandardListItem', './ComboBoxGroupItem'], function (UI5Element, litRender, ValueState, Device, Integer, AriaLabelHelper, announce, slimArrowDown, decline, i18nBundle, Keys, ComboBoxFilters, i18nDefaults, ComboBoxTemplate_lit, ComboBoxPopoverTemplate_lit, ComboBox_css, ComboBoxPopover_css, ResponsivePopoverCommon_css, ValueStateMessage_css, Suggestions_css, ComboBoxItem, Icon, Popover, ResponsivePopover, List, BusyIndicator, Button, StandardListItem, ComboBoxGroupItem) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -47,11 +47,14 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			focused: {
 				type: Boolean,
 			},
-			ariaLabel: {
+			_isValueStateFocused: {
+				type: Boolean,
+			},
+			accessibleName: {
 				type: String,
 				defaultValue: undefined,
 			},
-			ariaLabelledby: {
+			accessibleNameRef: {
 				type: String,
 				defaultValue: "",
 			},
@@ -59,10 +62,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				type: Boolean,
 				noAttribute: true,
 			},
-			_tempValue: {
-				type: String,
-				defaultValue: "",
-			},
 			_filteredItems: {
 				type: Object,
 			},
@@ -107,7 +106,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return ComboBox_css;
 		}
 		static get staticAreaStyles() {
-			return [ResponsivePopoverCommon_css, ValueStateMessage_css, ComboBoxPopover_css];
+			return [ResponsivePopoverCommon_css, ValueStateMessage_css, ComboBoxPopover_css, Suggestions_css];
 		}
 		static get template() {
 			return ComboBoxTemplate_lit;
@@ -120,40 +119,17 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._filteredItems = [];
 			this._initialRendering = true;
 			this._itemFocused = false;
-			this._tempFilterValue = "";
 			this._selectionChanged = false;
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		onBeforeRendering() {
-			let domValue;
 			if (this._initialRendering) {
-				domValue = this.value;
 				this._filteredItems = this.items;
-			} else {
-				domValue = this.filterValue;
-			}
-			if (this._autocomplete && domValue !== "") {
-				const item = this._autoCompleteValue(domValue);
-				if (!this._selectionChanged && (item && !item.selected)) {
-					this.fireEvent("selection-change", {
-						item,
-					});
-					this._selectionChanged = false;
-				}
-			} else {
-				this._tempValue = domValue;
 			}
 			if (!this._initialRendering && this.popover && document.activeElement === this && !this._filteredItems.length) {
 				this.popover.close();
 			}
 			this._selectMatchingItem();
-			if (this._isKeyNavigation && this.responsivePopover && this.responsivePopover.opened) {
-				this.focused = false;
-			} else if (this.shadowRoot.activeElement) {
-				this.focused = this.shadowRoot.activeElement.id === "ui5-combobox-input";
-			}
 			this._initialRendering = false;
-			this._isKeyNavigation = false;
 		}
 		async onAfterRendering() {
 			await this._respPopover();
@@ -162,40 +138,52 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			if (this.shouldClosePopover() && !Device.isPhone()) {
 				this.responsivePopover.close(false, false, true);
+				this._clearFocus();
+				this._itemFocused = false;
 			}
-			this._itemFocused = false;
 			this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
 			this.storeResponsivePopoverWidth();
+			if (Device.isSafari() && this._autocomplete && this.filterValue !== this.value) {
+				this.inner.setSelectionRange(
+					(this._isKeyNavigation ? 0 : this.filterValue.length),
+					this.value.length,
+				);
+			}
 		}
 		shouldClosePopover() {
-			return this.responsivePopover.opened && !this.focused && !this._itemFocused;
+			return this.responsivePopover.opened && !this.focused && !this._itemFocused && !this._isValueStateFocused;
 		}
 		_focusin(event) {
 			this.focused = true;
-			if (this.filterValue !== this.value) {
-				this.filterValue = this.value;
-			}
+			this._lastValue = this.value;
+			this._autocomplete = false;
 			!Device.isPhone() && event.target.setSelectionRange(0, this.value.length);
 		}
-		_focusout() {
-			this.focused = false;
-			this._inputChange();
-			!Device.isPhone() && this._closeRespPopover();
+		_focusout(event) {
+			const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
+			this._fireChangeEvent();
+			if (focusedOutToValueStateMessage) {
+				event.stopImmediatePropagation();
+				return;
+			}
+			if (!this.shadowRoot.contains(event.relatedTarget)) {
+				this.focused = false;
+				!Device.isPhone() && this._closeRespPopover(event);
+			}
 		}
 		_afterOpenPopover() {
 			this._iconPressed = true;
-			if (Device.isPhone() && this.value) {
-				this.filterValue = this.value;
-			}
-			this._clearFocus();
 		}
 		_afterClosePopover() {
 			this._iconPressed = false;
 			this._filteredItems = this.items;
-			this._tempFilterValue = "";
 			if (Device.isPhone()) {
 				this.blur();
 			}
+			if (this._selectionPerformed) {
+				this._lastValue = this.value;
+				this._selectionPerformed = false;
+			}
 		}
 		_toggleRespPopover() {
 			if (this.responsivePopover.opened) {
@@ -218,7 +206,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		async openValueStatePopover() {
 			this.popover = await this._getPopover();
-			this.popover && this.popover.openBy(this);
+			this.popover && this.popover.showAt(this);
 		}
 		async closeValueStatePopover() {
 			this.popover = await this._getPopover();
@@ -241,16 +229,28 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			const { value } = event.target;
 			if (event.target === this.inner) {
 				event.stopImmediatePropagation();
+				this.focused = true;
+				this._isValueStateFocused = false;
 			}
-			this._clearFocus();
-			this._tempFilterValue = value;
+			this._filteredItems = this._filterItems(value);
+			this.value = value;
 			this.filterValue = value;
+			this._clearFocus();
+			if (this._autocomplete) {
+				const item = this._getFirstMatchingItem(value);
+				this._applyAtomicValueAndSelection(item, value, true);
+				if (value !== "" && !this._selectionChanged && (item && !item.selected && !item.isGroupItem)) {
+					this.fireEvent("selection-change", {
+						item,
+					});
+					this._selectionChanged = false;
+				}
+			}
 			this.fireEvent("input");
-			this._filteredItems = this._filterItems(value);
 			if (Device.isPhone()) {
 				return;
 			}
-			if (!this._filteredItems.length) {
+			if (!this._filteredItems.length || value === "") {
 				this._closeRespPopover();
 			} else {
 				this._openRespPopover();
@@ -265,50 +265,128 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				return item;
 			});
 		}
-		handleArrowKeyPress(event) {
+		async handleArrowKeyPress(event) {
 			if (this.readonly || !this._filteredItems.length) {
 				return;
 			}
+			const isOpen = this.open;
 			const isArrowDown = Keys.isDown(event);
 			const isArrowUp = Keys.isUp(event);
 			const currentItem = this._filteredItems.find(item => {
-				return this.responsivePopover.opened ? item.focused : item.selected;
+				return isOpen ? item.focused : item.selected;
 			});
-			let indexOfItem = this._filteredItems.indexOf(currentItem);
+			const indexOfItem = this._filteredItems.indexOf(currentItem);
 			event.preventDefault();
-			if ((indexOfItem === 0 && isArrowUp) || (this._filteredItems.length - 1 === indexOfItem && isArrowDown)) {
+			if ((this.focused === true && isArrowUp && isOpen) || (this._filteredItems.length - 1 === indexOfItem && isArrowDown)) {
+				return;
+			}
+			this._isKeyNavigation = true;
+			if (isArrowDown) {
+				this._handleArrowDown(event, indexOfItem);
+			}
+			if (isArrowUp) {
+				this._handleArrowUp(event, indexOfItem);
+			}
+		}
+		_handleItemNavigation(event, indexOfItem, isForward) {
+			const isOpen = this.open;
+			const currentItem = this._filteredItems[indexOfItem];
+			const nextItem = isForward ? this._filteredItems[indexOfItem + 1] : this._filteredItems[indexOfItem - 1];
+			const isGroupItem = currentItem && currentItem.isGroupItem;
+			if ((!isOpen) && ((isGroupItem && !nextItem) || (!isGroupItem && !currentItem))) {
 				return;
 			}
 			this._clearFocus();
-			indexOfItem += isArrowDown ? 1 : -1;
-			indexOfItem = indexOfItem < 0 ? 0 : indexOfItem;
-			if (this.responsivePopover.opened) {
-				this.announceSelectedItem(indexOfItem);
+			if (isOpen) {
+				this._itemFocused = true;
+				this.value = isGroupItem ? this.filterValue : currentItem.text;
+				this.focused = false;
+				currentItem.focused = true;
+			} else {
+				this.focused = true;
+				this.value = isGroupItem ? nextItem.text : currentItem.text;
+				currentItem.focused = false;
 			}
-			this._filteredItems[indexOfItem].focused = true;
-			this.filterValue = this._filteredItems[indexOfItem].text;
-			this._isKeyNavigation = true;
-			this._itemFocused = true;
-			this.fireEvent("input");
-			this.fireEvent("selection-change", {
-				item: this._filteredItems[indexOfItem],
-			});
+			this._isValueStateFocused = false;
 			this._selectionChanged = true;
+			if (isGroupItem && isOpen) {
+				return;
+			}
+			this._announceSelectedItem(indexOfItem);
+			const item = this._getFirstMatchingItem(this.value);
+			this._applyAtomicValueAndSelection(item, "", true);
+			if ((item && !item.selected)) {
+				this.fireEvent("selection-change", {
+					item,
+				});
+			}
+			this.fireEvent("input");
+			this._fireChangeEvent();
+		}
+		_handleArrowDown(event, indexOfItem) {
+			const isOpen = this.open;
+			if (this.focused && indexOfItem === -1 && this.hasValueStateText && isOpen) {
+				this._isValueStateFocused = true;
+				this.focused = false;
+				return;
+			}
+			indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
+			this._handleItemNavigation(event, ++indexOfItem, true );
+		}
+		_handleArrowUp(event, indexOfItem) {
+			const isOpen = this.open;
+			if (indexOfItem === 0 && !this.hasValueStateText) {
+				this._clearFocus();
+				this.focused = true;
+				this._itemFocused = false;
+				return;
+			}
+			if (indexOfItem === 0 && this.hasValueStateText && isOpen) {
+				this._clearFocus();
+				this._itemFocused = false;
+				this._isValueStateFocused = true;
+				this._filteredItems[0].selected = false;
+				return;
+			}
+			if (this._isValueStateFocused) {
+				this.focused = true;
+				this._isValueStateFocused = false;
+				return;
+			}
+			indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
+			this._handleItemNavigation(event, --indexOfItem, false );
 		}
 		_keydown(event) {
 			const isArrowKey = Keys.isDown(event) || Keys.isUp(event);
 			this._autocomplete = !(Keys.isBackSpace(event) || Keys.isDelete(event));
+			this._isKeyNavigation = false;
 			if (isArrowKey) {
 				this.handleArrowKeyPress(event);
 			}
 			if (Keys.isEnter(event)) {
-				this._inputChange();
+				this._fireChangeEvent();
 				this._closeRespPopover();
+				this.focused = true;
+			}
+			if (Keys.isEscape(event)) {
+				this.focused = true;
+				this.value = !this.open ? this._lastValue : this.value;
+				this._isValueStateFocused = false;
 			}
 			if (Keys.isShow(event) && !this.readonly && !this.disabled) {
 				event.preventDefault();
 				this._resetFilter();
 				this._toggleRespPopover();
+				const selectedItem = this._filteredItems.find(item => {
+					return item.selected;
+				});
+				if (selectedItem && this.open) {
+					this._itemFocused = true;
+					selectedItem.focused = true;
+					this.focused = false;
+				} else {
+					this.focused = true;
+				}
 			}
 		}
 		_click(event) {
@@ -320,59 +398,81 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (Device.isPhone() && event && event.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
 				this.value = this._selectedItemText;
 				this.filterValue = this._selectedItemText;
-				this._tempValue = this._selectedItemText;
 			}
+			this._isValueStateFocused = false;
+			this._clearFocus();
 			this.responsivePopover.close();
 		}
 		_openRespPopover() {
-			this.responsivePopover.open(this);
+			this.responsivePopover.showAt(this);
 		}
 		_filterItems(str) {
-			return (ComboBoxFilters.Filters[this.filter] || ComboBoxFilters.StartsWithPerTerm)(str, this.items);
-		}
-		_autoCompleteValue(current) {
-			const currentValue = current;
-			const matchingItems = this._startsWithMatchingItems(currentValue);
-			const selectionValue = this._tempFilterValue ? this._tempFilterValue : currentValue;
-			if (matchingItems.length) {
-				this._tempValue = matchingItems[0] ? matchingItems[0].text : current;
-			} else {
-				this._tempValue = current;
+			const itemsToFilter = this.items.filter(item => !item.isGroupItem);
+			const filteredItems = (ComboBoxFilters.Filters[this.filter] || ComboBoxFilters.StartsWithPerTerm)(str, itemsToFilter);
+			return this.items.filter((item, idx, allItems) => ComboBox._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
+		}
+		static _groupItemFilter(item, idx, allItems, filteredItems) {
+			if (item.isGroupItem) {
+				let groupHasFilteredItems;
+				while (allItems[idx] && !allItems[idx].isGroupItem && !groupHasFilteredItems) {
+					groupHasFilteredItems = filteredItems.indexOf(allItems[idx]) !== -1;
+					idx++;
+				}
+				return groupHasFilteredItems;
 			}
-			if (matchingItems.length && (selectionValue !== this._tempValue && this.value !== this._tempValue)) {
-				setTimeout(() => {
-					this.inner.setSelectionRange(selectionValue.length, this._tempValue.length);
-				}, 0);
-			} else if (this._isKeyNavigation) {
-				setTimeout(() => {
-					this.inner.setSelectionRange(0, this._tempValue.length);
-				}, 0);
+		}
+		_getFirstMatchingItem(current) {
+			const currentlyFocusedItem = this.items.find(item => item.focused === true);
+			if (currentlyFocusedItem && currentlyFocusedItem.isGroupItem) {
+				this.value = this.filterValue;
+				return;
 			}
+			const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem);
 			if (matchingItems.length) {
 				return matchingItems[0];
 			}
 		}
+		_applyAtomicValueAndSelection(item, filterValue, highlightValue) {
+			if (!item) {
+				return;
+			}
+			const value = (item && item.text) || "";
+			this.inner.value = value;
+			if (highlightValue) {
+				this.inner.setSelectionRange(filterValue.length, value.length);
+			}
+			this.value = value;
+		}
 		_selectMatchingItem() {
+			const currentlyFocusedItem = this.items.find(item => item.focused);
+			const shouldSelectionBeCleared = currentlyFocusedItem && currentlyFocusedItem.isGroupItem;
 			this._filteredItems = this._filteredItems.map(item => {
-				item.selected = (item.text === this._tempValue);
+				item.selected = !item.isGroupItem && (item.text === this.value) && !shouldSelectionBeCleared;
 				return item;
 			});
 		}
-		_inputChange() {
-			if (this.value !== this._tempValue) {
-				this.value = this._tempValue;
+		_fireChangeEvent() {
+			if (this.value !== this._lastValue) {
 				this.fireEvent("change");
-				this.inner.setSelectionRange(this.value.length, this.value.length);
+				this._lastValue = this.value;
 			}
 		}
+		_inputChange(event) {
+			event.preventDefault();
+		}
 		_itemMousedown(event) {
 			event.preventDefault();
 		}
 		_selectItem(event) {
 			const listItem = event.detail.item;
-			this._tempValue = listItem.mappedItem.text;
 			this._selectedItemText = listItem.mappedItem.text;
-			this.filterValue = this._tempValue;
+			this._selectionPerformed = true;
+			const sameItemSelected = this.value === this._selectedItemText;
+			const sameSelectionPerformed = this.value.toLowerCase() === this.filterValue.toLowerCase();
+			if (sameItemSelected && sameSelectionPerformed) {
+				return this._closeRespPopover();
+			}
+			this.value = this._selectedItemText;
 			if (!listItem.mappedItem.selected) {
 				this.fireEvent("selection-change", {
 					item: listItem.mappedItem,
@@ -380,25 +480,26 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this._selectionChanged = true;
 			}
 			this._filteredItems.map(item => {
-				item.selected = (item === listItem.mappedItem);
+				item.selected = (item === listItem.mappedItem && !item.isGroupItem);
 				return item;
 			});
-			this._inputChange();
+			this._fireChangeEvent();
 			this._closeRespPopover();
+			this.inner.setSelectionRange(this.value.length, this.value.length);
 		}
 		_onItemFocus(event) {
 			this._itemFocused = true;
 		}
-		announceSelectedItem(indexOfItem) {
-			const itemPositionText = this.i18nBundle.getText(i18nDefaults.LIST_ITEM_POSITION, [indexOfItem + 1], [this._filteredItems.length]);
-			const itemSelectionText = this.i18nBundle.getText(i18nDefaults.LIST_ITEM_SELECTED);
+		_announceSelectedItem(indexOfItem) {
+			const itemPositionText = ComboBox.i18nBundle.getText(i18nDefaults.LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
+			const itemSelectionText = ComboBox.i18nBundle.getText(i18nDefaults.LIST_ITEM_SELECTED);
 			announce__default(`${itemPositionText} ${itemSelectionText}`, "Polite");
 		}
 		get _headerTitleText() {
-			return this.i18nBundle.getText(i18nDefaults.INPUT_SUGGESTIONS_TITLE);
+			return ComboBox.i18nBundle.getText(i18nDefaults.INPUT_SUGGESTIONS_TITLE);
 		}
 		get _iconAccessibleNameText() {
-			return this.i18nBundle.getText(i18nDefaults.SELECT_OPTIONS);
+			return ComboBox.i18nBundle.getText(i18nDefaults.SELECT_OPTIONS);
 		}
 		get inner() {
 			return Device.isPhone() ? this.responsivePopover.querySelector(".ui5-input-inner-phone") : this.shadowRoot.querySelector("[inner-input]");
@@ -428,10 +529,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		get valueStateTextMappings() {
 			return {
-				"Success": this.i18nBundle.getText(i18nDefaults.VALUE_STATE_SUCCESS),
-				"Error": this.i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
-				"Warning": this.i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
-				"Information": this.i18nBundle.getText(i18nDefaults.VALUE_STATE_INFORMATION),
+				"Success": ComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_SUCCESS),
+				"Error": ComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
+				"Warning": ComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
+				"Information": ComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_INFORMATION),
 			};
 		}
 		get shouldOpenValueStateMessagePopover() {
@@ -463,8 +564,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				Button,
 				StandardListItem,
 				Popover,
+				ComboBoxGroupItem,
 			];
 		}
+		static async onDefine() {
+			ComboBox.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
+		}
 		get styles() {
 			return {
 				popoverHeader: {
@@ -473,13 +578,17 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				suggestionPopoverHeader: {
 					"display": this._listWidth === 0 ? "none" : "inline-block",
 					"width": `${this._listWidth}px`,
-					"padding": "0.9125rem 1rem",
 				},
 			};
 		}
 		get classes() {
 			return {
+				popover: {
+					"ui5-suggestions-popover": !this.isPhone,
+					"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateText,
+				},
 				popoverValueState: {
+					"ui5-valuestatemessage-header": true,
 					"ui5-valuestatemessage-root": true,
 					"ui5-valuestatemessage--success": this.valueState === ValueState__default.Success,
 					"ui5-valuestatemessage--error": this.valueState === ValueState__default.Error,

package/src/sap/ui/webc/main/thirdparty/ComboBoxGroupItem.js

@@ -0,0 +1,39 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', './GroupHeaderListItem'], function (UI5Element, GroupHeaderListItem) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+
+	const metadata = {
+		tag: "ui5-cb-group-item",
+		properties:  {
+			text: {
+				type: String,
+			},
+			focused: {
+				type: Boolean,
+			},
+		},
+		slots:  {
+		},
+		events:  {
+		},
+	};
+	class ComboBoxGroupItem extends UI5Element__default {
+		static get metadata() {
+			return metadata;
+		}
+		static get dependencies() {
+			return [
+				GroupHeaderListItem,
+			];
+		}
+		get isGroupItem() {
+			return true;
+		}
+	}
+	ComboBoxGroupItem.define();
+
+	return ComboBoxGroupItem;
+
+});

package/src/sap/ui/webc/main/thirdparty/DateComponentBase.js

@@ -16,6 +16,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			primaryCalendarType: {
 				type: CalendarType__default,
 			},
+			secondaryCalendarType: {
+				type: CalendarType__default,
+			},
 			minDate: {
 				type: String,
 			},
@@ -36,7 +39,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		get _primaryCalendarType() {
 			const localeData = getCachedLocaleDataInstance__default(getLocale__default());
@@ -86,9 +88,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return dateFormat;
 		}
 		static async onDefine() {
-			await Promise.all([
+			[DateComponentBase.i18nBundle] = await Promise.all([
+				i18nBundle.getI18nBundle("@ui5/webcomponents"),
 				LocaleData.fetchCldr(getLocale__default().getLanguage(), getLocale__default().getRegion(), getLocale__default().getScript()),
-				i18nBundle.fetchI18nBundle("@ui5/webcomponents"),
 			]);
 		}
 	}