@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/src/themes/Avatar.css

@@ -2,7 +2,7 @@
 	display: inline-block;
 	box-sizing: border-box;
 	position: relative;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 }
 
 /* The ui5_hovered class is set by FileUploader to indicate hover state of the control */
@@ -10,22 +10,27 @@
 	opacity: .7;
 }
 
-:host([interactive]:not([disabled])) {
+:host([interactive]:not([disabled])),
+:host([mode="Interactive"]:not([disabled])) {
 	cursor: pointer;
 }
 
-:host([interactive]:not([hidden]):active) {
+:host([interactive]:not([hidden]):active),
+:host([mode="Interactive"]:not([hidden]):active) {
 	background-color: var(--sapButton_Active_Background);
 	border-color: var(--sapButton_Active_BorderColor);
 	color: var(--sapButton_Active_TextColor);
 }
 
-:host([interactive]:not([hidden]):not([disabled]):not(:active):not([focused]):hover) {
+:host([interactive]:not([hidden]):not([disabled]):not(:active):not([focused]):hover),
+:host([mode="Interactive"]:not([hidden]):not([disabled]):not(:active):not([focused]):hover) {
 	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
 }
 
 :host([interactive][desktop]:not([hidden])) .ui5-avatar-root:focus,
-:host([interactive]:not([hidden])) .ui5-avatar-root:focus-visible {
+:host([interactive]:not([hidden])) .ui5-avatar-root:focus-visible,
+:host([mode="Interactive"][desktop]:not([hidden])) .ui5-avatar-root:focus,
+:host([mode="Interactive"]:not([hidden])) .ui5-avatar-root:focus-visible {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
 }
@@ -55,7 +60,6 @@
 }
 
 /* Sizes */
-:host([_size="XS"]),
 :host([size="XS"]) {
 	height: 2rem;
 	width: 2rem;
@@ -65,28 +69,24 @@
 }
 
 :host(:not([size])),
-: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;
@@ -100,31 +100,26 @@
 	color: inherit;
 }
 
-:host([_size="XS"]) .ui5-avatar-icon,
 :host([size="XS"]) .ui5-avatar-icon {
 	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: var(--_ui5_avatar_icon_S);
 	width: var(--_ui5_avatar_icon_S);
 }
 
-:host([_size="M"]) .ui5-avatar-icon,
 :host([size="M"]) .ui5-avatar-icon {
 	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: var(--_ui5_avatar_icon_L);
 	width: var(--_ui5_avatar_icon_L);
 }
 
-:host([_size="XL"]) .ui5-avatar-icon,
 :host([size="XL"]) .ui5-avatar-icon {
 	height: var(--_ui5_avatar_icon_XL);
 	width: var(--_ui5_avatar_icon_XL);
@@ -156,7 +151,9 @@
 	border-color: var(--ui5-avatar-accent6-border-color);
 }
 :host([_color-scheme="Accent6"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
-:host([ui5-avatar][color-scheme="Accent6"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([ui5-avatar][color-scheme="Accent6"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([_color-scheme="Accent6"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent6"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover) {
 	background-color: var(--sapAvatar_6_Hover_Background);
 }
 
@@ -168,7 +165,9 @@
 }
 
 :host([_color-scheme="Accent1"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
-:host([ui5-avatar][color-scheme="Accent1"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([ui5-avatar][color-scheme="Accent1"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([_color-scheme="Accent1"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent1"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover) {
 	background-color: var(--sapAvatar_1_Hover_Background);
 }
 
@@ -180,7 +179,9 @@
 }
 
 :host([_color-scheme="Accent2"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
-:host([ui5-avatar][color-scheme="Accent2"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([ui5-avatar][color-scheme="Accent2"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([_color-scheme="Accent2"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent2"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover) {
 	background-color: var(--sapAvatar_2_Hover_Background);
 }
 
@@ -192,7 +193,9 @@
 }
 
 :host([_color-scheme="Accent3"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
-:host([ui5-avatar][color-scheme="Accent3"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([ui5-avatar][color-scheme="Accent3"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([_color-scheme="Accent3"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent3"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover) {
 	background-color: var(--sapAvatar_3_Hover_Background);
 }
 
@@ -204,7 +207,9 @@
 }
 
 :host([_color-scheme="Accent4"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
-:host([ui5-avatar][color-scheme="Accent4"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([ui5-avatar][color-scheme="Accent4"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([_color-scheme="Accent4"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent4"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover) {
 	background-color: var(--sapAvatar_4_Hover_Background);
 }
 
@@ -216,7 +221,9 @@
 }
 
 :host([_color-scheme="Accent5"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
-:host([ui5-avatar][color-scheme="Accent5"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([ui5-avatar][color-scheme="Accent5"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([_color-scheme="Accent5"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent5"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover) {
 	background-color: var(--sapAvatar_5_Hover_Background);
 }
 
@@ -228,7 +235,9 @@
 }
 
 :host([_color-scheme="Accent7"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
-:host([ui5-avatar][color-scheme="Accent7"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([ui5-avatar][color-scheme="Accent7"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([_color-scheme="Accent7"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent7"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover) {
 	background-color: var(--sapAvatar_7_Hover_Background);
 }
 
@@ -240,7 +249,9 @@
 }
 
 :host([_color-scheme="Accent8"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
-:host([ui5-avatar][color-scheme="Accent8"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([ui5-avatar][color-scheme="Accent8"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([_color-scheme="Accent8"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent8"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover) {
 	background-color: var(--sapAvatar_8_Hover_Background);
 }
 
@@ -252,7 +263,9 @@
 }
 
 :host([_color-scheme="Accent9"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
-:host([ui5-avatar][color-scheme="Accent9"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([ui5-avatar][color-scheme="Accent9"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([_color-scheme="Accent9"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent9"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover) {
 	background-color: var(--sapAvatar_9_Hover_Background);
 }
 
@@ -264,7 +277,9 @@
 }
 
 :host([_color-scheme="Accent10"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
-:host([ui5-avatar][color-scheme="Accent10"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([ui5-avatar][color-scheme="Accent10"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([_color-scheme="Accent10"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent10"][mode="Interactive"]:not([hidden]):not([disabled]):not(:active):hover) {
 	background-color: var(--sapAvatar_10_Hover_Background);
 }
 
@@ -275,10 +290,16 @@
 	border-color: var(--sapAvatar_Lite_BorderColor);
 }
 
+:host([_color-scheme="Transparent"]),
+:host([ui5-avatar][color-scheme="Transparent"]) {
+	background-color: transparent;
+	border-color: transparent;
+}
+
 :host([_has-image]) {
 	color: var(--ui5-avatar-accent10-color);
+	border: var(--ui5-avatar-optional-border);
 	background-color: transparent;
-	vertical-align: middle;
 }
 
 .ui5-avatar-initials {
@@ -304,53 +325,50 @@
 /* Slotted Badge */
 ::slotted([slot="badge"]) {
 	position: absolute;
-	bottom: 0;
-	right: 0;
+	inset-block-end: 0;
+	inset-inline-end: 0;
 	width: 1.125rem;
 	height: 1.125rem;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
-	color: var(--sapBackgroundColor);
 
-	--_ui5-tag-height: 1.125rem;
+	--_ui5-avatar-badge-icon-size: 0.75rem;
 }
 
 :host(:not([disabled])) ::slotted([slot="badge"]) {
 	pointer-events: initial;
 }
 
-:host([_size="L"]) ::slotted([slot="badge"]),
 :host([size="L"]) ::slotted([slot="badge"]) {
 	width: 1.25rem;
 	height: 1.25rem;
 
-	--_ui5-tag-height: 1.25rem;
-	--_ui5-tag-icon-width: 0.875rem;
+	--_ui5-avatar-badge-icon-size: 0.875rem;
 }
 
-:host([_size="XL"]) ::slotted([slot="badge"]),
 :host([size="XL"]) ::slotted([slot="badge"]) {
 	width: 1.75rem;
 	height: 1.75rem;
 
-	--_ui5-tag-height: 1.75rem;
-	--_ui5-tag-icon-width: 1rem;
+	--_ui5-avatar-badge-icon-size: 1rem;
 }
 
 /* Slotted Badge - Square Avatar Shape */
 :host([shape="Square"]) ::slotted([slot="badge"]) {
-	bottom: -0.125rem;
-	right: -0.125rem;
+	border-radius: 50%;
+}
+
+:host([shape="Square"]) ::slotted([slot="badge"]) {
+	inset-block-end: -0.125rem;
+	inset-inline-end: -0.125rem;
 }
 
-:host([_size="L"][shape="Square"]) ::slotted([slot="badge"]),
 :host([size="L"][shape="Square"]) ::slotted([slot="badge"]) {
-	bottom: -0.1875rem;
-	right: -0.1875rem;
+	inset-block-end: -0.1875rem;
+	inset-inline-end: -0.1875rem;
 }
 
-:host([_size="XL"][shape="Square"]) ::slotted([slot="badge"]),
 :host([size="XL"][shape="Square"]) ::slotted([slot="badge"]) {
-	bottom: -0.25rem;
-	right: -0.25rem;
+	inset-block-end: -0.25rem;
+	inset-inline-end: -0.25rem;
 }

package/src/themes/AvatarBadge.css

@@ -0,0 +1,45 @@
+:host {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	outline: none;
+	border: 0.0625rem solid;
+	background: var(--sapButton_Emphasized_Background);
+	border-color: var(--sapButton_Emphasized_BorderColor);
+	color: var(--sapButton_Emphasized_TextColor);
+}
+
+:host([invalid]) {
+	display: none;
+}
+
+:host([state="Positive"]) {
+	background: var(--sapSuccessBackground);
+	border-color: var(--sapSuccessBorderColor);
+	color: var(--sapPositiveTextColor);
+}
+
+:host([state="Critical"]) {
+	background: var(--sapWarningBackground);
+	border-color: var(--sapWarningBorderColor);
+	color: var(--sapCriticalTextColor);
+}
+
+:host([state="Negative"]) {
+	background: var(--sapErrorBackground);
+	border-color: var(--sapErrorBorderColor);
+	color: var(--sapNegativeTextColor);
+}
+
+:host([state="Information"]) {
+	background: var(--sapInformationBackground);
+	border-color: var(--sapInformationBorderColor);
+	color: var(--sapInformativeTextColor);
+}
+
+.ui5-avatar-badge-icon {
+	width: var(--_ui5-avatar-badge-icon-size);
+	height: var(--_ui5-avatar-badge-icon-size);
+	color: inherit;
+}

package/src/themes/AvatarGroup.css

@@ -5,10 +5,6 @@
 	width: 100%;
 }
 
-:host {
-	--_ui5_button_focused_border: var(--_ui5_avatar_group_button_focus_border);
-}
-
 .ui5-avatar-group-items:focus {
 	outline: none;
 }
@@ -22,6 +18,7 @@
 
 .ui5-avatar-group-root {
 	display: flex;
+	padding: var(--_ui5_avatar_group_padding);
 }
 
 .ui5-avatar-group-items {
@@ -34,8 +31,33 @@
 	cursor: pointer;
 }
 
+/* In Group mode: apply hover/active states to ALL avatars when container is hovered/active */
+:host([type="Group"]) .ui5-avatar-group-items:not(:active):hover ::slotted([ui5-avatar]:not([disabled])) {
+	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
+}
+
+:host([type="Group"]) .ui5-avatar-group-items:active ::slotted([ui5-avatar]) {
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
+	color: var(--sapButton_Active_TextColor);
+}
+
+/* Overflow button hover/active states in Group mode */
+:host([type="Group"]) .ui5-avatar-group-items:not(:active):hover .ui5-avatar-group-overflow-btn {
+	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
+	background-color: var(--sapButton_Lite_Hover_Background);
+}
+
+:host([type="Group"]) .ui5-avatar-group-items:active .ui5-avatar-group-overflow-btn {
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
+	color: var(--sapButton_Active_TextColor);
+}
+
+/* Prevent individual avatars and buttons from intercepting clicks/focus in Group mode */
 :host([type="Group"]) ::slotted([ui5-button]),
-:host([type="Group"]) ::slotted([ui5-avatar]) {
+:host([type="Group"]) ::slotted([ui5-avatar]),
+:host([type="Group"]) .ui5-avatar-group-overflow-btn {
 	pointer-events: none;
 }
 
@@ -49,6 +71,7 @@
 
 ::slotted([ui5-button]:not([hidden])),
 .ui5-avatar-group-overflow-btn:not([hidden]) {
+	--_ui5_button_focused_border: var(--_ui5_avatar_group_button_focus_border);
 	--_ui5_button_base_padding: 0;
 	border-radius: 50%;
 	display: inline-flex;

package/src/themes/Bar.css

@@ -26,7 +26,10 @@
 	align-items: center;
 }
 
-.ui5-bar-root .ui5-bar-startcontent-container,
+.ui5-bar-root .ui5-bar-startcontent-container {
+	flex: 0 1 auto;
+}
+
 .ui5-bar-root .ui5-bar-endcontent-container {
 	flex: 0 0 auto;
 }
@@ -77,6 +80,12 @@
 	border: none;
 }
 
-::slotted(*) {
+::slotted(*:not([hidden])) {
 	margin: 0 0.25rem;
+	display: inline-block;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
 }

package/src/themes/Breadcrumbs.css

@@ -23,13 +23,17 @@
 }
 
 .ui5-breadcrumbs-current-location {
-    min-width: 1%;
     flex: 1 1 auto;
     /* Fix extra height in ul -> li element */
     font-size: 0;
     align-self: center;
 }
 
+.ui5-breadcrumbs-current-location,
+.ui5-breadcrumbs-link-wrapper:last-child {
+	min-width: 1%;
+}
+
 .ui5-breadcrumbs-current-location > span:focus {
     outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
     border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
@@ -94,7 +98,7 @@
 	cursor: auto;
 	color: var(--sapContent_LabelColor);
 	display: inline-block;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 }
 

package/src/themes/BusyIndicator.css

@@ -76,13 +76,16 @@
 	border-radius: inherit;
 }
 
-.ui5-busy-indicator-busy-area {
+.ui5-busy-indicator-busy-area.ui5-busy-indicator-busy-area-over-content {
 	position: absolute;
-	z-index: 99;
 	left: 0;
 	right: 0;
 	top: 0;
 	bottom: 0;
+	z-index: 99;
+}
+
+.ui5-busy-indicator-busy-area {
 	display: flex;
 	justify-content: center;
 	align-items: center;

package/src/themes/Button.css

@@ -108,7 +108,7 @@
 	pointer-events: none;
 }
 
-:host([desktop]:not([active])) .ui5-button-root:focus-within:after,
+:host([desktop]:not([loading])) .ui5-button-root:focus-within:after,
 :host(:not([active])) .ui5-button-root:focus-visible:after,
 :host([desktop][active][design="Emphasized"]) .ui5-button-root:focus-within:after,
 :host([active][design="Emphasized"]) .ui5-button-root:focus-visible:after,
@@ -117,6 +117,7 @@
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
+	pointer-events: none;
 	left: 0.0625rem;
 	top: 0.0625rem;
 	right: 0.0625rem;
@@ -306,7 +307,7 @@ bdi {
 /* Button with badge */
 ::slotted([slot="badge"][design="InlineText"]) {
 	pointer-events: initial;
-	font-family: "72override", var(--sapButton_FontFamily);
+	font-family: var(--sapButton_FontFamily);
 	font-size: var(--sapFontSmallSize);
 	padding-inline-start: 0.25rem;
 	--_ui5-tag-height: 0.625rem;
@@ -318,8 +319,8 @@ bdi {
 	top: 0;
 	inset-inline-end: 0;
 	margin: -0.5rem;
-	z-index: 1000;
-	font-family: "72override", var(--sapButton_FontFamily);
+	z-index: 1;
+	font-family: var(--sapButton_FontFamily);
 	font-size: var(--sapFontSmallSize);
 	--_ui5-tag-height: 0.625rem;
 }
@@ -331,10 +332,60 @@ bdi {
 	top: 0;
 	inset-inline-end: 0;
 	margin: -0.25rem;
-	z-index: 1000;
+	z-index: 1;
 }
 
 :host(:state(has-overlay-badge)) {
 	overflow: visible;
 	margin-inline-end: 0.3125rem;
-}
+}
+
+:host([loading]){
+	position: relative;
+	pointer-events: unset;
+}
+
+:host([loading]) .ui5-button-root {
+	opacity: var(--sapContent_DisabledOpacity);
+}
+
+:host([loading][design="Emphasized"]) {
+	background-color: inherit;
+	border: inherit;
+}
+
+:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
+	background-color: inherit;
+	border: inherit;
+}
+
+:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover) .ui5-button-root,
+:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) .ui5-button-root {
+	background-color: var(--sapButton_Emphasized_Hover_Background);
+}
+
+:host([loading][design="Emphasized"]) .ui5-button-root {
+	background-color: var(--sapButton_Emphasized_Background);
+	border-color: var(--sapButton_Emphasized_BorderColor);
+}
+
+.ui5-button-busy-indicator {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top:0;
+}
+
+:host([has-end-icon]:not([icon])) .ui5-button-root {
+	justify-content: flex-start;
+}
+
+:host([icon-only]) .ui5-button-root {
+	justify-content: center;
+}
+
+:host([has-end-icon]:not([icon]):not(:empty)) .ui5-button-end-icon {
+	padding-inline-start: var(--_ui5_button_base_icon_margin);
+	margin-inline-start: auto;
+}

package/src/themes/ButtonBadge.css

@@ -6,6 +6,8 @@
 	color: var(--sapContent_BadgeTextColor);
 	height: 1rem;
 	border-radius: 0.5rem;
+	display: flex;
+	align-items: center;
 }
 
 :host([design="AttentionDot"]) [ui5-tag]::part(root) {

package/src/themes/Calendar.css

@@ -15,8 +15,7 @@
     width: var(--_ui5_calendar_width);
     padding: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
     display: flex;
-    flex-direction: column-reverse;
-    justify-content: flex-end;
+    flex-direction: column;
     overflow: hidden;
 }
 

package/src/themes/CalendarHeader.css

@@ -24,6 +24,8 @@
 	padding: 0;
 	font-size: var(--sapFontSize);
 	user-select: none;
+	position: relative;
+	box-sizing: border-box;
 }
 
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:hover,
@@ -41,10 +43,6 @@
 	display: none;
 }
 
-.ui5-calheader-arrowbtn:focus {
-	outline: none;
-}
-
 .ui5-calheader-arrowbtn:hover {
 	background-color: var(--sapButton_Hover_Background);
 	color: var(--sapButton_Lite_TextColor);
@@ -103,7 +101,7 @@
 	user-select: none;
 }
 
-.ui5-calheader-middlebtn:focus {
+.ui5-calheader-middlebtn:focus, .ui5-calheader-arrowbtn:focus {
 	border: var(--_ui5_calendar_header_middle_button_focus_border);
 	border-radius: var(--_ui5_calendar_header_middle_button_focus_border_radius);
 	outline: var(--_ui5_calendar_header_middle_button_focus_outline);
@@ -111,13 +109,13 @@
 	background: var(--_ui5_calendar_header_middle_button_focus_background);
 }
 
-.ui5-calheader-middlebtn:focus:active {
+.ui5-calheader-middlebtn:focus:active, .ui5-calheader-arrowbtn:focus:active {
 	outline: var(--_ui5_calendar_header_middle_button_focus_active_outline);
 	outline-offset: -0.0625rem;
 	background: var(--_ui5_calendar_header_middle_button_focus_active_background)
 }
 
-.ui5-calheader-middlebtn:focus::after {
+.ui5-calheader-middlebtn:focus::after, .ui5-calheader-arrowbtn:focus::after {
 	content: "";
 	display: var(--_ui5_calendar_header_middle_button_focus_after_display);
 	width: var(--_ui5_calendar_header_middle_button_focus_after_width);
@@ -128,16 +126,6 @@
 	left: var(--_ui5_calendar_header_middle_button_focus_after_left_offset);
 }
 
-.ui5-calheader-middlebtn:focus:active::after {
+.ui5-calheader-middlebtn:focus:active::after, .ui5-calheader-arrowbtn:focus:active::after {
 	border-color: var(--sapContent_ContrastFocusColor);
 }
-
-/* Todo: Remove with introduction of YearRangePicker */
-.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled {
-	pointer-events: none;
-}
-
-/* Todo: Remove with introduction of YearRangePicker */
-.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:active .ui5-calheader-btn-sectext {
-	color: var(--sapNeutralElementColor);
-}

package/src/themes/Card.css

@@ -14,7 +14,7 @@
 	border-radius: var(--_ui5_card_border-radius);
 	border: var(--_ui5_card_border);
 	overflow: hidden;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	box-sizing: border-box;
 }