@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-a3eca7ade

package/src/i18n/messagebundle_vi.properties

@@ -9,8 +9,24 @@ ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=Tiêu đề thẻ tương tác
 
 AVATAR_TOOLTIP=Ảnh đại diện
 
+AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL={0} được hiển thị, {1} được ẩn.
+
+AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL=Kích hoạt cho danh sách đầy đủ.
+
+AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL=Ảnh đại diện cá nhân.
+
+AVATAR_GROUP_ARIA_LABEL_GROUP=Ảnh đại diện kết hợp.
+
+AVATAR_GROUP_MOVE=Nhấn các phím MŨI TÊN để di chuyển.
+
 BADGE_DESCRIPTION=Biểu tượng
 
+BREADCRUMBS_ARIA_LABEL=Lưu vết trong định hướng
+
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Thêm
+
+BREADCRUMBS_CANCEL_BUTTON=Hủy
+
 BUSY_INDICATOR_TITLE=Vui lòng chờ
 
 BUTTON_ARIA_TYPE_ACCEPT=Hành động tích cực
@@ -29,6 +45,8 @@ CAROUSEL_NEXT_ARROW_TEXT=Trang kế tiếp
 
 COLORPALETTE_CONTAINER_LABEL=Bảng màu - Màu được xác định trước
 
+COLORPALETTE_POPOVER_TITLE=Bảng màu
+
 COLORPALETTE_COLOR_LABEL=Màu
 
 COLOR_PALETTE_DIALOG_CANCEL_BUTTON=Hủy
@@ -43,6 +61,10 @@ DATEPICKER_OPEN_ICON_TITLE=Mở trình chọn
 
 DATEPICKER_DATE_DESCRIPTION=Nhập ngày
 
+DATETIME_DESCRIPTION=Nhập ngày giờ
+
+DATERANGE_DESCRIPTION=Nhập phạm vi ngày
+
 DELETE=Xóa
 
 FILEUPLOAD_BROWSE=Duyệt...
@@ -71,12 +93,34 @@ LIST_ITEM_POSITION=Mục danh sách {0} của {1}
 
 LIST_ITEM_SELECTED=Được chọn
 
+LIST_ITEM_NOT_SELECTED=Không được chọn
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=Chế độ đa lựa chọn
 
-MESSAGE_STRIP_CLOSE_BUTTON=Đóng dải thông báo
+ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Lựa chọn mục.
+
+ARIA_LABEL_LIST_SELECTABLE=Chứa mục có thể chọn
+
+ARIA_LABEL_LIST_MULTISELECTABLE=Chứa mục có đa lựa chọn
+
+ARIA_LABEL_LIST_DELETABLE=Chứa mục có thể xóa
+
+MESSAGE_STRIP_CLOSE_BUTTON=Đóng thanh thông tin
+
+MESSAGE_STRIP_CLOSABLE=Có thể đóng
+
+MESSAGE_STRIP_ERROR=Thanh thông tin lỗi
+
+MESSAGE_STRIP_WARNING=Thanh thông tin cảnh báo
+
+MESSAGE_STRIP_SUCCESS=Thanh thông tin thành công
+
+MESSAGE_STRIP_INFORMATION=Thanh thông tin
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
+VALUE_STATE_ERROR_ALREADY_SELECTED=Giá trị này đã được chọn.
+
 MULTIINPUT_ROLEDESCRIPTION_TEXT=Đầu vào đa giá trị
 
 MULTIINPUT_SHOW_MORE_TOKENS={0} Nhiều hơn
@@ -95,7 +139,11 @@ RATING_INDICATOR_TEXT=Chỉ báo xếp hạng
 
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=Từ chối
 
