@ui5/webcomponents 2.22.0-rc.2 → 2.22.0-rc.4

package/src/themes/TableRow.css

@@ -6,6 +6,10 @@
 	background: var(--_ui5_table_row_alternating_background);
 }
 
+:host([position]) {
+	height: var(--row-height);
+}
+
 :host(:first-of-type) > [ui5-table-cell],
 :host(:first-of-type) > ::slotted([ui5-table-cell]) {
 	border-top: none;
@@ -18,20 +22,30 @@
 :host([aria-selected="true"]) {
 	background: var(--sapList_SelectionBackgroundColor);
 	box-shadow: inset 0 calc(-1 * var(--sapList_BorderWidth)) 0 0 var(--sapList_SelectionBorderColor);
+
+	#actions-cell,
+	#navigated-cell,
+	#selection-cell {
+		clip-path: inset(0px 0px 1px 0px); /* selection bottom border should not overlap with sticky cells */
+	}
 }
 
-:host(:not([_haspopin])) {
+:host(:not([_has-popin])) {
 	/* Use CSS Space Toggles until if() or container style queries are widely supported */
 	--_ui5_table_cell_border_merged: ;
 	--_ui5_table_cell_content_merged: ;
 }
 
-:host(:not([_haspopin]):active),
-:host(:not([_haspopin]):focus-within) {
+:host(:not([_has-popin]):active),
+:host(:not([_has-popin]):focus-within) {
 	/* Provide a valid CSS value to intentionally invalidate the TableCell variable-based rules and disable visual merging. */
 	--_ui5_table_cell_content_merged: initial;
 }
 
+:host([_interactive]) {
+	cursor: pointer;
+}
+
 @media (hover: hover) {
 	:host([_interactive]:hover) {
 		background: var(--sapList_Hover_Background);
@@ -39,7 +53,7 @@
 	:host([_interactive][aria-selected=true]:hover) {
 		background: var(--sapList_Hover_SelectionBackground);
 	}
-	:host(:not([_haspopin]):hover) {
+	:host(:not([_has-popin]):hover) {
 		/* Provide a valid CSS value to intentionally invalidate the TableCell variable-based rules and disable visual merging. */
 		--_ui5_table_cell_content_merged: initial;
 	}
@@ -50,14 +64,6 @@
 	background: var(--sapList_Active_Background);
 }
 
-:host([_interactive]) {
-	cursor: pointer;
-}
-
-:host([position]) {
-	height: var(--row-height);
-}
-
 #popin-cell {
 	padding-inline-start: var(--_ui5_first_table_cell_horizontal_padding);
 	align-content: initial;
@@ -67,38 +73,25 @@
 }
 
 #navigated-cell {
- 	position: sticky;
-	inset-inline-end: 0;
-	z-index: 1;
-	background-color: inherit;
 	overflow: visible;
 	grid-row: span 2;
-	min-width: 0;
-	padding: 0;
 }
 
 :host([navigated]) #navigated {
 	position: absolute;
-	inset: -1px 0px 0px 1px;
+	inset: 0px 0px 0px 1px;
 	background: var(--sapList_SelectionBorderColor);
 }
 
-:host([tabindex]:focus) #navigated {
-	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
-	bottom: 3px;
-	top: 2px;
-}
-
-:host([tabindex]:focus) #navigated:dir(rtl) {
-	transform: translateX(var(--_ui5_table_navigated_cell_width));
-}
-
-:host([tabindex]:focus) #navigated-cell {
-	clip-path: inset(var(--sapContent_FocusWidth) var(--sapContent_FocusWidth) var(--sapContent_FocusWidth) calc(var(--_ui5_table_navigated_cell_width) * -1));
-}
-
-:host([tabindex]:focus) #navigated-cell:dir(rtl) {
-	clip-path: inset(var(--sapContent_FocusWidth) calc(var(--_ui5_table_navigated_cell_width) * -1) var(--sapContent_FocusWidth) var(--sapContent_FocusWidth));
+:host([navigated][tabindex]:focus) {
+	#navigated {
+		transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
+		bottom: 3px;
+		top: 2px;
+	}
+	#navigated:dir(rtl) {
+		transform: translateX(var(--_ui5_table_navigated_cell_width));
+	}
 }
 
 :host([navigated]) #popin-cell {
@@ -113,7 +106,3 @@
 #actions-cell {
 	gap: var(--_ui5_table_row_actions_gap);
 }
-
-#actions-cell:has(+ #navigated-cell) {
-	inset-inline-end: var(--_ui5_table_navigated_cell_width);
-}

package/src/themes/TableRowBase.css

@@ -7,14 +7,19 @@
 	overflow: clip;
 }
 
-:host([tabindex]:focus) {
-	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
+#selection-cell,
+#actions-cell,
+#navigated-cell {
+	background-color: inherit;
+ 	position: sticky;
+	z-index: 1;
 }
 
-:host([tabindex]:focus) #selection-cell,
-:host([tabindex]:focus) #actions-cell {
-	clip-path: inset(var(--sapContent_FocusWidth)); /* focus outline should not overlap sticky cells */
+#selection-cell {
+	padding: 0;
+	inset-inline-start: 0;
+	min-width: auto;
+	justify-content: center;
 }
 
 ::slotted([ui5-table-cell-base]:first-of-type) {
@@ -25,25 +30,79 @@
 	padding-inline-start: var(--_ui5_table_cell_horizontal_padding);
 }
 
-#selection-cell,
 #actions-cell {
-	background-color: inherit;
-	clip-path: inset(0px 0px 1px 0px); /* selection border should not overlap with sticky cells */
- 	position: sticky;
-	z-index: 1;
+	inset-inline-end: 0;
 }
 
-#selection-cell {
-	padding: 0;
-	inset-inline-start: 0;
-	min-width: auto;
+#actions-cell:has(+ #navigated-cell) {
+	inset-inline-end: var(--_ui5_table_navigated_cell_width);
 }
 
-#actions-cell {
+#navigated-cell {
 	inset-inline-end: 0;
+	min-width: 0;
+	padding: 0;
+}
+
+#dummy-cell {
+	border-inline-start: 1px solid var(--sapList_TableFixedBorderColor);
 }
 
-#selection-cell[tabindex]:focus,
-#actions-cell[tabindex]:focus {
-	clip-path: inset(0px);
-}
+:host([_has-popin]) #dummy-cell {
+	border-inline-start: none;
+}
+
+:host([tabindex]:focus) {
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
+
+	#selection-cell,
+	#actions-cell{
+		clip-path: inset(var(--sapContent_FocusWidth)); /* focus outline should not overlap sticky cells */
+	}
+
+	#navigated-cell {
+		clip-path: inset(3px 4px 3px -4px);
+	}
+	#navigated-cell:dir(rtl) {
+		clip-path: inset(3px -4px 3px 4px);
+	}
+}
+
+:host([tabindex][_render-dummy-cell]:not([_has-popin]):focus) {
+	outline: none;
+
+	--_ui5_table_cell_custom_outline_block: inset 0 var(--sapContent_FocusWidth) 0 0 var(--sapContent_FocusColor), inset 0 calc(-1 * var(--sapContent_FocusWidth)) 0 0 var(--sapContent_FocusColor);
+	--_ui5_table_cell_custom_outline_inline-start: inset var(--sapContent_FocusWidth) 0 0 0 var(--sapContent_FocusColor);
+	--_ui5_table_cell_custom_outline_inline-end: inset calc(-1 * var(--sapContent_FocusWidth)) 0 0 0 var(--sapContent_FocusColor);
+	:dir(rtl) {
+		--_ui5_table_cell_custom_outline_inline-start: inset calc(-1 * var(--sapContent_FocusWidth)) 0 0 0 var(--sapContent_FocusColor);
+		--_ui5_table_cell_custom_outline_inline-end: inset var(--sapContent_FocusWidth) 0 0 0 var(--sapContent_FocusColor);
+	}
+
+	[ui5-table-cell-base], ::slotted([ui5-table-cell-base]) {
+		box-shadow: var(--_ui5_table_cell_custom_outline_block);
+	}
+	[data-ui5-custom-outline="start"], ::slotted([data-ui5-custom-outline="start"]) {
+		box-shadow: var(--_ui5_table_cell_custom_outline_block), var(--_ui5_table_cell_custom_outline_inline-start);
+	}
+	[data-ui5-custom-outline="end"], ::slotted([data-ui5-custom-outline="end"]) {
+		box-shadow: var(--_ui5_table_cell_custom_outline_block), var(--_ui5_table_cell_custom_outline_inline-end);
+	}
+	[data-ui5-custom-outline="startend"], ::slotted([data-ui5-custom-outline="startend"]) {
+		box-shadow: var(--_ui5_table_cell_custom_outline_block), var(--_ui5_table_cell_custom_outline_inline-start), var(--_ui5_table_cell_custom_outline_inline-end);
+	}
+	#dummy-cell {
+		box-shadow: none;
+	}
+
+	#selection-cell,
+	#actions-cell,
+	#navigated-cell {
+		clip-path: none;
+	}
+
+	#navigated {
+		top: 3px;
+	}
+}

package/src/themes/base/SliderBase-parameters.css

@@ -1,106 +1,6 @@
 :host {
-	--_ui5_slider_progress_container_background: var(--sapField_BorderColor);
-	--_ui5_slider_progress_container_dot_display: none;
-	--_ui5_slider_progress_container_dot_background: var(--sapField_BorderColor);
-	--_ui5_slider_progress_border_width: 0.0625rem;
-	--_ui5_slider_progress_border: solid var(--_ui5_slider_progress_border_width) var(--sapSlider_BorderColor);
-	--_ui5_slider_progress_before_background: transparent;
-	--_ui5_slider_progress_after_background: transparent;
-	--_ui5_slider_progress_before_border: none;
-	--_ui5_slider_progress_after_border: none;
-	--_ui5_slider_padding: 1.406rem 1.0625rem;
-	--_ui5_slider_root_height: 3.3125rem;
-	--_ui5_slider_inner_height: 0.25rem;
 	--_ui5_slider_inner_min_width: 4rem;
-	--_ui5_slider_outer_height: 1.6875rem;
-	--_ui5_slider_progress_border_radius: 0.25rem;
-	--_ui5_slider_progress_background: var(--sapActiveColor);
-	--_ui5_slider_handle_icon_display: none;
-	--_ui5_range_slider_root_hover_handle_icon_display: none;
-	--_ui5_slider_handle_height: 1.5rem;
-	--_ui5_slider_handle_width: 2rem;
-	--_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor);
-	--_ui5_slider_handle_border_radius: 0.5rem;
-	--_ui5_slider_handle_background: var(--sapButton_Background);
-	--_ui5_range_slider_handle_background: #FFF;
-	--_ui5_slider_track_total_height: calc(var(--_ui5_slider_inner_height) + (2 * var(--_ui5_slider_progress_border_width)));
-	--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2 - var(--_ui5_slider_progress_border_width));
-	--_ui5_slider_tickmark_bg: var(--sapField_BorderColor);
-	--_ui5_slider_tickmark_in_range_bg: var(--sapButton_Active_Background);
-	--_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background);
-	--_ui5_slider_handle_hover_border: 0.125rem solid var(--sapButton_Hover_BorderColor);
-	--_ui5_slider_handle_outline: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_slider_handle_focus_border: var(--_ui5_slider_handle_hover_border);
-	--_ui5_slider_handle_outline_offset: 0.075rem;
-	--_ui5_slider_progress_outline: 0.0625rem dotted var(--sapContent_FocusColor);
-	--_ui5_slider_progress_outline_offset: -0.8125rem;
-	--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2 - var(--_ui5_slider_progress_border_width));
+	--_ui5_slider_progress_border_width: 0.0625rem;
 	--_ui5_slider_disabled_opacity: 0.4;
