@ui5/webcomponents 1.3.1 → 1.6.0

package/dist/StandardListItem.js

@@ -2,6 +2,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
 import Avatar from "./Avatar.js";
+import WrappingType from "./types/WrappingType.js";
 import StandardListItemTemplate from "./generated/templates/StandardListItemTemplate.lit.js";
 
 /**
@@ -74,7 +75,7 @@ const metadata = {
 		/**
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
 		 * @type {ValueState}
 		 * @defaultvalue "None"
 		 * @public
@@ -98,6 +99,21 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines if the text of the component should wrap, they truncate by default.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> this property takes affect only if text node is provided to default slot of the component
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
+		 * @private
+		 * @since 1.5.0
+		 */
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
+		},
+
 		/**
 		 * Indicates if the list item has text content.
 		 * @type {boolean}

package/dist/StepInput.js

@@ -187,7 +187,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public

package/dist/SuggestionGroupItem.js

@@ -6,7 +6,7 @@ import GroupHeaderListItem from "./GroupHeaderListItem.js";
  */
 const metadata = {
 	tag: "ui5-suggestion-group-item",
-	properties: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
 		/**
 		 * Defines the text of the <code>ui5-suggestion-group-item</code>.
 		 *
@@ -18,9 +18,9 @@ const metadata = {
 			type: String,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
 	},
 };
 

package/dist/SuggestionItem.js

@@ -9,7 +9,7 @@ import ListItemType from "./types/ListItemType.js";
  */
 const metadata = {
 	tag: "ui5-suggestion-item",
-	properties: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -100,7 +100,7 @@ const metadata = {
 		/**
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br><br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Information"</code>, <code>"Warning"</code> and <code>"Erorr"</code>.
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Information"</code>, <code>"Warning"</code> and <code>"Error"</code>.
 		 * @type {ValueState}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.15
@@ -111,9 +111,9 @@ const metadata = {
 			defaultValue: ValueState.None,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 	},
 };
 

package/dist/Switch.js

@@ -10,11 +10,6 @@ import "@ui5/webcomponents-icons/dist/less.js";
 import Icon from "./Icon.js";
 import SwitchDesign from "./types/SwitchDesign.js";
 
-import {
-	SWITCH_ON,
-	SWITCH_OFF,
-} from "./generated/i18n/i18n-defaults.js";
-
 // Template
 import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
 
@@ -98,8 +93,10 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Sets the accessible ARIA name of the component.
 		 *
+		 * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
+		 * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
 		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
@@ -112,6 +109,8 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the component.
 		 *
+		 * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
+		 * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -263,11 +262,11 @@ class Switch extends UI5Element {
 	}
 
 	get accessibilityOnText() {
-		return this._textOn || Switch.i18nBundle.getText(SWITCH_ON);
+		return this._textOn;
 	}
 
 	get accessibilityOffText() {
-		return this._textOff || Switch.i18nBundle.getText(SWITCH_OFF);
+		return this._textOff;
 	}
 
 	get hiddenText() {
@@ -275,7 +274,7 @@ class Switch extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
+		return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
 	}
 
 	static get dependencies() {

package/dist/Tab.js

@@ -1,7 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import SemanticColor from "./types/SemanticColor.js";
+import ListItemType from "./types/ListItemType.js";
 import TabContainer from "./TabContainer.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
@@ -248,7 +252,7 @@ class Tab extends UI5Element {
 	}
 
 	get _effectiveSlotName() {
-		return this.isOnSelectedTabPath ? this._individualSlot : "disabled-slot";
+		return this.isOnSelectedTabPath ? this._individualSlot : `disabled-${this._individualSlot}`;
 	}
 
 	get _defaultSlotName() {
@@ -269,7 +273,7 @@ class Tab extends UI5Element {
 	 * @since 1.0.0-rc.16
 	 */
 	getTabInStripDomRef() {
-		return this._getTabInStripDomRef;
+		return this._tabInStripDomRef;
 	}
 
 	getFocusDomRef() {
@@ -371,11 +375,24 @@ class Tab extends UI5Element {
 		return classes.join(" ");
 	}
 
-	get headerSemanticIconClasses() {
-		const classes = ["ui5-tab-strip-item-semanticIcon"];
+	get semanticIconName() {
+		switch (this.design) {
+		case SemanticColor.Positive:
+			return "sys-enter-2";
+		case SemanticColor.Negative:
+			return "error";
+		case SemanticColor.Critical:
+			return "alert";
+		default:
+			return null;
+		}
+	}
 
-		if (this.design !== SemanticColor.Default) {
-			classes.push(`ui5-tab-strip-item-semanticIcon--${this.design.toLowerCase()}`);
+	get semanticIconClasses() {
+		const classes = ["ui5-tab-semantic-icon"];
+
+		if (this.design !== SemanticColor.Default && this.design !== SemanticColor.Neutral) {
+			classes.push(`ui5-tab-semantic-icon--${this.design.toLowerCase()}`);
 		}
 
 		return classes.join(" ");
@@ -384,11 +401,11 @@ class Tab extends UI5Element {
 	get overflowClasses() {
 		const classes = ["ui5-tab-overflow-item"];
 
-		if (this.design !== SemanticColor.Default) {
+		if (this.design !== SemanticColor.Default && this.design !== SemanticColor.Neutral) {
 			classes.push(`ui5-tab-overflow-item--${this.design.toLowerCase()}`);
 		}
 
-		if (this.disabled) {
+		if (this.effectiveDisabled) {
 			classes.push("ui5-tab-overflow-item--disabled");
 		}
 
@@ -400,7 +417,7 @@ class Tab extends UI5Element {
 	}
 
 	get overflowState() {
-		return (this.disabled || this.isSingleClickArea) ? "Inactive" : "Active";
+		return (this.disabled || this.isSingleClickArea) ? ListItemType.Inactive : ListItemType.Active;
 	}
 }
 

package/dist/TabContainer.js

@@ -30,6 +30,7 @@ import Icon from "./Icon.js";
 import List from "./List.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
+import SemanticColor from "./types/SemanticColor.js";
 
 // Templates
 import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
@@ -52,7 +53,7 @@ const metadata = {
 	languageAware: true,
 	managedSlots: true,
 	fastNavigation: true,
-	slots: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ {
 		/**
 		 * Defines the tabs.
 		 * <br><br>
@@ -98,7 +99,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ {
 		/**
 		 * Defines whether the tabs are in a fixed state that is not
 		 * expandable/collapsible by user interaction.
@@ -248,22 +249,12 @@ const metadata = {
 			defaultValue: "More",
 		},
 
-		_startOverflowItems: {
-			type: Object,
-			multiple: true,
-		},
-
-		_endOverflowItems: {
-			type: Object,
-			multiple: true,
-		},
-
 		_overflowItems: {
 			type: Object,
 			multiple: true,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ {
 
 		/**
 		 * Fired when a tab is selected.
@@ -383,7 +374,7 @@ class TabContainer extends UI5Element {
 
 	onBeforeRendering() {
 		// update selected tab
-		this._allItemsAndSubItems = this._getAllSubItems(this.items, []);
+		this._allItemsAndSubItems = this._getAllSubItems(this.items);
 		if (this._allItemsAndSubItems.length) {
 			const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
 			if (selectedTabs.length) {
@@ -407,7 +398,7 @@ class TabContainer extends UI5Element {
 
 	onAfterRendering() {
 		this.items.forEach(item => {
-			item._getTabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`);
+			item._tabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`);
 		});
 	}
 
@@ -419,6 +410,20 @@ class TabContainer extends UI5Element {
 		ResizeHandler.deregister(this._getHeader(), this._handleResize);
 	}
 
+	async _handleResize() {
+		if (this.responsivePopover && this.responsivePopover.opened) {
+			this.responsivePopover.close();
+		}
+		this._updateMediaRange();
+
+		await renderFinished(); // await the tab container to have rendered its representation of tabs
+		this._setItemsForStrip();
+	}
+
+	_updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
 	_setItemsExternalProperties(items) {
 		items.filter(item => !item.isSeparator).forEach((item, index, arr) => {
 			item._isInline = this.tabLayout === TabLayout.Inline;
@@ -438,9 +443,10 @@ class TabContainer extends UI5Element {
 
 	async _onTabStripClick(event) {
 		const tab = getTab(event.target);
-		if (!tab) {
+		if (!tab || tab._realTab.disabled) {
 			return;
 		}
+
 		event.preventDefault();
 		event.stopPropagation();
 		if (event.target.hasAttribute("ui5-button")) {
@@ -449,9 +455,8 @@ class TabContainer extends UI5Element {
 		}
 
 		if (!tab._realTab._hasOwnContent && tab._realTab.tabs.length) {
-			this._overflowItems = [];
 			this._overflowItems = tab._realTab.subTabs;
-			this._addStyleIndent(this._overflowItems, false);
+			this._addStyleIndent(this._overflowItems);
 
 			this.responsivePopover = await this._respPopover();
 			if (this.responsivePopover.opened) {
@@ -488,7 +493,7 @@ class TabContainer extends UI5Element {
 		}
 
 		this._overflowItems = tabInstance.subTabs;
-		this._addStyleIndent(this._overflowItems, false);
+		this._addStyleIndent(this._overflowItems);
 
 		this.responsivePopover = await this._respPopover();
 		if (this.responsivePopover.opened) {
@@ -509,7 +514,7 @@ class TabContainer extends UI5Element {
 
 	_onTabStripKeyDown(event) {
 		const tab = getTab(event.target);
-		if (!tab) {
+		if (!tab || tab._realTab.disabled) {
 			return;
 		}
 
@@ -537,7 +542,7 @@ class TabContainer extends UI5Element {
 
 	_onTabStripKeyUp(event) {
 		const tab = getTab(event.target);
-		if (!tab) {
+		if (!tab || tab._realTab.disabled) {
 			return;
 		}
 
@@ -575,7 +580,7 @@ class TabContainer extends UI5Element {
 		selectedTopLevel.focus();
 	}
 
-	_getAllSubItems(items, result, level = 1) {
+	_getAllSubItems(items, result = [], level = 1) {
 		items.forEach(item => {
 			if (item.hasAttribute("ui5-tab") || item.hasAttribute("ui5-tab-separator")) {
 				item._level = level;
@@ -690,13 +695,13 @@ class TabContainer extends UI5Element {
 		if (isEndOverflow) {
 			button = this.overflowButton[0] || overflow.querySelector("[ui5-button]");
 			this._overflowItems = items;
-			this._addStyleIndent(this._overflowItems, true);
+			this._addStyleIndent(this._overflowItems);
 		}
 
 		if (isStartOverflow) {
 			button = this.startOverflowButton[0] || overflow.querySelector("[ui5-button]");
 			this._overflowItems = items;
-			this._addStyleIndent(this._overflowItems, true);
+			this._addStyleIndent(this._overflowItems);
 		}
 
 		this.responsivePopover = await this._respPopover();
@@ -704,7 +709,7 @@ class TabContainer extends UI5Element {
 			this.responsivePopover.close();
 		} else {
 			this.responsivePopover.initialFocus = this.responsivePopover.content[0].items.filter(item => item.classList.contains("ui5-tab-overflow-item"))[0].id;
-			this.responsivePopover.showAt(button);
+			await this.responsivePopover.showAt(button);
 		}
 	}
 
@@ -712,19 +717,21 @@ class TabContainer extends UI5Element {
 		return this.responsivePopover.content[0].items.filter(item => (item._realTab && item._realTab.selected));
 	}
 
-	_addStyleIndent(tabs, isOverflow) {
+	_addStyleIndent(tabs) {
+		const extraIndent = this._getAllSubItems(tabs)
+			.filter(tab => !tab.isSeparator)
+			.some(tab => tab.design !== SemanticColor.Default && tab.design !== SemanticColor.Neutral);
+
 		walk(tabs, tab => {
-			let level = tab._level;
-			if (!isOverflow) {
-				level -= 1;
-			}
+			let level = tab._level - 1;
 
-			if (tab._level > 1 && tab.isSeparator) {
-				level -= 1;
+			if (tab.isSeparator) {
+				level += 1;
 			}
 
 			tab._style = {
-				"--_ui5-indentation-level": level / 2,
+				"--_ui5-tab-indentation-level": level,
+				"--_ui5-tab-extra-indent": extraIndent ? 1 : null,
 			};
 		});
 	}
@@ -738,16 +745,6 @@ class TabContainer extends UI5Element {
 		}
 	}
 
-	async _handleResize() {
-		if (this.responsivePopover && this.responsivePopover.opened) {
-			this.responsivePopover.close();
-		}
-		this._updateMediaRange();
-
-		await renderFinished(); // await the tab container to have rendered its representation of tabs
-		this._setItemsForStrip();
-	}
-
 	_setItemsForStrip() {
 		const tabStrip = this._getTabStrip();
 		let allItemsWidth = 0;
@@ -1073,10 +1070,6 @@ class TabContainer extends UI5Element {
 		return focusableTabs;
 	}
 
-	_updateMediaRange() {
-		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
-	}
-
 	_getHeader() {
 		return this.shadowRoot.querySelector(`#${this._id}-header`);
 	}

package/dist/TabSeparator.js

@@ -59,7 +59,7 @@ class TabSeparator extends UI5Element {
 	}
 
 	getTabInStripDomRef() {
-		return this._getTabInStripDomRef;
+		return this._tabInStripDomRef;
 	}
 
 	get stableDomRef() {

package/dist/Table.js

@@ -4,7 +4,6 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import {
 	isTabNext,
 	isTabPrevious,
@@ -254,7 +253,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -542,6 +541,11 @@ class Table extends UI5Element {
 		this._noDataDisplayed = !this.rows.length && !this.hideNoData;
 		this.visibleColumnsCount = this.visibleColumns.length;
 
+		if (this.isMultiSelect) {
+			// we have to count the selection column as well
+			this.visibleColumnsCount += 1;
+		}
+
 		this._allRowsSelected = selectedRows.length === this.rows.length;
 
 		this._prevFocusedRow = this._prevFocusedRow || this.rows[0];
@@ -556,9 +560,7 @@ class Table extends UI5Element {
 	}
 
 	onEnterDOM() {
-		if (!isIE()) {
-			this.growingIntersectionObserver = this.getIntersectionObserver();
-		}
+		this.growingIntersectionObserver = this.getIntersectionObserver();
 
 		ResizeHandler.register(this.getDomRef(), this._handleResize);
 
@@ -568,11 +570,9 @@ class Table extends UI5Element {
 	onExitDOM() {
 		ResizeHandler.deregister(this.getDomRef(), this._handleResize);
 
-		if (!isIE()) {
-			this.growingIntersectionObserver.disconnect();
-			this.growingIntersectionObserver = null;
-			this.tableEndObserved = false;
-		}
+		this.growingIntersectionObserver.disconnect();
+		this.growingIntersectionObserver = null;
+		this.tableEndObserved = false;
 	}
 
 	_onkeydown(event) {
@@ -1119,16 +1119,11 @@ class Table extends UI5Element {
 	}
 
 	get growsWithButton() {
-		if (isIE()) {
-			// On IE fallback to "More" button, even if growing of type "Scroll" is set.
-			return this.growing === TableGrowingMode.Button || this.growing === TableGrowingMode.Scroll;
-		}
-
 		return this.growing === TableGrowingMode.Button;
 	}
 
 	get growsOnScroll() {
-		return !isIE() && this.growing === TableGrowingMode.Scroll;
+		return this.growing === TableGrowingMode.Scroll;
 	}
 
 	get _growingButtonText() {
@@ -1165,10 +1160,6 @@ class Table extends UI5Element {
 	}
 
 	get busyIndPosition() {
-		if (isIE()) {
-			return "absolute";
-		}
-
 		return this._inViewport ? "absolute" : "sticky";
 	}
 

package/dist/TableRow.js

@@ -194,10 +194,12 @@ class TableRow extends UI5Element {
 	constructor() {
 		super();
 
+		const handleToushStartEvent = event => {
+			this.activate();
+		};
+
 		this._ontouchstart = {
-			handleEvent(event) {
-				this.activate();
-			},
+			handleEvent: handleToushStartEvent,
 			passive: true,
 		};
 	}

package/dist/TextArea.js

@@ -5,7 +5,6 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Popover from "./Popover.js";
@@ -218,7 +217,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public
@@ -467,20 +466,11 @@ class TextArea extends UI5Element {
 	_oninput(event) {
 		const nativeTextArea = this.getInputDomRef();
 
-		/* skip calling change event when an textarea with a placeholder is focused on IE
-			- value of the host and the internal textarea should be different in case of actual input
-			- input is called when a key is pressed => keyup should not be called yet
-		*/
-		const skipFiring = (nativeTextArea.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
 		if (event.target === nativeTextArea) {
 			// stop the native event, as the semantic "input" would be fired.
 			event.stopImmediatePropagation();
 		}
 
-		if (skipFiring) {
-			return;
-		}
-
 		this.value = nativeTextArea.value;
 		this.fireEvent("input", {});
 
@@ -568,7 +558,7 @@ class TextArea extends UI5Element {
 		return {
 			valueStateMsg: {
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
-				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning || this.exceeding,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
 		};
@@ -639,7 +629,7 @@ class TextArea extends UI5Element {
 	}
 
 	get displayValueStateMessagePopover() {
-		return !this.readonly && (this.hasCustomValueState || this.hasValueState || this.exceeding);
+		return !this.readonly && (this.hasCustomValueState || this.hasValueState);
 	}
 
 	get hasCustomValueState() {
@@ -655,7 +645,7 @@ class TextArea extends UI5Element {
 	}
 
 	get valueStateText() {
-		if (this.valueState !== ValueState.Error && this.exceeding) {
+		if (this.valueState !== ValueState.Error) {
 			return this.valueStateTextMappings()[ValueState.Warning];
 		}
 

package/dist/TimeSelection.js

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
@@ -481,10 +481,6 @@ class TimeSelection extends UI5Element {
 		return TimeSelection.i18nBundle.getText(TIMEPICKER_PERIODS_LABEL);
 	}
 
-	get _isCyclic() {
-		return !isIE();
-	}
-
 	get classes() {
 		return {
 			root: {