@ui5/webcomponents 0.0.0-b4cbc43ba → 0.0.0-b93c2a321

package/src/themes/TabContainer.css

@@ -0,0 +1,161 @@
+/* ============================= */
+/* Global Base parameters        */
+/* ============================= */
+:host(:not([hidden])) {
+	display: inline-block;
+	width: 100%;
+}
+
+.ui5-tc-root {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: 1rem;
+}
+
+.ui5-tc__header {
+	position: relative;
+	padding: 0 1rem;
+	display: flex;
+	align-items: center;
+	height: var(--_ui5_tc_header_height);
+	background-color: var(--sapObjectHeader_Background);
+	box-shadow: var(--_ui5_tc_header_box_shadow);
+	box-sizing: border-box;
+}
+
+:host([tabs-placement="Bottom"]) .ui5-tc__header {
+	border-top: var(--_ui5_tc_header_border_bottom);
+}
+
+.ui5-tc-root.ui5-tc--textOnly .ui5-tc__header {
+	height: var(--_ui5_tc_header_height_text_only);
+}
+
+.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);
+}
+
+.ui5-tc__tabStrip {
+	flex: 1;
+	display: flex;
+	overflow: hidden;
+	box-sizing: border-box;
+	position: relative;
+	white-space: nowrap;
+}
+
+.ui5-tc__separator:focus {
+	outline: none;
+}
+
+.ui5-tc__overflow {
+	flex: 0 0 0;
+}
+
+.ui5-tc__overflow.ui5-tc__overflow--end {
+	padding-left: 0.188rem;
+}
+
+.ui5-tc__overflow[hidden] {
+	display: none;
+}
+
+.ui5-tc__overflow > [ui5-button] {
+	margin-top: 0.25rem;
+	border-radius: 0.75rem;
+	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) */
+}
+
+.ui5-tc__content {
+	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(--sapGroup_ContentBackground);
+	border-bottom: var(--_ui5_tc_content_border_bottom);
+	box-sizing: border-box;
+}
+
+:host([tabs-placement="Bottom"]) .ui5-tc__content {
+	border-top: var(--_ui5_tc_content_border_bottom);
+}
+
+.ui5-tc__content--collapsed {
+	display: none;
+}
+
+.ui5-tc--transparent .ui5-tc__content {
+	background-color: transparent;
+}
+
+.ui5-tc__contentItem {
+	max-height: 100%;
+	display: flex;
+	flex-grow: 1;
+	overflow: auto;
+}
+
+.ui5-tc__contentItem[hidden] {
+	display: none;
+}
+
+.ui5-tab-expand-button > [ui5-button] {
+	height: 1.5rem;
+	min-width: 1.5rem;
+	margin-top: 0.25rem;
+	margin-left: 0.625rem;
+	color: var(--_ui5_tc_headerItem_color);
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-expand-button > [ui5-button] {
+	color: var(--_ui5_tc_headeritem_text_selected_color);
+}
+
+.ui5-tab-expand-button > [ui5-button]:hover {
+	color: var(--_ui5_tc_headeritem_text_selected_hover_color);
+}
+
+.ui5-tab-single-click-icon {
+	margin-left: 0.875rem;
+}
+
+.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 {
+	padding: 0;
+}
+
+:host([media-range="S"]) .ui5-tc__content {
+	padding: 1rem;
+}
+
+:host([media-range="XL"]) .ui5-tc__header {
+	padding: 0 2rem;
+}
+
+: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

@@ -0,0 +1,71 @@
+.ui5-tab-overflow-item {
+	color: var(--_ui5_tc_overflowItem_default_color);
+}
+
+.ui5-tab-overflow-item--disabled {
+	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);
+}
+
+.ui5-tab-overflow-item--negative {
+	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);
+}
+
+.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 {
+	color: var(--sapList_Active_TextColor);
+}
+
+.ui5-tab-overflow-itemContent {
+	display: flex;
+	align-items: center;
+	padding-right: 0.5rem;
+	height: var(--_ui5_tc_item_text);
+	pointer-events: none;
+	font-size: 0.875rem;
+}
+
+.ui5-tab-overflow-itemContent-wrapper {
+	padding-left: calc(var(--_ui5-indentation-level, 0) * 1rem);
+}
+
+.ui5-tab-overflow-item--selectedSubTab {
+	background-color: var(--sapList_SelectionBackgroundColor);
+}
+
+.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-item[hidden] {
+	display: none;
+}
+
+.ui5-tab-container-responsive-popover [ui5-li-custom][focused]::part(native-li)::after {
+	top: var(--_ui5_tc_overflowItem_focus_offset);
+	right: var(--_ui5_tc_overflowItem_focus_offset);
+	bottom: var(--_ui5_tc_overflowItem_focus_offset);
+	left: var(--_ui5_tc_overflowItem_focus_offset);
+}
+
+.ui5-tab-container-responsive-popover::part(content) {
+	padding: 0;
+}

