@ui5/webcomponents 0.0.0-6ef02a35f → 0.0.0-7e7d9ea6f

package/dist/i18n/messagebundle_zh_TW.properties

@@ -21,6 +21,14 @@ AVATAR_GROUP_MOVE=按箭頭鍵以移動。
 
 BADGE_DESCRIPTION=徽章
 
+BREADCRUMB_ITEM_POS={0}/{1}
+
+BREADCRUMBS_ARIA_LABEL=路徑指引追蹤
+
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=更多
+
+BREADCRUMBS_CANCEL_BUTTON=取消
+
 BUSY_INDICATOR_TITLE=請稍候
 
 BUTTON_ARIA_TYPE_ACCEPT=正向作業
@@ -39,6 +47,8 @@ CAROUSEL_NEXT_ARROW_TEXT=下一頁
 
 COLORPALETTE_CONTAINER_LABEL=調色盤 - 預先定義的色彩
 
+COLORPALETTE_POPOVER_TITLE=調色盤
+
 COLORPALETTE_COLOR_LABEL=色彩
 
 COLOR_PALETTE_DIALOG_CANCEL_BUTTON=取消
@@ -49,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=更改色彩
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多色彩...
 
+COLORPICKER_ALPHA_SLIDER=Alpha 控制
+
+COLORPICKER_HUE_SLIDER=色調控制
+
+COLORPICKER_HEX=十六進位
+
+COLORPICKER_RED=紅色
+
+COLORPICKER_GREEN=綠色
+
+COLORPICKER_BLUE=藍色
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=開啟選擇器
 
 DATEPICKER_DATE_DESCRIPTION=日期輸入
@@ -65,6 +89,8 @@ FILEUPLOADER_TITLE=上傳檔案
 
 GROUP_HEADER_TEXT=群組表頭
 
+SELECT_ROLE_DESCRIPTION=選擇下拉式清單方塊
+
 SELECT_OPTIONS=選擇選項
 
 INPUT_SUGGESTIONS=可用建議
@@ -85,12 +111,34 @@ LIST_ITEM_POSITION=清單項目 {0} / {1}
 
 LIST_ITEM_SELECTED=已勾選
 
+LIST_ITEM_NOT_SELECTED=未選擇
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=多重選擇模式
 
+ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=項目選擇。
+
+ARIA_LABEL_LIST_SELECTABLE=包含可選擇的項目
+
+ARIA_LABEL_LIST_MULTISELECTABLE=包含可多重選擇的項目
+
+ARIA_LABEL_LIST_DELETABLE=包含可刪除的項目
+
 MESSAGE_STRIP_CLOSE_BUTTON=訊息列關閉
 
+MESSAGE_STRIP_CLOSABLE=可關閉
+
+MESSAGE_STRIP_ERROR=錯誤資訊列
+
+MESSAGE_STRIP_WARNING=警告資訊列
+
+MESSAGE_STRIP_SUCCESS=成功資訊列
+
+MESSAGE_STRIP_INFORMATION=資訊列
+
 MULTICOMBOBOX_DIALOG_OK_BUTTON=確定
 
+VALUE_STATE_ERROR_ALREADY_SELECTED=已選擇此值。
+
 MULTIINPUT_ROLEDESCRIPTION_TEXT=多重值輸入
 
 MULTIINPUT_SHOW_MORE_TOKENS=超過 {0} 個
@@ -117,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
 SLIDER_ARIA_DESCRIPTION=滑桿控點
 
-SWITCH_ON=開啟
-
-SWITCH_OFF=關閉
-
 LOAD_MORE_TEXT=較多
 
 TABLE_HEADER_ROW_TEXT=表頭列
@@ -139,6 +183,10 @@ TABCONTAINER_PREVIOUS_ICON_ACC_NAME=上一步
 
 TABCONTAINER_OVERFLOW_MENU_TITLE=溢位功能表
 
