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

package/dist/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.11.0-rc.2",
+  "version": "2.11.0-rc.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "ui5-avatar",
-          "description": "### Overview\n\nAn image-like component that has different display options for representing images and icons\nin different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to\nset a custom size.\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n- [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Avatar.js\";`\n---\n\n\n### **Slots:**\n - **default** - Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n&nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>\n`}`\n- **badge** - Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, you can use the `ui5-tag` with `ui5-icon`\nin the corresponding `icon` slot, without text nodes.",
+          "description": "### Overview\n\nAn image-like component that has different display options for representing images and icons\nin different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to\nset a custom size.\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n- [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Avatar.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired on mouseup, space and enter if avatar is interactive\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\n\n### **Slots:**\n - **default** - Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n&nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>\n`}`\n- **badge** - Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, you can use the `ui5-tag` with `ui5-icon`\nin the corresponding `icon` slot, without text nodes.",
           "doc-url": "",
           "attributes": [
             {
@@ -84,7 +84,12 @@
               "description": "Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, you can use the `ui5-tag` with `ui5-icon`\nin the corresponding `icon` slot, without text nodes."
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fired on mouseup, space and enter if avatar is interactive\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -140,7 +145,12 @@
                 "value": { "type": "AvatarAccessibilityAttributes" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired on mouseup, space and enter if avatar is interactive\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+              }
+            ]
           }
         },
         {
@@ -667,7 +677,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 day cells in between of selected years in range.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
@@ -2949,6 +2959,52 @@
             ]
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "Defines the value object.",
+              "value": {
+                "type": "DynamicDateRangeValue | undefined",
+                "default": "undefined"
+              }
+            },
+            {
+              "name": "options",
+              "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"",
+              "value": { "type": "string", "default": "\"\"" }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Defines the value object.",
+                "value": { "type": "DynamicDateRangeValue | undefined" }
+              },
+              {
+                "name": "options",
+                "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "description": "Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-expandable-text",
           "description": "### Overview\n\nThe `ui5-expandable-text` component allows displaying a large body of text in a small space. It provides an \"expand/collapse\" functionality, which shows/hides potentially truncated text.\n\n### Usage\n\n#### When to use:\n- To accommodate long texts in limited space, for example in list items, table cell texts, or forms\n\n#### When not to use:\n- The content is critical for the user. In this case use short descriptions that can fit in\n- Strive to provide short and meaningful texts to avoid excessive number of \"Show More\" links on the page\n\n### Responsive Behavior\n\nOn phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ExpandableText\";`\n---\n",
@@ -3341,7 +3397,7 @@
         },
         {
           "name": "ui5-icon",
-          "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n---\n\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
+          "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired on mouseup, `SPACE` and `ENTER`.\n- on mouse click, the icon fires native `click` event\n- on `SPACE` and `ENTER`, the icon fires custom `click` event\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
           "doc-url": "",
           "attributes": [
             {
@@ -3376,7 +3432,12 @@
               }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fired on mouseup, `SPACE` and `ENTER`.\n- on mouse click, the icon fires native `click` event\n- on `SPACE` and `ENTER`, the icon fires custom `click` event"
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -3409,7 +3470,12 @@
                 }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired on mouseup, `SPACE` and `ENTER`.\n- on mouse click, the icon fires native `click` event\n- on `SPACE` and `ENTER`, the icon fires custom `click` event"
+              }
+            ]
           }
         },
         {
@@ -7846,6 +7912,11 @@
               "name": "selected",
               "description": "Specifies if the component is selected.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "movable",
+              "description": "Defines if the tab is movable.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -7892,6 +7963,11 @@
                 "name": "selected",
                 "description": "Specifies if the component is selected.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "movable",
+                "description": "Defines if the tab is movable.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": []
@@ -8055,7 +8131,7 @@
         },
         {
           "name": "ui5-table",
-          "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelection](../TableSelection) - adds selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n\n### Keyboard Handling\n\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\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";`\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)\n---\n\n\n### **Events:**\n - **row-click** - Fired when an interactive row is clicked.\n- **move-over** - Fired when a movable item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n**Note:** If the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.\n- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Notes:**\n\nThe `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\nIf the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.\n- **row-action-click** - Fired when a row action is clicked.\n\n### **Slots:**\n - **default** - Defines the rows of the component.\n\n**Note:** Use `ui5-table-row` for the intended design.\n- **headerRow** - Defines the header row of the component.\n\n**Note:** Use `ui5-table-header-row` for the intended design.\n- **noData** - Defines the custom visualization if there is no data available.\n- **features** - Defines the features of the component.",
+          "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelection](../TableSelection) - adds selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n\n### Keyboard Handling\n\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\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";`\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)\n---\n\n\n### **Events:**\n - **row-click** - Fired when an interactive row is clicked.\n\n**Note:** This event is not fired if the `behavior` property of the selection component is set to `RowOnly`.\nIn that case, use the `change` event of the selection component instead.\n- **move-over** - Fired when a movable item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n**Note:** If the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.\n- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Notes:**\n\nThe `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\nIf the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.\n- **row-action-click** - Fired when a row action is clicked.\n\n### **Slots:**\n - **default** - Defines the rows of the component.\n\n**Note:** Use `ui5-table-row` for the intended design.\n- **headerRow** - Defines the header row of the component.\n\n**Note:** Use `ui5-table-header-row` for the intended design.\n- **noData** - Defines the custom visualization if there is no data available.\n- **features** - Defines the features of the component.",
           "doc-url": "",
           "attributes": [
             {
@@ -8118,7 +8194,7 @@
           "events": [
             {
               "name": "row-click",
-              "description": "Fired when an interactive row is clicked."
+              "description": "Fired when an interactive row is clicked.\n\n**Note:** This event is not fired if the `behavior` property of the selection component is set to `RowOnly`.\nIn that case, use the `change` event of the selection component instead."
             },
             {
               "name": "move-over",
@@ -8174,7 +8250,7 @@
             "events": [
               {
                 "name": "row-click",
-                "description": "Fired when an interactive row is clicked."
+                "description": "Fired when an interactive row is clicked.\n\n**Note:** This event is not fired if the `behavior` property of the selection component is set to `RowOnly`.\nIn that case, use the `change` event of the selection component instead."
               },
               {
                 "name": "move-over",
@@ -8656,6 +8732,14 @@
               "name": "selected",
               "description": "Defines the `row-key` values of selected rows, with each value separated by a space.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "behavior",
+              "description": "Defines the selection behavior.",
+              "value": {
+                "type": "\"RowSelector\" | \"RowOnly\"",
+                "default": "\"RowSelector\""
+              }
             }
           ],
           "events": [
@@ -8670,6 +8754,11 @@
                 "name": "selected",
                 "description": "Defines the `row-key` values of selected rows, with each value separated by a space.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "behavior",
+                "description": "Defines the selection behavior.",
+                "value": { "type": "\"RowSelector\" | \"RowOnly\"" }
               }
             ],
             "events": [
@@ -8689,6 +8778,14 @@
               "name": "selected",
               "description": "Defines the `row-key` value of the selected row.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "behavior",
+              "description": "Defines the selection behavior.",
+              "value": {
+                "type": "\"RowSelector\" | \"RowOnly\"",
+                "default": "\"RowSelector\""
+              }
             }
           ],
           "events": [
@@ -8703,6 +8800,11 @@
                 "name": "selected",
                 "description": "Defines the `row-key` value of the selected row.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "behavior",
+                "description": "Defines the selection behavior.",
+                "value": { "type": "\"RowSelector\" | \"RowOnly\"" }
               }
             ],
             "events": [
@@ -10178,7 +10280,7 @@
         },
         {
           "name": "ui5-tree",
-          "description": "### Overview\nThe `ui5-tree` component provides a tree structure for displaying data in a hierarchy.\n\n### Usage\n\n#### When to use:\n\n- To display hierarchically structured items.\n- To select one or more items out of a set of hierarchically structured items.\n\n#### When not to use:\n\n- To display items not hierarchically structured. In this case, use the List component.\n- To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.\n- The hierarchy turns out to have only two levels. In this case, use List with group items.\n\n### Keyboard Handling\n\nThe `ui5-tree` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- [Up] or [Down] - Navigates up and down the tree items that are currently visible.\n- [Right] - Drills down the tree by expanding the tree nodes.\n- [Left] - Goes up the tree and collapses the tree nodes.\n\nThe user can use the following keyboard shortcuts to perform selection,\nwhen the `selectionMode` property is in use:\n\n- [Space] - Selects the currently focused item upon keyup.\n- [Enter]  - Selects the currently focused item upon keydown.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Tree.js\";`\n\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`\n---\n\n\n### **Events:**\n - **item-toggle** - Fired when a tree item is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event object to suppress the event, if needed.\nThis may be handy for example if you want to dynamically load tree items upon the user expanding a node.\nEven if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item.\n- **item-mouseover** - Fired when the mouse cursor enters the tree item borders.\n- **item-mouseout** - Fired when the mouse cursor leaves the tree item borders.\n- **item-click** - Fired when a tree item is activated.\n- **item-delete** - Fired when the Delete button of any tree item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes.\n\n### **Methods:**\n - **walk(callback: _WalkCallback_): _void_** - Perform Depth-First-Search walk on the tree and run a callback on each node\n\n### **Slots:**\n - **default** - Defines the items of the component. Tree items may have other tree items as children.\n\n**Note:** Use `ui5-tree-item` for the intended design.\n- **header** - Defines the component header.\n\n**Note:** When the `header` slot is set, the\n`headerText` property is ignored.",
+          "description": "### Overview\nThe `ui5-tree` component provides a tree structure for displaying data in a hierarchy.\n\n### Usage\n\n#### When to use:\n\n- To display hierarchically structured items.\n- To select one or more items out of a set of hierarchically structured items.\n\n#### When not to use:\n\n- To display items not hierarchically structured. In this case, use the List component.\n- To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.\n- The hierarchy turns out to have only two levels. In this case, use List with group items.\n\n### Keyboard Handling\n\nThe `ui5-tree` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- [Up] or [Down] - Navigates up and down the tree items that are currently visible.\n- [Right] - Drills down the tree by expanding the tree nodes.\n- [Left] - Goes up the tree and collapses the tree nodes.\n\nThe user can use the following keyboard shortcuts to perform selection,\nwhen the `selectionMode` property is in use:\n\n- [Space] - Selects the currently focused item upon keyup.\n- [Enter]  - Selects the currently focused item upon keydown.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Tree.js\";`\n\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`\n---\n\n\n### **Events:**\n - **item-toggle** - Fired when a tree item is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event object to suppress the event, if needed.\nThis may be handy for example if you want to dynamically load tree items upon the user expanding a node.\nEven if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item.\n- **item-mouseover** - Fired when the mouse cursor enters the tree item borders.\n- **item-mouseout** - Fired when the mouse cursor leaves the tree item borders.\n- **item-click** - Fired when a tree item is activated.\n- **item-delete** - Fired when the Delete button of any tree item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes.\n- **move** - Fired when a movable tree item is moved over a potential drop target during a drag-and-drop operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n- **move-over** - Fired when a movable tree item is dropped onto a drop target.\n\n**Note:** The `move` event is fired only if there was a preceding `move-over` event with prevented default action.\n\n### **Methods:**\n - **walk(callback: _WalkCallback_): _void_** - Perform Depth-First-Search walk on the tree and run a callback on each node\n\n### **Slots:**\n - **default** - Defines the items of the component. Tree items may have other tree items as children.\n\n**Note:** Use `ui5-tree-item` for the intended design.\n- **header** - Defines the component header.\n\n**Note:** When the `header` slot is set, the\n`headerText` property is ignored.",
           "doc-url": "",
           "attributes": [
             {
@@ -10259,6 +10361,14 @@
             {
               "name": "selection-change",
               "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes."
+            },
+            {
+              "name": "move",
+              "description": "Fired when a movable tree item is moved over a potential drop target during a drag-and-drop operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`."
+            },
+            {
+              "name": "move-over",
+              "description": "Fired when a movable tree item is dropped onto a drop target.\n\n**Note:** The `move` event is fired only if there was a preceding `move-over` event with prevented default action."
             }
           ],
           "js": {
@@ -10330,6 +10440,14 @@
               {
                 "name": "selection-change",
                 "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes."
+              },
+              {
+                "name": "move",
+                "description": "Fired when a movable tree item is moved over a potential drop target during a drag-and-drop operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`."
+              },
+              {
+                "name": "move-over",
+                "description": "Fired when a movable tree item is dropped onto a drop target.\n\n**Note:** The `move` event is fired only if there was a preceding `move-over` event with prevented default action."
               }
             ]
           }
@@ -10805,7 +10923,19 @@
         },
         {
           "name": "part(year-cell-selected-between)",
-          "description": "Used to style the day cells in between of selected years in range."
+          "description": "Used to style the year cells in between of selected years in range."
+        },
+        {
+          "name": "part(year-range-cell)",
+          "description": "Used to style the year range cells."
+        },
+        {
+          "name": "part(year-range-cell-selected)",
+          "description": "Used to style the year range cells when selected."
+        },
+        {
+          "name": "part(year-range-cell-selected-between)",
+          "description": "Used to style the year range cells in between of selected year ranges."
         },
         {
           "name": "part(root)",

package/package.json

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

package/src/CalendarHeaderTemplate.tsx

@@ -53,12 +53,15 @@ export default function CalendarTemplate(this: Calendar) {
 						<span class="ui5-calheader-btn-sectext">{this._headerYearButtonTextSecType}</span>
 					}
 				</div>
-
 				<div
 					data-ui5-cal-header-btn-year-range
-					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn ui5-calheader-yearrange-btn-disabled"
+					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 					hidden={this._isHeaderYearRangeButtonHidden}
-					tabindex={-1}
+					tabindex={0}
+					role="button"
+					onClick={this.onHeaderShowYearRangePress}
+					onKeyDown={this.onYearRangeButtonKeyDown}
+					onKeyUp={this.onYearRangeButtonKeyUp}
 				>
 					<span>{this._headerYearRangeButtonText}</span>
 					{this.hasSecondaryCalendarType &&

package/src/CalendarTemplate.tsx

@@ -2,7 +2,9 @@ import type Calendar from "./Calendar.js";
 import DayPicker from "./DayPicker.js";
 import MonthPicker from "./MonthPicker.js";
 import YearPicker from "./YearPicker.js";
+import YearRangePicker from "./YearRangePicker.js";
 import CalendarHeaderTemplate from "./CalendarHeaderTemplate.js";
+import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 
 export default function CalendarTemplate(this: Calendar) {
 	return (
@@ -61,10 +63,29 @@ export default function CalendarTemplate(this: Calendar) {
 						minDate={this.minDate}
 						maxDate={this.maxDate}
 						timestamp={this._timestamp}
+						_currentYearRange = {this._currentYearRange}
 						onChange={this.onSelectedYearChange}
 						onNavigate={this.onNavigate}
 						exportparts="year-cell, year-cell-selected, year-cell-selected-between"
 					/>
+
+					<YearRangePicker
+						id={`${this._id}-YRP`}
+						hidden={this._isYearRangePickerHidden}
+						formatPattern={this._formatPattern}
+						selectedDates={this._selectedDatesTimestamps}
+						_showRangeSelection={this.selectionMode === CalendarSelectionMode.Range}
+						_hidden={this._isYearRangePickerHidden}
+						primaryCalendarType={this._primaryCalendarType}
+						secondaryCalendarType={this._secondaryCalendarType}
+						minDate={this.minDate}
+						maxDate={this.maxDate}
+						timestamp={this._timestamp}
+						_currentYearRange = {this._currentYearRange}
+						onChange={this.onSelectedYearRangeChange}
+						onNavigate={this.onNavigate}
+						exportparts="year-range-cell, year-range-cell-selected, year-range-cell-selected-between"
+					/>
 				</div>
 
 				<div class="ui5-calheader">

package/src/CheckBoxTemplate.tsx

@@ -62,6 +62,7 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				part="label"
 				class="ui5-checkbox-label"
 				wrappingType={this.wrappingType}
+				required={this.required}
 			>
 				{this.text}
 			</Label>

package/src/ComboBoxPopoverTemplate.tsx

@@ -104,7 +104,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				<Button
 					design="Transparent"
 					onClick={this._closeRespPopover}
-				>OK</Button>
+				>{this._dialogOkButtonText}</Button>
 			</div>
 				}
 			</ResponsivePopover>

package/src/DynamicDateRangeInputTemplate.tsx

@@ -0,0 +1,38 @@
+import type DynamicDateRange from "./DynamicDateRange.js";
+import Icon from "./Icon.js";
+import Input from "./Input.js";
+import appointment from "@ui5/webcomponents-icons/dist/appointment-2.js";
+
+export default function DynamicDateRangeInputTemplate(this: DynamicDateRange) {
+	return (
+		<div
+			class="ui5-dynamic-date-range-root"
+			style={{
+				width: "100%",
+			}}
+		>
+			<Input
+				data-sap-focus-ref
+				id={`${this._id}-inner`}
+				class="ui5-dynamic-date-range-input"
+				value={this.value && this.getOption(this.value?.operator)?.format(this.value)}
+				onChange={this.onInputChange}
+				onKeyDown={this.onInputKeyDown}
+			>
+				<Icon
+					id={`${this._id}-value-help`}
+					slot="icon"
+					name={appointment}
+					tabindex={-1}
+					mode={this._iconMode}
+					onClick={this._togglePicker}
+					class={{
+						"inputIcon": true,
+						"inputIcon--pressed": this.open,
+					}}
+				/>
+
+			</Input>
+		</div>
+	);
+}

package/src/DynamicDateRangePopoverTemplate.tsx

@@ -0,0 +1,75 @@
+import type DynamicDateRange from "./DynamicDateRange.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import Button from "./Button.js";
+import Title from "./Title.js";
+import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import ListItemType from "./types/ListItemType.js";
+
+export default function DynamicDateRangePopoverTemplate(this: DynamicDateRange) {
+	return (
+		<ResponsivePopover
+			id={`${this._id}-responsive-popover`}
+			opener={this}
+			open={this.open}
+			allowTargetOverlap
+			placement="Bottom"
+			horizontalAlign="Start"
+			hideArrow={true}
+			_hideHeader={true}
+			onClose={this.onPopoverClose}
+			onOpen={this.onPopoverOpen}
+			onKeyDown={this.onKeyDownPopover}
+		>
+			{this._hasCurrentOptionTemplate &&
+				<div slot="header" class="ui5-ddr-header">
+					<Button
+						iconOnly={true}
+						icon={slimArrowLeft}
+						design="Transparent"
+						onClick={this.onButtonBackClick}
+						tooltip={this.tooltipNavigationIcon}>
+					</Button>
+					<Title>{this._currentOption?.text}</Title>
+				</div>
+			}
+			{!this._hasCurrentOptionTemplate ? <div class="ui5-dynamic-date-range-options">
+				<List
+					class="ui5-dynamic-date-range-options-list"
+					separators="None"
+					selectionMode="Single"
+					onItemClick={this._selectOption}
+				>
+					{this.optionsObjects.map(option => {
+						return <ListItemStandard
+							selected={option.operator === this.value?.operator}
+							iconEnd={true}
+							icon={option.icon}
+							type={!option.template ? ListItemType.Active : ListItemType.Navigation}>
+							{option.text}
+						</ListItemStandard>;
+					})}
+				</List>
+			</div>
+				:
+				<div class="ui5-dynamic-date-range-option-container">
+					{this._currentOption?.template?.call(this)}
+					<div class="ui5-ddr-current-value">{this.currentValueText}</div>
+				</div>
+			}
+			{this._hasCurrentOptionTemplate &&
+				<div slot="footer">
+					<Button
+						design="Emphasized"
+						onClick={this._submitValue}
+					>Submit</Button>
+					<Button
+						design="Transparent"
+						onClick={this._close}
+					>Close</Button>
+				</div>
+			}
+		</ResponsivePopover>
+	);
+}

package/src/DynamicDateRangeTemplate.tsx

@@ -0,0 +1,11 @@
+import DynamicDateRangeInputTemplate from "./DynamicDateRangeInputTemplate.js";
+import DynamicDateRangePopoverTemplate from "./DynamicDateRangePopoverTemplate.js";
+
+import type DynamicDateRange from "./DynamicDateRange.js";
+
+export default function DynamicDateRangeTemplate(this: DynamicDateRange) {
+	return [
+		DynamicDateRangeInputTemplate.call(this),
+		DynamicDateRangePopoverTemplate.call(this),
+	];
+}

package/src/TokenizerPopoverTemplate.tsx

@@ -51,11 +51,11 @@ export default function TokenizerPopoverTemplate(this: Tokenizer) {
 					design="Emphasized"
 					data-ui5-tokenizer-dialog-ok-button
 					onClick={this.handleDialogButtonPress}
-				>OK</Button>
+				>{this._okButtonText}</Button>
 				<Button
 					design="Transparent"
 					onClick={this.handleDialogButtonPress}
-				>Cancel</Button>
+				>{this._cancelButtonText}</Button>
 			</div>
 			}
 		</ResponsivePopover>