package/src/themes/TabInStrip.css

@@ -0,0 +1,413 @@
+.ui5-tab-strip-item {
+	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: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	min-width: 2rem;
+	max-width: 100%;
+	box-sizing: border-box;
+}
+
+.ui5-tab-strip-itemText {
+	position: relative;
+	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;
+	transition: var(--_ui5_tc_headerItem_transition);
+}
+
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
+	color: var(--_ui5_tc_headeritem_text_selected_color);
+}
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon>[ui5-icon] {
+	color: var(--_ui5_tc_headeritem_text_selected_color);
+}
+
+.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText {
+	display: flex;
+	align-items: center;
+}
+
+.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon {
+	display: flex;
+}
+
+.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon>[ui5-icon] {
+	color: var(--_ui5_tc_headerItem_color);
+}
+.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(ui5-tab-strip-item--negative).ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--singleClickArea.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-single-click-icon>[ui5-icon] {
+	color: var(--_ui5_tc_headerItem_text_hover_color);
+}
+
+/* the outline when hover or selected */
+.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,
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
+	content: "";
+	position: absolute;
+	bottom: 0;
+	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);
+}
+
+/* the outline when hover and not selected */
+.ui5-tab-strip-item--textOnly:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item-icon-outer:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-strip-itemContent::after {
+	border-color: var(--_ui5_tc_headerItem_hover_border_bg);
+	background-color: var(--_ui5_tc_headerItem_hover_border_bg);
+}
+
+/* the outline when hover and selected */
+.ui5-tab-strip-item--textOnly:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item-icon-outer:hover.ui5-tab-strip-item--selected .ui5-tab-strip-itemContent::after {
+	background-color: var(--_ui5_tc_headerItem_hover_selected_hover_border_bg);
+}
+
+/* the outline offset when hover and selected */
+.ui5-tab-strip-item--textOnly:hover .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:hover .ui5-tab-strip-itemContent::after,
+.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);
+}
+
+/* the outline offset when focused */
+.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::after,
+.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);
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
+	bottom: -0.9375rem;
+}
+
+.ui5-tab-strip-item--disabled {
+	cursor: default;
+	opacity: 0.5;
+}
+
+.ui5-tab-strip-item:focus {
+	outline: none;
+}
+
+.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemText::before,
+.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemText::before {
+	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
+	content: "";
+	pointer-events: none;
+	position: absolute;
+	border: var(--_ui5_tc_headerItem_focus_border);
+	left: var(--_ui5_tc_headerItem_text_focus_border_offset_left);
+	right: var(--_ui5_tc_headerItem_text_focus_border_offset_right);
+	top: var(--_ui5_tc_headerItem_text_focus_border_offset_top);
+	bottom: var(--_ui5_tc_headerItem_text_focus_border_offset_bottom);
+}
+
+.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::before {
+	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
+	content: "";
+	pointer-events: none;
+	position: absolute;
+	border: var(--_ui5_tc_headerItem_focus_border);
+	left: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_left);
+	right: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_right);
+	top: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_top);
+	bottom: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom);
+}
+
+.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer::before {
+	content: "";
+	pointer-events: none;
+	position: absolute;
+	border: var(--_ui5_tc_headerItem_focus_border);
+	left: var(--_ui5_tc_headerItem_focus_border_offset);
+	right: var(--_ui5_tc_headerItem_focus_border_offset);
+	top: var(--_ui5_tc_headerItem_focus_border_offset);
+	bottom: var(--_ui5_tc_headerItem_focus_border_offset);
+	border-radius: var(--_ui5_tc_headerItemIcon_focus_border_radius);
+}
+
+.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;
+}
+
+.ui5-tab-strip-item-semanticIcon--positive::before {
+	content: "\e1ab";
+}
+
+.ui5-tab-strip-item-semanticIcon--negative::before {
+	content: "\e1ac";
+}
+
+.ui5-tab-strip-item-semanticIcon--critical::before {
+	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;
+	background-color: var(--_ui5_tc_headerItemIcon_background_color);
+}
+
+.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;
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+	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;
+}
+
+.ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
+	display: block;
+}
+
+.ui5-tab-strip-item--inline .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
+	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);
+}
+
+/*** END Icon and text Tab styles ***/
+
+/*** 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);
+}
+
+.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText {
+	padding: 0 0.188rem;
+}
+
+.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--withAddionalText {
+	justify-content: flex-start;
+	height: var(--_ui5_tc_item_text_only_with_additional_text_height);
+}
+
+/*** END TextOnly Tab styles ***/
+
+/*** 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;
+}
+
+.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;
+}
+
+.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemText {
+	color: var(--_ui5_tc_mixedMode_itemText_color);
+	font-family: var(--_ui5_tc_mixedMode_itemText_font_family);
+	font-size: var(--_ui5_tc_mixedMode_itemText_font_size);
+	font-weight: var(--_ui5_tc_mixedMode_itemText_font_weight);
+}
+
+/*** Semantic states ***/
+.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
+.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);
+}
+
+.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon {
+	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);
+}
+
+.ui5-tab-strip-item--positive.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+	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-outer::after {
+	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-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);
+	background-color: var(--_ui5_tc_headerItem_positive_border_bg);
+}
+
+.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
+.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);
+}
+
+.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon {
+	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);
+}
+
+.ui5-tab-strip-item--negative.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+	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);
+}
+
+.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
+.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);
+}
+
+.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon {
+	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);
+}
+
+.ui5-tab-strip-item--critical.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+	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);
+	background-color: var(--_ui5_tc_headerItem_critical_border_bg);
+}
+
+.ui5-tab-strip-item--neutral.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
+.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer {
+	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);
+}
+
+.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);
+}
+
+.ui5-tab-strip-item--neutral.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+	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);
+	background-color: var(--_ui5_tc_headerItem_neutral_border_bg);
+}
+
+.ui5-tab-strip-item--withIcon .ui5-tab-strip-itemContent .ui5-tab-strip-itemAdditionalText {
+	padding: 0px;
+}
+
+.ui5-tab-strip-item .ui5-tab-strip-itemAdditionalText {
+	padding: 0px 0.188rem;
+	color: var(--_ui5_tc_headeritem_additional_text_color);
+	font-weight: var(--_ui5_tc_headeritem_additional_text_font_weight);
+}
+/*** RTL ***/
+
+[dir=rtl] .ui5-tab-strip-item-semanticIcon::before {
+	margin-left: 0.25rem;
+	margin-right: 0;
+}
+
+[dir=rtl] .ui5-tab-strip-item-icon-outer {
+	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;
+}

package/src/themes/TabSeparatorInOverflow.css

@@ -0,0 +1,9 @@
+.ui5-tc__separator {
+	min-height: 0.25rem;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	margin-left: calc(var(--_ui5-indentation-level, 0) * 1rem);
+	margin-right: 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;
+}