@ui5/webcomponents 0.0.0-35e2c9666 → 0.0.0-38861c872

package/src/i18n/messagebundle_zh_CN.properties

@@ -21,6 +21,8 @@ AVATAR_GROUP_MOVE=按箭头键进行移动。
 
 BADGE_DESCRIPTION=徽章
 
+BREADCRUMB_ITEM_POS={0} / {1}
+
 BREADCRUMBS_ARIA_LABEL=位置指示节点跟踪
 
 BREADCRUMBS_OVERFLOW_ARIA_LABEL=更多
@@ -29,9 +31,9 @@ BREADCRUMBS_CANCEL_BUTTON=取消
 
 BUSY_INDICATOR_TITLE=请稍候
 
-BUTTON_ARIA_TYPE_ACCEPT=肯定操作
+BUTTON_ARIA_TYPE_ACCEPT=积极操作
 
-BUTTON_ARIA_TYPE_REJECT=否定操作
+BUTTON_ARIA_TYPE_REJECT=消极操作
 
 BUTTON_ARIA_TYPE_EMPHASIZED=加重
 
@@ -57,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=日期输入
@@ -73,6 +89,8 @@ FILEUPLOADER_TITLE=上载文件
 
 GROUP_HEADER_TEXT=组抬头
 
+SELECT_ROLE_DESCRIPTION=列表框
+
 SELECT_OPTIONS=选择选项
 
 INPUT_SUGGESTIONS=有可用建议
@@ -85,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} 个结果可用
 
 INPUT_SUGGESTIONS_NO_HIT=无结果
 
+INPUT_CLEAR_ICON_ACC_NAME=清除
+
 LINK_SUBTLE=隐蔽
 
 LINK_EMPHASIZED=加重
@@ -95,6 +115,8 @@ LIST_ITEM_SELECTED=已选择
 
 LIST_ITEM_NOT_SELECTED=未选择
 
+LIST_ITEM_GROUP_HEADER=组抬头
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=多重选择模式
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=项目选择。
@@ -119,6 +141,8 @@ MESSAGE_STRIP_INFORMATION=信息栏
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=确定
 
+RADIO_BUTTON_GROUP_REQUIRED=选择其中一个可用的选项。
+
 VALUE_STATE_ERROR_ALREADY_SELECTED=已选择此值。
 
 MULTIINPUT_ROLEDESCRIPTION_TEXT=多值输入
@@ -137,6 +161,8 @@ RATING_INDICATOR_TOOLTIP_TEXT=评级
 
 RATING_INDICATOR_TEXT=评级指示器
 
+RATING_INDICATOR_ARIA_DESCRIPTION=必需
+
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=拒绝
 
 SEGMENTEDBUTTON_ARIA_DESCRIPTION=分段式按钮组
@@ -147,13 +173,9 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=分段式按钮
 
 SLIDER_ARIA_DESCRIPTION=滑块手柄
 
-SWITCH_ON=开
-
-SWITCH_OFF=关
-
 LOAD_MORE_TEXT=更多
 
-TABLE_HEADER_ROW_TEXT=抬头行
+TABLE_HEADER_ROW_INFORMATION=抬头行 1 / {0}
 
 TABLE_ROW_POSITION={0} / {1}
 
@@ -163,6 +185,18 @@ ARIA_LABEL_ROW_SELECTION=项目选择
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=选择所有行
 
+ARIA_LABEL_EMPTY_CELL=空
+
+TAB_ARIA_DESIGN_POSITIVE=积极
+
+TAB_ARIA_DESIGN_NEGATIVE=消极
+
+TAB_ARIA_DESIGN_CRITICAL=临界
+
+TAB_ARIA_DESIGN_NEUTRAL=中性
+
+TAB_SPLIT_ROLE_DESCRIPTION=含有子项目的标签
+
 TABCONTAINER_NEXT_ICON_ACC_NAME=下一个
 
 TABCONTAINER_PREVIOUS_ICON_ACC_NAME=上一个
