@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/src/themes/Switch.css

@@ -9,16 +9,21 @@
 	position: relative;
 	display: flex;
 	align-items: center;
-	width: 100%;
+	width: var(--_ui5_switch_width);
 	height: var(--_ui5_switch_height);
-	min-width: var(--_ui5_switch_width);
+	min-width: var(--_ui5_switch_min_width);
 	cursor: pointer;
 	outline: none;
 	border-radius: var(--_ui5-switch-root-border-radius);
 }
 
+.ui5-switch-root:not(.ui5-switch--no-label):not(.ui5-switch--semantic) {
+	width: var(--_ui5_switch_with_label_width);
+	height: var(--_ui5_switch_height);
+}
+
 .ui5-switch-root.ui5-switch--no-label {
-	min-width: var(--_ui5_switch_no_label_width);
+	min-width: var(--_ui5_switch_width);
 }
 
 .ui5-switch-inner {
@@ -39,20 +44,19 @@
 }
 
 .ui5-switch-track {
-	height: var(--_ui5_switch_track_height);
-	width: 100%;
 	display: flex;
 	align-items: center;
-	background: var(--_ui5-switch_track-off-background);
+	height: var(--_ui5_switch_track_height);
+	width: var(--_ui5_switch_track_width);
 	border: var(--_ui5-switch-track-border);
-	border-color: var(--_ui5-switch-track-border_color);
 	border-radius: var(--_ui5_switch_track_border_radius);
 	box-sizing: border-box;
-	transition: var(--_ui5-switch-track-transition);
+	transition: var(--_ui5_switch_track_transition);
 }
 
-.ui5-switch--no-label .ui5-switch-track {
-	height: var(--_ui5_switch_track_no_label_height);
+.ui5-switch-root:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-track {
+	height: var(--_ui5_switch_track_with_label_height);
+	width: var(--_ui5_switch_track_with_label_width);
 }
 
 .ui5-switch-slider {
@@ -72,19 +76,21 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	left: var(--_ui5-switch-handle-left);
 	width: var(--_ui5_switch_handle_width);
 	height: var(--_ui5_switch_handle_height);
-	background: var(--_ui5_switch_handle_bg);
-	border: var(--_ui5-switch-handle-border);
+	border: var(--_ui5_switch_handle_border);
 	border-radius: var(--_ui5_switch_handle_border_radius);
 	box-sizing: border-box;
 }
 
+.ui5-switch-root:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-handle {
+	height: var(--_ui5_switch_handle_with_label_height);
+	width: var(--_ui5_switch_handle_with_label_width);
+}
+
 .ui5-switch-handle-icon {
 	display: var(--_ui5-switch-handle-icon-display);
-	color: var(--_ui5-switch_track-off-background);
-	transition: var(--_ui5-switch-track-transition);
+	transition: var(--_ui5_switch_track_transition);
 }
 
 :host([checked]) .ui5-switch-handle-icon {
@@ -95,29 +101,20 @@
 	display: flex;
 	justify-content: center;
 	position: absolute;
-	min-width: 1.625rem;
-	padding: 0 0.125rem;
-	font-size: var(--sapFontSmallSize);
-	font-family: "72override", var(--sapFontFamily);
+	z-index: var(--_ui5_switch_text_z_index);
+	min-width: var(--_ui5_switch_text_min_width);
+	font-size: var(--_ui5_switch_text_font_size);
+	font-family: var(--_ui5-switch-text_font_family);
 	text-transform: uppercase;
 	text-align: center;
-	color: var(--sapTextColor);
 	white-space: nowrap;
 	user-select: none;
 	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-.ui5-switch-text--on {
-	left: var(--_ui5_switch_text_on_left);
-}
-
-.ui5-switch-text--off {
-	right: 0;
 }
 
 .ui5-switch-handle,
 .ui5-switch-text {
+	left: var(--_ui5_switch_handle_left);
 	top: 50%;
 	transform: translateY(-50%);
 }
@@ -126,16 +123,14 @@
 .ui5-switch-desktop.ui5-switch-root:focus::after {
 	content: "";
 	position: absolute;
-	left: var(--_ui5_switch_root_outline_left_right);
-	width: var(--_ui5_switch_focus_width_size);
-	height: var(--_ui5_switch_focus_height_size);
-	top: var(--_ui5_switch_root_outline_top_bottom);
-	bottom: var(--_ui5_switch_root_outline_top_bottom);
-	right: var(--_ui5_switch_root_outline_left_right);
+	left: var(--_ui5_switch_root_outline_left);
+	right: 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);
 	border-radius: var(--_ui5_switch_root_after_boreder_radius);
 	pointer-events: none;
-	transition: var(--_ui5-switch-track-transition);
+	transition: var(--_ui5_switch_track_transition);
 	outline: var(--_ui5_switch_root_after_outline);
 }
 
@@ -156,122 +151,145 @@
 	cursor: default;
 }
 
