@ui5/webcomponents 0.0.0-db2be6526 → 0.0.0-dc3ccac50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-db2be6526",
+  "version": "0.0.0-dc3ccac50",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -40,14 +40,14 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-db2be6526",
-    "@ui5/webcomponents-icons": "0.0.0-db2be6526",
-    "@ui5/webcomponents-ie11": "0.0.0-db2be6526",
-    "@ui5/webcomponents-localization": "0.0.0-db2be6526",
-    "@ui5/webcomponents-theming": "0.0.0-db2be6526"
+    "@ui5/webcomponents-base": "0.0.0-dc3ccac50",
+    "@ui5/webcomponents-icons": "0.0.0-dc3ccac50",
+    "@ui5/webcomponents-ie11": "0.0.0-dc3ccac50",
+    "@ui5/webcomponents-localization": "0.0.0-dc3ccac50",
+    "@ui5/webcomponents-theming": "0.0.0-dc3ccac50"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-db2be6526",
-    "chromedriver": "94.0.0"
+    "@ui5/webcomponents-tools": "0.0.0-dc3ccac50",
+    "chromedriver": "95.0.0"
   }
 }

package/src/CheckBox.js

@@ -298,6 +298,10 @@ class CheckBox extends UI5Element {
 	}
 
 	_onmousedown() {
+		if (this.readonly || this.disabled) {
+			return;
+		}
+
 		this.active = true;
 		activeCb = this; // eslint-disable-line
 	}

package/src/ColorPalettePopover.js