@@ -173,6 +207,8 @@ TABCONTAINER_END_OVERFLOW=更多
 
 TABCONTAINER_POPOVER_CANCEL_BUTTON=取消
 
+TABCONTAINER_SUBTABS_DESCRIPTION=按下箭头键打开子项目菜单
+
 TEXTAREA_CHARACTERS_LEFT=剩余 {0} 个字符
 
 TEXTAREA_CHARACTERS_EXCEEDED=超过限制 {0} 个字符
@@ -183,14 +219,20 @@ TIMEPICKER_MINUTES_LABEL=分钟
 
 TIMEPICKER_SECONDS_LABEL=秒
 
-TIMEPICKER_PERIODS_LABEL=AM/PM
-
 TIMEPICKER_SUBMIT_BUTTON=确定
 
 TIMEPICKER_CANCEL_BUTTON=取消
 
 TIMEPICKER_INPUT_DESCRIPTION=时间输入
 
+TIMEPICKER_CLOCK_DIAL_LABEL=钟表盘
+
+TIMEPICKER_INPUTS_ENTER_HOURS=请输入小时
+
+TIMEPICKER_INPUTS_ENTER_MINUTES=请输入分钟
+
+TIMEPICKER_INPUTS_ENTER_SECONDS=请输入秒
+
 DURATION_INPUT_DESCRIPTION=持续时间输入
 
 DATETIME_PICKER_DATE_BUTTON=日期
@@ -209,12 +251,22 @@ TOKENIZER_ARIA_LABEL=分词器
 
 TOKENIZER_POPOVER_REMOVE=移除
 
+TOKENIZER_SHOW_ALL_ITEMS={0} 个项目
+
 TREE_ITEM_ARIA_LABEL=树项目
 
 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=已发出警告
@@ -233,6 +285,10 @@ DAY_PICKER_NON_WORKING_DAY=非工作日
 
 DAY_PICKER_TODAY=今天
 
+MONTH_PICKER_DESCRIPTION=月份选取器
+
+YEAR_PICKER_DESCRIPTION=年度选取器
+
 STEPINPUT_DEC_ICON_TITLE=减少
 
 STEPINPUT_INC_ICON_TITLE=增加
@@ -241,3 +297,17 @@ SPLIT_BUTTON_DESCRIPTION=拆分按钮
 
 SPLIT_BUTTON_KEYBOARD_HINT=按空格键或 Enter 触发缺省操作，按 Alt + 向下箭头或 F4 触发箭头操作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒绝
+
+DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=交互式抬头
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=使用 Shift+箭头键重新调整大小
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=使用箭头键进行移动
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=使用箭头键进行移动，使用 Shift+箭头键重新调整大小
+LABEL_COLON=：
+
+TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=附加选项

package/src/i18n/messagebundle_zh_TW.properties

@@ -21,6 +21,8 @@ AVATAR_GROUP_MOVE=按箭頭鍵以移動。
 
 BADGE_DESCRIPTION=徽章
 
+BREADCRUMB_ITEM_POS={0}/{1}
+
 BREADCRUMBS_ARIA_LABEL=路徑指引追蹤
 
 BREADCRUMBS_OVERFLOW_ARIA_LABEL=更多
@@ -57,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=日期輸入
@@ -73,6 +89,8 @@ FILEUPLOADER_TITLE=上傳檔案
 
 GROUP_HEADER_TEXT=群組表頭
 
+SELECT_ROLE_DESCRIPTION=清單方塊
+
 SELECT_OPTIONS=選擇選項
 
 INPUT_SUGGESTIONS=可用建議
@@ -85,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} 個可用的結果
 
 INPUT_SUGGESTIONS_NO_HIT=沒有結果
 
+INPUT_CLEAR_ICON_ACC_NAME=清除
+
 LINK_SUBTLE=輕微
 
 LINK_EMPHASIZED=強調
