@ui5/webcomponents 0.0.0-cb061e041 → 0.0.0-cddf8ba1c

package/src/themes/SplitButton.css

@@ -6,26 +6,73 @@
 	height: 100%;
 	border-radius: var(--_ui5_button_border_radius);
 	background-color: var(--sapButton_Background);
+	box-shadow: var(--_ui5_split_button_host_default_box_shadow);
+}
+
+:host([active-arrow-button][design="Negative"]) .ui5-split-arrow-button,
+:host([design="Negative"]) .ui5-split-arrow-button[active] {
+	background-color: var(--sapButton_Reject_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Reject_Active_BorderColor);
+	color: var(--sapButton_Reject_Active_TextColor);
+}
+
+:host([active-arrow-button][design="Positive"]) .ui5-split-arrow-button,
+:host([design="Positive"]) .ui5-split-arrow-button[active] {
+	background-color: var(--sapButton_Accept_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Accept_Active_BorderColor);
+	color: var(--sapButton_Accept_Active_TextColor);
+}
+
+:host([active-arrow-button][design="Attention"]) .ui5-split-arrow-button,
+:host([design="Attention"]) .ui5-split-arrow-button[active] {
+	background-color: var(--sapButton_Attention_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Attention_Active_BorderColor);
+	color: var(--sapButton_Attention_Active_TextColor);
+}
+
+:host([active-arrow-button][design="Emphasized"]) .ui5-split-arrow-button,
+:host([design="Emphasized"]) .ui5-split-arrow-button[active] {
+	background-color: var(--sapButton_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Emphasized_Active_BorderColor);
+}
+
+:host([active-arrow-button][design="Transparent"]) .ui5-split-arrow-button,
+:host([active-arrow-button]) .ui5-split-arrow-button,
+:host([design="Transparent"]) .ui5-split-arrow-button[active],
+:host([design="Default"]) .ui5-split-arrow-button[active],
+.ui5-split-arrow-button[active], .ui5-split-arrow-button[active]:hover {
+	background-color: var(--sapButton_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Lite_Active_BorderColor);
+	color: var(--sapButton_Active_TextColor);
+}
+
+:host([disabled]:not([hidden])) {
+	pointer-events: none;
 }
 
 :host([design="Positive"]:not([hidden])) {
 	background-color: var(--sapButton_Accept_Background);
+	box-shadow: var(--_ui5_split_button_host_positive_box_shadow);
 }
 
 :host([design="Negative"]:not([hidden])) {
 	background-color: var(--sapButton_Reject_Background);
+	box-shadow: var(--_ui5_split_button_host_negative_box_shadow);
 }
 
 :host([design="Attention"]:not([hidden])) {
 	background-color: var(--sapButton_Attention_Background);
+	box-shadow: var(--_ui5_split_button_host_attention_box_shadow);
 }
 
 :host([design="Emphasized"]:not([hidden])) {
 	background-color: var(--sapButton_Emphasized_Background);
+	box-shadow: var(--_ui5_split_button_host_emphasized_box_shadow);
 }
 
 :host([design="Transparent"]:not([hidden])) {
-	background-color: transparent;
+	background-color: var(--sapButton_Lite_Background);
+	box-shadow: var(--_ui5_split_button_host_transparent_box_shadow);
 }
 
 :host([design="Transparent"][disabled]:not([hidden])) {
@@ -33,7 +80,8 @@
 }
 
 :host([design="Transparent"]:not([hidden]):not([disabled]):hover) {
-	background-color: var(--_ui5_split_button_transparent_hover_background);
+	background-color: var(--_ui5_split_button_host_transparent_hover_background);
+	box-shadow: var(--_ui5_split_button_host_transparent_hover_box_shadow);
 }
 
 :host([design="Transparent"]:not([hidden]):not([disabled]):hover) .ui5-split-arrow-button:not(:hover),
@@ -68,11 +116,20 @@
 	width: inherit;
 }
 
+.ui5-split-button-root:focus,
+.ui5-split-text-button:focus,
+.ui5-split-arrow-button:focus {
+	outline: 0;
+}
+
 .ui5-split-text-button {
 	border-top-right-radius: var(--_ui5_split_button_hover_border_radius);
 	border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius);
+	border-width: 0.0625rem;
 	border-right-width: var(--_ui5_split_button_text_button_right_border_width);
 	margin-right: var(--_ui5_split_button_text_button_width);
