@ui5/webcomponents 1.4.0 → 1.7.0

package/dist/i18n/messagebundle_th.properties

@@ -59,19 +59,19 @@ COLOR_PALETTE_DIALOG_TITLE=เปลี่ยนสี
 
 COLOR_PALETTE_MORE_COLORS_TEXT=สีเพิ่มเติม...
 
-COLORPICKER_ALPHA_SLIDER=Alpha control
+COLORPICKER_ALPHA_SLIDER=ตัวควบคุม Alpha
 
-COLORPICKER_HUE_SLIDER=Hue control
+COLORPICKER_HUE_SLIDER=ตัวควบคุมสีสัน
 
-COLORPICKER_HEX=Hexadecimal
+COLORPICKER_HEX=เลขฐานสิบหก
 
-COLORPICKER_RED=Red
+COLORPICKER_RED=แดง
 
-COLORPICKER_GREEN=Green
+COLORPICKER_GREEN=เขียว
 
-COLORPICKER_BLUE=Blue
+COLORPICKER_BLUE=น้ำเงิน
 
-COLORPICKER_ALPHA=Alpha
+COLORPICKER_ALPHA=อัลฟา
 
 DATEPICKER_OPEN_ICON_TITLE=เปิดตัวเลือก
 
@@ -109,10 +109,12 @@ LINK_EMPHASIZED=เน้น
 
 LIST_ITEM_POSITION=รายการในลิสต์ {0} จาก {1}
 
-LIST_ITEM_SELECTED=รายการที่เลือก
+LIST_ITEM_SELECTED=ที่เลือก
 
 LIST_ITEM_NOT_SELECTED=ไม่ได้เลือก
 
+LIST_ITEM_GROUP_HEADER=ส่วนหัวของกลุ่ม
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=โหมดการเลือกหลายรายการ
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=การเลือกรายการ
@@ -157,11 +159,11 @@ RATING_INDICATOR_TEXT=ตัวบ่งชี้การจัดอันด
 
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=ปฏิเสธ
 
-SEGMENTEDBUTTON_ARIA_DESCRIPTION=กลุ่มปุ่มที่มีการแบ่งเซกเมนต์
+SEGMENTEDBUTTON_ARIA_DESCRIPTION=กลุ่มปุ่มที่แบ่งเซกเมนต์
 
 SEGMENTEDBUTTON_ARIA_DESCRIBEDBY=กด SPACE หรือ ENTER เพื่อเลือกรายการ
 
-SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=ปุ่มที่มีการแบ่งเซกเมนต์
+SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=ปุ่มที่แบ่งเซกเมนต์
 
 SLIDER_ARIA_DESCRIPTION=ตัวจัดการแถบเลื่อน
 
@@ -229,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=ขยายโหนด
 
 TREE_ITEM_COLLAPSE_NODE=ย่อรวมโหนด
 
+VALUE_STATE_TYPE_ERROR=สถานะของค่า - ผิดพลาด
+
+VALUE_STATE_TYPE_WARNING=สถานะของค่า - คำเตือน
+
+VALUE_STATE_TYPE_SUCCESS=สถานะของค่า - สำเร็จ
+
+VALUE_STATE_TYPE_INFORMATION=สถานะของค่า - ข้อมูล
+
 VALUE_STATE_ERROR=การป้อนข้อมูลไม่ถูกต้อง
 
 VALUE_STATE_WARNING=ออกการแจ้งเตือนแล้ว

package/dist/i18n/messagebundle_tr.properties

@@ -59,19 +59,19 @@ COLOR_PALETTE_DIALOG_TITLE=Rengi değiştir
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Daha fazla renk...
 
-COLORPICKER_ALPHA_SLIDER=Alpha control
+COLORPICKER_ALPHA_SLIDER=Alfa denetimi
 
-COLORPICKER_HUE_SLIDER=Hue control
+COLORPICKER_HUE_SLIDER=Renk tonu denetimi
 
-COLORPICKER_HEX=Hexadecimal
+COLORPICKER_HEX=Onaltılı
 
-COLORPICKER_RED=Red
+COLORPICKER_RED=Kırmızı
 
-COLORPICKER_GREEN=Green
+COLORPICKER_GREEN=Yeşil
 
-COLORPICKER_BLUE=Blue
+COLORPICKER_BLUE=Mavi
 
