@ui5/webcomponents 2.20.0-rc.1 → 2.20.0-rc.2

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.20.0-rc.1",
+  "version": "2.20.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1868,6 +1868,11 @@
               "description": "Defines the value of the component.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "selected-value",
+              "description": "Defines the selected item's value.\n\nUse this property together with the `value` property on `ui5-cb-item` to:\n- Select an item programmatically by its unique identifier\n- Handle items with identical display text but different underlying values\n- Submit machine-readable values in forms (the `value` property is submitted instead of the display text)\n\nWhen set, the ComboBox finds and selects the item whose `value` matches this property\nand whose `text` matches the ComboBox's `value` (display text).\n\n**Note:** This replaces the deprecated `selected` property on `ui5-cb-item`.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "name",
               "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -1983,6 +1988,11 @@
                 "description": "Defines the value of the component.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "selected-value",
+                "description": "Defines the selected item's value.\n\nUse this property together with the `value` property on `ui5-cb-item` to:\n- Select an item programmatically by its unique identifier\n- Handle items with identical display text but different underlying values\n- Submit machine-readable values in forms (the `value` property is submitted instead of the display text)\n\nWhen set, the ComboBox finds and selects the item whose `value` matches this property\nand whose `text` matches the ComboBox's `value` (display text).\n\n**Note:** This replaces the deprecated `selected` property on `ui5-cb-item`.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "name",
                 "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -2091,6 +2101,11 @@
               "name": "additional-text",
               "description": "Defines the additional text of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [],
@@ -2105,6 +2120,11 @@
                 "name": "additional-text",
                 "description": "Defines the additional text of the component.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -5950,6 +5970,11 @@
               "name": "additional-text",
               "description": "Defines the additional text of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [],