+	border-color: var(--_ui5_split_text_button_border_color);
+	background-color: var(--_ui5_split_text_button_background_color);
 	vertical-align: top;
 	width: inherit;
 }
@@ -80,6 +137,76 @@
 .ui5-split-text-button:hover {
 	border-top-right-radius: var(--_ui5_split_button_hover_border_radius);
 	border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius);
+	background-color: var(--sapButton_Hover_Background);
+	box-shadow: none;
+	border: var(--_ui5_split_text_button_hover_border);
+	border-right: var(--_ui5_split_text_button_hover_border_right);
+	border-left: var(--_ui5_split_text_button_hover_border_left);
+}
+.ui5-split-text-button[design="Emphasized"] {
+	border: var(--_ui5_split_text_button_emphasized_border);
+	border-width: var(--_ui5_split_text_button_emphasized_border_width);
+}
+.ui5-split-text-button[design="Emphasized"]:hover {
+	background-color: var(--sapButton_Emphasized_Hover_Background);
+	border: var(--_ui5_split_text_button_emphasized_hover_border);
+	border-right: var(--_ui5_split_text_button_emphasized_hover_border_right);
+	border-left: var(--_ui5_split_text_button_emphasized_hover_border_left);
+}
+.ui5-split-text-button[design="Positive"]:hover {
+	background-color: var(--sapButton_Accept_Hover_Background);
+	border: var(--_ui5_split_text_button_positive_hover_border);
+	border-right: var(--_ui5_split_text_button_positive_hover_border_right);
+	border-left: var(--_ui5_split_text_button_positive_hover_border_left);
+}
+.ui5-split-text-button[design="Negative"]:hover {
+	background-color: var(--sapButton_Reject_Hover_Background);
+	border: var(--_ui5_split_text_button_negative_hover_border);
+	border-right: var(--_ui5_split_text_button_negative_hover_border_right);
+	border-left: var(--_ui5_split_text_button_negative_hover_border_left);
+}
+.ui5-split-text-button[design="Attention"]:hover {
+	background-color: var(--sapButton_Attention_Hover_Background);
+	border: var(--_ui5_split_text_button_attention_hover_border);
+	border-right: var(--_ui5_split_text_button_attention_hover_border_right);
+	border-left: var(--_ui5_split_text_button_attention_hover_border_left);
+}
+.ui5-split-text-button[design="Transparent"]:hover {
+	background-color: var(--_ui5_split_button_transparent_hover_background);
+	border: var(--_ui5_split_text_button_transparent_hover_border);
+	border-right: var(--_ui5_split_text_button_transparent_hover_border_right);
+	border-left: var(--_ui5_split_text_button_transparent_hover_border_left);
+}
+
+.ui5-split-text-button[active][design="Emphasized"] {
+	background-color: var(--sapButton_Selected_Background);
+	color: var(--sapButton_Emphasized_Active_TextColor);
+	border-color: var(--sapButton_Emphasized_Active_BorderColor);
+}
+.ui5-split-text-button[active][design="Negative"] {
+	background-color: var(--sapButton_Reject_Selected_Background);
+	color: var(--sapButton_Reject_Active_TextColor);
+	border-color: var(--sapButton_Reject_Active_BorderColor);
+}
+.ui5-split-text-button[active][design="Positive"] {
+	background-color: var(--sapButton_Accept_Selected_Background);
+	color: var(--sapButton_Accept_Active_TextColor);
+	border-color: var(--sapButton_Accept_Active_BorderColor);
+}
+.ui5-split-text-button[active][design="Attention"] {
+	background-color: var(--sapButton_Attention_Selected_Background);
+	color: var(--sapButton_Attention_Active_TextColor);
+	border-color: var(--sapButton_Attention_Active_BorderColor);
+}
+.ui5-split-text-button[active][design="Default"] {
+	background-color: var(--sapButton_Active_Background);
+	color: var(--sapButton_Active_TextColor);
+	border-color: var(--sapButton_Active_BorderColor);
+}
+.ui5-split-text-button[active][design="Transparent"] {
+	background-color: var(--sapButton_Active_Background);
+	color: var(--sapButton_Active_TextColor);
+	border-color: var(--sapButton_Active_BorderColor);
 }
 
 .ui5-split-text-button[active] {
@@ -96,13 +223,41 @@
 	border-top-left-radius: var(--_ui5_split_button_hover_border_radius);
 	border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius);
 	width: 2.25rem;
