@ui5/webcomponents 2.3.1-rc.0 → 2.4.0-rc.1

package/src/RangeSlider.hbs

@@ -1,8 +1,8 @@
 {{>include "./SliderBase.hbs"}}
 
 {{#*inline "handlesAriaText"}}
-	<span id="{{_id}}-startHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.startHandleText}}</span>
-	<span id="{{_id}}-endHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.endHandleText}}</span>
+	<span id="ui5-slider-startHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.startHandleText}}</span>
+	<span id="ui5-slider-endHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.endHandleText}}</span>
 {{/inline}}
 
 {{#*inline "progressBar"}}
@@ -22,56 +22,88 @@
 			aria-valuemax="{{max}}"
 			aria-valuenow="{{_ariaValueNow}}"
 			aria-valuetext="From {{startValue}} to {{endValue}}"
-			aria-labelledby="{{_ariaLabelledByProgressBarRefs}}"
+			aria-labelledby="ui5-slider-sliderDesc"
 			aria-disabled="{{_ariaDisabled}}"
 		></div>
 	</div>
 {{/inline}}
 
 {{#*inline "handles"}}
-	<div class="ui5-slider-handle ui5-slider-handle--start"
-		part="handle"
-		style="{{styles.startHandle}}"
-		@focusin="{{_onfocusin}}"
-		@focusout="{{_onfocusout}}"
-		role="slider"
-		tabindex="{{_tabIndex}}"
-		aria-orientation="horizontal"
-		aria-valuemin="{{min}}"
-		aria-valuemax="{{max}}"
-		aria-valuenow="{{startValue}}"
-		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
-		aria-disabled="{{_ariaDisabled}}"
-	>
-		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
+	<div class="ui5-slider-handle-container" style="{{styles.startHandle}}" part="handle-container">
+
+		<div class="ui5-slider-handle ui5-slider-handle--start"
+			part="handle"
+			@focusin="{{_onfocusin}}"
+			@focusout="{{_onfocusout}}"
+			role="slider"
+			tabindex="{{_tabIndex}}"
+			aria-orientation="horizontal"
+			aria-valuemin="{{min}}"
+			aria-valuemax="{{max}}"
+			aria-valuenow="{{startValue}}"
+			aria-labelledby="ui5-slider-startHandleDesc"
+			aria-disabled="{{_ariaDisabled}}"
+			.aria-describedby="{{_ariaDescribedByHandleText}}"
+		>
+			<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
+		</div>
 
 		{{#if showTooltip}}
-			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
+		<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
+			{{#if editableTooltip}}
+				<ui5-input
+					type="Number"
+					value="{{startValue}}"
+					accessible-name-ref="ui5-slider-InputLabel"
+					@focusout="{{_onInputFocusOut}}"
+					@keydown="{{_onInputKeydown}}"
+					@ui5-change="{{_onInputChange}}"
+					@ui5-input="{{_onInputInput}}"
+					data-sap-ui-start-value
+					tabindex="-1"
+				></ui5-input>
+			{{else}}
 				<span class="ui5-slider-tooltip-value">{{tooltipStartValue}}</span>
-			</div>
+			{{/if}}
+		</div>
 		{{/if}}
 	</div>
-
-	<div class="ui5-slider-handle ui5-slider-handle--end"
-		part="handle"
-		style="{{styles.endHandle}}"
-		@focusin="{{_onfocusin}}"
-		@focusout="{{_onfocusout}}"
-		role="slider"
-		tabindex="{{_tabIndex}}"
-		aria-orientation="horizontal"
-		aria-valuemin="{{min}}"
-		aria-valuemax="{{max}}"
-		aria-valuenow="{{endValue}}"
-		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
-		aria-disabled="{{_ariaDisabled}}"
-	>
-		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
+	<div class="ui5-slider-handle-container" style="{{styles.endHandle}}" part="handle-container">
+		<div class="ui5-slider-handle ui5-slider-handle--end"
+			part="handle"
+			@focusin="{{_onfocusin}}"
+			@focusout="{{_onfocusout}}"
+			role="slider"
+			tabindex="{{_tabIndex}}"
+			aria-orientation="horizontal"
+			aria-valuemin="{{min}}"
+			aria-valuemax="{{max}}"
+			aria-valuenow="{{endValue}}"
+			aria-labelledby="ui5-slider-endHandleDesc"
+			.aria-describedby="{{_ariaDescribedByHandleText}}"
+			aria-disabled="{{_ariaDisabled}}"
+		>
+			<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
+		</div>
 
 		{{#if showTooltip}}
-			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">
+		<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">
+			{{#if editableTooltip}}
+				<ui5-input
+					type="Number"
+					value="{{endValue}}"
+					accessible-name-ref="ui5-slider-InputLabel"
+					@focusout="{{_onInputFocusOut}}"
+					@keydown="{{_onInputKeydown}}"
+					@ui5-change="{{_onInputChange}}"
+					@ui5-input="{{_onInputInput}}"
+					data-sap-ui-end-value
+					tabindex="-1"
+				></ui5-input>
+			{{else}}
 				<span class="ui5-slider-tooltip-value">{{tooltipEndValue}}</span>
-			</div>
+			{{/if}}
+		</div>
 		{{/if}}
 	</div>
 {{/inline}}

package/src/Slider.hbs

@@ -17,26 +17,45 @@
 {{/inline}}
 
 {{#*inline "handles"}}
-	<div class="ui5-slider-handle"
-		style="{{styles.handle}}"
-		@focusout="{{_onfocusout}}"
-		@focusin="{{_onfocusin}}"
-		role="slider"
-		tabindex="{{_tabIndex}}"
-		aria-orientation="horizontal"
-		aria-valuemin="{{min}}"
-		aria-valuemax="{{max}}"
-		aria-valuenow="{{value}}"
-		aria-labelledby="{{_ariaLabelledByHandleRefs}}"
-		aria-disabled="{{_ariaDisabled}}"
-		data-sap-focus-ref
-		part="handle"
-	>
-			<ui5-icon mode="Decorative" name="direction-arrows" part="icon-slider" slider-icon></ui5-icon>
+	<div class="ui5-slider-handle-container" style="{{styles.handle}}" part="handle-container">
+		<div class="ui5-slider-handle"
+			@focusout="{{_onfocusout}}"
+			@focusin="{{_onfocusin}}"
+			role="slider"
+			tabindex="{{_tabIndex}}"
+			aria-orientation="horizontal"
+			aria-valuemin="{{min}}"
+			aria-valuemax="{{max}}"
+			aria-valuenow="{{value}}"
+			aria-labelledby="{{_ariaLabelledByHandleText}} ui5-sliderDesc"
+			aria-disabled="{{_ariaDisabled}}"
+			aria-keyshortcuts="F2"
+			aria-describedby="{{_ariaDescribedByHandleText}}"
+
+			data-sap-focus-ref
+			part="handle"
+		>
+				<ui5-icon name="direction-arrows" mode="Decorative" part="icon-slider" slider-icon></ui5-icon>
+		</div>
 		{{#if showTooltip}}
-			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
+		<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
+			{{#if editableTooltip}}
+				<ui5-input
+					value="{{_tooltipInputValue}}"
+					value-state="{{_tooltipInputValueState}}"
+					type="Number"
+					accessible-name-ref="ui5-slider-InputLabel"
+					@focusout="{{_onInputFocusOut}}"
+					@keydown="{{_onInputKeydown}}"
+					@ui5-change="{{_onInputChange}}"
+					@ui5-input="{{_onInputInput}}"
+					data-sap-ui-end-value
+					tabindex="-1"
+				></ui5-input>
+			{{else}}
 				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>
-			</div>
+			{{/if}}
+		</div>
 		{{/if}}
 	</div>
 {{/inline}}

package/src/SliderBase.hbs

@@ -5,7 +5,7 @@
 	@mouseover="{{_onmouseover}}"
 	@mouseout="{{_onmouseout}}"
 	@keydown="{{_onkeydown}}"
-	@keyup="{{_onkeyup}}"
+	@keyup="{{_onKeyupBase}}"
 	part="root-container"
 >
 	{{> handlesAriaText}}
@@ -37,11 +37,20 @@
 		{{> handles}}
 	</div>
 
-	<span id="{{_id}}-accName" class="ui5-hidden-text">{{accessibleName}}</span>
-	<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
+	{{#if accessibleName}}
+		<span id="ui5-slider-accName" class="ui5-hidden-text">{{accessibleName}}</span>
+	{{/if}}
+
+	<span id="ui5-slider-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
+
+	{{#if editableTooltip}}
+		<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{{_ariaDescribedByInputText}}</span>
+		<span id="ui5-slider-InputLabel" class="ui5-hidden-text">{{_ariaLabelledByInputText}}</span>
+	{{/if}}
+
 </div>
 
 
 {{#*inline "handlesAriaText"}}{{/inline}}
 {{#*inline "progressBar"}}{{/inline}}
-{{#*inline "handles"}}{{/inline}}
+{{#*inline "handles"}}{{/inline}}

package/src/TimeSelectionClocks.hbs

@@ -5,7 +5,6 @@
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@focusin={{_clocksFocusIn}}
-	@focusout={{_clocksFocusOut}}
 	format-pattern="{{formatPattern}}"
 >
 	<div
@@ -24,7 +23,6 @@
 			.valueText="{{this.textValue}}"
 			.accessibleName="{{this.label}}"
 			.pressed="{{this.active}}"
-			?focused="{{this.focused}}"
 			@focusin="{{../_buttonFocusIn}}"
 		>{{this.stringValue}}</ui5-toggle-spin-button>
 	{{/each}}

package/src/i18n/messagebundle.properties

@@ -498,6 +498,12 @@ MONTH_PICKER_DESCRIPTION = Month Picker
 #XACT: ARIA description for year picker
 YEAR_PICKER_DESCRIPTION = Year Picker
 
+#XACT: ARIA description for slider tooltip input
+SLIDER_TOOLTIP_INPUT_DESCRIPTION = Press F2 to enter a value
+
+#XACT: ARIA label for slider tooltip input
+SLIDER_TOOLTIP_INPUT_LABEL = Current Value
+
 #XTOL: tooltip for decrease button of the StepInput
 STEPINPUT_DEC_ICON_TITLE=Decrease
 

package/src/themes/ColorPaletteItem.css

@@ -112,7 +112,7 @@
 
 :host([selected]:not([_disabled]):not([on-phone]):not(:focus):not(:hover)) .ui5-cp-item::after,
 :host([selected]:not([_disabled]):not([on-phone]):not(:focus):hover) .ui5-cp-item::after,
-:host(:not([selected]):hover) .ui5-cp-item::after {
+:host(:not([selected]):not([on-phone]):hover) .ui5-cp-item::after {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
@@ -135,4 +135,26 @@
 	border: var(--_ui5_color-palette-item-before-focus-color);
 	border-radius: var(--_ui5_color-palette-item-before-focus-border-radius);
 	pointer-events: none;
+}
+
+/* Focus on mobile ONLY with external keyboard/mouse */
+:host(:not([disabled])) .ui5-cp-item:focus-visible::before,
+:host(:not([disabled])) .ui5-cp-item:focus-visible::after {
+	content: "";
+	box-sizing: border-box;
+	position: absolute;
+	pointer-events: none;
+}
+
+:host(:not([disabled])) .ui5-cp-item:focus-visible::before {
+	inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset))
+			var(--_ui5_color-palette-item-mobile-focus-sides-inset);
+	border: var(--_ui5_color-palette-item-before-focus-color);
+	border-radius: var(--_ui5_color-palette-item-after-focus-border-radius);
+}
+
+:host(:not([disabled])) .ui5-cp-item:focus-visible::after {
+	inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset))
+			var(--_ui5_color-palette-item-mobile-focus-sides-inset);
+	border: var(--_ui5_color-palette-item-after-mobile-focus-border);
 }

package/src/themes/ColorPicker.css

@@ -62,9 +62,17 @@
     width: 0.9375rem;
     height: 1.5rem;
     background: transparent;
+    box-sizing: border-box;
+}
+
+[ui5-slider]::part(handle-container) {
     margin-inline-start: -2px;
     margin-top: var(--_ui5_color_picker_slider_handle_margin_top);
-    box-sizing: border-box;
+}
+
+[ui5-slider]::part(handle-container):focus-within {
+    margin-inline-start: unset;
+    margin-top: unset;
 }
 
 [ui5-slider]::part(handle)::after {

package/src/themes/Form.css

@@ -15,10 +15,11 @@
 
 .ui5-form-header {
 	display: flex;
-	height: 2.75rem;
+	min-height: 2.75rem;
 	align-items: center;
 	border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
-	padding: 0 1rem 0 1rem;
+	padding: 0.875rem 1rem;
+	box-sizing: border-box;
 }
 
 .ui5-form-layout {

package/src/themes/FormLayout.css

@@ -1,6 +1,6 @@
 /* 
 * The Form layout is divided into one or more columns. 
-* XL - max. 4 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
+* XL - max. 6 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
 */
 /* 
 * S max-width: 600px - container padding 24px
@@ -76,10 +76,10 @@
 	}
 }
 
-/* XL - 2 columns by default, up to 6 */
+/* XL - 3 columns by default, up to 6 */
 @container (min-width: 1441px) {
 	.ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
+		grid-template-columns: repeat(3, 1fr);
 	}
 
 	:host([columns-xl="1"]) .ui5-form-layout {

package/src/themes/GrowingButton.css

@@ -13,7 +13,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	flex-direction: column;
+	flex-direction: row;
 	min-height: var(--_ui5_load_more_text_height);
 	width: 100%;
 	color: var(--sapButton_TextColor);
@@ -46,7 +46,6 @@
 
 [growing-button-text],
 [growing-button-subtext] {
-	width: 100%;
 	text-align: center;
 	font-family: "72override", var(--sapFontFamily);
 	white-space: nowrap;
@@ -62,6 +61,10 @@
 	font-weight: bold;
 }
 
+:host([loading]) [growing-button-text]{
+	padding-left: 0.5rem;
+}
+
 [growing-button-subtext] {
 	font-size: var(--sapFontSize);
 	padding: var(--_ui5_load_more_desc_padding);

package/src/themes/Input.css

@@ -108,7 +108,6 @@
 	-moz-appearance: textfield;
 	padding: var(--_ui5_input_inner_padding);
 	box-sizing: border-box;
-	min-width: var(--_ui5_input_min_width);
 	width: 100%;
 	text-align: inherit;
 	text-overflow: ellipsis;

package/src/themes/Link.css

@@ -103,21 +103,25 @@
 	text-overflow: ellipsis;
 }
 
-:host([focused]) .ui5-link-root,
-:host([design="Subtle"][focused]) .ui5-link-root {
+.ui5-link-root:focus-visible,
+:host([desktop]) .ui5-link-root:focus-within,
+:host([design="Subtle"]) .ui5-link-root:focus-visible,
+:host([design="Subtle"][desktop]) .ui5-link-root:focus-within {
 	background-color: var(--_ui5_link_focus_background_color);
 	outline: var(--_ui5_link_outline);
 	border-radius: var(--_ui5_link_focus_border-radius);
 	text-shadow: none;
+	color: var(--_ui5_link_focus_color);
 }
 
-:host([focused]),
-:host([design="Subtle"][focused]) {
-	color:  var(--_ui5_link_focus_color);
+:host(:not([desktop])) .ui5-link-root:focus-visible,
+:host([desktop]:focus-within),
+:host([design="Subtle"][desktop]:focus-within) {
 	text-decoration: var(--_ui5_link_focus_text_decoration);
 }
 
-:host([focused]:hover:not(:active)) {
+:host([desktop]:hover:not(:active):focus-within),
+:host([design="Subtle"][desktop]:hover:not(:active):focus-within) {
 	color: var(--_ui5_link_focused_hover_text_color);
 	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
 }

package/src/themes/ListItemBase.css

@@ -15,7 +15,7 @@
 }
 
 /* actionable (type="Active" + desktop) */
-:host([actionable]:not([disabled])) {
+:host([actionable]:not([disabled]):not([ui5-li-group-header])) {
 	cursor: pointer;
 }
 
@@ -30,8 +30,8 @@
 }
 
 /* hovered */
-:host([actionable]:not([active], [selected]):hover) {
-	background-color: var(--sapList_Hover_Background);
+:host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) {
+    background-color: var(--sapList_Hover_Background);
 }
 
 /* selected and hovered */

package/src/themes/ListItemGroupHeader.css

@@ -10,6 +10,10 @@
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
 }
 
+:host([actionable]:not([disabled])) {
+	cursor: default;
+}
+
 .ui5-li-root.ui5-ghli-root {
 	padding-top: 0.5rem;
 	color: currentColor;

package/src/themes/SliderBase.css

@@ -100,9 +100,7 @@
 	background: var(--_ui5_slider_handle_background);
 	border: var(--_ui5_slider_handle_border);
 	border-radius: var(--_ui5_slider_handle_border_radius);
-	margin-inline-start: calc(-1 * var(--_ui5_slider_handle_width) / 2);
-	top: var(--_ui5_slider_handle_top);
-	position: absolute;
+	position: relative;
 	outline: none;
 	height: var(--_ui5_slider_handle_height);
 	width: var(--_ui5_slider_handle_width);
@@ -148,13 +146,18 @@
 	border: var(--_ui5_slider_handle_focus_border);
 }
 
-.ui5-slider-tooltip {
+.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;
-	pointer-events: none;
-	line-height: 1rem;
 	position: absolute;
 	left: 50%;
 	transform: translate(-50%);
@@ -171,6 +174,22 @@
 	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;
@@ -195,6 +214,7 @@
 	text-align: center;
 	display: inline-block;
 	color: var(--_ui5_slider_label_color);
+	font-family: var(--sapFontFamily);
 	font-size: var(--_ui5_slider_label_fontsize);
 	padding-top: 0;
 	box-sizing: border-box;
@@ -236,4 +256,4 @@
 	position: absolute;
 	border-radius: var(--_ui5_slider_handle_border_radius);
 	pointer-events: none;
-}
+}

package/src/themes/Switch.css

@@ -120,7 +120,8 @@
 }
 
 /* switch focused */
-.ui5-switch--desktop.ui5-switch-root:focus::after {
+.ui5-switch-root:focus-visible::after,
+.ui5-switch--desktop.ui5-switch-root:focus-within::after {
 	content: "";
 	position: absolute;
 	inset-inline-start: var(--_ui5_switch_root_outline_left);

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

@@ -24,4 +24,7 @@
 	--_ui5_color-palette-item-after-focus-not-selected-border: 0.0625rem dotted black;
 	--_ui5_color-palette-item-after-not-focus-color: 0.0625rem solid var(--sapGroup_ContentBackground);
 	--_ui5_color-palette-item-selected-focused-border: 0.0625rem solid var(--sapGroup_ContentBackground);
+	--_ui5-color-palette-item-mobile-focus-inset: 0.625rem;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: 0.25rem 0.25rem;
+	--_ui5_color-palette-item-after-mobile-focus-border: var(--_ui5_color-palette-item-after-focus-color);
 }

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

@@ -344,7 +344,7 @@
 
 	/* Slider */
 	--_ui5_slider_handle_height: 1.25rem;
-	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_slider_handle_top: -.5rem;
 	--_ui5_slider_tooltip_height: 1rem;
 	--_ui5_slider_tooltip_padding: 0.25rem;

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

@@ -15,3 +15,10 @@
 	--_ui5_slider_handle_box_sizing: border-box;
 	--_ui5_slider_tickmark_top: -.34375rem;
 }
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+--_ui5_slider_handle_width: 1.25rem;
+--_ui5_slider_handle_height: 1.25rem;
+}

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

@@ -15,4 +15,8 @@
 
 	/* Timeline Group Item */
 	--_ui5_timeline_tlgi_root_horizontal_height: 20.90625rem;
+
+	/* Slider, Range Slider */
+	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_height: 1.25rem;
 }

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

@@ -4,4 +4,11 @@
 	--_ui5_slider_inner_min_width: 4rem;
 	--_ui5_range_slider_handle_background: transparent;
 	--_ui5_range_slider_root_hover_handle_bg: transparent;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+--_ui5_slider_handle_width: 1.25rem;
+--_ui5_slider_handle_height: 1.25rem;
 }

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

@@ -12,4 +12,8 @@
     --_ui5_timeline_tli_indicator_after_height: 50%;
     --_ui5_timeline_tli_indicator_after_top: -50%;
     --_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% - 1rem);
+
+    /* Slider, Range Slider */
+	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_height: 1.25rem;
 }

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

@@ -1,4 +1,10 @@
 @import "../base/sizes-parameters.css";
+:root {
+	/* Slider, Range Slider */
+	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_height: 1.25rem;
+	--_ui5_slider_handle_top: -0.5rem;
+}
 
 [data-ui5-compact-size],
 .ui5-content-density-compact,

package/src/themes/sap_fiori_3_hcw/sizes-parameters.css

@@ -1,4 +1,10 @@
 @import "../base/sizes-parameters.css";
+:root {
+	/* Slider, Range Slider */
+	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_height: 1.25rem;
+	--_ui5_slider_handle_top: -0.5rem;
+}
 
 [data-ui5-compact-size],
 .ui5-content-density-compact,

package/src/themes/sap_horizon/ColorPalette-parameters.css

@@ -21,4 +21,7 @@
 	--_ui5_color-palette-item-selected-focused-border-before: -0.0625rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
 }

package/src/themes/sap_horizon_dark/ColorPalette-parameters.css

@@ -21,4 +21,7 @@
 	--_ui5_color-palette-item-selected-focused-border-before: -0.0625rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
 }

package/src/themes/sap_horizon_dark_exp/ColorPalette-parameters.css

@@ -19,4 +19,7 @@
 	--_ui5_color-palette-item-hover-inner-border-radius: 0.375rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
 }