+TABCONTAINER_END_OVERFLOW=更多
+
+TABCONTAINER_POPOVER_CANCEL_BUTTON=取消
+
 TEXTAREA_CHARACTERS_LEFT=剩下 {0} 個字元
 
 TEXTAREA_CHARACTERS_EXCEEDED=超過 {0} 個字元
@@ -202,3 +250,11 @@ DAY_PICKER_TODAY=今天
 STEPINPUT_DEC_ICON_TITLE=減少
 
 STEPINPUT_INC_ICON_TITLE=增加
+
+SPLIT_BUTTON_DESCRIPTION=分割按鈕
+
+SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作
+
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒絕

package/dist/popup-utils/OpenedPopupsRegistry.js

@@ -35,7 +35,7 @@ const _keydownListener = event => {
 	}
 
 	if (isEscape(event)) {
-		openedRegistry.pop().instance.close(true);
+		openedRegistry[openedRegistry.length - 1].instance.close(true);
 	}
 };
 

package/dist/types/HasPopup.js

@@ -0,0 +1,62 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of HasPopup.
+ * @lends sap.ui.webcomponents.main.types.HasPopup.prototype
+ * @public
+ */
+const PopupTypes = {
+	/**
+	 * Dialog popup type.
+	 * @public
+	 * @type {Dialog}
+	 */
+	Dialog: "Dialog",
+
+	/**
+	 * Grid popup type.
+	 * @public
+	 * @type {Grid}
+	 */
+	Grid: "Grid",
+
+	/**
+	 * ListBox popup type.
+	 * @public
+	 * @type {ListBox}
+	 */
+	ListBox: "ListBox",
+
+	 /**
+	  * Menu popup type.
+	  * @public
+	  * @type {Menu}
+	  */
+	Menu: "Menu",
+
+	 /**
+	  * Tree popup type.
+	  * @public
+	  * @type {Tree}
+	  */
+	Tree: "Tree",
+};
+
+/**
+ * @class
+ * Different types of HasPopup.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.HasPopup
+ * @public
+ * @enum {string}
+ */
+class HasPopup extends DataType {
+	static isValid(value) {
+		return !!PopupTypes[value];
+	}
+}
+
+HasPopup.generateTypeAccessors(PopupTypes);
+
+export default HasPopup;

package/dist/types/ListGrowingMode.js

@@ -1,15 +1,48 @@
-import GrowingMode from "./GrowingMode.js";
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.ListGrowingMode.prototype
+ * @public
+ */
+const ListGrowingModes = {
+	/**
+	 * Component's <code>load-more</code> is fired upon pressing a "More" button.
+	 * at the bottom.
+	 * @public
+	 * @type {Button}
+	 */
+	Button: "Button",
+
+	/**
+	 * Component's <code>load-more</code> is fired upon scroll.
+	 * @public
+	 * @type {Scroll}
+	 */
+	Scroll: "Scroll",
+
+	/**
+	 * Component's growing is not enabled.
+	 * @public
+	 * @type {None}
+	 */
+	None: "None",
+};
 
 /**
  * @class
- * Defines the growing mode, used in the <code>ui5-List</code>.
+ * Defines the growing mode, used in the <code>ui5-list</code>.
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.types.ListGrowingMode
  * @public
  * @enum {string}
  */
