@ui5/webcomponents 0.0.0-11d529e8a → 0.0.0-1e08ebdef

package/src/TableRow.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import TableMode from "./types/TableMode.js";
 import TableRowType from "./types/TableRowType.js";
@@ -170,12 +170,6 @@ class TableRow extends UI5Element {
 		return TableRowTemplate;
 	}
 
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	_onmouseup() {
 		this.deactivate();
 	}
@@ -283,7 +277,7 @@ class TableRow extends UI5Element {
 
 	get shouldPopin() {
 		return this._columnsInfo.filter(el => {
-			return el.demandPopin;
+			return el.demandPopin || !el.visible;
 		}).length;
 	}
 
@@ -355,7 +349,7 @@ class TableRow extends UI5Element {
 	}
 
 	get ariaLabelRowSelection() {
-		return this.i18nBundle.getText(ARIA_LABEL_ROW_SELECTION);
+		return TableRow.i18nBundle.getText(ARIA_LABEL_ROW_SELECTION);
 	}
 
 	get isSingleSelect() {
@@ -385,7 +379,7 @@ class TableRow extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		TableRow.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/TextArea.js

@@ -3,7 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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";
@@ -385,7 +385,6 @@ class TextArea extends UI5Element {
 		this._firstRendering = true;
 		this._openValueStateMsgPopover = false;
 		this._fnOnResize = this._onResize.bind(this);
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onEnterDOM() {
@@ -545,9 +544,9 @@ class TextArea extends UI5Element {
 				leftCharactersCount = maxLength - this.value.length;
 
 				if (leftCharactersCount >= 0) {
-					exceededText = this.i18nBundle.getText(TEXTAREA_CHARACTERS_LEFT, [leftCharactersCount]);
+					exceededText = TextArea.i18nBundle.getText(TEXTAREA_CHARACTERS_LEFT, leftCharactersCount);
 				} else {
-					exceededText = this.i18nBundle.getText(TEXTAREA_CHARACTERS_EXCEEDED, [Math.abs(leftCharactersCount)]);
+					exceededText = TextArea.i18nBundle.getText(TEXTAREA_CHARACTERS_EXCEEDED, Math.abs(leftCharactersCount));
 				}
 			}
 		} else {
@@ -571,6 +570,7 @@ class TextArea extends UI5Element {
 
 	get styles() {
 		const lineHeight = 1.4 * 16;
+		const mainHeight = (this.rows * lineHeight) + (this.showExceededText ? 32 : 0);
 
 		return {
 			mirror: {
@@ -578,7 +578,7 @@ class TextArea extends UI5Element {
 			},
 			main: {
 				width: "100%",
-				height: (this.rows && !this.growing) ? `${this.rows * lineHeight}px` : "100%",
+				height: (this.rows && !this.growing) ? `${mainHeight}px` : "100%",
 			},
 			focusDiv: {
 				"height": (this.showExceededText ? "calc(100% - 26px)" : "100%"),
@@ -633,7 +633,7 @@ class TextArea extends UI5Element {
 	}
 
 	get displayValueStateMessagePopover() {
-		return this.hasCustomValueState || this.hasValueState || this.exceeding;
+		return !this.readonly && (this.hasCustomValueState || this.hasValueState || this.exceeding);
 	}
 
 	get hasCustomValueState() {
@@ -656,13 +656,29 @@ class TextArea extends UI5Element {
 		return this.valueStateTextMappings()[this.valueState];
 	}
 
-	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
 
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
+	valueStateTextMappings() {
 		return {
-			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			"Information": TextArea.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Error": TextArea.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
@@ -671,7 +687,7 @@ class TextArea extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		TextArea.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/TextAreaPopover.hbs

@@ -8,9 +8,10 @@
 		class="ui5-valuestatemessage-popover"
 		style="{{styles.valueStateMsgPopover}}"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="ui5-valuestatemessage-root {{classes.valueStateMsg}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>

package/src/TimePicker.hbs

@@ -1,4 +1,4 @@
-<div id="{{this._id}}" class="ui5-time-picker-root" @keydown="{{_onkeydown}}">
+<div id="{{this._id}}" class="ui5-time-picker-root">
 	<ui5-input
 			id="{{_id}}-inner"
 			value="{{value}}"
@@ -7,10 +7,12 @@
 			?readonly="{{readonly}}"
 			value-state="{{valueState}}"
 			._inputAccInfo="{{accInfo}}"
+			data-sap-focus-ref
 			@click="{{_handleInputClick}}"
 			@ui5-change="{{_handleInputChange}}"
 			@ui5-input="{{_handleInputLiveChange}}"
 			class="ui5-time-picker-input"
+			@keydown="{{_onkeydown}}"
 	>
 
 	{{#if valueStateMessage.length}}

package/src/TimePicker.js

@@ -157,7 +157,7 @@ class TimePicker extends TimePickerBase {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
+		return TimePicker.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
 	}
 }
 

package/src/TimePickerBase.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
@@ -183,9 +183,9 @@ class TimePickerBase extends UI5Element {
 	}
 
 	static async onDefine() {
-		await Promise.all([
+		[TimePickerBase.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
 			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
-			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 	}
 
@@ -195,7 +195,6 @@ class TimePickerBase extends UI5Element {
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	/**
@@ -345,7 +344,13 @@ class TimePickerBase extends UI5Element {
 		if (isShow(e)) {
 			e.preventDefault();
 			this.togglePicker();
-		} else if (isPageUpShiftCtrl(e)) {
+		}
+
+		if (this.isOpen()) {
+			return;
+		}
+
+		if (isPageUpShiftCtrl(e)) {
 			e.preventDefault();
 			this._modifyValueBy(1, "second");
 		} else if (isPageUpShift(e)) {
@@ -440,11 +445,11 @@ class TimePickerBase extends UI5Element {
 	}
 
 	get submitButtonLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
+		return TimePickerBase.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
 	}
 
 	get cancelButtonLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
+		return TimePickerBase.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
 	}
 
 	/**

package/src/TimePickerPopover.hbs

@@ -9,6 +9,7 @@
 	stay-open-on-scroll
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"
+	@keydown="{{_onkeydown}}"
 >
 
 	<ui5-time-selection

package/src/TimeSelection.js

@@ -2,7 +2,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 { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
@@ -183,15 +183,14 @@ class TimeSelection extends UI5Element {
 	}
 
 	static async onDefine() {
-		await Promise.all([
+		[TimeSelection.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
 			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
-			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	get _hoursConfiguration() {
@@ -460,19 +459,19 @@ class TimeSelection extends UI5Element {
 	}
 
 	get hoursSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_HOURS_LABEL);
+		return TimeSelection.i18nBundle.getText(TIMEPICKER_HOURS_LABEL);
 	}
 
 	get minutesSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_MINUTES_LABEL);
+		return TimeSelection.i18nBundle.getText(TIMEPICKER_MINUTES_LABEL);
 	}
 
 	get secondsSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_SECONDS_LABEL);
+		return TimeSelection.i18nBundle.getText(TIMEPICKER_SECONDS_LABEL);
 	}
 
 	get periodSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_PERIODS_LABEL);
+		return TimeSelection.i18nBundle.getText(TIMEPICKER_PERIODS_LABEL);
 	}
 
 	get _isCyclic() {

package/src/ToggleButton.js

@@ -1,5 +1,6 @@
 import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
 import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import Button from "./Button.js";
 import ToggleButtonTemplate from "./generated/templates/ToggleButtonTemplate.lit.js";
 
@@ -67,6 +68,10 @@ class ToggleButton extends Button {
 
 	_onclick() {
 		this.pressed = !this.pressed;
+
+		if (isSafari()) {
+			this.getDomRef().focus();
+		}
 	}
 
 	_onkeyup(event) {

package/src/Token.hbs

@@ -1,6 +1,8 @@
 <div
 	tabindex="{{_tabIndex}}"
 	@click="{{_handleSelect}}"
+	@focusin="{{_focusin}}"
+	@focusout="{{_focusout}}"
 	@keydown="{{_keydown}}"
 	class="ui5-token--wrapper"
 	dir="{{effectiveDir}}"

package/src/Token.js

@@ -8,7 +8,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/sys-cancel.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { TOKEN_ARIA_DELETABLE } from "./generated/i18n/i18n-defaults.js";
 
 import Icon from "./Icon.js";
@@ -61,6 +61,14 @@ const metadata = {
 		 */
 		selected: { type: Boolean },
 
+		/**
+		 * Defines whether the component is focused or not.
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		focused: { type: Boolean },
+
 		/**
 		 * Defines the tabIndex of the component.
 		 * @type {string}
@@ -148,17 +156,19 @@ class Token extends UI5Element {
 		return styles;
 	}
 
-	constructor() {
-		super();
-
-		this.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");
 	 }
@@ -184,11 +194,15 @@ class Token extends UI5Element {
 	}
 
 	get tokenDeletableText() {
-		return this.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
+		return Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
 	}
 
 	get iconURI() {
-		return getTheme() === "sap_fiori_3" ? "decline" : "sys-cancel";
+		if (getTheme().includes("sap_belize")) {
+			return "sys-cancel";
+		}
+
+		return "decline";
 	}
 
 	static get dependencies() {
@@ -196,7 +210,7 @@ class Token extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Token.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/Tokenizer.js

@@ -4,7 +4,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
@@ -27,6 +27,9 @@ import styles from "./generated/themes/Tokenizer.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 
+// reuse suggestions focus styling for NMore popup
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
+
 /**
  * @public
  */
@@ -125,7 +128,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	static get staticAreaTemplate() {
@@ -147,7 +150,6 @@ class Tokenizer extends UI5Element {
 		});
 
 		this._scrollEnablement = new ScrollEnablement(this);
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	async onBeforeRendering() {
@@ -273,7 +275,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	get _nMoreText() {
-		return this.i18nBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, [this._nMoreCount]);
+		return Tokenizer.i18nBundle.getText(MULTIINPUT_SHOW_MORE_TOKENS, this._nMoreCount);
 	}
 
 	get showNMore() {
@@ -285,11 +287,11 @@ class Tokenizer extends UI5Element {
 	}
 
 	get tokenizerLabel() {
-		return this.i18nBundle.getText(TOKENIZER_ARIA_LABEL);
+		return Tokenizer.i18nBundle.getText(TOKENIZER_ARIA_LABEL);
 	}
 
 	get morePopoverTitle() {
-		return this.i18nBundle.getText(TOKENIZER_POPOVER_REMOVE);
+		return Tokenizer.i18nBundle.getText(TOKENIZER_POPOVER_REMOVE);
 	}
 
 	get overflownTokens() {
@@ -297,13 +299,20 @@ class Tokenizer extends UI5Element {
 			return [];
 		}
 
+		// Reset the overflow prop of the tokens first in order
+		// to use their dimensions for calculation because already
+		// hidden tokens are set to 'display: none'
+		this._getTokens().forEach(token => {
+			token.overflows = false;
+		});
+
 		return this._getTokens().filter(token => {
 			const isRTL = this.effectiveDir === "rtl";
 			const elementEnd = isRTL ? "left" : "right";
 			const parentRect = this.contentDom.getBoundingClientRect();
 			const tokenRect = token.getBoundingClientRect();
-			const tokenEnd = tokenRect[elementEnd];
-			const parentEnd = parentRect[elementEnd];
+			const tokenEnd = parseInt(tokenRect[elementEnd]);
+			const parentEnd = parseInt(parentRect[elementEnd]);
 
 			token.overflows = isRTL ? ((tokenEnd < parentEnd) && !this.expanded) : ((tokenEnd > parentEnd) && !this.expanded);
 
@@ -353,7 +362,6 @@ class Tokenizer extends UI5Element {
 			popoverValueStateMessage: {
 				"width": isPhone() ? "100%" : `${this.popoverMinWidth}px`,
 				"min-height": "2rem",
-				"padding": isPhone() ? "0.25rem 1rem" : "0.3rem 0.625rem",
 			},
 			popoverHeader: {
 				"min-height": "2rem",
@@ -368,14 +376,14 @@ class Tokenizer extends UI5Element {
 		const iTokenCount = this._getTokens().length;
 
 		if (iTokenCount === 0) {
-			return this.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_TOKEN);
+			return Tokenizer.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_TOKEN);
 		}
 
 		if (iTokenCount === 1) {
-			return this.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_ONE_TOKEN);
+			return Tokenizer.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_ONE_TOKEN);
 		}
 
-		return this.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, iTokenCount);
+		return Tokenizer.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, iTokenCount);
 	}
 
 	/**
@@ -400,7 +408,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Tokenizer.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	async getPopover() {

package/src/Tree.hbs

@@ -29,6 +29,8 @@
             @ui5-toggle="{{../_onListItemToggle}}"
             @ui5-step-in="{{../_onListItemStepIn}}"
             @ui5-step-out="{{../_onListItemStepOut}}"
+            @mouseover="{{../_onListItemMouseOver}}"
+            @mouseout="{{../_onListItemMouseOut}}"
         >
             {{> treeListItemContent}}
         </ui5-li-tree>

package/src/Tree.js

@@ -158,6 +158,32 @@ const metadata = {
 			},
 		},
 
+		/**
+		 * Fired when the mouse cursor enters the tree item borders.
+		 * @event sap.ui.webcomponents.main.Tree#item-mouseover
+		 * @param {HTMLElement} item the hovered item.
+		 * @since 1.0.0-rc.16
+		 * @public
+		 */
+		"item-mouseover": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
+		/**
+		 * Fired when the mouse cursor leaves the tree item borders.
+		 * @event sap.ui.webcomponents.main.Tree#item-mouseout
+		 * @param {HTMLElement} item the hovered item.
+		 * @since 1.0.0-rc.16
+		 * @public
+		 */
+		"item-mouseout": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
 		/**
 		 * Fired when a tree item is activated.
 		 *
@@ -337,6 +363,18 @@ class Tree extends UI5Element {
 		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/TreeListItem.hbs

@@ -3,7 +3,7 @@
 {{#*inline "listItemPreContent"}}
 	<div
 		class="ui5-li-tree-toggle-box"
-		style="padding-left: {{effectiveLevel}}rem; padding-left: calc(var(--_ui5-tree-indent-step) * {{effectiveLevel}});"
+		style="{{styles.preContent}}"
 	>
 		{{#if _showToggleButtonBeginning}}
 			<ui5-icon

package/src/TreeListItem.js

@@ -1,7 +1,8 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
@@ -238,12 +239,6 @@ class TreeListItem extends ListItem {
 		];
 	}
 
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	onBeforeRendering() {
 		this.actionable = false;
 	}
@@ -254,6 +249,14 @@ class TreeListItem extends ListItem {
 		return allClasses;
 	}
 
+	get styles() {
+		return {
+			preContent: {
+				"padding-left": isIE() ? `${this.effectiveLevel}rem` : `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
+			},
+		};
+	}
+
 	get effectiveLevel() {
 		return this.level - 1;
 	}
@@ -286,7 +289,7 @@ class TreeListItem extends ListItem {
 			posinset: this._posinset,
 			setsize: this._setsize,
 			ariaSelectedText: this.ariaSelectedText,
-			listItemAriaLabel: this.i18nBundle.getText(TREE_ITEM_ARIA_LABEL),
+			listItemAriaLabel: TreeListItem.i18nBundle.getText(TREE_ITEM_ARIA_LABEL),
 		};
 	}
 
@@ -316,11 +319,11 @@ class TreeListItem extends ListItem {
 	}
 
 	get iconAccessibleName() {
-		return this.expanded ? this.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : this.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
+		return this.expanded ? TreeListItem.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : TreeListItem.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		TreeListItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/WheelSlider.hbs

@@ -25,7 +25,7 @@
 							data-item-index="{{@index}}"
 							role="option"
 							aria-selected="{{this.selected}}"
-							style="list-style-type: none;">
+						>
 							{{this.value}}
 						</li>
 					{{/each}}
@@ -35,7 +35,7 @@
 					<li class="ui5-wheelslider-item"
 						role="option"
 						aria-selected="true"
-						style="list-style-type: none;">
+					>
 						{{value}}
 					</li>
 				</ul>