-.ui5-switch-root.ui5-switch--disabled.ui5-switch--checked .ui5-switch-handle {
-	background: var(--_ui5_switch_handle_disabled_checked_bg);
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off {
+	visibility: var(--_ui5_switch_text_hidden);
 }
-
-
-.ui5-switch-root.ui5-switch--disabled .ui5-switch-handle {
-	background: var(--_ui5_switch_handle_disabled_bg);
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--on {
+	visibility: var(--_ui5_switch_text_hidden);
 }
 
-.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-track {
-	background: var(--_ui5_switch_track_disabled_semantic_checked_bg);
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--on {
+	left: 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.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-handle {
-	background: var(--_ui5_switch_handle_disabled_semantic_checked_bg);
+/* handle */
+.ui5-switch-root.ui5-switch--checked .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_active_background_color);
+	border-color: var(--_ui5_switch_handle_active_border_color);
+}
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_inactive_background_color);
+	border-color: var(--_ui5_switch_handle_inactive_border_color);
 }
 
-.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-track {
-	background: var(--_ui5_switch_track_disabled_semantic_bg);
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_hover_active_background_color);
+	border-color: var(--_ui5_switch_handle_hover_active_border_color);
+}
+.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):not(.ui5-switch--checked):hover .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_hover_inactive_background_color);
+	border-color: var(--_ui5_switch_handle_hover_inactive_border_color);
 }
 
-.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-handle {
-	background: var(--_ui5_switch_semantic_button_background);
+/* handle semantic */
+.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_semantic_accept_background_color);
+	border-color: var(--_ui5_switch_handle_semantic_accept_border_color);
+}
+.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_semantic_reject_background_color);
+	border-color: var(--_ui5_switch_handle_semantic_reject_border_color);
 }
 
-/* switch checked */
-.ui5-switch-root.ui5-switch--checked .ui5-switch-handle {
-	background:  var(--_ui5_switch_handle_checked_bg);
-	border-color: var(--_ui5_switch_handle_checked_border_color);
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_semantic_hover_accept_background_color);
+	border-color: var(--_ui5_switch_handle_semantic_hover_accept_border_color);
 }
+.ui5-switch-desktop.ui5-switch--semantic.ui5-switch-root:not(.ui5-switch--checked):not(.ui5-switch--disabled):hover .ui5-switch-handle {
+	background: var(--_ui5_switch_handle_semantic_hover_reject_background_color);
+	border-color: var(--_ui5_switch_handle_semantic_hover_reject_border_color);
+}
+
 
+/* track */
 .ui5-switch-root.ui5-switch--checked .ui5-switch-track {
-	background: var(--_ui5-switch_track-on-background);
+	background: var(--_ui5_switch_track_active_background_color);
+	border-color: var(--_ui5_switch_track_active_border_color);
 }
-
-.ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
-	/* Move slider to oposite end, taking into account the handle as an offset. */
-	/* Note: translate(calc()) does not work in IE11 */
-	transform	: var(--_ui5_switch_slide_transform);
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-track {
+	background: var(--_ui5_switch_track_inactive_background_color);
+	border-color: var(--_ui5_switch_track_inactive_border_color);
 }
 
-.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled) .ui5-switch-text--on,
-.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off {
-	color: var(--sapButton_Track_Selected_TextColor);
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
+	background: var(--_ui5_switch_track_hover_active_background_color);
+	border-color: var(--_ui5_switch_track_hover_active_border_color);
 }
-
-/* switch no label icon */
-.ui5-switch-text .ui5-switch-text--on .ui5-switch-no-label-icon {
-	display: flex;
-	justify-content: center;
-	font-size: var(--sapFontSmallSize);
+.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--checked):not(.ui5-switch--disabled):hover .ui5-switch-track {
+	background: var(--_ui5_switch_track_hover_inactive_background_color);
+	border-color: var(--_ui5_switch_track_hover_inactive_border_color);
 }
 
