@ui5/webcomponents 1.24.0-rc.4 → 2.0.0-rc.0

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

@@ -134,6 +134,23 @@
       ],
       "references": []
     },
+    {
+      "name": "ui5-bar",
+      "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\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/Bar.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **startContent** - Defines the content at the start of the bar.\n- **default** - Defines the content in the middle of the bar.\n- **endContent** - Defines the content at the end of the bar.\n\n### **CSS Parts:**\n - **bar** - Used to style the wrapper of the content of the component",
+      "attributes": [
+        {
+          "name": "design",
+          "description": "Defines the component's design.",
+          "values": [
+            { "name": "Header" },
+            { "name": "Subheader" },
+            { "name": "Footer" },
+            { "name": "FloatingFooter" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "ui5-breadcrumbs",
       "description": "### Overview\nEnables users to navigate between items by providing a list of links to previous steps in the user's navigation path.\nIt helps the user to be aware of their location within the application and allows faster navigation.\n\nThe last three steps can be accessed as links directly, while the remaining links prior to them are available\nin a drop-down menu.\n\nYou can choose the type of separator to be used from a number of predefined options.\n\n### Keyboard Handling\nThe `ui5-breadcrumbs` provides advanced keyboard handling.\n\n- [F4], [Alt] + [Up], [Alt] + [Down], [Space], or [Enter] - If the dropdown arrow is focused - opens/closes the drop-down.\n- [Space],[Enter] - Activates the focused item and triggers the `item-click` event.\n- [Escape] - Closes the drop-down.\n- [Left] - If the drop-down is closed - navigates one item to the left.\n- [Right] - If the drop-down is closed - navigates one item to the right.\n- [Up] - If the drop-down is open - moves focus to the next item.\n- [Down] - If the drop-down is open - moves focus to the previous item.\n- [Home] - Navigates to the first item.\n- [End] - Navigates to the last item.\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fires when a `BreadcrumbsItem` is clicked.\n\n**Note:** You can prevent browser location change by calling `event.preventDefault()`.\n\n### **Slots:**\n - **default** - Defines the component items.\n\n**Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.",
@@ -144,7 +161,7 @@
           "values": [{ "name": "Standard" }, { "name": "NoCurrentPage" }]
         },
         {
-          "name": "separator-style",
+          "name": "separators",
           "description": "Determines the visual style of the separator between the breadcrumb items.",
           "values": [
             { "name": "Slash" },
@@ -192,11 +209,7 @@
         {
           "name": "size",
           "description": "Defines the size of the component.",
-          "values": [
-            { "name": "Small" },
-            { "name": "Medium" },
-            { "name": "Large" }
-          ]
+          "values": [{ "name": "S" }, { "name": "M" }, { "name": "L" }]
         },
         {
           "name": "active",
@@ -286,7 +299,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`selected-dates-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 - **selected-dates-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`.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.",
       "attributes": [
         {
           "name": "selection-mode",
@@ -463,7 +476,7 @@
     },
     {
       "name": "ui5-card",
-      "description": "### Overview\n\nThe `ui5-card` is a component that represents information in the form of a\ntile with separate header and content areas.\nThe content area of a `ui5-card` can be arbitrary HTML content.\nThe header can be used through slot `header`. For which there is a `ui5-card-header` component to achieve the card look and feel.\n\nNote: We recommend the usage of `ui5-card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Card\";`\n\n`import \"@ui5/webcomponents/dist/CardHeader.js\";` (for `ui5-card-header`)\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the component.\n- **header** - Defines the header of the component.\n\n**Note:** Use `ui5-card-header` for the intended design.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the card component\n- **content** - Used to style the content of the card",
+      "description": "### Overview\n\nThe `ui5-card` is a component that represents information in the form of a\ntile with separate header and content areas.\nThe content area of a `ui5-card` can be arbitrary HTML content.\nThe header can be used through slot `header`. For which there is a `ui5-card-header` component to achieve the card look and feel.\n\nNote: We recommend the usage of `ui5-card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Card.js\";`\n\n`import \"@ui5/webcomponents/dist/CardHeader.js\";` (for `ui5-card-header`)\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the component.\n- **header** - Defines the header of the component.\n\n**Note:** Use `ui5-card-header` for the intended design.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the card component\n- **content** - Used to style the content of the card",
       "attributes": [
         {
           "name": "accessible-name",
@@ -480,7 +493,7 @@
     },
     {
       "name": "ui5-card-header",
-      "description": "### Overview\n\nThe `ui5-card-header` is a component, meant to be used as a header of the `ui5-card` component.\nIt displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `status`\nand two slots: `avatar` and `action`.\n\n### Keyboard handling\nIn case you enable `interactive` property, you can press the `ui5-card-header` by Space and Enter keys.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CardHeader\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the component is activated by mouse/tap or by using the Enter or Space key.\n\n**Note:** The event would be fired only if the `interactive` property is set to true.\n\n### **Slots:**\n - **avatar** - Defines an avatar image, displayed in the left most part of the header.\n- **action** - Defines an action, displayed in the right most part of the header.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the CardHeader\n- **title** - Used to style the title of the CardHeader\n- **subtitle** - Used to style the subtitle of the CardHeader\n- **status** - Used to style the status of the CardHeader",
+      "description": "### Overview\n\nThe `ui5-card-header` is a component, meant to be used as a header of the `ui5-card` component.\nIt displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `additionalText`\nand two slots: `avatar` and `action`.\n\n### Keyboard handling\nIn case you enable `interactive` property, you can press the `ui5-card-header` by Space and Enter keys.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CardHeader\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the component is activated by mouse/tap or by using the Enter or Space key.\n\n**Note:** The event would be fired only if the `interactive` property is set to true.\n\n### **Slots:**\n - **avatar** - Defines an avatar image, displayed in the left most part of the header.\n- **action** - Defines an action, displayed in the right most part of the header.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the CardHeader\n- **title** - Used to style the title of the CardHeader\n- **subtitle** - Used to style the subtitle of the CardHeader\n- **additional-text** - Used to style the additional text of the CardHeader",
       "attributes": [
         {
           "name": "title-text",
@@ -493,8 +506,8 @@
           "values": []
         },
         {
-          "name": "status",
-          "description": "Defines the status text.",
+          "name": "additional-text",
+          "description": "Defines the additional text.",
           "values": []
         },
         {
@@ -509,6 +522,16 @@
       "name": "ui5-carousel",
       "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.\n- on mobile - the user can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\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\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **navigate** - Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page-l`, `items-per-page-m` and `items-per-page-s` properties.\n\n### **Methods:**\n - **navigateTo(itemIndex: _number_): _void_** - Changes the currently displayed page.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component",
       "attributes": [
+        {
+          "name": "accessible-name",
+          "description": "Defines the accessible name of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-name-ref",
+          "description": "Defines the IDs of the elements that label the input.",
+          "values": []
+        },
         {
           "name": "cyclic",
           "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.",
@@ -540,7 +563,7 @@
           "values": []
         },
         {
-          "name": "page-indicator-style",
+          "name": "page-indicator-type",
           "description": "Defines the style of the page indicator.\nAvailable options are:\n\n- `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)",
           "values": [{ "name": "Default" }, { "name": "Numeric" }]
         },
@@ -665,7 +688,7 @@
     },
     {
       "name": "ui5-color-palette-popover",
-      "description": "### Overview\nRepresents a predefined range of colors for easier selection.\n\nOverview\nThe ColorPalettePopover provides the users with a slot to predefine colors.\n\nYou can customize them with the use of the colors property. You can specify a defaultColor and display a \"Default color\" button for the user to choose directly.\nYou can display a \"More colors...\" button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.\n\n### Usage\n\nThe palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.\n\nFor the `ui5-color-palette-popover`\n### ES6 Module Import\n\n`import @ui5/webcomponents/dist/ColorPalettePopover.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fired when the user selects a color.\n- **close** - Fired when the `ui5-color-palette-popover` is closed due to user interaction.\n\n### **Methods:**\n - **showAt(opener: _HTMLElement_): _void_** - Shows the ColorPalettePopover.\n- **openPopover(opener: _HTMLElement_): _void_** - Shows the ColorPalettePopover.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+      "description": "### Overview\nRepresents a predefined range of colors for easier selection.\n\nOverview\nThe ColorPalettePopover provides the users with a slot to predefine colors.\n\nYou can customize them with the use of the colors property. You can specify a defaultColor and display a \"Default color\" button for the user to choose directly.\nYou can display a \"More colors...\" button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.\n\n### Usage\n\nThe palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.\n\nFor the `ui5-color-palette-popover`\n### ES6 Module Import\n\n`import @ui5/webcomponents/dist/ColorPalettePopover.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fired when the user selects a color.\n- **close** - Fired when the `ui5-color-palette-popover` is closed due to user interaction.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
       "attributes": [
         {
           "name": "show-recent-colors",
@@ -705,7 +728,7 @@
       "description": "### Overview\nThe `ui5-color-picker` allows users to choose any color and provides different input options for selecting colors.\n\n### Usage\n\n#### When to use\nUse the color picker if:\n\n-  users need to select any color freely.\n\n#### When not to use\n\n-  Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ColorPicker.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the the selected color is changed",
       "attributes": [
         {
-          "name": "color",
+          "name": "value",
           "description": "Defines the currently selected color of the component.\n\n**Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.",
           "values": []
         }
@@ -1614,7 +1637,7 @@
     },
     {
       "name": "ui5-list",
-      "description": "### Overview\n\nThe `ui5-list` component allows displaying a list of items, advanced keyboard\nhandling support for navigating between items, and predefined modes to improve the development efficiency.\n\nThe `ui5-list` is a container for the available list items:\n\n- `ui5-li`\n- `ui5-li-custom`\n- `ui5-li-groupheader`\n\nTo benefit from the built-in selection mechanism, you can use the available\nselection modes, such as\n`SingleSelect`, `MultiSelect` and `Delete`.\n\nAdditionally, the `ui5-list` provides header, footer, and customization for the list item separators.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete),\nwhen the `mode` property is in use:\n\n- [Space] - Select an item (if `type` is 'Active') when `mode` is selection\n- [Delete] - Delete an item if `mode` property is `Delete`\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/List.js\";`\n\n`import \"@ui5/webcomponents/dist/StandardListItem.js\";` (for `ui5-li`)\n\n`import \"@ui5/webcomponents/dist/CustomListItem.js\";` (for `ui5-li-custom`)\n\n`import \"@ui5/webcomponents/dist/GroupHeaderListItem.js\";` (for `ui5-li-groupheader`)\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n- **item-close** - Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.\n- **item-toggle** - Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).\n- **item-delete** - Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `mode` property is set to `Delete`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `SingleSelect`, `SingleSelectBegin`, `SingleSelectEnd` and `MultiSelect` modes.\n- **load-more** - Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-groupheader` for the intended design.\n- **header** - Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.",
+      "description": "### Overview\n\nThe `ui5-list` component allows displaying a list of items, advanced keyboard\nhandling support for navigating between items, and predefined modes to improve the development efficiency.\n\nThe `ui5-list` is a container for the available list items:\n\n- `ui5-li`\n- `ui5-li-custom`\n- `ui5-li-groupheader`\n\nTo benefit from the built-in selection mechanism, you can use the available\nselection modes, such as\n`Single`, `Multiple` and `Delete`.\n\nAdditionally, the `ui5-list` provides header, footer, and customization for the list item separators.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete),\nwhen the `selectionMode` property is in use:\n\n- [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection\n- [Delete] - Delete an item if `selectionMode` property is `Delete`\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/List.js\";`\n\n`import \"@ui5/webcomponents/dist/StandardListItem.js\";` (for `ui5-li`)\n\n`import \"@ui5/webcomponents/dist/CustomListItem.js\";` (for `ui5-li-custom`)\n\n`import \"@ui5/webcomponents/dist/GroupHeaderListItem.js\";` (for `ui5-li-groupheader`)\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n- **item-close** - Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.\n- **item-toggle** - Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).\n- **item-delete** - Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.\n- **load-more** - Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-groupheader` for the intended design.\n- **header** - Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.",
       "attributes": [
         {
           "name": "header-text",
@@ -1632,15 +1655,15 @@
           "values": []
         },
         {
-          "name": "mode",
-          "description": "Defines the mode of the component.",
+          "name": "selection-mode",
+          "description": "Defines the selection mode of the component.",
           "values": [
             { "name": "None" },
-            { "name": "SingleSelect" },
-            { "name": "SingleSelectBegin" },
-            { "name": "SingleSelectEnd" },
-            { "name": "SingleSelectAuto" },
-            { "name": "MultiSelect" },
+            { "name": "Single" },
+            { "name": "Multiple" },
+            { "name": "SingleStart" },
+            { "name": "SingleEnd" },
+            { "name": "SingleAuto" },
             { "name": "Delete" }
           ]
         },
@@ -1669,13 +1692,13 @@
           "values": []
         },
         {
-          "name": "busy",
+          "name": "loading",
           "description": "Defines if the component would display a loading indicator over the list.",
           "values": []
         },
         {
-          "name": "busy-delay",
-          "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
+          "name": "loading-delay",
+          "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
           "values": []
         },
         {
@@ -2093,11 +2116,6 @@
           "description": "Defines the selected state of the component.",
           "values": []
         },
-        {
-          "name": "disabled",
-          "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is hidden.",
-          "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).",
@@ -2184,21 +2202,21 @@
           "values": []
         },
         {
-          "name": "placement-type",
+          "name": "placement",
           "description": "Determines on which side the component is placed at.",
           "values": [
             { "name": "Top" },
             { "name": "Bottom" },
-            { "name": "Left" },
-            { "name": "Right" }
+            { "name": "Start" },
+            { "name": "End" }
           ]
         },
         {
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of the component.",
           "values": [
-            { "name": "Left" },
-            { "name": "Right" },
+            { "name": "Start" },
+            { "name": "End" },
             { "name": "Center" },
             { "name": "Stretch" }
           ]
@@ -2325,11 +2343,6 @@
           "description": "Defines the accessible ARIA name of the component.",
           "values": []
         },
-        {
-          "name": "disabled",
-          "description": "Defines whether component is in disabled state.",
-          "values": []
-        },
         {
           "name": "hide-value",
           "description": "Defines whether the component value is shown.",
@@ -2541,21 +2554,21 @@
           "values": []
         },
         {
-          "name": "placement-type",
+          "name": "placement",
           "description": "Determines on which side the component is placed at.",
           "values": [
             { "name": "Top" },
             { "name": "Bottom" },
-            { "name": "Left" },
-            { "name": "Right" }
+            { "name": "Start" },
+            { "name": "End" }
           ]
         },
         {
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of the component.",
           "values": [
-            { "name": "Left" },
-            { "name": "Right" },
+            { "name": "Start" },
+            { "name": "End" },
             { "name": "Center" },
             { "name": "Stretch" }
           ]
@@ -3334,7 +3347,7 @@
     },
     {
       "name": "ui5-tab",
-      "description": "The `ui5-tab` represents a selectable item inside a `ui5-tabcontainer`.\nIt defines both the item in the tab strip (top part of the `ui5-tabcontainer`) and the\ncontent that is presented to the user once the tab is selected.\n\n\n---\n\n\n\n\n### **Methods:**\n - **getTabInStripDomRef(): _ITab | null_** - Returns the DOM reference of the tab that is placed in the header.\n\n**Note:** Tabs, placed in the `subTabs` slot of other tabs are not shown in the header. Calling this method on such tabs will return `null`.\n\n**Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.\n\n### **Slots:**\n - **default** - Holds the content associated with this tab.\n- **subTabs** - Defines hierarchies with nested sub tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.",
+      "description": "The `ui5-tab` represents a selectable item inside a `ui5-tabcontainer`.\nIt defines both the item in the tab strip (top part of the `ui5-tabcontainer`) and the\ncontent that is presented to the user once the tab is selected.\n\n\n---\n\n\n\n\n### **Methods:**\n - **getDomRefInStrip(): _HTMLElement | undefined_** - Returns the DOM reference of the tab that is placed in the header.\n\n**Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `undefined`.\n\n**Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.\n\n### **Slots:**\n - **default** - Holds the content associated with this tab.\n- **items** - Defines hierarchies with nested sub tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.",
       "attributes": [
         {
           "name": "text",
@@ -3379,28 +3392,18 @@
       "name": "ui5-tabcontainer",
       "description": "### Overview\n\nThe `ui5-tabcontainer` represents a collection of tabs with associated content.\nNavigation through the tabs changes the content display of the currently active content area.\nA tab can be labeled with text only, or icons with text.\n\n### Structure\n\nThe `ui5-tabcontainer` can hold two types of entities:\n\n- `ui5-tab` - contains all the information on an item (text and icon)\n- `ui5-tab-separator` - used to separate tabs with a line\n\n### Hierarchies\nMultiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations\nto indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split\nto allow the user to display the content or alternatively to expand / collapse the list of sub tabs.\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/TabContainer.js\";`\n\n`import \"@ui5/webcomponents/dist/Tab.js\";` (for `ui5-tab`)\n\n`import \"@ui5/webcomponents/dist/TabSeparator.js\";` (for `ui5-tab-separator`)\n\n\n---\n\n\n\n\n### **Events:**\n - **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.\n- **overflowButton** - Defines the button which will open the overflow menu. If nothing is provided to this slot,\nthe default button will be used.\n- **startOverflowButton** - Defines the button which will open the start overflow menu if available. If nothing is provided to this slot,\nthe default button will be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **tabstrip** - Used to style the tabstrip of the component",
       "attributes": [
-        {
-          "name": "fixed",
-          "description": "Defines whether the tabs are in a fixed state that is not\nexpandable/collapsible by user interaction.",
-          "values": []
-        },
         {
           "name": "collapsed",
           "description": "Defines whether the tab content is collapsed.",
           "values": []
         },
-        {
-          "name": "show-overflow",
-          "description": "Defines whether the overflow select list is displayed.\n\nThe overflow select list represents a list, where all tabs are displayed\nso that it's easier for the user to select a specific tab.",
-          "values": []
-        },
         {
           "name": "tab-layout",
           "description": "Defines the alignment of the content and the `additionalText` of a tab.\n\n**Note:**\nThe content and the `additionalText` would be displayed vertically by default,\nbut when set to `Inline`, they would be displayed horizontally.",
           "values": [{ "name": "Standard" }, { "name": "Inline" }]
         },
         {
-          "name": "tabs-overflow-mode",
+          "name": "overflow-mode",
           "description": "Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.\nAll other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n**Note:**\nOnly one overflow at the end would be displayed by default,\nbut when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.",
           "values": [{ "name": "End" }, { "name": "StartAndEnd" }]
         },
@@ -3432,7 +3435,7 @@
     },
     {
       "name": "ui5-tab-separator",
-      "description": "The `ui5-tab-separator` represents a vertical line to separate tabs inside a `ui5-tabcontainer`.\n\n\n---\n\n\n\n\n### **Methods:**\n - **getTabInStripDomRef(): _ITab | null_** - Returns the DOM reference of the separator that is placed in the header.\n\n**Note:** Tabs and separators, placed in the `subTabs` slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return `null`.",
+      "description": "The `ui5-tab-separator` represents a vertical line to separate tabs inside a `ui5-tabcontainer`.\n\n\n---\n\n\n\n\n### **Methods:**\n - **getDomRefInStrip(): _HTMLElement | undefined_** - Returns the DOM reference of the separator that is placed in the header.\n\n**Note:** Separators, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such separators will return `undefined`.",
       "attributes": [],
       "references": []
     },
@@ -3652,7 +3655,7 @@
     },
     {
       "name": "ui5-time-picker",
-      "description": "### Overview\nThe `ui5-time-picker` component provides an input field with assigned clocks which are opened on user action.\nThe `ui5-time-picker` allows users to select a localized time using touch, mouse, or keyboard input.\nIt consists of two parts: the time input field and the clocks.\n\n### Usage\nThe user can enter a time by:\n\n- Using the clocks that are displayed in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).\nWhen the user directly triggers the clocks display, the actual time is displayed.\nFor the `ui5-time-picker`\n\n### Formatting\n\nIf a time is entered by typing it into\nthe input field, it must fit to the used time format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](http://unicode.org/reports/tr35/#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"HH:mm:ss\",\na valid value string is \"11:42:35\" and the same is displayed in the input.\n\n### Keyboard handling\n[F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.\n\nWhen closed:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n-\n\nWhen opened:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n- [A] or [P] - Selects AM or PM respectively.\n- [0]-[9] - Allows direct time selecting (hours/minutes/seconds).\n- [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TimePicker.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.\n- **input** - Fired when the value of the `ui5-time-picker` is changed at each key stroke.\n\n### **Methods:**\n - **openPicker(): _Promise<void>_** - Opens the picker.\n- **closePicker(): _Promise<void>_** - Closes the picker\n- **isOpen(): _boolean_** - Checks if the picker is open\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date and time\naccording to the `formatPattern` property of the TimePicker instance\n- **isValid(value: _string | undefined_): _boolean_** - Checks if a value is valid against the current `formatPattern` value.\n\n**Note:** an empty string is considered as valid value.",
+      "description": "### Overview\nThe `ui5-time-picker` component provides an input field with assigned clocks which are opened on user action.\nThe `ui5-time-picker` allows users to select a localized time using touch, mouse, or keyboard input.\nIt consists of two parts: the time input field and the clocks.\n\n### Usage\nThe user can enter a time by:\n\n- Using the clocks that are displayed in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).\nWhen the user directly triggers the clocks display, the actual time is displayed.\nFor the `ui5-time-picker`\n\n### Formatting\n\nIf a time is entered by typing it into\nthe input field, it must fit to the used time format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](http://unicode.org/reports/tr35/#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"HH:mm:ss\",\na valid value string is \"11:42:35\" and the same is displayed in the input.\n\n### Keyboard handling\n[F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.\n\nWhen closed:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n-\n\nWhen opened:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n- [A] or [P] - Selects AM or PM respectively.\n- [0]-[9] - Allows direct time selecting (hours/minutes/seconds).\n- [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TimePicker.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.\n- **input** - Fired when the value of the `ui5-time-picker` is changed at each key stroke.\n\n### **Methods:**\n - **openPicker(): _void_** - Opens the picker.\n- **closePicker(): _void_** - Closes the picker\n- **isOpen(): _boolean_** - Checks if the picker is open\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date and time\naccording to the `formatPattern` property of the TimePicker instance\n- **isValid(value: _string | undefined_): _boolean_** - Checks if a value is valid against the current `formatPattern` value.\n\n**Note:** an empty string is considered as valid value.",
       "attributes": [
         {
           "name": "placeholder",
@@ -3700,7 +3703,7 @@
     },
     {
       "name": "time-picker-base",
-      "description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.\n- **input** - Fired when the value of the `ui5-time-picker` is changed at each key stroke.\n\n### **Methods:**\n - **openPicker(): _Promise<void>_** - Opens the picker.\n- **closePicker(): _Promise<void>_** - Closes the picker\n- **isOpen(): _boolean_** - Checks if the picker is open\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date and time\naccording to the `formatPattern` property of the TimePicker instance\n- **isValid(value: _string | undefined_): _boolean_** - Checks if a value is valid against the current `formatPattern` value.\n\n**Note:** an empty string is considered as valid value.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the `ui5-time-picker`.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-time-picker` is in `Information`, `Warning` or `Error` value state.",
+      "description": "\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.\n- **input** - Fired when the value of the `ui5-time-picker` is changed at each key stroke.\n\n### **Methods:**\n - **openPicker(): _void_** - Opens the picker.\n- **closePicker(): _void_** - Closes the picker\n- **isOpen(): _boolean_** - Checks if the picker is open\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date and time\naccording to the `formatPattern` property of the TimePicker instance\n- **isValid(value: _string | undefined_): _boolean_** - Checks if a value is valid against the current `formatPattern` value.\n\n**Note:** an empty string is considered as valid value.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the `ui5-time-picker`.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-time-picker` is in `Information`, `Warning` or `Error` value state.",
       "attributes": [
         {
           "name": "value",
@@ -3879,12 +3882,12 @@
     },
     {
       "name": "ui5-toolbar",
-      "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- The control is not interactive, but can contain of interactive elements\n- [Tab] - iterates through elements\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`\n\n\n---\n\n\n\n\n### **Methods:**\n - **isOverflowOpen(): _Promise<boolean>_** - Returns if the overflow popup is open.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n \n  **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.",
+      "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- The control is not interactive, but can contain of interactive elements\n- [Tab] - iterates through elements\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`\n\n\n---\n\n\n\n\n### **Methods:**\n - **isOverflowOpen(): _boolean_** - Returns if the overflow popup is open.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n \n  **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.",
       "attributes": [
         {
           "name": "align-content",
           "description": "Indicated the direction in which the Toolbar items will be aligned.",
-          "values": [{ "name": "End" }, { "name": "Start" }]
+          "values": [{ "name": "Start" }, { "name": "End" }]
         },
         {
           "name": "accessible-name",
@@ -4102,18 +4105,18 @@
     },
     {
       "name": "ui5-tree",
-      "description": "### Overview\nThe `ui5-tree` component provides a tree structure for displaying data in a hierarchy.\n\n### Usage\n\n#### When to use:\n\n- To display hierarchically structured items.\n- To select one or more items out of a set of hierarchically structured items.\n\n#### When not to use:\n\n- To display items not hierarchically structured. In this case, use the List component.\n- To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.\n- The hierarchy turns out to have only two levels. In this case, use List with group items.\n\n### Keyboard Handling\n\nThe `ui5-tree` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- [Up] or [Down] - Navigates up and down the tree items that are currently visible.\n- [Right] - Drills down the tree by expanding the tree nodes.\n- [Left] - Goes up the tree and collapses the tree nodes.\n\nThe user can use the following keyboard shortcuts to perform selection,\nwhen the `mode` property is in use:\n\n- [Space] - Selects the currently focused item upon keyup.\n- [Enter]  - Selects the currently focused item upon keydown.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Tree.js\";`\n\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **item-toggle** - Fired when a tree item is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event object to suppress the event, if needed.\nThis may be handy for example if you want to dynamically load tree items upon the user expanding a node.\nEven if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item.\n- **item-mouseover** - Fired when the mouse cursor enters the tree item borders.\n- **item-mouseout** - Fired when the mouse cursor leaves the tree item borders.\n- **item-click** - Fired when a tree item is activated.\n- **item-delete** - Fired when the Delete button of any tree item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `mode` property is set to `Delete`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `SingleSelect`, `SingleSelectBegin`, `SingleSelectEnd` and `MultiSelect` modes.\n\n### **Methods:**\n - **walk(callback: _WalkCallback_): _void_** - Perform Depth-First-Search walk on the tree and run a callback on each node\n\n### **Slots:**\n - **default** - Defines the items of the component. Tree items may have other tree items as children.\n\n**Note:** Use `ui5-tree-item` for the intended design.\n- **header** - Defines the component header.\n\n**Note:** When the `header` slot is set, the\n`headerText` property is ignored.",
+      "description": "### Overview\nThe `ui5-tree` component provides a tree structure for displaying data in a hierarchy.\n\n### Usage\n\n#### When to use:\n\n- To display hierarchically structured items.\n- To select one or more items out of a set of hierarchically structured items.\n\n#### When not to use:\n\n- To display items not hierarchically structured. In this case, use the List component.\n- To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.\n- The hierarchy turns out to have only two levels. In this case, use List with group items.\n\n### Keyboard Handling\n\nThe `ui5-tree` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- [Up] or [Down] - Navigates up and down the tree items that are currently visible.\n- [Right] - Drills down the tree by expanding the tree nodes.\n- [Left] - Goes up the tree and collapses the tree nodes.\n\nThe user can use the following keyboard shortcuts to perform selection,\nwhen the `selectionMode` property is in use:\n\n- [Space] - Selects the currently focused item upon keyup.\n- [Enter]  - Selects the currently focused item upon keydown.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Tree.js\";`\n\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **item-toggle** - Fired when a tree item is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event object to suppress the event, if needed.\nThis may be handy for example if you want to dynamically load tree items upon the user expanding a node.\nEven if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item.\n- **item-mouseover** - Fired when the mouse cursor enters the tree item borders.\n- **item-mouseout** - Fired when the mouse cursor leaves the tree item borders.\n- **item-click** - Fired when a tree item is activated.\n- **item-delete** - Fired when the Delete button of any tree item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes.\n\n### **Methods:**\n - **walk(callback: _WalkCallback_): _void_** - Perform Depth-First-Search walk on the tree and run a callback on each node\n\n### **Slots:**\n - **default** - Defines the items of the component. Tree items may have other tree items as children.\n\n**Note:** Use `ui5-tree-item` for the intended design.\n- **header** - Defines the component header.\n\n**Note:** When the `header` slot is set, the\n`headerText` property is ignored.",
       "attributes": [
         {
-          "name": "mode",
-          "description": "Defines the mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.",
+          "name": "selection-mode",
+          "description": "Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.",
           "values": [
             { "name": "None" },
-            { "name": "SingleSelect" },
-            { "name": "SingleSelectBegin" },
-            { "name": "SingleSelectEnd" },
-            { "name": "SingleSelectAuto" },
-            { "name": "MultiSelect" },
+            { "name": "Single" },
+            { "name": "Multiple" },
+            { "name": "SingleStart" },
+            { "name": "SingleEnd" },
+            { "name": "SingleAuto" },
             { "name": "Delete" }
           ]
         },
@@ -4171,7 +4174,7 @@
         },
         {
           "name": "indeterminate",
-          "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `MultiSelect` mode.",
+          "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.",
           "values": []
         },
         {
@@ -4250,7 +4253,7 @@
         },
         {
           "name": "indeterminate",
-          "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `MultiSelect` mode.",
+          "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.",
           "values": []
         },
         {
@@ -4334,7 +4337,7 @@
         },
         {
           "name": "indeterminate",
-          "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `MultiSelect` mode.",
+          "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.",
           "values": []
         },
         {