@@ -95,6 +115,8 @@ LIST_ITEM_SELECTED=已勾選
 
 LIST_ITEM_NOT_SELECTED=未選擇
 
+LIST_ITEM_GROUP_HEADER=群組表頭
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=多重選擇模式
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=項目選擇。
@@ -119,11 +141,13 @@ MESSAGE_STRIP_INFORMATION=資訊列
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=確定
 
+RADIO_BUTTON_GROUP_REQUIRED=請選擇其中一個可用的選項。
+
 VALUE_STATE_ERROR_ALREADY_SELECTED=已選擇此值。
 
 MULTIINPUT_ROLEDESCRIPTION_TEXT=多重值輸入
 
-MULTIINPUT_SHOW_MORE_TOKENS=超過 {0} 個
+MULTIINPUT_SHOW_MORE_TOKENS=更多 ({0} 個)
 
 PANEL_ICON=展開/收縮
 
@@ -137,6 +161,8 @@ RATING_INDICATOR_TOOLTIP_TEXT=分級
 
 RATING_INDICATOR_TEXT=分級指示碼
 
+RATING_INDICATOR_ARIA_DESCRIPTION=必要
+
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=拒絕
 
 SEGMENTEDBUTTON_ARIA_DESCRIPTION=區段按鈕群組
@@ -147,13 +173,9 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
 SLIDER_ARIA_DESCRIPTION=滑桿控點
 
-SWITCH_ON=開啟
-
-SWITCH_OFF=關閉
-
 LOAD_MORE_TEXT=較多
 
-TABLE_HEADER_ROW_TEXT=表頭列
+TABLE_HEADER_ROW_INFORMATION=表頭列 1/{0}
 
 TABLE_ROW_POSITION={0}/{1}
 
@@ -163,6 +185,18 @@ ARIA_LABEL_ROW_SELECTION=項目選擇
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=選擇所有列
 
+ARIA_LABEL_EMPTY_CELL=空白
+
+TAB_ARIA_DESIGN_POSITIVE=正面
+
+TAB_ARIA_DESIGN_NEGATIVE=負面
+
+TAB_ARIA_DESIGN_CRITICAL=重要
+
+TAB_ARIA_DESIGN_NEUTRAL=一般
+
+TAB_SPLIT_ROLE_DESCRIPTION=含子項目的索引標籤
+
 TABCONTAINER_NEXT_ICON_ACC_NAME=下一步
 
 TABCONTAINER_PREVIOUS_ICON_ACC_NAME=上一步
@@ -173,6 +207,8 @@ TABCONTAINER_END_OVERFLOW=更多
 
 TABCONTAINER_POPOVER_CANCEL_BUTTON=取消
 
+TABCONTAINER_SUBTABS_DESCRIPTION=按向下鍵以開啟子項目功能表
+
 TEXTAREA_CHARACTERS_LEFT=剩下 {0} 個字元
 
 TEXTAREA_CHARACTERS_EXCEEDED=超過 {0} 個字元
@@ -183,14 +219,20 @@ TIMEPICKER_MINUTES_LABEL=分
 
 TIMEPICKER_SECONDS_LABEL=秒
 
-TIMEPICKER_PERIODS_LABEL=早上/下午
-
 TIMEPICKER_SUBMIT_BUTTON=成功
 
 TIMEPICKER_CANCEL_BUTTON=取消
 
 TIMEPICKER_INPUT_DESCRIPTION=時間輸入
 
+TIMEPICKER_CLOCK_DIAL_LABEL=鐘面
+
+TIMEPICKER_INPUTS_ENTER_HOURS=請輸入小時
+
+TIMEPICKER_INPUTS_ENTER_MINUTES=請輸入分鐘
+
+TIMEPICKER_INPUTS_ENTER_SECONDS=請輸入秒數
+
 DURATION_INPUT_DESCRIPTION=持續期輸入
 
 DATETIME_PICKER_DATE_BUTTON=日期