-SEGMENTEDBUTTON_ARIA_DESCRIPTION=Nút được phân đoạn
+SEGMENTEDBUTTON_ARIA_DESCRIPTION=Nhóm nút được phân đoạn
+
+SEGMENTEDBUTTON_ARIA_DESCRIBEDBY=Nhấn SPACE hoặc ENTER để chọn mục
+
+SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Nút được phân đoạn
 
 SLIDER_ARIA_DESCRIPTION=Điều khiển thanh trượt
 
@@ -107,6 +155,10 @@ LOAD_MORE_TEXT=Thêm
 
 TABLE_HEADER_ROW_TEXT=Hàng tiêu đề
 
+TABLE_ROW_POSITION={0} của {1}
+
+TABLE_GROUP_ROW_ARIA_LABEL=Phân nhóm hàng tiêu đề
+
 ARIA_LABEL_ROW_SELECTION=Lựa chọn mục
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=Lựa chọn tất cả hàng
@@ -117,6 +169,8 @@ TABCONTAINER_PREVIOUS_ICON_ACC_NAME=Trước
 
 TABCONTAINER_OVERFLOW_MENU_TITLE=Trình đơn tràn
 
+TABCONTAINER_END_OVERFLOW=Thêm
+
 TEXTAREA_CHARACTERS_LEFT=còn lại {0} ký tự
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} ký tự quá giới hạn
@@ -133,6 +187,10 @@ TIMEPICKER_SUBMIT_BUTTON=OK
 
 TIMEPICKER_CANCEL_BUTTON=Hủy
 
+TIMEPICKER_INPUT_DESCRIPTION=Nhập thời gian
+
+DURATION_INPUT_DESCRIPTION=Nhập khoảng thời gian
+
 DATETIME_PICKER_DATE_BUTTON=Ngày
 
 DATETIME_PICKER_TIME_BUTTON=Thời gian
@@ -176,3 +234,8 @@ DAY_PICKER_TODAY=Hôm nay
 STEPINPUT_DEC_ICON_TITLE=Giảm
 
 STEPINPUT_INC_ICON_TITLE=Tăng
+
+SPLIT_BUTTON_DESCRIPTION=Nút phân chia
+
+SPLIT_BUTTON_KEYBOARD_HINT=Nhấn Phím cách hoặc Enter để kích hoạt thao tác mặc định và Alt + Mũi tên xuống hoặc F4 để kích hoạt thao tác mũi tên
+

package/src/i18n/messagebundle_zh_CN.properties

@@ -9,8 +9,24 @@ ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=交互式卡抬头
 
 AVATAR_TOOLTIP=头像
 
+AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL={0} 个显示，{1} 个隐藏。
+
+AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL=为整个列表激活。
+
+AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL=单独头像。
+
+AVATAR_GROUP_ARIA_LABEL_GROUP=联合头像。
+
+AVATAR_GROUP_MOVE=按箭头键进行移动。
+
 BADGE_DESCRIPTION=徽章
 
+BREADCRUMBS_ARIA_LABEL=位置指示节点跟踪
+
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=更多
+
+BREADCRUMBS_CANCEL_BUTTON=取消
+
 BUSY_INDICATOR_TITLE=请稍候
 
 BUTTON_ARIA_TYPE_ACCEPT=肯定操作
@@ -29,6 +45,8 @@ CAROUSEL_NEXT_ARROW_TEXT=下一页
 
 COLORPALETTE_CONTAINER_LABEL=调色板 - 预定义颜色
 
+COLORPALETTE_POPOVER_TITLE=调色板
+
 COLORPALETTE_COLOR_LABEL=颜色
 
 COLOR_PALETTE_DIALOG_CANCEL_BUTTON=取消
@@ -43,6 +61,10 @@ DATEPICKER_OPEN_ICON_TITLE=打开选取器
 
 DATEPICKER_DATE_DESCRIPTION=日期输入
 
+DATETIME_DESCRIPTION=日期时间输入
+
+DATERANGE_DESCRIPTION=日期范围输入
+
 DELETE=删除
 
 FILEUPLOAD_BROWSE=浏览...
