@ui5/webcomponents 1.2.3 → 1.3.1

package/src/i18n/messagebundle_th.properties

@@ -21,6 +21,8 @@ AVATAR_GROUP_MOVE=กดแป้นลูกศรเพื่อย้าย
 
 BADGE_DESCRIPTION=ป้ายชื่อ
 
+BREADCRUMB_ITEM_POS={0} จาก {1}
+
 BREADCRUMBS_ARIA_LABEL=Breadcrumb Trail
 
 BREADCRUMBS_OVERFLOW_ARIA_LABEL=เพิ่มเติม
@@ -73,6 +75,8 @@ FILEUPLOADER_TITLE=อัพโหลดไฟล์
 
 GROUP_HEADER_TEXT=ส่วนหัวของกลุ่ม
 
+SELECT_ROLE_DESCRIPTION=เลือกคอมโบบ็อกซ์
+
 SELECT_OPTIONS=เลือกตัวเลือก
 
 INPUT_SUGGESTIONS=มีคำแนะนำ
@@ -171,6 +175,8 @@ TABCONTAINER_OVERFLOW_MENU_TITLE=เมนูที่มีข้อมูล
 
 TABCONTAINER_END_OVERFLOW=เพิ่มเติม
 
+TABCONTAINER_POPOVER_CANCEL_BUTTON=ยกเลิก
+
 TEXTAREA_CHARACTERS_LEFT=เหลืออีก {0} อักขระ
 
 TEXTAREA_CHARACTERS_EXCEEDED=เกินมา {0} อักขระ

package/src/i18n/messagebundle_tr.properties

@@ -21,6 +21,8 @@ AVATAR_GROUP_MOVE=Taşımak için OK tuşlarına basın.
 
 BADGE_DESCRIPTION=Rozet
 
+BREADCRUMB_ITEM_POS={0}/{1}
+
 BREADCRUMBS_ARIA_LABEL=Dolaşma yolu
 
 BREADCRUMBS_OVERFLOW_ARIA_LABEL=Daha fazla
@@ -73,6 +75,8 @@ FILEUPLOADER_TITLE=Dosyayı yukarı yükle
 
 GROUP_HEADER_TEXT=Grup başlığı
 
+SELECT_ROLE_DESCRIPTION=Birleşik giriş kutusu seç
+
 SELECT_OPTIONS=Seçenekleri seç
 
 INPUT_SUGGESTIONS=Öneriler kullanılabilir
@@ -171,6 +175,8 @@ TABCONTAINER_OVERFLOW_MENU_TITLE=Taşma menüsü
 
 TABCONTAINER_END_OVERFLOW=Daha fazla
 
+TABCONTAINER_POPOVER_CANCEL_BUTTON=İptal et
+
 TEXTAREA_CHARACTERS_LEFT={0} karakter kaldı
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} karakter aşıldı

package/src/i18n/messagebundle_uk.properties

@@ -21,6 +21,8 @@ AVATAR_GROUP_MOVE=Для переміщення натисніть клавіш
 
 BADGE_DESCRIPTION=Бейдж
 
+BREADCRUMB_ITEM_POS={0} з {1}
+
 BREADCRUMBS_ARIA_LABEL=Навігаційна стежка
 
 BREADCRUMBS_OVERFLOW_ARIA_LABEL=Більше
@@ -73,6 +75,8 @@ FILEUPLOADER_TITLE=Вивантажити файл
 
 GROUP_HEADER_TEXT=Заголовок групи
 
+SELECT_ROLE_DESCRIPTION=Вибрати поле зі списком
+
 SELECT_OPTIONS=Вибрати опції
 
 INPUT_SUGGESTIONS=Пропозиції доступні
@@ -171,6 +175,8 @@ TABCONTAINER_OVERFLOW_MENU_TITLE=Меню переповнення
 
 TABCONTAINER_END_OVERFLOW=Більше
 
+TABCONTAINER_POPOVER_CANCEL_BUTTON=Скасувати
+
 TEXTAREA_CHARACTERS_LEFT={0} символів залишилось
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} символів за межею

package/src/i18n/messagebundle_vi.properties

@@ -21,6 +21,8 @@ AVATAR_GROUP_MOVE=Nhấn các phím MŨI TÊN để di chuyển.
 
 BADGE_DESCRIPTION=Biểu tượng
 
