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

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

@@ -818,7 +818,7 @@
     },
     {
       "name": "ui5-combobox",
-      "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n-  Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n- **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the component items.\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 `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.\n- **icon** - Defines the icon to be displayed in the input field.",
+      "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n-  Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\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/ComboBox.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n- **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the component items.\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 `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.\n- **icon** - Defines the icon to be displayed in the input field.",
       "attributes": [
         {
           "name": "value",
@@ -1505,7 +1505,7 @@
     },
     {
       "name": "ui5-file-uploader",
-      "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **file-size-exceed** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\n**Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\nAlso it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.\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.",
+      "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **file-size-exceed** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.\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.",
       "attributes": [
         {
           "name": "accept",
@@ -1514,7 +1514,7 @@
         },
         {
           "name": "hide-input",
-          "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.",
+          "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.",
           "values": []
         },
         {
@@ -1558,6 +1558,21 @@
             { "name": "Information" }
           ]
         },
+        {
+          "name": "required",
+          "description": "Defines whether the component is required.",
+          "values": []
+        },
+        {
+          "name": "accessible-name",
+          "description": "Defines the accessible ARIA name of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-name-ref",
+          "description": "Receives id(or many ids) of the elements that label the input.",
+          "values": []
+        },
         {
           "name": "files",
           "description": "FileList of all selected files.",
@@ -1703,7 +1718,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\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\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- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\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 - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
+      "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\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\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- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\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 - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
       "attributes": [
         {
           "name": "disabled",
@@ -1986,6 +2001,11 @@
           "description": "Defines the accessible name of the component.",
           "values": []
         },
+        {
+          "name": "accessibility-attributes",
+          "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
+          "values": [{ "name": "ListAccessibilityAttributes" }]
+        },
         {
           "name": "accessible-name-ref",
           "description": "Defines the IDs of the elements that label the component.",
@@ -2435,7 +2455,7 @@
     },
     {
       "name": "ui5-multi-combobox",
-      "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n-  Tokenizer - a list of tokens with selected options.\n-  Input field - displays the selected option/s as token/s. Users can type to filter the list.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\n\n#### Tokens\n\n-  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n-  Delete -  deletes the token and focuses the previous token.\n-  Backspace -  deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke or clear icon is pressed.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **selection-change** - Fired when selection is changed by user interaction.\n\n### **Slots:**\n - **default** - Defines the component 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### **CSS Parts:**\n - **token-\\{index\\}** - Used to style each token(where `token-0` corresponds to the first item)",
+      "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n-  Tokenizer - a list of tokens with selected options.\n-  Input field - displays the selected option/s as token/s. Users can type to filter the list.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\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#### Tokens\n\n-  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n-  Delete -  deletes the token and focuses the previous token.\n-  Backspace -  deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke or clear icon is pressed.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **selection-change** - Fired when selection is changed by user interaction.\n\n### **Slots:**\n - **default** - Defines the component 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### **CSS Parts:**\n - **token-\\{index\\}** - Used to style each token(where `token-0` corresponds to the first item)",
       "attributes": [
         {
           "name": "value",

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.13.0-rc.0",
+  "version": "2.13.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1666,7 +1666,7 @@
         },
         {
           "name": "ui5-combobox",
-          "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n-  Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n- **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the component items.\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 `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.\n- **icon** - Defines the icon to be displayed in the input field.",
+          "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n-  Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\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/ComboBox.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n- **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the component items.\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 `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.\n- **icon** - Defines the icon to be displayed in the input field.",
           "doc-url": "",
           "attributes": [
             {
@@ -3113,7 +3113,7 @@
         },
         {
           "name": "ui5-file-uploader",
-          "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n---\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **file-size-exceed** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\n**Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\nAlso it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.\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.",
+          "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n---\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **file-size-exceed** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.\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.",
           "doc-url": "",
           "attributes": [
             {
@@ -3123,7 +3123,7 @@
             },
             {
               "name": "hide-input",
-              "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.",
+              "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -3164,6 +3164,21 @@
                 "default": "\"None\""
               }
             },
+            {
+              "name": "required",
+              "description": "Defines whether the component is required.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Receives id(or many ids) of the elements that label the input.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "files",
               "description": "FileList of all selected files.",
@@ -3173,7 +3188,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\n**Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\nAlso it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience."
+              "description": "This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users."
             },
             {
               "name": "valueStateMessage",
@@ -3199,7 +3214,7 @@
               },
               {
                 "name": "hide-input",
-                "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.",
+                "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.",
                 "value": { "type": "boolean" }
               },
               {
@@ -3239,6 +3254,21 @@
                   "type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
                 }
               },
+              {
+                "name": "required",
+                "description": "Defines whether the component is required.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Receives id(or many ids) of the elements that label the input.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "files",
                 "description": "FileList of all selected files.",
@@ -3530,7 +3560,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\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- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\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- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\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 - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
+          "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- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\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- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\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 - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
           "doc-url": "",
           "attributes": [
             {
@@ -4100,6 +4130,14 @@
               "description": "Defines the accessible name of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
+              "value": {
+                "type": "ListAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "accessible-name-ref",
               "description": "Defines the IDs of the elements that label the component.",
@@ -4232,6 +4270,11 @@
                 "description": "Defines the accessible name of the component.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
+                "value": { "type": "ListAccessibilityAttributes" }
+              },
               {
                 "name": "accessible-name-ref",
                 "description": "Defines the IDs of the elements that label the component.",
@@ -5170,7 +5213,7 @@
         },
         {
           "name": "ui5-multi-combobox",
-          "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n-  Tokenizer - a list of tokens with selected options.\n-  Input field - displays the selected option/s as token/s. Users can type to filter the list.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\n\n#### Tokens\n\n-  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n-  Delete -  deletes the token and focuses the previous token.\n-  Backspace -  deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke or clear icon is pressed.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **selection-change** - Fired when selection is changed by user interaction.\n\n### **Slots:**\n - **default** - Defines the component 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### **CSS Parts:**\n - **token-\\{index\\}** - Used to style each token(where `token-0` corresponds to the first item)",
+          "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n-  Tokenizer - a list of tokens with selected options.\n-  Input field - displays the selected option/s as token/s. Users can type to filter the list.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\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#### Tokens\n\n-  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n-  Delete -  deletes the token and focuses the previous token.\n-  Backspace -  deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke or clear icon is pressed.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **selection-change** - Fired when selection is changed by user interaction.\n\n### **Slots:**\n - **default** - Defines the component 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### **CSS Parts:**\n - **token-\\{index\\}** - Used to style each token(where `token-0` corresponds to the first item)",
           "doc-url": "",
           "attributes": [
             {

package/package.json

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

package/src/CheckBoxTemplate.tsx

@@ -15,16 +15,16 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				"ui5-checkbox-root": true,
 				"ui5-checkbox--hoverable": !this.disabled && !this.readonly && isDesktop(),
 			}}
-			role="checkbox"
+			role={this.accInfo.role}
 			part="root"
-			aria-checked={this.effectiveAriaChecked}
-			aria-readonly={this.ariaReadonly}
-			aria-disabled={this.effectiveAriaDisabled}
+			aria-checked={this.accInfo.ariaChecked}
+			aria-readonly={this.accInfo.ariaReadonly}
+			aria-disabled={this.accInfo.ariaDisabled}
 			aria-label={this.ariaLabelText}
 			aria-labelledby={this.ariaLabelledBy}
 			aria-describedby={this.ariaDescribedBy}
-			aria-required={this.required}
-			tabindex={this.effectiveTabIndex}
+			aria-required={this.accInfo.ariaRequired}
+			tabindex={this.accInfo.tabindex}
 			onMouseDown={this._onmousedown}
 			onMouseUp={this._onmouseup}
 			onKeyDown={this._onkeydown}
@@ -45,6 +45,7 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				</div>
 			}
 
+			{this.accInfo.role === "checkbox" &&
 			<input
 				id={`${this._id}-CB`}
 				type="checkbox"
@@ -56,6 +57,7 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				aria-hidden="true"
 				data-sap-no-tab-ref
 			/>
+			}
 
 			{this.text &&
 			<Label

package/src/ComboBoxPopoverTemplate.tsx

@@ -77,7 +77,6 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 					slot="header"
 					class={{
 						"ui5-responsive-popover-header": true,
-						"ui5-responsive-popover-header--focused": this._isValueStateFocused,
 						...this.classes.popoverValueState,
 					}}
 					style={this.styles.suggestionPopoverHeader}

package/src/ComboBoxTemplate.tsx

@@ -11,6 +11,9 @@ export default function ComboBoxTemplate(this: ComboBox) {
 				{this.hasValueState &&
 				<span id="value-state-description" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
 				}
+				{this.linksInAriaValueStateHiddenText.length > 0 &&
+						<span id="hiddenText-value-state-link-shortcut" class="ui5-hidden-text">{this.valueStateLinksShortcutsTextAcc}</span>
+				}
 
 				<input id="ui5-combobox-input"
 					value={this.value}
@@ -31,7 +34,7 @@ export default function ComboBoxTemplate(this: ComboBox) {
 					role="combobox"
 					aria-haspopup="dialog"
 					aria-autocomplete="both"
-					aria-describedby="value-state-description"
+					aria-describedby={this.ariaDescribedByText}
 					aria-label={this.ariaLabelText}
 					aria-required={this.required}
 					aria-controls={this.responsivePopoverId}

package/src/FileUploaderPopoverTemplate.tsx

@@ -21,9 +21,7 @@ export default function FileUploaderPopoverTemplate(this: FileUploader) {
 					"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
 					"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 				}}
-				style={{
-					"width": `${this.ui5Input ? this.ui5Input.offsetWidth : 0}px`,
-				}}
+				style={{ width: `${this._formWidth}px` }}
 			>
 				{
 					this._valueStateMessageInputIcon &&

package/src/FileUploaderTemplate.tsx

@@ -1,5 +1,9 @@
+import Icon from "./Icon.js";
+import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import Tokenizer from "./Tokenizer.js";
+import Token from "./Token.js";
 import type FileUploader from "./FileUploader.js";
-import Input from "./Input.js";
 import FileUploaderPopoverTemplate from "./FileUploaderPopoverTemplate.js";
 
 export default function FileUploaderTemplate(this: FileUploader) {
@@ -7,39 +11,89 @@ export default function FileUploaderTemplate(this: FileUploader) {
 		<>
 			<div
 				class="ui5-file-uploader-root"
-				onMouseOver={this._onmouseover}
-				onMouseOut={this._onmouseout}
 				onFocusIn={this._onfocusin}
 				onFocusOut={this._onfocusout}
 				onKeyDown={this._onkeydown}
 				onKeyUp={this._onkeyup}
 				onClick={this._onclick}
+				onMouseDown={this._onmousedown}
 				onDragOver={this._ondrag}
 				onDrop={this._ondrop}
 			>
-				<div class="ui5-file-uploader-mask">
-					{!this.hideInput &&
-						<Input
-							value={this.value}
-							valueState={this.valueState}
-							placeholder={this.placeholder}
-							disabled={this.disabled}
-							tabindex={-1}
-							class="ui5-file-uploader-input"
-						/>
-					}
+				<form class="ui5-file-uploader-form" onSubmit={this._onFormSubmit}>
+					<input
+						type="file"
+						class="ui5-file-uploader-native-input"
+						name={this.name}
+						multiple={this.multiple}
+						accept={this.accept}
+						disabled={this.disabled}
+						title={this.inputTitle}
+						aria-roledescription={this.accInfo.ariaRoledescription}
+						aria-haspopup={this.accInfo.ariaHasPopup}
+						aria-label={this.accInfo.ariaLabel}
+						aria-required={this.accInfo.ariaRequired}
+						aria-invalid={this.accInfo.ariaInvalid}
+						onClick={this._onNativeInputClick}
+						onChange={this._onChange}
+						data-sap-focus-ref
+					/>
+				</form>
+
+				{this.hideInput ? (
 					<slot></slot>
-				</div>
-				<input
-					type="file"
-					tabindex={-1}
-					aria-hidden="true"
-					multiple={this.multiple}
-					accept={this.accept}
-					title={this.titleText}
-					disabled={this.disabled}
-					onChange={this._onChange}
-				/>
+				) : (
+					<div class="ui5-file-uploader-display-container">
+						<div class="ui5-file-uploader-display-elements">
+							{this._selectedFilesNames.length > 0 ? (
+								<>
+									<Tokenizer
+										class="ui5-file-uploader-tokenizer"
+										expanded={this._tokenizerExpanded}
+										open={this._tokenizerOpen}
+										popoverMinWidth={this._formWidth}
+										onClick={this._onTokenizerClick}
+										onMouseDown={this._onTokenizerMouseDown}
+										onKeyDown={this._onTokenizerKeyDown}
+										onKeyUp={this._onTokenizerKeyUp}
+										preventInitialFocus
+										readonly
+									>
+										{this._selectedFilesNames.map(fileName => (
+											<Token
+												text={fileName}
+											/>
+										))}
+									</Tokenizer>
+									<Icon
+										name={decline}
+										class="ui5-file-uploader-clear-icon inputIcon"
+										onClick={this._onClearIconClick}
+										title={this.clearIconTitle}
+									/>
+								</>
+							) : (
+								<input
+									class="ui5-file-uploader-display-input"
+									tabindex={-1}
+									aria-hidden="true"
+									title={this.inputTitle}
+									placeholder={this.resolvedPlaceholder}
+									inner-input
+									readonly
+								/>
+							)}
+
+							<Icon
+								name={valueHelp}
+								class="ui5-file-uploader-value-help-icon inputIcon"
+								title={this.valueHelpTitle}
+							/>
+						</div>
+
+						<slot></slot>
+					</div>
+				)}
 			</div>
 
 			{ FileUploaderPopoverTemplate.call(this) }

package/src/InputTemplate.tsx

@@ -108,6 +108,10 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						<span id="accessibleDescription" class="ui5-hidden-text">{this.accInfo.accessibleDescription}</span>
 					}
 
+					{this.linksInAriaValueStateHiddenText.length > 0 &&
+						<span id="hiddenText-value-state-link-shortcut" class="ui5-hidden-text">{this.valueStateLinksShortcutsTextAcc}</span>
+					}
+
 					{this.hasValueState &&
 						<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
 					}

package/src/ListTemplate.tsx

@@ -92,7 +92,8 @@ function moreRow(this: List) {
 					"ui5-growing-button-inner": true,
 					"ui5-growing-button-inner-active": this._loadMoreActive,
 				}}
-				aria-labelledby={`${this._id}-growingButton-text`}
+				aria-label={this.growingButtonAriaLabel}
+				aria-labelledby={this.growingButtonAriaLabelledBy}
 				onClick={this._onLoadMoreClick}
 				onKeyDown={this._onLoadMoreKeydown}
 				onKeyUp={this._onLoadMoreKeyup}

package/src/MenuItemGroupTemplate.tsx

@@ -4,6 +4,7 @@ export default function MenuItemGroupTemplate(this: MenuItemGroup) {
 	return (
 		<div
 			role="group"
+			aria-label={this.ariaLabelText}
 			onui5-check={this._handleItemCheck}
 		>
 			<slot></slot>

package/src/MenuItemTemplate.tsx

@@ -138,6 +138,7 @@ function listItemPostContent(this: MenuItem) {
 						loadingDelay={this.loadingDelay}
 						onMouseOver={this._itemMouseOver}
 						onKeyDown={this._itemKeyDown}
+						onKeyUp={this._itemKeyUp}
 						// handles event from slotted children
 						onui5-close-menu={this._close}
 						onui5-exit-end-content={this._navigateOutOfEndContent}

package/src/MultiComboBoxItemTemplate.tsx

@@ -12,8 +12,7 @@ function listItemContent(this: MultiComboBoxItem) {
 			<CheckBox
 				disabled={this._readonly}
 				checked={this.selected}
-				tabindex={-1}
-				accessibleName={this._accessibleName}
+				_accInfo = {this.checkBoxAccInfo}
 			/>
 			<div part="content" id="content" class="ui5-li-content">
 				<div class="ui5-li-text-wrapper">

package/src/MultiComboBoxPopoverTemplate.tsx

@@ -78,7 +78,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 
 			{!this._isPhone && <>
 				{this.hasValueStateMessage &&
-					<div slot="header" onKeyDown={this._onListHeaderKeydown} tabIndex={0} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
+					<div slot="header" onKeyDown={this._onListHeaderKeydown} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
 						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
 						{this.open && valueStateMessage.call(this)}
 					</div>