@ui5/webcomponents 0.0.0-b4cbc43ba → 0.0.0-b93c2a321

package/dist/MultiComboBoxItem.js

@@ -7,21 +7,12 @@ const metadata = {
 	tag: "ui5-mcb-item",
 	properties: /** @lends  sap.ui.webcomponents.main.MultiComboBoxItem.prototype */ {
 		/**
-		 * Defines the selected state of the <code>ui5-mcb-item</code>.
+		 * Defines the selected state of the component.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */
 		selected: { type: Boolean },
-
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @since 1.0.0-rc.11
-		 */
-		stableDomRef: {
-			type: String,
-		},
 	},
 };
 
@@ -34,12 +25,17 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.MultiComboBoxItem
  * @extends ComboBoxItem
  * @tagname ui5-mcb-item
+ * @implements sap.ui.webcomponents.main.IMultiComboBoxItem
  * @public
  */
 class MultiComboBoxItem extends ComboBoxItem {
 	static get metadata() {
 		return metadata;
 	}
+
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
 }
 
 MultiComboBoxItem.define();

package/dist/MultiInput.js

@@ -4,6 +4,9 @@ import {
 	isBackSpace,
 	isLeft,
 	isRight,
+	isRightCtrl,
+	isHome,
+	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { MULTIINPUT_ROLEDESCRIPTION_TEXT } from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
@@ -20,7 +23,7 @@ const metadata = {
 	tag: "ui5-multi-input",
 	properties: /** @lends sap.ui.webcomponents.main.MultiInput.prototype */ {
 		/**
-		 * Determines whether a value help icon will be should in the end of the input.
+		 * Determines whether a value help icon will be visualized in the end of the input.
 		 * Pressing the icon will fire <code>value-help-trigger</code> event.
 		 *
 		 * @type {boolean}
@@ -41,22 +44,14 @@ const metadata = {
 	},
 	slots: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
 		/**
-		 * Defines the <code>ui5-multi-input</code> tokens.
-		 * <br><br>
-		 * Example: <br>
-		 * &lt;ui5-multi-input><br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-token slot="tokens" text="Token 1">&lt;/ui5-token><br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-token slot="tokens" text="Token 2">&lt;/ui5-token><br>
-		 * &lt;/ui5-multi-input>
-		 * <br> <br>
+		 * Defines the component tokens.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.IToken[]}
 		 * @slot
 		 * @public
 		 */
 		tokens: {
 			type: HTMLElement,
-			multiple: true,
 		},
 	},
 	events: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
@@ -144,8 +139,15 @@ class MultiInput extends Input {
 	}
 
 	tokenDelete(event) {
-		this.fireEvent("token-delete", {
-			token: event.detail.ref,
+		const focusedToken = event.detail.ref;
+		const selectedTokens = this.tokens.filter(token => token.selected);
+
+		if (selectedTokens.indexOf(focusedToken) === -1) {
+			selectedTokens.push(focusedToken);
+		}
+
+		selectedTokens.forEach(token => {
+			this.fireEvent("token-delete", { token });
 		});
 
 		this.focus();
@@ -178,18 +180,19 @@ class MultiInput extends Input {
 	_onkeydown(event) {
 		super._onkeydown(event);
 
-		if (isLeft(event)) {
-			this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens.
+		const isHomeInBeginning = isHome(event) && event.target.selectionStart === 0;
 
+		if (isHomeInBeginning) {
+			this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens
+			return this._focusFirstToken(event);
+		}
+
+		if (isLeft(event) || isBackSpace(event)) {
+			this._skipOpenSuggestions = true;
 			return this._handleLeft(event);
 		}
 
 		this._skipOpenSuggestions = false;
-		if (isBackSpace(event) && event.target.value === "") {
-			event.preventDefault();
-
-			this._focusLastToken();
-		}
 
 		if (isShow(event)) {
 			this.valueHelpPress();
@@ -197,34 +200,70 @@ class MultiInput extends Input {
 	}
 
 	_onTokenizerKeydown(event) {
-		if (isRight(event)) {
-			const lastTokenIndex = this.tokenizer._tokens.length - 1;
+		const rightCtrl = isRightCtrl(event);
+		const isCtrl = !!(event.metaKey || event.ctrlKey);
+		const tokens = this.tokens;
+
+		if (isRight(event) || isEnd(event) || rightCtrl) {
+			event.preventDefault();
+			const lastTokenIndex = this.tokens.length - 1;
 
-			if (this.tokenizer._tokens[lastTokenIndex] === document.activeElement) {
+			if (event.target === this.tokens[lastTokenIndex] && this.tokens[lastTokenIndex] === document.activeElement) {
 				setTimeout(() => {
 					this.focus();
 				}, 0);
+			} else if (rightCtrl) {
+				event.preventDefault();
+				return this.tokenizer._handleArrowCtrl(event.target, this.tokens, true);
+			}
+		}
+
+		this.tokenizer._handleItemNavigation(event, tokens);
+
+		if (isCtrl && ["c", "x"].includes(event.key.toLowerCase())) {
+			event.preventDefault();
+
+			const isCut = event.key.toLowerCase() === "x";
+			const selectedTokens = tokens.filter(token => token.selected);
+
+			if (isCut) {
+				const cutResult = this.tokenizer._fillClipboard("cut", selectedTokens);
+
+				selectedTokens.forEach(token => {
+					this.fireEvent("token-delete", { token });
+				});
+
+				this.focus();
+
+				return cutResult;
 			}
+
+			return this.tokenizer._fillClipboard("copy", selectedTokens);
 		}
 	}
 
-	_handleLeft() {
+	_handleLeft(event) {
 		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
+		const tokens = this.tokens;
+		const lastToken = tokens.length && tokens[tokens.length - 1];
 
-		if (cursorPosition === 0) {
-			this._focusLastToken();
+		if (cursorPosition === 0 && lastToken) {
+			event.preventDefault();
+			lastToken.focus();
+			this.tokenizer._itemNav.setCurrentItem(lastToken);
 		}
 	}
 
-	_focusLastToken() {
-		const lastTokenIndex = this.tokenizer._tokens.length - 1;
+	_focusFirstToken(event) {
+		const tokens = this.tokens;
+		const firstToken = tokens.length && tokens[0];
 
-		if (lastTokenIndex < 0) {
-			return;
-		}
+		if (firstToken) {
+			event.preventDefault();
 
-		this.tokenizer._itemNav.currentIndex = lastTokenIndex;
-		this.tokenizer._tokens[lastTokenIndex].focus();
+			firstToken.focus();
+			this.tokenizer._itemNav.setCurrentItem(firstToken);
+		}
 	}
 
 	_onfocusout(event) {
@@ -291,7 +330,7 @@ class MultiInput extends Input {
 	}
 
 	get accInfo() {
-		const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId} ${this.suggestionsCount}`.trim();
+		const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId}`.trim();
 		return {
 			"input": {
 				...super.accInfo.input,
@@ -302,7 +341,7 @@ class MultiInput extends Input {
 	}
 
 	get ariaRoleDescription() {
-		return this.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);
+		return MultiInput.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);
 	}
 
 	static get dependencies() {

package/dist/Option.js

@@ -9,7 +9,7 @@ const metadata = {
 	properties: /** @lends  sap.ui.webcomponents.main.Option.prototype */ {
 
 		/**
-		 * Defines the selected state of the <code>ui5-option</code>.
+		 * Defines the selected state of the component.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -19,9 +19,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether <code>ui5-option</code> is in disabled state.
+		 * Defines whether the component is in disabled state.
 		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-option</code> is noninteractive.
+		 * <b>Note:</b> A disabled component is noninteractive.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -31,11 +31,22 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.1.0
+		 */
+		title: {
+			type: String,
+		},
+
 		/**
 		 * Defines the <code>icon</code> source URI.
 		 * <br><br>
 		 * <b>Note:</b>
-		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
+		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
@@ -47,7 +58,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this <code>ui5-option</code> is selected.
+		 * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
 		 * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
 		 *
 		 * @type {string}
@@ -58,15 +69,36 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
+		 * Defines the additional text displayed at the end of the option element.
+		 * @type {string}
 		 * @public
-		 * @since 1.0.0-rc.11
+		 * @since 1.3.0
 		 */
-		stableDomRef: {
+		 additionalText: {
 			type: String,
 		},
+
+		/**
+		 * Defines the focused state of the component.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.0.0-rc.13
+		 * @private
+		 */
+		_focused: {
+			type: Boolean,
+		},
 	},
-	slots: {
+	slots: /** @lends sap.ui.webcomponents.main.Option.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 * <br><br>
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 *
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
 		"default": {
 			type: Node,
 		},
@@ -86,12 +118,17 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.Option
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-option
+ * @implements sap.ui.webcomponents.main.ISelectOption
  * @public
  */
 class Option extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
+
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
 }
 
 Option.define();

package/dist/Panel.js

@@ -4,15 +4,11 @@ import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
 import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
-import {
-	getEffectiveAriaLabelText,
-	getAriaLabelledByTexts,
-} from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.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-right.js";
-import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
 import Button from "./Button.js";
+import Icon from "./Icon.js";
 import TitleLevel from "./types/TitleLevel.js";
 import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
 import PanelTemplate from "./generated/templates/PanelTemplate.lit.js";
@@ -29,10 +25,11 @@ const metadata = {
 	tag: "ui5-panel",
 	languageAware: true,
 	managedSlots: true,
+	fastNavigation: true,
 	slots: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
 
 		/**
-		 * Defines the <code>ui5-panel</code> header area.
+		 * Defines the component header area.
 		 * <br><br>
 		 * <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.
 		 *
@@ -45,8 +42,8 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the content of the <code>ui5-panel</code>.
-		 * The content is visible only when the <code>ui5-panel</code> is expanded.
+		 * Determines the content of the component.
+		 * The content is visible only when the component is expanded.
 		 *
 		 * @type {Node[]}
 		 * @slot
@@ -59,7 +56,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
 
 		/**
-		 * This property is used to set the header text of the <code>ui5-panel</code>.
+		 * This property is used to set the header text of the component.
 		 * The text is visible in both expanded and collapsed states.
 		 * <br><br>
 		 * <b>Note:</b> This property is overridden by the <code>header</code> slot.
@@ -73,7 +70,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-panel</code> is in a fixed state that is not
+		 * Determines whether the component is in a fixed state that is not
 		 * expandable/collapsible by user interaction.
 		 *
 		 * @type {boolean}
@@ -85,7 +82,7 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates whether the <code>ui5-panel</code> is collapsed and only the header is displayed.
+		 * Indicates whether the component is collapsed and only the header is displayed.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -96,7 +93,19 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria role of the <code>ui5-panel</code>.
+		 * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		 noAnimation: {
+			type: Boolean,
+		},
+
+		/**
+		 * Sets the accessible aria role of the component.
 		 * Depending on the usage, you can change the role from the default <code>Form</code>
 		 * to <code>Region</code> or <code>Complementary</code>.
 		 *
@@ -110,7 +119,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the "aria-level" of <code>ui5-panel</code> heading,
+		 * Defines the "aria-level" of component heading,
 		 * set by the <code>headerText</code>.
 		 * <br><br>
 		 * Available options are: <code>"H6"</code> to <code>"H1"</code>.
@@ -124,38 +133,27 @@ const metadata = {
 		},
 
 		/**
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		ariaLabel: {
-			type: String,
-		},
-
-		/**
-		 * Receives id(or many ids) of the elements that label the panel
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleName: {
 			type: String,
-			defaultValue: "",
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the header of the panel
-		 *
-		 * @type {String}
-		 * @defaultvalue ""
+		 * When set to <code>true</code>, the <code>accessibleName</code> property will be
+		 * applied not only on the panel root itself, but on its toggle button too.
+		 * <b>Note:</b> This property only has effect if <code>accessibleName</code> is set and a header slot is provided.
+		 * @type {boolean}
+		 * @defaultvalue false
 		 * @private
-		 * @since 1.0.0-rc.9
-		 */
-		headerAriaLabelledby: {
-			type: String,
+ 		 */
+		useAccessibleNameForToggleButton: {
+			type: Boolean,
 		},
 
 		/**
@@ -178,15 +176,11 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
-
-		_buttonAccInfo: {
-			type: Object,
-		},
 	},
-	events: {
+	events: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
 
 		/**
-		 * Fired when the ui5-panel is expanded/collapsed by user interaction.
+		 * Fired when the component is expanded/collapsed by user interaction.
 		 *
 		 * @event
 		 * @public
@@ -211,14 +205,14 @@ const metadata = {
  * </ul>
  *
  * <h3>Structure</h3>
- * A panel consists of a title bar with a header text or custom header.
+ * The panel's header area consists of a title bar with a header text or custom header.
  * <br>
- * The content area can contain an arbitrary set of controls.
- * The header is clickable and can be used to toggle between the expanded and collapsed state.
- * It includes an icon which rotates depending on the state.
+ * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.
  * <br>
  * The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
- * <br><b>Note:</b> the custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
+ * <br>
+ * The content area can contain an arbitrary set of controls.
+ * <br><b>Note:</b> The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
  *
  * <h3>Responsive Behavior</h3>
  * <ul>
@@ -235,6 +229,23 @@ const metadata = {
  * clockwise/counter-clockwise.</li>
  * </ul>
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>content - Used to style the wrapper of the content</li>
+ * </ul>
+ *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Panel";</code>
@@ -267,7 +278,6 @@ class Panel extends UI5Element {
 		super();
 
 		this._header = {};
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -287,8 +297,8 @@ class Panel extends UI5Element {
 		return true;
 	}
 
-	shouldAnimate() {
-		return getAnimationMode() !== AnimationMode.None;
+	shouldNotAnimate() {
+		return this.noAnimation || getAnimationMode() === AnimationMode.None;
 	}
 
 	_headerClick(event) {
@@ -310,7 +320,6 @@ class Panel extends UI5Element {
 			return;
 		}
 
-
 		if (isEnter(event)) {
 			this._toggleOpen();
 		}
@@ -337,7 +346,7 @@ class Panel extends UI5Element {
 
 		this.collapsed = !this.collapsed;
 
-		if (!this.shouldAnimate()) {
+		if (this.shouldNotAnimate()) {
 			this.fireEvent("toggle");
 			return;
 		}
@@ -373,13 +382,13 @@ class Panel extends UI5Element {
 	get classes() {
 		return {
 			headerBtn: {
-				"ui5-panel-header-button-animated": this.shouldAnimate(),
+				"ui5-panel-header-button-animated": !this.shouldNotAnimate(),
 			},
 		};
 	}
 
 	get toggleButtonTitle() {
-		return this.i18nBundle.getText(PANEL_ICON);
+		return Panel.i18nBundle.getText(PANEL_ICON);
 	}
 
 	get expanded() {
@@ -390,35 +399,31 @@ class Panel extends UI5Element {
 		return this.accessibleRole.toLowerCase();
 	}
 
+	get effectiveAccessibleName() {
+		return typeof this.accessibleName === "string" && this.accessibleName.length ? this.accessibleName : undefined;
+	}
+
 	get accInfo() {
 		return {
 			"button": {
-				"ariaExpanded": this._hasHeader ? this.expanded : undefined,
-				"ariaControls": this._hasHeader ? `${this._id}-content` : undefined,
+				"accessibilityAttributes": {
+					"expanded": this.expanded,
+					"controls": `${this._id}-content`,
+				},
 				"title": this.toggleButtonTitle,
+				"ariaLabelButton": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,
 			},
 			"ariaExpanded": this.nonFixedInternalHeader ? this.expanded : undefined,
 			"ariaControls": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,
 			"ariaLabelledby": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,
-			"ariaLabel": this.nonFocusableButton ? this.ariaLabelTxt : undefined,
-			"ariaLabelledbyButton": this.nonFocusableButton ? undefined : this.ariaLabelledbyReference,
-			"ariaLabelButton": this.nonFocusableButton ? undefined : this.ariaLabelTxt,
 			"role": this.nonFixedInternalHeader ? "button" : undefined,
 		};
 	}
 
 	get ariaLabelledbyReference() {
-		if (this.ariaLabelledby || this.ariaLabel) {
-			return undefined;
-		}
-
 		return (this.nonFocusableButton && this.headerText) ? `${this._id}-header-title` : undefined;
 	}
 
-	get ariaLabelTxt() {
-		return getEffectiveAriaLabelText(this);
-	}
-
 	get header() {
 		return this.getDomRef().querySelector(`#${this._id}-header-title`);
 	}
@@ -431,13 +436,6 @@ class Panel extends UI5Element {
 		return (this.header.length || this.fixed) ? "-1" : "0";
 	}
 
-	get headerAriaLabelledByText() {
-		if (!this.headerAriaLabelledby) {
-			return;
-		}
-		return getAriaLabelledByTexts(this.header, findNodeOwner(this), this.headerAriaLabelledby);
-	}
-
 	get nonFixedInternalHeader() {
 		return !this._hasHeader && !this.fixed;
 	}
@@ -459,11 +457,11 @@ class Panel extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [Button];
+		return [Button, Icon];
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Panel.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }