@openui5/sap.ui.webc.main 1.96.2 → 1.98.0

package/src/sap/ui/webc/main/thirdparty/Table.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/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/types/NavigationMode', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/util/debounce', 'sap/ui/webc/common/thirdparty/base/util/isElementInView', './types/TableGrowingMode', './BusyIndicator', './types/TableMode', './generated/i18n/i18n-defaults', './generated/templates/TableTemplate.lit', './generated/themes/Table.css'], function (UI5Element, litRender, ResizeHandler, ItemNavigation, Integer, NavigationMode, Device, Keys, i18nBundle, debounce, isElementInView, TableGrowingMode, BusyIndicator, TableMode, i18nDefaults, TableTemplate_lit, Table_css) { '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/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/types/NavigationMode', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/util/debounce', 'sap/ui/webc/common/thirdparty/base/util/isElementInView', './types/TableGrowingMode', './BusyIndicator', './types/TableMode', './CheckBox', './generated/i18n/i18n-defaults', './generated/templates/TableTemplate.lit', './generated/themes/Table.css'], function (UI5Element, litRender, ResizeHandler, ItemNavigation, Integer, NavigationMode, Device, Keys, i18nBundle, debounce, isElementInView, TableGrowingMode, BusyIndicator, TableMode, CheckBox, i18nDefaults, TableTemplate_lit, Table_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -115,10 +115,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return TableTemplate_lit;
 		}
 		static get dependencies() {
-			return [BusyIndicator];
+			return [BusyIndicator, CheckBox];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			Table.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		constructor() {
 			super();
@@ -133,7 +133,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			});
 			this.fnOnRowFocused = this.onRowFocused.bind(this);
 			this._handleResize = this.popinContent.bind(this);
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 			this.tableEndObserved = false;
 			this.addEventListener("ui5-selection-requested", this._handleSelect.bind(this));
 		}
@@ -146,7 +145,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					row._columnsInfo = columnSettings;
 					row._columnsInfoString = JSON.stringify(row._columnsInfo);
 				}
-				row._ariaPosition = this.i18nBundle.getText(i18nDefaults.TABLE_ROW_POSITION, index + 1, rowsCount);
+				row._ariaPosition = Table.i18nBundle.getText(i18nDefaults.TABLE_ROW_POSITION, index + 1, rowsCount);
 				row._busy = this.busy;
 				row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
 				row.addEventListener("ui5-_focused", this.fnOnRowFocused);
