@ui5/webcomponents 1.0.2 → 1.1.0

package/src/themes/TabContainer.css

@@ -26,12 +26,6 @@
 	box-sizing: border-box;
 }
 
-.ui5-tc__headerInnerContainer {
-	position: relative;
-	flex: 1 1 100%;
-	min-width: 0; /* fixes chrome flex issue */
-}
-
 :host([tabs-placement="Bottom"]) .ui5-tc__header {
 	border-top: var(--_ui5_tc_header_border_bottom);
 }
@@ -40,66 +34,36 @@
 	height: var(--_ui5_tc_header_height_text_only);
 }
 
-.ui5-tc-root.ui5-tc--textOnly.ui5-tc--withAdditonalText.ui5-tc--standardTabLayout .ui5-tc__header {
+.ui5-tc-root.ui5-tc--textOnly.ui5-tc--withAdditionalText.ui5-tc--standardTabLayout .ui5-tc__header {
 	height: var(--_ui5_tc_header_height_text_with_additional_text);
 }
 
-.ui-tc__headerScrollContainer {
-	box-sizing: border-box;
+.ui5-tc__tabStrip {
+	flex: 1;
+	display: flex;
 	overflow: hidden;
-	flex: 1 1 100%;
-}
-
-.ui5-tc__headerList {
+	box-sizing: border-box;
 	position: relative;
-	display: flex;
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-.ui5-tc__separator {
-	width: 0;
-	border-left: 2px solid var(--sapList_BorderColor);
-	margin: 0.5rem 0.25rem;
+	white-space: nowrap;
 }
 
 .ui5-tc__separator:focus {
     outline: none;
 }
 
-.ui5-tc__headerArrow {
-	position: absolute;
-	top: 0;
-	bottom: 1px;
-	z-index: 1;
-	display: flex;
-	align-items: center;
-	color: var(--sapContent_IconColor);
-	background-color: var(--sapObjectHeader_Background);
-	padding: 0 0.25rem;
-	visibility: hidden;
-}
-
-.ui5-tc__headerArrowLeft {
-	left: 0;
-}
-
-.ui5-tc__headerArrowRight {
-	right: 0;
-}
-
-.ui5-tc__headerArrow:hover,
-.ui5-tc__headerArrow:active {
-	color: var(--sapHighlightColor);
+.ui5-tc__overflow {
+	flex: 0 0 0;
+	margin: 0 0.25rem;
 }
 
-.ui5-tc__headerArrow--visible {
-	visibility: visible;
+.ui5-tc__overflow[hidden] {
+	display: none;
 }
 
-.ui-tc__overflowButton {
-	margin: 0 0.25rem;
+.ui5-tc__overflow > [ui5-button] {
+	margin-top: 0.25rem;
+	border-radius: 0.75rem;
+	height: 1.5rem;
 }
 
 .ui5-tc-root.ui5-tc--textOnly .ui5-tc__content {
@@ -117,7 +81,7 @@
 }
 
 :host([tabs-placement="Bottom"]) .ui5-tc__content {
-    border-top: var(--_ui5_tc_content_border_bottom);
+	border-top: var(--_ui5_tc_content_border_bottom);
 }
 
 .ui5-tc__content--collapsed {
@@ -158,7 +122,7 @@
 }
 
 /*** RTL ***/
-[dir=rtl] .ui-tc__overflowButton {
+[dir=rtl] .ui5-tc__overflow {
 	margin-right: auto;
 	margin-left: 0.25rem;
 }

package/src/themes/TabInOverflow.css

@@ -1,49 +1,53 @@
 .ui5-tab-overflow-item {
-    color: var(--_ui5_tc_overflowItem_default_color);
+	color: var(--_ui5_tc_overflowItem_default_color);
 }
 
 .ui5-tab-overflow-item--disabled {
-    cursor: default;
-    opacity: 0.5;
+	cursor: default;
+	opacity: 0.5;
 }
 
 .ui5-tab-overflow-item--positive {
-    color: var(--_ui5_tc_overflowItem_positive_color);
-    border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
+	color: var(--_ui5_tc_overflowItem_positive_color);
+	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
 }
 
 .ui5-tab-overflow-item--negative {
-    color: var(--_ui5_tc_overflowItem_negative_color);
-    border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
+	color: var(--_ui5_tc_overflowItem_negative_color);
+	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
 }
 
 .ui5-tab-overflow-item--critical {
-    color: var(--_ui5_tc_overflowItem_critical_color);
-    border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
+	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);
+	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 {
-    color: var(--sapList_Active_TextColor);
+	color: var(--sapList_Active_TextColor);
 }
 
 .ui5-tab-overflow-itemContent {
-    display: flex;
-    align-items: center;
-    padding: 0 0.5rem;
-    height: var(--_ui5_tc_item_text);
-    pointer-events: none;
+	display: flex;
+	align-items: center;
+	padding: 0 0.5rem;
+	height: var(--_ui5_tc_item_text);
+	pointer-events: none;
 }
 
 .ui5-tab-overflow-item [ui5-icon] {
-    width: 1.375rem;
-    height: 1.375rem;
-    padding-right: 1rem;
-    color: var(--_ui5_tc_overflowItem_current_color);
+	width: 1.375rem;
+	height: 1.375rem;
+	padding-right: 1rem;
+	color: var(--_ui5_tc_overflowItem_current_color);
+}
+
+.ui5-tab-overflow-item[hidden] {
+	display: none;
 }
 
 .ui5-tab-container-responsive-popover [ui5-li-custom][focused]:first-child::part(native-li)::after {

package/src/themes/TabInStrip.css

@@ -1,37 +1,56 @@
 .ui5-tab-strip-item {
-    color: var(--_ui5_tc_headerItem_color);
-    cursor: pointer;
-    flex-shrink: 0;
-    padding: var(--_ui5_tc_headeritem_padding);
-    font-size: var(--sapFontSmallSize);
+	height: var(--_ui5_tc_header_height);
+	color: var(--_ui5_tc_headerItem_color);
+	cursor: pointer;
+	padding: var(--_ui5_tc_headeritem_padding);
+	font-size: var(--sapFontSmallSize);
 	font-weight: var(--_ui5_tc_headeritem_text_font_weight);
-    text-shadow: var(--sapContent_TextShadow);
-    position: relative;
-    display: inline-flex;
-    align-items: center;
+	text-shadow: var(--sapContent_TextShadow);
+	position: relative;
+	display: flex;
+	align-items: center;
 	justify-content: center;
+	flex-shrink: 0;
 	min-width: 2rem;
-	height: var(--_ui5_tc_header_height);
+	max-width: 100%;
+	box-sizing: border-box;
+}
+
+.ui5-tab-strip-itemText {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.ui5-tc__separator[hidden],
+.ui5-tab-strip-item[hidden],
+.ui5-tab-strip-item--textOnly[hidden],
+.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline[hidden] {
+	display: none;
 }
 
 .ui5-tab-strip-itemContent {
+	display: flex;
+	min-width: 0;
+	justify-content: center;
+	flex-direction: column;
 	padding: var(--_ui5_tc_headerItemContent_padding);
 	border: var(--_ui5_tc_headerItemContent_default_focus_border);
 	border-radius: var(--_ui5_tc_headerItemContent_focus_border_radius);
-    pointer-events: none;
+	pointer-events: none;
 	transition: var(--_ui5_tc_headerItem_transition);
 }
 
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
-    color: var(--_ui5_tc_headeritem_text_selected_color);
+	color: var(--_ui5_tc_headeritem_text_selected_color);
 }
 
 .ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected).ui5-tab-strip-item--textOnly {
-    color: var(--_ui5_tc_headerItem_text_hover_color);
+	color: var(--_ui5_tc_headerItem_text_hover_color);
 }
 
 .ui5-tab-strip-item:hover.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
-    color: var(--_ui5_tc_headeritem_text_selected_hover_color);
+	color: var(--_ui5_tc_headeritem_text_selected_hover_color);
 }
 
 /* the outline when hover or selected */
@@ -42,14 +61,14 @@
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
 	content: "";
-    position: absolute;
-    bottom: 1px;
-    left: 0;
-    right: 0;
+	position: absolute;
+	bottom: 1px;
+	left: 0;
+	right: 0;
 	border-bottom: var(--_ui5_tc_headerItemContent_border_bottom);
 	border-radius: var(--_ui5_tc_headerItemContent_border_radius);
 	background-color: var(--_ui5_tc_headerItemContent_border_bg);
-    height: var(--_ui5_tc_headerItemContent_border_height);
+	height: var(--_ui5_tc_headerItemContent_border_height);
 }
 
 /* the outline when hover and not selected */
@@ -73,8 +92,8 @@
 .ui5-tab-strip-item-icon-outer:hover .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after {
-    left: var(--_ui5_tc_headerItemContent_offset);
-    right: var(--_ui5_tc_headerItemContent_offset);
+	left: var(--_ui5_tc_headerItemContent_offset);
+	right: var(--_ui5_tc_headerItemContent_offset);
 }
 
 /* the outline offset when focused */
@@ -83,27 +102,27 @@
 .ui5-tab-strip-item-icon-outer:focus .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::after {
-    left: var(--_ui5_tc_headerItemContent_focus_offset);
-    right: var(--_ui5_tc_headerItemContent_focus_offset);
+	left: var(--_ui5_tc_headerItemContent_focus_offset);
+	right: var(--_ui5_tc_headerItemContent_focus_offset);
 }
 
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
-    bottom: -0.875rem;
+	bottom: -0.875rem;
 }
 
 .ui5-tab-strip-item--disabled {
-    cursor: default;
-    opacity: 0.5;
+	cursor: default;
+	opacity: 0.5;
 }
 
 .ui5-tab-strip-item:focus {
-    outline: none;
+	outline: none;
 }
 
 .ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--inline):focus .ui5-tab-strip-itemText,
 .ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent,
 .ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent {
-    outline: var(--_ui5_tc_headerItem_focus_border);
+	outline: var(--_ui5_tc_headerItem_focus_border);
 	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
 	outline-offset: var(--_ui5_tc_headerItem_focus_offset);
 }
@@ -130,68 +149,68 @@
 }
 
 .ui5-tab-strip-item-semanticIcon::before {
-    display: var(--_ui5_tc_headerItemSemanticIcon_display);
-    font-family: "SAP-icons";
-    font-size: 0.75rem;
-    margin-right: 0.25rem;
-    speak: none;
-    -webkit-font-smoothing: antialiased;
+	display: var(--_ui5_tc_headerItemSemanticIcon_display);
+	font-family: "SAP-icons";
+	font-size: 0.75rem;
+	margin-right: 0.25rem;
+	speak: none;
+	-webkit-font-smoothing: antialiased;
 }
 
 .ui5-tab-strip-item-semanticIcon--positive::before {
-    content: "\e1ab";
+	content: "\e1ab";
 }
 
 .ui5-tab-strip-item-semanticIcon--negative::before {
-    content: "\e1ac";
+	content: "\e1ac";
 }
 
 .ui5-tab-strip-item-semanticIcon--critical::before {
-    content: "\e1ae";
+	content: "\e1ae";
 }
 
 /*** Icon and text Tab styles ***/
 
 .ui5-tab-strip-item-icon-outer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    border: var(--_ui5_tc_headerItemIcon_border);
-    border-radius: 50%;
-    margin-right: 0.25rem;
-    height: var(--_ui5_tc_item_icon_circle_size);
-    width: var(--_ui5_tc_item_icon_circle_size);
-    pointer-events: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	border: var(--_ui5_tc_headerItemIcon_border);
+	border-radius: 50%;
+	margin-right: 0.25rem;
+	height: var(--_ui5_tc_item_icon_circle_size);
+	width: var(--_ui5_tc_item_icon_circle_size);
+	pointer-events: none;
 }
 
 .ui5-tab-strip-item-icon {
-    width: var(--_ui5_tc_item_icon_size);
-    height: var(--_ui5_tc_item_icon_size);
-    color: var(--_ui5_tc_headerItemIcon_color);
-    text-shadow: var(--sapContent_TextShadow);
-    pointer-events: none;
+	width: var(--_ui5_tc_item_icon_size);
+	height: var(--_ui5_tc_item_icon_size);
+	color: var(--_ui5_tc_headerItemIcon_color);
+	text-shadow: var(--sapContent_TextShadow);
+	pointer-events: none;
 }
 
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
-    background-color: var(--_ui5_tc_headerItemIcon_selected_background);
+	background-color: var(--_ui5_tc_headerItemIcon_selected_background);
 }
 
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
-    color: var(--_ui5_tc_headerItemIcon_selected_color);
-    text-shadow: none;
+	color: var(--_ui5_tc_headerItemIcon_selected_color);
+	text-shadow: none;
 }
 
 .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
