@ui5/webcomponents 1.2.6 → 1.4.0

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,21 @@
 	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 +124,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,127 +152,150 @@
 	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 {
 	background: var( --_ui5-switch_track-off-active-background);
-}
+} 
 
 /* active & on */
 
@@ -284,87 +303,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--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-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--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-on,
+.ui5-switch-root .ui5-switch-icon-on {
+	color: var(--_ui5_switch_text_active_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

@@ -48,12 +48,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 +69,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) */
 }
@@ -119,10 +126,4 @@
 
 :host([media-range="XL"]) .ui5-tc__content {
 	padding: 1rem 3rem;
-}
-
-/*** RTL ***/
-[dir=rtl] .ui5-tc__overflow {
-	margin-right: auto;
-	margin-left: 0.25rem;
-}
+}

package/src/themes/TabInOverflow.css

@@ -1,30 +1,33 @@
+@import "./TabSemanticIcon.css";
+
 .ui5-tab-overflow-item {
 	color: var(--_ui5_tc_overflowItem_default_color);
 }
 
 .ui5-tab-overflow-item--disabled {
 	cursor: default;
-	opacity: 0.5;
+	opacity: var(--sapContent_DisabledOpacity);
+}
+
+.ui5-tab-overflow-item[hidden] {
+	display: none;
 }
 
-.ui5-tab-overflow-item--positive {
+.ui5-tab-semantic-icon {
+	position: absolute;
+	inset-inline-start: -0.25rem;
+}
+
+.ui5-tab-overflow-item--positive:not(.ui5-tab-overflow-item--disabled) .ui5-tab-overflow-itemContent {
 	color: var(--_ui5_tc_overflowItem_positive_color);
-	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
 }
 
-.ui5-tab-overflow-item--negative {
+.ui5-tab-overflow-item--negative:not(.ui5-tab-overflow-item--disabled) .ui5-tab-overflow-itemContent {
 	color: var(--_ui5_tc_overflowItem_negative_color);
-	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
 }
 
-.ui5-tab-overflow-item--critical {
+.ui5-tab-overflow-item--critical:not(.ui5-tab-overflow-item--disabled) .ui5-tab-overflow-itemContent {
 	color: var(--_ui5_tc_overflowItem_critical_color);
-	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
-}
-
-.ui5-tab-overflow-item--neutral {
-	color: var(--_ui5_tc_overflowItem_neutral_color);
-	border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
 }
 
 .ui5-tab-overflow-item[active] .ui5-tab-overflow-itemContent {
@@ -34,32 +37,32 @@
 .ui5-tab-overflow-itemContent {
 	display: flex;
 	align-items: center;
-	padding: 0 0.5rem;
+	position: relative;
+	padding-inline: 1rem 0.5rem;
 	height: var(--_ui5_tc_item_text);
 	pointer-events: none;
+	font-size: 0.875rem;
 }
 
-.ui5-tab-overflow-item [ui5-icon] {
-	width: 1.375rem;
-	height: 1.375rem;
-	padding-right: 1rem;
-	color: var(--_ui5_tc_overflowItem_current_color);
+.ui5-tab-overflow-itemContent-wrapper {
+	padding-inline-start: calc(var(--_ui5-tab-indentation-level) * 0.5rem + var(--_ui5-tab-extra-indent, 0) * var(--_ui5_tc_overflowItem_extraIndent));
 }
 
-.ui5-tab-overflow-item[hidden] {
-	display: none;
+.ui5-tab-overflow-item--selectedSubTab {
+	background-color: var(--sapList_SelectionBackgroundColor);
 }
 
-.ui5-tab-container-responsive-popover [ui5-li-custom][focused]:first-child::part(native-li)::after {
-	border-top-left-radius: var(--_ui5_tc_overflowItem_focus_border);
-	border-top-right-radius: var(--_ui5_tc_overflowItem_focus_border);
+.ui5-tab-overflow-item [ui5-icon]:not(.ui5-tab-semantic-icon) {
+	width: 1.375rem;
+	height: 1.375rem;
+	padding-inline-end: 0.75rem;
+	color: var(--_ui5_tc_overflowItem_current_color);
 }
 
-.ui5-tab-container-responsive-popover [ui5-li-custom][focused]:last-child::part(native-li)::after {
-	border-bottom-left-radius: var(--_ui5_tc_overflowItem_focus_border);
-	border-bottom-right-radius: var(--_ui5_tc_overflowItem_focus_border);
+.ui5-tab-container-responsive-popover [ui5-li-custom][focused]::part(native-li)::after {
+	inset: var(--_ui5_tc_overflowItem_focus_offset);
 }
 
 .ui5-tab-container-responsive-popover::part(content) {
 	padding: 0;
-}
+}