-	--_ui5_slider_tooltip_fontsize: var(--sapFontSmallSize);
-	--_ui5_slider_tooltip_color: var(--sapContent_LabelColor);
-	--_ui5_slider_tooltip_background: var(--sapField_Background);
-	--_ui5_slider_tooltip_border_radius: var(--sapElement_BorderCornerRadius);
-	--_ui5_slider_tooltip_border_color: var(--sapField_BorderColor);
-	--_ui5_slider_tooltip_border: 0.0625rem solid var(--_ui5_slider_tooltip_border_color);
-	--_ui5_slider_tooltip_box_shadow: none;
-	--_ui5_slider_tooltip_padding: 0.4125rem;
-	--_ui5_slider_tooltip_height: 1rem;
-	--_ui5_slider_tooltip_min_width: 2rem;
-	--_ui5_slider_tooltip_bottom: 2rem;
-	--_ui5_slider_label_fontsize: var(--sapFontSmallSize);
-	--_ui5_slider_label_color: var(--sapContent_LabelColor);
-	--_ui5_range_slider_progress_focus_display: none;
-	--_ui5_range_slider_progress_focus_top: -1.063rem;
-	--_ui5_range_slider_progress_focus_left: -1.438rem;
-	--_ui5_range_slider_progress_focus_padding: 0 1.375rem 0 1.438rem;
-	--_ui5_range_slider_progress_focus_height: 2rem;
-	--_ui5_range_slider_legacy_progress_focus_display: block;
-	--_ui5_slider_handle_focus_width: 0;
-	--_ui5_slider_start_end_point_size: 0.5rem;
-	--_ui5_slider_start_end_point_left: -.95rem;
-	--_ui5_slider_start_end_point_top: -0.1875rem;
-	--_ui5_slider_handle_background_focus: var(--sapButton_Active_Background);
-	--_ui5_slider_handle_focused_tooltip_distance: var(--_ui5_slider_tooltip_bottom);
-	--_ui5_slider_handle_box_sizing: content-box;
-	--_ui5_slider_tooltip_border_box: content-box;
-	--_ui5_range_slider_handle_active_background: var(--_ui5_range_slider_handle_background);
-	--_ui5_range_slider_active_handle_icon_display: none;
-	--_ui5_range_slider_handle_background_focus: transparent;
-	--_ui5_range_slider_progress_focus_width: 100%;
-	--_ui5_range_slider_root_active_handle_icon_display: none;
-	--_ui5_slider_tickmark_height: 0.5rem;
-	--_ui5_slider_progress_box_sizing: border-box;
-	--_ui5_slider_active_progress_box_sizing: content-box;
-	--_ui5_range_slider_focus_outline_width: 100%;
-	--_ui5_slider_progress_outline_offset_left: 0;
-	--_ui5_range_slider_focus_outline_radius: 0;
-
-	--_ui5_slider_progress_container_top: 0;
-	--_ui5_slider_progress_height: 0.25rem;
-	--_ui5_slider_active_progress_border: solid 0.0625rem var(--sapSlider_Selected_BorderColor);
-	--_ui5_slider_active_progress_border_radius: 0.25rem;
 	--_ui5_slider_active_progress_left: -0.0625rem;
-	--_ui5_slider_active_progress_top: -0.0625rem;
-	--_ui5_slider_active_progress_padding: 0.125rem;
-	--_ui5_slider_active_progress_height: calc(var(--_ui5_slider_progress_height) - 0.125rem);
-
-	--_ui5_slider_no_tickmarks_progress_container_top: var(--_ui5_slider_progress_container_top);
-	--_ui5_slider_no_tickmarks_progress_height: var(--_ui5_slider_progress_height);
-	--_ui5_slider_no_tickmarks_active_progress_border: var(--_ui5_slider_active_progress_border);
-	--_ui5_slider_no_tickmarks_active_progress_left: -0.0625rem;
-	--_ui5_slider_no_tickmarks_active_progress_top: -0.0625rem;
-	--_ui5_slider_no_tickmarks_active_progress_height: calc(var(--_ui5_slider_no_tickmarks_progress_height) - 0.125rem);
-	--_ui5_slider_handle_focus_visibility: none;
-	--_ui5_slider_handle_icon_size: 0.875rem;
 }
-
-@container style(--ui5_content_density: compact) {
-	:host {
-		--_ui5_slider_start_end_point_left: -0.75rem;
-		--_ui5_slider_handle_icon_size: 0.875rem;
-		--_ui5_slider_padding: 1rem 1.0625rem;
-		--_ui5_slider_handle_height: 1.25rem;
-		--_ui5_slider_handle_width: 1.5rem;
-		--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2 - var(--_ui5_slider_progress_border_width));
-	}
-}

package/src/themes/base/SliderHandle-parameters.css