-COLORPICKER_ALPHA=Alpha
+COLORPICKER_ALPHA=Alfa
 
 DATEPICKER_OPEN_ICON_TITLE=Seçiciyi aç
 
@@ -113,6 +113,8 @@ LIST_ITEM_SELECTED=Seçilenler
 
 LIST_ITEM_NOT_SELECTED=Seçilmedi
 
+LIST_ITEM_GROUP_HEADER=Grup başlığı
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=Çoklu seçim kipi
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Öğe seçimi.
@@ -229,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=Düğümü genişlet
 
 TREE_ITEM_COLLAPSE_NODE=Düğümü daralt
 
+VALUE_STATE_TYPE_ERROR=Hata değer durumu
+
+VALUE_STATE_TYPE_WARNING=Uyarı değer durumu
+
+VALUE_STATE_TYPE_SUCCESS=Başarı değer durumu
+
+VALUE_STATE_TYPE_INFORMATION=Bilgi değer durumu
+
 VALUE_STATE_ERROR=Geçersiz giriş
 
 VALUE_STATE_WARNING=Uyarı verildi

package/dist/i18n/messagebundle_uk.properties

@@ -59,19 +59,19 @@ COLOR_PALETTE_DIALOG_TITLE=Змінити колір
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Більше кольорів...
 
-COLORPICKER_ALPHA_SLIDER=Alpha control
+COLORPICKER_ALPHA_SLIDER=Елемент регулювання Альфа
 
-COLORPICKER_HUE_SLIDER=Hue control
+COLORPICKER_HUE_SLIDER=Елемент регулювання відтінку
 
-COLORPICKER_HEX=Hexadecimal
+COLORPICKER_HEX=Шістнадцятковий
 
-COLORPICKER_RED=Red
+COLORPICKER_RED=Червоний
 
-COLORPICKER_GREEN=Green
+COLORPICKER_GREEN=Зелений
 
-COLORPICKER_BLUE=Blue
+COLORPICKER_BLUE=Синій
 
-COLORPICKER_ALPHA=Alpha
+COLORPICKER_ALPHA=Альфа
 
 DATEPICKER_OPEN_ICON_TITLE=Відкрити комплектувальник
 
@@ -113,6 +113,8 @@ LIST_ITEM_SELECTED=Вибране
 
 LIST_ITEM_NOT_SELECTED=Не вибрано
 
+LIST_ITEM_GROUP_HEADER=Заголовок групи
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=Режим множинного вибору
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Вибір позиції.
@@ -141,7 +143,7 @@ VALUE_STATE_ERROR_ALREADY_SELECTED=Це значення вже вибрано.
 
 MULTIINPUT_ROLEDESCRIPTION_TEXT=Багатозначне введення
 
-MULTIINPUT_SHOW_MORE_TOKENS={0} Більше
+MULTIINPUT_SHOW_MORE_TOKENS=Ще {0}
 
 PANEL_ICON=Розгорнути/згорнути
 
@@ -229,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=Розгорнути вузол
 
 TREE_ITEM_COLLAPSE_NODE=Згорнути вузол
 
+VALUE_STATE_TYPE_ERROR=Стан значення: помилка
+
+VALUE_STATE_TYPE_WARNING=Стан значення: застереження
+
+VALUE_STATE_TYPE_SUCCESS=Стан значення: успіх
+
+VALUE_STATE_TYPE_INFORMATION=Стан значення: інформація
+
 VALUE_STATE_ERROR=Недійсний запис
 
 VALUE_STATE_WARNING=Застереження видано

package/dist/i18n/messagebundle_vi.properties

@@ -59,17 +59,17 @@ COLOR_PALETTE_DIALOG_TITLE=Thay đổi màu
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Nhiều màu hơn...
 
-COLORPICKER_ALPHA_SLIDER=Alpha control
+COLORPICKER_ALPHA_SLIDER=Kiểm soát Alpha
 
-COLORPICKER_HUE_SLIDER=Hue control
+COLORPICKER_HUE_SLIDER=Kiểm soát sắc độ màu
 
-COLORPICKER_HEX=Hexadecimal
+COLORPICKER_HEX=Thập lục phân
 
-COLORPICKER_RED=Red
+COLORPICKER_RED=Đỏ
 
-COLORPICKER_GREEN=Green
+COLORPICKER_GREEN=Xanh lá cây
 
-COLORPICKER_BLUE=Blue
+COLORPICKER_BLUE=Xanh da trời
 
 COLORPICKER_ALPHA=Alpha
 