+BREADCRUMB_ITEM_POS={0} của {1}
+
 BREADCRUMBS_ARIA_LABEL=Lưu vết trong định hướng
 
 BREADCRUMBS_OVERFLOW_ARIA_LABEL=Thêm
@@ -73,6 +75,8 @@ FILEUPLOADER_TITLE=Tải lên tập tin
 
 GROUP_HEADER_TEXT=Tiêu đề nhóm
 
+SELECT_ROLE_DESCRIPTION=Chọn hộp tổ hợp
+
 SELECT_OPTIONS=Lựa chọn các tùy chọn
 
 INPUT_SUGGESTIONS=Có sẵn đề xuất
@@ -171,6 +175,8 @@ TABCONTAINER_OVERFLOW_MENU_TITLE=Trình đơn tràn
 
 TABCONTAINER_END_OVERFLOW=Thêm
 
+TABCONTAINER_POPOVER_CANCEL_BUTTON=Hủy
+
 TEXTAREA_CHARACTERS_LEFT=còn lại {0} ký tự
 
 TEXTAREA_CHARACTERS_EXCEEDED={0} ký tự quá giới hạn

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=更多
@@ -73,6 +75,8 @@ FILEUPLOADER_TITLE=上载文件
 
 GROUP_HEADER_TEXT=组抬头
 
+SELECT_ROLE_DESCRIPTION=选择组合框
+
 SELECT_OPTIONS=选择选项
 
 INPUT_SUGGESTIONS=有可用建议
@@ -171,6 +175,8 @@ TABCONTAINER_OVERFLOW_MENU_TITLE=溢出菜单
 
 TABCONTAINER_END_OVERFLOW=更多
 
+TABCONTAINER_POPOVER_CANCEL_BUTTON=取消
+
 TEXTAREA_CHARACTERS_LEFT=剩余 {0} 个字符
 
 TEXTAREA_CHARACTERS_EXCEEDED=超过限制 {0} 个字符

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=更多
@@ -73,6 +75,8 @@ FILEUPLOADER_TITLE=上傳檔案
 
 GROUP_HEADER_TEXT=群組表頭
 
+SELECT_ROLE_DESCRIPTION=選擇下拉式清單方塊
+
 SELECT_OPTIONS=選擇選項
 
 INPUT_SUGGESTIONS=可用建議
@@ -171,6 +175,8 @@ TABCONTAINER_OVERFLOW_MENU_TITLE=溢位功能表
 
 TABCONTAINER_END_OVERFLOW=更多
 
+TABCONTAINER_POPOVER_CANCEL_BUTTON=取消
+
 TEXTAREA_CHARACTERS_LEFT=剩下 {0} 個字元
 
 TEXTAREA_CHARACTERS_EXCEEDED=超過 {0} 個字元

package/src/themes/Avatar.css

@@ -26,18 +26,13 @@
 	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;
+.ui5-avatar-root {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	outline: none;
+	height: 100%;
+	width: 100%;
 }
 
 /* Sizes */
@@ -81,45 +76,52 @@
 
 /* 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(*) {
 	border-radius: 50%;
     width: 100%;
     height: 100%;
+	pointer-events: none;
+}
+
+/* Shapes */
+:host([shape="Square"]),
+:host([shape="Square"]) ::slotted(*) {
+	border-radius: var(--ui5-avatar-border-radius);
 }
 
 :host(:not([color-scheme])),