@@ -209,12 +251,22 @@ TOKENIZER_ARIA_LABEL=表徵參數量化器
 
 TOKENIZER_POPOVER_REMOVE=移除
 
+TOKENIZER_SHOW_ALL_ITEMS={0} 個項目
+
 TREE_ITEM_ARIA_LABEL=樹狀結構項目
 
 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=已發出警告
@@ -233,6 +285,10 @@ DAY_PICKER_NON_WORKING_DAY=非工作日
 
 DAY_PICKER_TODAY=今天
 
+MONTH_PICKER_DESCRIPTION=月份選擇器
+
+YEAR_PICKER_DESCRIPTION=年份選擇器
+
 STEPINPUT_DEC_ICON_TITLE=減少
 
 STEPINPUT_INC_ICON_TITLE=增加
@@ -241,3 +297,17 @@ SPLIT_BUTTON_DESCRIPTION=分割按鈕
 
 SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒絕
+
+DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=互動表頭
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=使用　Shift　+　箭頭鍵以調整大小
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=使用箭頭鍵以移動
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=使用箭頭鍵以移動，使用　Shift　+　箭頭鍵以調整大小
+LABEL_COLON=：
+
+TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=附加選項

package/src/themes/Avatar.css

@@ -1,20 +1,41 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	box-sizing: border-box;
+	position: relative;
 }
 
-/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
+/* The ui5_hovered class is set by FileUploader to indicate hover state of the control */
 :host(:not([hidden]).ui5_hovered) {
 	opacity: .7;
 }
 
