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

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.22.0-rc.2",
+  "version": "2.22.0-rc.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -173,11 +173,6 @@
           "description": "### Overview\n\nThe `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.\nThe badge can display an icon and supports different states for visual affordance.\n\n### Usage\n\nThe badge should be used as a child element of `ui5-avatar` in the `badge` slot.\n\n```html\n<ui5-avatar>\n  <ui5-avatar-badge icon=\"edit\" slot=\"badge\"></ui5-avatar-badge>\n</ui5-avatar>\n```\n\n### Keyboard Handling\n\nThe badge does not receive keyboard focus.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/AvatarBadge.js\";`\n---\n",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "accessible-name",
-              "description": "Defines the custom text alternative of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
             {
               "name": "icon",
               "description": "Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`",
@@ -190,16 +185,16 @@
                 "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"",
                 "default": "\"None\""
               }
+            },
+            {
+              "name": "tooltip",
+              "description": "Defines the tooltip text of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "accessible-name",
-                "description": "Defines the custom text alternative of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "icon",
                 "description": "Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`",
@@ -211,6 +206,11 @@
                 "value": {
                   "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
                 }
+              },
+              {
+                "name": "tooltip",
+                "description": "Defines the tooltip text of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -1646,7 +1646,7 @@
         },
         {
           "name": "ui5-color-palette-item",
-          "description": "### Overview\n\nThe `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.\n---\n",
+          "description": "### Overview\n\nThe `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.",
           "doc-url": "",
           "attributes": [
             {
@@ -1665,7 +1665,12 @@
               "value": { "type": "string", "default": "\"\"" }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -1684,7 +1689,12 @@
                 "value": { "type": "string" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`."
+              }
+            ]
           }
         },
         {
@@ -2567,7 +2577,7 @@
         },
         {
           "name": "ui5-daterange-picker",
-          "description": "### Overview\nThe DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n### Usage\nThe user can enter a date by:\nUsing the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).\nFor the `ui5-daterange-picker`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateRangePicker.js\";`\n\n### Keyboard Handling\nThe `ui5-daterange-picker` provides advanced keyboard handling.\n\nWhen the `ui5-daterange-picker` input field is focused the user can\nincrement or decrement respectively the range start or end date, depending on where the cursor is.\nThe following shortcuts are available:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired after the component's picker is closed.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **open** - Fired after the component's picker is opened.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **isValid(value: _string_): _boolean_** - @deprecated Use isValidValue or isValidDisplayValue instead - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidDisplayValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n### **CSS Parts:**\n - **input** - Used to style the input element. This part is forwarded to the underlying ui5-input element.",
+          "description": "### Overview\nThe DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n### Usage\nThe user can enter a date by:\nUsing the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).\nFor the `ui5-daterange-picker`:\n\n**Note:** Relative date values such as \"today\", \"yesterday\", or \"tomorrow\" are not supported.\nEntering a relative date sets the component to an error state.\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateRangePicker.js\";`\n\n### Keyboard Handling\nThe `ui5-daterange-picker` provides advanced keyboard handling.\n\nWhen the `ui5-daterange-picker` input field is focused the user can\nincrement or decrement respectively the range start or end date, depending on where the cursor is.\nThe following shortcuts are available:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired after the component's picker is closed.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **open** - Fired after the component's picker is opened.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **isValid(value: _string_): _boolean_** - @deprecated Use isValidValue or isValidDisplayValue instead - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidDisplayValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n### **CSS Parts:**\n - **input** - Used to style the input element. This part is forwarded to the underlying ui5-input element.",
           "doc-url": "",
           "attributes": [
             {
@@ -8417,7 +8427,7 @@
         },
         {
           "name": "ui5-segmented-button-item",
-          "description": "### Overview\n\nUsers can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.\n\nClicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.\nThe item returns to its initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any\n`ui5-segmented-button-item`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButtonItem.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.",
+          "description": "### Overview\n\nUsers can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.\n\nClicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.\nThe item returns to its initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any\n`ui5-segmented-button-item`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButtonItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.",
           "doc-url": "",
           "attributes": [
             {
@@ -8467,7 +8477,12 @@
               "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -8511,7 +8526,12 @@
                 "value": { "type": "string | undefined" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`."
+              }
+            ]
           }
         },
         {
@@ -8858,54 +8878,9 @@
           "name": "ui5-slider-handle",
           "description": "The <code>ui5-slider-handle</code> component represents the handle of the <code>ui5-slider</code> component.\n---\n",
           "doc-url": "",
-          "attributes": [
-            {
-              "name": "active",
-              "description": "Defines whether the slider handle is active.\n<br><br>\n<b>Note:</b> An active slider handle is currently being interacted with.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "max",
-              "description": "Defines the maximum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.",
-              "value": { "type": "number", "default": "100" }
-            },
-            {
-              "name": "min",
-              "description": "Defines the minimum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be less than the <code>max</code> property of the parent <code>ui5-slider</code>.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "value",
-              "description": "Defines the value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be between the <code>min</code> and <code>max</code> properties of the parent <code>ui5-slider</code>.",
-              "value": { "type": "number", "default": "0" }
-            }
-          ],
+          "attributes": [],
           "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "active",
-                "description": "Defines whether the slider handle is active.\n<br><br>\n<b>Note:</b> An active slider handle is currently being interacted with.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "max",
-                "description": "Defines the maximum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.",
-                "value": { "type": "number" }
-              },
-              {
-                "name": "min",
-                "description": "Defines the minimum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be less than the <code>max</code> property of the parent <code>ui5-slider</code>.",
-                "value": { "type": "number" }
-              },
-              {
-                "name": "value",
-                "description": "Defines the value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be between the <code>min</code> and <code>max</code> properties of the parent <code>ui5-slider</code>.",
-                "value": { "type": "number" }
-              }
-            ],
-            "events": []
-          }
+          "js": { "properties": [], "events": [] }
         },
         {
           "name": "ui5-slider-tooltip",
@@ -10149,7 +10124,7 @@
             },
             {
               "name": "merged",
-              "description": "Defines whether the cell is visually merged with the cell directly above it.\n\nThis is useful when consecutive cells in a column have the same value and should visually appear as a single merged cell.\nAlthough the cell is visually merged with the previous one, its content must still be provided for accessibility purposes.\n**Note:** This feature is disabled when cells are rendered as popin, and should remain `false` for interactive cell content.",
+              "description": "Defines whether the cell is visually merged with the cell directly above it.\n\nThis is useful if consecutive cells in a column have the same value and should visually appear as a single merged cell.\nAlthough the cell is visually merged with the previous one, its content must still be provided for accessibility purposes.\n**Note:** This feature is disabled when cells are rendered as a popin, and should remain `false` for interactive cell content.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -10171,7 +10146,7 @@
               },
               {
                 "name": "merged",
-                "description": "Defines whether the cell is visually merged with the cell directly above it.\n\nThis is useful when consecutive cells in a column have the same value and should visually appear as a single merged cell.\nAlthough the cell is visually merged with the previous one, its content must still be provided for accessibility purposes.\n**Note:** This feature is disabled when cells are rendered as popin, and should remain `false` for interactive cell content.",
+                "description": "Defines whether the cell is visually merged with the cell directly above it.\n\nThis is useful if consecutive cells in a column have the same value and should visually appear as a single merged cell.\nAlthough the cell is visually merged with the previous one, its content must still be provided for accessibility purposes.\n**Note:** This feature is disabled when cells are rendered as a popin, and should remain `false` for interactive cell content.",
                 "value": { "type": "boolean" }
               }
             ],
@@ -12115,6 +12090,11 @@
                 "type": "\"Transparent\" | \"Solid\"",
                 "default": "\"Solid\""
               }
+            },
+            {
+              "name": "overflow-button-accessible-name",
+              "description": "Defines the accessible ARIA name of the overflow button of the component.\n\n**Note:** When not set, the built-in translation for \"Additional Options\" is used.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -12145,6 +12125,11 @@
                 "name": "design",
                 "description": "Defines the toolbar design.",
                 "value": { "type": "\"Transparent\" | \"Solid\"" }
+              },
+              {
+                "name": "overflow-button-accessible-name",
+                "description": "Defines the accessible ARIA name of the overflow button of the component.\n\n**Note:** When not set, the built-in translation for \"Additional Options\" is used.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []

package/package.json

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

package/src/AvatarBadgeTemplate.tsx

@@ -8,8 +8,7 @@ export default function AvatarBadgeTemplate(this: AvatarBadge) {
 				<Icon
 					name={this.icon}
 					class="ui5-avatar-badge-icon"
-					accessibleName={this.effectiveAccessibleName}
-					showTooltip={true}
+					title={this.effectiveTooltip}
 					mode="Image"
 				></Icon>
 			)}

package/src/CalendarHeaderTemplate.tsx

@@ -56,6 +56,8 @@ function renderPrevButton(this: Calendar, isFirst: boolean, isMultiple: boolean)
 			part="calendar-header-arrow-button"
 			role="button"
 			onMouseDown={this.onPrevButtonClick}
+			onKeyDown={this.onPrevButtonKeyDown}
+			onKeyUp={this.onPrevButtonKeyUp}
 			tabindex={this._previousButtonDisabled ? -1 : 0}
 			title={this.accInfo.tooltipPrevButton}
 			aria-label={this.accInfo.ariaLabelPrevButton}
@@ -162,6 +164,8 @@ function renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isM
 				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onNextButtonClick}
+				onKeyDown={this.onNextButtonKeyDown}
+				onKeyUp={this.onNextButtonKeyUp}
 				tabindex={this._nextButtonDisabled ? -1 : 0}
 				title={this.accInfo.tooltipNextButton}
 				aria-label={this.accInfo.ariaLabelNextButton}

package/src/ColorPaletteItemTemplate.tsx

@@ -9,6 +9,7 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 			aria-label={this.getLabelText}
 			aria-pressed={this.selected}
 			title={this.getLabelText}
+			onClick={this._onClick}
 		></div>
 	);
 }

package/src/ComboBoxPopoverTemplate.tsx

@@ -2,6 +2,7 @@ import Icon from "./Icon.js";
 import Button from "./Button.js";
 import List from "./List.js";
 import Input from "./Input.js";
+import Title from "./Title.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -40,7 +41,13 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				<>
 					<div slot="header" class="ui5-responsive-popover-header">
 						<div class="row">
-							<span>{this._headerTitleText}</span>
+							<Title
+								level="H1"
+								wrappingType="None"
+								class="ui5-responsive-popover-header-text"
+							>
+								{this._headerTitleText}
+							</Title>
 						</div>
 
 						<div class="row">

package/src/MultiInputTemplate.tsx

@@ -33,6 +33,7 @@ function preContent(this: MultiInput) {
 				class="ui5-multi-input-tokenizer"
 				opener={this.morePopoverOpener}
 				popoverMinWidth={this._inputWidth}
+				popoverTitle={this._headerTitleText}
 				hidePopoverArrow={true}
 				expanded={this.tokenizerExpanded}
 				onKeyDown={this._onTokenizerKeydown}

package/src/RangeSliderTemplate.tsx

@@ -1,128 +1,161 @@
-import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import type RangeSlider from "./RangeSlider.js";
-import Icon from "./Icon.js";
-import SliderBaseTemplate from "./SliderBaseTemplate.js";
 import SliderTooltip from "./SliderTooltip.js";
+import SliderHandle, { SliderHandleType } from "./SliderHandle.js";
+import SliderScale from "./SliderScale.js";
 
-export default function RangeSliderTemplate(this: RangeSlider) {
-	return SliderBaseTemplate.call(this, {
-		handlesAriaText,
-		progressBar,
-		handles,
-	});
-}
+const _handlePosition = (min: number, max: number, value: number) => {
+	const range = max - min;
+	const position = ((value - min) / range) * 100;
+	return position;
+};
 
-export function handlesAriaText(this: RangeSlider) {
-	return (<>
-		<span id="ui5-slider-startHandleDesc" class="ui5-hidden-text">{this._ariaHandlesText.startHandleText}</span>
-		<span id="ui5-slider-endHandleDesc" class="ui5-hidden-text">{this._ariaHandlesText.endHandleText}</span>
-	</>);
-}
+const startHandle = (slider: RangeSlider) => {
+	const position = _handlePosition(slider.min, slider.max, slider.startValue);
 
-export function progressBar(this: RangeSlider) {
 	return (
-		<div
-			class="ui5-slider-progress-container"
-			part="progress-container"
-		>
-			<div class="ui5-slider-progress"
-				part="progress-bar"
-				style={this.styles.progress}
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
-				role="slider"
-				tabIndex={this._tabIndex}
+		<>
+			<SliderHandle
+				value={slider.startValue}
+				min={slider.min}
+				max={slider.max}
+				tabIndex={slider._tabIndex}
+				active={slider.rangePressed}
+				handleType={SliderHandleType.Start}
 				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this._ariaValueNow}
-				aria-valuetext={`From ${this.startValue} to ${this.endValue}`}
-				aria-label={this._ariaLabel}
-				aria-disabled={this._ariaDisabled}
-			></div>
-		</div>
-	);
-}
-
-export function handles(this: RangeSlider) {
-	return (<>
-		<div class="ui5-slider-handle-container" style={this.styles.startHandle} part="handle-container">
-			<div class="ui5-slider-handle ui5-slider-handle--start"
 				part="handle"
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
+				exportparts="icon: handle-icon"
 				role="slider"
-				tabindex={this._tabIndex}
-				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this.startValue}
-				aria-labelledby={this._ariaLabelledByStartHandleText}
-				aria-disabled={this._ariaDisabled}
-				aria-describedby={this._ariaDescribedByHandleText}
-				aria-keyshortcuts={this._ariaKeyshortcuts}
-			>
-				<Icon name={directionArrows}
-					mode="Decorative"
-					slider-icon
-				></Icon>
-			</div>
+				aria-valuemin={slider.min}
+				aria-valuemax={slider.max}
+				aria-valuenow={slider.startValue}
+				aria-label={slider._ariaLabelStartHandle}
+				aria-disabled={slider._ariaDisabled}
+				aria-describedby={slider._ariaDescribedByHandleText}
+				onFocusIn={slider._onfocusin}
+				onFocusOut={slider._onfocusout}
+				style={{
+					"inset-inline-start": `clamp(0%, ${position}%, 100%)`,
+				}}
+			></SliderHandle>
 
-			<SliderTooltip
-				open={this._tooltipsOpen}
-				value={this.tooltipStartValue}
-				valueState={this.tooltipStartValueState}
-				min={this.min}
-				max={this.max}
-				data-sap-ui-start-value
-				editable={this.editableTooltip}
-				followRef={this._startHandle}
-				onChange={this._onTooltipChange}
-				onKeyDown={this._onTooltipKeydown}
-				onFocusChange={this._onTooltipFocusChange}
-				onOpen={this._onTooltipOpen}
-				onInput={this._onTooltipInput}
-			>
-			</SliderTooltip>
-		</div>
-		<div class="ui5-slider-handle-container" style={this.styles.endHandle} part="handle-container">
-			<div class="ui5-slider-handle ui5-slider-handle--end"
+			{startTooltip(slider)}
+		</>
+	);
+};
+
+const endHandle = (slider: RangeSlider) => {
+	const position = _handlePosition(slider.min, slider.max, slider.endValue);
+
+	return (
+		<>
+			<SliderHandle
+				value={slider.endValue}
+				min={slider.min}
+				max={slider.max}
+				tabIndex={slider._tabIndex}
+				active={slider.rangePressed}
+				handleType={SliderHandleType.End}
+				aria-orientation="horizontal"
 				part="handle"
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
+				exportparts="icon: handle-icon"
 				role="slider"
-				tabIndex={this._tabIndex}
-				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this.endValue}
-				aria-labelledby={this._ariaLabelledByEndHandleText}
-				aria-describedby={this._ariaDescribedByHandleText}
-				aria-disabled={this._ariaDisabled}
-				aria-keyshortcuts="F2"
-			>
-				<Icon name={directionArrows}
-					mode="Decorative"
-					slider-icon
-				></Icon>
-			</div>
+				aria-valuemin={slider.min}
+				aria-valuemax={slider.max}
+				aria-valuenow={slider.endValue}
+				aria-label={slider._ariaLabelEndHandle}
+				aria-disabled={slider._ariaDisabled}
+				aria-describedby={slider._ariaDescribedByHandleText}
+				onFocusIn={slider._onfocusin}
+				onFocusOut={slider._onfocusout}
+				style={{
+					"inset-inline-start": `clamp(0%, ${position}%, 100%)`,
+				}}
+			></SliderHandle>
+
+			{endTooltip(slider)}
+		</>
+	);
+};
 
-			<SliderTooltip
-				open={this._tooltipsOpen}
-				value={this.tooltipEndValue}
-				valueState={this.tooltipEndValueState}
-				min={this.min}
-				max={this.max}
-				data-sap-ui-end-value
-				editable={this.editableTooltip}
-				followRef={this._endHandle}
-				onChange={this._onTooltipChange}
-				onKeyDown={this._onTooltipKeydown}
-				onFocusChange={this._onTooltipFocusChange}
-				onOpen={this._onTooltipOpen}
-				onInput={this._onTooltipInput}
+const startTooltip = (slider: RangeSlider) => (
+	<SliderTooltip
+		open={slider._tooltipsOpen}
+		value={slider.tooltipStartValue}
+		valueState={slider.tooltipStartValueState}
+		min={slider.min}
+		max={slider.max}
+		data-sap-ui-start-value
+		editable={slider.editableTooltip}
+		followRef={slider._startHandle}
+		onChange={slider._onTooltipChange}
+		onKeyDown={slider._onTooltipKeydown}
+		onFocusChange={slider._onTooltipFocusChange}
+		onOpen={slider._onTooltipOpen}
+		onInput={slider._onTooltipInput}
+	>
+	</SliderTooltip>
+);
+
+const endTooltip = (slider: RangeSlider) => (
+	<SliderTooltip
+		open={slider._tooltipsOpen}
+		value={slider.tooltipEndValue}
+		valueState={slider.tooltipEndValueState}
+		min={slider.min}
+		max={slider.max}
+		data-sap-ui-end-value
+		editable={slider.editableTooltip}
+		followRef={slider._endHandle}
+		onChange={slider._onTooltipChange}
+		onKeyDown={slider._onTooltipKeydown}
+		onFocusChange={slider._onTooltipFocusChange}
+		onOpen={slider._onTooltipOpen}
+		onInput={slider._onTooltipInput}
+	>
+	</SliderTooltip>
+);
+
+export default function RangeSliderTemplate(this: RangeSlider) {
+	return (
+		<>
+			<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}
 			>
-			</SliderTooltip>
-		</div>
-	</>);
+				<SliderScale
+					startValue={this.startValue}
+					endValue={this.endValue}
+					min={this.min}
+					max={this.max}
+					step={this._effectiveStep}
+					showTickmarks={this.showTickmarks}
+					labelInterval={this.labelInterval}
+					progressTabIndex={this._tabIndex}
+					progressAriaValueNow={this._ariaValueNow}
+					progressAriaValueText={`From ${this.startValue} to ${this.endValue}`}
+					progressAriaLabel={this._ariaLabel}
+					progressAriaDisabled={this._ariaDisabled}
+					progressPressed={this.rangePressed}
+					progressFocused={this._progressFocused}
+					onFocusIn={this._onfocusin}
+					onFocusOut={this._onfocusout}
+					part="scale"
+					exportparts="inner: scale-inner, progress: progress-bar"
+				>
+					{startHandle(this)}
+					{endHandle(this)}
+
+					{this.editableTooltip && <>
+						<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
+					</>}
+				</SliderScale>
+			</div>
+		</>
+	);
 }

package/src/SliderHandleTemplate.tsx

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