@ui5/webcomponents 2.11.0 → 2.12.0-rc.1

package/dist/vscode.html-custom-data.json

@@ -91,6 +91,16 @@
           "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
           "values": [{ "name": "AvatarGroupAccessibilityAttributes" }]
         },
+        {
+          "name": "accessible-name",
+          "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.",
+          "values": []
+        },
+        {
+          "name": "accessible-name-ref",
+          "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.",
+          "values": []
+        },
         {
           "name": "hidden-items",
           "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.",
@@ -305,7 +315,7 @@
     },
     {
       "name": "ui5-calendar",
-      "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the year cells in between of selected years in range.\n- **year-range-cell** - Used to style the year range cells.\n- **year-range-cell-selected** - Used to style the year range cells when selected.\n- **year-range-cell-selected-between** - Used to style the year range cells in between of selected year ranges.",
+      "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **month-picker-root** - Used to style the month picker root container.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the year cells in between of selected years in range.\n- **year-picker-root** - Used to style the year picker root container.\n- **year-range-cell** - Used to style the year range cells.\n- **year-range-cell-selected** - Used to style the year range cells when selected.\n- **year-range-cell-selected-between** - Used to style the year range cells in between of selected year ranges.\n- **calendar-header-middle-button** - Used to style the calendar header middle buttons (month/year/year-range buttons).",
       "attributes": [
         {
           "name": "selection-mode",
@@ -1421,6 +1431,16 @@
             { "name": "AlertDialog" }
           ]
         },
+        {
+          "name": "accessible-description",
+          "description": "Defines the accessible description of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-description-ref",
+          "description": "Receives id(or many ids) of the elements that describe the component.",
+          "values": []
+        },
         {
           "name": "prevent-initial-focus",
           "description": "Indicates whether initial focus should be prevented.",
@@ -1436,7 +1456,7 @@
     },
     {
       "name": "ui5-dynamic-date-range",
-      "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.",
+      "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.\n\n### **Methods:**\n - **toDates(value: _DynamicDateRangeValue_): _Array<Date>_** - Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.",
       "attributes": [
         {
           "name": "value",
@@ -2835,6 +2855,16 @@
             { "name": "AlertDialog" }
           ]
         },
+        {
+          "name": "accessible-description",
+          "description": "Defines the accessible description of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-description-ref",
+          "description": "Receives id(or many ids) of the elements that describe the component.",
+          "values": []
+        },
         {
           "name": "prevent-initial-focus",
           "description": "Indicates whether initial focus should be prevented.",
@@ -2881,6 +2911,16 @@
             { "name": "AlertDialog" }
           ]
         },
+        {
+          "name": "accessible-description",
+          "description": "Defines the accessible description of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-description-ref",
+          "description": "Receives id(or many ids) of the elements that describe the component.",
+          "values": []
+        },
         {
           "name": "prevent-initial-focus",
           "description": "Indicates whether initial focus should be prevented.",
@@ -3207,6 +3247,16 @@
             { "name": "AlertDialog" }
           ]
         },
+        {
+          "name": "accessible-description",
+          "description": "Defines the accessible description of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-description-ref",
+          "description": "Receives id(or many ids) of the elements that describe the component.",
+          "values": []
+        },
         {
           "name": "prevent-initial-focus",
           "description": "Indicates whether initial focus should be prevented.",

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.11.0",
+  "version": "2.12.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -174,6 +174,16 @@
                 "default": "{}"
               }
             },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "hidden-items",
               "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.",
@@ -217,6 +227,16 @@
                 "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
                 "value": { "type": "AvatarGroupAccessibilityAttributes" }
               },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "hidden-items",
                 "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.",
@@ -677,7 +697,7 @@
         },
         {
           "name": "ui5-calendar",
-          "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the year cells in between of selected years in range.\n- **year-range-cell** - Used to style the year range cells.\n- **year-range-cell-selected** - Used to style the year range cells when selected.\n- **year-range-cell-selected-between** - Used to style the year range cells in between of selected year ranges.",
+          "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **month-picker-root** - Used to style the month picker root container.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the year cells in between of selected years in range.\n- **year-picker-root** - Used to style the year picker root container.\n- **year-range-cell** - Used to style the year range cells.\n- **year-range-cell-selected** - Used to style the year range cells when selected.\n- **year-range-cell-selected-between** - Used to style the year range cells in between of selected year ranges.\n- **calendar-header-middle-button** - Used to style the calendar header middle buttons (month/year/year-range buttons).",
           "doc-url": "",
           "attributes": [
             {
@@ -2831,6 +2851,16 @@
                 "default": "\"Dialog\""
               }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-description-ref",
+              "description": "Receives id(or many ids) of the elements that describe the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "prevent-initial-focus",
               "description": "Indicates whether initial focus should be prevented.",
@@ -2928,6 +2958,16 @@
                 "description": "Allows setting a custom role.",
                 "value": { "type": "\"None\" | \"Dialog\" | \"AlertDialog\"" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-description-ref",
+                "description": "Receives id(or many ids) of the elements that describe the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "prevent-initial-focus",
                 "description": "Indicates whether initial focus should be prevented.",
@@ -2961,7 +3001,7 @@
         },
         {
           "name": "ui5-dynamic-date-range",
-          "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.",
+          "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.\n\n### **Methods:**\n - **toDates(value: _DynamicDateRangeValue_): _Array<Date>_** - Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.",
           "doc-url": "",
           "attributes": [
             {
@@ -6019,6 +6059,16 @@
                 "default": "\"Dialog\""
               }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-description-ref",
+              "description": "Receives id(or many ids) of the elements that describe the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "prevent-initial-focus",
               "description": "Indicates whether initial focus should be prevented.",
@@ -6135,6 +6185,16 @@
                 "description": "Allows setting a custom role.",
                 "value": { "type": "\"None\" | \"Dialog\" | \"AlertDialog\"" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-description-ref",
+                "description": "Receives id(or many ids) of the elements that describe the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "prevent-initial-focus",
                 "description": "Indicates whether initial focus should be prevented.",
@@ -6721,6 +6781,16 @@
                 "default": "\"Dialog\""
               }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-description-ref",
+              "description": "Receives id(or many ids) of the elements that describe the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "prevent-initial-focus",
               "description": "Indicates whether initial focus should be prevented.",
@@ -6837,6 +6907,16 @@
                 "description": "Allows setting a custom role.",
                 "value": { "type": "\"None\" | \"Dialog\" | \"AlertDialog\"" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-description-ref",
+                "description": "Receives id(or many ids) of the elements that describe the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "prevent-initial-focus",
                 "description": "Indicates whether initial focus should be prevented.",
@@ -10913,6 +10993,10 @@
           "name": "part(month-cell-selected-between)",
           "description": "Used to style the day cells in between of selected months in range."
         },
+        {
+          "name": "part(month-picker-root)",
+          "description": "Used to style the month picker root container."
+        },
         {
           "name": "part(year-cell)",
           "description": "Used to style the year cells."
@@ -10925,6 +11009,10 @@
           "name": "part(year-cell-selected-between)",
           "description": "Used to style the year cells in between of selected years in range."
         },
+        {
+          "name": "part(year-picker-root)",
+          "description": "Used to style the year picker root container."
+        },
         {
           "name": "part(year-range-cell)",
           "description": "Used to style the year range cells."
@@ -10937,6 +11025,10 @@
           "name": "part(year-range-cell-selected-between)",
           "description": "Used to style the year range cells in between of selected year ranges."
         },
+        {
+          "name": "part(calendar-header-middle-button)",
+          "description": "Used to style the calendar header middle buttons (month/year/year-range buttons)."
+        },
         {
           "name": "part(root)",
           "description": "Used to style the root DOM element of the card component"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.11.0",
+  "version": "2.12.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.11.0",
-    "@ui5/webcomponents-icons": "2.11.0",
-    "@ui5/webcomponents-icons-business-suite": "2.11.0",
-    "@ui5/webcomponents-icons-tnt": "2.11.0",
-    "@ui5/webcomponents-localization": "2.11.0",
-    "@ui5/webcomponents-theming": "2.11.0"
+    "@ui5/webcomponents-base": "2.12.0-rc.1",
+    "@ui5/webcomponents-icons": "2.12.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.12.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.12.0-rc.1",
+    "@ui5/webcomponents-localization": "2.12.0-rc.1",
+    "@ui5/webcomponents-theming": "2.12.0-rc.1"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.11.0",
-    "chromedriver": "^135.0.0",
+    "@ui5/webcomponents-tools": "2.12.0-rc.1",
+    "chromedriver": "^136.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "a768710e9fa722b88e495e9aea1964764af5b985"
+  "gitHead": "3bcf15cdf500ddc903d2373c4e4870c98ea318fb"
 }

package/src/AvatarTemplate.tsx

@@ -14,21 +14,27 @@ export default function AvatarTemplate(this: Avatar) {
 			onKeyDown={this._onkeydown}
 			onClick={this._onclick}
 		>
-			{this.hasImage ?
+			{this._hasImage ?
 				<slot></slot>
-				:
-				<>
-					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon} accessibleName={this.accessibleName}></Icon> }
+				: <>
+					{this.icon && <Icon class="ui5-avatar-icon" name={this.icon} accessibleName={this.accessibleName}></Icon>}
 
-					{ this.initials &&
-					<>
-						<span class="ui5-avatar-initials ui5-avatar-initials-hidden">{this.validInitials}</span>
+					{this.initials ? (
+						<>
+							{/* Show initials + hidden fallback icon */}
+							<span class="ui5-avatar-initials ui5-avatar-initials-hidden">{this.validInitials}</span>
+							<Icon
+								name={this.fallbackIcon}
+								class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden"
+							></Icon>
+						</>
+					) : (
+						// Show fallback icon only
 						<Icon
 							name={this.fallbackIcon}
-							class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden"
+							class="ui5-avatar-icon ui5-avatar-icon-fallback"
 						></Icon>
-					</>
-					}
+					)}
 				</>
 			}
 

package/src/BusyIndicatorTemplate.tsx

@@ -6,7 +6,10 @@ export default function BusyIndicatorTemplate(this: BusyIndicator) {
 		<div class="ui5-busy-indicator-root">
 			{this._isBusy && (
 				<div
-					class="ui5-busy-indicator-busy-area"
+					class={{
+						"ui5-busy-indicator-busy-area": true,
+						"ui5-busy-indicator-busy-area-over-content": this.hasContent,
+					}}
 					title={this.ariaTitle}
 					tabindex={0}
 					role="progressbar"

package/src/CalendarHeaderTemplate.tsx

@@ -24,6 +24,7 @@ export default function CalendarTemplate(this: Calendar) {
 				<div
 					data-ui5-cal-header-btn-month
 					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					part="calendar-header-middle-button"
 					hidden={this._isHeaderMonthButtonHidden}
 					tabindex={0}
 					role="button"
@@ -41,6 +42,7 @@ export default function CalendarTemplate(this: Calendar) {
 				<div
 					data-ui5-cal-header-btn-year
 					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					part="calendar-header-middle-button"
 					hidden={this._isHeaderYearButtonHidden}
 					tabindex={0}
 					role="button"
@@ -56,6 +58,7 @@ export default function CalendarTemplate(this: Calendar) {
 				<div
 					data-ui5-cal-header-btn-year-range
 					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					part="calendar-header-middle-button"
 					hidden={this._isHeaderYearRangeButtonHidden}
 					tabindex={0}
 					role="button"

package/src/CalendarTemplate.tsx

@@ -48,7 +48,7 @@ export default function CalendarTemplate(this: Calendar) {
 						timestamp={this._timestamp}
 						onChange={this.onSelectedMonthChange}
 						onNavigate={this.onNavigate}
-						exportparts="month-cell, month-cell-selected, month-cell-selected-between"
+						exportparts="month-cell, month-cell-selected, month-cell-selected-between, month-picker-root"
 					/>
 
 					<YearPicker
@@ -66,7 +66,7 @@ export default function CalendarTemplate(this: Calendar) {
 						_currentYearRange = {this._currentYearRange}
 						onChange={this.onSelectedYearChange}
 						onNavigate={this.onNavigate}
-						exportparts="year-cell, year-cell-selected, year-cell-selected-between"
+						exportparts="year-cell, year-cell-selected, year-cell-selected-between, year-picker-root"
 					/>
 
 					<YearRangePicker

package/src/InputTemplate.tsx

@@ -29,7 +29,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						style={this.styles.innerInput}
 						type={this.inputNativeType}
 						inner-input
-						inner-input-with-icon={this.icon.length}
+						inner-input-with-icon={!!this.icon.length}
 						disabled={this.disabled}
 						readonly={this._readonly}
 						value={this._innerValue}

package/src/MonthPickerTemplate.tsx

@@ -4,6 +4,7 @@ export default function MonthPickerTemplate(this: MonthPicker) {
 	return (
 		<div
 			class="ui5-mp-root"
+			part="month-picker-root"
 			role="grid"
 			aria-roledescription={this.roleDescription}
 			aria-readonly="false"

package/src/PopupTemplate.tsx

@@ -13,6 +13,7 @@ export default function PopupTemplate(this: Popup, hooks?: {
 			style={this.styles.root}
 			class={this.classes.root}
 			role={this._role}
+			aria-describedby={this.ariaDescribedByIds}
 			aria-modal={this._ariaModal}
 			aria-label={this._ariaLabel}
 			aria-labelledby={this._ariaLabelledBy}
@@ -30,6 +31,10 @@ export default function PopupTemplate(this: Popup, hooks?: {
 				<slot></slot>
 			</div>
 
+			{this.ariaDescriptionText &&
+						<span id="accessibleDescription" class="ui5-hidden-text">{this.ariaDescriptionText}</span>
+			}
+
 			{(hooks?.afterContent || afterContent).call(this)}
 
 			<span class="last-fe" data-ui5-focus-trap role="none" tabIndex={0} onFocusIn={this.forwardToFirst}></span>

package/src/RangeSliderTemplate.tsx

@@ -1,8 +1,8 @@
 import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import type RangeSlider from "./RangeSlider.js";
 import Icon from "./Icon.js";
-import Input from "./Input.js";
 import SliderBaseTemplate from "./SliderBaseTemplate.js";
+import SliderTooltip from "./SliderTooltip.js";
 
 export default function RangeSliderTemplate(this: RangeSlider) {
 	return SliderBaseTemplate.call(this, {
@@ -68,25 +68,18 @@ export function handles(this: RangeSlider) {
 				></Icon>
 			</div>
 
-			{this.showTooltip &&
-				<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style={this.styles.tooltip}>
-					{this.editableTooltip ?
-						<Input
-							type="Number"
-							value={this.startValue.toString()}
-							accessibleNameRef="ui5-slider-InputLabel"
-							onFocusOut={this._onInputFocusOut}
-							onKeyDown={this._onInputKeydown}
-							onChange={this._onInputChange}
-							onInput={this._onInputInput}
-							data-sap-ui-start-value
-							tabIndex={-1}
-						></Input>
-						:
-						<span class="ui5-slider-tooltip-value">{this.tooltipStartValue}</span>
-					}
-				</div>
-			}
+			<SliderTooltip
+				open={this._tooltipsOpen}
+				value={this.startValue.toString()}
+				min={this.min}
+				max={this.max}
+				data-sap-ui-start-value
+				editable={this.editableTooltip}
+				followRef={this._startHandle}
+				onChange={this._onTooltipChange}
+				onForwardFocus={this._onTooltopForwardFocus}
+			>
+			</SliderTooltip>
 		</div>
 		<div class="ui5-slider-handle-container" style={this.styles.endHandle} part="handle-container">
 			<div class="ui5-slider-handle ui5-slider-handle--end"
@@ -110,25 +103,18 @@ export function handles(this: RangeSlider) {
 				></Icon>
 			</div>
 
-			{this.showTooltip &&
-				<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style={this.styles.tooltip}>
-					{this.editableTooltip ?
-						<Input
-							type="Number"
-							value={this.endValue.toString()}
-							accessibleNameRef="ui5-slider-InputLabel"
-							onFocusOut={this._onInputFocusOut}
-							onKeyDown={this._onInputKeydown}
-							onChange={this._onInputChange}
-							onInput={this._onInputInput}
-							data-sap-ui-end-value
-							tabIndex={-1}
-						></Input>
-						:
-						<span class="ui5-slider-tooltip-value">{this.tooltipEndValue}</span>
-					}
-				</div>
-			}
+			<SliderTooltip
+				open={this._tooltipsOpen}
+				value={this.endValue.toString()}
+				min={this.min}
+				max={this.max}
+				data-sap-ui-end-value
+				editable={this.editableTooltip}
+				followRef={this._endHandle}
+				onChange={this._onTooltipChange}
+				onForwardFocus={this._onTooltopForwardFocus}
+			>
+			</SliderTooltip>
 		</div>
 	</>);
 }

package/src/ResponsivePopoverTemplate.tsx

@@ -15,6 +15,8 @@ export default function ResponsivePopoverTemplate(this: ResponsivePopover) {
 			root-element
 			accessibleName={this.accessibleName}
 			accessibleNameRef={this.accessibleNameRef}
+			accessibleDescription={this.accessibleDescription}
+			accessibleDescriptionRef={this.accessibleDescriptionRef}
 			accessibleRole={this.accessibleRole}
 			stretch={true}
 			preventInitialFocus={this.preventInitialFocus}