-.ui5-switch--no-label .ui5-switch-no-label-icon-on {
-	color: var(--sapButton_Track_Selected_TextColor);
-	width: .75rem;
-	height: .75rem;
-	display: var(--_ui5-switch-track-icon-display);
+/* track semantic*/
+.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked .ui5-switch-track {
+	background: var(--_ui5_switch_track_semantic_accept_background_color);
+	border-color: var(--_ui5_switch_track_semantic_accept_border_color);
 }
-
-.ui5-switch--no-label .ui5-switch-no-label-icon-off {
-	color: var(--sapButton_Track_TextColor);
-	width: .75rem;
-	height: .75rem;
-	display: var(--_ui5-switch-track-icon-display);
+.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-track {
+	background: var(--_ui5_switch_track_semantic_reject_background_color);
+	border-color: var(--_ui5_switch_track_semantic_reject_border_color);
 }
 
-/* switch semantic off */
-.ui5-switch-root.ui5-switch--semantic .ui5-switch-handle {
-	border-color: var(--sapSuccessBorderColor);
+.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
+	background: var(--_ui5_switch_track_semantic_hover_accept_background_color);
+	border-color: var(--_ui5_switch_track_semantic_hover_accept_border_color);
+}
+.ui5-switch-desktop.ui5-switch--semantic.ui5-switch-root:not(.ui5-switch--checked):not(.ui5-switch--disabled):hover .ui5-switch-track {
+	background: var(--_ui5_switch_track_semantic_hover_reject_background_color);
+	border-color: var(--_ui5_switch_track_semantic_hover_reject_border_color);
 }
 
-.ui5-switch-root.ui5-switch--semantic .ui5-switch-track {
-	border-color: var(--_ui5_switch_track_semantic_border_color);
-	background: var(--_ui5_switch_track_semantic_success_backgroud_color);
+.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider {
+	/* Move slider to oposite end, taking into account the handle as an offset. */
+	/* Note: translate(calc()) does not work in IE11 */
+	transform: var(--_ui5_switch_transform_with_label);
 }
 
-.ui5-switch-root.ui5-switch--semantic .ui5-switch-handle {
-	background: var(--_ui5_switch_semantic_button_background);
+.ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
+	/* Move slider to oposite end, taking into account the handle as an offset. */
+	/* Note: translate(calc()) does not work in IE11 */
+	transform: var(--_ui5_switch_transform);
 }
 
 /* switch semantic icon and type noLabel icon in horizon theme */
+.ui5-switch-text .ui5-switch-text--on .ui5-switch-no-label-icon,
 .ui5-switch-root.ui5-switch--semantic .ui5-switch-text,
 .ui5-switch-root.ui5-switch--no-label .ui5-switch-text {
 	display: flex;
 	justify-content: center;
-	font-size: var(--sapFontSmallSize);
-}
 
-.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-on,
-.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-off {
-	width: 0.75rem;
-	height: 0.75rem;
 }
-.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-on {
-	border-color: var(--sapSuccessBorderColor);
-	color: var(--sapPositiveElementColor);
+
+.ui5-switch--no-label .ui5-switch-no-label-icon-on,
+.ui5-switch--no-label .ui5-switch-no-label-icon-off {
+	width: var(--_ui5_switch_icon_width);
+	height: var(--_ui5_switch_icon_height);
+	display: var(--_ui5_switch_track_icon_display);
 }
 
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-on,
 .ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-off {
-	color: var(--sapNegativeElementColor);
+	width: var(--_ui5_switch_icon_width);
+	height: var(--_ui5_switch_icon_height)
 }
 
-/* switch semantic on */
-.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-track {
-	border-color: var(--_ui5_switch_track_semantic_not_checked_border_color);
-	background: var(--_ui5_switch_track_semantic_error_backgroud_color);
+.ui5-switch-root .ui5-switch-text {
+	font-family: var(--_ui5_switch_text_font_family);
+	font-size: var(--_ui5_switch_text_font_size);
+	width: var(--_ui5_switch_text_width);
 }
 
-.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-handle {
-	border-color: var(--sapErrorBorderColor);
-	background: var(--_ui5_switch_semantic_button_background);
+.ui5-switch-root:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-text {
+	font-family: var(--_ui5_switch_text_with_label_font_family);
+	font-size: var(--_ui5_switch_text_with_label_font_size);
+	width: var(--_ui5_switch_text_with_label_width);
 }
 
 /* switch active effects */
-
 /* active & off */
 
 :host([active]) .ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled) .ui5-switch-track {
@@ -284,87 +302,76 @@
 	background: var(--_ui5-switch_track-on-active-background);
 }
 
-/* switch hover effects */
-
-/* switch on hover, when switched off */
-.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):hover .ui5-switch-track {
-	border-color: var(--_ui5_switch_handle_hover_border_color);
-}
-
-.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):hover .ui5-switch-handle-icon {
-	color: var(--_ui5-switch_track-off-hover-color);
-}
-
 .ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):hover .ui5-switch-handle {
-	background: var(--sapButton_Hover_Background);
-	box-shadow: var(--_ui5-switch_handle-off-hover_box_shadow);
+	box-shadow: var(--_ui5_switch_handle_off_hover_box_shadow);
 }
 
  /* switch on hover, when switched on */
 .ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
-	background: var(--sapButton_Selected_Hover_Background);
-	border-color: var(--_ui5_switch_handle_checked_border_color);
-	box-shadow: var(--_ui5-switch_handle-on-hover_box_shadow);
-}
-
-.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
-	border-color: var(--_ui5_switch_handle_hover_border_color);
-	background: var(--_ui5-switch_track-on-hover-background);
-}
-
-.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle-icon {
-	color: var(--_ui5-switch_track-on-hover-color);
+	box-shadow: var(--_ui5_switch_handle_on_hover_box_shadow);
 }
 
 /* semantic switch on hover, when switched off */
 .ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-handle {
-	background: var(--_ui5_switch_handle_semantic_hover_bg);
-	border-color: var(--_ui5_switch_handle_semantic_hover_border_color);
-	box-shadow: var(--sapContent_Negative_Shadow);
-}
-
-.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-track {
-	border-color: var(--_ui5_switch_track_semantic_hover_border_color);
+	box-shadow: var(--_ui5_switch_handle_semantic_off_hover_box_shadow);
 }
 
 /* semantic switch on hover, when switched on */
 .ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
