@ui5/webcomponents 2.0.0-rc.6 → 2.0.1

package/dist/types/{ListSeparators.js → ListSeparator.js}

@@ -1,25 +1,26 @@
 /**
  * Different types of list items separators.
  * @public
+ * @since 2.0.0
  */
-var ListSeparators;
-(function (ListSeparators) {
+var ListSeparator;
+(function (ListSeparator) {
     /**
      * Separators between the items including the last and the first one.
      * @public
      */
-    ListSeparators["All"] = "All";
+    ListSeparator["All"] = "All";
     /**
      * Separators between the items.
      * Note: This enumeration depends on the theme.
      * @public
      */
-    ListSeparators["Inner"] = "Inner";
+    ListSeparator["Inner"] = "Inner";
     /**
      * No item separators.
      * @public
      */
-    ListSeparators["None"] = "None";
-})(ListSeparators || (ListSeparators = {}));
-export default ListSeparators;
-//# sourceMappingURL=ListSeparators.js.map
+    ListSeparator["None"] = "None";
+})(ListSeparator || (ListSeparator = {}));
+export default ListSeparator;
+//# sourceMappingURL=ListSeparator.js.map

package/dist/types/ListSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSeparator.js","sourceRoot":"","sources":["../../src/types/ListSeparator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,aAiBJ;AAjBD,WAAK,aAAa;IACjB;;;OAGG;IACH,4BAAW,CAAA;IACX;;;;OAIG;IACH,gCAAe,CAAA;IACf;;;OAGG;IACH,8BAAa,CAAA;AACd,CAAC,EAjBI,aAAa,KAAb,aAAa,QAiBjB;AAED,eAAe,aAAa,CAAC","sourcesContent":["/**\n * Different types of list items separators.\n * @public\n * @since 2.0.0\n */\nenum ListSeparator {\n\t/**\n\t * Separators between the items including the last and the first one.\n\t * @public\n\t */\n\tAll = \"All\",\n\t/**\n\t * Separators between the items.\n\t * Note: This enumeration depends on the theme.\n\t * @public\n\t */\n\tInner = \"Inner\",\n\t/**\n\t * No item separators.\n\t * @public\n\t */\n\tNone = \"None\",\n}\n\nexport default ListSeparator;\n"]}

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