@@ -58,7 +58,6 @@ const metadata = {
 		 * Defines the default color of the component.
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
 		 * @type {CSSColor}
-		 * @defaultValue ""
 		 * @public
 		 */
 		defaultColor: {

package/src/ColorPicker.js

@@ -30,7 +30,7 @@ const metadata = {
 		 * Defines the currently selected color of the component.
 		 * <br><br>
 		 * <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
-		 * @type {String}
+		 * @type {CSSColor}
 		 * @public
 		 */
 		color: {

package/src/ComboBox.hbs

@@ -26,6 +26,10 @@
 		data-sap-focus-ref
 	/>
 
+	{{#if readonly}}
+		<ui5-icon class="ui5-input-readonly-icon" name="not-editable" @click="{{_readonlyIconClick}}"></ui5-icon>
+	{{/if}}
+
 	{{#if icon}}
 		<slot name="icon"></slot>
 	{{/if}}

package/src/ComboBox.js

@@ -7,6 +7,7 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/not-editable.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	isBackSpace,
@@ -16,6 +17,8 @@ import {
 	isDown,
 	isEnter,
 	isEscape,
+	isTabNext,
+	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import * as Filters from "./ComboBoxFilters.js";
 
@@ -39,6 +42,7 @@ import ComboBoxCss from "./generated/themes/ComboBox.css.js";
 import ComboBoxPopoverCss from "./generated/themes/ComboBoxPopover.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 ComboBoxItem from "./ComboBoxItem.js";
 import Icon from "./Icon.js";
@@ -367,7 +371,7 @@ class ComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss, ComboBoxPopoverCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, ComboBoxPopoverCss, SuggestionsCss];
 	}
 
 	static get template() {
@@ -524,6 +528,10 @@ class ComboBox extends UI5Element {
 		this._toggleRespPopover();
 	}
 
+	_readonlyIconClick() {
+		this.inner.focus();
+	}
+
 	_input(event) {
 		const { value } = event.target;
 
@@ -719,6 +727,10 @@ class ComboBox extends UI5Element {
 			this._isValueStateFocused = false;
 		}
 
+		if ((isTabNext(event) || isTabPrevious(event)) && this.open) {
+			this._closeRespPopover();
+		}
+
 		if (isShow(event) && !this.readonly && !this.disabled) {
 			event.preventDefault();
 
@@ -946,6 +958,20 @@ class ComboBox extends UI5Element {
 		return !this.valueStateMessage.length && this.hasValueStateText;
 	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get open() {
 		return this.responsivePopover ? this.responsivePopover.opened : false;
 	}
@@ -994,6 +1020,10 @@ class ComboBox extends UI5Element {
 
 	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,

package/src/ComboBoxPopover.hbs

@@ -1,4 +1,5 @@
 <ui5-responsive-popover
+	class="{{classes.popover}}"
 	hide-arrow
 	content-only-on-desktop
 	_disable-initial-focus
@@ -55,6 +56,7 @@
 	{{#unless _isPhone}}
 		{{#if hasValueStateText}}
 			<div class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} tabindex="0" style="{{styles.suggestionPopoverHeader}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
@@ -106,6 +108,7 @@
 		placement-type="Bottom"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>

package/src/DateTimePicker.js

@@ -314,12 +314,13 @@ class DateTimePicker extends DatePicker {
 	 */
 	onSelectedDatesChange(event) {
 		event.preventDefault();
+		const dateTimePickerContent = event.path ? event.path[1] : event.composedPath()[1];
 
 		this._previewValues = {
 			...this._previewValues,
 			calendarTimestamp: event.detail.timestamp,
 			calendarValue: event.detail.values[0],
-			timeSelectionValue: event.path[1].lastChild.value,
+			timeSelectionValue: dateTimePickerContent.lastChild.value,
 		};
 	}
 

package/src/DayPicker.js

@@ -259,10 +259,15 @@ class DayPicker extends CalendarPart {
 			if (isWeekend) {
 				day.classes += " ui5-dp-item--weeekend";
 			}
+
 			if (isDisabled) {
 				day.classes += " ui5-dp-item--disabled";
 			}
 
+			if (this.hasSecondaryCalendarType) {
+				day.classes += " ui5-dp-item--withsecondtype";
+			}
+
 			week.push(day);
 
 			if (dayOfTheWeek === DAYS_IN_WEEK - 1) { // 0-indexed so 6 is the last day of the week

package/src/FileUploader.js

@@ -480,6 +480,20 @@ class FileUploader extends UI5Element {
 		return this.focused && this.hasValueStateText && !this.hideInput;
 	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageInputIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {

package/src/FileUploaderPopover.hbs

@@ -9,6 +9,7 @@
 	horizontal-align="Left"
 >
 	<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+		<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 		{{> valueStateMessage}}
 	</div>
 </ui5-popover>

package/src/GroupHeaderListItem.hbs

@@ -1,4 +1,5 @@
 <li
+	part="native-li"
 	tabindex="{{_tabIndex}}"
 	class="ui5-ghli-root {{classes.main}}"
 	@focusin="{{_onfocusin}}"

package/src/Icon.js

@@ -19,6 +19,7 @@ const PRESENTATION_ROLE = "presentation";
 const metadata = {
 	tag: "ui5-icon",
 	languageAware: true,
+	themeAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.Icon.prototype */ {
 		/**
 		 * Defines if the icon is interactive (focusable and pressable)

package/src/Input.hbs

@@ -39,6 +39,10 @@
 			max="{{nativeInputAttributes.max}}"
 		/>
 
+		{{#if readonly}}
+			<ui5-icon class="ui5-input-readonly-icon" name="not-editable"></ui5-icon>
+		{{/if}}
+
 		{{#if icon.length}}
 			<div class="ui5-input-icon-root">
 				<slot name="icon"></slot>

package/src/Input.js

@@ -18,6 +18,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/not-editable.js";
 import InputType from "./types/InputType.js";
 import Popover from "./Popover.js";
 // Templates
@@ -40,6 +41,7 @@ import {
 import styles 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";
 
 const rgxFloat = new RegExp(/(\+|-)?\d+(\.|,)\d+/);
 
@@ -330,6 +332,14 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Indicates whether the visual focus is on the value state header
+		 * @private
+		 */
+		_isValueStateFocused: {
+			type: Boolean,
+		},
+
 		open: {
 			type: Boolean,
 		},
@@ -487,7 +497,7 @@ class Input extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	constructor() {
@@ -614,7 +624,7 @@ class Input extends UI5Element {
 		}
 
 		if (this.showSuggestions) {
-			this.Suggestions._deselectItems();
+			this._clearPopoverFocusAndSelection();
 		}
 
 		this._keyDown = true;
@@ -652,26 +662,41 @@ class Input extends UI5Element {
 
 	_handleEnter(event) {
 		const itemPressed = !!(this.Suggestions && this.Suggestions.onEnter(event));
+
 		if (!itemPressed) {
 			this.fireEventByAction(this.ACTION_ENTER);
 			this.lastConfirmedValue = this.value;
+			return;
 		}
+
+		this.focused = true;
 	}
 
 	_handleEscape() {
-		if (this.showSuggestions && this.Suggestions && this.Suggestions._isItemOnTarget()) {
+		const hasSuggestions = this.showSuggestions && !!this.Suggestions;
+		const isOpen = hasSuggestions && this.open;
+
+		if (!isOpen) {
+			this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
+			return;
+		}
+
+		if (hasSuggestions && isOpen && this.Suggestions._isItemOnTarget()) {
 			// Restore the value.
 			this.value = this.valueBeforeItemPreview;
 
 			// Mark that the selection has been canceled, so the popover can close
 			// and not reopen, due to receiving focus.
 			this.suggestionSelectionCanceled = true;
-			this.open = false;
-		} else if (this.Suggestions && this.Suggestions.isOpened()) {
-			this.closePopover();
-		} else {
-			this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
+			this.focused = true;
 		}
+
+		if (this._isValueStateFocused) {
+			this._isValueStateFocused = false;
+			this.focused = true;
+		}
+
+		this.open = false;
 	}
 
 	async _onfocusin(event) {
@@ -702,6 +727,7 @@ class Input extends UI5Element {
 		}
 
 		this.closePopover();
+		this._clearPopoverFocusAndSelection();
 
 		this.previousValue = "";
 		this.lastConfirmedValue = "";
@@ -709,6 +735,18 @@ class Input extends UI5Element {
 		this.open = false;
 	}
 
+	_clearPopoverFocusAndSelection() {
+		if (!this.showSuggestions || !this.Suggestions) {
+			return;
+		}
+
+		this._isValueStateFocused = false;
+		this.hasSuggestionItemSelected = false;
+
+		this.Suggestions._deselectItems();
+		this.Suggestions._clearItemFocus();
+	}
+
 	_click(event) {
 		if (isPhone() && !this.readonly && this.Suggestions) {
 			this.blur();
@@ -774,6 +812,8 @@ class Input extends UI5Element {
 		}
 
 		if (event.target === inputDomRef) {
+			this.focused = true;
+
 			// stop the native event, as the semantic "input" would be fired.
 			event.stopImmediatePropagation();
 		}
@@ -787,6 +827,7 @@ class Input extends UI5Element {
 		!skipFiring && this.fireEventByAction(this.ACTION_USER_INPUT);
 
 		this.hasSuggestionItemSelected = false;
+		this._isValueStateFocused = false;
 
 		if (this.Suggestions) {
 			this.Suggestions.updateSelectedItemPosition(null);
@@ -864,14 +905,6 @@ class Input extends UI5Element {
 		}
 	}
 
-	shouldOpenSuggestions() {
-		return !!(this.suggestionItems.length
-			&& this.focused
-			&& this.showSuggestions
-			&& !this.hasSuggestionItemSelected
-			&& !this.suggestionSelectionCanceled);
-	}
-
 	selectSuggestion(item, keyboardUsed) {
 		if (item.group) {
 			return;
@@ -913,7 +946,7 @@ class Input extends UI5Element {
 	 */
 	updateValueOnPreview(item) {
 		const noPreview = item.type === "Inactive" || item.group;
-		const itemValue = noPreview ? "" : (item.effectiveTitle || item.textContent);
+		const itemValue = noPreview ? this.valueBeforeItemPreview : (item.effectiveTitle || item.textContent);
 		this.value = itemValue;
 	}
 
@@ -1154,10 +1187,13 @@ class Input extends UI5Element {
 
 	get classes() {
 		return {
+			popover: {
+				"ui5-suggestions-popover": !this.isPhone && this.showSuggestions,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.showSuggestions && this.hasValueStateMessage,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
 				"ui5-valuestatemessage-header": true,
-				"ui5-responsive-popover-header": !this.isValueStateOpened(),
 				"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
@@ -1278,6 +1314,20 @@ class Input extends UI5Element {
 		return this.valueState !== ValueState.None ? result : "";
 	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageInputIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	/**
 	 * Returns the caret position inside the native input
 	 * @protected

package/src/InputPopover.hbs

@@ -1,5 +1,6 @@
 {{#if showSuggestions}}
 	<ui5-responsive-popover
+		class="{{classes.popover}}"
 		hide-arrow
 		_disable-initial-focus
 		placement-type="Bottom"
@@ -44,7 +45,8 @@
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateMessage}}
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.suggestionPopoverHeader}}>
+			<div slot="header" ?focused={{_isValueStateFocused}} class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.suggestionPopoverHeader}}>
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
@@ -74,6 +76,7 @@
 			horizontal-align="Left"
 		>
 			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		</ui5-popover>

package/src/List.hbs

@@ -23,7 +23,7 @@
 		<ul id="{{_id}}-listUl"
 			class="ui5-list-ul"
 			role="{{accessibleRole}}"
-			aria-label="{{ariaLabelТxt}}"
+			aria-label="{{ariaLabelTxt}}"
 			aria-labelledby="{{ariaLabelledBy}}"
 		>
 			<slot></slot>

package/src/List.js

@@ -361,7 +361,7 @@ const metadata = {
  * The <code>ui5-list</code> component allows displaying a list of items, advanced keyboard
  * handling support for navigating between items, and predefined modes to improve the development efficiency.
  * <br><br>
- * The <code>ui5-list</code> is а container for the available list items:
+ * The <code>ui5-list</code> is a container for the available list items:
  * <ul>
  * <li><code>ui5-li</code></li>
  * <li><code>ui5-li-custom</code></li>
@@ -560,7 +560,7 @@ class List extends UI5Element {
 		return ids.length ? ids.join(" ") : undefined;
 	}
 
-	get ariaLabelТxt() {
+	get ariaLabelTxt() {
 		return getEffectiveAriaLabelText(this);
 	}
 

package/src/ListItem.hbs

@@ -1,4 +1,5 @@
 <li
+	part="native-li"
 	tabindex="{{tabIndex}}"
 	class="{{classes.main}}"
 	dir="{{effectiveDir}}"

package/src/MultiComboBox.hbs

@@ -54,6 +54,10 @@
 		aria-required="{{required}}"
 	/>
 
+	{{#if readonly}}
+		<ui5-icon class="ui5-input-readonly-icon" name="not-editable" @click="{{_readonlyIconClick}}"></ui5-icon>
+	{{/if}}
+
 	{{#if icon}}
 		<slot name="icon"></slot>
 	{{/if}}

package/src/MultiComboBox.js

@@ -19,6 +19,7 @@ import { isIE, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/multiselect-all.js";
+import "@ui5/webcomponents-icons/dist/not-editable.js";
 import MultiComboBoxItem from "./MultiComboBoxItem.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
@@ -35,6 +36,7 @@ import {
 	VALUE_STATE_SUCCESS,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_INFORMATION,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	MULTICOMBOBOX_DIALOG_OK_BUTTON,
@@ -49,6 +51,7 @@ import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPop
 import styles from "./generated/themes/MultiComboBox.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 /**
  * @public
@@ -337,12 +340,6 @@ const metadata = {
  * <li> Backspace -  deletes the token and focus the next token. </li>
  * </ul>
  *
- * In the context of <code>ui5-multi-combobox</code>, you can provide a custom stable DOM ref for:
- * <ul>
- * <li>Every <code>ui5-mcb-item</code> that you provide.
- * Example: <code>&lt;ui5-mcb-item stable-dom-ref="item1"&gt;&lt;/ui5-mcb-item&gt;</code></li>
- * </ul>
- *
  * <h3>CSS Shadow Parts</h3>
  *
  * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
@@ -388,7 +385,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	static get dependencies() {
@@ -819,6 +816,10 @@ class MultiComboBox extends UI5Element {
 			this._filteredItems = this.items;
 		}
 
+		this.items.forEach(item => {
+			item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+		});
+
 		const filteredItems = this._filterItems(this.value);
 		this._filteredItems = filteredItems;
 	}
@@ -931,6 +932,10 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
+	_readonlyIconClick() {
+		this._inputDom.focus();
+	}
+
 	get editable() {
 		return !this.readonly;
 	}
@@ -973,6 +978,20 @@ class MultiComboBox extends UI5Element {
 		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
 	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	 get _valueStateMessageIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get _tokensCountText() {
 		if (!this._tokenizer) {
 			return;
@@ -1002,6 +1021,7 @@ class MultiComboBox extends UI5Element {
 			"Error": MultiComboBox.i18nBundle.getText(VALUE_STATE_ERROR),
 			"Error_Selection": MultiComboBox.i18nBundle.getText(VALUE_STATE_ERROR_ALREADY_SELECTED),
 			"Warning": MultiComboBox.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Information": MultiComboBox.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 
@@ -1033,6 +1053,11 @@ class MultiComboBox extends UI5Element {
 
 	get classes() {
 		return {
+			popover: {
+				"ui5-multi-combobox-all-items-responsive-popover": true,
+				"ui5-suggestions-popover": !this.isPhone,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateMessage,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
 				"ui5-valuestatemessage-header": true,

package/src/MultiComboBoxItem.js

@@ -13,16 +13,6 @@ const metadata = {
 		 * @public
 		 */
 		selected: { type: Boolean },
-
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @type {string}
-		 * @since 1.0.0-rc.11
-		 */
-		stableDomRef: {
-			type: String,
-		},
 	},
 };
 
@@ -42,6 +32,10 @@ class MultiComboBoxItem extends ComboBoxItem {
 	static get metadata() {
 		return metadata;
 	}
+
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
+	}
 }
 
 MultiComboBoxItem.define();