-class ListGrowingMode extends GrowingMode {
+class ListGrowingMode extends DataType {
+	static isValid(value) {
+		return !!ListGrowingModes[value];
+	}
 }
 
+ListGrowingMode.generateTypeAccessors(ListGrowingModes);
+
 export default ListGrowingMode;

package/dist/types/TableGrowingMode.js

@@ -1,4 +1,32 @@
-import GrowingMode from "./GrowingMode.js";
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.TableGrowingMode.prototype
+ * @public
+ */
+const TableGrowingModes = {
+	/**
+	 * Component's <code>load-more</code> is fired upon pressing a "More" button.
+	 * at the bottom.
+	 * @public
+	 * @type {Button}
+	 */
+	Button: "Button",
+
+	/**
+	 * Component's <code>load-more</code> is fired upon scroll.
+	 * @public
+	 * @type {Scroll}
+	 */
+	Scroll: "Scroll",
+
+	/**
+	 * Component's growing is not enabled.
+	 * @public
+	 * @type {None}
+	 */
+	None: "None",
+};
 
 /**
  * @class
@@ -9,7 +37,12 @@ import GrowingMode from "./GrowingMode.js";
  * @public
  * @enum {string}
  */
-class TableGrowingMode extends GrowingMode {
+class TableGrowingMode extends DataType {
+	static isValid(value) {
+		return !!TableGrowingModes[value];
+	}
 }
 
+TableGrowingMode.generateTypeAccessors(TableGrowingModes);
+
 export default TableGrowingMode;

package/dist/types/TabsOverflowMode.js

@@ -0,0 +1,40 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.TabsOverflowMode.prototype
+ * @public
+ */
+const TabsOverflowModes = {
+	/**
+	 * End type is used if there should be only one overflow with hidden the tabs at the end of the tab container.
+	 * @public
+	 * @type {End}
+	 */
+	End: "End",
+
+	/**
+	 * StartAndEnd type is used if there should be two overflows on both ends of the tab container.
+	 * @public
+	 * @type {StartAndEnd}
+	 */
+	StartAndEnd: "StartAndEnd",
+};
+
+/**
+ * @class
+ * Different types of overflow modes.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.TabsOverflowMode
+ * @public
+ * @enum {string}
+ */
+class TabsOverflowMode extends DataType {
+	static isValid(value) {
+		return !!TabsOverflowModes[value];
+	}
+}
+
+TabsOverflowMode.generateTypeAccessors(TabsOverflowModes);
+
+export default TabsOverflowMode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-6ef02a35f",
+  "version": "0.0.0-7e7d9ea6f",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -18,9 +18,10 @@
     "lint": "wc-dev lint",
     "start": "wc-dev start",
     "watch": "wc-dev watch",
-    "serve": "wc-dev serve",
     "build": "wc-dev build",
     "test": "wc-dev test",
+    "test:suite-1": "wc-dev test-suite-1",
+    "test:suite-2": "wc-dev test-suite-2",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "npm run build"
   },
@@ -30,8 +31,8 @@
     "./dist/*": "./dist/*",
     "./package.json": "./package.json",
     "./bundle.esm.js": "./bundle.esm.js",
-    "./bundle.es5.js": "./bundle.es5.js",
     "./bundle.common.js": "./bundle.common.js",
+    "./bundle.scoped.esm.js": "./bundle.scoped.esm.js",
     "./*": "./dist/*"
   },
   "repository": {
@@ -40,14 +41,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-6ef02a35f",
-    "@ui5/webcomponents-icons": "0.0.0-6ef02a35f",
-    "@ui5/webcomponents-ie11": "0.0.0-6ef02a35f",
-    "@ui5/webcomponents-localization": "0.0.0-6ef02a35f",
-    "@ui5/webcomponents-theme-base": "0.0.0-6ef02a35f"
+    "@ui5/webcomponents-base": "0.0.0-7e7d9ea6f",
+    "@ui5/webcomponents-icons": "0.0.0-7e7d9ea6f",
+    "@ui5/webcomponents-localization": "0.0.0-7e7d9ea6f",
+    "@ui5/webcomponents-theming": "0.0.0-7e7d9ea6f"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-6ef02a35f",
-    "chromedriver": "92.0.0"
+    "@ui5/webcomponents-tools": "0.0.0-7e7d9ea6f",
+    "chromedriver": "102.0.0"
   }
 }

package/src/Assets-static.js

@@ -1,5 +1,5 @@
 import "@ui5/webcomponents-localization/dist/Assets-static.js"; // CLDR
-import "@ui5/webcomponents-theme-base/dist/Assets-static.js"; // Theming
+import "@ui5/webcomponents-theming/dist/Assets-static.js"; // Theming
 
 // own main package assets
 import "./generated/json-imports/Themes-static.js";

package/src/Assets.js

@@ -1,5 +1,5 @@
 import "@ui5/webcomponents-localization/dist/Assets.js"; // CLDR
-import "@ui5/webcomponents-theme-base/dist/Assets.js"; // Theming
+import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
 import "@ui5/webcomponents-icons/dist/Assets.js"; // Icons texts
 
 // own main package assets

package/src/Avatar.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 { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 // Template
@@ -26,7 +26,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 
 		/**
-		 * Defines if the avatar is interactive (focusable and pressable)
+		 * Defines if the avatar is interactive (focusable and pressable).
 		 * @type {boolean}
 		 * @defaultValue false
 		 * @public
@@ -44,9 +44,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the name of the UI5 Icon, that would be displayed.
+		 * Defines the name of the UI5 Icon, that will be displayed.
 		 * <br>
-		 * <b>Note:</b> If <code>image</code> slot is provided, the property would be ignored.
+		 * <b>Note:</b> If <code>image</code> slot is provided, the property will be ignored.
 		 * <br>
 		 * <b>Note:</b> You should import the desired icon first, then use its name as "icon".
 		 * <br><br>
@@ -200,7 +200,7 @@ const metadata = {
 		 *		} <br />
 		 * </code>
 		 * @type {HTMLElement}
-		 * @slot
+		 * @slot image
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -226,7 +226,7 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * An image-like control that has different display options for representing images and icons
+ * An image-like component that has different display options for representing images and icons
  * in different shapes and sizes, depending on the use case.
  *
  * The shape can be circular or square. There are several predefined sizes, as well as an option to
@@ -237,7 +237,7 @@ const metadata = {
  *
  * <ul>
  * <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li>
- * <li>[SHIFT] - If [SPACE] or [ENTER],[RETURN] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li>
+ * <li>[SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li>
  * </ul>
  * <br><br>
  *
@@ -255,11 +255,6 @@ const metadata = {
  * @public
  */
 class Avatar extends UI5Element {
-	constructor() {
-		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -281,7 +276,7 @@ class Avatar extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Avatar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	get tabindex() {
@@ -335,7 +330,7 @@ class Avatar extends UI5Element {
 			return this.accessibleName;
 		}
 
-		return this.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
+		return Avatar.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
 	}
 
 	get hasImage() {
@@ -343,12 +338,14 @@ class Avatar extends UI5Element {
 		return this._hasImage;
 	}
 
-	_onclick(event) {
-		if (this.interactive) {
-			// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
-			event.stopPropagation();
-			this.fireEvent("click");
-		}
+	onBeforeRendering() {
+		this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
+	}
+
+	_onClickHandler(event) {
+		// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
+		event.stopPropagation();
+		this.fireEvent("click");
 	}
 
 	_onkeydown(event) {

package/src/AvatarGroup.hbs

@@ -17,7 +17,7 @@
 			<slot name="overflowButton"></slot>
 		{{else}}
 			<ui5-button
-				._buttonAccInfo="{{_overflowButtonAccInfo}}"
+				.accessibilityAttributes="{{_overflowButtonAccAttributes}}"
 				aria-label="{{_overflowButtonAriaLabelText}}"
 				?hidden="{{_overflowBtnHidden}}"
 				?non-interactive={{_isGroup}}

package/src/AvatarGroup.js

@@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 
 import {
 	isEnter,
@@ -246,8 +246,6 @@ class AvatarGroup extends UI5Element {
 		this._colorIndex = 0;
 		this._hiddenItems = 0;
 		this._onResizeHandler = this._onResize.bind(this);
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	static get metadata() {
@@ -273,13 +271,13 @@ class AvatarGroup extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		AvatarGroup.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	/**
 	 * Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.
 	 * @readonly
-	 * @type { Array }
+	 * @type { HTMLElement[] }
 	 * @defaultValue []
 	 * @public
 	 */
@@ -290,7 +288,7 @@ class AvatarGroup extends UI5Element {
 	/**
 	 * Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.
 	 * @readonly
-	 * @type { Array }
+	 * @type { AvatarColorScheme[] }
 	 * @defaultValue []
 	 * @public
 	 */
@@ -307,33 +305,33 @@ class AvatarGroup extends UI5Element {
 		const typeLabelKey = this._isGroup ? AVATAR_GROUP_ARIA_LABEL_GROUP : AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL;
 
 		// avatar type label
-		let text = this.i18nBundle.getText(typeLabelKey);
+		let text = AvatarGroup.i18nBundle.getText(typeLabelKey);
 
 		// add displayed-hidden avatars label
-		text += ` ${this.i18nBundle.getText(AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, [this._itemsCount - hiddenItemsCount], [hiddenItemsCount])}`;
+		text += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, this._itemsCount - hiddenItemsCount, hiddenItemsCount)}`;
 
 		if (this._isGroup) {
 			// the container role is "button", add the message for complete list activation
-			text += ` ${this.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;
+			text += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;
 		} else {
 			// the container role is "group", add the "how to navigate" message
-			text += ` ${this.i18nBundle.getText(AVATAR_GROUP_MOVE)}`;
+			text += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_MOVE)}`;
 		}
 
 		return text;
 	}
 
 	get _overflowButtonAriaLabelText() {
-		return this._isGroup ? undefined : this.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);
+		return this._isGroup ? undefined : AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);
 	}
 
 	get _containerAriaHasPopup() {
 		return this._isGroup ? this._getAriaHasPopup() : undefined;
 	}
 
-	get _overflowButtonAccInfo() {
+	get _overflowButtonAccAttributes() {
 		return {
-			ariaHaspopup: this._isGroup ? undefined : this._getAriaHasPopup(),
+			hasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),
 		};
 	}
 
@@ -384,7 +382,7 @@ class AvatarGroup extends UI5Element {
 				item = button;
 			}
 
-			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : item.offsetLeft;
+			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : item.offsetLeft - this.offsetLeft;
 		}
 
 		return button.offsetWidth;
@@ -528,7 +526,7 @@ class AvatarGroup extends UI5Element {
 		}
 
 		// in LTR the width is equal to item.offsetLeft
-		return item.offsetLeft;
+		return item.offsetLeft - this.offsetLeft;
 	}
 
 	/**

package/src/Badge.hbs

@@ -1,4 +1,4 @@
-<div class="ui5-badge-root" dir="{{effectiveDir}}">
+<div class="ui5-badge-root">
 	<slot name="icon"></slot>
 
 	{{#if hasText}}

package/src/Badge.js

@@ -1,6 +1,7 @@
 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 isDefaultSlotProvided from "@ui5/webcomponents-base/dist/util/isDefaultSlotProvided.js";
 
 // Template
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
@@ -103,12 +104,6 @@ const metadata = {
  * @public
  */
 class Badge extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -126,7 +121,7 @@ class Badge extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Badge.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -135,7 +130,7 @@ class Badge extends UI5Element {
 	}
 
 	get hasText() {
-		return !!this.textContent.trim().length;
+		return isDefaultSlotProvided(this);
 	}
 
 	get hasIcon() {
@@ -147,7 +142,7 @@ class Badge extends UI5Element {
 	}
 
 	get badgeDescription() {
-		return this.i18nBundle.getText(BADGE_DESCRIPTION);
+		return Badge.i18nBundle.getText(BADGE_DESCRIPTION);
 	}
 }