@@ -1,3 +1,24 @@
 :host {
-	--ui5_slider_handle_outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
+	--_ui5_slider_handle_height: 1.5rem;
+	--_ui5_slider_handle_width: 2rem;
+	--_ui5_slider_handle_focus_border: 0.125rem solid var(--sapContent_FocusColor);
+	--ui5_slider_handle_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	--ui5_slider_handle_outline_offset: 0.0625rem;
+	--_ui5_slider_handle_background: var(--sapSlider_HandleBackground);
+	--_ui5_slider_handle_border: 0.0625rem solid var(--sapSlider_HandleBorderColor);
+	--_ui5_slider_handle_border_radius: 0.5rem;
+	--_ui5_slider_handle_hover_background: var(--sapSlider_Hover_HandleBackground);
+	--_ui5_slider_handle_hover_border: 0.0625rem solid var(--sapSlider_Hover_HandleBorderColor);
+	--_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground);
+	--_ui5_slider_handle_active_border: 0.125rem solid var(--sapSlider_Active_HandleBorderColor);
+	--_ui5_slider_handle_icon_display: none;
+	--_ui5_slider_handle_icon_size: 0.875rem;
+	--_ui5_slider_handle_box_sizing: border-box;
+}
+
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_slider_handle_height: 1.25rem;
+		--_ui5_slider_handle_width: 1.5rem;
+	}
 }

package/src/themes/base/SliderScale-parameters.css

@@ -1,9 +1,29 @@
 :host {
-	--ui5_slider_scale_background: var(--sapSlider_Background);
-	--_ui5_slider_scale_border: var(--sapSlider_Background);
-
+	--_ui5_slider_scale_background: var(--sapSlider_Background);
+	--_ui5_slider_scale_progress_background: var(--sapSlider_Selected_Background);
+	--_ui5_slider_scale_progress_border: none;
 	--_ui5_slider_scale_dots_distance: -1rem;
+	--_ui5_slider_scale_dots_display: none;
 	--_ui5_slider_scale_tickmark_height: .5rem;
+	--_ui5_slider_scale_root_box_sizing: border-box;
+	--_ui5_slider_scale_progress_top: 0;
+	--_ui5_slider_scale_progress_height: 100%;
+	--_ui5_range_slider_progress_focus_display: none;
+	--_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + var(--_ui5_slider_progress_border_width) + 0.0625rem - 0.125rem - 0.0625rem);
+	--_ui5_range_slider_progress_focus_left: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)) - 0.125rem);
+	--_ui5_range_slider_progress_focus_right: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)) - 0.125rem - 0.0625rem);
+	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 0.375rem + 0.25rem + 0.0625rem);
+	--_ui5_range_slider_progress_focus_padding: 0 1.375rem 0 1.4375rem;
+	--_ui5_range_slider_progress_focus_border: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
+	--_ui5_range_slider_progress_focus_border_radius: 0.5rem;
+	--_ui5_range_slider_legacy_progress_focus_display: block;
+	--_ui5_range_slider_focus_outline_width: 100%;
+	--_ui5_slider_progress_outline: 0.0625rem var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	--_ui5_range_slider_focus_outline_radius: 0;
+	--_ui5_slider_progress_outline_offset: -0.8125rem;
+	--_ui5_slider_outer_height: 1.6875rem;
+	--_ui5_slider_progress_outline_offset_left: 0;
+	--_ui5_slider_scale_progress_border_radius: 0.25rem;
 }
 
 @container style(--ui5_content_density: compact) {

package/src/themes/base/SliderTooltip-parameters.css

@@ -0,0 +1,3 @@
+:host {
+	--_ui5_slider_tooltip_color: var(--sapTextColor);
+}

package/src/themes/sap_fiori_3/Slider-parameters.css

@@ -1,11 +1,11 @@
 :host {
-	--_slider_root_side_padding: 0 1rem;
-	--_slider_height: 2.75rem;
+	--_ui5_slider_root_side_padding: 0 1rem;
+	--_ui5_slider_height: 2.75rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
-		--_slider_root_side_padding: 0 .75rem;
-		--_slider_height: 2rem;
+		--_ui5_slider_root_side_padding: 0 .75rem;
+		--_ui5_slider_height: 2rem;
 	}
 }

package/src/themes/sap_fiori_3/SliderBase-parameters.css

@@ -1,31 +1 @@
 @import "../base/SliderBase-parameters.css";
