@ui5/webcomponents 0.0.0-bef62af04 → 0.0.0-c638668a1

package/dist/webcomponentsjs/webcomponents-loader.js

@@ -8,7 +8,7 @@
  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
 
-(function() {
+(function () {
   'use strict';
 
   /**
@@ -47,7 +47,9 @@
 
   function fireEvent() {
     window.WebComponents.ready = true;
-    document.dispatchEvent(new CustomEvent('WebComponentsReady', { bubbles: true }));
+    document.dispatchEvent(
+      new CustomEvent('WebComponentsReady', {bubbles: true})
+    );
   }
 
   function batchCustomElements() {
@@ -77,43 +79,51 @@
 
   function runWhenLoadedFns() {
     allowUpgrades = false;
-    var fnsMap = whenLoadedFns.map(function(fn) {
+    var fnsMap = whenLoadedFns.map(function (fn) {
       return fn instanceof Function ? fn() : fn;
     });
     whenLoadedFns = [];
-    return Promise.all(fnsMap).then(function() {
-      allowUpgrades = true;
-      flushFn && flushFn();
-    }).catch(function(err) {
-      console.error(err);
-    });
+    return Promise.all(fnsMap)
+      .then(function () {
+        allowUpgrades = true;
+        flushFn && flushFn();
+      })
+      .catch(function (err) {
+        console.error(err);
+      });
   }
 
   window.WebComponents = window.WebComponents || {};
   window.WebComponents.ready = window.WebComponents.ready || false;
-  window.WebComponents.waitFor = window.WebComponents.waitFor || function(waitFn) {
-    if (!waitFn) {
-      return;
-    }
-    whenLoadedFns.push(waitFn);
-    if (polyfillsLoaded) {
-      runWhenLoadedFns();
-    }
-  };
+  window.WebComponents.waitFor =
+    window.WebComponents.waitFor ||
+    function (waitFn) {
+      if (!waitFn) {
+        return;
+      }
+      whenLoadedFns.push(waitFn);
+      if (polyfillsLoaded) {
+        runWhenLoadedFns();
+      }
+    };
   window.WebComponents._batchCustomElements = batchCustomElements;
 
   var name = 'webcomponents-loader.js';
   // Feature detect which polyfill needs to be imported.
   var polyfills = [];
-  if (!('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) ||
-    (window.ShadyDOM && window.ShadyDOM.force)) {
+  if (
+    !(
+      'attachShadow' in Element.prototype && 'getRootNode' in Element.prototype
+    ) ||
+    (window.ShadyDOM && window.ShadyDOM.force)
+  ) {
     polyfills.push('sd');
   }
   if (!window.customElements || window.customElements.forcePolyfill) {
     polyfills.push('ce');
   }
 
-  var needsTemplate = (function() {
+  var needsTemplate = (function () {
     // no real <template> because no `content` property (IE and older browsers)
     var t = document.createElement('template');
     if (!('content' in t)) {
@@ -128,13 +138,21 @@
     t2.content.appendChild(document.createElement('div'));
     t.content.appendChild(t2);
     var clone = t.cloneNode(true);
-    return (clone.content.childNodes.length === 0 ||
-        clone.content.firstChild.content.childNodes.length === 0);
+    return (
+      clone.content.childNodes.length === 0 ||
+      clone.content.firstChild.content.childNodes.length === 0
+    );
   })();
 
   // NOTE: any browser that does not have template or ES6 features
   // must load the full suite of polyfills.
-  if (!window.Promise || !Array.from || !window.URL || !window.Symbol || needsTemplate) {
+  if (
+    !window.Promise ||
+    !Array.from ||
+    !window.URL ||
+    !window.Symbol ||
+    needsTemplate
+  ) {
     polyfills = ['sd-ce-pf'];
   }
 
@@ -146,7 +164,7 @@
     if (window.WebComponents.root) {
       url = window.WebComponents.root + polyfillFile;
     } else {
-      var script = document.querySelector('script[src*="' + name +'"]');
+      var script = document.querySelector('script[src*="' + name + '"]');
       // Load it from the right place.
       url = script.src.replace(name, polyfillFile);
     }
@@ -156,7 +174,10 @@
     // if readyState is 'loading', this script is synchronous
     if (document.readyState === 'loading') {
       // make sure custom elements are batched whenever parser gets to the injected script
-      newScript.setAttribute('onload', 'window.WebComponents._batchCustomElements()');
+      newScript.setAttribute(
+        'onload',
+        'window.WebComponents._batchCustomElements()'
+      );
       document.write(newScript.outerHTML);
       document.addEventListener('DOMContentLoaded', ready);
     } else {
@@ -176,10 +197,10 @@
     } else {
       // this script may come between DCL and load, so listen for both, and cancel load listener if DCL fires
       window.addEventListener('load', ready);
-      window.addEventListener('DOMContentLoaded', function() {
+      window.addEventListener('DOMContentLoaded', function () {
         window.removeEventListener('load', ready);
         ready();
-      })
+      });
     }
   }
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-bef62af04",
+  "version": "0.0.0-c638668a1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -40,14 +40,14 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-bef62af04",
-    "@ui5/webcomponents-icons": "0.0.0-bef62af04",
-    "@ui5/webcomponents-ie11": "0.0.0-bef62af04",
-    "@ui5/webcomponents-localization": "0.0.0-bef62af04",
-    "@ui5/webcomponents-theme-base": "0.0.0-bef62af04"
+    "@ui5/webcomponents-base": "0.0.0-c638668a1",
+    "@ui5/webcomponents-icons": "0.0.0-c638668a1",
+    "@ui5/webcomponents-ie11": "0.0.0-c638668a1",
+    "@ui5/webcomponents-localization": "0.0.0-c638668a1",
+    "@ui5/webcomponents-theming": "0.0.0-c638668a1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-bef62af04",
-    "chromedriver": "92.0.0"
+    "@ui5/webcomponents-tools": "0.0.0-c638668a1",
+    "chromedriver": "96.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
@@ -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.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,24 +305,24 @@ 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() {

package/src/Badge.hbs

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

package/src/Badge.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";
 
 // Template
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
@@ -48,6 +48,13 @@ const metadata = {
 		_iconOnly: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines whether the component is pressed.
+		 */
+		active: {
+			type: Boolean,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
@@ -103,12 +110,6 @@ const metadata = {
  * @public
  */
 class Badge extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -126,7 +127,7 @@ class Badge extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Badge.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -134,6 +135,14 @@ class Badge extends UI5Element {
 		this._iconOnly = this.iconOnly;
 	}
 
+	_onmousedown() {
+		this.active = true;
+	}
+
+	_onmouseup() {
+		this.active = false;
+	}
+
 	get hasText() {
 		return !!this.textContent.trim().length;
 	}
@@ -147,7 +156,7 @@ class Badge extends UI5Element {
 	}
 
 	get badgeDescription() {
-		return this.i18nBundle.getText(BADGE_DESCRIPTION);
+		return Badge.i18nBundle.getText(BADGE_DESCRIPTION);
 	}
 }
 

package/src/Breadcrumbs.hbs

@@ -4,7 +4,7 @@
         @keydown="{{_onkeydown}}"
 		@keyup="{{_onkeyup}}">
 
-        <li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper"
+        <li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" 
             ?hidden="{{_isOverflowEmpty}}">
             <ui5-link @click="{{_openRespPopover}}"
                 accessible-role="button"
@@ -16,7 +16,8 @@
         </li>
 
         {{#each _linksData}}
-            <li class="ui5-breadcrumbs-link-wrapper" @click="{{../_onLinkPress}}">
+            <li class="ui5-breadcrumbs-link-wrapper" @click="{{../_onLinkPress}}" 
+                id="{{this._id}}-link-wrapper">
                 <ui5-link
                     href="{{this.href}}"
                     target="{{this.target}}"

package/src/Breadcrumbs.js

@@ -193,7 +193,6 @@ class Breadcrumbs extends UI5Element {
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._initItemNavigation();
 
 		this._onResizeHandler = this._updateOverflow.bind(this);
@@ -230,6 +229,10 @@ class Breadcrumbs extends UI5Element {
 		}
 	}
 
+	onBeforeRendering() {
+		this._preprocessItems();
+	}
+
 	onAfterRendering() {
 		this._cacheWidths();
 		this._updateOverflow();
@@ -311,17 +314,19 @@ class Breadcrumbs extends UI5Element {
 
 		for (let i = this._overflowSize; i < items.length; i++) {
 			const item = items[i],
-				link = this.shadowRoot.querySelector(`.ui5-breadcrumbs-link-wrapper #${item._id}-link`);
+				link = this.shadowRoot.querySelector(`#${item._id}-link-wrapper`);
 			map.set(item, this._getElementWidth(link) || 0);
 		}
 
-		if (this._endsWithCurrentLocationLabel && label) {
+		if (items.length && this._endsWithCurrentLocationLabel && label) {
 			const item = items[items.length - 1];
 			map.set(item, this._getElementWidth(label));
 		}
 
 		if (!this._isOverflowEmpty) {
-			this._dropdownArrowLinkWidth = this._getElementWidth(this._dropdownArrowLink);
+			this._dropdownArrowLinkWidth = this._getElementWidth(
+				this.shadowRoot.querySelector(".ui5-breadcrumbs-dropdown-arrow-link-wrapper"),
+			);
 		}
 	}
 
@@ -392,7 +397,7 @@ class Breadcrumbs extends UI5Element {
 	}
 
 	_onOverflowListItemSelect(event) {
-		const listItem = event.detail.item,
+		const listItem = event.detail.selectedItems[0],
 			items = this.getSlottedNodes("items"),
 			item = items.find(x => `${x._id}-li` === listItem.id);
 
@@ -431,10 +436,16 @@ class Breadcrumbs extends UI5Element {
 
 	_hasVisibleContent(item) {
 		// the check is not complete but may be extended in the future if needed to cover
-		// cases becides the standard (UX-recommended) ones
+		// cases besides the standard (UX-recommended) ones
 		return item.innerText || Array.from(item.children).some(child => !child.hidden);
 	}
 
+	_preprocessItems() {
+		this.items.forEach(item => {
+			item._getRealDomRef = () => this.getDomRef().querySelector(`[data-ui5-stable*=${item.stableDomRef}]`);
+		});
+	}
+
 	getCurrentLocationLabelWrapper() {
 		return this.shadowRoot.querySelector(".ui5-breadcrumbs-current-location > span");
 	}
@@ -445,7 +456,7 @@ class Breadcrumbs extends UI5Element {
 
 	get _currentLocationText() {
 		const items = this.getSlottedNodes("items");
-		if (this._endsWithCurrentLocationLabel && items.length > 1) {
+		if (this._endsWithCurrentLocationLabel && items.length) {
 			const item = items[items.length - 1];
 			if (this._isItemVisible(item)) {
 				return item.innerText;
@@ -531,15 +542,15 @@ class Breadcrumbs extends UI5Element {
 	}
 
 	get _accessibleNameText() {
-		return this.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);
+		return Breadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);
 	}
 
 	get _dropdownArrowAccessibleNameText() {
-		return this.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);
+		return Breadcrumbs.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);
 	}
 
 	get _cancelButtonText() {
-		return this.i18nBundle.getText(BREADCRUMBS_CANCEL_BUTTON);
+		return Breadcrumbs.i18nBundle.getText(BREADCRUMBS_CANCEL_BUTTON);
 	}
 
 	static get dependencies() {
@@ -553,6 +564,10 @@ class Breadcrumbs extends UI5Element {
 			Icon,
 		];
 	}
+
+	static async onDefine() {
+		Breadcrumbs.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
 }
 
 Breadcrumbs.define();

package/src/BreadcrumbsItem.js

@@ -54,16 +54,6 @@ const metadata = {
 		 accessibleName: {
 			type: String,
 		},
-
-		/**
-		 * Defines the stable selector that you can use via <code>getStableDomRef</code> method.
-		 * @type {string}
-		 * @public
-		 */
-		stableDomRef: {
-			type: String,
-		},
-
 	},
 	slots: /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */ {
 		/**
@@ -102,6 +92,10 @@ class BreadcrumbsItem extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
+
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
 }
 
 BreadcrumbsItem.define();

package/src/BreadcrumbsPopover.hbs

@@ -6,9 +6,9 @@
 	with-padding
 	_hide-header
 	@keydown="{{_onkeydown}}">
-	<ui5-list mode="SingleSelectAuto"
+	<ui5-list mode="SingleSelect"
 		separators="None"
-		@ui5-item-press="{{_onOverflowListItemSelect}}">
+		@ui5-selection-change="{{_onOverflowListItemSelect}}">
 
 		{{#each _overflowItemsData}}
 			<ui5-li

package/src/BusyIndicator.hbs

@@ -9,6 +9,7 @@
 			aria-valuemax="100"
 			aria-valuetext="Busy"
 			aria-labelledby="{{labelId}}"
+			data-sap-focus-ref
 		>
 			<div class="ui5-busy-indicator-circles-wrapper">
 				<div class="ui5-busy-indicator-circle circle-animation-0"></div>
@@ -25,7 +26,7 @@
 
 	<slot></slot>
 
-	{{#if active}}
+	{{#if _isBusy}}
 		<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
 	{{/if}}
 </div>

package/src/BusyIndicator.js

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { 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 { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
@@ -98,7 +98,6 @@ const metadata = {
 		 */
 		_isBusy: {
 			type: Boolean,
-			noAttribute: true,
 		},
 	},
 };
@@ -149,8 +148,6 @@ const metadata = {
 class BusyIndicator extends UI5Element {
 	constructor() {
 		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._keydownHandler = this._handleKeydown.bind(this);
 		this._preventEventHandler = this._preventEvent.bind(this);
 	}
@@ -195,11 +192,11 @@ class BusyIndicator extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		BusyIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	get ariaTitle() {
-		return this.i18nBundle.getText(BUSY_INDICATOR_TITLE);
+		return BusyIndicator.i18nBundle.getText(BUSY_INDICATOR_TITLE);
 	}
 
 	get labelId() {
@@ -233,7 +230,7 @@ class BusyIndicator extends UI5Element {
 	}
 
 	_handleKeydown(event) {
-		if (!this.active) {
+		if (!this._isBusy) {
 			return;
 		}
 
@@ -248,7 +245,7 @@ class BusyIndicator extends UI5Element {
 	}
 
 	_preventEvent(event) {
-		if (this.active) {
+		if (this._isBusy) {
 			event.stopImmediatePropagation();
 		}
 	}

package/src/Button.hbs

@@ -18,7 +18,7 @@
 	aria-expanded="{{accInfo.ariaExpanded}}"
 	aria-controls="{{accInfo.ariaControls}}"
 	aria-haspopup="{{accInfo.ariaHaspopup}}"
-	aria-label="{{accessibleName}}"
+	aria-label="{{ariaLabelText}}"
 	title="{{accInfo.title}}"
 	part="button"
 >