-:host([focused]) {
+:host(:is([interactive]):not([disabled])) {
+	cursor: pointer;
+}
+
+:host(:is([interactive][pressed]):not([hidden])) {
+	background: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
+	color: var(--sapButton_Active_TextColor);
+}
+
+:host(:is([interactive][pressed]):not([hidden]):hover) {
+	background: var(--sapButton_Selected_Hover_Background);
+	border-color: var(--sapButton_Selected_Hover_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+:host(:is([interactive]):not([hidden]):not([pressed]):not([disabled]):hover) {
+	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
+}
+
+:host(:is([interactive][focused]):not([hidden]):not([pressed])) {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
-:host([interactive]) {
-	cursor: pointer;
+:host(:is([disabled])) {
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 :host {
@@ -36,7 +57,6 @@
 }
 
 /* Sizes */
-
 :host([_size="XS"]),
 :host([size="XS"]) {
 	height: 2rem;
@@ -76,39 +96,39 @@
 
 /* Icon */
 :host .ui5-avatar-icon {
-	height: 1.5rem;
-	width: 1.5rem;
+	height: var(--_ui5_avatar_fontsize_S);
+	width: var(--_ui5_avatar_fontsize_S);
 	color: inherit;
 }
 
 :host([_size="XS"]) .ui5-avatar-icon,
 :host([size="XS"]) .ui5-avatar-icon {
-	height: 1rem;
-	width: 1rem;
+	height: var(--_ui5_avatar_icon_XS);
+	width: var(--_ui5_avatar_icon_XS);
 }
 
 :host([_size="S"]) .ui5-avatar-icon,
 :host([size="S"]) .ui5-avatar-icon {
-	height: 1.5rem;
-	width: 1.5rem;
+	height: var(--_ui5_avatar_icon_S);
+	width: var(--_ui5_avatar_icon_S);
 }
 
 :host([_size="M"]) .ui5-avatar-icon,
 :host([size="M"]) .ui5-avatar-icon {
-	height: 2rem;
-	width: 2rem;
+	height: var(--_ui5_avatar_icon_M);
+	width: var(--_ui5_avatar_icon_M);
 }
 
 :host([_size="L"]) .ui5-avatar-icon,
 :host([size="L"]) .ui5-avatar-icon {
-	height: 2.5rem;
-	width: 2.5rem;
+	height: var(--_ui5_avatar_icon_L);
+	width: var(--_ui5_avatar_icon_L);
 }
 
 :host([_size="XL"]) .ui5-avatar-icon,
 :host([size="XL"]) .ui5-avatar-icon {
-	height: 3rem;
-	width: 3rem;
+	height: var(--_ui5_avatar_icon_XL);
+	width: var(--_ui5_avatar_icon_XL);
 }
 
 ::slotted(*) {
@@ -119,84 +139,165 @@
 }
 
 /* Shapes */
-:host([shape="Square"]),
+:host([shape="Square"]) {
+	border-radius: var(--ui5-avatar-border-radius);
+}
+
 :host([shape="Square"]) ::slotted(*) {
-	border-radius: .25rem;
+	border-radius: calc(var(--ui5-avatar-border-radius) - var(--ui5-avatar-border-radius-img-deduction));
 }
 
 :host(:not([color-scheme])),
 :host(:not([_has-image])),
 :host([_color-scheme="Accent6"]),
-:host([color-scheme="Accent6"]) {
+:host([ui5-avatar][color-scheme="Accent6"]) {
 	background-color: var(--ui5-avatar-accent6);
 	color: var(--ui5-avatar-accent6-color);
+	border-color: var(--ui5-avatar-accent6-border-color);
 }
 
 :host([_color-scheme="Accent1"]),
-:host([color-scheme="Accent1"]) {
+:host([ui5-avatar][color-scheme="Accent1"]) {
 	background-color: var(--ui5-avatar-accent1);
 	color: var(--ui5-avatar-accent1-color);
+	border-color: var(--ui5-avatar-accent1-border-color);
 }
 
 :host([_color-scheme="Accent2"]),
-:host([color-scheme="Accent2"]) {
+:host([ui5-avatar][color-scheme="Accent2"]) {
 	background-color: var(--ui5-avatar-accent2);
 	color: var(--ui5-avatar-accent2-color);
+	border-color: var(--ui5-avatar-accent2-border-color);
 }
 
 :host([_color-scheme="Accent3"]),
-:host([color-scheme="Accent3"]) {
+:host([ui5-avatar][color-scheme="Accent3"]) {
 	background-color: var(--ui5-avatar-accent3);
 	color: var(--ui5-avatar-accent3-color);
+	border-color: var(--ui5-avatar-accent3-border-color);
 }
 
 :host([_color-scheme="Accent4"]),
-:host([color-scheme="Accent4"]) {
+:host([ui5-avatar][color-scheme="Accent4"]) {
 	background-color: var(--ui5-avatar-accent4);
 	color: var(--ui5-avatar-accent4-color);
+	border-color: var(--ui5-avatar-accent4-border-color);
 }
 
 :host([_color-scheme="Accent5"]),
-:host([color-scheme="Accent5"]) {
+:host([ui5-avatar][color-scheme="Accent5"]) {
 	background-color: var(--ui5-avatar-accent5);
 	color: var(--ui5-avatar-accent5-color);
+	border-color: var(--ui5-avatar-accent5-border-color);
 }
 
 :host([_color-scheme="Accent7"]),
-:host([color-scheme="Accent7"]) {
+:host([ui5-avatar][color-scheme="Accent7"]) {
 	background-color: var(--ui5-avatar-accent7);
 	color: var(--ui5-avatar-accent7-color);
+	border-color: var(--ui5-avatar-accent7-border-color);
 }
 
 :host([_color-scheme="Accent8"]),
-:host([color-scheme="Accent8"]) {
+:host([ui5-avatar][color-scheme="Accent8"]) {
 	background-color: var(--ui5-avatar-accent8);
 	color: var(--ui5-avatar-accent8-color);
+	border-color: var(--ui5-avatar-accent8-border-color);
 }
 
 :host([_color-scheme="Accent9"]),
-:host([color-scheme="Accent9"]) {
+:host([ui5-avatar][color-scheme="Accent9"]) {
 	background-color: var(--ui5-avatar-accent9);
 	color: var(--ui5-avatar-accent9-color);
+	border-color: var(--ui5-avatar-accent9-border-color);
 }
 
 :host([_color-scheme="Accent10"]),
-:host([color-scheme="Accent10"]) {
+:host([ui5-avatar][color-scheme="Accent10"]) {
 	background-color: var(--ui5-avatar-accent10);
 	color: var(--ui5-avatar-accent10-color);
+	border-color: var(--ui5-avatar-accent10-border-color);
 }
 
 :host([_color-scheme="Placeholder"]),
-:host([color-scheme="Placeholder"]) {
+:host([ui5-avatar][color-scheme="Placeholder"]) {
 	background-color: var(--ui5-avatar-placeholder);
 	color: var(--ui5-avatar-placeholder-color);
+	border-color: var(--ui5-avatar-placeholder-border-color);
 }
 
 :host([_has-image]) {
+	color: var(--ui5-avatar-accent10-color);
 	background-color: transparent;
 	vertical-align: middle;
 }
 
 .ui5-avatar-initials {
 	color: inherit;
+}
+
+.ui5-avatar-icon ~ .ui5-avatar-initials,
+.ui5-avatar-icon ~ .ui5-avatar-icon-fallback {
+	display: none;
+}
+
+.ui5-avatar-initials:not(.ui5-avatar-initials-hidden) + .ui5-avatar-icon-fallback {
+	display: none;
+}
+
+.ui5-avatar-initials-hidden {
+	position: absolute;
+	visibility: hidden;
+	z-index: 0;
+	pointer-events: none;
+}
+
+/* Slotted Badge */
+::slotted([slot="badge"]) {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	width: 1.125rem;
+	height: 1.125rem;
+	background: var(--sapButton_Emphasized_Background);
+	border: var(--sapButton_Emphasized_Background);
+	border-radius: 1rem;
+	color: var(--sapContent_BadgeTextColor);
+	justify-content: center;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+}
+
+::slotted([ui5-badge][slot="badge"]) {
+	padding: 0.1875rem;
+}
+
+:host([_size="L"]) ::slotted([slot="badge"]),
+:host([size="L"]) ::slotted([slot="badge"]) {
+	width: 1.25rem;
+	height: 1.25rem;
+}
+
+:host([_size="XL"]) ::slotted([slot="badge"]),
+:host([size="XL"]) ::slotted([slot="badge"]) {
+	padding: 0.375rem;
+	width: 1.75rem;
+	height: 1.75rem;
+}
+
+:host([shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.125rem;
+	right: -0.125rem;
+}
+
+:host([_size="L"][shape="Square"]) ::slotted([slot="badge"]),
+:host([size="L"][shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.1875rem;
+	right: -0.1875rem;
+}
+
+:host([_size="XL"][shape="Square"]) ::slotted([slot="badge"]),
+:host([size="XL"][shape="Square"]) ::slotted([slot="badge"]) {
+	bottom: -0.25rem;
+	right: -0.25rem;
 }

package/src/themes/AvatarGroup.css

@@ -1,6 +1,12 @@
 @import "./TapHighlightColor.css";
+
 :host(:not([hidden])) {
 	display: block;
+	width: 100%;
+}
+
+:host {
+	--_ui5_button_focused_border: var(--_ui5_avatar_group_button_focus_border);
 }
 
 .ui5-avatar-group-items:focus {
@@ -10,6 +16,7 @@
 :host([type="Group"]) .ui5-avatar-group-items:focus {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: var(--_ui5_avatar_group_focus_border_radius);
 }
 
 .ui5-avatar-group-root {
@@ -37,12 +44,13 @@
 	border-radius: 50%;
 	display: inline-flex;
 	text-overflow: initial;
+	z-index: 0; /* prevent last visible avatar from covering half of the button */
 }
 
 ::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);
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {