@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/src/themes/ResponsivePopoverCommon.css

@@ -37,9 +37,9 @@
 
 }
 
-.input-root-phone [value-state="Negative"] .inputIcon[data-ui5-compact-size],
-.input-root-phone [value-state="Positive"] .inputIcon[data-ui5-compact-size],
-.input-root-phone [value-state="Critical"] .inputIcon[data-ui5-compact-size] {
+.input-root-phone [value-state="Error"] [input-icon][data-ui5-compact-size],
+.input-root-phone [value-state="Success"] [input-icon][data-ui5-compact-size],
+.input-root-phone [value-state="Warning"] [input-icon][data-ui5-compact-size] {
 	padding: .1875rem .5rem
 }
 
@@ -83,64 +83,64 @@
 	border-width: var(--_ui5_input_state_border_width);
 }
 
-.input-root-phone[value-state="Negative"] [inner-input],
-.input-root-phone[value-state="Critical"] [inner-input] {
+.input-root-phone[value-state="Error"] [inner-input],
+.input-root-phone[value-state="Warning"] [inner-input] {
 	font-style: var(--_ui5_input_error_warning_font_style);
 }
 
-.input-root-phone[value-state="Negative"] [inner-input] {
+.input-root-phone[value-state="Error"] [inner-input] {
 	font-weight: var(--_ui5_input_error_font_weight);
 }
 
-.input-root-phone[value-state="Negative"]:not([readonly]) {
+.input-root-phone[value-state="Error"]:not([readonly]) {
 	background: var(--sapField_InvalidBackgroundStyle);
 	background-color: var(--sapField_InvalidBackground);
 	border-color: var(--_ui5_input_value_state_error_border_color);
 }
 
-.input-root-phone[value-state="Negative"]:not([readonly]) [inner-input]:focus {
+.input-root-phone[value-state="Error"]:not([readonly]) [inner-input]:focus {
 	background-color: var(--_ui5_input_focused_value_state_error_background);
 	border-color: var(--_ui5_input_focused_value_state_error_border_color);
 }
 
-.input-root-phone[value-state="Negative"]:not([readonly]):focus-within:before {
+.input-root-phone[value-state="Error"]:not([readonly]):focus-within:before {
 	border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
 }
 
-.input-root-phone[value-state="Negative"]:not([readonly]):not([disabled]),
-.input-root-phone[value-state="Critical"]:not([readonly]):not([disabled]),
+.input-root-phone[value-state="Error"]:not([readonly]):not([disabled]),
+.input-root-phone[value-state="Warning"]:not([readonly]):not([disabled]),
 .input-root-phone[value-state="Information"]:not([readonly]):not([disabled]) {
 	border-style: var(--_ui5_input_error_warning_border_style);
 }
 
-.input-root-phone[value-state="Critical"]:not([readonly]) {
+.input-root-phone[value-state="Warning"]:not([readonly]) {
 	background: var(--sapField_WarningBackgroundStyle);
 	background-color: var(--sapField_WarningBackground);
 	border-color: var(--_ui5_input_value_state_warning_border_color);
 }
 
-.input-root-phone[value-state="Critical"]:not([readonly]) [inner-input]:focus {
+.input-root-phone[value-state="Warning"]:not([readonly]) [inner-input]:focus {
 	background-color: var(--_ui5_input_focused_value_state_warning_background);
 	border-color: var(--_ui5_input_focused_value_state_warning_border_color);
 }
 
-.input-root-phone[value-state="Critical"]:not([readonly]):focus-within:before {
+.input-root-phone[value-state="Warning"]:not([readonly]):focus-within:before {
 	border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
 }
 
-.input-root-phone[value-state="Positive"]:not([readonly]) {
+.input-root-phone[value-state="Success"]:not([readonly]) {
 	background: var(--sapField_SuccessBackgroundStyle);
 	background-color: var(--sapField_SuccessBackground);
 	border-color: var(--_ui5_input_value_state_success_border_color);
 	border-width: var(--_ui5_input_value_state_success_border_width);
 }
 
-.input-root-phone[value-state="Positive"]:not([readonly]) [inner-input]:focus {
+.input-root-phone[value-state="Success"]:not([readonly]) [inner-input]:focus {
 	background-color: var(--_ui5_input_focused_value_state_success_background);
 	border-color: var(--_ui5_input_focused_value_state_success_border_color);
 }
 
-.input-root-phone[value-state="Positive"]:not([readonly]):focus-within:before {
+.input-root-phone[value-state="Success"]:not([readonly]):focus-within:before {
 	border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
 }
 

package/src/themes/SegmentedButton.css

@@ -36,14 +36,14 @@
 	background-color: var(--sapButton_Hover_Background);
 }
 
-::slotted([ui5-segmented-button-item][selected]),
+::slotted([ui5-segmented-button-item][pressed]),
 ::slotted([ui5-segmented-button-item][active]) {
 	border-color: var(--sapButton_Selected_BorderColor);
 	background-color: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
 }
 
-::slotted([ui5-segmented-button-item][selected]:hover) {
+::slotted([ui5-segmented-button-item][pressed]:hover) {
 	border-color: var(--sapButton_Selected_Hover_BorderColor);
 	background-color: var(--sapButton_Selected_Hover_Background);
 	color: var(--sapButton_Selected_TextColor);

package/src/themes/SplitButton.css

@@ -3,7 +3,7 @@
 
 :host(:not([hidden])) {
 	display: inline-flex;
-	height: var(--_ui5_button_base_height);
+	height: 100%;
 	border-radius: var(--_ui5_button_border_radius);
 	background-color: var(--sapButton_Background);
 	box-shadow: var(--_ui5_split_button_host_default_box_shadow);
@@ -90,13 +90,11 @@
 	color: var(--_ui5_split_button_transparent_hover_color);
 }
 
-:host([desktop]) .ui5-split-button-root:focus-within,
-.ui5-split-button-root:focus-visible {
+:host([focused]) .ui5-split-button-root {
 	outline: 0;
 }
 
-:host([desktop]) .ui5-split-button-root:focus-within:after,
-.ui5-split-button-root:focus-visible:after {
+:host([focused]) .ui5-split-button-root:after {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
@@ -106,8 +104,7 @@
 	border-radius: var(--_ui5_split_button_focused_border_radius);
 }
 
-:host([design="Emphasized"][desktop]) .ui5-split-button-root:focus-within:after,
-:host([design="Emphasized"]) .ui5-split-button-root:focus-visible:after  {
+:host([design="Emphasized"][focused]) .ui5-split-button-root:after {
 	border-color: var(--sapContent_ContrastFocusColor);
 }
 
@@ -115,7 +112,6 @@
 	display: inline-flex;
 	position: relative;
 	width: inherit;
-	height: 100%;
 }
 
 .ui5-split-button-root:focus,
@@ -309,14 +305,13 @@
 }
 
 
-.ui5-split-arrow-button[desktop]::part(button):focus-within::after,
-.ui5-split-arrow-button::part(button):focus-visible::after {
+
+.ui5-split-arrow-button[focused]::part(button)::after {
 	border-start-start-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 	border-end-start-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 }
 
-.ui5-split-arrow-button[desktop]::part(button):focus-within::after,
-.ui5-split-text-button::part(button):focus-visible::after {
+.ui5-split-text-button[focused]::part(button)::after {
 	border-start-end-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 	border-end-end-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 }

package/src/themes/StepInput.css

@@ -49,7 +49,7 @@
 	box-shadow: var(--sapField_Hover_Shadow);
 }
 
-:host([value-state="Positive"]:not([readonly]):not([disabled]):not([focused]):hover) {
+:host([value-state="Success"]:not([readonly]):not([disabled]):not([focused]):hover) {
 	box-shadow: var(--sapField_Hover_SuccessShadow);
 }
 
@@ -57,35 +57,35 @@
 	box-shadow: var(--sapField_Hover_InformationShadow);
 }
 
-:host([value-state="Critical"]:not([readonly]):not([disabled]):not([focused]):hover) {
+:host([value-state="Warning"]:not([readonly]):not([disabled]):not([focused]):hover) {
 	box-shadow: var(--sapField_Hover_WarningShadow);
 }
 
-:host([value-state="Negative"]:not([readonly]):not([disabled]):not([focused]):hover) {
+:host([value-state="Error"]:not([readonly]):not([disabled]):not([focused]):hover) {
 	box-shadow: var(--sapField_Hover_InvalidShadow);
 }
 
-:host([value-state="Positive"]:not([readonly]):not([disabled]):hover),
-:host([value-state="Negative"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Success"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Error"]:not([readonly]):not([disabled]):hover),
 :host([value-state="Information"]:not([readonly]):not([disabled]):hover),
-:host([value-state="Critical"]:not([readonly]):not([disabled]):hover) {
+:host([value-state="Warning"]:not([readonly]):not([disabled]):hover) {
 	background-color: var(--_ui5-step_input_button_state_hover_background_color);
 }
 
 :host(:not([value-state]):not([readonly]):not([disabled])[focused]),
 :host([value-state="None"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Positive"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Success"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Error"]:not([readonly]):not([disabled])[focused]),
 :host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
-:host([value-state="Critical"]:not([readonly]):not([disabled])[focused]){
+:host([value-state="Warning"]:not([readonly]):not([disabled])[focused]){
 	background-color: var(--sapField_Focus_Background);
 }
 
-:host([value-state="Positive"]:not([readonly]):not([disabled]))::after,
-:host([value-state="Negative"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Success"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Error"]:not([readonly]):not([disabled]))::after,
 :host([value-state="None"]:not([readonly]):not([disabled]))::after,
 :host([value-state="Information"]:not([readonly]):not([disabled]))::after,
-:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
+:host([value-state="Warning"]:not([readonly]):not([disabled]))::after {
 	position: absolute;
 	content: "";
 	top: -1px;
@@ -105,17 +105,17 @@
 	border-width: var(--_ui5_input_information_border_width);
 }
 
-:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
+:host([value-state="Warning"]:not([readonly]):not([disabled]))::after {
 	border-color: var(--sapField_WarningColor);
 	border-width: 2px;
 }
 
-:host([value-state="Positive"]:not([readonly]):not([disabled]))::after {
+:host([value-state="Success"]:not([readonly]):not([disabled]))::after {
 	border-color: var(--sapField_SuccessColor);
 	border-width: 1px;
 }
 
-:host([value-state="Negative"]:not([readonly]):not([disabled]))::after {
+:host([value-state="Error"]:not([readonly]):not([disabled]))::after {
 	border-color: var(--sapField_InvalidColor);
 	border-width: var(--_ui5_input_information_border_width);
 }
@@ -123,11 +123,11 @@
 :host([value-state])::after {
 	border-width: var(--_ui5_input_state_border_width);
 }
-:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input {
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input {
 	background-color: var(--_ui5_input_input_background_color);
 }
 
-:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover {
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover {
 	background-color: var(--_ui5_step_input_input_error_background_color);
 }
 :host([value-state]:not([value-state="None"]) .ui5-step-input-input[focused]) {
@@ -239,15 +239,15 @@
 	border-color: var(--_ui5_step_input_input_information_border_color_focused_after);
 }
 
-:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
 	border-color: var(--_ui5_step_input_input_warning_border_color_focused_after);
 }
 
-:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+:host([value-state="Success"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
 	border-color: var(--_ui5_step_input_input_success_border_color_focused_after);
 }
 
-:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
+:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after {
 	border-color: var(--_ui5_step_input_input_error_border_color_focused_after);
 }
 

package/src/themes/TabContainer.css

@@ -93,7 +93,6 @@
 	color: var(--_ui5_tc_overflow_text_color);
 }
 
-/*TODO checkout out how button is implemented */
 .ui5-tc__overflow > [ui5-button][focused] {
 	outline-offset: 0.125rem;
 	--_ui5_button_focused_border: none;

package/src/themes/TabInOverflow.css

@@ -59,7 +59,6 @@
 	color: var(--_ui5_tc_overflowItem_current_color);
 }
 
-/*TODO checkout out how li is implemented */
 .ui5-tab-container-responsive-popover [ui5-li-custom][focused]::part(native-li)::after {
 	inset: var(--_ui5_tc_overflowItem_focus_offset);
 }

package/src/themes/TabInStrip.css

@@ -166,10 +166,8 @@
 	outline: none;
 }
 
-:host([desktop]) .ui5-tab-strip-item--textOnly:focus:not([data-moving]) .ui5-tab-strip-itemText::before,
-.ui5-tab-strip-item--textOnly:focus-visible:not([data-moving]) .ui5-tab-strip-itemText::before,
-:host([desktop]) .ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus:not([data-moving]) .ui5-tab-strip-itemText::before,
-.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus-visible:not([data-moving]) .ui5-tab-strip-itemText::before {
+.ui5-tab-strip-item--textOnly:focus:not([data-moving]) .ui5-tab-strip-itemText::before,
+.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus:not([data-moving]) .ui5-tab-strip-itemText::before {
 	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
 	content: "";
 	pointer-events: none;
@@ -181,8 +179,7 @@
 	bottom: var(--_ui5_tc_headerItem_text_focus_border_offset_bottom);
 }
 
-:host([desktop]) .ui5-tab-strip-item--mixedMode:focus:not([data-moving]) .ui5-tab-strip-itemContent::before,
-.ui5-tab-strip-item--mixedMode:focus-visible:not([data-moving]) .ui5-tab-strip-itemContent::before {
+.ui5-tab-strip-item--mixedMode:focus:not([data-moving]) .ui5-tab-strip-itemContent::before {
 	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
 	content: "";
 	pointer-events: none;
@@ -194,8 +191,7 @@
 	bottom: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom);
 }
 
-:host([desktop]) .ui5-tab-strip-item--withIcon:focus:not([data-moving]) .ui5-tab-strip-item-icon-outer::before,
-.ui5-tab-strip-item--withIcon:focus-visible:not([data-moving]) .ui5-tab-strip-item-icon-outer::before {
+.ui5-tab-strip-item--withIcon:focus:not([data-moving]) .ui5-tab-strip-item-icon-outer::before {
 	content: "";
 	pointer-events: none;
 	position: absolute;

package/src/themes/TabSeparatorInOverflow.css

@@ -1,10 +1,10 @@
-[ui5-li-custom].ui5-tc__separator {
+.ui5-tc__separator {
 	min-height: 0.25rem;
 	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 	margin-inline-start: calc(var(--_ui5-tab-indentation-level) * 0.5rem);
 	margin-inline-end: 0.5rem;
 }
 
-[ui5-list] > [ui5-li-custom].ui5-tc__separator:first-child {
+[ui5-list] > .ui5-tc__separator:first-child {
 	min-height: 0.5rem;
 }

package/src/themes/TabSeparatorInStrip.css

@@ -1,9 +1,9 @@
-div.ui5-tc__separator {
+.ui5-tc__separator {
 	position: relative;
 	width: 0.5625rem;
 }
 
-div.ui5-tc__separator::before {
+.ui5-tc__separator::before {
 	content: " ";
 	position: absolute;
 	width: 0.0625rem;

package/src/themes/Table.css

@@ -0,0 +1,106 @@
+@import "./GrowingButton.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	width: 100%;
+}
+
+.ui5-table-root {
+	position: relative;
+	border-bottom: var(--ui5_table_bottom_border);
+}
+
+table {
+	width: 100%;
+	border-spacing: 0;
+	border-collapse: collapse;
+}
+
+.ui5-table-header-row-navigated {
+    width: 0.1875rem;
+    background: var(--sapList_HeaderBackground);
+    vertical-align: middle;
+}
+
+.ui5-table-header-row {
+	color: var(--sapList_HeaderTextColor);
+	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);
+	border-bottom: var(--ui5_table_header_row_border_width) solid var(--ui5_table_header_row_border_bottom_color);
+}
+
+.ui5-table-header-row:focus {
+	outline: var(--ui5_table_header_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: var(--ui5_table_focus_outline_offset);
+}
+
+tr {
+	height: 3rem;
+}
+
+.ui5-table-no-data-row {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: auto;
+	justify-content: center;
+	text-align: center;
+	padding: 0.5rem 1rem;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: 0.875rem;
+	box-sizing: border-box;
+	color: var(--sapTextColor);
+	min-height: 3rem;
+	background-color: var(--sapList_Background);
+}
+
+.ui5-table-end-row {
+	height: 0px;
+}
+
+:host([busy]) .ui5-table-busy-row {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	outline: none;
+	z-index: 100;
+}
+
+:host([busy]) .ui5-table-busy-ind {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 1;
+}
+
+:host([busy]) [growing-button] {
+	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;
+}
+
+:host([sticky-column-header]) .ui5-table-header-row {
+	position: sticky;
+	top: 0;
+	z-index: 99;
+}
+
+th {
+	background: var(--sapList_HeaderBackground);
+}
+
+.ui5-table-focusarea {
+	position: fixed;
+}

package/src/themes/TableCell.css

@@ -0,0 +1,27 @@
+:host {
+	display: table-cell;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: 0.875rem;
+	height: var(--ui5_table_row_height);
+	box-sizing: border-box;
+	color: var(--sapList_TextColor);
+	word-break: break-word;
+	vertical-align: middle;
+}
+
+td {
+	display: contents;
+}
+
+:host([popined]) {
+	padding-left: 0;
+	padding-top: .25rem;
+}
+
+:host([_popined-inline]) {
+	padding-top: 0;
+}
+
+::slotted([ui5-label]) {
+	color: inherit;
+}

package/src/themes/TableColumn.css

@@ -0,0 +1,25 @@
+:host {
+	display: contents;
+}
+
+th {
+	background: var(--sapList_HeaderBackground);
+	width: inherit;
+	font-weight: var(--ui5_table_header_row_font_weight);
+	font-size: var(--sapFontMediumSize);
+	font-family: var(--ui5_table_header_row_font_family);
+	padding: 0.5rem;
+	box-sizing: border-box;
+	text-align: start;
+	vertical-align: middle;
+}
+
+:host([first]) th {
+	padding-inline-start: 1rem;
+}
+
+th ::slotted([ui5-label]) {
+	font-weight: var(--ui5_table_header_row_font_weight);
+	font-size: var(--sapFontMediumSize);
+	font-family: var(--ui5_table_header_row_font_family);
+}

package/src/themes/TableGroupRow.css

@@ -0,0 +1,32 @@
+:host {
+    display: contents;
+}
+
+:host([_busy]) .ui5-table-group-row-root {
+	opacity: 0.72;
+	pointer-events: none;
+}
+
+.ui5-table-group-row-root {
+	height: var(--ui5_table_group_row_height);
+	border-style: solid;
+	border-color: var(--sapList_TableGroupHeaderBorderColor);
+	border-width: var(--ui5_table_border_width);
+	background-color: var(--sapList_TableGroupHeaderBackground);
+	color: var(--sapList_TableGroupHeaderTextColor);
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	font-weight: var(--ui5_table_group_row_font-weight);
+}
+
+.ui5-table-group-row-root:focus {
+	outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: var(--ui5_table_focus_outline_offset);
+}
+
+td {
+	word-break: break-word;
+	vertical-align: middle;
+	padding: .5rem .25rem .5rem 1rem;
+	text-align: start;
+}

package/src/themes/TableRow.css

@@ -0,0 +1,130 @@
+:host {
+	display: contents;
+}
+
+:host([_busy]) .ui5-table-row-root {
+	opacity: 0.72;
+	pointer-events: none;
+}
+
+.ui5-table-row-root {
+	background-color: var(--sapList_Background);
+	color: var(--sapList_TextColor);
+	border-top: 1px solid var(--sapList_BorderColor);
+}
+
+.ui5-table-row-root:focus {
+	outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: var(--ui5_table_focus_outline_offset);
+}
+
+.ui5-table-popin-row {
+	background-color: var(--sapList_Background);
+}
+
+.ui5-table-popin-row.all-columns-popped-in.popin-header {
+	border-top: 1px solid var(--sapList_BorderColor);
+}
+
+.ui5-table-popin-row td:not(.ui5-table-row-navigated) {
+	padding-top: .5rem;
+	padding-inline-start: 1rem;
+}
+
+:host([mode="MultiSelect"]) .ui5-table-popin-row td:not(.ui5-table-row-navigated) {
+	padding-inline-start: var(--ui5_table_multiselect_popin_row_padding);
+}
+
+.ui5-table-popin-row:last-child td {
+	padding-bottom: .5rem;
+}
+
+.ui5-table-row-popin-title {
+	color: var(--sapContent_LabelColor);
+	font-family: "72override", var(--sapFontFamily);
+	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;
+	text-align: center;
+	vertical-align: middle;
+}
+
+:host([mode="SingleSelect"]) .ui5-table-row-root {
+	cursor: pointer;
+}
+:host([mode="MultiSelect"]) .ui5-table-row-root .ui5-table-multi-select-cell {
+	cursor: pointer;
+}
+
+:host ::slotted([ui5-table-cell]:not([popined])) {
+	padding: .25rem .5rem;
+}
+
+:host(:not([mode="MultiSelect"])) ::slotted([ui5-table-cell]:not([popined]):first-child) {
+	padding-inline-start: 1rem;
+}
+
+/** Hover **/
+:host([type="Active"]) .ui5-table-row-root:hover,
+:host([mode="SingleSelect"]) .ui5-table-row-root:hover:not(:active) {
+	background-color: var(--sapList_Hover_Background);
+}
+
+/** Down/Active **/
+:host([type="Active"]) .ui5-table-row-root:active,
+:host([selected][type="Active"]) .ui5-table-row-root:active {
+	background-color: var(--sapList_Active_Background);
+}
+
+:host([type="Active"]) .ui5-table-row-root:active ::slotted([ui5-table-cell]) {
+	color: var(--sapList_Active_TextColor);
+}
+
+/** Selected **/
+:host([selected]) .ui5-table-row-root:not(:active),
+:host([selected]) .ui5-table-row-root:not(:active) ~ tr {
+	background-color: var(--sapList_SelectionBackgroundColor);
+}
+
+:host([selected]) tr:last-child {
+	border-bottom: 1px solid var(--sapList_SelectionBorderColor);
+}
+
+/** Hover on Selected **/
+: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);
+}