@ui5/webcomponents 2.19.2 → 2.20.0-rc.1

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.19.2",
+  "version": "2.20.0-rc.1",
   "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### **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, use the `ui5-avatar-badge` component.",
+          "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 `mode` is set to `Interactive` or the deprecated `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, use the `ui5-avatar-badge` component.",
           "doc-url": "",
           "attributes": [
             {
@@ -18,9 +18,17 @@
             },
             {
               "name": "interactive",
-              "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.",
+              "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** When set to `true`, this property takes precedence over the `mode` property,\nand the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "mode",
+              "description": "Defines the mode of the component.\n\n**Note:**\n- `Image` (default) - renders with role=\"img\"\n- `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n- `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\n**Note:** This property is ignored when the `interactive` property is set to `true`.\nIn that case, the avatar will always be rendered as interactive.",
+              "value": {
+                "type": "\"Image\" | \"Decorative\" | \"Interactive\"",
+                "default": "\"Image\""
+              }
+            },
             {
               "name": "icon",
               "description": "Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar icon=\"employee\">`\n\n**Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -99,9 +107,16 @@
               },
               {
                 "name": "interactive",
-                "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.",
+                "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** When set to `true`, this property takes precedence over the `mode` property,\nand the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "mode",
+                "description": "Defines the mode of the component.\n\n**Note:**\n- `Image` (default) - renders with role=\"img\"\n- `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n- `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\n**Note:** This property is ignored when the `interactive` property is set to `true`.\nIn that case, the avatar will always be rendered as interactive.",
+                "value": {
+                  "type": "\"Image\" | \"Decorative\" | \"Interactive\""
+                }
+              },
               {
                 "name": "icon",
                 "description": "Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar icon=\"employee\">`\n\n**Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -1554,7 +1569,18 @@
           "name": "ui5-color-palette",
           "description": "### Overview\nThe `ui5-color-palette` provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.\n\n### Usage\n\nThe `ui5-color-palette` is meant for users that need to select a color from a predefined set.\nTo define the colors, use the `ui5-color-palette-item` component inside the default slot of the `ui5-color-palette`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ColorPalette.js\";`\n---\n\n\n### **Events:**\n - **item-click** - Fired when the user selects a color.\n\n### **Slots:**\n - **default** - Defines the `ui5-color-palette-item` elements.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
           "slots": [
             {
               "name": "default",
@@ -1568,7 +1594,18 @@
             }
           ],
           "js": {
-            "properties": [],
+            "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Receives id(or many ids) of the elements that label the component.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
             "events": [
               {
                 "name": "item-click",
@@ -1635,6 +1672,16 @@
               "description": "Defines the default color of the component.\n\n**Note:** The default color should be a part of the ColorPalette colors`",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "open",
               "description": "Defines the open | closed state of the popover.",
@@ -1695,6 +1742,16 @@
                 "description": "Defines the default color of the component.\n\n**Note:** The default color should be a part of the ColorPalette colors`",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Receives id(or many ids) of the elements that label the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "open",
                 "description": "Defines the open | closed state of the popover.",
@@ -1747,6 +1804,16 @@
               "name": "simplified",
               "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [
@@ -1771,6 +1838,16 @@
                 "name": "simplified",
                 "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Receives id(or many ids) of the elements that label the component.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -2035,7 +2112,7 @@
         },
         {
           "name": "ui5-cb-item-group",
-          "description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - Fired when a movable list 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- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group",
+          "description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - Fired when a movable list 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- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group\n- **title** - Used to style the title of the group header",
           "doc-url": "",
           "attributes": [
             {
@@ -2109,7 +2186,7 @@
         },
         {
           "name": "ui5-date-picker",
-          "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"yyyy-MM-dd\",\na valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### 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/DatePicker.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n- **open** - Fired after the component's picker is opened.\n- **close** - Fired after the component's picker is closed.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - @deprecated Use isValidValue or isValidDisplayValue instead - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidDisplayValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n### **CSS Parts:**\n - **input** - Used to style the input element. This part is forwarded to the underlying ui5-input element.",
+          "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the valueFormat is \"yyyy-MM-dd\", the displayFormat is \"MMM d, y\", and the used locale is English, a valid value string is \"2015-07-30\", which leads to an output of \"Jul 30, 2015\".\nIf no placeholder is set to the DatePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### 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/DatePicker.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n- **open** - Fired after the component's picker is opened.\n- **close** - Fired after the component's picker is closed.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - @deprecated Use isValidValue or isValidDisplayValue instead - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidDisplayValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n### **CSS Parts:**\n - **input** - Used to style the input element. This part is forwarded to the underlying ui5-input element.",
           "doc-url": "",
           "attributes": [
             {
@@ -4835,7 +4912,7 @@
         },
         {
           "name": "ui5-li-group",
-          "description": "### Overview\nThe `ui5-li-group` is a special list item, used only to create groups of list items.\n\nThis is the item to use inside a `ui5-list`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";`\n---\n\n\n### **Events:**\n - **move-over** - Fired when a movable list 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- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-li-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group",
+          "description": "### Overview\nThe `ui5-li-group` is a special list item, used only to create groups of list items.\n\nThis is the item to use inside a `ui5-list`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";`\n---\n\n\n### **Events:**\n - **move-over** - Fired when a movable list 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- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-li-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group\n- **title** - Used to style the title of the group header",
           "doc-url": "",
           "attributes": [
             {
@@ -5899,7 +5976,7 @@
         },
         {
           "name": "ui5-mcb-item-group",
-          "description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - Fired when a movable list 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- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group",
+          "description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - Fired when a movable list 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- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group\n- **title** - Used to style the title of the group header",
           "doc-url": "",
           "attributes": [
             {
@@ -7190,6 +7267,22 @@
               "name": "tooltip",
               "description": "Defines the tooltip of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "icon-selected",
+              "description": "Defines the icon to be displayed for the selected (filled) rating symbol.",
+              "value": {
+                "type": "string | undefined",
+                "default": "\"favorite\""
+              }
+            },
+            {
+              "name": "icon-unselected",
+              "description": "Defines the icon to be displayed for the unselected (empty) rating symbol.",
+              "value": {
+                "type": "string | undefined",
+                "default": "\"unfavorite\""
+              }
             }
           ],
           "events": [
@@ -7244,6 +7337,16 @@
                 "name": "tooltip",
                 "description": "Defines the tooltip of the component.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "icon-selected",
+                "description": "Defines the icon to be displayed for the selected (filled) rating symbol.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "icon-unselected",
+                "description": "Defines the icon to be displayed for the unselected (empty) rating symbol.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -8441,7 +8544,7 @@
         },
         {
           "name": "ui5-suggestion-item-group",
-          "description": "The `ui5-suggestion-item-group` is type of suggestion item,\nthat can be used to split the `ui5-input` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - Fired when a movable list 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- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-suggestion-item-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group",
+          "description": "The `ui5-suggestion-item-group` is type of suggestion item,\nthat can be used to split the `ui5-input` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - Fired when a movable list 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- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-suggestion-item-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group\n- **title** - Used to style the title of the group header",
           "doc-url": "",
           "attributes": [
             {
@@ -10751,7 +10854,7 @@
         },
         {
           "name": "ui5-toolbar-button",
-          "description": "### Overview\nThe `ui5-toolbar-button` represents an abstract action,\nused in the `ui5-toolbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ToolbarButton.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.",
+          "description": "### Overview\nThe `ui5-toolbar-button` represents an abstract action,\nused in the `ui5-toolbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ToolbarButton.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\n- **close-overflow** - Fired when the overflow popover is closed.\n\n### **Slots:**\n - **default** - Wrapped component slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -10829,10 +10932,17 @@
               "value": { "type": "boolean", "default": "false" }
             }
           ],
+          "slots": [
+            { "name": "default", "description": "Wrapped component slot." }
+          ],
           "events": [
             {
               "name": "click",
               "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+            },
+            {
+              "name": "close-overflow",
+              "description": "Fired when the overflow popover is closed."
             }
           ],
           "js": {
@@ -10911,13 +11021,68 @@
               {
                 "name": "click",
                 "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+              },
+              {
+                "name": "close-overflow",
+                "description": "Fired when the overflow popover is closed."
+              }
+            ]
+          }
+        },
+        {
+          "name": "ui5-toolbar-item",
+          "description": "Represents an abstract class for items, used in the `ui5-toolbar`.\n---\n\n\n### **Events:**\n - **close-overflow** - Fired when the overflow popover is closed.\n\n### **Slots:**\n - **default** - Wrapped component slot.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "overflow-priority",
+              "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.",
+              "value": {
+                "type": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"",
+                "default": "\"Default\""
+              }
+            },
+            {
+              "name": "prevent-overflow-closing",
+              "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "Wrapped component slot." }
+          ],
+          "events": [
+            {
+              "name": "close-overflow",
+              "description": "Fired when the overflow popover is closed."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "overflow-priority",
+                "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.",
+                "value": {
+                  "type": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\""
+                }
+              },
+              {
+                "name": "prevent-overflow-closing",
+                "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "close-overflow",
+                "description": "Fired when the overflow popover is closed."
               }
             ]
           }
         },
         {
           "name": "ui5-toolbar-select",
-          "description": "### Overview\nThe `ui5-toolbar-select` component is used to create a toolbar drop-down list.\nThe items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ToolbarSelect.js\";`\n\n`import \"@ui5/webcomponents/dist/ToolbarSelectOption.js\";` (comes with `ui5-toolbar-select`)\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option changes.\n- **open** - Fired after the component's dropdown menu opens.\n- **close** - Fired after the component's dropdown menu closes.\n\n### **Slots:**\n - **default** - Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-toolbar-select-option` component to define the desired options.\n- **label** - Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.",
+          "description": "### Overview\nThe `ui5-toolbar-select` component is used to create a toolbar drop-down list.\nThe items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ToolbarSelect.js\";`\n\n`import \"@ui5/webcomponents/dist/ToolbarSelectOption.js\";` (comes with `ui5-toolbar-select`)\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option changes.\n- **open** - Fired after the component's dropdown menu opens.\n- **close** - Fired after the component's dropdown menu closes.\n- **close-overflow** - Fired when the overflow popover is closed.\n\n### **Slots:**\n - **default** - Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-toolbar-select-option` component to define the desired options.\n- **label** - Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.",
           "doc-url": "",
           "attributes": [
             {
@@ -10989,6 +11154,10 @@
             {
               "name": "close",
               "description": "Fired after the component's dropdown menu closes."
+            },
+            {
+              "name": "close-overflow",
+              "description": "Fired when the overflow popover is closed."
             }
           ],
           "js": {
@@ -11050,6 +11219,10 @@
               {
                 "name": "close",
                 "description": "Fired after the component's dropdown menu closes."
+              },
+              {
+                "name": "close-overflow",
+                "description": "Fired when the overflow popover is closed."
               }
             ]
           }
@@ -11085,7 +11258,7 @@
         },
         {
           "name": "ui5-toolbar-separator",
-          "description": "### Overview\nThe `ui5-toolbar-separator` is an element, used for visual separation between two elements.\nIt takes no space in calculating toolbar items width.\n---\n",
+          "description": "### Overview\nThe `ui5-toolbar-separator` is an element, used for visual separation between two elements.\nIt takes no space in calculating toolbar items width.\n---\n\n\n### **Events:**\n - **close-overflow** - Fired when the overflow popover is closed.\n\n### **Slots:**\n - **default** - Wrapped component slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -11102,7 +11275,15 @@
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [],
+          "slots": [
+            { "name": "default", "description": "Wrapped component slot." }
+          ],
+          "events": [
+            {
+              "name": "close-overflow",
+              "description": "Fired when the overflow popover is closed."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -11118,12 +11299,17 @@
                 "value": { "type": "boolean" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "close-overflow",
+                "description": "Fired when the overflow popover is closed."
+              }
+            ]
           }
         },
         {
           "name": "ui5-toolbar-spacer",
-          "description": "### Overview\nThe `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.\nIt takes no space in calculating toolbar items width.\n---\n",
+          "description": "### Overview\nThe `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.\nIt takes no space in calculating toolbar items width.\n---\n\n\n### **Events:**\n - **close-overflow** - Fired when the overflow popover is closed.\n\n### **Slots:**\n - **default** - Wrapped component slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -11145,7 +11331,15 @@
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [],
+          "slots": [
+            { "name": "default", "description": "Wrapped component slot." }
+          ],
+          "events": [
+            {
+              "name": "close-overflow",
+              "description": "Fired when the overflow popover is closed."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -11166,7 +11360,12 @@
                 "value": { "type": "boolean" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "close-overflow",
+                "description": "Fired when the overflow popover is closed."
+              }
+            ]
           }
         },
         {
@@ -11892,6 +12091,10 @@
           "name": "part(header)",
           "description": "Used to style the header item of the group"
         },
+        {
+          "name": "part(title)",
+          "description": "Used to style the title of the group header"
+        },
         {
           "name": "part(input)",
           "description": "Used to style the input element. This part is forwarded to the underlying ui5-input element."
@@ -12000,6 +12203,10 @@
           "name": "part(header)",
           "description": "Used to style the header item of the group"
         },
+        {
+          "name": "part(title)",
+          "description": "Used to style the title of the group header"
+        },
         {
           "name": "part(title)",
           "description": "Used to style the title of the list item"
@@ -12048,6 +12255,10 @@
           "name": "part(header)",
           "description": "Used to style the header item of the group"
         },
+        {
+          "name": "part(title)",
+          "description": "Used to style the title of the group header"
+        },
         {
           "name": "part(root)",
           "description": "Used to style the root DOM element of the Input component"
@@ -12152,6 +12363,10 @@
           "name": "part(header)",
           "description": "Used to style the header item of the group"
         },
+        {
+          "name": "part(title)",
+          "description": "Used to style the title of the group header"
+        },
         {
           "name": "part(slider)",
           "description": "Used to style the track, where the handle is being slid"

package/package.json

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

package/src/AvatarTemplate.tsx

@@ -8,6 +8,7 @@ export default function AvatarTemplate(this: Avatar) {
 			tabindex={this.tabindex}
 			data-sap-focus-ref
 			role={this._role}
+			aria-hidden={this.effectiveAriaHidden}
 			aria-haspopup={this._ariaHasPopup}
 			aria-label={this.accessibleNameText}
 			onKeyUp={this._onkeyup}

package/src/ColorPalettePopoverTemplate.tsx

@@ -14,6 +14,7 @@ export default function ColorPalettePopoverTemplate(this: ColorPalettePopover) {
 			open={this._open}
 			onClose={this.onAfterClose}
 			onOpen={this.onAfterOpen}
+			accessibleName={this._colorPaletteTitle}
 		>
 			<div slot="header" class="ui5-cp-header">
 				<Title level="H1" wrappingType="None">
@@ -27,6 +28,8 @@ export default function ColorPalettePopoverTemplate(this: ColorPalettePopover) {
 					showRecentColors={this.showRecentColors}
 					showDefaultColor={this.showDefaultColor}
 					defaultColor={this.defaultColor}
+					accessibleName={this.accessibleName}
+					accessibleNameRef={this.accessibleNameRef}
 					popupMode={true}
 					onItemClick={this.onSelectedColor}
 				>

package/src/ColorPaletteTemplate.tsx

@@ -32,7 +32,7 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
 					</div>
 				}
 				<div class="ui5-cp-item-container"
-					role="region"
+					role="group"
 					aria-label={this.colorContainerLabel}
 					onKeyDown={this._onColorContainerKeyDown}
 				>

package/src/ColorPickerTemplate.tsx

@@ -6,7 +6,7 @@ import Button from "./Button.js";
 
 export default function ColorPickerTemplate(this: ColorPicker) {
 	return (
-		<section
+		<div
 			class="ui5-color-picker-root"
 			role="group"
 			aria-label={this.colorPickerLabel}
@@ -132,6 +132,6 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					</div>
 				</div>
 			}
-		</section>
+		</div>
 	);
 }