@@ -113,6 +113,8 @@ LIST_ITEM_SELECTED=Được chọn
 
 LIST_ITEM_NOT_SELECTED=Không được chọn
 
+LIST_ITEM_GROUP_HEADER=Tiêu đề nhóm
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=Chế độ đa lựa chọn
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Lựa chọn mục.
@@ -229,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=Mở rộng nút
 
 TREE_ITEM_COLLAPSE_NODE=Thu gọn nút
 
+VALUE_STATE_TYPE_ERROR=Đánh giá tình trạng lỗi
+
+VALUE_STATE_TYPE_WARNING=Đánh giá tình trạng cảnh báo
+
+VALUE_STATE_TYPE_SUCCESS=Đánh giá tình trạng thành công
+
+VALUE_STATE_TYPE_INFORMATION=Thông tin tình trạng giá trị
+
 VALUE_STATE_ERROR=Mục nhập không hợp lệ
 
 VALUE_STATE_WARNING=Cảnh báo được phát hành

package/dist/i18n/messagebundle_zh_CN.properties

@@ -59,17 +59,17 @@ COLOR_PALETTE_DIALOG_TITLE=更改颜色
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多颜色...
 
-COLORPICKER_ALPHA_SLIDER=Alpha control
+COLORPICKER_ALPHA_SLIDER=Alpha 控制
 
-COLORPICKER_HUE_SLIDER=Hue control
+COLORPICKER_HUE_SLIDER=色度控制
 
-COLORPICKER_HEX=Hexadecimal
+COLORPICKER_HEX=十六进制
 
-COLORPICKER_RED=Red
+COLORPICKER_RED=红色
 
-COLORPICKER_GREEN=Green
+COLORPICKER_GREEN=绿色
 
-COLORPICKER_BLUE=Blue
+COLORPICKER_BLUE=蓝色
 
 COLORPICKER_ALPHA=Alpha
 
@@ -113,6 +113,8 @@ LIST_ITEM_SELECTED=已选择
 
 LIST_ITEM_NOT_SELECTED=未选择
 
+LIST_ITEM_GROUP_HEADER=组抬头
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=多重选择模式
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=项目选择。
@@ -229,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=展开节点
 
 TREE_ITEM_COLLAPSE_NODE=折叠节点
 
+VALUE_STATE_TYPE_ERROR=值状态错误
+
+VALUE_STATE_TYPE_WARNING=值状态警告
+
+VALUE_STATE_TYPE_SUCCESS=值状态成功
+
+VALUE_STATE_TYPE_INFORMATION=值状态信息
+
 VALUE_STATE_ERROR=无效输入
 
 VALUE_STATE_WARNING=已发出警告

package/dist/i18n/messagebundle_zh_TW.properties

@@ -59,17 +59,17 @@ COLOR_PALETTE_DIALOG_TITLE=更改色彩
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多色彩...
 
-COLORPICKER_ALPHA_SLIDER=Alpha control
+COLORPICKER_ALPHA_SLIDER=Alpha 控制
 
-COLORPICKER_HUE_SLIDER=Hue control
+COLORPICKER_HUE_SLIDER=色調控制
 
-COLORPICKER_HEX=Hexadecimal
+COLORPICKER_HEX=十六進位
 
-COLORPICKER_RED=Red
+COLORPICKER_RED=紅色
 
-COLORPICKER_GREEN=Green
+COLORPICKER_GREEN=綠色
 
-COLORPICKER_BLUE=Blue
+COLORPICKER_BLUE=藍色
 
 COLORPICKER_ALPHA=Alpha
 
@@ -113,6 +113,8 @@ LIST_ITEM_SELECTED=已勾選
 
 LIST_ITEM_NOT_SELECTED=未選擇
 
+LIST_ITEM_GROUP_HEADER=群組表頭
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=多重選擇模式
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=項目選擇。
@@ -229,6 +231,14 @@ TREE_ITEM_EXPAND_NODE=展開節點
 
 TREE_ITEM_COLLAPSE_NODE=收縮節點
 
+VALUE_STATE_TYPE_ERROR=值狀態 (錯誤)
+
+VALUE_STATE_TYPE_WARNING=值狀態 (警告)
+
+VALUE_STATE_TYPE_SUCCESS=值狀態 (成功)
+
+VALUE_STATE_TYPE_INFORMATION=值狀態資訊
+
 VALUE_STATE_ERROR=無效輸入項
 
 VALUE_STATE_WARNING=已發出警告

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.4.0",
+  "version": "1.7.0",
   "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"
   },