+	border-color: var(--_ui5_split_text_button_border_color);
+	background-color: var(--_ui5_split_text_button_background_color);
 }
 
 .ui5-split-text-button[dir="rtl"]:hover {
 	border-top-left-radius: var(--_ui5_split_button_hover_border_radius);
 	border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius);
+	border-left: var(--_ui5_split_text_button_hover_border_left_rtl);
+	border-right: var(--_ui5_split_text_button_hover_border_right_rtl);
+}
+
+.ui5-split-text-button[design="Emphasized"][dir="rtl"]:hover {
+	border-left: var(--_ui5_split_text_button_emphasized_hover_border_left_rtl);
+	border-right: var(--_ui5_split_text_button_emphasized_hover_border_right_rtl);
 }
 
+.ui5-split-text-button[design="Positive"][dir="rtl"]:hover {
+	border-left: var(--_ui5_split_text_button_positive_hover_border_left_rtl);
+	border-right: var(--_ui5_split_text_button_positive_hover_border_right_rtl);
+}
+
+.ui5-split-text-button[design="Negative"][dir="rtl"]:hover {
+	border-left: var(--_ui5_split_text_button_negative_hover_border_left_rtl);
+	border-right: var(--_ui5_split_text_button_negative_hover_border_right_rtl);
+}
+
+.ui5-split-text-button[design="Attention"][dir="rtl"]:hover {
+	border-left: var(--_ui5_split_text_button_attention_hover_border_left_rtl);
+	border-right: var(--_ui5_split_text_button_attention_hover_border_right_rtl);
+}
+
+.ui5-split-text-button[design="Transparent"][dir="rtl"]:hover {
+	border-left: var(--_ui5_split_text_button_transparent_hover_border_left_rtl);
+	border-right: var(--_ui5_split_text_button_transparent_hover_border_right_rtl);
+}
 
 [dir="rtl"] .ui5-split-arrow-button:hover {
 	border-top-right-radius: var(--_ui5_split_button_hover_border_radius);
@@ -112,6 +267,40 @@
 .ui5-split-arrow-button:hover {
 	border-top-left-radius: var(--_ui5_split_button_hover_border_radius);
 	border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius);
+	background-color: var(--sapButton_Hover_Background);
+	box-shadow: none;
+	border: var(--_ui5_split_arrow_button_hover_border);
+}
+
+.ui5-split-arrow-button[design="Emphasized"]:hover {
+	background-color: var(--sapButton_Emphasized_Hover_Background);
+	border: var(--_ui5_split_arrow_button_emphasized_hover_border);
+	border-left-width: var(--sapButton_BorderWidth);
+}
+
+.ui5-split-arrow-button-wrapper[dir="rtl"] .ui5-split-arrow-button[design="Emphasized"]:hover {
+	border-left-width: var(--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl);
+	border-right-width: var(--sapButton_BorderWidth);
+}
+
+.ui5-split-arrow-button[design="Positive"]:hover {
+	background-color: var(--sapButton_Accept_Hover_Background);
+	border: var(--_ui5_split_arrow_button_positive_hover_border);
+}
+
+.ui5-split-arrow-button[design="Negative"]:hover {
+	background-color: var(--sapButton_Reject_Hover_Background);
+	border: var(--_ui5_split_arrow_button_negative_hover_border);
+}
+
+.ui5-split-arrow-button[design="Attention"]:hover {
+	background-color: var(--sapButton_Attention_Hover_Background);
+	border: var(--_ui5_split_arrow_button_attention_hover_border);
+}
+
+.ui5-split-arrow-button[design="Transparent"]:hover {
+	background-color: var(--_ui5_split_button_transparent_hover_background);
+	border: var(--_ui5_split_arrow_button_transparent_hover_border);
 }
 
 .ui5-split-arrow-button:before {
@@ -127,6 +316,19 @@
 	border-left-width: 0.0625rem;
 }
 
