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

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

@@ -3,7 +3,7 @@
   "tags": [
     {
       "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\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\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.",
       "attributes": [
         {
           "name": "disabled",
@@ -12,9 +12,18 @@
         },
         {
           "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`.",
           "values": []
         },
+        {
+          "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.",
+          "values": [
+            { "name": "Image" },
+            { "name": "Decorative" },
+            { "name": "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).",
@@ -930,6 +939,11 @@
           "description": "Defines the value of the component.",
           "values": []
         },
+        {
+          "name": "selected-value",
+          "description": "Defines the selected item's value.\n\nUse this property together with the `value` property on `ui5-cb-item` to:\n- Select an item programmatically by its unique identifier\n- Handle items with identical display text but different underlying values\n- Submit machine-readable values in forms (the `value` property is submitted instead of the display text)\n\nWhen set, the ComboBox finds and selects the item whose `value` matches this property\nand whose `text` matches the ComboBox's `value` (display text).\n\n**Note:** This replaces the deprecated `selected` property on `ui5-cb-item`.",
+          "values": []
+        },
         {
           "name": "name",
           "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -1022,13 +1036,18 @@
           "name": "additional-text",
           "description": "Defines the additional text of the component.",
           "values": []
+        },
+        {
+          "name": "value",
+          "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```",
+          "values": []
         }
       ],
       "references": []
     },
     {
       "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\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\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",
       "attributes": [
         {
           "name": "header-text",
@@ -2393,7 +2412,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\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\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",
       "attributes": [
         {
           "name": "header-text",
@@ -2824,13 +2843,18 @@
           "name": "additional-text",
           "description": "Defines the additional text of the component.",
           "values": []
+        },
+        {
+          "name": "value",
+          "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```",
+          "values": []
         }
       ],
       "references": []
     },
     {
       "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\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\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",
       "attributes": [
         {
           "name": "header-text",
@@ -3791,6 +3815,11 @@
           "description": "Current value of the slider",
           "values": []
         },
+        {
+          "name": "step",
+          "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled.",
+          "values": []
+        },
         {
           "name": "min",
           "description": "Defines the minimum value of the slider.",
@@ -3806,11 +3835,6 @@
           "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
           "values": []
         },
-        {
-          "name": "step",
-          "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.",
-          "values": []
-        },
         {
           "name": "label-interval",
           "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.",
@@ -4090,7 +4114,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\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\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",
       "attributes": [
         {
           "name": "header-text",

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.20.0-rc.0",
+  "version": "2.20.0-rc.2",
   "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).",
@@ -1853,6 +1868,11 @@
               "description": "Defines the value of the component.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "selected-value",
+              "description": "Defines the selected item's value.\n\nUse this property together with the `value` property on `ui5-cb-item` to:\n- Select an item programmatically by its unique identifier\n- Handle items with identical display text but different underlying values\n- Submit machine-readable values in forms (the `value` property is submitted instead of the display text)\n\nWhen set, the ComboBox finds and selects the item whose `value` matches this property\nand whose `text` matches the ComboBox's `value` (display text).\n\n**Note:** This replaces the deprecated `selected` property on `ui5-cb-item`.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "name",
               "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -1968,6 +1988,11 @@
                 "description": "Defines the value of the component.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "selected-value",
+                "description": "Defines the selected item's value.\n\nUse this property together with the `value` property on `ui5-cb-item` to:\n- Select an item programmatically by its unique identifier\n- Handle items with identical display text but different underlying values\n- Submit machine-readable values in forms (the `value` property is submitted instead of the display text)\n\nWhen set, the ComboBox finds and selects the item whose `value` matches this property\nand whose `text` matches the ComboBox's `value` (display text).\n\n**Note:** This replaces the deprecated `selected` property on `ui5-cb-item`.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "name",
                 "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -2076,6 +2101,11 @@
               "name": "additional-text",
               "description": "Defines the additional text of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [],
@@ -2090,6 +2120,11 @@
                 "name": "additional-text",
                 "description": "Defines the additional text of the component.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -2097,7 +2132,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": [
             {
@@ -4897,7 +4932,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": [
             {
@@ -5935,6 +5970,11 @@
               "name": "additional-text",
               "description": "Defines the additional text of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [],
@@ -5954,6 +5994,11 @@
                 "name": "additional-text",
                 "description": "Defines the additional text of the component.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the `ui5-cb-item`.\n\nUse this property to associate a unique identifier or machine-readable value with the item,\nseparate from the display text. This enables:\n- Selecting items programmatically via `selectedValue` on the ComboBox\n- Submitting machine-readable values in forms\n- Distinguishing between items with identical display text\n\n**Example:**\n```html\n<ui5-combobox selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -5961,7 +6006,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": [
             {
@@ -8009,7 +8054,12 @@
             {
               "name": "value",
               "description": "Current value of the slider",
-              "value": { "type": "number", "default": "undefined" }
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "step",
+              "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled.",
+              "value": { "type": "number", "default": "1" }
             },
             {
               "name": "min",
@@ -8026,11 +8076,6 @@
               "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
-            {
-              "name": "step",
-              "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.",
-              "value": { "type": "number", "default": "1" }
-            },
             {
               "name": "label-interval",
               "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.",
@@ -8079,6 +8124,11 @@
                 "description": "Current value of the slider",
                 "value": { "type": "number" }
               },
+              {
+                "name": "step",
+                "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled.",
+                "value": { "type": "number" }
+              },
               {
                 "name": "min",
                 "description": "Defines the minimum value of the slider.",
@@ -8094,11 +8144,6 @@
                 "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
                 "value": { "type": "string | undefined" }
               },
-              {
-                "name": "step",
-                "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.",
-                "value": { "type": "number" }
-              },
               {
                 "name": "label-interval",
                 "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.",
@@ -8529,7 +8574,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": [
             {
@@ -12076,6 +12121,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."
@@ -12184,6 +12233,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"
@@ -12232,6 +12285,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"
@@ -12336,6 +12393,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.20.0-rc.0",
+  "version": "2.20.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,22 +52,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.20.0-rc.0",
-    "@ui5/webcomponents-icons": "2.20.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.20.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.20.0-rc.0",
-    "@ui5/webcomponents-localization": "2.20.0-rc.0",
-    "@ui5/webcomponents-theming": "2.20.0-rc.0"
+    "@ui5/webcomponents-base": "2.20.0-rc.2",
+    "@ui5/webcomponents-icons": "2.20.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.20.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.20.0-rc.2",
+    "@ui5/webcomponents-localization": "2.20.0-rc.2",
+    "@ui5/webcomponents-theming": "2.20.0-rc.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.20.0-rc.0",
+    "@ui5/webcomponents-tools": "2.20.0-rc.2",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "1fa124de424f2dd51e0283a942e903c01e176de2"
+  "gitHead": "98b851b62424d1b81b69d58768924dc4a7a17096"
 }

package/src/AvatarGroupTemplate.tsx

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

package/src/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/ListItemGroupTemplate.tsx

@@ -7,8 +7,14 @@ export default function ListItemGroupTemplate(this: ListItemGroup) {
 	return (
 		<>
 			{this.hasHeader &&
-				<ListItemGroupHeader wrappingType={this.wrappingType} focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.ListItem}>
-					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
+				<ListItemGroupHeader
+					wrappingType={this.wrappingType}
+					focused={this.focused}
+					part="header"
+					exportparts="title"
+					accessibleRole={ListItemAccessibleRole.ListItem}
+				>
+					{this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText}
 					<div
 						role="list"
 						slot="subItems"
@@ -26,7 +32,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup) {
 
 				<slot></slot>
 
-				<DropIndicator orientation="Horizontal" ownerReference={this}/>
+				<DropIndicator orientation="Horizontal" ownerReference={this} />
 			</div>
 		</>
 

package/src/PanelTemplate.tsx

@@ -26,6 +26,8 @@ export default function PanelTemplate(this: Panel) {
 						onClick={this._headerClick}
 						onKeyDown={this._headerKeyDown}
 						onKeyUp={this._headerKeyUp}
+						onTouchStart={this._isMobile}
+						onFocusOut={this._headerFocusOut}
 						class="ui5-panel-header"
 						tabindex={this.headerTabIndex}
 						role={this.accInfo.role}

package/src/SliderHandleTemplate.tsx

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

package/src/SliderScaleTemplate.tsx

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