-	background: var(--_ui5_switch_handle_semantic_checked_hover_bg);
-	border-color: var(--_ui5_switch_handle_semantic_checked_hover_border_color);
-	box-shadow: var(--sapContent_Informative_Shadow);
+	box-shadow: var(--_ui5_switch_handle_semantic_on_hover_box_shadow);
 }
 
-.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
-	border-color: var(--_ui5_switch_track_semantic_checked_hover_border_color);
-	background: var(--_ui5_switch_track_semantic_success_backgroud_color);
+/* Text */
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-on,
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-text--on {
+	color: var(--_ui5_switch_text_semantic_accept_color);
+}
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-off,
+.ui5-switch-root.ui5-switch--semantic .ui5-switch-text--off {
+	color: var(--_ui5_switch_text_semantic_reject_color);
+}
+
+.ui5-switch-root .ui5-switch-text--on {
+	color: var(--_ui5_switch_text_active_color);
+	overflow: var(--_ui5_switch_text_overflow);
+	text-overflow: ellipsis;
+}
+.ui5-switch-root .ui5-switch-text--off {
+	color: var(--_ui5_switch_text_inactive_color);
+	overflow: var(--_ui5_switch_text_overflow);
+	text-overflow: ellipsis;
 }
 
-.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-icon--on,
-.ui5-switch-root.ui5-switch--semantic:hover .ui5-switch-icon--on {
-	color: var(--_ui5_switch_text_on_semantic_color);
+.ui5-switch-root .ui5-switch-no-label-icon-on,
+.ui5-switch-root .ui5-switch-icon-on {
+	color: var(--_ui5_switch_text_active_color);
 }
 
-.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-icon--off,
-.ui5-switch-root.ui5-switch--semantic:hover .ui5-switch-icon--off {
-	color: var(--_ui5_switch_text_off_semantic_color);
+.ui5-switch-root .ui5-switch-no-label-icon-off,
+.ui5-switch-root .ui5-switch-icon-off {
+	color: var(--_ui5_switch_text_inactive_color);
 }
 
 /* RTL */
-[dir="rtl"].ui5-switch-root .ui5-switch-handle {
-	left: 0;
-	right: -1px;
+[dir="rtl"].ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider {
+	transform: var(--_ui5_switch_rtl_transform_with_label);
 }
 
 [dir="rtl"].ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
 	transform: var(--_ui5_switch_rtl_transform);
 }
 
-[dir="rtl"].ui5-switch-root .ui5-switch-text--on {
-	right: var(--_ui5_switch_text_right);
+[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: auto;
-	left: 0;
+	right: var(--_ui5_switch_text_inactive_left);
+	left: var(--_ui5_switch_text_inactive_right);
 }

package/src/themes/TabContainer.css

@@ -20,8 +20,8 @@
 	padding: 0 1rem;
 	display: flex;
 	align-items: center;
+	background-color: var(--_ui5_tc_header_background);
 	height: var(--_ui5_tc_header_height);
-	background-color: var(--sapObjectHeader_Background);
 	box-shadow: var(--_ui5_tc_header_box_shadow);
 	box-sizing: border-box;
 }
@@ -30,6 +30,14 @@
 	border-top: var(--_ui5_tc_header_border_bottom);
 }
 
+:host([header-background-design="Transparent"]) .ui5-tc__header {
+	background-color: transparent;
+}
+
+:host([header-background-design="Translucent"]) .ui5-tc__header {
+	background-color: var(--_ui5_tc_header_background_translucent);
+}
+
 .ui5-tc-root.ui5-tc--textOnly .ui5-tc__header {
 	height: var(--_ui5_tc_header_height_text_only);
 }
@@ -48,12 +56,15 @@
 }
 
 .ui5-tc__separator:focus {
-    outline: none;
+	outline: none;
 }
 
 .ui5-tc__overflow {
 	flex: 0 0 0;
-	margin: 0 0.25rem;
+}
+
+.ui5-tc__overflow.ui5-tc__overflow--end {
+	padding-inline-start: 0.188rem;
 }
 
 .ui5-tc__overflow[hidden] {
@@ -66,6 +77,10 @@
 	height: 1.5rem;
 }
 