@@ -40,13 +41,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.4.0",
-    "@ui5/webcomponents-icons": "1.4.0",
-    "@ui5/webcomponents-localization": "1.4.0",
-    "@ui5/webcomponents-theming": "1.4.0"
+    "@ui5/webcomponents-base": "1.7.0",
+    "@ui5/webcomponents-icons": "1.7.0",
+    "@ui5/webcomponents-localization": "1.7.0",
+    "@ui5/webcomponents-theming": "1.7.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.4.0",
-    "chromedriver": "101.0.0"
+    "@ui5/webcomponents-tools": "1.7.0",
+    "chromedriver": "104.0.0"
   }
 }

package/src/Avatar.hbs

@@ -17,4 +17,6 @@
 	{{else if initials}}
 		<span class="ui5-avatar-initials">{{validInitials}}</span>
 	{{/if}}
+
+	<slot name="badge"></slot>
 </div>

package/src/Avatar.js

@@ -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>
@@ -54,7 +54,7 @@ const metadata = {
 		 * <br>
 		 * <pre>&lt;ui5-avatar icon="employee"></pre>
 		 *
-		 * See all the available icons in 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>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -208,6 +208,34 @@ const metadata = {
 			propertyName: "image",
 			type: HTMLElement,
 		},
+		/**
+		 * Defines the optional badge that will be used for visual affordance.
+		 * <b>Note:</b> While the slot allows for custom badges, to achieve
+		 * the Fiori design, please use <code>ui5-badge</code> with <code>ui5-icon</code>
+		 * in the corresponding <code>icon</code> slot, without text nodes.
+		 * <br><br>
+		 * Example:
+		 * <br><br>
+		 * &lt;ui5-avatar><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-badge slot="badge"><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-icon slot="icon" name="employee">&lt;/ui5-icon><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp&lt;/ui5-badge><br>
+		 * &lt;/ui5-avatar>
+		 * <br><br>
+		 * <ui5-avatar initials="AB" color-scheme="Accent1">
+		 * <ui5-badge slot="badge">
+		 * <ui5-icon slot="icon" name="accelerated"></ui5-icon>
+		 * </ui5-badge>
+		 * </ui5-avatar>
+		 *
+		 * @type {HTMLElement}
+		 * @slot badge
+		 * @public
+		 * @since 1.7.0
+		 */
+		badge: {
+			type: HTMLElement,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 		/**
@@ -226,7 +254,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

package/src/AvatarGroup.js

@@ -8,6 +8,7 @@ import {
 	isEnter,
 	isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 
 import {
 	AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,
@@ -376,13 +377,21 @@ class AvatarGroup extends UI5Element {
 		// if in "Group" mode overflow button size is equal to the offset from second item
 		if (this._isGroup) {
 			let item = this.items[1];
+			let ltrEffectiveWidth;
 
 			// in some cases when second avatar is overflowed the offset of the button is the right one
 			if (!item || item.hidden) {
 				item = button;
 			}
 
-			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : item.offsetLeft;
+			ltrEffectiveWidth = item.offsetLeft;
+
+			if (!isChrome()) {
+				// additional subtractions required for non-Chromium browsers
+				ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;
+			}
+
+			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : ltrEffectiveWidth;
 		}
 
 		return button.offsetWidth;
@@ -518,6 +527,7 @@ class AvatarGroup extends UI5Element {
 	 */
 	_getWidthToItem(item) {
 		const isRTL = this.effectiveDir === "rtl";
+		let ltrWidthToItem;
 
 		if (isRTL) {
 			// in RTL the total width is equal to difference of the parent container width and
@@ -526,7 +536,15 @@ class AvatarGroup extends UI5Element {
 		}
 
 		// in LTR the width is equal to item.offsetLeft
-		return item.offsetLeft;
+		ltrWidthToItem = item.offsetLeft;
+
+		if (!isChrome()) {
+			// for non-Chromium browsers offsetLeft may differ
+			// to normalize it, the Avatar Group's offset-left is subtracted
+			ltrWidthToItem = item.offsetLeft - this.offsetLeft;
+		}
+
+		return ltrWidthToItem;
 	}
 
 	/**

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 { 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";
@@ -129,7 +130,7 @@ class Badge extends UI5Element {
 	}
 
 	get hasText() {
-		return !!this.textContent.trim().length;
+		return isDefaultSlotProvided(this);
 	}
 
 	get hasIcon() {

package/src/Breadcrumbs.hbs

@@ -6,7 +6,7 @@
 
         <li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" 
             ?hidden="{{_isOverflowEmpty}}">
-            <ui5-link @click="{{_openRespPopover}}"
+            <ui5-link @ui5-click="{{_openRespPopover}}"
                 accessible-role="button"
                 aria-label="{{_dropdownArrowAccessibleNameText}}"
                 aria-haspopup="{{_ariaHasPopup}}">
@@ -20,7 +20,7 @@
                 id="{{this._id}}-link-wrapper">
                 
                 <ui5-link
-                    @click="{{../_onLinkPress}}"
+                    @ui5-click="{{../_onLinkPress}}"
                     href="{{this.href}}"
                     target="{{this.target}}"
                     id="{{this._id}}-link"

package/src/Breadcrumbs.js

@@ -60,7 +60,7 @@ const metadata = {
 		},
 
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
 
 		/**
 		 * Defines the visual indication and behavior of the breadcrumbs.
@@ -115,7 +115,7 @@ const metadata = {
 		},
 
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
 
 		/**
 		 * Fires when a <code>BreadcrumbsItem</code> is clicked.
@@ -124,11 +124,19 @@ const metadata = {
 		 * @event sap.ui.webcomponents.main.Breadcrumbs#item-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} item The clicked item.
+		 * @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+		 * @param {Boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+		 * @param {Boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+		 * @param {Boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
 		 * @public
 		 */
 		"item-click": {
 			detail: {
 				item: { type: HTMLElement },
+				altKey: { type: Boolean	},
+				ctrlKey: { type: Boolean },
+				metaKey: { type: Boolean },
+				shiftKey: { type: Boolean },
 			},
 		},
 	},
@@ -391,15 +399,17 @@ class Breadcrumbs extends UI5Element {
 		const link = event.target,
 			items = this.getSlottedNodes("items"),
 			item = items.find(x => `${x._id}-link` === link.id);
-		if (!this.fireEvent("item-click", { item }, true)) {
+
+		if (!this.fireEvent("item-click", { item, ...event.detail }, true)) {
 			event.preventDefault();
 		}
 	}
 
-	_onLabelPress() {
+	_onLabelPress(event) {
 		const items = this.getSlottedNodes("items"),
 			item = items[items.length - 1];
-		this.fireEvent("item-click", { item });
+
+		this.fireEvent("item-click", { item, ...event.detail });
 	}
 
 	_onOverflowListItemSelect(event) {

package/src/BreadcrumbsItem.js

@@ -6,7 +6,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 const metadata = {
 	tag: "ui5-breadcrumbs-item",
 	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.main.BreadcrumbsItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */ {
 
 		/**
 		 * Defines the link href.
@@ -45,7 +45,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the item.
+		 * Defines the accessible ARIA name of the item.
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined
@@ -77,7 +77,7 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-breadcrumbs-item</code> component defines the content of an item in <code>ui5-breadcumbs</code>.
+ * The <code>ui5-breadcrumbs-item</code> component defines the content of an item in <code>ui5-breadcrumbs</code>.
  *
  * @constructor
  * @author SAP SE

package/src/BusyIndicator.js

@@ -1,6 +1,5 @@
 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 { 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";
@@ -123,7 +122,7 @@ const metadata = {
  * <h4>When to use:</h4>
  * <ul>
  * <li>The user needs to be able to cancel the operation.</li>
- * <li>Only part of the application or a particular control is affected.</li>
+ * <li>Only part of the application or a particular component is affected.</li>
  * </ul>
  *
  * <h4>When not to use:</h4>
@@ -207,7 +206,6 @@ class BusyIndicator extends UI5Element {
 		return {
 			root: {
 				"ui5-busy-indicator-root": true,
-				"ui5-busy-indicator-root--ie": isIE(),
 			},
 		};
 	}

package/src/Button.hbs

@@ -25,6 +25,7 @@
 		<ui5-icon
 			class="ui5-button-icon"
 			name="{{icon}}"
+			accessible-role="{{iconRole}}"
 			part="icon"
 			?show-tooltip={{showIconTooltip}}
 		></ui5-icon>