@ui5/webcomponents 1.3.1 → 1.6.0

package/src/Panel.hbs

@@ -2,53 +2,63 @@
 	class="ui5-panel-root"
 	role="{{accRole}}"
 	aria-label="{{effectiveAccessibleName}}"
+	aria-labelledby="{{fixedPanelAriaLabelledbyReference}}"
 >
-	{{! header: either header or h1 with header text}}
-	<div
-		@click="{{_headerClick}}"
-		@keydown="{{_headerKeyDown}}"
-		@keyup="{{_headerKeyUp}}"
-		class="ui5-panel-header"
-		tabindex="{{headerTabIndex}}"
-		role="{{accInfo.role}}"
-		aria-expanded="{{accInfo.ariaExpanded}}"
-		aria-controls="{{accInfo.ariaControls}}"
-		aria-labelledby="{{accInfo.ariaLabelledby}}"
-	>
-		{{#unless fixed}}
-			<div class="ui5-panel-header-button-root">
-				{{#if _hasHeader}}
-					<ui5-button
-						design="Transparent"
-						class="ui5-panel-header-button {{classes.headerBtn}}"
-						icon="slim-arrow-right"
-						@click="{{_toggleButtonClick}}"
-						.accessibilityAttributes={{accInfo.button.accessibilityAttributes}}
-						tooltip="{{accInfo.button.title}}"
-						accessible-name="{{accInfo.button.ariaLabelButton}}"
-					></ui5-button>
-				{{else}}
-					<ui5-icon
-						class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
-						name="slim-arrow-right"
-					></ui5-icon>
-				{{/if}}
-			</div>
-		{{/unless}}
 
-		{{#if _hasHeader}}
-			<slot name="header"></slot>
-		{{else}}
-			<div
-				id="{{_id}}-header-title"
-				role="heading"
-				aria-level="{{headerAriaLevel}}"
-				class="ui5-panel-header-title"
-			>
-				{{headerText}}
-			</div>
-		{{/if}}
-	</div>
+	{{#if hasHeaderOrHeaderText}}
+		{{! header: either header or h1 with header text}}
+		<div
+			@click="{{_headerClick}}"
+			@keydown="{{_headerKeyDown}}"
+			@keyup="{{_headerKeyUp}}"
+			class="ui5-panel-header"
+			tabindex="{{headerTabIndex}}"
+			role="{{accInfo.role}}"
+			aria-expanded="{{accInfo.ariaExpanded}}"
+			aria-controls="{{accInfo.ariaControls}}"
+			aria-labelledby="{{accInfo.ariaLabelledby}}"
+			part="header"
+		>
+			{{#unless fixed}}
+				<div class="ui5-panel-header-button-root">
+					{{#if _hasHeader}}
+						<ui5-button
+							design="Transparent"
+							class="ui5-panel-header-button ui5-panel-header-button-with-icon"
+							@click="{{_toggleButtonClick}}"
+							.accessibilityAttributes={{accInfo.button.accessibilityAttributes}}
+							tooltip="{{accInfo.button.title}}"
+							accessible-name="{{accInfo.button.ariaLabelButton}}"
+						>
+							<div class="ui5-panel-header-icon-wrapper">
+								<ui5-icon class="ui5-panel-header-icon {{classes.headerBtn}}" name="slim-arrow-right"></ui5-icon>
+							</div>
+						</ui5-button>
+					{{else}}
+						<ui5-icon
+							class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
+							name="slim-arrow-right"
+							show-tooltip
+							accessible-name="{{toggleButtonTitle}}"
+						></ui5-icon>
+					{{/if}}
+				</div>
+			{{/unless}}
+
+			{{#if _hasHeader}}
+				<slot name="header"></slot>
+			{{else}}
+				<div
+					id="{{_id}}-header-title"
+					role="heading"
+					aria-level="{{headerAriaLevel}}"
+					class="ui5-panel-header-title"
+				>
+					{{headerText}}
+				</div>
+			{{/if}}
+		</div>
+	{{/if}}
 
 	{{! content area}}
 	<div

package/src/Panel.js

@@ -42,7 +42,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the content of the component.
+		 * Defines the content of the component.
 		 * The content is visible only when the component is expanded.
 		 *
 		 * @type {Node[]}
@@ -105,7 +105,7 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria role of the component.
+		 * Sets the accessible ARIA role of the component.
 		 * Depending on the usage, you can change the role from the default <code>Form</code>
 		 * to <code>Region</code> or <code>Complementary</code>.
 		 *
@@ -133,7 +133,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -235,6 +235,7 @@ const metadata = {
  * <br>
  * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:
  * <ul>
+ * <li>header - Used to style the wrapper of the header</li>
  * <li>content - Used to style the wrapper of the content</li>
  * </ul>
  *
@@ -421,7 +422,11 @@ class Panel extends UI5Element {
 	}
 
 	get ariaLabelledbyReference() {
-		return (this.nonFocusableButton && this.headerText) ? `${this._id}-header-title` : undefined;
+		return (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;
+	}
+
+	get fixedPanelAriaLabelledbyReference() {
+		return this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;
 	}
 
 	get header() {
@@ -440,6 +445,10 @@ class Panel extends UI5Element {
 		return !this._hasHeader && !this.fixed;
 	}
 
+	get hasHeaderOrHeaderText() {
+		return this._hasHeader || this.headerText;
+	}
+
 	get nonFocusableButton() {
 		return !this.header.length;
 	}

package/src/Popover.js

@@ -778,7 +778,11 @@ class Popover extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return this._ariaLabel ? undefined : "ui5-popup-header";
+		if (!this._ariaLabel && this._displayHeader) {
+			return "ui5-popup-header";
+		}
+
+		return undefined;
 	}
 
 	get _ariaModal() { // Required by Popup.js

package/src/Popup.hbs

@@ -5,7 +5,6 @@
 	aria-modal="{{_ariaModal}}"
 	aria-label="{{_ariaLabel}}"
 	aria-labelledby="{{_ariaLabelledBy}}"
-	dir="{{effectiveDir}}"
 	@keydown={{_onkeydown}}
 	@focusout={{_onfocusout}}
 	@mouseup={{_onmouseup}}

package/src/Popup.js

@@ -23,7 +23,7 @@ import globalStyles from "./generated/themes/PopupGlobal.css.js";
  */
 const metadata = {
 	managedSlots: true,
-	slots: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 
 		/**
 		 * Defines the content of the Popup.
@@ -36,7 +36,7 @@ const metadata = {
 			propertyName: "content",
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 		/**
 		 * Defines the ID of the HTML Element, which will get the initial focus.
 		 *
@@ -114,7 +114,7 @@ const metadata = {
 		 * @type {string}
 		 * @private
 		 */
-		 mediaRange: {
+		mediaRange: {
 			type: String,
 		},
 
@@ -129,7 +129,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 
 		/**
 		 * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. <b>This event does not bubble.</b>

package/src/ProgressIndicator.hbs

@@ -1,5 +1,4 @@
 <div class="ui5-progress-indicator-root {{classes.root}}"
-     dir="{{effectiveDir}}"
      role="progressbar"
      aria-valuemin="0"
      aria-valuenow="{{validatedValue}}"

package/src/RadioButton.hbs

@@ -6,7 +6,6 @@
 	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedBy}}"
 	tabindex="{{tabIndex}}"
-	dir="{{effectiveDir}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"

package/src/RadioButton.js

@@ -182,12 +182,12 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.16
+		 * @public
+		 * @since 1.6.0
 		 */
 		accessibleName: {
 			type: String,
@@ -400,11 +400,13 @@ class RadioButton extends UI5Element {
 			return this.toggle();
 		}
 
-		if (isDown(event) || isRight(event)) {
+		const isRTL = this.effectiveDir === "rtl";
+
+		if (isDown(event) || (!isRTL && isRight(event)) || (isRTL && isLeft(event))) {
 			this._handleDown(event);
 		}
 
-		if (isUp(event) || isLeft(event)) {
+		if (isUp(event) || (!isRTL && isLeft(event)) || (isRTL && isRight(event))) {
 			this._handleUp(event);
 		}
 	}

package/src/RangeSlider.hbs

@@ -17,7 +17,7 @@
 			aria-valuemin="{{min}}"
 			aria-valuemax="{{max}}"
 			aria-valuetext="From {{startValue}} to {{endValue}}"
-			aria-labelledby="{{_id}}-sliderDesc"
+			aria-labelledby="{{_ariaLabelledByProgressBarRefs}}"
 			aria-disabled="{{_ariaDisabled}}"
 		></div>
 	</div>
@@ -34,7 +34,7 @@
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{startValue}}"
-		aria-labelledby="{{_id}}-startHandleDesc"
+		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
 		<ui5-icon name="source-code" slider-icon></ui5-icon>
@@ -56,7 +56,7 @@
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{endValue}}"
-		aria-labelledby="{{_id}}-endHandleDesc"
+		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
 		<ui5-icon name="source-code" slider-icon></ui5-icon>

package/src/RangeSlider.js

@@ -16,6 +16,9 @@ import {
 	RANGE_SLIDER_END_HANDLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 
+// Styles
+import rangeSliderStyles from "./generated/themes/RangeSlider.css.js";
+
 /**
  * @public
  */
@@ -48,6 +51,10 @@ const metadata = {
 			type: Float,
 			defaultValue: 100,
 		},
+
+		rangePressed: {
+			type: Boolean,
+		},
 	},
 };
 
@@ -129,6 +136,10 @@ class RangeSlider extends SliderBase {
 		return [Icon];
 	}
 
+	static get styles() {
+		return [SliderBase.styles, rangeSliderStyles];
+	}
+
 	constructor() {
 		super();
 		this._stateStorage.startValue = null;
@@ -356,6 +367,8 @@ class RangeSlider extends SliderBase {
 		// Determine the rest of the needed details from the start of the interaction.
 		this._saveInteractionStartData(event, newValue);
 
+		this.rangePressed = this._isPressInCurrentRange;
+
 		// Do not yet update the RangeSlider if press is in range or over a handle.
 		if (this._isPressInCurrentRange || this._handeIsPressed) {
 			this._handeIsPressed = false;
@@ -455,6 +468,8 @@ class RangeSlider extends SliderBase {
 		this._setIsPressInCurrentRange(false);
 
 		this.handleUpBase();
+
+		this.rangePressed = false;
 	}
 
 	/**
@@ -723,6 +738,24 @@ class RangeSlider extends SliderBase {
 		return this._reversedValues;
 	}
 
+	get tickmarksObject() {
+		const count = this._tickmarksCount;
+		const arr = [];
+
+		if (this._hiddenTickmarks) {
+			return [false, false];
+		}
+
+		for (let i = 0; i <= count; i++) {
+			const isBiggerThanStartValue = this._effectiveMin + (i * this.step) >= this.startValue;
+			const isBiggerThanEndValue = this._effectiveMin + (i * this.step) <= this.endValue;
+
+			arr.push(isBiggerThanStartValue && isBiggerThanEndValue);
+		}
+
+		return arr;
+	}
+
 	get _startHandle() {
 		return this.shadowRoot.querySelector(".ui5-slider-handle--start");
 	}
@@ -735,6 +768,18 @@ class RangeSlider extends SliderBase {
 		return this.shadowRoot.querySelector(".ui5-slider-progress");
 	}
 
+	get _ariaLabelledByStartHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-startHandleDesc`].join(" ").trim();
+	}
+
+	get _ariaLabelledByEndHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-endHandleDesc`].join(" ").trim();
+	}
+
+	get _ariaLabelledByProgressBarRefs() {
+		return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
+	}
+
 	get styles() {
 		return {
 			progress: {

package/src/RatingIndicator.hbs

@@ -16,20 +16,34 @@
 	title="{{tooltip}}"
 	aria-label="{{accessibleName}}"
 >
-	<div
-		class="ui5-rating-indicator-stars-wrapper"
+	<ul class="ui5-rating-indicator-list"
 		aria-hidden="true"
-	>
+		>
 		{{#each _stars}}
 			{{#if this.selected}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">&#9733;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-sel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else if this.halfStar}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">&#9734;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+					<div class="ui5-rating-indicator-half-icon-wrapper">
+						<ui5-icon data-ui5-value="{{this.index}}" name="favorite" class="ui5-rating-indicator-half-icon"></ui5-icon>
+					</div>
+				</li>
 			{{else if ../readonly}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-readonly-unselected-icon" data-value="{{this.index}}">&#9733;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
+			{{else if ../disabled}}
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else}}
-				<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">&#9734;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+				</li>
 			{{/if}}
 		{{/each}}
-	</div>
+	</ul>
 </div>

package/src/RatingIndicator.js

@@ -18,6 +18,9 @@ import {
 	RATING_INDICATOR_TOOLTIP_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
+import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
+import "@ui5/webcomponents-icons/dist/unfavorite.js";
 
 // Styles
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
@@ -88,7 +91,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: undefined
@@ -192,6 +195,10 @@ class RatingIndicator extends UI5Element {
 		RatingIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	constructor() {
 		super();
 
@@ -231,7 +238,7 @@ class RatingIndicator extends UI5Element {
 			return;
 		}
 
-		this.value = parseInt(event.target.getAttribute("data-value"));
+		this.value = parseInt(event.target.getAttribute("data-ui5-value"));
 
 		if (this.value === 1 && this._liveValue === 1) {
 			this.value = 0;

package/src/SegmentedButton.hbs

@@ -5,7 +5,6 @@
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmented-button-root"
 	role="listbox"
-	dir="{{effectiveDir}}"
 	aria-multiselectable="true"
 	aria-describedby="{{_id}}-invisibleText"
 	aria-roledescription={{ariaDescription}}

package/src/SegmentedButton.js

@@ -4,7 +4,6 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import {
 	isSpace,
 	isEnter,
@@ -27,7 +26,7 @@ const metadata = {
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */  {
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -175,15 +174,7 @@ class SegmentedButton extends UI5Element {
 
 		this.widths = this.items.map(item => {
 			// +1 is added because for width 100.44px the offsetWidth property returns 100px and not 101px
-			let width = item.offsetWidth + 1;
-
-			if (isIE()) {
-				// in IE we are adding 1 one px beacause the width of the border on an item in the middle is not calculated and if the
-				// longest item is in the middle, it truncates
-				width += 1;
-			}
-
-			return width;
+			return item.offsetWidth + 1;
 		});
 	}
 

package/src/SegmentedButtonItem.hbs

@@ -8,7 +8,6 @@
 		aria-disabled="{{disabled}}"
 		data-sap-focus-ref
 	{{> ariaPressed}}
-		dir="{{effectiveDir}}"
 		@focusout={{_onfocusout}}
 		@focusin={{_onfocusin}}
 		@click={{_onclick}}

package/src/SegmentedButtonItem.js

@@ -10,7 +10,7 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa
  */
 const metadata = {
 	tag: "ui5-segmented-button-item",
-	properties: /** @lends  sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
@@ -70,7 +70,7 @@ const metadata = {
 /**
  * @class
  *
- *<h3 class="comment-api-title">Overview</h3>
+ * <h3 class="comment-api-title">Overview</h3>
  *
  * Users can use the <code>ui5-segmented-button-item</code> as part of a <code>ui5-segmented-button</code>.
  * <br><br>

package/src/Select.hbs

@@ -1,6 +1,5 @@
 <div
 	class="ui5-select-root ui5-input-focusable-element"
-	dir="{{effectiveDir}}"
 	id="{{_id}}-select"
 	@click="{{_onclick}}"
 >
@@ -9,7 +8,6 @@
 			aria-hidden="true"
 			class="ui5-select-option-icon"
 			name="{{selectedOptionIcon}}"
-			dir="{{effectiveDir}}"
 		></ui5-icon>
 	{{/if}}
 	<div class="ui5-select-label-root"
@@ -36,7 +34,6 @@
 		name="slim-arrow-down"
 		input-icon
 		?pressed="{{_iconPressed}}"
-		dir="{{effectiveDir}}"
 	></ui5-icon>
 
 	{{#if hasValueState}}

package/src/Select.js

@@ -30,6 +30,10 @@ import {
 	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,
@@ -109,7 +113,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Select.prototype */  {
+	properties: /** @lends sap.ui.webcomponents.main.Select.prototype */  {
 
 		/**
 		 * Defines whether the component is in disabled state.
@@ -179,7 +183,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @since 1.0.0-rc.9
@@ -504,7 +508,7 @@ class Select extends UI5Element {
 		const itemToSelect = this._searchNextItemByText(text);
 
 		if (itemToSelect) {
-			const nextIndex = this._getSelectedItemIndex(itemToSelect);
+			const nextIndex = this._filteredItems.indexOf(itemToSelect);
 
 			this._changeSelectedItem(this._selectedIndex, nextIndex);
 
@@ -547,7 +551,7 @@ class Select extends UI5Element {
 	}
 
 	_getSelectedItemIndex(item) {
-		return [].indexOf.call(item.parentElement.children, item);
+		return this._filteredItems.findIndex(option => `${option._id}-li` === item.id);
 	}
 
 	_select(index) {
@@ -669,17 +673,42 @@ class Select extends UI5Element {
 
 	get valueStateTextMappings() {
 		return {
-			"Success": Select.i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": Select.i18nBundle.getText(VALUE_STATE_INFORMATION),
-			"Error": Select.i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": Select.i18nBundle.getText(VALUE_STATE_WARNING),
+			[ValueState.Success]: Select.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			[ValueState.Information]: Select.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			[ValueState.Error]: Select.i18nBundle.getText(VALUE_STATE_ERROR),
+			[ValueState.Warning]: Select.i18nBundle.getText(VALUE_STATE_WARNING),
+		};
+	}
+
+	get valueStateTypeMappings() {
+		return {
+			[ValueState.Success]: Select.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			[ValueState.Information]: Select.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			[ValueState.Error]: Select.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			[ValueState.Warning]: Select.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
 		};
 	}
 
 	get valueStateText() {
+		let valueStateText;
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			valueStateText = this.valueStateDefaultText;
+		} else {
+			valueStateText = this.valueStateMessageText.map(el => el.textContent).join(" ");
+		}
+
+		return `${this.valueStateTypeText} ${valueStateText}`;
+	}
+
+	get valueStateDefaultText() {
 		return this.valueStateTextMappings[this.valueState];
 	}
 
+	get valueStateTypeText() {
+		return this.valueStateTypeMappings[this.valueState];
+	}
+
 	get hasValueState() {
 		return this.valueState !== ValueState.None;
 	}
@@ -748,6 +777,9 @@ class Select extends UI5Element {
 				"display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
 			},
+			responsivePopover: {
+				"min-width": `${this.offsetWidth}px`,
+			},
 		};
 	}