+.ui5-tc__overflow > [ui5-button][focused] {
+	outline-offset: 0.125rem;
+}
+
 .ui5-tc-root.ui5-tc--textOnly .ui5-tc__content {
 	height: calc(100% - var(--_ui5_tc_header_height_text_only)); /* the header height (text only tabs) */
 }
@@ -75,7 +90,7 @@
 	display: flex;
 	height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */
 	padding: 1rem 2rem;
-	background-color: var(--sapGroup_ContentBackground);
+	background-color: var(--_ui5_tc_content_background);
 	border-bottom: var(--_ui5_tc_content_border_bottom);
 	box-sizing: border-box;
 }
@@ -84,6 +99,14 @@
 	border-top: var(--_ui5_tc_content_border_bottom);
 }
 
+:host([content-background-design="Transparent"]) .ui5-tc__content {
+	background-color: transparent;
+}
+
+:host([content-background-design="Translucent"]) .ui5-tc__content {
+	background-color: var(--_ui5_tc_content_background_translucent);
+}
+
 .ui5-tc__content--collapsed {
 	display: none;
 }
@@ -103,27 +126,6 @@
 	display: none;
 }
 
-.ui5-tab-expand-button > [ui5-button] {
-	height: 1.5rem;
-	min-width: 1.5rem;
-	margin-top: 0.25rem;
-	margin-left: 0.625rem;
-}
-.ui5-tab-single-click-icon {
-	margin-left: 0.625rem;
-	float: right;
-}
-
-.ui5-tab-strip-item--singleClickArea {
-	margin-top: 2px;
-}
-
-.ui5-tab-expand-button>[ui5-button]:hover {
-	background-color: var(--sapButton_Hover_Background);
-}
-.ui5-tab-expand-button>[ui5-button]:active {
-	background-color: var(--sapButton_Active_Background);
-}
 /*** Responsive paddings ***/
 
 :host([media-range="S"]) .ui5-tc__header {
@@ -141,9 +143,3 @@
 :host([media-range="XL"]) .ui5-tc__content {
 	padding: 1rem 3rem;
 }
-
-/*** RTL ***/
-[dir=rtl] .ui5-tc__overflow {
-	margin-right: auto;
-	margin-left: 0.25rem;
-}