@@ -5969,6 +5994,11 @@
                 "name": "additional-text",
                 "description": "Defines the additional text of the component.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -8024,7 +8054,12 @@
             {
               "name": "value",
               "description": "Current value of the slider",
-              "value": { "type": "number", "default": "undefined" }
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "step",
+              "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled.",
+              "value": { "type": "number", "default": "1" }
             },
             {
               "name": "min",
@@ -8041,11 +8076,6 @@
               "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
-            {
-              "name": "step",
-              "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.",
-              "value": { "type": "number", "default": "1" }
-            },
             {
               "name": "label-interval",
               "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.",
@@ -8094,6 +8124,11 @@
                 "description": "Current value of the slider",
                 "value": { "type": "number" }
               },
+              {
+                "name": "step",
+                "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled.",
+                "value": { "type": "number" }
+              },
               {
                 "name": "min",
                 "description": "Defines the minimum value of the slider.",
@@ -8109,11 +8144,6 @@
                 "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
                 "value": { "type": "string | undefined" }
               },
-              {
-                "name": "step",
-                "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.",
-                "value": { "type": "number" }
-              },
               {
                 "name": "label-interval",
                 "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.20.0-rc.1",
+  "version": "2.20.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,22 +52,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.20.0-rc.1",
-    "@ui5/webcomponents-icons": "2.20.0-rc.1",
-    "@ui5/webcomponents-icons-business-suite": "2.20.0-rc.1",
-    "@ui5/webcomponents-icons-tnt": "2.20.0-rc.1",
-    "@ui5/webcomponents-localization": "2.20.0-rc.1",
-    "@ui5/webcomponents-theming": "2.20.0-rc.1"
+    "@ui5/webcomponents-base": "2.20.0-rc.2",
+    "@ui5/webcomponents-icons": "2.20.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.20.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.20.0-rc.2",
+    "@ui5/webcomponents-localization": "2.20.0-rc.2",
+    "@ui5/webcomponents-theming": "2.20.0-rc.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.20.0-rc.1",
+    "@ui5/webcomponents-tools": "2.20.0-rc.2",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "26e4c88a89fdbd5f7545d05b04e75d7b5080ab17"
+  "gitHead": "98b851b62424d1b81b69d58768924dc4a7a17096"
 }

package/src/AvatarGroupTemplate.tsx

@@ -6,7 +6,14 @@ export default function AvatarGroupTemplate(this: AvatarGroup) {
 	return (
 		<div class="ui5-avatar-group-root">
 			<div
-				class="ui5-avatar-group-items"
+				class={{
+					"ui5-avatar-group-items": true,
+					"ui5-avatar-group-items-xs": this.firstAvatarSize === AvatarSize.XS,
+					"ui5-avatar-group-items-s": this.firstAvatarSize === AvatarSize.S,
+					"ui5-avatar-group-items-m": this.firstAvatarSize === AvatarSize.M,
+					"ui5-avatar-group-items-l": this.firstAvatarSize === AvatarSize.L,
+					"ui5-avatar-group-items-xl": this.firstAvatarSize === AvatarSize.XL,
+				}}
 				role={this._role}
 				tabindex={this._groupTabIndex}
 				aria-label={this._ariaLabelText}

package/src/SliderHandleTemplate.tsx

@@ -0,0 +1,15 @@
+import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
+import Icon from "./Icon.js";
+import type SliderHandle from "./SliderHandle.js";
+
+export default function SliderHandleTemplate(this: SliderHandle) {
+	return (
+		<div class="ui5-slider-handle-container">
+			<Icon name={directionArrows}
+				mode="Decorative"
+				part="icon"
+				slider-icon
+			></Icon>
+		</div>
+	);
+}

package/src/SliderScaleTemplate.tsx

@@ -0,0 +1,32 @@
+import type SliderScale from "./SliderScale.js";
+
+export default function SliderScaleTemplate(this: SliderScale) {
+	return (
+		<div class="ui5-slider-scale-root" part="inner">
+			{this._tickmarks.length > 0 && (
+				<div class="ui5-slider-scale-tickmarks-container">
+					{this._tickmarks.map(tick => (
+						<div
+							class={{
+								"ui5-slider-scale-tickmark": true,
+								"ui5-slider-scale-tickmark-in-range": tick.isInRange,
+							}}
+							style={{
+								insetInlineStart: `${this.orientation === "Horizontal" ? tick.position : "50"}%`,
+								bottom: `${this.orientation === "Vertical" ? tick.position : "auto"}%`
+							}}
+						>
+							{tick.label && tick.showLabel && (
+								<span class="ui5-slider-scale-tickmark-label">
+									{tick.label}
+								</span>
+							)}
+						</div>
+					))}
+				</div>
+			)}
+			<div class="ui5-slider-scale-progress" part="progress" style={this._progressStyle}></div>
+			<slot></slot>
+		</div>
+	);
+}

package/src/SliderTemplate.tsx

@@ -1,77 +1,98 @@
-import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import type Slider from "./Slider.js";
-import Icon from "./Icon.js";
-import SliderBaseTemplate from "./SliderBaseTemplate.js";
 import SliderTooltip from "./SliderTooltip.js";
+import SliderHandle from "./SliderHandle.js";
+import SliderScale from "./SliderScale.js";
 
-export default function SliderTemplate(this: Slider) {
-	return SliderBaseTemplate.call(this, {
-		progressBar,
-		handles,
-	});
-}
+const _handlePosition = (min: number, max: number, value: number) => {
+	const range = max - min;
+	const position = ((value - min) / range) * 100;
+	return position;
+};
+
+const handle = (slider: Slider) => {
+	const position = _handlePosition(slider.min, slider.max, slider.value);
 
-export function progressBar(this: Slider) {
 	return (
-		<div
-			class="ui5-slider-progress-container"
-			aria-hidden="true"
-			part="progress-container"
-		>
-			<div class="ui5-slider-progress"
-				style={this.styles.progress}
-				onFocusOut={this._onfocusout}
-				onFocusIn={this._onfocusin}
-				tabIndex={-1}
-				part="progress-bar"
-			></div>
-		</div>
+		<>
+			<SliderHandle
+				data-sap-focus-ref
+				value={slider.value}
+				min={slider.min}
+				max={slider.max}
+				tabIndex={slider.disabled ? -1 : 0}
+				disabled={slider.disabled}
+				aria-orientation="horizontal"
+				part="handle"
+				exportparts="icon: handle-icon"
+				role="slider"
+				aria-valuemin={slider.min}
+				aria-valuemax={slider.max}
+				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%)`,
+				}}
+			></SliderHandle>
+
+			{tooltip(slider)}
+		</>
 	);
-}
+};
 
-export function handles(this: Slider) {
+const tooltip = (slider: Slider) => (
+	<SliderTooltip
+		open={slider._tooltipsOpen}
+		value={slider.tooltipValue}
+		min={slider.min}
+		max={slider.max}
+		editable={slider.editableTooltip}
+		followRef={slider.shadowRoot?.querySelector("[ui5-slider-handle]") as HTMLElement}
+		valueState={slider.tooltipValueState}
+		onChange={slider._onTooltipChange}
+		onKeyDown={slider._onTooltipKeydown}
+		onFocusChange={slider._onTooltipFocusChange}
+		onOpen={slider._onTooltipOpen}
+		onInput={slider._onTooltipInput}
+	>
+	</SliderTooltip>
+);
+
+export default function SliderTemplate(this: Slider) {
 	return (
-		<div class="ui5-slider-handle-container" style={this.styles.handle} part="handle-container">
-			<div class="ui5-slider-handle"
-				onFocusOut={this._onfocusout}
-				onFocusIn={this._onfocusin}
+		<>
+			<div
+				class="ui5-slider-evo-root"
+				part="root-container"
+				onMouseDown={this._onmousedown}
+				onTouchStart={this._onmousedown}
+				onMouseOver={this._onmouseover}
+				onMouseOut={this._onmouseout}
+				onKeyDown={this._onkeydown}
 				onKeyUp={this._onkeyup}
-				role="slider"
-				tabIndex={this._tabIndex}
-				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this.value}
-				aria-label={this._ariaLabel}
-				aria-disabled={this._ariaDisabled}
-				aria-keyshortcuts={this._ariaKeyshortcuts}
-				aria-describedby={this._ariaDescribedByHandleText}
-				data-sap-focus-ref
-				part="handle"
-				id="handle1"
 			>
-				<Icon name={directionArrows}
-					mode="Decorative"
-					part="icon-slider"
-					slider-icon
-				></Icon>
-			</div>
+				<SliderScale
+					endValue={this.value}
+					min={this.min}
+					max={this.max}
+					step={this.step}
+					startValue={this.min}
+					showTickmarks={this.showTickmarks}
+					labelInterval={this.labelInterval}
+					onFocusOut={this._onfocusout}
+					onFocusIn={this._onfocusin}
+					part="scale"
+					exportparts="inner: scale-inner, progress: progress"
+				>
+					{handle(this)}
 
-			<SliderTooltip
-				open={this._tooltipsOpen}
-				value={this.tooltipValue}
-				min={this.min}
-				max={this.max}
-				editable={this.editableTooltip}
-				followRef={this.shadowRoot?.querySelector("#handle1") as HTMLElement}
-				valueState={this.tooltipValueState}
-				onChange={this._onTooltipChange}
-				onKeyDown={this._onTooltipKeydown}
-				onFocusChange={this._onTooltipFocusChange}
-				onOpen={this._onTooltipOpen}
-				onInput={this._onTooltipInput}
-			>
-			</SliderTooltip>
-		</div>
+					{this.editableTooltip && <>
+						<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
+					</>}
+				</SliderScale>
+			</div>
+		</>
 	);
 }

package/src/themes/AvatarGroup.css

@@ -31,6 +31,30 @@
 	cursor: pointer;
 }
 
+/* In Group mode: apply hover/active states to ALL avatars when container is hovered/active */
+:host([type="Group"]) .ui5-avatar-group-items:not(:active):hover ::slotted([ui5-avatar]:not([disabled])) {
+	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
+}
+
+:host([type="Group"]) .ui5-avatar-group-items:active ::slotted([ui5-avatar]) {
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
+	color: var(--sapButton_Active_TextColor);
+}
+
+/* Overflow button hover/active states in Group mode */
+:host([type="Group"]) .ui5-avatar-group-items:not(:active):hover .ui5-avatar-group-overflow-btn {
+	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
+	background-color: var(--sapButton_Lite_Hover_Background);
+}
+
+:host([type="Group"]) .ui5-avatar-group-items:active .ui5-avatar-group-overflow-btn {
+	background-color: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
+	color: var(--sapButton_Active_TextColor);
+}
+
+/* Prevent individual avatars and buttons from intercepting clicks/focus in Group mode */
 :host([type="Group"]) ::slotted([ui5-button]),
 :host([type="Group"]) ::slotted([ui5-avatar]),
 :host([type="Group"]) .ui5-avatar-group-overflow-btn {

package/src/themes/ColorPicker.css

@@ -49,8 +49,7 @@
 }
 
 .ui5-color-picker-sliders-wrapper {
-    width: calc(100% - 0.9375rem);
-    margin-left: -0.9375rem;
+    width: 100%;
     padding-bottom: 0.25rem;
 }
 
@@ -65,6 +64,8 @@
     height: var(--_ui5_color_picker_slider_handle_height);
     background: transparent;
     box-sizing: border-box;
+    margin-inline-start: -.25rem;
+
 }
 
 [ui5-slider]::part(handle-container) {
@@ -73,30 +74,33 @@
     z-index: 2;
 }
 
-[ui5-slider]::part(handle)::after {
-    content: "";
-    border: 0.125rem solid var(--_ui5_color_picker_slider_handle_inner_border_color);
-    display: block;
-    height: var(--_ui5_color_picker_slider_handle_after_height);
-    border-radius: 1rem;
-    width: 100%;
-    box-sizing: border-box;
-}
-
 [ui5-slider]::part(root-container) {
 	padding: var(--_ui5_color_picker_slider_spacing) 0;
 }
 
-[ui5-slider]::part(progress-container) {
-    width: calc(100% + 0.6875rem);
+[ui5-slider]::part(scale) {
     height: var(--_ui5_color_picker_slider_progress_container_height);
-    position: absolute;
     margin-top: var(--_ui5_color_picker_slider_container_margin_top);
     border-radius: 0;
     border: 0.0625rem solid var(--sapField_BorderColor);
+    box-sizing: content-box;
 }
 
-[ui5-slider].ui5-color-picker-hue-slider::part(progress-container) {
+[ui5-slider]::part(scale-inner) {
+    background: transparent;
+    width: calc(100% - .5625rem);
+}
+
+[ui5-slider]::part(scale-inner)::before,
+[ui5-slider]::part(scale-inner)::after {
+    display: none;
+}
+
+[ui5-slider]::part(progress) {
+    background: transparent;
+}
+
+[ui5-slider].ui5-color-picker-hue-slider::part(scale) {
     background-size: 100%;
     background-image: -webkit-linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: -moz-linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
@@ -104,7 +108,7 @@
     background-color: none;
 }
 
-[ui5-slider].ui5-color-picker-alpha-slider::part(progress-container) {
+[ui5-slider].ui5-color-picker-alpha-slider::part(scale) {
     background-image: -webkit-linear-gradient(left, rgba(65, 120, 13, 0), var(--ui5_Color_Picker_Progress_Container_Color)), url('data:image/png;base64,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');
 }
 
@@ -191,12 +195,8 @@
     margin-top: var(--_ui5_color_channel_toggle_button_margin-top);
 }
 
-.ui5-color-picker-hue-slider::part(progress-container)::before,
-.ui5-color-picker-alpha-slider::part(progress-container)::before,
-.ui5-color-picker-hue-slider::part(progress-container)::after,
-.ui5-color-picker-alpha-slider::part(progress-container)::after,
-[ui5-slider].ui5-color-picker-hue-slider::part(icon-slider),
-[ui5-slider].ui5-color-picker-alpha-slider::part(icon-slider) {
+[ui5-slider].ui5-color-picker-hue-slider::part(handle-icon),
+[ui5-slider].ui5-color-picker-alpha-slider::part(handle-icon) {
      display: none;
 }
 
@@ -242,7 +242,3 @@
     background-image: -moz-linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
 }
-
-:dir(rtl) .ui5-color-picker-sliders-wrapper {
-	margin-left: 0.625rem;
-}

package/src/themes/FormItemSpan.css

@@ -8,7 +8,7 @@
 
 :host {
 	--ui5-form-item-label-justify-internal: start;
-	--ui5-form-item-label-padding: 0.625rem 0.25rem 0 0.25rem;
+	--ui5-form-item-label-padding-internal: 0.625rem 0.25rem 0 0.25rem;
 }
 
 @container (max-width: 600px) {

package/src/themes/ProgressIndicator.css

@@ -44,6 +44,7 @@
 	box-sizing: border-box;
 	border: var(--_ui5_progress_indicator_bar_border_max);
 	border-radius: var(--_ui5_progress_indicator_bar_border_radius);
+	z-index: 1;
 }
 
 .ui5-progress-indicator-min-value .ui5-progress-indicator-bar,

package/src/themes/Slider.css

@@ -0,0 +1,32 @@
+@import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
+
+:host {
+	display: inline-block;
+	height: var(--_slider_height, 2.75rem);
+	width: 100%;
+}
+
+:host([label-interval]:not([label-interval="0"])) {
+	height: 3.75rem;
+	align-items: flex-start;
+}
+
+.ui5-slider-evo-root {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	padding: var(--_slider_root_side_padding);
+	box-sizing: border-box;
+}
+
+:host([disabled]) {
+	opacity: var(--_ui5_slider_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
+}
+
+[ui5-slider-handle] {
+	z-index: 5;
+}

package/src/themes/SliderHandle.css

@@ -0,0 +1,61 @@
+:host {
+	background: var(--_ui5_slider_handle_background);
+	border: var(--_ui5_slider_handle_border);
+	border-radius: var(--_ui5_slider_handle_border_radius);
+	position: absolute;
+	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;
+	top: 0;
+	cursor: pointer;
+	margin-inline-start: calc(var(--_ui5_slider_handle_width) / -2 );
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+:host(:focus) {
+	outline: var(--ui5_slider_handle_outline);
+	outline-offset: var(--ui5_slider_handle_outline_offset);
+}
+
+:host(:hover) {
+	background: var(--_ui5_slider_handle_hover_background);
+	border: var(--_ui5_slider_handle_hover_border);
+}
+
+.ui5-slider-handle-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	outline: none;
+}
+
+[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);
+}
+
+:host(:focus),
+:host([active]),
+:host(:active) {
+	[slider-icon] {
+		display: none;
+	}
+
+	background-color: var(--_ui5_slider_handle_background_focus);
+	border: var(--_ui5_slider_handle_focus_border);
+}
+
+:host([orientation="Vertical"]) {
+	/* rotate */
+	transform: rotate(90deg);
+}