@@ -71,12 +93,34 @@ LIST_ITEM_POSITION=列表项目 {0}/{1}
 
 LIST_ITEM_SELECTED=已选择
 
+LIST_ITEM_NOT_SELECTED=未选择
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=多重选择模式
 
-MESSAGE_STRIP_CLOSE_BUTTON=消息条关闭
+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} 个
@@ -95,7 +139,11 @@ RATING_INDICATOR_TEXT=评级指示器
 
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=拒绝
 
-SEGMENTEDBUTTON_ARIA_DESCRIPTION=分段式按钮
+SEGMENTEDBUTTON_ARIA_DESCRIPTION=分段式按钮组
+
+SEGMENTEDBUTTON_ARIA_DESCRIBEDBY=按空格键或 ENTER 选择项目
+
+SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=分段式按钮
 
 SLIDER_ARIA_DESCRIPTION=滑块手柄
 
@@ -107,6 +155,10 @@ LOAD_MORE_TEXT=更多
 
 TABLE_HEADER_ROW_TEXT=抬头行
 
+TABLE_ROW_POSITION={0} / {1}
+
+TABLE_GROUP_ROW_ARIA_LABEL=组抬头行
+
 ARIA_LABEL_ROW_SELECTION=项目选择
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=选择所有行
@@ -117,6 +169,8 @@ TABCONTAINER_PREVIOUS_ICON_ACC_NAME=上一个
 
 TABCONTAINER_OVERFLOW_MENU_TITLE=溢出菜单
 
+TABCONTAINER_END_OVERFLOW=更多
+
 TEXTAREA_CHARACTERS_LEFT=剩余 {0} 个字符
 
 TEXTAREA_CHARACTERS_EXCEEDED=超过限制 {0} 个字符
@@ -133,6 +187,10 @@ TIMEPICKER_SUBMIT_BUTTON=确定
 
 TIMEPICKER_CANCEL_BUTTON=取消
 
+TIMEPICKER_INPUT_DESCRIPTION=时间输入
+
+DURATION_INPUT_DESCRIPTION=持续时间输入
+
 DATETIME_PICKER_DATE_BUTTON=日期
 
 DATETIME_PICKER_TIME_BUTTON=时间
@@ -176,3 +234,8 @@ DAY_PICKER_TODAY=今天
 STEPINPUT_DEC_ICON_TITLE=减少
 
 STEPINPUT_INC_ICON_TITLE=增加
+
+SPLIT_BUTTON_DESCRIPTION=拆分按钮
+
+SPLIT_BUTTON_KEYBOARD_HINT=按空格键或 Enter 触发缺省操作，按 Alt + 向下箭头或 F4 触发箭头操作
+

package/src/i18n/messagebundle_zh_TW.properties

@@ -9,8 +9,24 @@ ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=互動式卡片表頭
 
 AVATAR_TOOLTIP=虛擬個人頭像
 
+AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL=已顯示 {0}、已隱藏 {1}。
+
+AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL=針對完整清單而啟用。
+
+AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL=個別虛擬個人頭像。
+
+AVATAR_GROUP_ARIA_LABEL_GROUP=結合虛擬個人頭像。
+
+AVATAR_GROUP_MOVE=按箭頭鍵以移動。
+
 BADGE_DESCRIPTION=徽章
 
+BREADCRUMBS_ARIA_LABEL=路徑指引追蹤
+
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=更多
+
+BREADCRUMBS_CANCEL_BUTTON=取消
+
 BUSY_INDICATOR_TITLE=請稍候
 
 BUTTON_ARIA_TYPE_ACCEPT=正向作業
@@ -29,6 +45,8 @@ CAROUSEL_NEXT_ARROW_TEXT=下一頁
 
 COLORPALETTE_CONTAINER_LABEL=調色盤 - 預先定義的色彩
 
+COLORPALETTE_POPOVER_TITLE=調色盤
+
 COLORPALETTE_COLOR_LABEL=色彩
 
 COLOR_PALETTE_DIALOG_CANCEL_BUTTON=取消
@@ -43,6 +61,10 @@ DATEPICKER_OPEN_ICON_TITLE=開啟選擇器
 
 DATEPICKER_DATE_DESCRIPTION=日期輸入
 
+DATETIME_DESCRIPTION=日期時間輸入
+
+DATERANGE_DESCRIPTION=日期範圍輸入
+
 DELETE=刪除
 
 FILEUPLOAD_BROWSE=瀏覽...
@@ -71,12 +93,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} 個
@@ -95,7 +139,11 @@ RATING_INDICATOR_TEXT=分級指示碼
 
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=拒絕
 
-SEGMENTEDBUTTON_ARIA_DESCRIPTION=區段按鈕
+SEGMENTEDBUTTON_ARIA_DESCRIPTION=區段按鈕群組
+
+SEGMENTEDBUTTON_ARIA_DESCRIBEDBY=按下 SPACE 或 ENTER 以選擇項目
+
+SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
 SLIDER_ARIA_DESCRIPTION=滑桿控點
 
@@ -107,6 +155,10 @@ LOAD_MORE_TEXT=較多
 
 TABLE_HEADER_ROW_TEXT=表頭列
 
+TABLE_ROW_POSITION={0}/{1}
+
+TABLE_GROUP_ROW_ARIA_LABEL=群組表頭列
+
 ARIA_LABEL_ROW_SELECTION=項目選擇
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=選擇所有列
@@ -117,6 +169,8 @@ TABCONTAINER_PREVIOUS_ICON_ACC_NAME=上一步
 
 TABCONTAINER_OVERFLOW_MENU_TITLE=溢位功能表
 
+TABCONTAINER_END_OVERFLOW=更多
+
 TEXTAREA_CHARACTERS_LEFT=剩下 {0} 個字元
 
 TEXTAREA_CHARACTERS_EXCEEDED=超過 {0} 個字元
@@ -133,6 +187,10 @@ TIMEPICKER_SUBMIT_BUTTON=成功
 
 TIMEPICKER_CANCEL_BUTTON=取消
 
+TIMEPICKER_INPUT_DESCRIPTION=時間輸入
+
+DURATION_INPUT_DESCRIPTION=持續期輸入
+
 DATETIME_PICKER_DATE_BUTTON=日期
 
 DATETIME_PICKER_TIME_BUTTON=時間
@@ -176,3 +234,8 @@ DAY_PICKER_TODAY=今天
 STEPINPUT_DEC_ICON_TITLE=減少
 
 STEPINPUT_INC_ICON_TITLE=增加
+
+SPLIT_BUTTON_DESCRIPTION=分割按鈕
+
+SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作
+

package/src/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/src/popup-utils/PopoverRegistry.js

