@ui5/webcomponents 2.0.0 → 2.1.0-rc.0

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.0.0",
+  "version": "2.1.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -64,6 +64,14 @@
               "name": "accessible-name",
               "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
+              "value": {
+                "type": "AvatarAccessibilityAttributes",
+                "default": "{}"
+              }
             }
           ],
           "slots": [
@@ -125,6 +133,11 @@
                 "name": "accessible-name",
                 "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
+                "value": { "type": "AvatarAccessibilityAttributes" }
               }
             ],
             "events": []
@@ -143,6 +156,14 @@
                 "default": "\"Group\""
               }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
+              "value": {
+                "type": "AvatarGroupAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "hidden-items",
               "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.",
@@ -181,6 +202,11 @@
                 "description": "Defines the mode of the `AvatarGroup`.",
                 "value": { "type": "\"Group\" | \"Individual\"" }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
+                "value": { "type": "AvatarGroupAccessibilityAttributes" }
+              },
               {
                 "name": "hidden-items",
                 "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.",
@@ -472,6 +498,14 @@
               "description": "Receives id(or many ids) of the elements that label the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+              "value": {
+                "type": "ButtonAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "type",
               "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -545,6 +579,11 @@
                 "description": "Receives id(or many ids) of the elements that label the component.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+                "value": { "type": "ButtonAccessibilityAttributes" }
+              },
               {
                 "name": "type",
                 "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -1971,7 +2010,7 @@
             {
               "name": "delimiter",
               "description": "Determines the symbol which separates the dates.\nIf not supplied, the default time interval delimiter for the current locale will be used.",
-              "value": { "type": "string", "default": "DEFAULT_DELIMITER" }
+              "value": { "type": "string", "default": "\"-\"" }
             },
             {
               "name": "date-value",
@@ -2644,7 +2683,7 @@
             {
               "name": "accept",
               "description": "Comma-separated list of file types that the component should accept.\n\n**Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.",
-              "value": { "type": "string | undefined", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "hide-input",
@@ -3325,6 +3364,14 @@
                 "default": "\"Link\""
               }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
+              "value": {
+                "type": "LinkAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "icon",
               "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -3395,6 +3442,11 @@
                 "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.",
                 "value": { "type": "\"Button\" | \"Link\"" }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
+                "value": { "type": "LinkAccessibilityAttributes" }
+              },
               {
                 "name": "icon",
                 "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -3682,6 +3734,14 @@
                 "default": "\"Active\""
               }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set  when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.",
+              "value": {
+                "type": "ListItemAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "navigated",
               "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.",
@@ -3737,6 +3797,11 @@
                   "type": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\""
                 }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set  when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.",
+                "value": { "type": "ListItemAccessibilityAttributes" }
+              },
               {
                 "name": "navigated",
                 "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.",
@@ -3862,6 +3927,14 @@
                 "default": "\"Active\""
               }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set  when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.",
+              "value": {
+                "type": "ListItemAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "navigated",
               "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.",
@@ -3948,6 +4021,11 @@
                   "type": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\""
                 }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set  when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.",
+                "value": { "type": "ListItemAccessibilityAttributes" }
+              },
               {
                 "name": "navigated",
                 "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.",
@@ -4138,6 +4216,14 @@
               "description": "Defines the text of the tooltip for the menu item.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".",
+              "value": {
+                "type": "ListItemAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "type",
               "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.",
@@ -4223,6 +4309,11 @@
                 "description": "Defines the text of the tooltip for the menu item.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".",
+                "value": { "type": "ListItemAccessibilityAttributes" }
+              },
               {
                 "name": "type",
                 "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.",
@@ -4266,7 +4357,7 @@
         },
         {
           "name": "ui5-message-strip",
-          "description": "### Overview\n\nThe `ui5-message-strip` component enables the embedding of app-related messages.\nIt displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Critical and Negative.\nEach message can have a Close button, so that it can be removed from the UI, if needed.\n\n### Usage\n\nFor the `ui5-message-strip` component, you can define whether it displays\nan icon in the beginning and a close button. Moreover, its size and background\ncan be controlled with CSS.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MessageStrip.js\";`\n---\n\n\n### **Events:**\n - **close** - Fired when the close button is pressed either with a\nclick/tap or by using the Enter or Space key.\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.\n- **icon** - Defines the content to be displayed as graphical element within the component.\n\n**Note:** If no icon is given, the default icon for the component type will be used.\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
+          "description": "### Overview\n\nThe ui5-message-strip component allows for the embedding of application-related messages.\nIt supports four semantic designs, each with its own color and icon: \"Information\", \"Positive\", \"Critical\", and \"Negative\".\nAdditionally, users can choose from two color sets (\"ColorSet1\" and \"ColorSet2\"), each containing 10 predefined color schemes.\nEach message shows a \"Close\" button, so that it can be removed from the UI, if needed.\n\n### Usage\n\nFor the `ui5-message-strip` component, you can define whether it displays\nan icon in the beginning and a close button. Moreover, its size and background\ncan be controlled with CSS.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MessageStrip.js\";`\n---\n\n\n### **Events:**\n - **close** - Fired when the close button is pressed either with a\nclick/tap or by using the Enter or Space key.\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.\n- **icon** - Defines the content to be displayed as graphical element within the component.\n\n**Note:** If no icon is given, the default icon for the component type will be used.\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
           "doc-url": "",
           "attributes": [
             {
@@ -4904,12 +4995,12 @@
             },
             {
               "name": "additional-text",
-              "description": "Defines the `additionalText`, displayed in the end of the list item.",
+              "description": "Defines the `additionalText`, displayed in the end of the option.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "tooltip",
-              "description": "Defines the text of the tooltip that would be displayed for the list item.",
+              "description": "Defines the tooltip of the option.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
@@ -4939,12 +5030,12 @@
               },
               {
                 "name": "additional-text",
-                "description": "Defines the `additionalText`, displayed in the end of the list item.",
+                "description": "Defines the `additionalText`, displayed in the end of the option.",
                 "value": { "type": "string | undefined" }
               },
               {
                 "name": "tooltip",
-                "description": "Defines the text of the tooltip that would be displayed for the list item.",
+                "description": "Defines the tooltip of the option.",
                 "value": { "type": "string | undefined" }
               },
               {
@@ -4973,7 +5064,7 @@
             },
             {
               "name": "tooltip",
-              "description": "Defines the text of the tooltip that would be displayed for the list item.",
+              "description": "Defines the tooltip of the option.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
@@ -5003,7 +5094,7 @@
               },
               {
                 "name": "tooltip",
-                "description": "Defines the text of the tooltip that would be displayed for the list item.",
+                "description": "Defines the tooltip of the option.",
                 "value": { "type": "string | undefined" }
               },
               {
@@ -7222,7 +7313,7 @@
         },
         {
           "name": "ui5-table",
-          "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\n\nThe following features are currently available:\n\n* [TableSelection](../TableSelection) - adds selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";`\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)\n---\n\n\n### **Events:**\n - **row-click** - Fired when an interactive row is clicked.\n\n### **Slots:**\n - **default** - Defines the rows of the component.\n\nNote: Use <code>ui5-table-row</code> for the intended design.\n- **headerRow** - Defines the header row of the component.\n\nNote: Use <code>ui5-table-header-row</code> for the intended design.\n- **nodata** - Defines the custom visualization if there is no data available.\n- **features** - Defines the features of the component.",
+          "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelection](../TableSelection) - adds selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";`\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)\n---\n\n\n### **Events:**\n - **row-click** - Fired when an interactive row is clicked.\n\n### **Slots:**\n - **default** - Defines the rows of the component.\n\nNote: Use <code>ui5-table-row</code> for the intended design.\n- **headerRow** - Defines the header row of the component.\n\nNote: Use <code>ui5-table-header-row</code> for the intended design.\n- **nodata** - Defines the custom visualization if there is no data available.\n- **features** - Defines the features of the component.",
           "doc-url": "",
           "attributes": [
             {
@@ -7476,8 +7567,8 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "key",
-              "description": "Unique identifier of the component.",
+              "name": "row-key",
+              "description": "Unique identifier of the row.",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
@@ -7501,8 +7592,8 @@
           "js": {
             "properties": [
               {
-                "name": "key",
-                "description": "Unique identifier of the component.",
+                "name": "row-key",
+                "description": "Unique identifier of the row.",
                 "value": { "type": "string" }
               },
               {
@@ -7521,7 +7612,7 @@
         },
         {
           "name": "ui5-table-selection",
-          "description": "### Overview\n\nThe `ui5-table-selection` component is used inside the `ui5-table` ti add key-based selection capabilities to the `ui5-table`.\n\nThe component offers three selection modes:\n* Single - select a single row.\n* Multiple - select multiple rows.\n* None - no selection active.\n\nAs the selection is key-based, `ui5-table-row` components need to define a unique `key` property.\n\n### Usage\n\nThe `ui5-table-selection` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-selection mode=\"Multiple\" slot=\"features\"></ui5-table-selection>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelection.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when selection is changed by user interaction.",
+          "description": "### Overview\n\nThe `ui5-table-selection` component is used inside the `ui5-table` ti add key-based selection capabilities to the `ui5-table`.\n\nThe component offers three selection modes:\n* Single - select a single row.\n* Multiple - select multiple rows.\n* None - no selection active.\n\nAs the selection is key-based, `ui5-table-row` components need to define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-selection mode=\"Multiple\" slot=\"features\"></ui5-table-selection>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelection.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when selection is changed by user interaction.",
           "doc-url": "",
           "attributes": [
             {
@@ -7697,7 +7788,7 @@
         },
         {
           "name": "ui5-textarea",
-          "description": "### Overview\n\nThe `ui5-textarea` component is used to enter multiple rows of text.\n\nWhen empty, it can hold a placeholder similar to a `ui5-input`.\nYou can define the rows of the `ui5-textarea` and also determine specific behavior when handling long texts.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TextArea.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the text has changed and the focus leaves the component.\n- **input** - Fired when the value of the component changes at each keystroke or when\nsomething is pasted.\n- **select** - Fired when some text has been selected.\n- **scroll** - Fired when textarea is scrolled.\n\n### **Slots:**\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 if the component has\n`valueState` of type `Information`, `Warning` or `Error`.\n\n### **CSS Parts:**\n - **textarea** - Used to style the native textarea",
+          "description": "### Overview\n\nThe `ui5-textarea` component is used to enter multiple rows of text.\n\nWhen empty, it can hold a placeholder similar to a `ui5-input`.\nYou can define the rows of the `ui5-textarea` and also determine specific behavior when handling long texts.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TextArea.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the text has changed and the focus leaves the component.\n- **input** - Fired when the value of the component changes at each keystroke or when\nsomething is pasted.\n- **select** - Fired when some text has been selected.\n- **scroll** - Fired when textarea is scrolled.\n\n### **Slots:**\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 if the component has\n`valueState` of type `Information`, `Critical` or `Negative`.\n\n### **CSS Parts:**\n - **textarea** - Used to style the native textarea",
           "doc-url": "",
           "attributes": [
             {
@@ -7777,7 +7868,7 @@
           "slots": [
             {
               "name": "valueStateMessage",
-              "description": "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 if the component has\n`valueState` of type `Information`, `Warning` or `Error`."
+              "description": "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 if the component has\n`valueState` of type `Information`, `Critical` or `Negative`."
             }
           ],
           "events": [
@@ -7941,6 +8032,21 @@
               "description": "Defines the open or closed state of the popover.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "required",
+              "description": "Defines whether the component is required.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the aria-label attribute for the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Receives id (or many ids) of the elements that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "date-value",
               "description": "Currently selected time represented as JavaScript Date instance",
@@ -8015,6 +8121,21 @@
                 "description": "Defines the open or closed state of the popover.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "required",
+                "description": "Defines whether the component is required.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the aria-label attribute for the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Receives id (or many ids) of the elements that label the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "date-value",
                 "description": "Currently selected time represented as JavaScript Date instance",
@@ -8205,6 +8326,14 @@
               "description": "Receives id(or many ids) of the elements that label the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+              "value": {
+                "type": "ButtonAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "type",
               "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -8277,6 +8406,11 @@
                 "description": "Receives id(or many ids) of the elements that label the component.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+                "value": { "type": "ButtonAccessibilityAttributes" }
+              },
               {
                 "name": "type",
                 "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -8511,6 +8645,14 @@
               "description": "Receives id(or many ids) of the elements that label the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+              "value": {
+                "type": "ButtonAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "text",
               "description": "Button text",
@@ -8580,6 +8722,11 @@
                 "description": "Receives id(or many ids) of the elements that label the component.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+                "value": { "type": "ButtonAccessibilityAttributes" }
+              },
               {
                 "name": "text",
                 "description": "Button text",
@@ -9050,6 +9197,14 @@
                 "default": "\"Active\""
               }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set  when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.",
+              "value": {
+                "type": "ListItemAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "navigated",
               "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.",
@@ -9136,6 +9291,11 @@
                   "type": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\""
                 }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set  when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.",
+                "value": { "type": "ListItemAccessibilityAttributes" }
+              },
               {
                 "name": "navigated",
                 "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.",
@@ -9223,6 +9383,14 @@
                 "default": "\"Active\""
               }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set  when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.",
+              "value": {
+                "type": "ListItemAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "navigated",
               "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.",
@@ -9310,6 +9478,11 @@
                   "type": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\""
                 }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set  when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.",
+                "value": { "type": "ListItemAccessibilityAttributes" }
+              },
               {
                 "name": "navigated",
                 "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.0.0",
+  "version": "2.1.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,16 +50,16 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.0.0",
-    "@ui5/webcomponents-icons": "2.0.0",
-    "@ui5/webcomponents-icons-business-suite": "2.0.0",
-    "@ui5/webcomponents-icons-tnt": "2.0.0",
-    "@ui5/webcomponents-localization": "2.0.0",
-    "@ui5/webcomponents-theming": "2.0.0"
+    "@ui5/webcomponents-base": "2.1.0-rc.0",
+    "@ui5/webcomponents-icons": "2.1.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.1.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.1.0-rc.0",
+    "@ui5/webcomponents-localization": "2.1.0-rc.0",
+    "@ui5/webcomponents-theming": "2.1.0-rc.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.0.0",
+    "@ui5/webcomponents-tools": "2.1.0-rc.0",
     "chromedriver": "^125.0.0"
   },
-  "gitHead": "2960694d66c4b62d4240e3d45e1401dd94f61aec"
+  "gitHead": "1576c9b11cf85e71b417885e6a710420a15a2617"
 }

package/src/Label.hbs

@@ -3,10 +3,10 @@
 	@click={{_onclick}}
 	>
 	<span class="ui5-label-text-wrapper">
-		<bdi id="{{_id}}-bdi"><slot></slot></bdi>
+		<slot></slot>
 	</span>
-	<span 
-		aria-hidden="true" 
+	<span
+		aria-hidden="true"
 		class="ui5-label-required-colon"
 		data-colon="{{_colonSymbol}}"
 	>

package/src/ListItem.hbs

@@ -28,6 +28,7 @@
 	aria-selected="{{_accInfo.ariaSelected}}"
 	aria-checked="{{_accInfo.ariaChecked}}"
 	aria-owns="{{_accInfo.ariaOwns}}"
+	aria-keyshortcuts="{{_accInfo.ariaKeyShortcuts}}"
 >
 		{{> listItemPreContent}}
 

package/src/Menu.hbs

@@ -7,7 +7,6 @@
 	.opener={{opener}}
 	?open={{open}}
 	prevent-initial-focus
-	prevent-focus-restore
 	hide-arrow
 	allow-target-overlap
 	@ui5-before-open={{_beforePopoverOpen}}

package/src/MenuItem.hbs

@@ -23,7 +23,11 @@
 	{{else if hasEndContent}}
 		<slot name="endContent"></slot>
 	{{else if additionalText}}
-		<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		<span
+			part="additional-text"
+			class="ui5-li-additional-text"
+			aria-hidden="{{_accInfo.ariaHidden}}"
+		>{{additionalText}}</span>
 	{{/if}}
 
 {{/inline}}