-    display: block;
+	display: block;
 }
 
 .ui5-tab-strip-item--inline .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
-    display: inline;
+	display: inline;
 }
 
 .ui5-tab-strip-item--withIcon .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
-    margin-top: var(--_ui5_tc_item_add_text_margin_top);
+	margin-top: var(--_ui5_tc_item_add_text_margin_top);
 }
 
 /*** END Icon and text Tab styles ***/
@@ -199,11 +218,11 @@
 /*** TextOnly Tab styles ***/
 .ui5-tab-strip-item--textOnly,
 .ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline {
-    font-size: var(--sapFontSize);
-    height: var(--_ui5_tc_item_text_only_height);
-    display: flex;
-    align-items: center;
-    line-height: var(--_ui5_tc_item_text_line_height);
+	font-size: var(--sapFontSize);
+	height: var(--_ui5_tc_item_text_only_height);
+	display: flex;
+	align-items: center;
+	line-height: var(--_ui5_tc_item_text_line_height);
 }
 
 .ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--withAddionalText) .ui5-tab-strip-itemText {
@@ -220,113 +239,118 @@
 /*** Mixed Mode Tab styles ***/
 .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemText,
 .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
-    display: inline-block;
-    vertical-align: middle;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent {
+	flex-direction: row;
+	align-items: center;
 }
 
 .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
-    font-size: 1.5rem;
-    margin-right: 0.5rem;
+	font-size: 1.5rem;
+	margin-right: 0.5rem;
 }
 
 /*** Semantic states ***/
 .ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly,
 .ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer,
 .ui5-tab-strip-item-semanticIcon--positive::before {
-    color: var(--sapPositiveColor);
-    border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
+	color: var(--sapPositiveColor);
+	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
 }
 
 .ui5-tab-strip-item--positive .ui5-tab-strip-item-icon {
-    color: var(--_ui5_tc_headerItem_positive_color);
+	color: var(--_ui5_tc_headerItem_positive_color);
 }
 
 .ui5-tab-strip-item--positive.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
-    background-color: var(--_ui5_tc_headerItemIcon_positive_selected_background);
-    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+	background-color: var(--_ui5_tc_headerItemIcon_positive_selected_background);
+	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
 }
 
 .ui5-tab-strip-item--positive.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
-    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
 }
 
 .ui5-tab-strip-item.ui5-tab-strip-item--positive .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer::after {
-    border-color: var(--_ui5_tc_headerItem_positive_border_color);
+	border-color: var(--_ui5_tc_headerItem_positive_border_color);
 	background-color: var(--_ui5_tc_headerItem_positive_border_bg);
 }
 
 .ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly,
 .ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer,
 .ui5-tab-strip-item-semanticIcon--negative::before {
-    color: var(--sapNegativeColor);
-    border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
+	color: var(--sapNegativeColor);
+	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
 }
 
 .ui5-tab-strip-item--negative .ui5-tab-strip-item-icon {
-    color: var(--_ui5_tc_headerItem_negative_color);
+	color: var(--_ui5_tc_headerItem_negative_color);
 }
 
 .ui5-tab-strip-item--negative.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
-    background-color: var(--_ui5_tc_headerItemIcon_negative_selected_background);
+	background-color: var(--_ui5_tc_headerItemIcon_negative_selected_background);
 }
 
 .ui5-tab-strip-item--negative.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