@@ -39,7 +39,7 @@ const detachGlobalClickHandler = () => {
 
 const clickHandler = event => {
 	const openedPopups = getOpenedPopups();
-	const isTopPopupPopover = openedPopups[openedPopups.length - 1].instance.openBy;
+	const isTopPopupPopover = openedPopups[openedPopups.length - 1].instance.showAt;
 
 	if (openedPopups.length === 0 || !isTopPopupPopover) {
 		return;

package/src/themes/Avatar.css

@@ -0,0 +1,228 @@
+:host(:not([hidden])) {
+	display: inline-block;
+	box-sizing: border-box;
+}
+
+/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
+:host(:not([hidden]).ui5_hovered) {
+	opacity: .7;
+}
+
+:host([focused]) {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
+}
+
+:host([interactive]) {
+	cursor: pointer;
+}
+
+:host {
+	height: 3rem;
+	width: 3rem;
+	border-radius: 50%;
+	border: var(--ui5-avatar-initials-border);
+	outline: none;
+	color: var(--ui5-avatar-initials-color);
+}
+
+/* Shapes */
+:host([shape="Square"]),
+:host([shape="Square"]) ::slotted(*){
+	border-radius: .25rem;
+}
+
+:host([shape="Square"]) .ui5-avatar-root {
+	border-radius: inherit;
+}
+
+:host([shape="Square"]) .ui5-avatar-img {
+	border-radius: inherit;
+}
+
+/* Sizes */
+
+:host([_size="XS"]),
+:host([size="XS"]) {
+	height: 2rem;
+	width: 2rem;
+	min-height: 2rem;
+	min-width: 2rem;
+	font-size: var(--_ui5_avatar_fontsize_XS);
+}
+
+:host([_size="S"]),
+:host([size="S"]) {
+	min-height: 3rem;
+	min-width: 3rem;
+	font-size: var(--_ui5_avatar_fontsize_S);
+}
+
+:host([_size="M"]),
+:host([size="M"]) {
+	min-height: 4rem;
+	min-width: 4rem;
+	font-size: var(--_ui5_avatar_fontsize_M);
+}
+
+:host([_size="L"]),
+:host([size="L"]) {
+	min-height: 5rem;
+	min-width: 5rem;
+	font-size: var(--_ui5_avatar_fontsize_L);
+}
+
+:host([_size="XL"]),
+:host([size="XL"]) {
+	min-height: 7rem;
+	min-width: 7rem;
+	font-size: var(--_ui5_avatar_fontsize_XL);
+}
+
+/* Icon */
+:host .ui5-avatar-icon {
+	height: 1.5rem;
+	width: 1.5rem;
+	color: inherit;
+}
+
+:host([_size="XS"]) .ui5-avatar-icon,
+:host([size="XS"]) .ui5-avatar-icon {
+	height: 1rem;
+	width: 1rem;
+}
+
+:host([_size="S"]) .ui5-avatar-icon,
+:host([size="S"]) .ui5-avatar-icon {
+	height: 1.5rem;
+	width: 1.5rem;
+}
+
+:host([_size="M"]) .ui5-avatar-icon,
+:host([size="M"]) .ui5-avatar-icon {
+	height: 2rem;
+	width: 2rem;
+}
+
+:host([_size="L"]) .ui5-avatar-icon,
+:host([size="L"]) .ui5-avatar-icon {
+	height: 2.5rem;
+	width: 2.5rem;
+}
+
+:host([_size="XL"]) .ui5-avatar-icon,
+:host([size="XL"]) .ui5-avatar-icon {
+	height: 3rem;
+	width: 3rem;
+}
+
+::slotted(*) {
+	border-radius: 50%;
+    width: 100%;
+    height: 100%;
+}
+
+:host(:not([color-scheme])),
+:host(:not([_has-image])),
+:host([_color-scheme="Accent6"]),
+:host([color-scheme="Accent6"]) {
+	background-color: var(--ui5-avatar-accent6);
+	color: var(--ui5-avatar-accent6-color);
+}
+
+:host([_color-scheme="Accent1"]),
+:host([color-scheme="Accent1"]) {
+	background-color: var(--ui5-avatar-accent1);
+	color: var(--ui5-avatar-accent1-color);
+}
+
+:host([_color-scheme="Accent2"]),
+:host([color-scheme="Accent2"]) {
+	background-color: var(--ui5-avatar-accent2);
+	color: var(--ui5-avatar-accent2-color);
+}
+
+:host([_color-scheme="Accent3"]),
+:host([color-scheme="Accent3"]) {
+	background-color: var(--ui5-avatar-accent3);
+	color: var(--ui5-avatar-accent3-color);
+}
+
+:host([_color-scheme="Accent4"]),
+:host([color-scheme="Accent4"]) {
+	background-color: var(--ui5-avatar-accent4);
+	color: var(--ui5-avatar-accent4-color);
+}
+
+:host([_color-scheme="Accent5"]),
+:host([color-scheme="Accent5"]) {
+	background-color: var(--ui5-avatar-accent5);
+	color: var(--ui5-avatar-accent5-color);
+}
+
+:host([_color-scheme="Accent7"]),
+:host([color-scheme="Accent7"]) {
+	background-color: var(--ui5-avatar-accent7);
+	color: var(--ui5-avatar-accent7-color);
+}
+
+:host([_color-scheme="Accent8"]),
+:host([color-scheme="Accent8"]) {
+	background-color: var(--ui5-avatar-accent8);
+	color: var(--ui5-avatar-accent8-color);
+}
+
+:host([_color-scheme="Accent9"]),
+:host([color-scheme="Accent9"]) {
+	background-color: var(--ui5-avatar-accent9);
+	color: var(--ui5-avatar-accent9-color);
+}
+
+:host([_color-scheme="Accent10"]),
+:host([color-scheme="Accent10"]) {
+	background-color: var(--ui5-avatar-accent10);
+	color: var(--ui5-avatar-accent10-color);
+}
+
+:host([_color-scheme="Placeholder"]),
+:host([color-scheme="Placeholder"]) {
+	background-color: var(--ui5-avatar-placeholder);
+	color: var(--ui5-avatar-placeholder-color);
+}
+
+:host([_has-image]) {
+	background-color: transparent;
+	vertical-align: middle;
+}
+
+:host([image-fit-type="Contain"]) .ui5-avatar-img {
+	background-size: contain;
+}
+
+.ui5-avatar-root {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	outline: none;
+}
+
+.ui5-avatar-root,
+.ui5-avatar-img {
+	height: 100%;
+	width: 100%;
+	border-radius: 50%;
+}
+
+.ui5-avatar-img {
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+}
+
+.ui5-avatar-initials {
+	color: inherit;
+}
+
+::slotted(*) {
+	pointer-events: none;
+}

package/src/themes/AvatarGroup.css

@@ -0,0 +1,82 @@
+@import "./TapHighlightColor.css";
+:host(:not([hidden])) {
+	display: block;
+}
+
+.ui5-avatar-group-items:focus {
+	outline: none;
+}
+
+:host([type="Group"]) .ui5-avatar-group-items:focus {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
+}
+
+.ui5-avatar-group-root {
+	display: flex;
+}
+
+.ui5-avatar-group-items {
+	white-space: nowrap;
+	position: relative;
+	display: inline-flex;
+}
+
+:host([type="Group"]) .ui5-avatar-group-items {
+	cursor: pointer;
+}
+
+:host([type="Group"]) ::slotted([ui5-button]),
+:host([type="Group"]) ::slotted([ui5-avatar]) {
+	pointer-events: none;
+}
+
+::slotted([ui5-button]:not([hidden])),
+.ui5-avatar-group-overflow-btn:not([hidden]) {
+	--_ui5_button_base_padding: 0;
+	border-radius: 50%;
+	display: inline-flex;
+	text-overflow: initial;
+}
+
+::slotted([ui5-button][focused]),
+.ui5-avatar-group-overflow-btn[focused] {
+	outline: var(--_ui5_button_outline);
+	outline-offset: var(--_ui5_avatar_group_overflow_button_focus_offset);
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {
+	height: 2rem;
+	width: 2rem;
+	min-width: 2rem;
+	font-size: .75rem;
+}
+
+::slotted([ui5-button]),
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-s {
+	height: 3rem;
+	width: 3rem;
+	min-width: 3rem;
+	font-size: 1.125rem;
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-m {
+	height: 4rem;
+	width: 4rem;
+	min-width: 4rem;
+	font-size: 1.625rem;
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-l {
+	height: 5rem;
+	width: 5rem;
+	min-width: 5rem;
+	font-size: 2rem;
+}
+
+.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xl {
+	height: 7rem;
+	width: 7rem;
+	min-width: 7rem;
+	font-size: 2.75rem;
+}