-
-:host {
-	--_ui5_slider_inner_min_width: 4rem;
-	--_ui5_range_slider_handle_background_focus: transparent;
-	--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
-	--_ui5_range_slider_handle_background: transparent;
-	--_ui5_range_slider_handle_active_background: transparent;
-	--_ui5_slider_handle_background: var(--sapButton_Background);
-	--_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background);
-	--_ui5_range_slider_root_hover_handle_bg: transparent;
-	--_ui5_range_slider_root_active_handle_icon_display: none;
-	--_ui5_slider_handle_width: 1.875rem;
-	--_ui5_slider_handle_height: 1.875rem;
-	--_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
-	--_ui5_slider_handle_border_radius: 1rem;
-	--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
-	--_ui5_slider_handle_box_sizing: border-box;
-	--_ui5_slider_tickmark_height: 1rem;
-	--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
-}
-
-@container style(--ui5_content_density: compact) {
-	:host {
-		--_ui5_slider_handle_width: 1.5rem;
-		--_ui5_slider_handle_height: 1.5rem;
-		--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
-		--_ui5_slider_tickmark_height: 0.75rem;
-		--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
-	}
-}

package/src/themes/sap_fiori_3/SliderHandle-parameters.css

@@ -1,5 +1,22 @@
 @import "../base/SliderHandle-parameters.css";
 
 :host {
+	--_ui5_slider_handle_height: 1.875rem;
+	--_ui5_slider_handle_width: 1.875rem;
+	--_ui5_slider_handle_focus_border: 0.125rem solid var(--sapButton_Active_BorderColor);
 	--ui5_slider_handle_outline_offset: 1px;
-}
+	--_ui5_slider_handle_background: transparent;
+	--_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
+	--_ui5_slider_handle_border_radius: 1rem;
+	--_ui5_slider_handle_hover_background: transparent;
+	--_ui5_slider_handle_hover_border: 0.125rem solid var(--sapSlider_Hover_HandleBorderColor);
+	--_ui5_slider_handle_active_border: 0.125rem solid var(--sapContent_FocusColor);
+}
+
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_slider_handle_width: 1.5rem;
+		--_ui5_slider_handle_height: 1.5rem;
+	}
+}
+

package/src/themes/sap_fiori_3/SliderScale-parameters.css

@@ -1,13 +1,7 @@
 @import "../base/SliderScale-parameters.css";
 
 :host {
-	--_ui5_slider_scale_root_box_sizing: border-box;
-	--_ui5_slider_scale_progress_border: none;
 	--_ui5_slider_scale_border: none;
-	--_ui5_slider_scale_progress_height: 100%;
-	--_ui5_slider_scale_progress_top: 0;
-
-	/* Fiori 3 specific */
-	--_ui5_slider_scale_dots_display: none;
 	--_ui5_slider_scale_tickmark_height: 1rem;
-}
+	--_ui5_slider_scale_progress_background: var(--sapActiveColor);
+}

package/src/themes/sap_fiori_3/SliderTooltip-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/SliderTooltip-parameters.css";
+
+:host {
+	--_ui5_slider_tooltip_color: var(--sapContent_LabelColor);
+}

package/src/themes/sap_fiori_3_dark/Slider-parameters.css

@@ -1,11 +1,11 @@
 :host {
-	--_slider_root_side_padding: 0 1rem;
-	--_slider_height: 2.75rem;
+	--_ui5_slider_root_side_padding: 0 1rem;
+	--_ui5_slider_height: 2.75rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
-		--_slider_root_side_padding: 0 .75rem;
-		--_slider_height: 2rem;
+		--_ui5_slider_root_side_padding: 0 .75rem;
+		--_ui5_slider_height: 2rem;
 	}
 }

package/src/themes/sap_fiori_3_dark/SliderBase-parameters.css

@@ -1,26 +1 @@
-@import "../base/SliderBase-parameters.css";
-
-:host {
-	--_ui5_slider_inner_min_width: 4rem;
-	--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
-	--_ui5_range_slider_handle_background: transparent;
-	--_ui5_range_slider_root_hover_handle_bg: transparent;
-	--_ui5_slider_handle_width: 1.875rem;
-	--_ui5_slider_handle_height: 1.875rem;
-	--_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
-	--_ui5_slider_handle_border_radius: 1rem;
-	--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
-	--_ui5_slider_handle_box_sizing: border-box;
-	--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
-	--_ui5_slider_tickmark_height: 1rem;
-}
-
-@container style(--ui5_content_density: compact) {
-	:host {
-		--_ui5_slider_handle_width: 1.5rem;
-		--_ui5_slider_handle_height: 1.5rem;
-		--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
-		--_ui5_slider_tickmark_height: 0.75rem;
-		--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
-	}
-}
+@import "../sap_fiori_3/SliderBase-parameters.css";