@@ -128,66 +130,77 @@
 :host([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"]) {
 	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"]) {
 	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"]) {
 	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"]) {
 	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"]) {
 	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"]) {
 	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"]) {
 	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"]) {
 	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"]) {
 	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"]) {
 	background-color: var(--ui5-avatar-placeholder);
 	color: var(--ui5-avatar-placeholder-color);
+	border-color: var(--ui5-avatar-placeholder-border-color);
 }
 
 :host([_has-image]) {
@@ -195,34 +208,6 @@
 	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/Badge.css

@@ -67,13 +67,7 @@
 }
 
 :host([_has-icon]) .ui5-badge-text {
-	padding-left: 0.125em;
-}
-
-/* RTL */
-:host([_has-icon]) .ui5-badge-root[dir="rtl"] .ui5-badge-text {
-	padding-left: 0;
-	padding-right: 0.125em;
+	padding-inline-start: 0.125rem;
 }
 
 /* Scheme 1 */

package/src/themes/BreadcrumbsPopover.css

@@ -1,3 +1,7 @@
+.ui5-breadcrumbs-popover::part(content) {
+    padding: 0;
+}
+
 .ui5-breadcrumbs-popover-footer {
     display: flex;
     justify-content: flex-end;

package/src/themes/Button.css

@@ -12,10 +12,9 @@
 	font-size: var(--sapFontSize);
 	text-shadow: var(--_ui5_button_text_shadow);
 	border-radius: var(--_ui5_button_border_radius);
-	border-width: 0.0625rem;
 	cursor: pointer;
 	background-color: var(--sapButton_Background);
-	border: 1px solid var(--sapButton_BorderColor);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 	color: var(--sapButton_TextColor);
 	box-sizing: border-box;
 	white-space: nowrap;
@@ -23,20 +22,6 @@
 	text-overflow: ellipsis;
 }
 
-:host([disabled]) {
-	pointer-events: none;
-}
-
-:host([has-icon]) button[dir="rtl"].ui5-button-root .ui5-button-text {
-	margin-right: var(--_ui5_button_base_icon_margin);
-	margin-left: 0;
-}
-
-:host([has-icon][icon-end]) button[dir="rtl"].ui5-button-root .ui5-button-icon {
-	margin-right: var(--_ui5_button_base_icon_margin);
-	margin-left: 0;
-}
-
 .ui5-button-root {
 	min-width: inherit;
 	cursor: inherit;
@@ -70,6 +55,8 @@
 :host(:not([hidden]).ui5_hovered) {
 	background: var(--sapButton_Hover_Background);
 	box-shadow: var(--sapContent_Interaction_Shadow);
+	border: 1px solid var(--sapButton_Hover_BorderColor);
+	color: var(--sapButton_Hover_TextColor);
 }
 
 .ui5-button-icon {
@@ -82,7 +69,7 @@
 }
 
 :host([icon-end]) .ui5-button-icon {
-	margin-left: var(--_ui5_button_base_icon_margin);
+	margin-inline-start: var(--_ui5_button_base_icon_margin);
 }
 
 :host([icon-only]) .ui5-button-root {
@@ -103,25 +90,46 @@
 }
 
 :host([has-icon]:not([icon-end])) .ui5-button-text {
-	margin-left: var(--_ui5_button_base_icon_margin);
+	margin-inline-start: var(--_ui5_button_base_icon_margin);
 }
 
 :host([has-icon][icon-end]) .ui5-button-text {
-	margin-left: 0;
+	margin-inline-start: 0;
 }
 
 :host([disabled]) {
-	opacity: 0.5;
+	opacity: var(--sapContent_DisabledOpacity);
 	pointer-events: none;
 }
 
-:host([focused]) {
-	outline: var(--_ui5_button_outline);
-	outline-offset: var(--_ui5_button_outline_offset);
+:host([focused]) .ui5-button-root:after {
+	content: "";
+	position: absolute;
+	box-sizing: border-box;
+	left: 0.0625rem;
+	top: 0.0625rem;
+	right: 0.0625rem;
+	bottom: 0.0625rem;
+	border: var(--_ui5_button_focused_border);
+	pointer-events: none;
+	border-radius: var(--_ui5_button_focused_border_radius);
 }
 
-:host([design="Emphasized"][focused]) {
-	outline: var(--_ui5_button_emphasized_outline);
+:host([design="Emphasized"][focused]) .ui5-button-root:after {
+	border-color: var(--_ui5_button_emphasized_focused_border_color);
+}
+
+:host([design="Emphasized"][focused]) .ui5-button-root:before {
+	content: "";
+	position: absolute;
+	box-sizing: border-box;
+	left: 0.0625rem;
+	top: 0.0625rem;
+	right: 0.0625rem;
+	bottom: 0.0625rem;
+	border: var(--_ui5_button_emphasized_focused_border_before);
+	pointer-events: none;
+	border-radius: var(--_ui5_button_focused_border_radius);
 }
 
 .ui5-button-root::-moz-focus-inner {
@@ -140,18 +148,12 @@ bdi {
 	background-color: var(--sapButton_Active_Background);
 	border-color: var(--sapButton_Active_BorderColor);
 	color: var(--sapButton_Active_TextColor);
-	text-shadow: none;
-}
-
-:host([ui5-button]:not([design="Emphasized"])[active]:not([_is-touch])) {
-	outline-color: var(--_ui5_button_focus_outline_focus_color);
 }
 
 :host([design="Positive"]) {
 	background-color: var(--sapButton_Accept_Background);
 	border-color: var(--sapButton_Accept_BorderColor);
 	color: var(--sapButton_Accept_TextColor);
-	text-shadow: var(--_ui5_button_text_shadow);
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
@@ -160,29 +162,19 @@ bdi {
 	background-color: var(--sapButton_Accept_Hover_Background);
 	border-color: var(--sapButton_Accept_Hover_BorderColor);
 	box-shadow: var(--sapContent_Positive_Shadow);
+	color: var(--sapButton_Accept_Hover_TextColor);
 }
 
 :host([ui5-button][design="Positive"][active]:not([non-interactive])) {
 	background-color: var(--sapButton_Accept_Active_Background);
 	border-color: var(--sapButton_Accept_Active_BorderColor);
 	color: var(--sapButton_Accept_Active_TextColor);
-	text-shadow: none;
-}
-
-:host([design="Positive"][focused]:not([_is-touch])) {
-	outline-color: var(--_ui5_button_positive_border_focus_hover_color);
-	border-color: var(--_ui5_button_positive_focus_border_color);
-}
-
-:host([design="Positive"][active][focused]) {
-	outline-color: var(--_ui5_button_focus_outline_focus_color);
 }
 
 :host([design="Negative"]) {
 	background-color: var(--sapButton_Reject_Background);
 	border-color: var(--sapButton_Reject_BorderColor);
 	color: var(--sapButton_Reject_TextColor);
-	text-shadow: var(--_ui5_button_text_shadow);
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
@@ -191,29 +183,19 @@ bdi {
 	background-color: var(--sapButton_Reject_Hover_Background);
 	border-color: var(--sapButton_Reject_Hover_BorderColor);
 	box-shadow: var(--sapContent_Negative_Shadow);
-}
-
-:host([design="Negative"][focused]) {
-	border-color: var(--_ui5_button_negative_focus_border_color);
-	outline-color: var(--_ui5_button_positive_border_focus_hover_color);
+	color: var(--sapButton_Reject_Hover_TextColor);
 }
 
 :host([ui5-button][design="Negative"][active]:not([non-interactive])) {
 	background-color: var(--sapButton_Reject_Active_Background);
 	border-color: var(--sapButton_Reject_Active_BorderColor);
 	color: var(--sapButton_Reject_Active_TextColor);
-	text-shadow: none;
-}
-
-:host([design="Negative"][active][focused]) {
-	outline-color: var(--_ui5_button_focus_outline_focus_color);
 }
 
 :host([design="Attention"]) {
 	background-color: var(--sapButton_Attention_Background);
 	border-color: var(--sapButton_Attention_BorderColor);
 	color: var(--sapButton_Attention_TextColor);
-	text-shadow: var(--_ui5_button_text_shadow);
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
@@ -229,23 +211,13 @@ bdi {
 	background-color: var(--sapButton_Attention_Active_Background);
 	border-color: var(--sapButton_Attention_Active_BorderColor);
 	color: var(--sapButton_Attention_Active_TextColor);
-	text-shadow: none;
-}
-
-:host([design="Attention"][focused]:not([_is-touch])) {
-	outline-color: var(--_ui5_button_positive_border_focus_hover_color);
-	border-color: var(--_ui5_button_attention_focus_border_color);
-}
-
-:host([design="Attention"][active][focused]) {
-	outline-color: var(--_ui5_button_focus_outline_focus_color);
 }
 
 :host([design="Emphasized"]) {
 	background-color: var(--sapButton_Emphasized_Background);
 	border-color: var(--sapButton_Emphasized_BorderColor);
+	border-width: var(--_ui5_button_emphasized_border_width);
 	color: var(--sapButton_Emphasized_TextColor);
-	text-shadow: 0 0 0.125rem var(--sapButton_Emphasized_TextShadow);
 	font-weight: var(--_ui5_button_emphasized_font_weight);
 }
 
@@ -254,53 +226,56 @@ bdi {
 :host([design="Emphasized"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
 	background-color: var(--sapButton_Emphasized_Hover_Background);
 	border-color: var(--sapButton_Emphasized_Hover_BorderColor);
-	box-shadow: var(--sapContent_Informative_Shadow);
+	border-width: var(--_ui5_button_emphasized_border_width);
+	color: var(--sapButton_Emphasized_Hover_TextColor);
+	box-shadow: none;
 }
 
 :host([ui5-button][design="Empasized"][active]:not([non-interactive])) {
 	background-color: var(--sapButton_Emphasized_Active_Background);
 	border-color: var(--sapButton_Emphasized_Active_BorderColor);
 	color: var(--sapButton_Emphasized_Active_TextColor);
-	text-shadow: none;
 }
 
 :host([design="Emphasized"][focused]) .ui5-button-root:after {
-	content: "";
-	position: absolute;
-	box-sizing: border-box;
-	left: 0.0625rem;
-	top: 0.0625rem;
-	right: 0.0625rem;
-	bottom: 0.0625rem;
-	border: var(--_ui5_button_emphasized_focused_border);
-	pointer-events: none;
-	border-radius: var(--_ui5_button_emphasized_focused_border_radius);
+	border-color: var(--sapContent_ContrastFocusColor);
+	outline: none;
 }
 
 :host([design="Transparent"]) {
 	background-color: var(--sapButton_Lite_Background);
 	color: var(--sapButton_Lite_TextColor);
-	text-shadow: var(--_ui5_button_text_shadow);
 	border-color: var(--sapButton_Lite_BorderColor);
 }
 
-:host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
-	background-color: var(--_ui5_button_transparent_hover);
-}
-
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
+:host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):hover),
 :host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
-	background-color: var(--_ui5_button_transparent_hover);
+	background-color: var(--sapButton_Lite_Hover_Background);
 	border-color: var(--sapButton_Lite_Hover_BorderColor);
-	box-shadow: var(--sapContent_Critical_Shadow)
+	box-shadow: var(--sapContent_Interaction_Shadow);
+	color: var(--sapButton_Lite_Hover_TextColor);
 }
 
 :host([ui5-button][design="Transparent"][active]:not([non-interactive])) {
-	background-color: var(--sapButton_Active_Background);
+	background-color: var(--sapButton_Lite_Active_Background);
+	border-color: var(--sapButton_Lite_Active_BorderColor);
 	color: var(--sapButton_Active_TextColor);
-	text-shadow: none;
 }
 
-:host([design="Transparent"]:not([active]):not([_is-touch]):hover) {
-	border-color: var(--sapButton_Lite_Hover_BorderColor);
+/* SegmentedButton and ToggleButton */
+:host([ui5-segmented-button-item][active][focused]) .ui5-button-root:after,
+:host([pressed][focused]) .ui5-button-root:after {
+	border-color: var(--_ui5_button_pressed_focused_border_color);
+	outline: none;
+}
+
+:host([ui5-segmented-button-item][focused]:not(:last-child)) .ui5-button-root:after {
+	border-top-right-radius: var(--_ui5_button_focused_inner_border_radius);
+	border-bottom-right-radius: var(--_ui5_button_focused_inner_border_radius);
+}
+
+:host([ui5-segmented-button-item][focused]:not(:first-child)) .ui5-button-root:after {
+	border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
+	border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
 }

package/src/themes/CalendarHeader.css

@@ -87,7 +87,7 @@
 }
 
 .ui5-calheader-midcontainer .ui5-calheader-middlebtn:first-child {
-	margin-right: 0.5rem;
+	margin-inline-end: 0.5rem;
 }
 
 .ui5-calheader-middlebtn {
@@ -129,9 +129,4 @@
 
 .ui5-calheader-middlebtn:focus:active::after {
 	border-color: var(--sapContent_ContrastFocusColor);
-}
-
-[dir=rtl] .ui5-calheader-root-midcontainer .ui5-calheader-middlebtn:first-child {
-	margin-left: 0.5rem;
-	margin-right: 0;
-}
+}