@@ -258,7 +258,7 @@
     },
     {
       "name": "ui5-calendar",
-      "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\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### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date`.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.",
+      "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\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### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.",
       "attributes": [
         {
           "name": "selection-mode",
@@ -536,17 +536,25 @@
         {
           "name": "background-design",
           "description": "Defines the carousel's background design.",
-          "values": [{ "name": "BackgroundDesign" }]
+          "values": [
+            { "name": "Transparent" },
+            { "name": "Solid" },
+            { "name": "Translucent" }
+          ]
         },
         {
           "name": "page-indicator-background-design",
           "description": "Defines the page indicator background design.",
-          "values": [{ "name": "BackgroundDesign" }]
+          "values": [
+            { "name": "Transparent" },
+            { "name": "Solid" },
+            { "name": "Translucent" }
+          ]
         },
         {
           "name": "page-indicator-border-design",
           "description": "Defines the page indicator border design.",
-          "values": [{ "name": "BorderDesign" }]
+          "values": [{ "name": "None" }, { "name": "Solid" }]
         },
         {
           "name": "arrows-placement",
@@ -816,7 +824,7 @@
       "description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code>.",
       "attributes": [
         {
-          "name": "text",
+          "name": "header-text",
           "description": "Defines the text of the component.",
           "values": []
         }
@@ -1455,7 +1463,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 \"error\" or \"warning\", 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**Note:** If you are using the `ui5-input` as a single npm module,\ndon't forget to import the `InputSuggestions` module from\n\"@ui5/webcomponents/dist/features/InputSuggestions.js\"\nto enable the suggestions functionality.\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`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";` (optional - for input suggestions support)\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- **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>` and `<ui5-suggestion-group-item>` are recommended to be used as suggestion items.\n\n**Note:** Importing the Input Suggestions Support feature:\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\nautomatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-group-item>` for your convenience.\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`, `Warning` or `Error` 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.",
+      "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 \"error\" or \"warning\", 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**Note:** If you are using the `ui5-input` as a single npm module,\ndon't forget to import the `InputSuggestions` module from\n\"@ui5/webcomponents/dist/features/InputSuggestions.js\"\nto enable the suggestions functionality.\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`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";` (optional - for input suggestions support)\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- **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\n**Note:** Importing the Input Suggestions Support feature:\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\nautomatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.\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`, `Warning` or `Error` 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.",
       "attributes": [
         {
           "name": "disabled",
@@ -1782,13 +1790,7 @@
     {
       "name": "list-item-base",
       "description": "A class to serve as a foundation\nfor the `ListItem` and `ListItemGroupHeader` classes.\n\n\n---\n\n\n",
-      "attributes": [
-        {
-          "name": "selected",
-          "description": "Defines the selected state of the component.",
-          "values": []
-        }
-      ],
+      "attributes": [],
       "references": []
     },
     {
@@ -1863,7 +1865,7 @@
     },
     {
       "name": "ui5-li",
-      "description": "The `ui5-li` represents the simplest type of item for a `ui5-list`.\n\nThis is a list item,\nproviding the most common use cases such as `text`,\n`image` and `icon`.\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\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- **imageContent** - **Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with it's default size - S.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-li` should be customized in order to fit.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the list item\n- **description** - Used to style the description of the list item\n- **additional-text** - Used to style the additionalText of the list item\n- **icon** - Used to style the icon of the list item\n- **native-li** - Used to style the main li tag of the list item\n- **content** - Used to style the content area of the list item\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode\n- **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode",
+      "description": "The `ui5-li` represents the simplest type of item for a `ui5-list`.\n\nThis is a list item,\nproviding the most common use cases such as `text`,\n`image` and `icon`.\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\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- **image** - **Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with it's default size - S.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-li` should be customized in order to fit.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the list item\n- **description** - Used to style the description of the list item\n- **additional-text** - Used to style the additionalText of the list item\n- **icon** - Used to style the icon of the list item\n- **native-li** - Used to style the main li tag of the list item\n- **content** - Used to style the content area of the list item\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode\n- **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode",
       "attributes": [
         {
           "name": "description",
@@ -1877,12 +1879,7 @@
         },
         {
           "name": "icon-end",
-          "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.\n\n**Note:** If `image` is set, the `icon` would be displayed after the `image`.",
-          "values": []
-        },
-        {
-          "name": "image",
-          "description": "Defines the `image` source URI.\n\n**Note:** The `image` would be displayed in the beginning of the list item.",
+          "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.",
           "values": []
         },
         {
@@ -1952,7 +1949,7 @@
     },
     {
       "name": "ui5-menu",
-      "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Usage\n\n`ui5-menu` contains `ui5-menu-item` components.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nNote: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.\n- **before-open** - Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. **This event does not bubble.**\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.\n- **open** - Fired after the menu is opened. **This event does not bubble.**\n- **before-close** - Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.**\n- **close** - Fired after the menu is closed. **This event does not bubble.**\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` for the intended design.",
+      "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nNote: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.\n- **before-open** - Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. **This event does not bubble.**\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.\n- **open** - Fired after the menu is opened. **This event does not bubble.**\n- **before-close** - Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.**\n- **close** - Fired after the menu is closed. **This event does not bubble.**\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.",
       "attributes": [
         {
           "name": "header-text",
@@ -1984,7 +1981,7 @@
     },
     {
       "name": "ui5-menu-item",
-      "description": "### Overview\n\n`ui5-menu-item` is the item to use inside a `ui5-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-menu-item` represents a node in a `ui5-menu`. The menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItem.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** If there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n- **endContent** - Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.",
+      "description": "### Overview\n\n`ui5-menu-item` is the item to use inside a `ui5-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-menu-item` represents a node in a `ui5-menu`. The menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItem.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** The slot can hold `ui5-menu-item` and `ui5-menu-separator` items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n- **endContent** - Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.",
       "attributes": [
         {
           "name": "text",
@@ -2001,11 +1998,6 @@
           "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
           "values": []
         },
-        {
-          "name": "starts-section",
-          "description": "Defines whether a visual separator should be rendered before the item.",
-          "values": []
-        },
         {
           "name": "disabled",
           "description": "Defines whether `ui5-menu-item` is in disabled state.\n\n**Note:** A disabled `ui5-menu-item` is noninteractive.",
@@ -2065,9 +2057,15 @@
       ],
       "references": []
     },
+    {
+      "name": "ui5-menu-separator",
+      "description": "The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.\n\n\n---\n\n\n",
+      "attributes": [],
+      "references": []
+    },
     {
       "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\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\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).",
       "attributes": [
         {
           "name": "design",
@@ -2219,7 +2217,7 @@
       "description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code>.",
       "attributes": [
         {
-          "name": "text",
+          "name": "header-text",
           "description": "Defines the text of the component.",
           "values": []
         }
@@ -2343,12 +2341,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.",
           "values": []
         },
         {
           "name": "tooltip",
-          "description": "Defines the text of the tooltip that would be displayed for the list item.",
+          "description": "Defines the tooltip of the option.",
           "values": []
         },
         {
@@ -2375,7 +2373,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.",
           "values": []
         },
         {
@@ -3137,6 +3135,11 @@
       "name": "ui5-special-date",
       "description": "### Overview\n\nThe `ui5-special-date` component defines a special calendar date to be used inside `ui5-calendar`,\nwhich is visually distinguished from the rest of the dates.\n\n\n---\n\n\n",
       "attributes": [
+        {
+          "name": "value",
+          "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
+          "values": []
+        },
         {
           "name": "type",
           "description": "Defines the type of the special date.",
@@ -3160,11 +3163,6 @@
             { "name": "... 8 more ..." },
             { "name": "Type20" }
           ]
-        },
-        {
-          "name": "value",
-          "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
-          "values": []
         }
       ],
       "references": []
@@ -3287,71 +3285,47 @@
       "references": []
     },
     {
-      "name": "ui5-suggestion-group-item",
-      "description": "The `ui5-suggestion-group-item` is type of suggestion item,\nthat can be used to split the `ui5-input` suggestions into groups.\n\n\n---\n\n\n",
+      "name": "ui5-suggestion-item",
+      "description": "The `ui5-suggestion-item` represents the suggestion item of the `ui5-input`.\n\n\n---\n\n\n",
       "attributes": [
         {
           "name": "text",
-          "description": "Defines the text of the `ui5-suggestion-group-item`.",
+          "description": "Defines the text of the component.",
+          "values": []
+        },
+        {
+          "name": "additional-text",
+          "description": "Defines the `additionalText`, displayed in the end of the item.",
           "values": []
         }
       ],
       "references": []
     },
     {
-      "name": "ui5-suggestion-item",
-      "description": "The `ui5-suggestion-item` represents the suggestion item of the `ui5-input`.\n\n\n---\n\n\n",
+      "name": "ui5-suggestion-item-custom",
+      "description": "The `ui5-suggestion-item-custom` is type of suggestion item,\nthat can be used to place suggestion items with custom content in the input.\nThe text property is considered only for autocomplete.\nIn case the user needs highlighting functionality, check \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js\"\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
       "attributes": [
         {
           "name": "text",
-          "description": "Defines the text of the component.",
+          "description": "Defines the text of the `ui5-suggestion-item-custom`.\n**Note:** The text property is considered only for autocomplete.",
           "values": []
-        },
-        {
-          "name": "type",
-          "description": "Defines the visual indication and behavior of the item.\nAvailable options are `Active` (by default), `Inactive` and `Detail`.\n\n**Note:** When set to `Active`, the item will provide visual response upon press and hover,\nwhile when `Inactive` or `Detail` - will not.",
-          "values": [
-            { "name": "Navigation" },
-            { "name": "Inactive" },
-            { "name": "Active" },
-            { "name": "Detail" }
-          ]
-        },
-        {
-          "name": "description",
-          "description": "Defines the description displayed right under the item text, if such is present.",
-          "values": []
-        },
-        {
-          "name": "icon",
-          "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
-          "values": []
-        },
-        {
-          "name": "icon-end",
-          "description": "Defines whether the `icon` should be displayed in the beginning of the item or in the end.\n\n**Note:** If `image` is set, the `icon` would be displayed after the `image`.",
-          "values": []
-        },
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "ui5-suggestion-item-group",
+      "description": "The `ui5-suggestion-item-group` is type of suggestion item,\nthat can be used to split the `ui5-input` suggestions into groups.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-suggestion-item-group</code>.",
+      "attributes": [
         {
-          "name": "image",
-          "description": "Defines the `image` source URI.\n\n**Note:** The `image` would be displayed in the beginning of the item.",
+          "name": "header-text",
+          "description": "Defines the header text of the <code>ui5-li-group</code>.",
           "values": []
         },
         {
-          "name": "additional-text",
-          "description": "Defines the `additionalText`, displayed in the end of the item.",
+          "name": "header-accessible-name",
+          "description": "Defines the accessible name of the header.",
           "values": []
-        },
-        {
-          "name": "additional-text-state",
-          "description": "Defines the state of the `additionalText`.",
-          "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
-            { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
-          ]
         }
       ],
       "references": []
@@ -3509,7 +3483,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\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\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.",
       "attributes": [
         {
           "name": "accessible-name",
@@ -3535,6 +3509,11 @@
           "name": "loading",
           "description": "Defines if the loading indicator should be shown.\n\n<b>Note:</b> When the component is loading, it is non-interactive.",
           "values": []
+        },
+        {
+          "name": "loading-delay",
+          "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
+          "values": []
         }
       ],
       "references": []
@@ -3617,14 +3596,19 @@
       "description": "### Overview\n\nThe `ui5-table-row` component represents a row in the `ui5-table`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRow.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design.",
       "attributes": [
         {
-          "name": "key",
-          "description": "Unique identifier of the component.",
+          "name": "row-key",
+          "description": "Unique identifier of the row.",
           "values": []
         },
         {
           "name": "interactive",
           "description": "Defines the interactive state of the row.",
           "values": []
+        },
+        {
+          "name": "navigated",
+          "description": "Defines the navigated state of the row.",
+          "values": []
         }
       ],
       "references": []
@@ -3637,7 +3621,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\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\n\n\n\n### **Events:**\n - **change** - Fired when selection is changed by user interaction.",
       "attributes": [
         {
           "name": "mode",
@@ -3715,7 +3699,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\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\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",
       "attributes": [
         {
           "name": "value",