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

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.22.0-rc.0",
+  "version": "2.22.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -173,6 +173,11 @@
           "description": "### Overview\n\nThe `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.\nThe badge can display an icon and supports different states for visual affordance.\n\n### Usage\n\nThe badge should be used as a child element of `ui5-avatar` in the `badge` slot.\n\n```html\n<ui5-avatar>\n  <ui5-avatar-badge icon=\"edit\" slot=\"badge\"></ui5-avatar-badge>\n</ui5-avatar>\n```\n\n### Keyboard Handling\n\nThe badge does not receive keyboard focus.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/AvatarBadge.js\";`\n---\n",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the custom text alternative of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "icon",
               "description": "Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`",
@@ -190,6 +195,11 @@
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the custom text alternative of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "icon",
                 "description": "Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`",
@@ -447,7 +457,7 @@
         },
         {
           "name": "ui5-breadcrumbs-item",
-          "description": "### Overview\n\nThe `ui5-breadcrumbs-item` component defines the content of an item in `ui5-breadcrumbs`.\n---\n\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.",
+          "description": "### Overview\n\nThe `ui5-breadcrumbs-item` component defines the content of an item in `ui5-breadcrumbs`.\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event is also fired for the current page location item (the last item), which is not a link by design.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.",
           "doc-url": "",
           "attributes": [
             {
@@ -472,7 +482,12 @@
               "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event is also fired for the current page location item (the last item), which is not a link by design."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -491,7 +506,12 @@
                 "value": { "type": "string | undefined" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event is also fired for the current page location item (the last item), which is not a link by design."
+              }
+            ]
           }
         },
         {
@@ -1634,6 +1654,11 @@
               "description": "Defines if the component is selected.\n\n**Note:** Only one item must be selected per <code>ui5-color-palette</code>.\nIf more than one item is defined as selected, the last one would be considered as the selected one.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "tooltip",
+              "description": "Defines the tooltip of the component. When not set, the color value is used as the tooltip.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "value",
               "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.",
@@ -1648,6 +1673,11 @@
                 "description": "Defines if the component is selected.\n\n**Note:** Only one item must be selected per <code>ui5-color-palette</code>.\nIf more than one item is defined as selected, the last one would be considered as the selected one.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "tooltip",
+                "description": "Defines the tooltip of the component. When not set, the color value is used as the tooltip.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "value",
                 "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.",
@@ -2908,7 +2938,7 @@
         },
         {
           "name": "ui5-datetime-input",
-          "description": "Extention of the UI5 Input, so we do not modify Input's private properties within the datetime components.\nIntended to be used for the DateTime components.\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired when the suggestions picker is closed.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **open** - Fired when the suggestions picker is open.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n- **icon** - Defines the icon to be displayed in the component.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text\n- **input** - Used to style the native input element\n- **root** - Used to style the root DOM element of the Input component",
+          "description": "Extention of the UI5 Input, so we do not modify Input's private properties within the datetime components.\nIntended to be used for the DateTime components.\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired when the suggestions picker is closed.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **open** - Fired when the suggestions picker is open.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Input with type `Number` does not support suggestions.\n- **icon** - Defines the icon to be displayed in the component.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text\n- **input** - Used to style the native input element\n- **root** - Used to style the root DOM element of the Input component",
           "doc-url": "",
           "attributes": [
             {
@@ -2991,7 +3021,7 @@
             },
             {
               "name": "type",
-              "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.",
+              "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.\n- Type `Number` does not support suggestions.",
               "value": {
                 "type": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"",
                 "default": "\"Text\""
@@ -3014,7 +3044,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items."
+              "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Input with type `Number` does not support suggestions."
             },
             {
               "name": "icon",
@@ -3132,7 +3162,7 @@
               },
               {
                 "name": "type",
-                "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.",
+                "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.\n- Type `Number` does not support suggestions.",
                 "value": {
                   "type": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\""
                 }
@@ -4489,7 +4519,7 @@
         },
         {
           "name": "ui5-input",
-          "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired when the suggestions picker is closed.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **open** - Fired when the suggestions picker is open.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n- **icon** - Defines the icon to be displayed in the component.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text\n- **input** - Used to style the native input element\n- **root** - Used to style the root DOM element of the Input component",
+          "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`\nthat are displayed in a popover right under the input. Keep in mind that `ui5-input` with type `Number` does not support suggestions.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired when the suggestions picker is closed.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **open** - Fired when the suggestions picker is open.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Input with type `Number` does not support suggestions.\n- **icon** - Defines the icon to be displayed in the component.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text\n- **input** - Used to style the native input element\n- **root** - Used to style the root DOM element of the Input component",
           "doc-url": "",
           "attributes": [
             {
@@ -4572,7 +4602,7 @@
             },
             {
               "name": "type",
-              "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.",
+              "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.\n- Type `Number` does not support suggestions.",
               "value": {
                 "type": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"",
                 "default": "\"Text\""
@@ -4595,7 +4625,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items."
+              "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Input with type `Number` does not support suggestions."
             },
             {
               "name": "icon",
@@ -4713,7 +4743,7 @@
               },
               {
                 "name": "type",
-                "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.",
+                "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.\n- Type `Number` does not support suggestions.",
                 "value": {
                   "type": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\""
                 }
@@ -6723,7 +6753,7 @@
         },
         {
           "name": "ui5-multi-input",
-          "description": "### Overview\nA `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.\n\nUser can choose interaction for creating tokens.\nFiori Guidelines say that user should create tokens when:\n\n- Type a value in the input and press enter or focus out the input field (`change` event is fired)\n- Move between suggestion items (`selection-change` event is fired)\n- Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiInput.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired when the suggestions picker is closed.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **open** - Fired when the suggestions picker is open.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **token-delete** - Fired when tokens are being deleted.\n- **value-help-trigger** - Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n- **icon** - Defines the icon to be displayed in the component.\n- **tokens** - Defines the component tokens.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text\n- **input** - Used to style the native input element\n- **root** - Used to style the root DOM element of the Input component",
+          "description": "### Overview\nA `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.\n\nUser can choose interaction for creating tokens.\nFiori Guidelines say that user should create tokens when:\n\n- Type a value in the input and press enter or focus out the input field (`change` event is fired)\n- Move between suggestion items (`selection-change` event is fired)\n- Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiInput.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired when the suggestions picker is closed.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **open** - Fired when the suggestions picker is open.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **token-delete** - Fired when tokens are being deleted.\n- **value-help-trigger** - Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Input with type `Number` does not support suggestions.\n- **icon** - Defines the icon to be displayed in the component.\n- **tokens** - Defines the component tokens.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\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**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text\n- **input** - Used to style the native input element\n- **root** - Used to style the root DOM element of the Input component",
           "doc-url": "",
           "attributes": [
             {
@@ -6811,7 +6841,7 @@
             },
             {
               "name": "type",
-              "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.",
+              "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.\n- Type `Number` does not support suggestions.",
               "value": {
                 "type": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"",
                 "default": "\"Text\""
@@ -6834,7 +6864,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items."
+              "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Input with type `Number` does not support suggestions."
             },
             {
               "name": "icon",
@@ -6969,7 +6999,7 @@
               },
               {
                 "name": "type",
-                "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.",
+                "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.\n- Type `Number` does not support suggestions.",
                 "value": {
                   "type": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\""
                 }

package/package.json

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

package/src/AvatarBadgeTemplate.tsx

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

package/src/ColorPaletteItemTemplate.tsx

@@ -6,9 +6,9 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 			class="ui5-cp-item"
 			tabindex={parseInt(this.forcedTabIndex)}
 			role="button"
-			aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}
+			aria-label={this.getLabelText}
 			aria-pressed={this.selected}
-			title={`${this.colorLabel} - ${this.index}: ${this.value}`}
+			title={this.getLabelText}
 		></div>
 	);
 }

package/src/SwitchTemplate.tsx

@@ -22,6 +22,7 @@ export default function SwitchTemplate(this: Switch) {
 			aria-disabled={this.effectiveAriaDisabled}
 			aria-readonly={this.effectiveAriaReadonly}
 			aria-required={this.required}
+			aria-describedby={this.ariaDescribedBy}
 			onClick={this._onclick}
 			onKeyUp={this._onkeyup}
 			onKeyDown={this._onkeydown}
@@ -61,6 +62,8 @@ export default function SwitchTemplate(this: Switch) {
 							</>
 						}
 
+						{this.readonly && <span class="ui5-switch-text ui5-switch-text--readonly" id={this.ariaDescribedBy} aria-hidden={this._textAriaHidden}>{this.ariaDescribedByText}</span>}
+
 						<span class="ui5-switch-handle" part="handle"></span>
 					</div>
 				</div>

package/src/themes/StepInput.css

@@ -18,6 +18,7 @@
 	box-sizing: border-box;
 	height: var(--_ui5_input_height);
 	position: relative;
+	isolation: isolate;
 	margin: var(--_ui5_input_margin_top_bottom) 0;
 	min-width: var(--_ui5_step_input_min_width);
 	text-align: right;
@@ -99,7 +100,7 @@
 	pointer-events: none;
 	border-radius: var(--sapField_BorderCornerRadius);
 	border-style: var(--_ui5_input_error_warning_border_style);
-	z-index: 1;
+	z-index: 0;
 	border-width: 0px;
 }
 

package/src/themes/Switch.css

@@ -145,10 +145,12 @@
 	cursor: default;
 }
 
-.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off {
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off,
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--readonly {
 	visibility: var(--_ui5_switch_text_hidden);
 }
-.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--on {
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--on,
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--readonly {
 	visibility: var(--_ui5_switch_text_hidden);
 }
 

package/src/themes/sap_horizon/Select-parameters.css

@@ -4,4 +4,6 @@
 	--_ui5_select_hover_icon_left_border: none;
 	--_ui5_select_icon_wrapper_height: calc(100% - 0.0625rem);
 	--_ui5_select_icon_wrapper_state_height: calc(100% - 0.125rem);
+	--_ui5_input_focus_outline_color: var(--sapContent_FocusColor);
+	--_ui5_input_readonly_focus_border_radius: 0;
 }

package/src/themes/sap_horizon_dark/Select-parameters.css

@@ -4,4 +4,6 @@
 	--_ui5_select_hover_icon_left_border: none;
 	--_ui5_select_icon_wrapper_height: calc(100% - 0.0625rem);
 	--_ui5_select_icon_wrapper_state_height: calc(100% - 0.125rem);
+	--_ui5_input_focus_outline_color: var(--sapContent_FocusColor);
+	--_ui5_input_readonly_focus_border_radius: 0;
 }