-    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
 }
 
 .ui5-tab-strip-item.ui5-tab-strip-item--negative .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer::after {
-    border-color: var(--_ui5_tc_headerItem_negative_border_color);
-    background-color: var(--_ui5_tc_headerItem_negative_border_bg);
+	border-color: var(--_ui5_tc_headerItem_negative_border_color);
+	background-color: var(--_ui5_tc_headerItem_negative_border_bg);
 }
 
 .ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly,
 .ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer,
 .ui5-tab-strip-item-semanticIcon--critical::before {
-    color: var(--sapCriticalColor);
-    border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
+	color: var(--sapCriticalColor);
+	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
 }
 
 .ui5-tab-strip-item--critical .ui5-tab-strip-item-icon {
-    color: var(--_ui5_tc_headerItem_critical_color);
+	color: var(--_ui5_tc_headerItem_critical_color);
 }
 
 .ui5-tab-strip-item--critical.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
-    background-color: var(--_ui5_tc_headerItemIcon_critical_selected_background);
+	background-color: var(--_ui5_tc_headerItemIcon_critical_selected_background);
 }
 
 .ui5-tab-strip-item--critical.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
-    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
 }
 
 .ui5-tab-strip-item.ui5-tab-strip-item--critical .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer::after {
-    border-color: var(--_ui5_tc_headerItem_critical_border_color);
+	border-color: var(--_ui5_tc_headerItem_critical_border_color);
 	background-color: var(--_ui5_tc_headerItem_critical_border_bg);
 }
 
 .ui5-tab-strip-item--nutral.ui5-tab-strip-item--textOnly,
 .ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer {
-    color: var(--sapNeutralColor);
-    border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
+	color: var(--sapNeutralColor);
+	border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
 }
 
 .ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon {
-    color: var(--_ui5_tc_headerItem_neutral_color);
+	color: var(--_ui5_tc_headerItem_neutral_color);
 }
 
 .ui5-tab-strip-item--neutral.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
