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

package/src/SliderScaleTemplate.tsx

@@ -25,7 +25,32 @@ export default function SliderScaleTemplate(this: SliderScale) {
 					))}
 				</div>
 			)}
-			<div class="ui5-slider-scale-progress" part="progress" style={this._progressStyle}></div>
+			<div
+				class={{
+					"ui5-slider-scale-progress": true,
+					"ui5-slider-progress": true,
+					"ui5-slider-progress--focused": this.progressFocused || this.progressPressed,
+				}}
+				part="progress"
+				style={this._progressStyle}
+				tabIndex={this.progressTabIndex}
+				role="slider"
+				aria-orientation="horizontal"
+				aria-valuemin={this.min}
+				aria-valuemax={this.max}
+				aria-valuenow={this.progressAriaValueNow}
+				aria-valuetext={this.progressAriaValueText}
+				aria-label={this.progressAriaLabel}
+				aria-disabled={this.progressAriaDisabled}
+				onMouseEnter={this._onProgressMouseEnter}
+				onMouseLeave={this._onProgressMouseLeave}
+			></div>
+			<div
+				class="ui5-slider-scale-progress-hover-area"
+				style={this._progressStyle}
+				onMouseEnter={this._onProgressMouseEnter}
+				onMouseLeave={this._onProgressMouseLeave}
+			></div>
 			<slot></slot>
 		</div>
 	);

package/src/SliderTemplate.tsx

