@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/src/themes/Avatar.css

@@ -1,20 +1,43 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	box-sizing: border-box;
+	position: relative;
+	font-family: var(--sapFontFamily);
 }
 
-/*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([interactive]:not([disabled])),
+:host([mode="Interactive"]:not([disabled])) {
+	cursor: pointer;
+}
+
+: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([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([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);
 }
 
-:host([interactive]) {
-	cursor: pointer;
+:host([disabled]) {
+	opacity: var(--sapContent_DisabledOpacity);
+	pointer-events: none;
 }
 
 :host {
@@ -26,23 +49,17 @@
 	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 {
+.ui5-avatar-root {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	outline: none;
+	height: 100%;
+	width: 100%;
 	border-radius: inherit;
 }
 
 /* Sizes */
-
-:host([_size="XS"]),
 :host([size="XS"]) {
 	height: 2rem;
 	width: 2rem;
@@ -51,28 +68,25 @@
 	font-size: var(--_ui5_avatar_fontsize_XS);
 }
 
-:host([_size="S"]),
+:host(:not([size])),
 :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;
@@ -81,148 +95,280 @@
 
 /* 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%;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}
+
+/* Shapes */
+:host([shape="Square"]) {
+	border-radius: var(--ui5-avatar-border-radius);
+}
+
+:host([shape="Square"]) ::slotted(*) {
+	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="Auto"]), /* without [ui5-avatar] to be less specific than _color-scheme selectors */
 :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="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);
 }
 
 :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="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);
 }
 
 :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="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);
 }
 
 :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="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);
 }
 
 :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="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);
 }
 
 :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="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);
 }
 
 :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="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);
 }
 
 :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="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);
 }
 
 :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="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);
 }
 
 :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="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);
 }
 
 :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(--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;
 }
 
-:host([image-fit-type="Contain"]) .ui5-avatar-img {
-	background-size: contain;
+.ui5-avatar-initials {
+	color: inherit;
 }
 
-.ui5-avatar-root {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	outline: none;
+.ui5-avatar-icon ~ .ui5-avatar-initials,
+.ui5-avatar-icon ~ .ui5-avatar-icon-fallback {
+	display: none;
 }
 
-.ui5-avatar-root,
-.ui5-avatar-img {
-	height: 100%;
-	width: 100%;
+.ui5-avatar-fallback-icon-hidden {
+	display: none;
+}
+
+.ui5-avatar-initials-hidden {
+	position: absolute;
+	visibility: hidden;
+	z-index: 0;
+	pointer-events: none;
+}
+
+/* Slotted Badge */
+::slotted([slot="badge"]) {
+	position: absolute;
+	inset-block-end: 0;
+	inset-inline-end: 0;
+	width: 1.125rem;
+	height: 1.125rem;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+
+	--_ui5-avatar-badge-icon-size: 0.75rem;
+}
+
+:host(:not([disabled])) ::slotted([slot="badge"]) {
+	pointer-events: initial;
+}
+
+:host([size="L"]) ::slotted([slot="badge"]) {
+	width: 1.25rem;
+	height: 1.25rem;
+
+	--_ui5-avatar-badge-icon-size: 0.875rem;
+}
+
+:host([size="XL"]) ::slotted([slot="badge"]) {
+	width: 1.75rem;
+	height: 1.75rem;
+
+	--_ui5-avatar-badge-icon-size: 1rem;
+}
+
+/* Slotted Badge - Square Avatar Shape */
+:host([shape="Square"]) ::slotted([slot="badge"]) {
 	border-radius: 50%;
 }
 
-.ui5-avatar-img {
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: cover;
+:host([shape="Square"]) ::slotted([slot="badge"]) {
+	inset-block-end: -0.125rem;
+	inset-inline-end: -0.125rem;
 }
 
-.ui5-avatar-initials {
-	color: inherit;
+:host([size="L"][shape="Square"]) ::slotted([slot="badge"]) {
+	inset-block-end: -0.1875rem;
+	inset-inline-end: -0.1875rem;
 }
 
-::slotted(*) {
-	pointer-events: none;
+:host([size="XL"][shape="Square"]) ::slotted([slot="badge"]) {
+	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

@@ -1,19 +1,24 @@
 @import "./TapHighlightColor.css";
+
 :host(:not([hidden])) {
 	display: block;
+	width: 100%;
 }
 
 .ui5-avatar-group-items:focus {
 	outline: none;
 }
 
-:host([type="Group"]) .ui5-avatar-group-items:focus {
+:host([type="Group"][desktop]) .ui5-avatar-group-items:focus,
+:host([type="Group"]) .ui5-avatar-group-items:focus-visible {
 	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 {
 	display: flex;
+	padding: var(--_ui5_avatar_group_padding);
 }
 
 .ui5-avatar-group-items {
@@ -26,23 +31,64 @@
 	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;
 }
 
+.ui5-avatar-group-overflow-btn {
+	overflow: visible;
+}
+
+.ui5-avatar-group-overflow-btn::part(button) {
+	min-width: auto;
+}
+
 ::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;
 	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);
+::slotted([ui5-button][desktop]:focus),
+.ui5-avatar-group-overflow-btn[desktop]:focus {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_overflow_button_focus_offset);
+}
+
+.ui5-avatar-group-overflow-btn::part(button):focus-visible:after {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: 50%;
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {

package/src/themes/Bar.css

@@ -0,0 +1,91 @@
+:host {
+	background-color: var(--sapPageHeader_Background);
+	height: var(--_ui5_bar_base_height);
+	width: 100%;
+	box-shadow: var(--sapContent_HeaderShadow);
+	display: block;
+}
+
+.ui5-bar-root {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 100%;
+	width: 100%;
+	background-color: inherit;
+	box-shadow: inherit;
+	border-radius: inherit;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.ui5-bar-root .ui5-bar-startcontent-container,
+.ui5-bar-root .ui5-bar-endcontent-container,
+.ui5-bar-root .ui5-bar-midcontent-container {
+	display: flex;
+	align-items: center;
+}
+
+.ui5-bar-root .ui5-bar-startcontent-container {
+	flex: 0 1 auto;
+}
+
+.ui5-bar-root .ui5-bar-endcontent-container {
+	flex: 0 0 auto;
+}
+
+.ui5-bar-root .ui5-bar-midcontent-container {
+	justify-content: center;
+	flex: 1 1 auto;
+	padding: 0 var(--_ui5_bar-mid-container-padding-start-end);
+	min-width: 0;
+	overflow: hidden;
+}
+
+.ui5-bar-root .ui5-bar-startcontent-container {
+	padding-inline-start: var(--_ui5_bar-start-container-padding-start);
+}
+
+.ui5-bar-root .ui5-bar-content-container {
+	min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start)
+							 + var(--_ui5_bar-end-container-padding-end)
+						  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
+}
+
+.ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
+	min-width: 0px;
+	overflow: hidden;
+	height: 100%;
+}
+
+.ui5-bar-root .ui5-bar-endcontent-container {
+	padding-inline-end: var(--_ui5_bar-end-container-padding-end);
+}
+
+:host([design="Footer"]){
+	background-color: var(--sapPageFooter_Background);
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+	box-shadow: none;
+}
+
+:host([design="Subheader"]){
+	height: var(--_ui5_bar_subheader_height);
+	margin-top: var(--_ui5_bar_subheader_margin-top);
+}
+
+:host([design="FloatingFooter"]){
+	border-radius: var(--sapElement_BorderCornerRadius);
+	background-color: var(--sapPageFooter_Background);
+	box-shadow: var(--sapContent_Shadow1);
+	border: none;
+}
+
+::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;
+}