package/src/themes/sap_fiori_3_dark/SliderHandle-parameters.css

@@ -1,5 +1 @@
-@import "../base/SliderHandle-parameters.css";
-
-:host {
-	--ui5_slider_handle_outline_offset: 1px;
-}
+@import "../sap_fiori_3/SliderHandle-parameters.css";

package/src/themes/sap_fiori_3_dark/SliderScale-parameters.css

@@ -1,13 +1 @@
-@import "../base/SliderScale-parameters.css";
-
-:host {
-	--_ui5_slider_scale_root_box_sizing: border-box;
-	--_ui5_slider_scale_progress_border: none;
-	--_ui5_slider_scale_border: none;
-	--_ui5_slider_scale_progress_height: 100%;
-	--_ui5_slider_scale_progress_top: 0;
-
-	/* Fiori 3 specific */
-	--_ui5_slider_scale_dots_display: none;
-	--_ui5_slider_scale_tickmark_height: 1rem;
-}
+@import "../sap_fiori_3/SliderScale-parameters.css";

package/src/themes/sap_fiori_3_dark/SliderTooltip-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/SliderTooltip-parameters.css";
+
+:host {
+	--_ui5_slider_tooltip_color: var(--sapContent_LabelColor);
+}

package/src/themes/sap_fiori_3_hcb/Slider-parameters.css

@@ -1,11 +1,11 @@
 :host {
-	--_slider_root_side_padding: 0 1rem;
-	--_slider_height: 2.75rem;
+	--_ui5_slider_root_side_padding: 0 1rem;
+	--_ui5_slider_height: 2.75rem;
 }
 
 @container style(--ui5_content_density: compact) {
 	:host {
-		--_slider_root_side_padding: 0 .75rem;
-		--_slider_height: 2rem;
+		--_ui5_slider_root_side_padding: 0 .75rem;
+		--_ui5_slider_height: 2rem;
 	}
 }

package/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css

@@ -1,39 +1 @@
-@import "../base/SliderBase-parameters.css";
-
-:host {
-	--_ui5_slider_inner_height: 0.375rem; /* Total height including border */
-	--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
-	--_ui5_slider_progress_box_sizing: border-box;
-	--_ui5_slider_progress_border: solid 0.0625rem var(--sapField_BorderColor);
-	--_ui5_slider_progress_border_radius: 0.375rem;
-	--_ui5_range_slider_handle_background: transparent;
-	--_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background);
-	--_ui5_slider_handle_width: 1.875rem;
-	--_ui5_slider_handle_height: 1.875rem;
-	--_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
-	--_ui5_slider_handle_border_radius: 1rem;
-	--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
-	--_ui5_slider_handle_box_sizing: border-box;
-	--_ui5_slider_progress_background: var(--sapSelectedColor);
-	--_ui5_slider_tickmark_height: 1rem;
-	--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
-	--_ui5_slider_active_progress_border: none;
-	--_ui5_slider_active_progress_left: 0rem;
-	--_ui5_slider_active_progress_top: 0;
-	--_ui5_slider_active_progress_height: var(--_ui5_slider_progress_height);
-	--_ui5_slider_no_tickmarks_active_progress_border: none;
-	--_ui5_slider_no_tickmarks_active_progress_left: 0;
-	--_ui5_slider_no_tickmarks_active_progress_top: 0;
-	--_ui5_slider_no_tickmarks_active_progress_height: var(--_ui5_slider_no_tickmarks_progress_height);
-}
-
-@container style(--ui5_content_density: compact) {
-	:host {
-		--_ui5_slider_handle_width: 1.5rem;
-		--_ui5_slider_handle_height: 1.5rem;
-		--_ui5_slider_handle_border_radius: 1rem;
-		--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
-		--_ui5_slider_tickmark_height: 0.75rem;
-		--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
-	}
-}
+@import "../sap_fiori_3/SliderBase-parameters.css";

package/src/themes/sap_fiori_3_hcb/SliderHandle-parameters.css

@@ -1,5 +1 @@
-@import "../base/SliderHandle-parameters.css";
-
-:host {
-	--ui5_slider_handle_outline_offset: 1px;
-}
+@import "../sap_fiori_3/SliderHandle-parameters.css";