+.ui5-split-arrow-button[design="Emphasized"]:before {
+	content: "";
+	position: absolute;
+	box-sizing: border-box;
+	pointer-events: none;
+	left: var(--_ui5_split_button_middle_separator_left);
+	top: var(--_ui5_split_button_middle_separator_top);
+	right: 0;
+	height: var(--_ui5_split_button_middle_separator_height);
+	border: 0 solid var(--sapButton_TextColor);
+	border-left-width: 0.0625rem;
+}
+
 [dir="rtl"] .ui5-split-arrow-button:before {
 	content: "";
 	position: absolute;
@@ -164,16 +366,20 @@
 }
 
 .ui5-split-arrow-button[design="Attention"]:before {
-	border-color: var(--_ui5_split_button_attention_separator_color);
+	border-color: var(--_ui5_split_button_attention_separator_color_default);
 }
 
 .ui5-split-text-button[dir="rtl"] {
 	border-radius: 0 var(--_ui5_button_border_radius) var(--_ui5_button_border_radius) 0;
-	border-width: 1px 1px 1px 0;
+	border-width: var(--sapButton_BorderWidth);
 	margin-right: 0;
 	margin-left: var(--_ui5_split_button_text_button_width);
 }
 
+.ui5-split-text-button[design="Emphasized"][dir="rtl"] {
+	border-width: var(--_ui5_split_text_button_emphasized_border_width_rtl);
+}
+
 .ui5-split-arrow-button-wrapper[dir="rtl"] {
 	left: 0;
 	right: auto;
@@ -207,4 +413,55 @@
 	border-bottom-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 	border-top-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer);
 	border-bottom-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer);