@@ -29,7 +29,6 @@ const handle = (slider: Slider) => {
 				aria-valuenow={slider.value}
 				aria-label={slider._ariaLabel}
 				aria-disabled={slider._ariaDisabled}
-				aria-keyshortcuts={slider._ariaKeyshortcuts}
 				aria-describedby={slider._ariaDescribedByHandleText}
 				style={{
 					"inset-inline-start": `clamp(0%, ${position}%, 100%)`,

package/src/TableHeaderRowTemplate.tsx

@@ -54,13 +54,35 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
+			{ this._renderDummyCell && this._hasPopin &&
+				<TableHeaderCell id="dummy-cell" role="none" aria-hidden={true}
+					data-excluded-from-navigation="">
+				</TableHeaderCell>
+			}
+
 			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell" aria-colindex={ariaColIndex++}>
 					<div id="actions-cell-content">{this._i18nRowActions}</div>
 				</TableHeaderCell>
 			}
 
-			{ this._popinCells.length > 0 &&
+			{ this._renderNavigated &&
+				<TableHeaderCell id="navigated-cell"
+					data-excluded-from-navigation
+					aria-hidden={true}
+					role="none"
+				>
+					<div id="navigated"></div>
+				</TableHeaderCell>
+			}
+
+			{ this._renderDummyCell && !this._hasPopin &&
+				<TableHeaderCell id="dummy-cell" role="none" aria-hidden={true}
+					data-excluded-from-navigation="nofocus">
+				</TableHeaderCell>
+			}
+
+			{ this._hasPopin &&
 				<TableHeaderCell id="popin-cell" aria-colindex={ariaColIndex++} data-excluded-from-navigation>
 					<div id="popin-cell-content">{this._i18nRowPopin}</div>
 				</TableHeaderCell>

package/src/TableRowTemplate.tsx

@@ -47,6 +47,12 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
+			{ this._renderDummyCell && this._hasPopin &&
+				<TableCell id="dummy-cell" role="none" aria-hidden={true} data-border-merged=""
+					data-excluded-from-navigation="">
+				</TableCell>
+			}
+
 			{ this._rowActionCount > 0 &&
 				<TableCell id="actions-cell"
 					aria-colindex={ariaColIndex++}
@@ -80,7 +86,13 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				</TableCell>
 			}
 
-			{ this._popinCells.length > 0 &&
+			{ this._renderDummyCell && !this._hasPopin &&
+				<TableCell id="dummy-cell" role="none" aria-hidden={true} data-border-merged=""
+					data-excluded-from-navigation="nofocus">
+				</TableCell>
+			}
+
+			{ this._hasPopin &&
 				<TableCell id="popin-cell"
 					data-ui5-table-popin-cell
 					aria-colindex={ariaColIndex++}

package/src/i18n/messagebundle.properties

@@ -342,6 +342,12 @@ INPUT_SUGGESTIONS_MORE_HITS={0} results are available
 #XACT: ARIA announcement for the Input suggestion result if no hit
 INPUT_SUGGESTIONS_NO_HIT=No results
 
+#XACT: ARIA announcement when suggestions popover is expanded
+INPUT_SUGGESTIONS_EXPANDED=Expanded
+
+#XACT: ARIA announcement when suggestions popover is collapsed
+INPUT_SUGGESTIONS_COLLAPSED=Collapsed
+
 #XACT: ARIA label for the Input clear icon
 INPUT_CLEAR_ICON_ACC_NAME=Clear
 
@@ -472,10 +478,10 @@ PANEL_ICON=Expand/Collapse
 RANGE_SLIDER_ARIA_DESCRIPTION=Range
 
 #XACT: ARIA description for range slider start handle
-RANGE_SLIDER_START_HANDLE_DESCRIPTION=Left handle
+RANGE_SLIDER_START_HANDLE_DESCRIPTION=Minimum
 
 #XACT: ARIA description for range slider end handle
-RANGE_SLIDER_END_HANDLE_DESCRIPTION=Right handle
+RANGE_SLIDER_END_HANDLE_DESCRIPTION=Maximum
 
 #XBUT: Rating indicator tooltip text
 RATING_INDICATOR_TOOLTIP_TEXT=Rating

package/src/themes/CardHeader.css

@@ -136,7 +136,6 @@
 	font-weight: normal;
 	color: var(--sapTile_TextColor);
 	margin-top: var(--_ui5_card_header_subtitle_margin_top);
-	max-height: 2.1rem;
 }
 
 .ui5-card-header .ui5-card-header-text .ui5-card-header-title,

package/src/themes/RangeSlider.css

@@ -1,77 +1,29 @@
-:host([ui5-range-slider]) .ui5-slider-progress-container::before {
-	background-color: var(--_ui5_slider_progress_container_dot_background);
-}
-
-/* Range Slider handles (Horizon implementatioon) */
-
-.ui5-slider-root:hover:active .ui5-slider-handle:not(:focus) {
-	background: var(--sapSlider_RangeHandleBackground);
-}
-
-:host([range-pressed]) .ui5-slider-root:active .ui5-slider-handle:not(:focus) {
-	background: var(--_ui5_range_slider_handle_active_background);
-	border: var(--_ui5_slider_handle_focus_border);
-	box-shadow: none;
-}
-
-:host([range-pressed]) .ui5-slider-handle [slider-icon] {
-	display: var(--_ui5_range_slider_active_handle_icon_display);
-}
-
-.ui5-slider-root:not(.ui5-slider-root-phone):focus .ui5-slider-inner .ui5-slider-handle,
-.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-inner .ui5-slider-handle:focus {
-	background: var(--_ui5_range_slider_handle_background_focus);
-}
+@import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
 
-.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-inner .ui5-slider-handle:focus [slider-icon] {
-  display: none;
+:host {
+	display: inline-block;
+	height: var(--_ui5_slider_height, 2.75rem);
+	width: 100%;
 }
 
-.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-progress:focus::before {
-	display: var(--_ui5_range_slider_legacy_progress_focus_display);
-	content: '';
-	position: absolute;
-	width: var(--_ui5_range_slider_focus_outline_width);
-	border: var(--_ui5_slider_progress_outline);
-	border-radius: var(--_ui5_range_slider_focus_outline_radius);
-	top: var(--_ui5_slider_progress_outline_offset);
-	height: var(--_ui5_slider_outer_height);
-	box-sizing: border-box;
-	left: var(--_ui5_slider_progress_outline_offset_left);
+:host([label-interval]:not([label-interval="0"])) {
+	height: 3.75rem;
+	align-items: flex-start;
 }
 
-.ui5-slider-progress {
-  position: relative;
-  inset-inline-start: 0;
-}
-
-.ui5-slider-progress:focus::after {
-	border: 0.125rem solid var(--sapContent_FocusColor);
-	border-radius: 0.5rem;
-	content: "";
-	display: var(--_ui5_range_slider_progress_focus_display);
-	position: absolute;
-	top: var(--_ui5_range_slider_progress_focus_top);
-	left: var(--_ui5_range_slider_progress_focus_left);
-	right: var(--_ui5_range_slider_progress_focus_right);
-	padding: var(--_ui5_range_slider_progress_focus_padding);
-	height: var(--_ui5_range_slider_progress_focus_height);
+.ui5-slider-evo-root {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	padding: var(--_ui5_slider_root_side_padding);
 	box-sizing: border-box;
+	min-width: var(--_ui5_slider_inner_min_width);
 }
 
-.ui5-slider-handle {
-	background: var(--_ui5_range_slider_handle_background);
+:host([disabled]) {
+	opacity: var(--_ui5_slider_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
 }
-
-.ui5-slider-progress-container:hover ~ .ui5-slider-handle:not(:focus),
-.ui5-slider-handle:hover  {
-	background: var(--_ui5_range_slider_root_hover_handle_bg);
-}
-
-.ui5-slider-root:hover .ui5-slider-handle:not(:focus) [slider-icon] {
-	display: var(--_ui5_range_slider_root_hover_handle_icon_display);
-}
-
-:host([range-pressed]) .ui5-slider-root:active .ui5-slider-handle:not(:focus) [slider-icon] {
-	display: var(--_ui5_range_slider_root_active_handle_icon_display);
-}

package/src/themes/Select.css

@@ -7,6 +7,31 @@
 	width: var(--_ui5_button_base_min_width);
 }
 
+:host([opened]) .ui5-input-focusable-element::after {
+	content: var(--ui5_input_focus_pseudo_element_content);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
+	border-radius: var(--_ui5_input_focus_border_radius);
+	top: var(--_ui5_input_focus_offset);
+	bottom: var(--_ui5_input_focus_offset);
+	left: var(--_ui5_input_focus_offset);
+	right: var(--_ui5_input_focus_offset);
+}
+
+:host([value-state="Negative"][opened]:not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
+}
+
+:host([value-state="Critical"][opened]:not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
+}
+
+:host([value-state="Positive"][opened]:not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
+}
+
 :host([icon]) .ui5-select-root {
 	min-width: var(--_ui5_button_base_min_width);
 }

package/src/themes/Slider.css

@@ -3,7 +3,7 @@
 
 :host {
 	display: inline-block;
-	height: var(--_slider_height, 2.75rem);
+	height: var(--_ui5_slider_height, 2.75rem);
 	width: 100%;
 }
 
@@ -17,8 +17,9 @@
 	height: 100%;
 	display: flex;
 	align-items: center;
-	padding: var(--_slider_root_side_padding);
+	padding: var(--_ui5_slider_root_side_padding);
 	box-sizing: border-box;
+	min-width: var(--_ui5_slider_inner_min_width);
 }
 
 :host([disabled]) {
@@ -26,7 +27,3 @@
 	cursor: default;
 	pointer-events: none;
 }
-
-[ui5-slider-handle] {
-	z-index: 5;
-}

package/src/themes/SliderBase.css

@@ -1,270 +1,2 @@
 @import "./InvisibleTextStyles.css";
-@import "./FormComponents.css";
-
-:host([disabled]) {
-	opacity: var(--_ui5_slider_disabled_opacity);
-	cursor: default;
-	pointer-events: none;
-}
-
-:host {
-	box-sizing: border-box;
-	cursor: pointer;
-	width: 100%;
-}
-
-:host(:not([hidden])) {
-	display: inline-block;
-}
-
-.ui5-slider-root {
-	box-sizing: border-box;
-	height: var(--_ui5_slider_root_height);
-	outline: none;
-	padding: var(--_ui5_slider_padding);
-	touch-action: none;
-}
-
-.ui5-slider-inner {
-	background-repeat: no-repeat;
-	position: relative;
-	min-width: var(--_ui5_slider_inner_min_width);
-	height: 100%;
-}
-
-.ui5-slider-progress-container {
-	width: 100%;
-	background: var(--_ui5_slider_progress_container_background);
-	border: var(--_ui5_slider_progress_border);
-	border-radius: var(--_ui5_slider_progress_border_radius);
-	height: var(--_ui5_slider_inner_height);
-	position: relative;
-	box-sizing: var(--_ui5_slider_progress_box_sizing);
-	top: var(--_ui5_slider_progress_container_top);
-}
-
-.ui5-slider-progress-container::before,
-.ui5-slider-progress-container::after {
-	display: var(--_ui5_slider_progress_container_dot_display);
-	content: "";
-	position: absolute;
-	box-sizing: border-box;
-	border-radius: 50%;
-	width: var(--_ui5_slider_start_end_point_size);
-	height: var(--_ui5_slider_start_end_point_size);
-	top: var(--_ui5_slider_start_end_point_top);
-}
-
-.ui5-slider-progress-container::before {
-	inset-inline-start: var(--_ui5_slider_start_end_point_left);
-	background-color: var(--_ui5_slider_progress_before_background);
-	border: var(--_ui5_slider_progress_before_border);
-}
-
-.ui5-slider-progress-container::after {
-	inset-inline-end: var(--_ui5_slider_start_end_point_left);
-	background-color: var(--_ui5_slider_progress_after_background);
-	border: var(--_ui5_slider_progress_after_border);
-}
-
-.ui5-slider-progress {
-	background: var(--_ui5_slider_progress_background);
-	border-radius: var(--_ui5_slider_active_progress_border_radius);
-	height: var(--_ui5_slider_active_progress_height);
-	position: absolute;
-	outline: none;
-	box-sizing: content-box;
-	border: var(--_ui5_slider_active_progress_border);
-	inset-inline-start: var(--_ui5_slider_active_progress_left);
-	top: var(--_ui5_slider_active_progress_top);
-}
-
-.ui5-slider-tickmarks {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	top: var(--_ui5_slider_tickmark_top);
-	display: flex;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: space-between;
-	position: absolute;
-	z-index: 1;
-}
-
-.ui5-slider-tickmarks li {
-	height: var(--_ui5_slider_tickmark_height);
-	border-inline-start: 0.0625rem solid var(--_ui5_slider_tickmark_bg);
-}
-
-.ui5-slider-handle {
-	background: var(--_ui5_slider_handle_background);
-	border: var(--_ui5_slider_handle_border);
-	border-radius: var(--_ui5_slider_handle_border_radius);
-	position: relative;
-	outline: none;
-	height: var(--_ui5_slider_handle_height);
-	width: var(--_ui5_slider_handle_width);
-	box-sizing: var(--_ui5_slider_handle_box_sizing);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	z-index: 2;
-}
-
-[slider-icon] {
-	display: var(--_ui5_slider_handle_icon_display);
-	color: var(--sapContent_Selected_ForegroundColor);
-	width: var(--_ui5_slider_handle_icon_size);
-	height: var(--_ui5_slider_handle_icon_size);
-}
-
-.ui5-slider-root .ui5-slider-handle:focus [slider-icon] {
-	display: var(--_ui5_range_slider_active_handle_icon_display);
-}
-
-.ui5-slider-progress-container:hover ~ .ui5-slider-handle:not(:focus),
-.ui5-slider-handle:hover {
-	background: var(--_ui5_slider_handle_hover_background);
-	border: var(--_ui5_slider_handle_hover_border);
-}
-
-.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,
-.ui5-slider-handle:focus {
-	outline: var(--_ui5_slider_handle_outline);
-	outline-offset: var(--_ui5_slider_handle_outline_offset);
-	border: var(--_ui5_slider_handle_focus_border);
-	background: var(--_ui5_slider_handle_background_focus);
-}
-
-.ui5-slider-handle.ui5-slider-handle--start:focus,
-.ui5-slider-handle--end:focus {
-	border: var(--_ui5_slider_handle_focus_border);
-}
-
-.ui5-slider-root:focus:hover .ui5-slider-handle,
-.ui5-slider-handle:focus:hover {
-	border: var(--_ui5_slider_handle_focus_border);
-}
-
-.ui5-slider-handle-container {
-	position: absolute;
-	margin-inline-start: calc(-1 * var(--_ui5_slider_handle_width) / 2);
-	top: var(--_ui5_slider_handle_top);
-}
-
-:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip {
-	display: flex;
-	font-family: var(--sapFontFamily);
-	justify-content: center;
-	align-items: center;
-	visibility: hidden;
-	position: absolute;
-	left: 50%;
-	transform: translate(-50%);
-	bottom: var(--_ui5_slider_tooltip_bottom);
-	background: var(--_ui5_slider_tooltip_background);
-	border: var(--_ui5_slider_tooltip_border);
-	border-radius: var(--_ui5_slider_tooltip_border_radius);
-	box-shadow: var(--_ui5_slider_tooltip_box_shadow);
-	font-size: var(--_ui5_slider_tooltip_fontsize);
-	color: var(--_ui5_slider_tooltip_color);
-	height: var(--_ui5_slider_tooltip_height);
-	min-width: var(--_ui5_slider_tooltip_min_width);
-	padding: var(--_ui5_slider_tooltip_padding);
-	box-sizing: var(--_ui5_slider_tooltip_border_box);
-}
-
-:host(:not([hidden])):host([editable-tooltip]) .ui5-slider-handle-container .ui5-slider-tooltip {
-	border: none;
-	background: none;
-	box-shadow: none;
-}
-
-:host([editable-tooltip]) .ui5-slider-tooltip {
-	padding: 0;
-	box-shadow: none;
-}
-
-.ui5-slider-tooltip [ui5-input] {
-	width: 100%;
-	text-align: center;
-}
-
-.ui5-slider-tooltip-value {
-	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ui5-slider-labels {
-	position: absolute;
-	top: 1.25rem;
-	margin: 0;
-	padding: 0;
-	white-space: nowrap;
-    height: 1rem;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-}
-
-.ui5-slider-labels li {
-    position: relative;
-	list-style: none;
-	margin: 0;
-	text-align: center;
-	display: inline-block;
-	font-family: var(--sapFontFamily);
-	font-size: var(--_ui5_slider_label_fontsize);
-	padding-top: 0;
-	box-sizing: border-box;
-    width: 0.0625rem;
-    visibility: hidden;
-}
-
-.ui5-slider-labels li::after {
-	content: attr(data-counter);
-	position: absolute;
-	top: 0;
-	visibility: visible;
-    display: inline-block;
-    width: 2rem;
-	color: var(--_ui5_slider_label_color);
-    transform: translateX(-50%);
-}
-
-.ui5-slider-hidden-labels li:not(:first-child):not(:last-child)::after {
-	visibility: hidden;
-}
-
-.ui5-slider-handle:focus .ui5-slider-tooltip {
-	bottom: var(--_ui5_slider_handle_focused_tooltip_distance);
-}
-
-.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range {
-	border-inline-start: 1px solid var(--_ui5_slider_tickmark_in_range_bg);
-}
-
-:host([show-tickmarks]) .ui5-slider-progress {
-	height: var(--_ui5_slider_no_tickmarks_active_progress_height);
-	border: var(--_ui5_slider_no_tickmarks_active_progress_border);
-	inset-inline-start: var(--_ui5_slider_no_tickmarks_active_progress_left);
-	top: var(--_ui5_slider_no_tickmarks_active_progress_top);
-}
-
-:host([show-tickmarks]) .ui5-slider-progress-container {
-	top: var(--_ui5_slider_no_tickmarks_progress_container_top);
-}
-
-.ui5-slider-handle:focus:after {
-	content: "";
-	display: var(--_ui5_slider_handle_focus_visibility);
-	width: calc(100% + (var(--sapContent_FocusWidth) * 2) + 2px);
-	height: calc(100% + (var(--sapContent_FocusWidth) * 2) + 2px);
-	border: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
-	position: absolute;
-	border-radius: var(--_ui5_slider_handle_border_radius);
-	pointer-events: none;
-}
+@import "./FormComponents.css";

package/src/themes/SliderHandle.css

@@ -10,7 +10,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	z-index: 2;
+	z-index: 5;
 	top: 0;
 	cursor: pointer;
 	margin-inline-start: calc(var(--_ui5_slider_handle_width) / -2 );
@@ -21,9 +21,11 @@
 :host(:focus) {
 	outline: var(--ui5_slider_handle_outline);
 	outline-offset: var(--ui5_slider_handle_outline_offset);
+	z-index: 6;
 }
 
-:host(:hover) {
+:host(:hover),
+:host([hovered]) {
 	background: var(--_ui5_slider_handle_hover_background);
 	border: var(--_ui5_slider_handle_hover_border);
 }
@@ -56,6 +58,5 @@
 }
 
 :host([orientation="Vertical"]) {
-	/* rotate */
 	transform: rotate(90deg);
 }

package/src/themes/SliderScale.css

@@ -11,14 +11,11 @@
 	height: .25rem;
 	top: 50%;
 	transform: translateY(-50%);
-}
-
-.ui5-slider-scale-root {
 	box-sizing: var(--_ui5_slider_scale_root_box_sizing);
 	border-radius: 0.25rem;
 	width: 100%;
 	position: relative;
-	background: var(--ui5_slider_scale_background);
+	background: var(--_ui5_slider_scale_background);
 	border: var(--_ui5_slider_scale_border);
 }
 
@@ -58,12 +55,54 @@
 	position: absolute;
 	top: var(--_ui5_slider_scale_progress_top);
 	height: var(--_ui5_slider_scale_progress_height);
-	background-color: var(--sapSlider_Selected_Background);
+	background-color: var(--_ui5_slider_scale_progress_background);
 	border: var(--_ui5_slider_scale_progress_border);
 	border-left: none;
 	box-sizing: border-box;
 	z-index: 4;
-	border-radius: .25rem;
+	border-radius: var(--_ui5_slider_scale_progress_border_radius);
+}
+
+.ui5-slider-scale-progress-hover-area {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	height: 2rem;
+	z-index: 3;
+	cursor: pointer;
+}
+
+.ui5-slider-scale-progress:focus {
+	outline: none;
+}
+
+.ui5-slider-scale-progress:focus::after,
+.ui5-slider-scale-progress.ui5-slider-progress--focused::after {
+	border: var(--_ui5_range_slider_progress_focus_border);
+	border-radius: var(--_ui5_range_slider_progress_focus_border_radius, 0.5rem);
+	content: "";
+	display: var(--_ui5_range_slider_progress_focus_display);
+	position: absolute;
+	top: var(--_ui5_range_slider_progress_focus_top);
+	left: var(--_ui5_range_slider_progress_focus_left);
+	right: var(--_ui5_range_slider_progress_focus_right);
+	padding: var(--_ui5_range_slider_progress_focus_padding);
+	height: var(--_ui5_range_slider_progress_focus_height);
+	box-sizing: border-box;
+}
+
+.ui5-slider-scale-progress:focus::before,
+.ui5-slider-scale-progress.ui5-slider-progress--focused::before {
+	display: var(--_ui5_range_slider_legacy_progress_focus_display);
+	content: '';
+	position: absolute;
+	width: var(--_ui5_range_slider_focus_outline_width);
+	border: var(--_ui5_slider_progress_outline);
+	border-radius: var(--_ui5_range_slider_focus_outline_radius);
+	top: var(--_ui5_slider_progress_outline_offset);
+	height: var(--_ui5_slider_outer_height);
+	box-sizing: border-box;
+	left: var(--_ui5_slider_progress_outline_offset_left);
 }
 
 .ui5-slider-scale-root::before {

package/src/themes/SliderTooltip.css

@@ -12,7 +12,7 @@
 	padding: 0 0.5rem;
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
-	color: var(--sapTextColor);
+	color: var(--_ui5_slider_tooltip_color);
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -24,7 +24,7 @@
 	height: fit-content;
 	border: none;
 	padding: 0;
-	margin-top: -3rem;
+	margin-top: -3.375rem;
 	box-shadow: none;
 }