@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/src/themes/TabInOverflow.css

@@ -1,30 +1,34 @@
+@import "./TabSemanticIcon.css";
+@import "./InvisibleTextStyles.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-semantic-icon {
+	position: absolute;
+	inset-inline-start: -0.25rem;
 }
 
-.ui5-tab-overflow-item--positive {
+.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,41 +38,32 @@
 .ui5-tab-overflow-itemContent {
 	display: flex;
 	align-items: center;
-	padding-right: 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-itemContent-wrapper {
-	padding-left: calc(var(--_ui5-indentation-level, 0) * 1rem);
+	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--selectedSubTab {
 	background-color: var(--sapList_SelectionBackgroundColor);
 }
 
-.ui5-tab-overflow-item [ui5-icon] {
+.ui5-tab-overflow-item [ui5-icon]:not(.ui5-tab-semantic-icon) {
 	width: 1.375rem;
 	height: 1.375rem;
-	padding-right: 1rem;
+	padding-inline-end: 0.75rem;
 	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 {
-	border-top-left-radius: var(--_ui5_tc_overflowItem_focus_border);
-	border-top-right-radius: var(--_ui5_tc_overflowItem_focus_border);
-}
-
-.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;
-}
+}

package/src/themes/TabInStrip.css

@@ -1,3 +1,5 @@
+@import "./TabSemanticIcon.css";
+
 .ui5-tab-strip-item {
 	height: var(--_ui5_tc_header_height);
 	color: var(--_ui5_tc_headerItem_color);
@@ -17,6 +19,7 @@
 }
 
 .ui5-tab-strip-itemText {
+	position: relative;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -25,7 +28,8 @@
 .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] {
+.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline[hidden],
+.ui5-tab-strip-design-description {
 	display: none;
 }
 
@@ -40,28 +44,61 @@
 	pointer-events: none;
 	transition: var(--_ui5_tc_headerItem_transition);
 }
+.ui5-tab-expand-button > [ui5-button] {
+	height: 1.5rem;
+	min-width: 1.5rem;
+	margin-top: 0.25rem;
+	margin-inline-start: 0.625rem;
+}
+
+.ui5-tab-expand-button > [ui5-button]:not([active]) {
+	color: var(--_ui5_tc_headerItem_color);
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-expand-button > [ui5-button]:not([active]) {
+	color: var(--_ui5_tc_headerItem_text_selected_color);
+}
+
+.ui5-tab-expand-button > [ui5-button]:hover:not([active]) {
+	color: var(--_ui5_tc_headerItem_text_selected_hover_color);
+}
+
+.ui5-tab-single-click-icon {
+	margin-inline-start: 0.875rem;
+}
 
 .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--selected .ui5-tab-single-click-icon>[ui5-icon] {
-	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:hover:not(.ui5-tab-strip-item--selected).ui5-tab-strip-item--textOnly {
+.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):not(.ui5-tab-strip-item--disabled) .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--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,
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
 	content: "";
 	position: absolute;
-	bottom: 1px;
+	bottom: 0;
 	left: 0;
 	right: 0;
 	border-bottom: var(--_ui5_tc_headerItemContent_border_bottom);
@@ -106,24 +143,41 @@
 }
 
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
-	bottom: -0.875rem;
+	bottom: -0.9375rem;
 }
 
 .ui5-tab-strip-item--disabled {
 	cursor: default;
-	opacity: 0.5;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 .ui5-tab-strip-item:focus {
 	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);
+.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);
-	outline-offset: var(--_ui5_tc_headerItem_focus_offset);
+	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 {
@@ -138,36 +192,6 @@
 	border-radius: var(--_ui5_tc_headerItemIcon_focus_border_radius);
 }
 
-
-/* focused */
-.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer .ui5-tab-strip-itemContent,
-.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--inline):focus .ui5-tab-strip-itemContent,
-.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 {
-	border: var(--_ui5_tc_headerItemContent_focus_border);
-}
-
-.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 {
@@ -177,10 +201,11 @@
 	position: relative;
 	border: var(--_ui5_tc_headerItemIcon_border);
 	border-radius: 50%;
-	margin-right: 0.25rem;
+	margin-inline-end: 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 {
@@ -201,7 +226,7 @@
 }
 
 .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
-	display: block;
+	display: flex;
 }
 
 .ui5-tab-strip-item--inline .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
@@ -209,7 +234,7 @@
 }
 
 .ui5-tab-strip-item--withIcon .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
-	margin-top: var(--_ui5_tc_item_add_text_margin_top);
+	margin-block-start: var(--_ui5_tc_item_add_text_margin_top);
 }
 
 /*** END Icon and text Tab styles ***/
@@ -224,7 +249,7 @@
 	line-height: var(--_ui5_tc_item_text_line_height);
 }
 