-    background-color: var(--_ui5_tc_headerItemIcon_neutral_selected_background);
+	background-color: var(--_ui5_tc_headerItemIcon_neutral_selected_background);
 }
 
 .ui5-tab-strip-item--neutral.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
-    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
 }
 
 .ui5-tab-strip-item.ui5-tab-strip-item--neutral .ui5-tab-strip-itemContent::after,
 .ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon::after {
-    border-color: var(--_ui5_tc_headerItem_neutral_border_color);
+	border-color: var(--_ui5_tc_headerItem_neutral_border_color);
 	background-color: var(--_ui5_tc_headerItem_neutral_border_bg);
 }
 .ui5-tab-strip-item .ui5-tab-strip-itemAdditionalText {
@@ -335,16 +359,16 @@
 /*** RTL ***/
 
 [dir=rtl] .ui5-tab-strip-item-semanticIcon::before {
-    margin-left: 0.25rem;
-    margin-right: 0;
+	margin-left: 0.25rem;
+	margin-right: 0;
 }
 
 [dir=rtl] .ui5-tab-strip-item-icon-outer {
-    margin-left: 0.25rem;
-    margin-right: 0;
+	margin-left: 0.25rem;
+	margin-right: 0;
 }
 
 [dir=rtl] .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
-    margin-right: 0;
-    margin-left: 0.5rem;
-}
+	margin-right: 0;
+	margin-left: 0.5rem;
+}

package/src/themes/TabSeparatorInOverflow.css

@@ -0,0 +1,8 @@
+.ui5-tc__separator {
+	min-height: 0.25rem;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	margin: 0 0.5rem;
+}
+[ui5-list]>.ui5-tc__separator:first-child {
+	min-height: 0.5rem;
+}

package/src/themes/TabSeparatorInStrip.css

@@ -0,0 +1,5 @@
+.ui5-tc__separator {
+	width: 0;
+	border-left: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	margin: 0.5rem 0.25rem;
+}

package/src/themes/Table.css

@@ -18,7 +18,7 @@ table {
 
 .ui5-table-header-row {
 	color: var(--sapTextColor);
-	height: 3rem;
+	height: var(--ui5_table_header_row_height);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: var(--ui5_table_header_row_font_weight);

package/src/themes/TableColumn.css

@@ -11,7 +11,6 @@ th {
 	font-size: var(--sapFontMediumSize);
 	padding: 0.25rem;
 	box-sizing: border-box;
-	height: 3rem;
 	text-align: left;
 	vertical-align: middle;
 }