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

package/src/StepInput.hbs

@@ -6,10 +6,12 @@
 	@focusout="{{_onfocusout}}"
 >
 	<!-- Decrement Icon -->
+	{{#unless readonly}}
 	<div
 		class="ui5-step-icon ui5-step-dec"
 		title="{{decIconTitle}}"
 	>
+	
 		<ui5-icon
 			id="{{_id}}-dec"
 			name="{{decIconName}}"
@@ -25,7 +27,7 @@
 			?clickable="{{_decIconClickable}}"
 		></ui5-icon>
 	</div>
-
+	{{/unless}}
 	<!-- INPUT -->
 	<ui5-input
 			id="{{_id}}-inner"
@@ -52,6 +54,7 @@
 	</ui5-input>
 
 	<!-- Increment Icon -->
+	{{#unless readonly}}
 	<div
 		class="ui5-step-icon ui5-step-inc"
 		title="{{incIconTitle}}"
@@ -71,7 +74,7 @@
 			?clickable="{{_incIconClickable}}"
 		></ui5-icon>
 	</div>
-
+	{{/unless}}
 	<slot name="formSupport"></slot>
 
 </div>

package/src/StepInput.js

@@ -13,7 +13,7 @@ import {
 	isEscape,
 	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 ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
@@ -220,9 +220,12 @@ const metadata = {
 			noAttribute: true,
 		},
 
-		_focused: {
+		/**
+		 * @type {Boolean}
+		 * @private
+		 */
+		focused: {
 			type: Boolean,
-			noAttribute: true,
 		},
 
 		_inputFocused: {
@@ -361,7 +364,6 @@ const INITIAL_SPEED = 120; // milliseconds
 class StepInput extends UI5Element {
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	static get metadata() {
@@ -388,7 +390,7 @@ class StepInput extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		StepInput.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	get type() {
@@ -398,7 +400,7 @@ class StepInput extends UI5Element {
 	// icons-related
 
 	get decIconTitle() {
-		return this.i18nBundle.getText(STEPINPUT_DEC_ICON_TITLE);
+		return StepInput.i18nBundle.getText(STEPINPUT_DEC_ICON_TITLE);
 	}
 
 	get decIconName() {
@@ -406,7 +408,7 @@ class StepInput extends UI5Element {
 	}
 
 	get incIconTitle() {
-		return this.i18nBundle.getText(STEPINPUT_INC_ICON_TITLE);
+		return StepInput.i18nBundle.getText(STEPINPUT_INC_ICON_TITLE);
 	}
 
 	get incIconName() {
@@ -422,7 +424,7 @@ class StepInput extends UI5Element {
 	}
 
 	get _isFocused() {
-		return this._focused;
+		return this.focused;
 	}
 
 	get _valuePrecisioned() {
@@ -531,7 +533,7 @@ class StepInput extends UI5Element {
 			this.value = value;
 			this._validate();
 			this._setButtonState();
-			this._focused = true;
+			this.focused = true;
 			this.inputOuter.setAttribute("focused", "");
 			if (fireChangeEvent) {
 				this._fireChangeEvent();
@@ -569,11 +571,11 @@ class StepInput extends UI5Element {
 	}
 
 	_onfocusin() {
-		this._focused = true;
+		this.focused = true;
 	}
 
 	_onfocusout() {
-		this._focused = false;
+		this.focused = false;
 	}
 
 	_onkeydown(event) {

package/src/Switch.hbs

@@ -21,14 +21,30 @@
 						<ui5-icon name="decline" class="ui5-switch-icon-off"></ui5-icon>
 					</span>
 				{{else}}
-					<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
-					<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{#if hasNoLabel}}
+						<span class="ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon" part="text-on">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-on" ></ui5-icon>
+						</span>
+						<span class="ui5-switch-text ui5-switch-text--off switch-no-label-icon" part="text-off">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-off" ></ui5-icon>
+						</span>
+					{{else}}
+						<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
+						<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{/if}}
 				{{/if}}
 
-				<span class="ui5-switch-handle" part="handle"></span>
+				<span class="ui5-switch-handle" part="handle">
+					{{!-- this icon is used in the sap_horizon_exp theme --}}
+					<ui5-icon
+						name="{{sapNextIcon}}"
+						class="ui5-switch-handle-icon"
+					></ui5-icon>
+				</span>
 			</div>
 		</div>
 	</div>
+
 	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
 	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{hiddenText}}</span>
 </div>

package/src/Switch.js

@@ -2,9 +2,10 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } 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 "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/less.js";
 import Icon from "./Icon.js";
 import SwitchDesign from "./types/SwitchDesign.js";
 
@@ -73,6 +74,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
+		 * <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -85,6 +87,7 @@ const metadata = {
 		 * Defines the text, displayed when the component is not checked.
 		 * <br><br>
 		 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
+		 * <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -162,10 +165,8 @@ class Switch extends UI5Element {
 		return SwitchTemplate;
 	}
 
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	get sapNextIcon() {
+		return this.checked ? "accept" : "less";
 	}
 
 	_onclick(event) {
@@ -201,6 +202,10 @@ class Switch extends UI5Element {
 		return this.design === SwitchDesign.Graphical;
 	}
 
+	get hasNoLabel() {
+		return !(this.graphical || this.textOn || this.textOff);
+	}
+
 	get _textOn() {
 		return this.graphical ? "" : this.textOn;
 	}
@@ -232,11 +237,11 @@ class Switch extends UI5Element {
 	}
 
 	get accessibilityOnText() {
-		return this._textOn || this.i18nBundle.getText(SWITCH_ON);
+		return this._textOn || Switch.i18nBundle.getText(SWITCH_ON);
 	}
 
 	get accessibilityOffText() {
-		return this._textOff || this.i18nBundle.getText(SWITCH_OFF);
+		return this._textOff || Switch.i18nBundle.getText(SWITCH_OFF);
 	}
 
 	get hiddenText() {
@@ -248,7 +253,7 @@ class Switch extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Switch.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/Tab.js

@@ -2,7 +2,6 @@ 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 SemanticColor from "./types/SemanticColor.js";
-import TabLayout from "./types/TabLayout.js";
 import TabContainer from "./TabContainer.js";
 import Icon from "./Icon.js";
 import CustomListItem from "./CustomListItem.js";
@@ -103,16 +102,6 @@ const metadata = {
 			defaultValue: SemanticColor.Default,
 		},
 
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @type {string}
-		 * @since 1.0.0-rc.8
-		 */
-		stableDomRef: {
-			type: String,
-		},
-
 		/**
 		 * Specifies if the component is selected.
 		 *
@@ -180,6 +169,16 @@ class Tab extends UI5Element {
 		];
 	}
 
+	get displayText() {
+		let text = this.text;
+
+		if (this._isInline && this.additionalText) {
+			text += ` (${this.additionalText})`;
+		}
+
+		return text;
+	}
+
 	get isSeparator() {
 		return false;
 	}
@@ -192,6 +191,22 @@ class Tab extends UI5Element {
 		return executeTemplate(this.constructor.overflowTemplate, this);
 	}
 
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
+	}
+
+	/**
+	 * Returns the DOM reference of the tab that is placed in the header.
+	 * <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method.
+	 *
+	 * @function
+	 * @public
+	 * @since 1.0.0-rc.16
+	 */
+	getTabInStripDomRef() {
+		return this._getTabInStripDomRef;
+	}
+
 	getFocusDomRef() {
 		let focusedDomRef = super.getFocusDomRef();
 
@@ -255,10 +270,14 @@ class Tab extends UI5Element {
 			classes.push("ui5-tab-strip-item--disabled");
 		}
 
-		if (this.tabLayout === TabLayout.Inline) {
+		if (this._isInline) {
 			classes.push("ui5-tab-strip-item--inline");
 		}
 
+		if (this.additionalText) {
+			classes.push("ui5-tab-strip-item--withAddionalText");
+		}
+
 		if (!this.icon && !this._mixedMode) {
 			classes.push("ui5-tab-strip-item--textOnly");
 		}

package/src/TabContainer.hbs

@@ -11,6 +11,7 @@
 			<div class="{{classes.headerBackArrow}}">
 				<ui5-button @click="{{_onHeaderBackArrowClick}}"
 							icon="slim-arrow-left"
+							data-ui5-stable="tabs-left"
 							design="Transparent"
 							tabindex="-1"
 							title="{{previousIconACCName}}"></ui5-button>
@@ -30,7 +31,12 @@
 							{{this.stripPresentation}}
 						{{/unless}}
 						{{#if this.isSeparator}}
-							<li id="{{this._id}}" role="separator" class="{{../classes.separator}}" style="list-style-type: none;"></li>
+							<li
+								id="{{this._id}}"
+								data-ui5-stable="{{this.stableDomRef}}"
+								role="separator"
+								class="{{../classes.separator}}"
+							></li>
 						{{/if}}
 					{{/each}}
 				</ul>
@@ -38,6 +44,7 @@
 			<div class="{{classes.headerForwardArrow}}">
 			<ui5-button @click="{{_onHeaderForwardArrowClick}}"
 						icon="slim-arrow-right"
+						data-ui5-stable="tabs-right"
 						design="Transparent"
 						tabindex="-1"
 						title="{{nextIconACCName}}"></ui5-button>
@@ -54,6 +61,7 @@
 				{{else}}
 					<ui5-button
 						icon="{{overflowMenuIcon}}"
+						data-ui5-stable="tabs-overflow"
 						design="Transparent"
 						tabindex="-1"
 						title="{{overflowMenuTitle}}"

package/src/TabContainer.js

@@ -9,7 +9,7 @@ import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationM
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
@@ -235,14 +235,6 @@ const metadata = {
  * <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li>
  * </ul>
  *
- * <h3>Stable DOM Refs</h3>
- *
- * In the context of <code>ui5-tabcontainer</code>, you can provide a custom stable DOM refs for:
- * <ul>
- * <li>Each <code>ui5-tab</code>
- * Example: <code><ui5-tab stable-dom-ref="in-stock"></ui5-tab></code></li>
- * </ul>
- *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/TabContainer";</code>
@@ -305,8 +297,6 @@ class TabContainer extends UI5Element {
 		this._itemNavigation = new ItemNavigation(this, {
 			getItemsCallback: () => this._getTabs(),
 		});
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -320,6 +310,7 @@ class TabContainer extends UI5Element {
 				return this.getDomRef().querySelector(`#${item._id}`);
 			};
 			item._itemSelectCallback = this._onItemSelect.bind(this);
+			item._getRealDomRef = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 		});
 
 		if (!this._animationRunning) {
@@ -330,6 +321,10 @@ class TabContainer extends UI5Element {
 	onAfterRendering() {
 		this._scrollEnablement.scrollContainer = this._getHeaderScrollContainer();
 		this._updateScrolling();
+
+		this.items.forEach(item => {
+			item._getTabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`);
+		});
 	}
 
 	onEnterDOM() {
@@ -487,7 +482,7 @@ class TabContainer extends UI5Element {
 	}
 
 	async _onOverflowButtonClick(event) {
-		const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > ui5-button");
+		const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > [ui5-button]");
 
 		if (event.target !== button) {
 			return;
@@ -563,6 +558,8 @@ class TabContainer extends UI5Element {
 			root: {
 				"ui5-tc-root": true,
 				"ui5-tc--textOnly": this.textOnly,
+				"ui5-tc--withAdditonalText": this.withAdditonalText,
+				"ui5-tc--standardTabLayout": this.standardTabLayout,
 			},
 			header: {
 				"ui5-tc__header": true,
@@ -605,16 +602,24 @@ class TabContainer extends UI5Element {
 		return this.items.every(item => !item.icon);
 	}
 
+	get withAdditonalText() {
+		return this.items.some(item => !!item.additionalText);
+	}
+
+	get standardTabLayout() {
+		return this.tabLayout === TabLayout.Standard;
+	}
+
 	get previousIconACCName() {
-		return this.i18nBundle.getText(TABCONTAINER_PREVIOUS_ICON_ACC_NAME);
+		return TabContainer.i18nBundle.getText(TABCONTAINER_PREVIOUS_ICON_ACC_NAME);
 	}
 
 	get nextIconACCName() {
-		return this.i18nBundle.getText(TABCONTAINER_NEXT_ICON_ACC_NAME);
+		return TabContainer.i18nBundle.getText(TABCONTAINER_NEXT_ICON_ACC_NAME);
 	}
 
 	get overflowMenuTitle() {
-		return this.i18nBundle.getText(TABCONTAINER_OVERFLOW_MENU_TITLE);
+		return TabContainer.i18nBundle.getText(TABCONTAINER_OVERFLOW_MENU_TITLE);
 	}
 
 	get tabsAtTheBottom() {
@@ -639,7 +644,7 @@ class TabContainer extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		TabContainer.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/TabContainerPopover.hbs

@@ -6,6 +6,7 @@
 	with-padding
 	hide-arrow
 	_hide-header
+	class="ui5-tab-container-responsive-popover"
 >
 	<ui5-list @ui5-item-press="{{_onOverflowListItemSelect}}">
 		{{#each items}}

package/src/TabInStrip.hbs

@@ -10,7 +10,6 @@
 	?disabled="{{this.effectiveDisabled}}"
 	aria-labelledby="{{this.ariaLabelledBy}}"
 	data-ui5-stable="{{this.stableDomRef}}"
-	style="list-style-type: none;"
 >
 
 	{{#if this.icon}}
@@ -28,14 +27,10 @@
 		{{#if this.text}}
 			<span class="ui5-tab-strip-itemText" id="{{this._id}}-text">
 				<span class="{{this.headerSemanticIconClasses}}"></span>
-				{{this.text}}
+				{{this.displayText}}
 			</span>
 		{{/if}}
 
-		{{#if this._isInline}}
-			{{> additionalText}}
-		{{/if}}
-
 	</div>
 
 </li>

package/src/TabSeparator.hbs

@@ -1 +1 @@
-<li id="{{_id}}" role="separator" style="list-style-type: none;"></li>
+<li id="{{_id}}" role="separator"></li>

package/src/Table.hbs

@@ -5,7 +5,7 @@
 
 	<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
 		<thead>
-			<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" aria-label="{{ariaLabelText}}" tabindex="{{_columnHeader._tabIndex}}" style="height: 48px" @click="{{_onColumnHeaderClick}}">
+			<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" aria-label="{{ariaLabelText}}" tabindex="{{_columnHeader._tabIndex}}" style="{{styles.table}}" @click="{{_onColumnHeaderClick}}">
 				{{#if isMultiSelect}}
 					<th class="ui5-table-select-all-column" role="presentation" aria-hidden="true">
 						<ui5-checkbox class="ui5-table-select-all-checkbox"
@@ -56,7 +56,7 @@
 <tr>
 	<td colspan="{{visibleColumnsCount}}">
 		<div growing-button>
-			<div 
+			<div
 				tabindex="0"
 				role="button"
 				aria-labelledby="{{loadMoreAriaLabelledBy}}"
@@ -93,6 +93,7 @@
 			style="{{styles.busy}}"
 			active
 			size="Medium"
+			data-sap-focus-ref
 		></ui5-busy-indicator>
 	</div>
-{{/inline}}
+{{/inline}}

package/src/Table.js

@@ -6,12 +6,13 @@ 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 { 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 debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
 import TableGrowingMode from "./types/TableGrowingMode.js";
 import BusyIndicator from "./BusyIndicator.js";
 import TableMode from "./types/TableMode.js";
+import CheckBox from "./CheckBox.js"; // Ensure the dependency as it is being used in the renderer
 
 // Texts
 import {
@@ -142,7 +143,7 @@ const metadata = {
 		 * <code>None</code> (default) - The growing is off.
 		 * <br><br>
 		 *
-		 * <b>Limitations:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
+		 * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
 		 * and the component will fallback to <code>growing="Button"</code>.
 		 * @type {TableGrowingMode}
 		 * @defaultvalue "None"
@@ -185,7 +186,7 @@ const metadata = {
 		 * Determines whether the column headers remain fixed at the top of the page during
 		 * vertical scrolling as long as the Web Component is in the viewport.
 		 * <br><br>
-		 * <b>Limitations:</b>
+		 * <b>Restrictions:</b>
 		 * <ul>
 		 * <li>Browsers that do not support this feature:
 		 * <ul>
@@ -399,11 +400,11 @@ class Table extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [BusyIndicator];
+		return [BusyIndicator, CheckBox];
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Table.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
@@ -425,8 +426,6 @@ class Table extends UI5Element {
 
 		this._handleResize = this.popinContent.bind(this);
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-
 		this.tableEndObserved = false;
 		this.addEventListener("ui5-selection-requested", this._handleSelect.bind(this));
 	}
@@ -442,7 +441,7 @@ class Table extends UI5Element {
 				row._columnsInfoString = JSON.stringify(row._columnsInfo);
 			}
 
-			row._ariaPosition = this.i18nBundle.getText(TABLE_ROW_POSITION, index + 1, rowsCount);
+			row._ariaPosition = Table.i18nBundle.getText(TABLE_ROW_POSITION, index + 1, rowsCount);
 			row._busy = this.busy;
 			row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
 			row.addEventListener("ui5-_focused", this.fnOnRowFocused);
@@ -689,6 +688,9 @@ class Table extends UI5Element {
 
 	get styles() {
 		return {
+			table: {
+				height: "48px",
+			},
 			busy: {
 				position: this.busyIndPosition,
 			},
@@ -709,11 +711,11 @@ class Table extends UI5Element {
 	}
 
 	get _growingButtonText() {
-		return this.growingButtonText || this.i18nBundle.getText(LOAD_MORE_TEXT);
+		return this.growingButtonText || Table.i18nBundle.getText(LOAD_MORE_TEXT);
 	}
 
 	get ariaLabelText() {
-		const headerRowText = this.i18nBundle.getText(TABLE_HEADER_ROW_TEXT);
+		const headerRowText = Table.i18nBundle.getText(TABLE_HEADER_ROW_TEXT);
 		const columnsTitle = this.columns.map(column => {
 			return column.textContent.trim();
 		}).join(" ");
@@ -722,7 +724,7 @@ class Table extends UI5Element {
 	}
 
 	get ariaLabelSelectAllText() {
-		return this.i18nBundle.getText(ARIA_LABEL_SELECT_ALL_CHECKBOX);
+		return Table.i18nBundle.getText(ARIA_LABEL_SELECT_ALL_CHECKBOX);
 	}
 
 	get loadMoreAriaLabelledBy() {

package/src/TableGroupRow.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 CheckBox from "./CheckBox.js";
 import TableGroupRowTemplate from "./generated/templates/TableGroupRowTemplate.lit.js";
 import TableMode from "./types/TableMode.js";
@@ -121,7 +121,6 @@ class TableGroupRow extends UI5Element {
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	get colSpan() {
@@ -129,7 +128,7 @@ class TableGroupRow extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return `${this.i18nBundle.getText(TABLE_GROUP_ROW_ARIA_LABEL)} ${this.innerText}. ${this._ariaPosition}`;
+		return `${TableGroupRow.i18nBundle.getText(TABLE_GROUP_ROW_ARIA_LABEL)} ${this.innerText}. ${this._ariaPosition}`;
 	}
 
 	visibleColCount() {
@@ -152,7 +151,7 @@ class TableGroupRow extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		TableGroupRow.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }