@ui5/webcomponents 2.22.0-rc.1 → 2.22.0-rc.3

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.1",
+  "version": "2.22.0-rc.3",
   "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\"`",
@@ -1636,7 +1646,7 @@
         },
         {
           "name": "ui5-color-palette-item",
-          "description": "### Overview\n\nThe `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.\n---\n",
+          "description": "### Overview\n\nThe `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.\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 will not be fired if the `disabled` property is set to `true`.",
           "doc-url": "",
           "attributes": [
             {
@@ -1655,7 +1665,12 @@
               "value": { "type": "string", "default": "\"\"" }
             }
           ],
-          "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 will not be fired if the `disabled` property is set to `true`."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -1674,7 +1689,12 @@
                 "value": { "type": "string" }
               }
             ],
-            "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 will not be fired if the `disabled` property is set to `true`."
+              }
+            ]
           }
         },
         {
@@ -2557,7 +2577,7 @@
         },
         {
           "name": "ui5-daterange-picker",
-          "description": "### Overview\nThe DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n### Usage\nThe user can enter a date by:\nUsing the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).\nFor the `ui5-daterange-picker`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateRangePicker.js\";`\n\n### Keyboard Handling\nThe `ui5-daterange-picker` provides advanced keyboard handling.\n\nWhen the `ui5-daterange-picker` input field is focused the user can\nincrement or decrement respectively the range start or end date, depending on where the cursor is.\nThe following shortcuts are available:\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\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired after the component's picker is closed.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **open** - Fired after the component's picker is opened.\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\n### **Methods:**\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- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\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- **isValidDisplayValue(value: _string_): _boolean_** - 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\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\nThe DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n### Usage\nThe user can enter a date by:\nUsing the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).\nFor the `ui5-daterange-picker`:\n\n**Note:** Relative date values such as \"today\", \"yesterday\", or \"tomorrow\" are not supported.\nEntering a relative date sets the component to an error state.\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateRangePicker.js\";`\n\n### Keyboard Handling\nThe `ui5-daterange-picker` provides advanced keyboard handling.\n\nWhen the `ui5-daterange-picker` input field is focused the user can\nincrement or decrement respectively the range start or end date, depending on where the cursor is.\nThe following shortcuts are available:\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\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired after the component's picker is closed.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **open** - Fired after the component's picker is opened.\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\n### **Methods:**\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- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\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- **isValidDisplayValue(value: _string_): _boolean_** - 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\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": [
             {
@@ -2928,7 +2948,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": [
             {
@@ -3011,7 +3031,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\""
@@ -3034,7 +3054,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",
@@ -3152,7 +3172,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\""
                 }
@@ -4509,7 +4529,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": [
             {
@@ -4592,7 +4612,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\""
@@ -4615,7 +4635,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",
@@ -4733,7 +4753,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\""
                 }
@@ -6743,7 +6763,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": [
             {
@@ -6831,7 +6851,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\""
@@ -6854,7 +6874,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",
@@ -6989,7 +7009,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\""
                 }
@@ -8407,7 +8427,7 @@
         },
         {
           "name": "ui5-segmented-button-item",
-          "description": "### Overview\n\nUsers can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.\n\nClicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.\nThe item returns to its initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any\n`ui5-segmented-button-item`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButtonItem.js\";`\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\nUsers can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.\n\nClicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.\nThe item returns to its initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any\n`ui5-segmented-button-item`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButtonItem.js\";`\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 will not be fired if the `disabled` property is set to `true`.\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": [
             {
@@ -8457,7 +8477,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 will not be fired if the `disabled` property is set to `true`."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -8501,7 +8526,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 will not be fired if the `disabled` property is set to `true`."
+              }
+            ]
           }
         },
         {

package/package.json

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

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

@@ -9,6 +9,7 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 			aria-label={this.getLabelText}
 			aria-pressed={this.selected}
 			title={this.getLabelText}
+			onClick={this._onClick}
 		></div>
 	);
 }

package/src/ComboBoxPopoverTemplate.tsx

@@ -2,6 +2,7 @@ import Icon from "./Icon.js";
 import Button from "./Button.js";
 import List from "./List.js";
 import Input from "./Input.js";
+import Title from "./Title.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -40,7 +41,13 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				<>
 					<div slot="header" class="ui5-responsive-popover-header">
 						<div class="row">
-							<span>{this._headerTitleText}</span>
+							<Title
+								level="H1"
+								wrappingType="None"
+								class="ui5-responsive-popover-header-text"
+							>
+								{this._headerTitleText}
+							</Title>
 						</div>
 
 						<div class="row">

package/src/MultiInputTemplate.tsx

@@ -33,6 +33,7 @@ function preContent(this: MultiInput) {
 				class="ui5-multi-input-tokenizer"
 				opener={this.morePopoverOpener}
 				popoverMinWidth={this._inputWidth}
+				popoverTitle={this._headerTitleText}
 				hidePopoverArrow={true}
 				expanded={this.tokenizerExpanded}
 				onKeyDown={this._onTokenizerKeydown}

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/i18n/messagebundle.properties

@@ -342,6 +342,12 @@ INPUT_SUGGESTIONS_MORE_HITS={0} results are available
 #XACT: ARIA announcement for the Input suggestion result if no hit
 INPUT_SUGGESTIONS_NO_HIT=No results
 
+#XACT: ARIA announcement when suggestions popover is expanded
+INPUT_SUGGESTIONS_EXPANDED=Expanded
+
+#XACT: ARIA announcement when suggestions popover is collapsed
+INPUT_SUGGESTIONS_COLLAPSED=Collapsed
+
 #XACT: ARIA label for the Input clear icon
 INPUT_CLEAR_ICON_ACC_NAME=Clear
 

package/src/themes/CardHeader.css

@@ -136,7 +136,6 @@
 	font-weight: normal;
 	color: var(--sapTile_TextColor);
 	margin-top: var(--_ui5_card_header_subtitle_margin_top);
-	max-height: 2.1rem;
 }
 
 .ui5-card-header .ui5-card-header-text .ui5-card-header-title,

package/src/themes/Select.css

@@ -7,6 +7,31 @@
 	width: var(--_ui5_button_base_min_width);
 }
 
+:host([opened]) .ui5-input-focusable-element::after {
+	content: var(--ui5_input_focus_pseudo_element_content);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
+	border-radius: var(--_ui5_input_focus_border_radius);
+	top: var(--_ui5_input_focus_offset);
+	bottom: var(--_ui5_input_focus_offset);
+	left: var(--_ui5_input_focus_offset);
+	right: var(--_ui5_input_focus_offset);
+}
+
+:host([value-state="Negative"][opened]:not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
+}
+
+:host([value-state="Critical"][opened]:not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
+}
+
+:host([value-state="Positive"][opened]:not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
+}
+
 :host([icon]) .ui5-select-root {
 	min-width: var(--_ui5_button_base_min_width);
 }

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;
 }