@ui5/webcomponents 1.0.1 → 1.1.2

package/src/BreadcrumbsItem.js

@@ -94,7 +94,7 @@ class BreadcrumbsItem extends UI5Element {
 	}
 
 	get stableDomRef() {
-		return `${this._id}-stable-dom-ref`;
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 }
 

package/src/BreadcrumbsPopover.hbs

@@ -6,9 +6,9 @@
 	with-padding
 	_hide-header
 	@keydown="{{_onkeydown}}">
-	<ui5-list mode="SingleSelectAuto"
+	<ui5-list mode="SingleSelect"
 		separators="None"
-		@ui5-item-press="{{_onOverflowListItemSelect}}">
+		@ui5-selection-change="{{_onOverflowListItemSelect}}">
 
 		{{#each _overflowItemsData}}
 			<ui5-li

package/src/BusyIndicator.hbs

@@ -26,7 +26,7 @@
 
 	<slot></slot>
 
-	{{#if active}}
+	{{#if _isBusy}}
 		<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
 	{{/if}}
 </div>

package/src/BusyIndicator.js

@@ -98,7 +98,6 @@ const metadata = {
 		 */
 		_isBusy: {
 			type: Boolean,
-			noAttribute: true,
 		},
 	},
 };
@@ -231,7 +230,7 @@ class BusyIndicator extends UI5Element {
 	}
 
 	_handleKeydown(event) {
-		if (!this.active) {
+		if (!this._isBusy) {
 			return;
 		}
 
@@ -246,7 +245,7 @@ class BusyIndicator extends UI5Element {
 	}
 
 	_preventEvent(event) {
-		if (this.active) {
+		if (this._isBusy) {
 			event.stopImmediatePropagation();
 		}
 	}

package/src/Button.hbs

@@ -18,7 +18,7 @@
 	aria-expanded="{{accInfo.ariaExpanded}}"
 	aria-controls="{{accInfo.ariaControls}}"
 	aria-haspopup="{{accInfo.ariaHaspopup}}"
-	aria-label="{{accessibleName}}"
+	aria-label="{{ariaLabelText}}"
 	title="{{accInfo.title}}"
 	part="button"
 >

package/src/Button.js

@@ -1,10 +1,16 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
-import { isPhone, isTablet, isCombi } from "@ui5/webcomponents-base/dist/Device.js";
+import {
+	isPhone,
+	isTablet,
+	isCombi,
+	isSafari,
+} from "@ui5/webcomponents-base/dist/Device.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -163,6 +169,19 @@ const metadata = {
 			defaultValue: undefined,
 		},
 
+		/**
+		 * Receives id(or many ids) of the elements that label the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		 accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
 		/**
 		 * @type {String}
 		 * @defaultvalue ""
@@ -343,6 +362,10 @@ class Button extends UI5Element {
 		if (FormSupport) {
 			FormSupport.triggerFormSubmit(this);
 		}
+
+		if (isSafari()) {
+			this.getDomRef().focus();
+		}
 	}
 
 	_onmousedown(event) {
@@ -453,6 +476,10 @@ class Button extends UI5Element {
 		return this.iconOnly && !this.title;
 	}
 
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	static async onDefine() {
 		Button.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

package/src/Calendar.js

@@ -29,6 +29,7 @@ import calendarCSS from "./generated/themes/Calendar.css.js";
  */
 const metadata = {
 	tag: "ui5-calendar",
+	fastNavigation: true,
 	properties: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Defines the type of selection used in the calendar component.
@@ -194,6 +195,12 @@ const metadata = {
  * </ul>
  * <br>
  *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
 * <h3>Calendar types</h3>
  * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
  * By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,

package/src/CardHeader.hbs

@@ -27,9 +27,16 @@
 		{{/if}}
 	</div>
 
-	{{#if hasAction}}
-		<slot name="action"></slot>
-	{{else}}
-		<span id="{{_id}}-status" part="status" class="ui5-card-header-status" dir="auto">{{status}}</span>
-	{{/if}}
+	<div class="ui5-card-header-action">
+		{{#if hasAction}}
+			<slot name="action"></slot>
+		{{else}}
+			<span
+				id="{{_id}}-status"
+				part="status"
+				class="ui5-card-header-status"
+				dir="auto"	
+			>{{status}}</span>
+		{{/if}}
+	</div>
 </div>

package/src/Carousel.hbs

@@ -17,6 +17,7 @@
                     role="option"
                     aria-posinset="{{posinset}}"
                     aria-setsize="{{setsize}}"
+                    part="item"
                 >
                     <slot name="{{this.item._individualSlot}}" tabindex="{{this.tabIndex}}"></slot>
                 </div>

package/src/Carousel.js

@@ -38,6 +38,7 @@ import CarouselCss from "./generated/themes/Carousel.css.js";
 const metadata = {
 	tag: "ui5-carousel",
 	languageAware: true,
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
 		/**
 		 * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
@@ -231,10 +232,18 @@ const metadata = {
  * </ul>
  *
  * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Basic Navigation</h4>
  * When the <code>ui5-carousel</code> is focused the user can navigate between the items
  * with the following keyboard shortcuts:
  * <br>
  *
+ * * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <ul>
  * <li>[UP/DOWN] - Navigates to previous and next item</li>
  * <li>[LEFT/RIGHT] - Navigates to previous and next item</li>

package/src/CheckBox.hbs

@@ -4,6 +4,7 @@
 	aria-checked="{{ariaChecked}}"
 	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
+	aria-label="{{ariaLabelText}}"
 	aria-labelledby="{{ariaLabelledBy}}"
 	aria-describedby="{{ariaDescribedBy}}"
 	tabindex="{{tabIndex}}"

package/src/CheckBox.js

@@ -4,6 +4,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import Icon from "./Icon.js";
@@ -32,6 +33,30 @@ const metadata = {
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
 
+		/**
+		 * Receives id(or many ids) of the elements that label the component
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
+		/**
+		 * Sets the accessible aria name of the component.
+		 *
+		 * @type {String}
+		 * @public
+		 * @defaultvalue ""
+		 * @since 1.1.0
+		 */
+		accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * Defines whether the component is disabled.
 		 * <br><br>
@@ -362,6 +387,10 @@ class CheckBox extends UI5Element {
 		};
 	}
 
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	get classes() {
 		return {
 			main: {
@@ -383,7 +412,11 @@ class CheckBox extends UI5Element {
 	}
 
 	get ariaLabelledBy() {
-		return this.text ? `${this._id}-label` : undefined;
+		if (!this.ariaLabelText) {
+			return this.text ? `${this._id}-label` : undefined;
+		}
+
+		return undefined;
 	}
 
 	get ariaDescribedBy() {

package/src/ColorPalette.js

@@ -16,6 +16,7 @@ import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
 import ColorPaletteDialogTemplate from "./generated/templates/ColorPaletteDialogTemplate.lit.js";
 import ColorPaletteItem from "./ColorPaletteItem.js";
+import Button from "./Button.js";
 import {
 	COLORPALETTE_CONTAINER_LABEL,
 	COLOR_PALETTE_MORE_COLORS_TEXT,
@@ -178,7 +179,7 @@ class ColorPalette extends UI5Element {
 
 	static get dependencies() {
 		const ColorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
-		return [ColorPaletteItem].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
+		return [ColorPaletteItem, Button].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
 	}
 
 	static async onDefine() {
@@ -252,20 +253,20 @@ class ColorPalette extends UI5Element {
 	}
 
 	_onclick(event) {
-		if (event.target.localName === "ui5-color-palette-item") {
+		if (event.target.hasAttribute("ui5-color-palette-item")) {
 			this.selectColor(event.target);
 		}
 	}
 
 	_onkeyup(event) {
-		if (isSpace(event) && event.target.localName === "ui5-color-palette-item") {
+		if (isSpace(event) && event.target.hasAttribute("ui5-color-palette-item")) {
 			event.preventDefault();
 			this.selectColor(event.target);
 		}
 	}
 
 	_onkeydown(event) {
-		if (isEnter(event) && event.target.localName === "ui5-color-palette-item") {
+		if (isEnter(event) && event.target.hasAttribute("ui5-color-palette-item")) {
 			this.selectColor(event.target);
 		}
 	}

package/src/ColorPalettePopover.hbs

@@ -2,19 +2,21 @@
 	hide-arrow
 	content-only-on-desktop
 	placement-type="Bottom"
-	>
+>
 	<div slot="header" class="ui5-cp-header">
 		<ui5-title
-			class="ui5-cp-title">{{_colorPaletteTitle}}</ui5-title>
+			class="ui5-cp-title"
+		>{{_colorPaletteTitle}}</ui5-title>
 	</div>
 	<div>
-		<ui5-color-palette 
+		<ui5-color-palette
 			?show-more-colors="{{this.showMoreColors}}"
 			?show-recent-colors="{{this.showRecentColors}}"
 			?show-default-color="{{this.defaultColor}}"
 			default-color="{{this.defaultColor}}"
 			popup-mode
-			@item-click="{{onSelectedColor}}">
+			@ui5-item-click="{{onSelectedColor}}"
+		>
 			{{#each colorPaletteColors}}
 				<slot name="{{this._individualSlot}}"></slot>
 			{{/each}}
@@ -26,4 +28,4 @@
 			@click="{{closePopover}}"
 		>{{_cancelButtonLabel}}</ui5-button>
 	</div>
-</ui5-responsive-popover>
+</ui5-responsive-popover>

package/src/ColorPalettePopover.js

@@ -13,6 +13,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 
 import Button from "./Button.js";
+import Title from "./Title.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import ColorPalette from "./ColorPalette.js";
 
@@ -145,6 +146,7 @@ class ColorPalettePopover extends UI5Element {
 		return [
 			ResponsivePopover,
 			Button,
+			Title,
 			ColorPalette,
 		];
 	}
@@ -167,11 +169,30 @@ class ColorPalettePopover extends UI5Element {
 		return this.responsivePopover.content[0].querySelector("[ui5-color-palette]");
 	}
 
-	closePopover() {
-		this.responsivePopover.close();
+	/**
+	 * Shows the ColorPalettePopover.
+	 * @param {HTMLElement} opener the element that the popover is shown at
+	 * @public
+	 * @since 1.1.1
+	 */
+	showAt(opener) {
+		this._openPopover(opener);
 	}
 
+	/**
+	 * Shows the ColorPalettePopover.
+	 * <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.
+	 * @param {HTMLElement} opener the element that the popover is shown at
+	 * @public
+	 * @since 1.0.0-rc.16
+	 * @deprecated The method is deprecated in favour of <code>showAt</code>.
+	 */
 	openPopover(opener) {
+		console.warn("The method 'openPopover' is deprecated and will be removed in future, use 'showAt' instead."); // eslint-disable-line
+		this._openPopover(opener);
+	}
+
+	_openPopover(opener) {
 		this._respPopover();
 
 		this.responsivePopover.showAt(opener, true);
@@ -183,6 +204,10 @@ class ColorPalettePopover extends UI5Element {
 		}
 	}
 
+	closePopover() {
+		this.responsivePopover.close();
+	}
+
 	onSelectedColor(event) {
 		this.closePopover();
 		this.fireEvent("item-click", event.detail);

package/src/ComboBox.hbs

@@ -14,6 +14,7 @@
 		@change="{{_inputChange}}"
 		@click={{_click}}
 		@keydown="{{_keydown}}"
+		@keyup="{{_keyup}}"
 		@focusin="{{_focusin}}"
 		@focusout="{{_focusout}}"
 		aria-expanded="{{open}}"

package/src/ComboBox.js

@@ -19,6 +19,10 @@ import {
 	isEscape,
 	isTabNext,
 	isTabPrevious,
+	isPageUp,
+	isPageDown,
+	isHome,
+	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import * as Filters from "./ComboBoxFilters.js";
 
@@ -215,7 +219,7 @@ const metadata = {
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the combo box
+		 * Receives id(or many ids) of the elements that label the component
 		 * @type {String}
 		 * @defaultvalue ""
 		 * @public
@@ -326,6 +330,7 @@ const metadata = {
  * The <code>ui5-combobox</code> component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.
  *
  * It is commonly used to enable users to select an option from a predefined list.
+ *
  * <h3>Structure</h3>
  * The <code>ui5-combobox</code> consists of the following elements:
  * <ul>
@@ -333,15 +338,24 @@ const metadata = {
  * <li> Drop-down arrow - expands\collapses the option list.</li>
  * <li> Option list - the list of available options.</li>
  * </ul>
+ *
  * <h3>Keyboard Handling</h3>
  *
  * The <code>ui5-combobox</code> provides advanced keyboard handling.
- *
- * <h4>Picker</h4>
- * If the <code>ui5-combobox</code> is focused,
- * you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
  * <br>
  *
+ * <ul>
+ * <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.</li>
+ * <li>[ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.</li>
+ * <li>[ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.</li>
+ * <li>[DOWN] - Selects the next matching item in the picker.</li>
+ * <li>[UP] - Selects the previous matching item in the picker.</li>
+ * <li>[PAGEDOWN] - Moves selection down by page size (10 items by default).</li>
+ * <li>[PAGEUP] - Moves selection up by page size (10 items by default). </li>
+ * <li>[HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.</li>
+ * <li>[END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.</li>
+ * </ul>
+ *
  *
  * <h3>ES6 Module Import</h3>
  *
@@ -517,6 +531,8 @@ class ComboBox extends UI5Element {
 	}
 
 	_resetFilter() {
+		this._userTypedValue = null;
+		this.inner.setSelectionRange(0, this.value.length);
 		this._filteredItems = this._filterItems("");
 		this._selectMatchingItem();
 	}
@@ -588,14 +604,12 @@ class ComboBox extends UI5Element {
 		});
 	}
 
-	async handleArrowKeyPress(event) {
-		if (this.readonly || !this._filteredItems.length) {
+	handleNavKeyPress(event) {
+		if (this.focused && (isHome(event) || isEnd(event)) && this.value) {
 			return;
 		}
 
 		const isOpen = this.open;
-		const isArrowDown = isDown(event);
-		const isArrowUp = isUp(event);
 		const currentItem = this._filteredItems.find(item => {
 			return isOpen ? item.focused : item.selected;
 		});
@@ -603,19 +617,17 @@ class ComboBox extends UI5Element {
 
 		event.preventDefault();
 
-		if ((this.focused === true && isArrowUp && isOpen) || (this._filteredItems.length - 1 === indexOfItem && isArrowDown)) {
+		if (this.focused && isOpen && (isUp(event) || isPageUp(event) || isPageDown(event))) {
 			return;
 		}
 
-		this._isKeyNavigation = true;
-
-		if (isArrowDown) {
-			this._handleArrowDown(event, indexOfItem);
+		if (this._filteredItems.length - 1 === indexOfItem && isDown(event)) {
+			return;
 		}
 
-		if (isArrowUp) {
-			this._handleArrowUp(event, indexOfItem);
-		}
+		this._isKeyNavigation = true;
+
+		this[`_handle${event.key}`](event, indexOfItem);
 	}
 
 	_handleItemNavigation(event, indexOfItem, isForward) {
@@ -632,7 +644,7 @@ class ComboBox extends UI5Element {
 
 		if (isOpen) {
 			this._itemFocused = true;
-			this.value = isGroupItem ? this.filterValue : currentItem.text;
+			this.value = isGroupItem ? "" : currentItem.text;
 			this.focused = false;
 			currentItem.focused = true;
 		} else {
@@ -652,7 +664,7 @@ class ComboBox extends UI5Element {
 
 		// autocomplete
 		const item = this._getFirstMatchingItem(this.value);
-		this._applyAtomicValueAndSelection(item, "", true);
+		this._applyAtomicValueAndSelection(item, (this.open ? this._userTypedValue : null), true);
 
 		if ((item && !item.selected)) {
 			this.fireEvent("selection-change", {
@@ -706,13 +718,59 @@ class ComboBox extends UI5Element {
 		this._handleItemNavigation(event, --indexOfItem, false /* isForward */);
 	}
 
+	_handlePageUp(event, indexOfItem) {
+		const isProposedIndexValid = indexOfItem - ComboBox.SKIP_ITEMS_SIZE > -1;
+		indexOfItem = isProposedIndexValid ? indexOfItem - ComboBox.SKIP_ITEMS_SIZE : 0;
+		const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
+
+		if (!isProposedIndexValid && this.hasValueStateText && this.open) {
+			this._clearFocus();
+			this._itemFocused = false;
+			this._isValueStateFocused = true;
+			return;
+		}
+
+		this._handleItemNavigation(event, indexOfItem, shouldMoveForward);
+	}
+
+	_handlePageDown(event, indexOfItem) {
+		const itemsLength = this._filteredItems.length;
+		const isProposedIndexValid = indexOfItem + ComboBox.SKIP_ITEMS_SIZE < itemsLength;
+
+		indexOfItem = isProposedIndexValid ? indexOfItem + ComboBox.SKIP_ITEMS_SIZE : itemsLength - 1;
+		const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
+
+		this._handleItemNavigation(event, indexOfItem, shouldMoveForward);
+	}
+
+	_handleHome(event, indexOfItem) {
+		const shouldMoveForward = this._filteredItems[0].isGroupItem && !this.open;
+
+		if (this.hasValueStateText && this.open) {
+			this._clearFocus();
+			this._itemFocused = false;
+			this._isValueStateFocused = true;
+			return;
+		}
+
+		this._handleItemNavigation(event, indexOfItem = 0, shouldMoveForward);
+	}
+
+	_handleEnd(event, indexOfItem) {
+		this._handleItemNavigation(event, indexOfItem = this._filteredItems.length - 1, true /* isForward */);
+	}
+
+	_keyup(event) {
+		this._userTypedValue = this.value.substring(0, this.inner.selectionStart);
+	}
+
 	_keydown(event) {
-		const isArrowKey = isDown(event) || isUp(event);
+		const isNavKey = isDown(event) || isUp(event) || isPageUp(event) || isPageDown(event) || isHome(event) || isEnd(event);
 		this._autocomplete = !(isBackSpace(event) || isDelete(event));
 		this._isKeyNavigation = false;
 
-		if (isArrowKey) {
-			this.handleArrowKeyPress(event);
+		if (isNavKey && !this.readonly && this._filteredItems.length) {
+			this.handleNavKeyPress(event);
 		}
 
 		if (isEnter(event)) {
@@ -745,6 +803,9 @@ class ComboBox extends UI5Element {
 				this._itemFocused = true;
 				selectedItem.focused = true;
 				this.focused = false;
+			} else if (this.open && this._filteredItems.length) {
+				// If no item is selected, select the first one on "Show" (F4, Alt+Up/Down)
+				this._handleItemNavigation(event, 0, true /* isForward */);
 			} else {
 				this.focused = true;
 			}
@@ -822,6 +883,7 @@ class ComboBox extends UI5Element {
 		const value = (item && item.text) || "";
 		this.inner.value = value;
 		if (highlightValue) {
+			filterValue = filterValue || "";
 			this.inner.setSelectionRange(filterValue.length, value.length);
 		}
 		this.value = value;
@@ -950,7 +1012,7 @@ class ComboBox extends UI5Element {
 	}
 
 	get shouldOpenValueStateMessagePopover() {
-		return this.focused && this.hasValueStateText && !this._iconPressed
+		return this.focused && !this.readonly && this.hasValueStateText && !this._iconPressed
 			&& !this.open && !this._isPhone;
 	}
 
@@ -958,6 +1020,10 @@ class ComboBox extends UI5Element {
 		return !this.valueStateMessage.length && this.hasValueStateText;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	/**
 	 * This method is relevant for sap_horizon theme only
 	 */
@@ -1036,6 +1102,8 @@ class ComboBox extends UI5Element {
 	}
 }
 
+ComboBox.SKIP_ITEMS_SIZE = 10;
+
 ComboBox.define();
 
 export default ComboBox;

package/src/ComboBoxPopover.hbs

@@ -105,6 +105,7 @@
 		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 		placement-type="Bottom"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">