+}
+
+.ui5-split-text-button[active][design="Emphasized"] {
+	color: var(--sapButton_Emphasized_Active_TextColor);
+	background-color: var(--sapButton_Selected_Background);
+}
+
+:host([design="Emphasized"][active-arrow-button]) .ui5-split-arrow-button,
+.ui5-split-arrow-button[active][design="Emphasized"] {
+	background-color: var(--sapButton_Selected_Background);
+	color: var(--sapButton_Emphasized_Active_TextColor);
+	border: var(--_ui5_split_arrow_button_emphasized_hover_border);
+}
+
+:host([design="Transparent"][active-arrow-button]:not([hidden]):not([disabled]):hover) .ui5-split-arrow-button {
+	color: var(--sapButton_Active_TextColor);
+}
+
+
+:host([active-arrow-button]) .ui5-split-arrow-button {
+	border: 0.0625rem solid var(--sapButton_Lite_Active_BorderColor);
+}
+
+:host([active-arrow-button]) .ui5-split-arrow-button::before,
+.ui5-split-arrow-button[active]::before,
+.ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
+	border-color: transparent;
+}
+
+:host([design="Emphasized"][active-arrow-button]) .ui5-split-arrow-button::before,
+:host([design="Emphasized"]) .ui5-split-arrow-button[active]::before,
+:host([design="Emphasized"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
+	border-color: var(--_ui5_split_button_emphasized_separator_color);
+}
+
+:host([design="Positive"][active-arrow-button]) .ui5-split-arrow-button::before,
+:host([design="Positive"]) .ui5-split-arrow-button[active]::before,
+:host([design="Positive"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
+	border-color: var(--_ui5_split_button_positive_separator_color);
+}
+
+:host([design="Negative"][active-arrow-button]) .ui5-split-arrow-button::before,
+:host([design="Negative"]) .ui5-split-arrow-button[active]::before,
+:host([design="Negative"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
+	border-color: var(--_ui5_split_button_negative_separator_color);
+}
+
+:host([design="Attention"][active-arrow-button]) .ui5-split-arrow-button::before,
+:host([design="Attention"]) .ui5-split-arrow-button[active]::before,
+:host([design="Attention"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
+	border-color: var(--_ui5_split_button_attention_separator_color);
 }

package/src/themes/StepInput.css

@@ -1,6 +1,7 @@
 @import "./FormComponents.css";
 @import "./InvisibleTextStyles.css";
 @import "./InputIcon.css";
+@import "./InputSharedStyles.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
@@ -31,21 +32,6 @@
 	box-shadow: none;
 }
 
-:host([value-state="Success"]:not([readonly]):not([disabled])) {
-	background-color: var(--sapField_SuccessBackground);
-}
-
-:host([value-state="Error"]:not([readonly]):not([disabled])) {
-	background-color: var(--sapField_InvalidBackground);
-}
-
-:host([value-state="Information"]:not([readonly]):not([disabled])) {
-	background-color: var(--sapField_InformationBackground);
-}
-
-:host([value-state="Warning"]:not([readonly]):not([disabled])) {
-	background-color: var(--sapField_WarningBackground);
-}
 :host(:not([value-state]):not([readonly]):not([disabled]):hover),
 :host([value-state="None"]:not([readonly]):not([disabled]):hover) {
 	background-color: var(--_ui5_step_input_border_color_hover);
@@ -105,7 +91,7 @@
 	pointer-events: none;
 	border-radius: var(--sapField_BorderCornerRadius);
 	border-style: var(--_ui5_input_error_warning_border_style);
-	z-index: 3;
+	z-index: 1;
 	border-width: 0px;
 }
 
@@ -195,7 +181,7 @@
 	height: 2rem;
 	height: 100%;
 	background-color: var(--_ui5_step_input_button_background_color);
-	z-index: 2;
+	z-index: 0;
 }
 
 :host .ui5-step-icon[focused] {
@@ -205,6 +191,7 @@
 
 :host .ui5-step-icon.ui5-step-dec {
 	left: var(--_ui5_step_input_button_left);
+	z-index: 1;
 }
 
 :host .ui5-step-icon.ui5-step-inc {
@@ -236,7 +223,7 @@
 	left: 0px;
 	outline: none;
 	pointer-events: none;
-	z-index: 3;
+	z-index: 1;
 }
 
 :host .ui5-step-input-input[focused] {
@@ -266,14 +253,6 @@
 	margin: 0;
 }
 
-:host([disabled]) {
-	opacity: var(--_ui5_input_disabled_opacity);
-	cursor: default;
-	pointer-events: none;
-	background: var(--sapField_ReadOnly_Background);
-	border-color: var(--sapField_ReadOnly_BorderColor);
-}
-
 :host([disabled]) .ui5-step-icon {
 	background-color: var(--_ui5_step_input_disabled_button_background);
 }

package/src/themes/Suggestions.css

@@ -11,11 +11,6 @@
 	padding: 0 1rem;
 }
 
-.ui5-suggestions-popover [ui5-li],
-.ui5-suggestions-popover [ui5-li-suggestion-item] {
-	height: var(--_ui5_list_item_dropdown_base_height);
-}
-
 .ui5-suggestions-popover [ui5-li]::part(icon),
 .ui5-suggestions-popover [ui5-li-suggestion-item]::part(icon) {
 	color: var(--sapList_TextColor);

package/src/themes/Switch.css

@@ -114,7 +114,7 @@
 
 .ui5-switch-handle,
 .ui5-switch-text {
-	left: var(--_ui5_switch_handle_left);
+	inset-inline-start: var(--_ui5_switch_handle_left);
 	top: 50%;
 	transform: translateY(-50%);
 }
@@ -123,8 +123,8 @@
 .ui5-switch-desktop.ui5-switch-root:focus::after {
 	content: "";
 	position: absolute;
-	left: var(--_ui5_switch_root_outline_left);
-	right: var(--_ui5_switch_root_outline_right);
+	inset-inline-start: var(--_ui5_switch_root_outline_left);
+	inset-inline-end: var(--_ui5_switch_root_outline_right);
 	top: var(--_ui5_switch_root_outline_top);
 	bottom: var(--_ui5_switch_root_outline_bottom);
 	border: var(--_ui5_switch_focus_outline);
@@ -137,11 +137,12 @@
 /* switch hidden input */
 .ui5-switch-root .ui5-switch-input {
 	position: absolute;
-	left: 0;
+	inset-inline-start: 0;
 	width: 0;
 	height: 0;
 	margin: 0;
 	visibility: hidden;
+	appearance: none;
 	-webkit-appearance: none;
 }
 
@@ -158,12 +159,14 @@
 	visibility: var(--_ui5_switch_text_hidden);
 }
 
-.ui5-switch-root.ui5-switch--checked .ui5-switch-text--on {
-	left: var(--_ui5_switch_text_active_left);
+.ui5-switch-root.ui5-switch--checked.ui5-switch--semantic .ui5-switch-text--on, 
+.ui5-switch-root.ui5-switch--checked.ui5-switch-desktop.ui5-switch--no-label .ui5-switch-text--on {
+	inset-inline-start: var(--_ui5_switch_text_active_left);
 }
-.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--off {
-	left: var(--_ui5_switch_text_inactive_left);
-	right: var(--_ui5_switch_text_inactive_right)
+.ui5-switch-root:not(.ui5-switch--checked).ui5-switch--semantic .ui5-switch-text--off,
+.ui5-switch-root:not(.ui5-switch--checked).ui5-switch-desktop.ui5-switch--no-label .ui5-switch-text--off {
+	inset-inline-start: var(--_ui5_switch_text_inactive_left);
+	inset-inline-end: var(--_ui5_switch_text_inactive_right);
 }
 
 /* handle */
@@ -335,11 +338,14 @@
 	color: var(--_ui5_switch_text_active_color);
 	overflow: var(--_ui5_switch_text_overflow);
 	text-overflow: ellipsis;
+	inset-inline-start: var(--_ui5_switch_text_active_left_alternate);
 }
 .ui5-switch-root .ui5-switch-text--off {
 	color: var(--_ui5_switch_text_inactive_color);
 	overflow: var(--_ui5_switch_text_overflow);
 	text-overflow: ellipsis;
+	inset-inline-start: var(--_ui5_switch_text_inactive_left_alternate);
+	inset-inline-end: var(--_ui5_switch_text_inactive_right_alternate);
 }
 
 .ui5-switch-root .ui5-switch-no-label-icon-on,
@@ -359,19 +365,4 @@
 
 [dir="rtl"].ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
 	transform: var(--_ui5_switch_rtl_transform);
-}
-
-[dir="rtl"].ui5-switch-root .ui5-switch-handle {
-	left: auto;
-	right: var(--_ui5_switch_handle_left);
-}
-
-[dir="rtl"].ui5-switch-root .ui5-switch-text--on {
-	right: var(--_ui5_switch_text_active_left);
-	left: var(--_ui5_switch_text_active_right);
-}
-
-[dir="rtl"].ui5-switch-root .ui5-switch-text--off {
-	right: var(--_ui5_switch_text_inactive_left);
-	left: var(--_ui5_switch_text_inactive_right);
-}
+}

package/src/themes/TabContainer.css

@@ -6,6 +6,7 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
+	container-type: inline-size;
 }
 
 .ui5-tc-root {
@@ -19,7 +20,6 @@
 
 .ui5-tc__header {
 	position: relative;
-	padding: 0 1rem;
 	display: flex;
 	align-items: center;
 	background-color: var(--_ui5_tc_header_background);
@@ -67,6 +67,11 @@
 
 .ui5-tc__overflow.ui5-tc__overflow--end {
 	padding-inline-start: 0.188rem;
+	margin-inline-end: 1rem;
+}
+
+.ui5-tc__overflow.ui5-tc__overflow--start {
+	margin-inline-start: 1rem;
 }
 
 .ui5-tc__overflow[hidden] {
@@ -74,11 +79,18 @@
 }
 
 .ui5-tc__overflow > [ui5-button] {
-	margin-top: 0.25rem;
 	border-radius: 0.75rem;
 	height: 1.5rem;
 }
 
+.ui5-tc__overflow > [ui5-button]:not([active]) {
+	color: var(--_ui5_tc_overflow_text_color);
+}
+
+.ui5-tc__overflow > [ui5-button]:not([active]):hover {
+	color: var(--_ui5_tc_overflow_text_color);
+}
+
 .ui5-tc__overflow > [ui5-button][focused] {
 	outline-offset: 0.125rem;
 	--_ui5_button_focused_border: none;
@@ -93,7 +105,6 @@
 	position: relative;
 	display: flex;
 	height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */
-	padding: 1rem 2rem;
 	background-color: var(--_ui5_tc_content_background);
 	border-bottom: var(--_ui5_tc_content_border_bottom);
 	box-sizing: border-box;
@@ -131,19 +142,30 @@
 }
 
 /*** Responsive paddings ***/
-
-:host([media-range="S"]) .ui5-tc__header {
+.ui5-tc__header {
 	padding: 0;
 }
 
-:host([media-range="S"]) .ui5-tc__content {
+.ui5-tc__content {
 	padding: 1rem;
 }
 
-:host([media-range="XL"]) .ui5-tc__header {
-	padding: 0 2rem;
+@container (min-width: 600px) {
+	.ui5-tc__header {
+		padding: 0 1rem;
+	}
+
+	.ui5-tc__content {
+		padding: 1rem 2rem;
+	}
 }
 
-:host([media-range="XL"]) .ui5-tc__content {
-	padding: 1rem 3rem;
+@container (min-width: 1440px) {
+	.ui5-tc__header {
+		padding: 0 2rem;
+	}
+	
+	.ui5-tc__content {
+		padding: 1rem 3rem;
+	}
 }

package/src/themes/TabInOverflow.css

@@ -39,7 +39,6 @@
 	display: flex;
 	align-items: center;
 	position: relative;
-	padding-inline: 1rem 0.5rem;
 	height: var(--_ui5_tc_item_text);
 	pointer-events: none;
 	font-size: 0.875rem;