@@ -341,6 +340,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		get styles() {
 			return {
+				table: {
+					height: "48px",
+				},
 				busy: {
 					position: this.busyIndPosition,
 				},
@@ -356,17 +358,17 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return !Device.isIE() && this.growing === TableGrowingMode.Scroll;
 		}
 		get _growingButtonText() {
-			return this.growingButtonText || this.i18nBundle.getText(i18nDefaults.LOAD_MORE_TEXT);
+			return this.growingButtonText || Table.i18nBundle.getText(i18nDefaults.LOAD_MORE_TEXT);
 		}
 		get ariaLabelText() {
-			const headerRowText = this.i18nBundle.getText(i18nDefaults.TABLE_HEADER_ROW_TEXT);
+			const headerRowText = Table.i18nBundle.getText(i18nDefaults.TABLE_HEADER_ROW_TEXT);
 			const columnsTitle = this.columns.map(column => {
 				return column.textContent.trim();
 			}).join(" ");
 			return `${headerRowText} ${columnsTitle}`;
 		}
 		get ariaLabelSelectAllText() {
-			return this.i18nBundle.getText(i18nDefaults.ARIA_LABEL_SELECT_ALL_CHECKBOX);
+			return Table.i18nBundle.getText(i18nDefaults.ARIA_LABEL_SELECT_ALL_CHECKBOX);
 		}
 		get loadMoreAriaLabelledBy() {
 			if (this.moreDataText) {

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

@@ -55,13 +55,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		get colSpan() {
 			return this._colSpan;
 		}
 		get ariaLabelText() {
-			return `${this.i18nBundle.getText(i18nDefaults.TABLE_GROUP_ROW_ARIA_LABEL)} ${this.innerText}. ${this._ariaPosition}`;
+			return `${TableGroupRow.i18nBundle.getText(i18nDefaults.TABLE_GROUP_ROW_ARIA_LABEL)} ${this.innerText}. ${this._ariaPosition}`;
 		}
 		visibleColCount() {
 			let count = this._columnsInfo.reduce((acc, column) => {
@@ -79,7 +78,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._colSpan = this.visibleColCount();
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			TableGroupRow.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
 	TableGroupRow.define();

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

@@ -66,10 +66,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		static get template() {
 			return TableRowTemplate_lit;
 		}
-		constructor() {
-			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
-		}
 		_onmouseup() {
 			this.deactivate();
 		}
@@ -120,7 +116,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (event.isMarked === "button") {
 				return;
 			}
-			if (!this.contains(document.activeElement)) {
+			if (!this.contains(this.getRootNode().activeElement)) {
 				this._onfocusin(event, true );
 				this.deactivate();
 			}
@@ -137,7 +133,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this.fireEvent("selection-requested", { row: this });
 		}
 		_getActiveElementTagName() {
-			return document.activeElement.localName.toLocaleLowerCase();
+			return this.getRootNode().activeElement.localName.toLocaleLowerCase();
 		}
 		activate() {
 			if (this.type === TableRowType.Active) {
@@ -151,7 +147,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		get shouldPopin() {
 			return this._columnsInfo.filter(el => {
-				return el.demandPopin;
+				return el.demandPopin || !el.visible;
 			}).length;
 		}
 		get allColumnsPoppedIn() {
@@ -208,7 +204,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return `${ariaLabel}. ${this._ariaPosition}`;
 		}
 		get ariaLabelRowSelection() {
-			return this.i18nBundle.getText(i18nDefaults.ARIA_LABEL_ROW_SELECTION);
+			return TableRow.i18nBundle.getText(i18nDefaults.ARIA_LABEL_ROW_SELECTION);
 		}
 		get isSingleSelect() {
 			return this.mode === "SingleSelect";
@@ -230,7 +226,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return textContent.replace(/[\n\r\t]/g, "").trim();
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			TableRow.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
 	TableRow.define();

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

@@ -115,7 +115,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._firstRendering = true;
 			this._openValueStateMsgPopover = false;
 			this._fnOnResize = this._onResize.bind(this);
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		onEnterDOM() {
 			ResizeHandler__default.register(this, this._fnOnResize);
@@ -161,9 +160,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._openValueStateMsgPopover = true;
 			this.previousValue = this.getInputDomRef().value;
 		}
-		_onfocusout() {
+		_onfocusout(event) {
+			const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
 			this.focused = false;
-			this._openValueStateMsgPopover = false;
+			if (!focusedOutToValueStateMessage) {
+				this._openValueStateMsgPopover = false;
+			}
 		}
 		_onchange() {
 			this.fireEvent("change", {});
@@ -231,9 +233,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				if (maxLength) {
 					leftCharactersCount = maxLength - this.value.length;
 					if (leftCharactersCount >= 0) {
-						exceededText = this.i18nBundle.getText(i18nDefaults.TEXTAREA_CHARACTERS_LEFT, [leftCharactersCount]);
+						exceededText = TextArea.i18nBundle.getText(i18nDefaults.TEXTAREA_CHARACTERS_LEFT, leftCharactersCount);
 					} else {
-						exceededText = this.i18nBundle.getText(i18nDefaults.TEXTAREA_CHARACTERS_EXCEEDED, [Math.abs(leftCharactersCount)]);
+						exceededText = TextArea.i18nBundle.getText(i18nDefaults.TEXTAREA_CHARACTERS_EXCEEDED, Math.abs(leftCharactersCount));
 					}
 				}
 			} else {
@@ -320,19 +322,27 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			return this.valueStateTextMappings()[this.valueState];
 		}
+		get _valueStateMessageIcon() {
+			const iconPerValueState = {
+				Error: "error",
+				Warning: "alert",
+				Success: "sys-enter-2",
+				Information: "information",
+			};
+			return this.valueState !== ValueState__default.None ? iconPerValueState[this.valueState] : "";
+		}
 		valueStateTextMappings() {
-			const i18nBundle = this.i18nBundle;
 			return {
-				"Information": i18nBundle.getText(i18nDefaults.VALUE_STATE_INFORMATION),
-				"Error": i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
-				"Warning": i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
+				"Information": TextArea.i18nBundle.getText(i18nDefaults.VALUE_STATE_INFORMATION),
+				"Error": TextArea.i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
+				"Warning": TextArea.i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
 			};
 		}
 		static get dependencies() {
 			return [Popover];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			TextArea.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
 	TextArea.define();

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

@@ -48,7 +48,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/locale/getLocale', 'sap/ui/we
 			};
 		}
 		get dateAriaDescription() {
-			return this.i18nBundle.getText(i18nDefaults.TIMEPICKER_INPUT_DESCRIPTION);
+			return TimePicker.i18nBundle.getText(i18nDefaults.TIMEPICKER_INPUT_DESCRIPTION);
 		}
 	}
 	TimePicker.define();

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

@@ -67,9 +67,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			];
 		}
 		static async onDefine() {
-			await Promise.all([
+			[TimePickerBase.i18nBundle] = await Promise.all([
+				i18nBundle.getI18nBundle("@ui5/webcomponents"),
 				LocaleData.fetchCldr(getLocale__default().getLanguage(), getLocale__default().getRegion(), getLocale__default().getScript()),
-				i18nBundle.fetchI18nBundle("@ui5/webcomponents"),
 			]);
 		}
 		static get staticAreaStyles() {
@@ -77,7 +77,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		get _placeholder() {
 			return undefined;
@@ -179,7 +178,11 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (Keys.isShow(e)) {
 				e.preventDefault();
 				this.togglePicker();
-			} else if (Keys.isPageUpShiftCtrl(e)) {
+			}
+			if (this.isOpen()) {
+				return;
+			}
+			if (Keys.isPageUpShiftCtrl(e)) {
 				e.preventDefault();
 				this._modifyValueBy(1, "second");
 			} else if (Keys.isPageUpShift(e)) {
@@ -246,10 +249,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			e.preventDefault();
 		}
 		get submitButtonLabel() {
-			return this.i18nBundle.getText(i18nDefaults.TIMEPICKER_SUBMIT_BUTTON);
+			return TimePickerBase.i18nBundle.getText(i18nDefaults.TIMEPICKER_SUBMIT_BUTTON);
 		}
 		get cancelButtonLabel() {
-			return this.i18nBundle.getText(i18nDefaults.TIMEPICKER_CANCEL_BUTTON);
+			return TimePickerBase.i18nBundle.getText(i18nDefaults.TIMEPICKER_CANCEL_BUTTON);
 		}
 		get openIconName() {
 			return "time-entry-request";

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

@@ -75,14 +75,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return [WheelSlider];
 		}
 		static async onDefine() {
-			await Promise.all([
+			[TimeSelection.i18nBundle] = await Promise.all([
+				i18nBundle.getI18nBundle("@ui5/webcomponents"),
 				LocaleData.fetchCldr(getLocale__default().getLanguage(), getLocale__default().getRegion(), getLocale__default().getScript()),
-				i18nBundle.fetchI18nBundle("@ui5/webcomponents"),
 			]);
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		get _hoursConfiguration() {
 			const hourFormat = this.getFormat().aFormatArray.find(item => item.type.startsWith("hour"));
@@ -126,7 +125,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this._currentSlider === "seconds";
 		}
 		get _periodSliderFocused() {
-			return this._currentSlider === "period";
+			return this._currentSlider === "periods";
 		}
 		get _hours() {
 			let hours;
@@ -241,7 +240,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.shadowRoot.querySelector(`[data-sap-slider="${this._currentSlider}"]`);
 		}
 		get _activeSliders() {
-			return ["hours", "minutes", "seconds", "period"].filter(slider => this[`_has${capitalizeFirst(slider)}Slider`]);
+			return ["hours", "minutes", "seconds", "periods"].filter(slider => this[`_has${capitalizeFirst(slider)}Slider`]);
 		}
 		_onfocusin(event) {
 			if (!this._currentSlider) {
@@ -298,16 +297,16 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.isValid(this.value) ? this.dateValue : new Date();
 		}
 		get hoursSliderTitle() {
-			return this.i18nBundle.getText(i18nDefaults.TIMEPICKER_HOURS_LABEL);
+			return TimeSelection.i18nBundle.getText(i18nDefaults.TIMEPICKER_HOURS_LABEL);
 		}
 		get minutesSliderTitle() {
-			return this.i18nBundle.getText(i18nDefaults.TIMEPICKER_MINUTES_LABEL);
+			return TimeSelection.i18nBundle.getText(i18nDefaults.TIMEPICKER_MINUTES_LABEL);
 		}
 		get secondsSliderTitle() {
-			return this.i18nBundle.getText(i18nDefaults.TIMEPICKER_SECONDS_LABEL);
+			return TimeSelection.i18nBundle.getText(i18nDefaults.TIMEPICKER_SECONDS_LABEL);
 		}
 		get periodSliderTitle() {
-			return this.i18nBundle.getText(i18nDefaults.TIMEPICKER_PERIODS_LABEL);
+			return TimeSelection.i18nBundle.getText(i18nDefaults.TIMEPICKER_PERIODS_LABEL);
 		}
 		get _isCyclic() {
 			return !Device.isIE();

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

@@ -25,6 +25,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 			hover: {
 				type: Boolean,
 			},
+			domRendered: {
+				type: Boolean,
+			},
 		},
 		slots:  {
 			"default": {
@@ -74,6 +77,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 			};
 		}
 		_initiateOpening() {
+			this.domRendered = true;
 			requestAnimationFrame(_ => {
 				this.open = true;
 			});
@@ -82,6 +86,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 			if (this.hover) {
 				return;
 			}
+			this.domRendered = false;
 			this.open = false;
 		}
 		_onmouseover() {

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

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/isLegacyBrowser', 'sap/ui/webc/common/thirdparty/base/Keys', './Button', './generated/templates/ToggleButtonTemplate.lit', './generated/themes/ToggleButton.css', './generated/themes/ToggleButton.ie11.css'], function (isLegacyBrowser, Keys, Button, ToggleButtonTemplate_lit, ToggleButton_css, ToggleButton_ie11_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/isLegacyBrowser', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/Device', './Button', './generated/templates/ToggleButtonTemplate.lit', './generated/themes/ToggleButton.css', './generated/themes/ToggleButton.ie11.css'], function (isLegacyBrowser, Keys, Device, Button, ToggleButtonTemplate_lit, ToggleButton_css, ToggleButton_ie11_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -25,6 +25,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/isLegacyBrowser', 'sap/ui/web
 		}
 		_onclick() {
 			this.pressed = !this.pressed;
+			if (Device.isSafari()) {
+				this.getDomRef().focus();
+			}
 		}
 		_onkeyup(event) {
 			if (Keys.isSpaceShift(event)) {

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

@@ -14,6 +14,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			readonly: { type: Boolean },
 			overflows: { type: Boolean },
 			selected: { type: Boolean },
+			focused: { type: Boolean },
 			_tabIndex: { type: String, defaultValue: "-1", noAttribute: true },
 		},
 		slots:  {
@@ -44,13 +45,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		static get styles() {
 			return Token_css;
 		}
-		constructor() {
-			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
-		}
 		_handleSelect() {
 			this.selected = !this.selected;
 			this.fireEvent("select");
+		}
+		_focusin() {
+			this.focused = true;
+		}
+		_focusout() {
+			this.focused = !this.focused;
 		}
 		 _delete() {
 			this.fireEvent("delete");
@@ -71,16 +74,19 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 		}
 		get tokenDeletableText() {
-			return this.i18nBundle.getText(i18nDefaults.TOKEN_ARIA_DELETABLE);
+			return Token.i18nBundle.getText(i18nDefaults.TOKEN_ARIA_DELETABLE);
 		}
 		get iconURI() {
-			return Theme.getTheme() === "sap_fiori_3" ? "decline" : "sys-cancel";
+			if (Theme.getTheme().includes("sap_belize")) {
+				return "sys-cancel";
+			}
+			return "decline";
 		}
 		static get dependencies() {
 			return [Icon];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			Token.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
 	Token.define();

package/src/sap/ui/webc/main/thirdparty/Tokenizer.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/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/delegate/ScrollEnablement', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/types/ValueState', './ResponsivePopover', './List', './StandardListItem', './generated/templates/TokenizerTemplate.lit', './generated/templates/TokenizerPopoverTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/Tokenizer.css', './generated/themes/ResponsivePopoverCommon.css', './generated/themes/ValueStateMessage.css'], function (UI5Element, litRender, ResizeHandler, ItemNavigation, ScrollEnablement, Integer, i18nBundle, Keys, Device, ValueState, ResponsivePopover, List, StandardListItem, TokenizerTemplate_lit, TokenizerPopoverTemplate_lit, i18nDefaults, Tokenizer_css, ResponsivePopoverCommon_css, ValueStateMessage_css) { '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/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/delegate/ScrollEnablement', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/types/ValueState', './ResponsivePopover', './List', './StandardListItem', './generated/templates/TokenizerTemplate.lit', './generated/templates/TokenizerPopoverTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/Tokenizer.css', './generated/themes/ResponsivePopoverCommon.css', './generated/themes/ValueStateMessage.css', './generated/themes/Suggestions.css'], function (UI5Element, litRender, ResizeHandler, ItemNavigation, ScrollEnablement, Integer, i18nBundle, Keys, Device, ValueState, ResponsivePopover, List, StandardListItem, TokenizerTemplate_lit, TokenizerPopoverTemplate_lit, i18nDefaults, Tokenizer_css, ResponsivePopoverCommon_css, ValueStateMessage_css, Suggestions_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -66,7 +66,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return Tokenizer_css;
 		}
 		static get staticAreaStyles() {
-			return [ResponsivePopoverCommon_css, ValueStateMessage_css];
+			return [ResponsivePopoverCommon_css, ValueStateMessage_css, Suggestions_css];
 		}
 		static get staticAreaTemplate() {
 			return TokenizerPopoverTemplate_lit;
@@ -82,13 +82,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				getItemsCallback: this._getVisibleTokens.bind(this),
 			});
 			this._scrollEnablement = new ScrollEnablement__default(this);
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		async onBeforeRendering() {
 			if (this.showPopover && !this._getTokens().length) {
 				const popover = await this.getPopover();
 				popover.close();
 			}
+			this._nMoreCount = this.overflownTokens.length;
 		}
 		onEnterDOM() {
 			ResizeHandler__default.register(this.shadowRoot.querySelector(".ui5-tokenizer--content"), this._resizeHandler);
@@ -121,7 +121,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			});
 		}
 		onAfterRendering() {
-			this._nMoreCount = this.overflownTokens.length;
 			this._scrollEnablement.scrollContainer = this.expanded ? this.contentDom : this;
 		}
 		_tokenDelete(event) {
@@ -133,8 +132,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				nextTokenIndex = deletedTokenIndex === this._getVisibleTokens().length - 1 ? deletedTokenIndex - 1 : deletedTokenIndex + 1;
 			}
 			const nextToken = this._getVisibleTokens()[nextTokenIndex];
-			this._itemNav.setCurrentItem(nextToken);
-			if (nextToken) {
+			if (nextToken && !Device.isPhone()) {
+				this._itemNav.setCurrentItem(nextToken);
 				setTimeout(() => {
 					nextToken.focus();
 				}, 0);
@@ -174,7 +173,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			popover.close();
 		}
 		get _nMoreText() {
-			return this.i18nBundle.getText(i18nDefaults.MULTIINPUT_SHOW_MORE_TOKENS, [this._nMoreCount]);
+			return Tokenizer.i18nBundle.getText(i18nDefaults.MULTIINPUT_SHOW_MORE_TOKENS, this._nMoreCount);
 		}
 		get showNMore() {
 			return !this.expanded && this.showMore && this.overflownTokens.length;
@@ -183,10 +182,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.shadowRoot.querySelector(".ui5-tokenizer--content");
 		}
 		get tokenizerLabel() {
-			return this.i18nBundle.getText(i18nDefaults.TOKENIZER_ARIA_LABEL);
+			return Tokenizer.i18nBundle.getText(i18nDefaults.TOKENIZER_ARIA_LABEL);
 		}
 		get morePopoverTitle() {
-			return this.i18nBundle.getText(i18nDefaults.TOKENIZER_POPOVER_REMOVE);
+			return Tokenizer.i18nBundle.getText(i18nDefaults.TOKENIZER_POPOVER_REMOVE);
 		}
 		get overflownTokens() {
 			if (!this.contentDom) {
@@ -241,7 +240,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				popoverValueStateMessage: {
 					"width": Device.isPhone() ? "100%" : `${this.popoverMinWidth}px`,
 					"min-height": "2rem",
-					"padding": Device.isPhone() ? "0.25rem 1rem" : "0.3rem 0.625rem",
 				},
 				popoverHeader: {
 					"min-height": "2rem",
@@ -254,12 +252,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_tokensCountText() {
 			const iTokenCount = this._getTokens().length;
 			if (iTokenCount === 0) {
-				return this.i18nBundle.getText(i18nDefaults.TOKENIZER_ARIA_CONTAIN_TOKEN);
+				return Tokenizer.i18nBundle.getText(i18nDefaults.TOKENIZER_ARIA_CONTAIN_TOKEN);
 			}
 			if (iTokenCount === 1) {
-				return this.i18nBundle.getText(i18nDefaults.TOKENIZER_ARIA_CONTAIN_ONE_TOKEN);
+				return Tokenizer.i18nBundle.getText(i18nDefaults.TOKENIZER_ARIA_CONTAIN_ONE_TOKEN);
 			}
-			return this.i18nBundle.getText(i18nDefaults.TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, iTokenCount);
+			return Tokenizer.i18nBundle.getText(i18nDefaults.TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, iTokenCount);
 		}
 		_focusLastToken() {
 			if (this.tokens.length === 0) {
@@ -277,7 +275,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			Tokenizer.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		async getPopover() {
 			return (await this.getStaticAreaItemDomRef()).querySelector("[ui5-responsive-popover]");

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

@@ -49,6 +49,16 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					item: { type: HTMLElement },
 				},
 			},
+			"item-mouseover": {
+				detail: {
+					item: { type: HTMLElement },
+				},
+			},
+			"item-mouseout": {
+				detail: {
+					item: { type: HTMLElement },
+				},
+			},
 			"item-click": {
 				detail: {
 					item: { type: HTMLElement },
@@ -133,6 +143,14 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			const treeItem = listItem.treeItem;
 			this.fireEvent("item-delete", { item: treeItem });
 		}
+		_onListItemMouseOver(event) {
+			const treeItem = event.target.treeItem;
+			this.fireEvent("item-mouseover", { item: treeItem });
+		}
+		_onListItemMouseOut(event) {
+			const treeItem = event.target.treeItem;
+			this.fireEvent("item-mouseout", { item: treeItem });
+		}
 		_onListSelectionChange(event) {
 			const previouslySelectedItems = event.detail.previouslySelectedItems.map(item => item.treeItem);
 			const selectedItems = event.detail.selectedItems.map(item => item.treeItem);

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

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/ValueState', './ListItem', './Icon', 'sap/ui/webc/common/thirdparty/icons/navigation-right-arrow', 'sap/ui/webc/common/thirdparty/icons/navigation-down-arrow', './generated/i18n/i18n-defaults', './generated/templates/TreeListItemTemplate.lit', './generated/themes/TreeListItem.css'], function (Integer, Keys, i18nBundle, ValueState, ListItem, Icon, navigationRightArrow, navigationDownArrow, i18nDefaults, TreeListItemTemplate_lit, TreeListItem_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/Device', './ListItem', './Icon', 'sap/ui/webc/common/thirdparty/icons/navigation-right-arrow', 'sap/ui/webc/common/thirdparty/icons/navigation-down-arrow', './generated/i18n/i18n-defaults', './generated/templates/TreeListItemTemplate.lit', './generated/themes/TreeListItem.css'], function (Integer, Keys, i18nBundle, ValueState, Device, ListItem, Icon, navigationRightArrow, navigationDownArrow, i18nDefaults, TreeListItemTemplate_lit, TreeListItem_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -85,10 +85,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 				Icon,
 			];
 		}
-		constructor() {
-			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
-		}
 		onBeforeRendering() {
 			this.actionable = false;
 		}
@@ -97,6 +93,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 			allClasses.main["ui5-li-root-tree"] = true;
 			return allClasses;
 		}
+		get styles() {
+			return {
+				preContent: {
+					"padding-left": Device.isIE() ? `${this.effectiveLevel}rem` : `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
+				},
+			};
+		}
 		get effectiveLevel() {
 			return this.level - 1;
 		}
@@ -122,7 +125,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 				ariaLevel: this.level,
 				posinset: this._posinset,
 				setsize: this._setsize,
-				listItemAriaLabel: this.ariaLabelText,
+				ariaSelectedText: this.ariaSelectedText,
+				listItemAriaLabel: TreeListItem.i18nBundle.getText(i18nDefaults.TREE_ITEM_ARIA_LABEL),
 			};
 		}
 		_toggleClick(event) {
@@ -146,18 +150,11 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 				}
 			}
 		}
-		get ariaLabelText() {
-			let text = this.i18nBundle.getText(i18nDefaults.TREE_ITEM_ARIA_LABEL);
-			if (this.selected) {
-				text += ` ${this.i18nBundle.getText(i18nDefaults.LIST_ITEM_SELECTED)}`;
-			}
-			return text;
-		}
 		get iconAccessibleName() {
-			return this.expanded ? this.i18nBundle.getText(i18nDefaults.TREE_ITEM_COLLAPSE_NODE) : this.i18nBundle.getText(i18nDefaults.TREE_ITEM_EXPAND_NODE);
+			return this.expanded ? TreeListItem.i18nBundle.getText(i18nDefaults.TREE_ITEM_COLLAPSE_NODE) : TreeListItem.i18nBundle.getText(i18nDefaults.TREE_ITEM_EXPAND_NODE);
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			TreeListItem.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
 	TreeListItem.define();