-.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--withAddionalText) .ui5-tab-strip-itemText {
+.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText {
 	padding: 0 0.188rem;
 }
 
@@ -249,13 +274,19 @@
 
 .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
 	font-size: 1.5rem;
-	margin-right: 0.5rem;
+	margin-inline-end: 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-item--positive .ui5-tab-strip-item-icon-outer,
-.ui5-tab-strip-item-semanticIcon--positive::before {
+.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 {
 	color: var(--sapPositiveColor);
 	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
 }
@@ -273,15 +304,20 @@
 	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-item--negative .ui5-tab-strip-item-icon-outer,
-.ui5-tab-strip-item-semanticIcon--negative::before {
+.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 {
 	color: var(--sapNegativeColor);
 	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
 }
@@ -304,9 +340,8 @@
 	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 {
+.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 {
 	color: var(--sapCriticalColor);
 	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
 }
@@ -329,7 +364,7 @@
 	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--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);
@@ -352,34 +387,13 @@
 	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 {
-	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;
+.ui5-tab-strip-item--withIcon .ui5-tab-strip-itemContent .ui5-tab-strip-itemAdditionalText {
+	padding: 0;
 }
 
-.ui5-tab-strip-item--selected:not(.ui5-tab-strip-item--withIcon) .ui5-tab-expand-button>[ui5-button]::after {
-	content: "";
-	position: absolute;
-	bottom: 1px;
-	left: 12px;
-	right: 16px;
-	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);
+.ui5-tab-strip-item .ui5-tab-strip-itemAdditionalText {
+	padding: 0 0.188rem;
+	color: var(--_ui5_tc_headerItem_additional_text_color);
+	font-weight: var(--_ui5_tc_headerItem_additional_text_font_weight);
 }

package/src/themes/TabSemanticIcon.css

@@ -0,0 +1,18 @@
+.ui5-tab-semantic-icon {
+	display: var(--_ui5_tc_headerItemSemanticIcon_display);
+	height: var(--_ui5_tc_headerItemSemanticIcon_size);
+	width: var(--_ui5_tc_headerItemSemanticIcon_size);
+	margin-inline-end: 0.5rem;
+}
+
+.ui5-tab-semantic-icon--positive {
+	color: var(--sapPositiveElementColor);
+}
+
+.ui5-tab-semantic-icon--negative {
+	color: var(--sapNegativeElementColor);
+}
+
+.ui5-tab-semantic-icon--critical {
+	color: var(--sapCriticalElementColor);
+}

package/src/themes/TabSeparatorInOverflow.css

@@ -1,9 +1,10 @@
 .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;
+	margin-inline-start: calc(var(--_ui5-tab-indentation-level) * 0.5rem);
+	margin-inline-end: 0.5rem;
 }
-[ui5-list]>.ui5-tc__separator:first-child {
+
+[ui5-list] > .ui5-tc__separator:first-child {
 	min-height: 0.5rem;
 }

package/src/themes/Table.css

@@ -16,6 +16,12 @@ table {
 	border-collapse: collapse;
 }
 
+.ui5-table-header-row-navigated {
+    width: 0.1875rem;
+    background: var(--sapList_HeaderBackground);
+    vertical-align: middle;
+}
+
 .ui5-table-header-row {
 	color: var(--sapTextColor);
 	height: var(--ui5_table_header_row_height);
@@ -76,6 +82,10 @@ tr {
 	opacity: 0.72;
 }
 
+:host [growing-button] {
+	border-bottom: var(--_ui5_table_load_more_border-bottom);
+}
+
 .ui5-table-select-all-column {
 	width: var(--ui5_table_multiselect_column_width);
 	text-align: center;

package/src/themes/TableCell.css

@@ -19,6 +19,10 @@ td {
 	padding-top: .25rem;
 }
 
+:host([_popined-inline]) {
+	padding-top: 0;
+}
+
 ::slotted([ui5-label]) {
 	color: inherit;
 }

package/src/themes/TableColumn.css

@@ -9,16 +9,12 @@ th {
 	font-size: var(--sapFontMediumSize);
 	padding: 0.5rem;
 	box-sizing: border-box;
-	text-align: left;
+	text-align: start;
 	vertical-align: middle;
 }
 
-th[dir="rtl"] {
-	text-align: right;
-}
-
 :host([first]) th {
-	padding-left: 1rem;
+	padding-inline-start: 1rem;
 }
 
 th ::slotted([ui5-label]) {

package/src/themes/TableGroupRow.css

@@ -28,9 +28,5 @@ td {
 	word-break: break-word;
 	vertical-align: middle;
 	padding: .5rem .25rem .5rem 1rem;
-	text-align: left;
-}
-
-:host [dir="rtl"] td {
-	text-align: right;
+	text-align: start;
 }

package/src/themes/TableRow.css

@@ -27,9 +27,9 @@
 	border-top: 1px solid var(--sapList_BorderColor);
 }
 
-.ui5-table-popin-row td {
+.ui5-table-popin-row td:not(.ui5-table-row-navigated) {
 	padding-top: .5rem;
-	padding-left: 1rem;
+	padding-inline-start: 1rem;
 }
 
 .ui5-table-popin-row:last-child td {
@@ -42,6 +42,15 @@
 	font-size: var(--sapFontSize);
 }
 
+.ui5-table-cell-display-inline {
+	margin-inline-start: 0.5rem;
+}
+
+.ui5-table-display-inline-container {
+	display: flex;
+	align-items: center;
+}
+
 .ui5-table-multi-select-cell {
 	padding: .25rem 0;
 	box-sizing: border-box;
@@ -61,7 +70,7 @@
 }
 
 :host(:not([mode="MultiSelect"])) ::slotted([ui5-table-cell]:not([popined]):first-child) {
-	padding-left: 1rem;
+	padding-inline-start: 1rem;
 }
 
 /** Hover **/
@@ -90,4 +99,25 @@
 :host([selected][type="Active"]) .ui5-table-row-root:hover:not(:active),
 :host([selected][mode="SingleSelect"]) .ui5-table-row-root:hover:not(:active) {
 	background-color: var(--sapList_Hover_SelectionBackground);
-}
+}
+
+/** Navigated **/
+:host([navigated]) .ui5-table-row-root:focus .ui5-table-div-navigated {
+    width: 0.09375rem;
+	top: 2px;
+	inset-inline-end: 2px;
+	bottom: 1px;
+}
+
+:host([navigated]) .ui5-table-row-navigated {
+    vertical-align: middle;
+    padding: 0;
+    position: relative;
+}
+
+:host([navigated]) .ui5-table-div-navigated {
+	width: 0.1875rem;
+    position: absolute;
+	inset: 0;
+    background-color: var(--sapList_SelectionBorderColor);
+}