@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

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

@@ -3,7 +3,7 @@
   "tags": [
     {
       "name": "ui5-avatar",
-      "description": "### Overview\n\nAn image-like component that has different display options for representing images and icons\nin different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to\nset a custom size.\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n- [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Avatar.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:\n- **badge** - Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, you can use the `ui5-tag` with `ui5-icon`\nin the corresponding `icon` slot, without text nodes.",
+      "description": "### Overview\n\nAn image-like component that has different display options for representing images and icons\nin different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to\nset a custom size.\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n- [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Avatar.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:\n- **badge** - Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, please use `ui5-badge` with `ui5-icon`\nin the corresponding `icon` slot, without text nodes.",
       "attributes": [
         {
           "name": "disabled",
@@ -94,18 +94,42 @@
       "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",
+      "name": "ui5-badge",
+      "description": "### Overview\n\nThe `ui5-badge` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Badge.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the user clicks on an interactive badge.\n\n**Note:** The event will be fired if the `interactive` property is `true`\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **icon** - Defines the icon to be displayed in the component.",
       "attributes": [
         {
           "name": "design",
-          "description": "Defines the component's design.",
+          "description": "Defines the design type of the component.",
           "values": [
-            { "name": "Header" },
-            { "name": "Subheader" },
-            { "name": "Footer" },
-            { "name": "FloatingFooter" }
+            { "name": "Set1" },
+            { "name": "Set2" },
+            { "name": "Set3" },
+            { "name": "Neutral" },
+            { "name": "Information" },
+            { "name": "Positive" },
+            { "name": "Negative" },
+            { "name": "Critical" }
           ]
+        },
+        {
+          "name": "color-scheme",
+          "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.\n\n**Note:** Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.",
+          "values": []
+        },
+        {
+          "name": "hide-state-icon",
+          "description": "Defines if the default state icon is shown.",
+          "values": []
+        },
+        {
+          "name": "interactive",
+          "description": "Defines if the component is interactive (focusable and pressable).\n\n**Note:** The badge cannot be `interactive`\nwhen `design` property is `BadgeDesign.Set3`",
+          "values": []
+        },
+        {
+          "name": "wrapping-type",
+          "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** For option \"Normal\" the text will wrap and the\nwords will not be broken based on hyphenation.",
+          "values": [{ "name": "None" }, { "name": "Normal" }]
         }
       ],
       "references": []
@@ -120,7 +144,7 @@
           "values": [{ "name": "Standard" }, { "name": "NoCurrentPage" }]
         },
         {
-          "name": "separators",
+          "name": "separator-style",
           "description": "Determines the visual style of the separator between the breadcrumb items.",
           "values": [
             { "name": "Slash" },
@@ -168,7 +192,11 @@
         {
           "name": "size",
           "description": "Defines the size of the component.",
-          "values": [{ "name": "S" }, { "name": "M" }, { "name": "L" }]
+          "values": [
+            { "name": "Small" },
+            { "name": "Medium" },
+            { "name": "Large" }
+          ]
         },
         {
           "name": "active",
@@ -196,9 +224,9 @@
           "name": "design",
           "description": "Defines the component design.",
           "values": [
-            { "name": "Default" },
             { "name": "Positive" },
             { "name": "Negative" },
+            { "name": "Default" },
             { "name": "Transparent" },
             { "name": "Emphasized" },
             { "name": "Attention" }
@@ -215,13 +243,13 @@
           "values": []
         },
         {
-          "name": "end-icon",
-          "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
+          "name": "icon-end",
+          "description": "Defines whether the icon should be displayed after the component text.",
           "values": []
         },
         {
           "name": "submits",
-          "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`",
+          "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** For the `submits` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`",
           "values": []
         },
         {
@@ -241,7 +269,7 @@
         },
         {
           "name": "type",
-          "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Defines whether the button has special form-related functionality.\n\n**Note:** For the `type` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`",
           "values": [
             { "name": "Button" },
             { "name": "Submit" },
@@ -250,7 +278,7 @@
         },
         {
           "name": "accessible-role",
-          "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
+          "description": "Describes the accessibility role of the button.\n\n**Note:** Use link role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
           "values": [{ "name": "Button" }, { "name": "Link" }]
         }
       ],
@@ -258,7 +286,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`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.",
       "attributes": [
         {
           "name": "selection-mode",
@@ -326,23 +354,6 @@
       ],
       "references": []
     },
-    {
-      "name": "ui5-date-range",
-      "description": "### Overview\n\nThe `ui5-date-range` component defines a range of dates to be used inside `ui5-calendar`\n\n\n---\n\n\n",
-      "attributes": [
-        {
-          "name": "start-value",
-          "description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
-          "values": []
-        },
-        {
-          "name": "end-value",
-          "description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "ui5-calendar-legend",
       "description": "### Overview\n\nThe `ui5-calendar-legend` component is designed for use within the `ui5-calendar` to display a legend.\nEach `ui5-calendar-legend-item` represents a unique date type, specifying its visual style\nand a corresponding textual label.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CalendarLegend.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the items of the component.",
@@ -383,9 +394,9 @@
           "name": "type",
           "description": "Defines the type of the Calendar Legend Item.",
           "values": [
+            { "name": "None" },
             { "name": "Today" },
             { "name": "Selected" },
-            { "name": "None" },
             { "name": "Working" },
             { "name": "NonWorking" },
             { "name": "Type01" },
@@ -452,7 +463,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.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",
+      "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",
       "attributes": [
         {
           "name": "accessible-name",
@@ -469,7 +480,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`, `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",
+      "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",
       "attributes": [
         {
           "name": "title-text",
@@ -482,8 +493,8 @@
           "values": []
         },
         {
-          "name": "additional-text",
-          "description": "Defines the additional text.",
+          "name": "status",
+          "description": "Defines the status text.",
           "values": []
         },
         {
@@ -496,7 +507,7 @@
     },
     {
       "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 shortcuts.\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` property.\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",
+      "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",
@@ -514,8 +525,18 @@
           "values": []
         },
         {
-          "name": "items-per-page",
-          "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.",
+          "name": "items-per-page-s",
+          "description": "Defines the number of items per page on small size (up to 640px). One item per page shown by default.",
+          "values": []
+        },
+        {
+          "name": "items-per-page-m",
+          "description": "Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.",
+          "values": []
+        },
+        {
+          "name": "items-per-page-l",
+          "description": "Defines the number of items per page on large size (more than 1024px). One item per page shown by default.",
           "values": []
         },
         {
@@ -529,7 +550,7 @@
           "values": []
         },
         {
-          "name": "page-indicator-type",
+          "name": "page-indicator-style",
           "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" }]
         },
@@ -614,11 +635,11 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -628,7 +649,7 @@
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
           "values": []
         }
       ],
@@ -654,7 +675,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### **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### **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.",
       "attributes": [
         {
           "name": "show-recent-colors",
@@ -683,7 +704,7 @@
         },
         {
           "name": "opener",
-          "description": "Defines the ID or DOM Reference of the element that the popover is shown at.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
+          "description": "Defines the ID or DOM Reference of the element that the popover is shown at.",
           "values": [{ "name": "HTMLElement" }]
         }
       ],
@@ -694,14 +715,9 @@
       "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": "value",
+          "name": "color",
           "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": []
-        },
-        {
-          "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
-          "values": []
         }
       ],
       "references": []
@@ -715,11 +731,6 @@
           "description": "Defines the value of the component.",
           "values": []
         },
-        {
-          "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
-          "values": []
-        },
         {
           "name": "no-typeahead",
           "description": "Defines whether the value will be autocompleted to match an item",
@@ -739,11 +750,11 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -822,11 +833,6 @@
       "name": "ui5-li-custom",
       "description": "A component to be used as custom list item within the `ui5-list`\nthe same way as the standard `ui5-li`.\n\nThe component accepts arbitrary HTML content to allow full customization.\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 content of the component.\n\n### **CSS Parts:**\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": "movable",
-          "description": "Defines whether the item is movable.",
-          "values": []
-        },
         {
           "name": "accessible-name",
           "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.",
@@ -854,13 +860,13 @@
         },
         {
           "name": "highlight",
-          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -917,7 +923,7 @@
     },
     {
       "name": "ui5-date-picker",
-      "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date 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 \"yyyy-MM-dd\",\na valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### 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/DatePicker.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Warning` or `Error` value state.",
+      "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date 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 \"yyyy-MM-dd\",\na valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### 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/DatePicker.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n- **closePicker(): _void_** - Closes the picker.\n- **openPicker(): _Promise<void>_** - Opens the picker.\n- **isOpen(): _boolean_** - Checks if the picker is open.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Warning` or `Error` value state.",
       "attributes": [
         {
           "name": "value",
@@ -928,11 +934,11 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -957,7 +963,7 @@
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
           "values": []
         },
         {
@@ -965,11 +971,6 @@
           "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.",
           "values": []
         },
-        {
-          "name": "open",
-          "description": "Defines the open or closed state of the popover.",
-          "values": []
-        },
         {
           "name": "accessible-name",
           "description": "Defines the aria-label attribute for the component.",
@@ -1027,7 +1028,7 @@
     },
     {
       "name": "ui5-daterange-picker",
-      "description": "### Overview\nThe DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n### Usage\nThe user can enter a date by:\nUsing the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).\nFor the `ui5-daterange-picker`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateRangePicker.js\";`\n\n### Keyboard Handling\nThe `ui5-daterange-picker` provides advanced keyboard handling.\n\nWhen the `ui5-daterange-picker` input field is focused the user can\nincrement or decrement respectively the range start or end date, depending on where the cursor is.\nThe following shortcuts are available:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n\n---\n\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 is changed at each key stroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance",
+      "description": "### Overview\nThe DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n### Usage\nThe user can enter a date by:\nUsing the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).\nFor the `ui5-daterange-picker`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateRangePicker.js\";`\n\n### Keyboard Handling\nThe `ui5-daterange-picker` provides advanced keyboard handling.\n\nWhen the `ui5-daterange-picker` input field is focused the user can\nincrement or decrement respectively the range start or end date, depending on where the cursor is.\nThe following shortcuts are available:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n\n---\n\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 is changed at each key stroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n- **closePicker(): _void_** - Closes the picker.\n- **openPicker(): _Promise<void>_** - Opens the picker.\n- **isOpen(): _boolean_** - Checks if the picker is open.",
       "attributes": [
         {
           "name": "delimiter",
@@ -1063,11 +1064,11 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -1092,7 +1093,7 @@
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
           "values": []
         },
         {
@@ -1100,11 +1101,6 @@
           "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.",
           "values": []
         },
-        {
-          "name": "open",
-          "description": "Defines the open or closed state of the popover.",
-          "values": []
-        },
         {
           "name": "accessible-name",
           "description": "Defines the aria-label attribute for the component.",
@@ -1157,7 +1153,7 @@
     },
     {
       "name": "ui5-datetime-picker",
-      "description": "### Overview\nThe `DateTimePicker` component alows users to select both date (day, month and year) and time (hours, minutes and seconds)\nand for the purpose it consists of input field and Date/Time picker.\n\n### Usage\n\nUse the `DateTimePicker` if you need a combined date and time input component.\nDon't use it if you want to use either date, or time value.\nIn this case, use the `DatePicker` or the `TimePicker` components instead.\n\nThe user can set date/time by:\n\n- using the calendar and the time selectors\n- typing in the input field\n\nProgrammatically, to set date/time for the `DateTimePicker`, use the `value` property\n\n### Formatting\n\nThe value entered by typing into the input field must fit to the used date/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](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\n**Example:** the following format `dd/MM/yyyy, hh:mm:ss aa`\ncorresponds the `13/04/2020, 03:16:16 AM` value.\n\nThe small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n\n**Example:** the following format `dd/MM/yyyy, HH:mm:ss`\ncorresponds the `13/04/2020, 15:16:16` value.\n\nThe capital 'H' indicates \"24\" hours format.\n\n**Note:** If the `formatPattern` does NOT include time,\nthe `DateTimePicker` will fallback to the default time format according to the locale.\n\n**Note:** If no placeholder is set to the `DateTimePicker`,\nthe current `formatPattern` is displayed as a placeholder.\nIf another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n\n**Note:** If the user input does NOT match the `formatPattern`,\nthe `DateTimePicker` makes an attempt to parse it based on the\nlocale settings.\n\n### Responsive behavior\n\nThe `DateTimePicker` is responsive and fully adapts to all devices.\nFor larger screens, such as tablet or desktop, it is displayed as a popover, while\non phone devices, it is displayed full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateTimePicker.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance",
+      "description": "### Overview\nThe `DateTimePicker` component alows users to select both date (day, month and year) and time (hours, minutes and seconds)\nand for the purpose it consists of input field and Date/Time picker.\n\n### Usage\n\nUse the `DateTimePicker` if you need a combined date and time input component.\nDon't use it if you want to use either date, or time value.\nIn this case, use the `DatePicker` or the `TimePicker` components instead.\n\nThe user can set date/time by:\n\n- using the calendar and the time selectors\n- typing in the input field\n\nProgrammatically, to set date/time for the `DateTimePicker`, use the `value` property\n\n### Formatting\n\nThe value entered by typing into the input field must fit to the used date/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](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\n**Example:** the following format `dd/MM/yyyy, hh:mm:ss aa`\ncorresponds the `13/04/2020, 03:16:16 AM` value.\n\nThe small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n\n**Example:** the following format `dd/MM/yyyy, HH:mm:ss`\ncorresponds the `13/04/2020, 15:16:16` value.\n\nThe capital 'H' indicates \"24\" hours format.\n\n**Note:** If the `formatPattern` does NOT include time,\nthe `DateTimePicker` will fallback to the default time format according to the locale.\n\n**Note:** If no placeholder is set to the `DateTimePicker`,\nthe current `formatPattern` is displayed as a placeholder.\nIf another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n\n**Note:** If the user input does NOT match the `formatPattern`,\nthe `DateTimePicker` makes an attempt to parse it based on the\nlocale settings.\n\n### Responsive behavior\n\nThe `DateTimePicker` is responsive and fully adapts to all devices.\nFor larger screens, such as tablet or desktop, it is displayed as a popover, while\non phone devices, it is displayed full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateTimePicker.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **openPicker(): _Promise<void>_** - Opens the picker.\n- **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n- **closePicker(): _void_** - Closes the picker.\n- **isOpen(): _boolean_** - Checks if the picker is open.",
       "attributes": [
         {
           "name": "value",
@@ -1168,11 +1164,11 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -1197,7 +1193,7 @@
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
           "values": []
         },
         {
@@ -1205,11 +1201,6 @@
           "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.",
           "values": []
         },
-        {
-          "name": "open",
-          "description": "Defines the open or closed state of the popover.",
-          "values": []
-        },
         {
           "name": "accessible-name",
           "description": "Defines the aria-label attribute for the component.",
@@ -1267,7 +1258,7 @@
     },
     {
       "name": "ui5-dialog",
-      "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that an user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the\n`ui5-dialog` on full screen.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n\n**Note:** We recommend placing popup-like components (`ui5-dialog` and `ui5-popover`)\noutside any other components. Preferably, the popup-like components should be placed\nin an upper level HTML element. Otherwise, in some cases the parent HTML elements can break\nthe position and/or z-index management of the popup-like components.\n\n**Note:** We don't recommend nesting popup-like components (`ui5-dialog`, `ui5-popover`).\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+      "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that an user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the\n`ui5-dialog` on full screen.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n\n**Note:** We recommend placing popup-like components (`ui5-dialog` and `ui5-popover`)\noutside any other components. Preferably, the popup-like components should be placed\nin an upper level HTML element. Otherwise, in some cases the parent HTML elements can break\nthe position and/or z-index management of the popup-like components.\n\n**Note:** We don't recommend nesting popup-like components (`ui5-dialog`, `ui5-popover`).\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **after-open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **after-close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **show(preventInitialFocus: _boolean_): _Promise<void>_** - Shows the dialog.\n- **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n- **isOpen(): _boolean_** - Tells if the component is opened\n- **close(): _void_** - Closes the popup.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
       "attributes": [
         {
           "name": "header-text",
@@ -1291,13 +1282,13 @@
         },
         {
           "name": "state",
-          "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.",
+          "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Error\"` and `\"Warning\"` state is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -1310,6 +1301,11 @@
           "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.",
           "values": []
         },
+        {
+          "name": "open",
+          "description": "Indicates if the element is open",
+          "values": []
+        },
         {
           "name": "accessible-name",
           "description": "Defines the accessible name of the component.",
@@ -1328,16 +1324,6 @@
             { "name": "Dialog" },
             { "name": "AlertDialog" }
           ]
-        },
-        {
-          "name": "prevent-initial-focus",
-          "description": "Indicates whether initial focus should be prevented.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Indicates if the element is open",
-          "values": [{ "name": "any" }]
         }
       ],
       "references": []
@@ -1368,7 +1354,7 @@
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
           "values": []
         },
         {
@@ -1385,11 +1371,11 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -1401,56 +1387,17 @@
       "references": []
     },
     {
-      "name": "ui5-form",
-      "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n ### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 2)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n\n\n---\n\n\n\n\n### **Slots:**\n - **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n- **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n### **CSS Parts:**\n - **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.\n- **column** - Used to style a single column of the form column layout.",
-      "attributes": [
-        {
-          "name": "layout",
-          "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 2 columns by default (up to 6 columns  are recommended)",
-          "values": []
-        },
-        {
-          "name": "label-span",
-          "description": "Defines the width proportion of the labels and fields of a FormItem by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.",
-          "values": []
-        },
-        {
-          "name": "header-text",
-          "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.",
-          "values": []
-        },
-        {
-          "name": "item-spacing",
-          "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"non-edit\" and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"non-edit\" mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"non-edit\" mode and the input fields in \"edit\" mode.",
-          "values": [{ "name": "Normal" }, { "name": "Large" }]
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "ui5-form-group",
-      "description": "### Overview\n\nThe FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component\nand it consists of FormItem (ui5-form-item) components.\n\nThe layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.\nStill, one can influence the layout via the FormGroup's `columnSpan` property,\nthat defines how many columns the group should expand to.\n\n### Usage\n\nТhe FormGroup (ui5-form-group) allows to split a Form into groups,\ne.g to group FormItems that logically belong together.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/FormGroup.js\";\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the items of the component.",
+      "name": "ui5-li-groupheader",
+      "description": "The `ui5-li-groupheader` is a special list item, used only to separate other list items into logical groups.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.",
       "attributes": [
         {
-          "name": "header-text",
-          "description": "Defines header text of the component.",
+          "name": "accessible-name",
+          "description": "Defines the text alternative of the component.\n\n**Note:** If not provided a default text alternative will be set, if present.",
           "values": []
         },
         {
-          "name": "column-span",
-          "description": "Defines column span of the component,\ne.g how many columns the group should span to.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "ui5-form-item",
-      "description": "### Overview\n\nThe FormItem (ui5-form-item) represents pair of a label and\none or more components (text or text fields), associated to it.\n\n### Usage\n\nThe FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/FormItem.js\";\n\n\n---\n\n\n\n\n### **Slots:**\n - **labelContent** - Defines the label of the component.\n- **default** - Defines the content of the component,\nassociated to `labelContent`.\n\n### **CSS Parts:**\n - **layout** - Used to style the parent element of the label and content parts.\n- **label** - Used to style the label part of the form item.\n- **content** - Used to style the content part of the form item.",
-      "attributes": [
-        {
-          "name": "column-span",
-          "description": "Defines the column span of the component,\ne.g how many columns the component should span to.\n\n**Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\nor the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\nA number bigger than the available columns won't take effect.",
+          "name": "selected",
+          "description": "Defines the selected state of the `ListItem`.",
           "values": []
         }
       ],
@@ -1458,22 +1405,27 @@
     },
     {
       "name": "ui5-icon",
-      "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n\n\n---\n\n\n\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
+      "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n\n\n---\n\n\n\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
       "attributes": [
         {
           "name": "design",
           "description": "Defines the component semantic design.",
           "values": [
-            { "name": "Default" },
+            { "name": "Neutral" },
+            { "name": "Information" },
             { "name": "Positive" },
             { "name": "Negative" },
             { "name": "Critical" },
-            { "name": "Information" },
+            { "name": "Default" },
             { "name": "Contrast" },
-            { "name": "Neutral" },
             { "name": "NonInteractive" }
           ]
         },
+        {
+          "name": "interactive",
+          "description": "Defines if the icon is interactive (focusable and pressable)",
+          "values": []
+        },
         {
           "name": "name",
           "description": "Defines the unique identifier (icon name) of the component.\n\nTo browse all available icons, see the\n[SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n[SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n[SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\nExample:\n`name='add'`, `name='delete'`, `name='employee'`.\n\n**Note:** To use the SAP Fiori Tools icons,\nyou need to set the `tnt` prefix in front of the icon's name.\n\nExample:\n`name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\n**Note:** To use the SAP Business Suite icons,\nyou need to set the `business-suite` prefix in front of the icon's name.\n\nExample:\n`name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.",
@@ -1490,20 +1442,16 @@
           "values": []
         },
         {
-          "name": "mode",
-          "description": "Defines the mode of the component.",
-          "values": [
-            { "name": "Image" },
-            { "name": "Decorative" },
-            { "name": "Interactive" }
-          ]
+          "name": "accessible-role",
+          "description": "Defines the accessibility role of the component.",
+          "values": []
         }
       ],
       "references": []
     },
     {
       "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\n### **Methods:**\n - **openPicker(): _void_** - Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open.\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.\n- [Up] - Focuses the previous matching item in the suggestion list.\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- **suggestion-item-select** - Fired when a suggestion item, that is displayed in the suggestion popup, is selected.\n- **suggestion-item-preview** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n\n### **Methods:**\n - **openPicker(): _void_** - Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open.\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.",
       "attributes": [
         {
           "name": "disabled",
@@ -1532,15 +1480,14 @@
         },
         {
           "name": "type",
-          "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.",
+          "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- Due to browser constraints, certain keyboard interactions may not be available\nfor the 'Number' and 'Email' types.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.",
           "values": [
             { "name": "Text" },
             { "name": "Email" },
             { "name": "Number" },
             { "name": "Password" },
             { "name": "Tel" },
-            { "name": "URL" },
-            { "name": "Search" }
+            { "name": "URL" }
           ]
         },
         {
@@ -1552,16 +1499,16 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
           "values": []
         },
         {
@@ -1588,6 +1535,11 @@
           "name": "show-clear-icon",
           "description": "Defines whether the clear icon of the input will be shown.",
           "values": []
+        },
+        {
+          "name": "preview-item",
+          "description": "The suggestion item on preview.",
+          "values": [{ "name": "any" }]
         }
       ],
       "references": []
@@ -1628,11 +1580,6 @@
           "description": "Defines whether the component is disabled.\n\n**Note:** When disabled, the click event cannot be triggered by the user.",
           "values": []
         },
-        {
-          "name": "tooltip",
-          "description": "Defines the tooltip of the component.",
-          "values": []
-        },
         {
           "name": "href",
           "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.",
@@ -1669,15 +1616,15 @@
         },
         {
           "name": "accessible-role",
-          "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.",
-          "values": [{ "name": "Button" }, { "name": "Link" }]
+          "description": "Defines the ARIA role of the component.\n\n**Note:** Use the \"button\" role in cases when navigation is not expected to occur and the href property is not defined.",
+          "values": []
         }
       ],
       "references": []
     },
     {
       "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-group`\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/ListItemGroup.js\";` (for `ui5-li-group`)\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- **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` 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`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.",
       "attributes": [
         {
           "name": "header-text",
@@ -1695,15 +1642,15 @@
           "values": []
         },
         {
-          "name": "selection-mode",
-          "description": "Defines the selection mode of the component.",
+          "name": "mode",
+          "description": "Defines the mode of the component.",
           "values": [
-            { "name": "Single" },
-            { "name": "Multiple" },
             { "name": "None" },
-            { "name": "SingleStart" },
-            { "name": "SingleEnd" },
-            { "name": "SingleAuto" },
+            { "name": "SingleSelect" },
+            { "name": "SingleSelectBegin" },
+            { "name": "SingleSelectEnd" },
+            { "name": "SingleSelectAuto" },
+            { "name": "MultiSelect" },
             { "name": "Delete" }
           ]
         },
@@ -1721,8 +1668,8 @@
           "name": "growing",
           "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.",
           "values": [
-            { "name": "Button" },
             { "name": "None" },
+            { "name": "Button" },
             { "name": "Scroll" }
           ]
         },
@@ -1732,13 +1679,13 @@
           "values": []
         },
         {
-          "name": "loading",
+          "name": "busy",
           "description": "Defines if the component would display a loading indicator over the list.",
           "values": []
         },
         {
-          "name": "loading-delay",
-          "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
+          "name": "busy-delay",
+          "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
           "values": []
         },
         {
@@ -1754,17 +1701,7 @@
         {
           "name": "accessible-role",
           "description": "Defines the accessible role of the component.",
-          "values": [
-            { "name": "List" },
-            { "name": "Menu" },
-            { "name": "Tree" },
-            { "name": "ListBox" }
-          ]
-        },
-        {
-          "name": "list-items",
-          "description": "Returns an array containing the list item instances without the groups in a flat structure.",
-          "values": [{ "name": "any" }]
+          "values": []
         }
       ],
       "references": []
@@ -1795,13 +1732,13 @@
         },
         {
           "name": "highlight",
-          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -1814,7 +1751,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",
+      "description": "A class to serve as a foundation\nfor the `ListItem` and `GroupHeaderListItem` classes.\n\n\n---\n\n\n",
       "attributes": [
         {
           "name": "selected",
@@ -1824,26 +1761,9 @@
       ],
       "references": []
     },
-    {
-      "name": "ui5-li-group",
-      "description": "### Overview\nThe `ui5-li-group` is a special list item, used only to create groups of list items.\n\nThis is the item to use inside a `ui5-list`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-li-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group",
-      "attributes": [
-        {
-          "name": "header-text",
-          "description": "Defines the header text of the <code>ui5-li-group</code>.",
-          "values": []
-        },
-        {
-          "name": "header-accessible-name",
-          "description": "Defines the accessible name of the header.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "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- **item-focus** - Fired when a menu item receives focus.\n\n### **Methods:**\n - **showAt(opener: _HTMLElement_): _Promise<void>_** - Shows the Menu near the opener element.\n- **close(): _void_** - Closes the Menu.\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### 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- **after-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- **after-close** - Fired after the menu is closed. **This event does not bubble.**\n- **item-focus** - Fired when a menu item receives focus.\n\n### **Methods:**\n - **showAt(opener: _HTMLElement_): _Promise<void>_** - Shows the Menu near the opener element.\n- **close(): _void_** - Closes the Menu.\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` for the intended design.",
       "attributes": [
         {
           "name": "header-text",
@@ -1856,18 +1776,18 @@
           "values": []
         },
         {
-          "name": "loading",
+          "name": "busy",
           "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.",
           "values": []
         },
         {
-          "name": "loading-delay",
-          "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..",
+          "name": "busy-delay",
+          "description": "Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover..",
           "values": []
         },
         {
           "name": "opener",
-          "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
+          "description": "Defines the ID or DOM Reference of the element that the menu is shown at",
           "values": [{ "name": "HTMLElement" }]
         }
       ],
@@ -1903,13 +1823,13 @@
           "values": []
         },
         {
-          "name": "loading",
-          "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\n**Note:** If set to `true` a `ui5-busy-indicator` component will be displayed into the related one to the current `ui5-menu-item` sub-menu popover.",
+          "name": "busy",
+          "description": "Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover.\n\n**Note:** If set to `true` a `ui5-busy-indicator` component will be displayed into the related one to the current `ui5-menu-item` sub-menu popover.",
           "values": []
         },
         {
-          "name": "loading-delay",
-          "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.",
+          "name": "busy-delay",
+          "description": "Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover.",
           "values": []
         },
         {
@@ -1927,28 +1847,21 @@
     },
     {
       "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 enables the embedding of app-related messages.\nIt displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning 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).",
       "attributes": [
         {
           "name": "design",
           "description": "Defines the component type.",
           "values": [
+            { "name": "Information" },
             { "name": "Positive" },
             { "name": "Negative" },
-            { "name": "Critical" },
-            { "name": "Information" },
-            { "name": "ColorSet1" },
-            { "name": "ColorSet2" }
+            { "name": "Warning" }
           ]
         },
-        {
-          "name": "color-scheme",
-          "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.",
-          "values": []
-        },
         {
           "name": "hide-icon",
-          "description": "Defines whether the MessageStrip will show an icon in the beginning.\nYou can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\n * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.",
+          "description": "Defines whether the MessageStrip will show an icon in the beginning.\nYou can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.",
           "values": []
         },
         {
@@ -1968,11 +1881,6 @@
           "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
           "values": []
         },
-        {
-          "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.",
-          "values": []
-        },
         {
           "name": "no-typeahead",
           "description": "Defines whether the value will be autcompleted to match an item",
@@ -1984,7 +1892,7 @@
           "values": []
         },
         {
-          "name": "no-validation",
+          "name": "allow-custom-values",
           "description": "Defines if the user input will be prevented, if no matching item has been found",
           "values": []
         },
@@ -1997,11 +1905,11 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -2088,18 +1996,13 @@
     },
     {
       "name": "ui5-multi-input",
-      "description": "### Overview\nA `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.\n\nUser can choose interaction for creating tokens.\nFiori Guidelines say that user should create tokens when:\n\n- Type a value in the input and press enter or focus out the input field (`change` event is fired)\n- Move between suggestion items (`selection-change` event is fired)\n- Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiInput.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **value-help-trigger** - Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.\n- **token-delete** - Fired when a token is about to be deleted.\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\n### **Methods:**\n - **openPicker(): _void_** - Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open.\n\n### **Slots:**\n - **tokens** - Defines the component tokens.",
+      "description": "### Overview\nA `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.\n\nUser can choose interaction for creating tokens.\nFiori Guidelines say that user should create tokens when:\n\n- Type a value in the input and press enter or focus out the input field (`change` event is fired)\n- Select a value from the suggestion list (`suggestion-item-select` event is fired)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiInput.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **value-help-trigger** - Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.\n- **token-delete** - Fired when a token is about to be deleted.\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- **suggestion-item-select** - Fired when a suggestion item, that is displayed in the suggestion popup, is selected.\n- **suggestion-item-preview** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n\n### **Methods:**\n - **openPicker(): _void_** - Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open.\n\n### **Slots:**\n - **tokens** - Defines the component tokens.",
       "attributes": [
         {
           "name": "show-value-help-icon",
           "description": "Determines whether a value help icon will be visualized in the end of the input.\nPressing the icon will fire `value-help-trigger` event.",
           "values": []
         },
-        {
-          "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.",
-          "values": []
-        },
         {
           "name": "disabled",
           "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
@@ -2127,15 +2030,14 @@
         },
         {
           "name": "type",
-          "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.",
+          "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- Due to browser constraints, certain keyboard interactions may not be available\nfor the 'Number' and 'Email' types.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.",
           "values": [
             { "name": "Text" },
             { "name": "Email" },
             { "name": "Number" },
             { "name": "Password" },
             { "name": "Tel" },
-            { "name": "URL" },
-            { "name": "Search" }
+            { "name": "URL" }
           ]
         },
         {
@@ -2147,13 +2049,18 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
+        {
+          "name": "name",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
+          "values": []
+        },
         {
           "name": "show-suggestions",
           "description": "Defines whether the component should show suggestions, if such are present.\n\n**Note:** You need to import the `InputSuggestions` module\nfrom `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.",
@@ -2178,6 +2085,11 @@
           "name": "show-clear-icon",
           "description": "Defines whether the clear icon of the input will be shown.",
           "values": []
+        },
+        {
+          "name": "preview-item",
+          "description": "The suggestion item on preview.",
+          "values": [{ "name": "any" }]
         }
       ],
       "references": []
@@ -2192,8 +2104,8 @@
           "values": []
         },
         {
-          "name": "tooltip",
-          "description": "Defines the text of the tooltip that would be displayed for the option component.",
+          "name": "disabled",
+          "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is hidden.",
           "values": []
         },
         {
@@ -2274,7 +2186,7 @@
     },
     {
       "name": "ui5-popover",
-      "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`\n\n**Note: ** We recommend placing popup-like components (`ui5-dialog` and `ui5-popover`)\noutside any other components. Preferably, the popup-like components should be placed\nin an upper level HTML element. Otherwise, in some cases the parent HTML elements can break\nthe position and/or z-index management of the popup-like components.\n\n**Note:** We don't recommend nesting popup-like components (`ui5-dialog`, `ui5-popover`).\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+      "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`\n\n**Note: ** We recommend placing popup-like components (`ui5-dialog` and `ui5-popover`)\noutside any other components. Preferably, the popup-like components should be placed\nin an upper level HTML element. Otherwise, in some cases the parent HTML elements can break\nthe position and/or z-index management of the popup-like components.\n\n**Note:** We don't recommend nesting popup-like components (`ui5-dialog`, `ui5-popover`).\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **after-open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **after-close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **showAt(opener: _HTMLElement_, preventInitialFocus: _boolean_): _Promise<void>_** - Shows the popover.\n- **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n- **isOpen(): _boolean_** - Tells if the component is opened\n- **close(): _void_** - Closes the popup.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
       "attributes": [
         {
           "name": "header-text",
@@ -2282,21 +2194,21 @@
           "values": []
         },
         {
-          "name": "placement",
+          "name": "placement-type",
           "description": "Determines on which side the component is placed at.",
           "values": [
             { "name": "Top" },
             { "name": "Bottom" },
-            { "name": "Start" },
-            { "name": "End" }
+            { "name": "Left" },
+            { "name": "Right" }
           ]
         },
         {
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of the component.",
           "values": [
-            { "name": "Start" },
-            { "name": "End" },
+            { "name": "Left" },
+            { "name": "Right" },
             { "name": "Center" },
             { "name": "Stretch" }
           ]
@@ -2316,6 +2228,11 @@
           "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.",
           "values": []
         },
+        {
+          "name": "hide-backdrop",
+          "description": "Defines whether the block layer will be shown if modal property is set to true.",
+          "values": []
+        },
         {
           "name": "hide-arrow",
           "description": "Determines whether the component arrow is hidden.",
@@ -2328,8 +2245,8 @@
         },
         {
           "name": "opener",
-          "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
-          "values": [{ "name": "any" }]
+          "description": "Defines the ID or DOM Reference of the element that the popover is shown at",
+          "values": [{ "name": "HTMLElement" }]
         },
         {
           "name": "initial-focus",
@@ -2342,9 +2259,14 @@
           "values": []
         },
         {
-          "name": "accessible-name",
-          "description": "Defines the accessible name of the component.",
-          "values": []
+          "name": "open",
+          "description": "Indicates if the element is open",
+          "values": []
+        },
+        {
+          "name": "accessible-name",
+          "description": "Defines the accessible name of the component.",
+          "values": []
         },
         {
           "name": "accessible-name-ref",
@@ -2359,23 +2281,13 @@
             { "name": "Dialog" },
             { "name": "AlertDialog" }
           ]
-        },
-        {
-          "name": "prevent-initial-focus",
-          "description": "Indicates whether initial focus should be prevented.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Indicates if the element is open",
-          "values": [{ "name": "any" }]
         }
       ],
       "references": []
     },
     {
       "name": "popup",
-      "description": "### Overview\nBase class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components, it is highly recommended that you extend\nat least Popup in order to have consistency with other popups in terms of modal behavior and z-index management.\n\n1. The Popup class handles modality:\n - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not\n - Derivatives may call the \"blockPageScrolling\" and \"unblockPageScrolling\" static methods to temporarily remove scrollbars on the html element\n - Derivatives may call the \"openPopup\" and \"closePopup\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n 2. Provides blocking layer (relevant for modal popups only):\n  - It is in the static area\n  - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus:\n - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The Popup class automatically assigns \"z-index\"\n - Each time a popup is opened, it gets a higher than the previously opened popup z-index\n\n5. The template of this component exposes two inline partials you can override in derivatives:\n - beforeContent (upper part of the box, useful for header/title/close button)\n - afterContent (lower part, useful for footer/action buttons)\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.",
+      "description": "### Overview\nBase class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components, it is highly recommended that you extend\nat least Popup in order to have consistency with other popups in terms of modal behavior and z-index management.\n\n1. The Popup class handles modality:\n - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not\n - Derivatives may call the \"blockPageScrolling\" and \"unblockPageScrolling\" static methods to temporarily remove scrollbars on the html element\n - Derivatives may call the \"open\" and \"close\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n 2. Provides blocking layer (relevant for modal popups only):\n  - It is in the static area\n  - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus:\n - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The Popup class automatically assigns \"z-index\"\n - Each time a popup is opened, it gets a higher than the previously opened popup z-index\n\n5. The template of this component exposes two inline partials you can override in derivatives:\n - beforeContent (upper part of the box, useful for header/title/close button)\n - afterContent (lower part, useful for footer/action buttons)\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **after-open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **after-close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n- **isOpen(): _boolean_** - Tells if the component is opened\n- **close(): _void_** - Closes the popup.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.",
       "attributes": [
         {
           "name": "initial-focus",
@@ -2387,6 +2299,11 @@
           "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.",
           "values": []
         },
+        {
+          "name": "open",
+          "description": "Indicates if the element is open",
+          "values": []
+        },
         {
           "name": "accessible-name",
           "description": "Defines the accessible name of the component.",
@@ -2405,16 +2322,6 @@
             { "name": "Dialog" },
             { "name": "AlertDialog" }
           ]
-        },
-        {
-          "name": "prevent-initial-focus",
-          "description": "Indicates whether initial focus should be prevented.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Indicates if the element is open",
-          "values": [{ "name": "any" }]
         }
       ],
       "references": []
@@ -2428,6 +2335,11 @@
           "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.",
@@ -2447,11 +2359,11 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         }
       ],
@@ -2490,21 +2402,21 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\nRadio buttons with the same `name` will form a radio button group.\n\n**Note:** By this name the component will be identified upon submission in an HTML form.\n\n**Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.\n\n**Note:** Only one radio button can be selected per group.",
+          "description": "Defines the name of the component.\nRadio buttons with the same `name` will form a radio button group.\n\n**Note:**\nThe selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.\n\n**Note:**\nOnly one radio button can be selected per group.\n\n**Important:** For the `name` property to have effect when submitting forms, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form.",
           "values": []
         },
         {
           "name": "value",
-          "description": "Defines the form value of the component.\nWhen a form with a radio button group is submitted, the group's value\nwill be the value of the currently selected radio button.",
+          "description": "Defines the form value of the component.\nWhen a form with a radio button group is submitted, the group's value\nwill be the value of the currently selected radio button.\n\n**Important:** For the `value` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`",
           "values": []
         },
         {
@@ -2549,11 +2461,6 @@
           "description": "Defines the maximum value of the slider.",
           "values": []
         },
-        {
-          "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
-          "values": []
-        },
         {
           "name": "step",
           "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.",
@@ -2636,7 +2543,7 @@
     },
     {
       "name": "ui5-responsive-popover",
-      "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+      "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **after-open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **after-close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **showAt(opener: _HTMLElement_, preventInitialFocus: _boolean_): _Promise<void>_** - Shows popover on desktop and dialog on mobile.\n- **close(): _void_** - Closes the popover/dialog.\n- **isOpen(): _boolean_** - Tells if the responsive popover is open.\n- **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
       "attributes": [
         {
           "name": "header-text",
@@ -2644,21 +2551,21 @@
           "values": []
         },
         {
-          "name": "placement",
+          "name": "placement-type",
           "description": "Determines on which side the component is placed at.",
           "values": [
             { "name": "Top" },
             { "name": "Bottom" },
-            { "name": "Start" },
-            { "name": "End" }
+            { "name": "Left" },
+            { "name": "Right" }
           ]
         },
         {
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of the component.",
           "values": [
-            { "name": "Start" },
-            { "name": "End" },
+            { "name": "Left" },
+            { "name": "Right" },
             { "name": "Center" },
             { "name": "Stretch" }
           ]
@@ -2678,6 +2585,11 @@
           "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.",
           "values": []
         },
+        {
+          "name": "hide-backdrop",
+          "description": "Defines whether the block layer will be shown if modal property is set to true.",
+          "values": []
+        },
         {
           "name": "hide-arrow",
           "description": "Determines whether the component arrow is hidden.",
@@ -2690,8 +2602,8 @@
         },
         {
           "name": "opener",
-          "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
-          "values": [{ "name": "any" }]
+          "description": "Defines the ID or DOM Reference of the element that the popover is shown at",
+          "values": [{ "name": "HTMLElement" }]
         },
         {
           "name": "initial-focus",
@@ -2703,6 +2615,11 @@
           "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.",
           "values": []
         },
+        {
+          "name": "open",
+          "description": "Indicates if the element is open",
+          "values": []
+        },
         {
           "name": "accessible-name",
           "description": "Defines the accessible name of the component.",
@@ -2721,23 +2638,13 @@
             { "name": "Dialog" },
             { "name": "AlertDialog" }
           ]
-        },
-        {
-          "name": "prevent-initial-focus",
-          "description": "Indicates whether initial focus should be prevented.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Indicates if the element is open",
-          "values": [{ "name": "any" }]
         }
       ],
       "references": []
     },
     {
       "name": "ui5-segmented-button",
-      "description": "### Overview\n\nThe `ui5-segmented-button` shows a group of items. When the user clicks or taps\none of the items, it stays in a pressed state. It automatically resizes the items\nto fit proportionally within the component. When no width is set, the component uses the available width.\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButton.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **selection-change** - Fired when the selected item changes.\n\n### **Slots:**\n - **default** - Defines the items of `ui5-segmented-button`.\n\n**Note:** Multiple items are allowed.\n\n**Note:** Use the `ui5-segmented-button-item` for the intended design.",
+      "description": "### Overview\n\nThe `ui5-segmented-button` shows a group of items. When the user clicks or taps\none of the items, it stays in a pressed state. It automatically resizes the items\nto fit proportionally within the component. When no width is set, the component uses the available width.\n\n**Note:** There can be just one selected `item` at a time.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButton.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **selection-change** - Fired when the selected item changes.\n\n### **Slots:**\n - **default** - Defines the items of `ui5-segmented-button`.\n\n**Note:** Multiple items are allowed.\n\n**Note:** Use the `ui5-segmented-button-item` for the intended design.",
       "attributes": [
         {
           "name": "accessible-name",
@@ -2745,9 +2652,14 @@
           "values": []
         },
         {
-          "name": "selection-mode",
+          "name": "mode",
           "description": "Defines the component selection mode.",
-          "values": [{ "name": "Single" }, { "name": "Multiple" }]
+          "values": [{ "name": "SingleSelect" }, { "name": "MultiSelect" }]
+        },
+        {
+          "name": "selected-item",
+          "description": "Currently selected item.",
+          "values": [{ "name": "any" }]
         },
         {
           "name": "selected-items",
@@ -2759,16 +2671,57 @@
     },
     {
       "name": "ui5-segmented-button-item",
-      "description": "### Overview\n\nUsers can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.\n\nClicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.\nThe item returns to its initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any\n`ui5-segmented-button-item`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButtonItem.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.",
+      "description": "### Overview\n\nUsers can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.\n\nClicking or tapping on a `ui5-segmented-button-item` changes its state to `pressed`.\nThe item returns to its initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any\n`ui5-segmented-button-item`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButtonItem.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.",
       "attributes": [
+        {
+          "name": "design",
+          "description": "**Note:** The property is inherited and not supported. If set, it won't take any effect.",
+          "values": [
+            { "name": "Positive" },
+            { "name": "Negative" },
+            { "name": "Default" },
+            { "name": "Transparent" },
+            { "name": "Emphasized" },
+            { "name": "Attention" }
+          ]
+        },
+        {
+          "name": "icon-end",
+          "description": "**Note:** The property is inherited and not supported. If set, it won't take any effect.",
+          "values": []
+        },
+        {
+          "name": "submits",
+          "description": "**Note:** The property is inherited and not supported. If set, it won't take any effect.",
+          "values": []
+        },
+        {
+          "name": "type",
+          "description": "**Note:** The property is inherited and not supported. If set, it won't take any effect.",
+          "values": [
+            { "name": "Button" },
+            { "name": "Submit" },
+            { "name": "Reset" }
+          ]
+        },
+        {
+          "name": "accessible-role",
+          "description": "**Note:** The property is inherited and not supported. If set, it won't take any effect.",
+          "values": [{ "name": "Button" }, { "name": "Link" }]
+        },
+        {
+          "name": "pressed",
+          "description": "Determines whether the component is displayed as pressed.",
+          "values": []
+        },
         {
           "name": "disabled",
-          "description": "Defines whether the component is disabled.\nA disabled component can't be selected or\nfocused, and it is not in the tab chain.",
+          "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
           "values": []
         },
         {
-          "name": "selected",
-          "description": "Determines whether the component is displayed as selected.",
+          "name": "icon",
+          "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
           "values": []
         },
         {
@@ -2785,11 +2738,6 @@
           "name": "accessible-name-ref",
           "description": "Receives id(or many ids) of the elements that label the component.",
           "values": []
-        },
-        {
-          "name": "icon",
-          "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
-          "values": []
         }
       ],
       "references": []
@@ -2800,7 +2748,7 @@
       "attributes": [
         {
           "name": "menu",
-          "description": "Defines a reference (ID or DOM element) of component's menu of options\nas alternative to define the select's dropdown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the menu.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.\n\n**Note:** Usage of `ui5-select-menu` is recommended.",
+          "description": "Defines a reference (ID or DOM element) of component's menu of options\nas alternative to define the select's dropdown.\n\n**Note:** Usage of `ui5-select-menu` is recommended.",
           "values": [{ "name": "HTMLElement" }]
         },
         {
@@ -2810,18 +2758,18 @@
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\nThe value of the component will be the value of the currently selected `ui5-option`.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the `ui5-select` so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
           "values": []
         },
         {
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -2897,11 +2845,6 @@
           "description": "**Note:** The property is inherited and not supported. If set, it won't take any effect.",
           "values": []
         },
-        {
-          "name": "movable",
-          "description": "Defines whether the item is movable.",
-          "values": []
-        },
         {
           "name": "accessible-name",
           "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.",
@@ -2914,13 +2857,13 @@
         },
         {
           "name": "highlight",
-          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -2950,11 +2893,6 @@
           "description": "Defines the maximum value of the slider.",
           "values": []
         },
-        {
-          "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
-          "values": []
-        },
         {
           "name": "step",
           "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.",
@@ -3002,11 +2940,6 @@
           "description": "Defines the maximum value of the slider.",
           "values": []
         },
-        {
-          "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
-          "values": []
-        },
         {
           "name": "step",
           "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.",
@@ -3048,9 +2981,9 @@
           "name": "type",
           "description": "Defines the type of the special date.",
           "values": [
+            { "name": "None" },
             { "name": "Today" },
             { "name": "Selected" },
-            { "name": "None" },
             { "name": "Working" },
             { "name": "NonWorking" },
             { "name": "Type01" },
@@ -3078,13 +3011,18 @@
     },
     {
       "name": "ui5-split-button",
-      "description": "### Overview\n\n`ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -\ndefault action and arrow action that can be activated by clicking or tapping, or by\npressing certain keyboard keys - `Space` or `Enter` for default action,\nand `Arrow Down` or `Arrow Up` for arrow action.\n\n### Usage\n\n`ui5-split-button` consists two separate buttons:\n\n- for the first one (default action) you can define some `text` or an `icon`, or both.\n- the second one (arrow action) contains only `slim-arrow-down` icon.\n\nYou can choose a `design` from a set of predefined types (the same as for ui5-button) that offer\ndifferent styling to correspond to the triggered action. Both text and arrow actions have the same design.\n\nYou can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled\n`ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes\nthe style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons\ncannot be pressed.\n\n### Keyboard Handling\n\n- `Space` or `Enter` - triggers the default action\n- `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.\n- `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action\nThere are separate events that are fired on activating of `ui5-split-button` parts:\n\n- `click` for the first button (default action)\n- `arrow-click` for the second button (arrow action)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SplitButton.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the user clicks on the default action.\n- **arrow-click** - Fired when the user clicks on the arrow action.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.",
+      "description": "### Overview\n\n`ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -\ndefault action and arrow action that can be activated by clicking or tapping, or by\npressing certain keyboard keys - `Space` or `Enter` for default action,\nand `Arrow Down` or `Arrow Up` for arrow action.\n\n### Usage\n\n`ui5-split-button` consists two separate buttons:\n\n- for the first one (default action) you can define some `text` or an `icon`, or both.\nAlso, it is possible to define different icon for active state of this button - `activeIcon`.\n- the second one (arrow action) contains only `slim-arrow-down` icon.\n\nYou can choose a `design` from a set of predefined types (the same as for ui5-button) that offer\ndifferent styling to correspond to the triggered action. Both text and arrow actions have the same design.\n\nYou can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled\n`ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes\nthe style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons\ncannot be pressed.\n\n### Keyboard Handling\n\n- `Space` or `Enter` - triggers the default action\n- `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.\n- `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action\nThere are separate events that are fired on activating of `ui5-split-button` parts:\n\n- `click` for the first button (default action)\n- `arrow-click` for the second button (arrow action)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SplitButton.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the user clicks on the default action.\n- **arrow-click** - Fired when the user clicks on the arrow action.\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.",
       "attributes": [
         {
           "name": "icon",
           "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\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": "active-icon",
+          "description": "Defines the icon to be displayed in active state as graphical element within the component.",
+          "values": []
+        },
         {
           "name": "active-arrow-button",
           "description": "Defines whether the arrow button should have the active state styles or not.",
@@ -3094,9 +3032,9 @@
           "name": "design",
           "description": "Defines the component design.",
           "values": [
-            { "name": "Default" },
             { "name": "Positive" },
             { "name": "Negative" },
+            { "name": "Default" },
             { "name": "Transparent" },
             { "name": "Emphasized" },
             { "name": "Attention" }
@@ -3146,20 +3084,15 @@
         },
         {
           "name": "additional-text-state",
-          "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
-        {
-          "name": "movable",
-          "description": "Defines whether the item is movable.",
-          "values": []
-        },
         {
           "name": "accessible-name",
           "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.",
@@ -3187,13 +3120,13 @@
         },
         {
           "name": "highlight",
-          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -3232,11 +3165,11 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -3261,7 +3194,7 @@
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
           "values": []
         },
         {
@@ -3342,11 +3275,11 @@
           "name": "additional-text-state",
           "description": "Defines the state of the `additionalText`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         }
       ],
@@ -3403,7 +3336,7 @@
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
           "values": []
         }
       ],
@@ -3411,7 +3344,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 - **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.",
+      "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.",
       "attributes": [
         {
           "name": "text",
@@ -3437,11 +3370,11 @@
           "name": "design",
           "description": "Defines the component's design color.\n\nThe design is applied to:\n\n- the component icon\n- the `text` when the component overflows\n- the tab selection line\n\nAvailable designs are: `\"Default\"`, `\"Neutral\"`, `\"Positive\"`, `\"Critical\"` and `\"Negative\"`.\n\n**Note:** The design depends on the current theme.",
           "values": [
-            { "name": "Default" },
+            { "name": "Neutral" },
             { "name": "Positive" },
             { "name": "Negative" },
             { "name": "Critical" },
-            { "name": "Neutral" }
+            { "name": "Default" }
           ]
         },
         {
@@ -3454,20 +3387,30 @@
     },
     {
       "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- **move-over** - Fired when element is being moved over the tab container.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n- **move** - Fired when element is moved to the tab container.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\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",
+      "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": "overflow-mode",
+          "name": "tabs-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" }]
         },
@@ -3499,63 +3442,136 @@
     },
     {
       "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 - **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`.",
+      "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`.",
       "attributes": [],
       "references": []
     },
     {
-      "name": "ui5-tag",
-      "description": "### Overview\n\nThe `ui5-tag` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tag.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **icon** - Defines the icon to be displayed in the component.",
+      "name": "ui5-table",
+      "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated and convenient functions for responsive table design.\nIt provides a comprehensive set of features for displaying and dealing with vast amounts of data.\n\nTo render the `Table` properly, the order of the `columns` should match with the\norder of the item `cells` in the `rows`.\n\nDesktop and tablet devices are supported.\nOn tablets, special consideration should be given to the number of visible columns\nand rows due to the limited performance of some devices.\n\n### Selection\nTo benefit from the selection mechanism of `ui5-table` component, you can use the available selection modes:\n`SingleSelect` and `MultiSelect`.\n\nIn additition to the used mode, you can also specify the `ui5-table-row` type choosing between\n`Active` or `Inactive`.\n\nIn `SingleSelect` mode, you can select both an `Active` and `Inactive` row via mouse or\nby pressing the `Space` or `Enter` keys.\n\nIn `MultiSelect` mode, you can select both an `Active` and `Inactive` row by pressing the\n`Space` key when a row is on focus or via mouse click over the selection checkbox of the row.\nIn order to select all the available rows at once, you can use the selection checkbox presented in the table's header.\n\n**Note:** Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.\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\nFurthermore, you can interact with `ui5-table` via the following keys.\n\n- [F7] - If focus is on an interactive control inside an item, moves focus to the corresponding item.\n- [Ctrl]+[A] - Selects all items, if MultiSelect mode is enabled.\n- [Home]/[End] - Focuses the first/last item.\n- [Page Up]/[Page Down] - Moves focus up/down by page size (20 items by default).\n- [Alt]+[Down]/[Up] - Switches focus between header, last focused item, and More button (if applies) in either direction.\n- [Shift]+[Down]/[Up] - Selects the next/previous item in a MultiSelect table, if the current item is selected (Range selection). Otherwise, deselects them (Range deselection).\n- [Shift]+[Home]/[End] - Range selection to the first/last item of the List.\n- [Ctrl]+[Home]/[End] - Same behavior as HOME & END.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";`\n`import \"@ui5/webcomponents/dist/TableColumn.js\";` (`ui5-table-column`)\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\n`import \"@ui5/webcomponents/dist/TableGroupRow.js\";` (`ui5-table-group-row`)\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\n\n\n---\n\n\n\n\n### **Events:**\n - **row-click** - Fired when a row in `Active` mode is clicked or `Enter` key is pressed.\n- **popin-change** - Fired when `ui5-table-column` is shown as a pop-in instead of hiding it.\n- **load-more** - Fired when the user presses the `More` button or scrolls to the table's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `SingleSelect` and `MultiSelect` modes.\n\n### **Slots:**\n - **default** - Defines the component rows.\n\n**Note:** Use `ui5-table-row` for the intended design.\n- **columns** - Defines the configuration for the columns of the component.\n\n**Note:** Use `ui5-table-column` for the intended design.",
       "attributes": [
         {
-          "name": "design",
-          "description": "Defines the design type of the component.",
+          "name": "no-data-text",
+          "description": "Defines the text that will be displayed when there is no data and `hideNoData` is not present.",
+          "values": []
+        },
+        {
+          "name": "growing-button-text",
+          "description": "Defines the text that will be displayed inside the growing button at the bottom of the table,\nmeant for loading more rows upon press.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if `growing` is set to `Button`.",
+          "values": []
+        },
+        {
+          "name": "growing-button-subtext",
+          "description": "Defines the subtext that will be displayed under the `growingButtonText`.\n\n**Note:** This property takes effect if `growing` is set to `Button`.",
+          "values": []
+        },
+        {
+          "name": "hide-no-data",
+          "description": "Defines if the value of `noDataText` will be diplayed when there is no rows present in the table.",
+          "values": []
+        },
+        {
+          "name": "growing",
+          "description": "Defines whether the table will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Shows a `More` button at the bottom of the table, pressing of which triggers the `load-more` event.\n\n`Scroll` - The `load-more` event is triggered when the user scrolls to the bottom of the table;\n\n`None` (default) - The growing is off.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\nand the component will fallback to `growing=\"Button\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
-            { "name": "Critical" },
-            { "name": "Information" },
-            { "name": "Neutral" },
-            { "name": "Set1" },
-            { "name": "Set2" },
-            { "name": "Set3" }
+            { "name": "None" },
+            { "name": "Button" },
+            { "name": "Scroll" }
           ]
         },
         {
-          "name": "color-scheme",
-          "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.",
+          "name": "busy",
+          "description": "Defines if the table is in busy state.\n\nIn this state the component's opacity is reduced\nand busy indicator is displayed at the bottom of the table.",
           "values": []
         },
         {
-          "name": "hide-state-icon",
-          "description": "Defines if the default state icon is shown.",
+          "name": "busy-delay",
+          "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
           "values": []
         },
         {
-          "name": "interactive",
-          "description": "Defines if the component is interactive (focusable and pressable).\n\n**Note:** The tag cannot be `interactive`\nwhen `design` property is `TagDesign.Set3`",
+          "name": "sticky-column-header",
+          "description": "Determines whether the column headers remain fixed at the top of the page during\nvertical scrolling as long as the Web Component is in the viewport.\n\n**Restrictions:**\n\n- Browsers that do not support this feature:\n\n- Internet Explorer\n- Microsoft Edge lower than version 41 (EdgeHTML 16)\n- Mozilla Firefox lower than version 59\n\n- Scrolling behavior:\n\n- If the Web Component is placed in layout containers that have the `overflow: hidden`\nor `overflow: auto` style definition, this can\nprevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.",
           "values": []
         },
         {
-          "name": "wrapping-type",
-          "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** For option \"Normal\" the text will wrap and the\nwords will not be broken based on hyphenation.",
-          "values": [{ "name": "None" }, { "name": "Normal" }]
+          "name": "mode",
+          "description": "Defines the mode of the component.",
+          "values": [
+            { "name": "None" },
+            { "name": "SingleSelect" },
+            { "name": "MultiSelect" }
+          ]
         },
         {
-          "name": "size",
-          "description": "Defines predefined size of the component.",
-          "values": [{ "name": "S" }, { "name": "L" }]
+          "name": "accessible-name",
+          "description": "Defines the accessible ARIA name of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-name-ref",
+          "description": "Receives id(or many ids) of the elements that label the component.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "ui5-table-cell",
+      "description": "### Overview\n\nThe `ui5-table-cell` component defines the structure of the data in a single `ui5-table` cell.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Specifies the content of the component.\n\n### **CSS Parts:**\n - **cell** - Used to style the native `td` element",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "ui5-table-column",
+      "description": "### Overview\n\nThe `ui5-table-column` component allows to define column specific properties that are applied\nwhen rendering the `ui5-table` component.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the column header\n\n### **CSS Parts:**\n - **column** - Used to style the native `th` element",
+      "attributes": [
+        {
+          "name": "min-width",
+          "description": "Defines the minimum table width required to display this column. By default it is always displayed.\n\nThe responsive behavior of the `ui5-table` is determined by this property. As an example, by setting\n`minWidth` property to `400` sets the minimum width to 400 pixels, and\tshows this column on tablet (and desktop) but hides it on mobile.\n\nFor further responsive design options, see `demandPopin` property.",
+          "values": []
+        },
+        {
+          "name": "popin-text",
+          "description": "The text for the column when it pops in.",
+          "values": []
+        },
+        {
+          "name": "demand-popin",
+          "description": "According to your `minWidth` settings, the component can be hidden\nin different screen sizes.\n\nSetting this property to `true`, shows this column as pop-in instead of hiding it.",
+          "values": []
+        },
+        {
+          "name": "popin-display",
+          "description": "Defines how the popin row is displayed.\n\n**The available values are:**\n\n- `Block`\n- `Inline`",
+          "values": [{ "name": "Inline" }, { "name": "Block" }]
         }
       ],
       "references": []
     },
     {
-      "name": "ui5-text",
-      "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the text of the component.",
+      "name": "ui5-table-group-row",
+      "description": "### Overview\n\nThe `ui5-table-group-row` component represents a group row in the `ui5-table`.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\n### **CSS Parts:**\n - **group-row** - Used to style the native `tr` element",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "ui5-table-row",
+      "description": "### Overview\n\nThe `ui5-table-row` component represents a row in the `ui5-table`.\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.\n\n### **CSS Parts:**\n - **row** - Used to style the native `tr` element\n- **popin-row** - Used to style the `tr` element when a row pops in",
       "attributes": [
         {
-          "name": "max-lines",
-          "description": "Defines the number of lines the text should wrap before it truncates.",
+          "name": "type",
+          "description": "Defines the visual indication and behavior of the component.\n\n**Note:** When set to `Active`, the item will provide visual response upon press,\nwhile with type `Inactive`-will not.",
+          "values": [{ "name": "Inactive" }, { "name": "Active" }]
+        },
+        {
+          "name": "selected",
+          "description": "Defines the row's selected state.",
+          "values": []
+        },
+        {
+          "name": "navigated",
+          "description": "Indicates if the table row is navigated.",
           "values": []
         }
       ],
@@ -3563,7 +3579,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 lines 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",
       "attributes": [
         {
           "name": "value",
@@ -3594,16 +3610,16 @@
           "name": "value-state",
           "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Warning\" state once the characters exceeds the limit.\nIn this case, only the \"Error\" state is considered and can be applied.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
           "name": "rows",
-          "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.",
+          "description": "Defines the number of visible text lines for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.",
           "values": []
         },
         {
@@ -3622,13 +3638,13 @@
           "values": []
         },
         {
-          "name": "growing-max-rows",
-          "description": "Defines the maximum number of rows that the component can grow.",
+          "name": "growing-max-lines",
+          "description": "Defines the maximum number of lines that the component can grow.",
           "values": []
         },
         {
           "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
           "values": []
         },
         {
@@ -3646,53 +3662,81 @@
     },
     {
       "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(): _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.",
+      "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.",
       "attributes": [
         {
-          "name": "value",
-          "description": "Defines a formatted time value.",
+          "name": "placeholder",
+          "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.",
           "values": []
         },
         {
-          "name": "name",
-          "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "name": "format-pattern",
+          "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)",
+          "values": []
+        },
+        {
+          "name": "date-value",
+          "description": "Currently selected time represented as JavaScript Date instance",
+          "values": [{ "name": "any" }]
+        },
+        {
+          "name": "value",
+          "description": "Defines a formatted time value.",
           "values": []
         },
         {
           "name": "value-state",
-          "description": "Defines the value state of the component.",
+          "description": "Defines the value state of the `ui5-time-picker`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
           "name": "disabled",
-          "description": "Defines the disabled state of the comonent.",
+          "description": "Determines whether the `ui5-time-picker` is displayed as disabled.",
           "values": []
         },
         {
           "name": "readonly",
-          "description": "Defines the readonly state of the comonent.",
+          "description": "Determines whether the `ui5-time-picker` is displayed as readonly.",
           "values": []
-        },
+        }
+      ],
+      "references": []
+    },
+    {
+      "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.",
+      "attributes": [
         {
-          "name": "placeholder",
-          "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.",
+          "name": "value",
+          "description": "Defines a formatted time value.",
           "values": []
         },
         {
-          "name": "format-pattern",
-          "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)",
+          "name": "value-state",
+          "description": "Defines the value state of the `ui5-time-picker`.",
+          "values": [
+            { "name": "Information" },
+            { "name": "None" },
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Determines whether the `ui5-time-picker` is displayed as disabled.",
           "values": []
         },
         {
-          "name": "date-value",
-          "description": "Currently selected time represented as JavaScript Date instance",
-          "values": [{ "name": "any" }]
+          "name": "readonly",
+          "description": "Determines whether the `ui5-time-picker` is displayed as readonly.",
+          "values": []
         }
       ],
       "references": []
@@ -3723,7 +3767,7 @@
     },
     {
       "name": "ui5-toast",
-      "description": "### Overview\n\nThe `ui5-toast` is a small, non-disruptive popup for success or information messages that\ndisappears automatically after a few seconds.\n\n### Usage\n\n#### When to use:\n\n- You want to display a short success or information message.\n- You do not want to interrupt users while they are performing an action.\n- You want to confirm a successful action.\n\n#### When not to use:\n\n- You want to display error or warning message.\n- You want to interrupt users while they are performing an action.\n- You want to make sure that users read the message before they leave the page.\n- You want users to be able to copy some part of the message text.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Toast.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **close** - Fired after the component is auto closed.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.",
+      "description": "### Overview\n\nThe `ui5-toast` is a small, non-disruptive popup for success or information messages that\ndisappears automatically after a few seconds.\n\n### Usage\n\n#### When to use:\n\n- You want to display a short success or information message.\n- You do not want to interrupt users while they are performing an action.\n- You want to confirm a successful action.\n\n#### When not to use:\n\n- You want to display error or warning message.\n- You want to interrupt users while they are performing an action.\n- You want to make sure that users read the message before they leave the page.\n- You want users to be able to copy some part of the message text.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Toast.js\";`\n\n\n---\n\n\n\n\n### **Methods:**\n - **show(): _void_** - Shows the component.\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.",
       "attributes": [
         {
           "name": "duration",
@@ -3744,11 +3788,6 @@
             { "name": "BottomCenter" },
             { "name": "BottomEnd" }
           ]
-        },
-        {
-          "name": "open",
-          "description": "Indicates whether the component is open (visible).",
-          "values": []
         }
       ],
       "references": []
@@ -3766,9 +3805,9 @@
           "name": "design",
           "description": "Defines the component design.",
           "values": [
-            { "name": "Default" },
             { "name": "Positive" },
             { "name": "Negative" },
+            { "name": "Default" },
             { "name": "Transparent" },
             { "name": "Emphasized" },
             { "name": "Attention" }
@@ -3785,13 +3824,13 @@
           "values": []
         },
         {
-          "name": "end-icon",
-          "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
+          "name": "icon-end",
+          "description": "Defines whether the icon should be displayed after the component text.",
           "values": []
         },
         {
           "name": "submits",
-          "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`",
+          "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** For the `submits` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`",
           "values": []
         },
         {
@@ -3811,7 +3850,7 @@
         },
         {
           "name": "type",
-          "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
+          "description": "Defines whether the button has special form-related functionality.\n\n**Note:** For the `type` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`",
           "values": [
             { "name": "Button" },
             { "name": "Submit" },
@@ -3820,7 +3859,7 @@
         },
         {
           "name": "accessible-role",
-          "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
+          "description": "Describes the accessibility role of the button.\n\n**Note:** Use link role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
           "values": [{ "name": "Button" }, { "name": "Link" }]
         }
       ],
@@ -3828,43 +3867,21 @@
     },
     {
       "name": "ui5-token",
-      "description": "### Overview\n\nTokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Token.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **closeIcon** - Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.\nAccepts `ui5-icon`.",
+      "description": "### Overview\n\nTokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Token.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **select** - Fired when the the component is selected by user interaction with mouse or by clicking space.\n\n### **Slots:**\n - **closeIcon** - Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.\nAccepts `ui5-icon`.",
       "attributes": [
         {
           "name": "text",
           "description": "Defines the text of the token.",
           "values": []
         },
-        {
-          "name": "selected",
-          "description": "Defines whether the component is selected or not.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "ui5-tokenizer",
-      "description": "### Overview\n\nA `ui5-tokenizer` is an invisible container for `ui5-token`s that supports keyboard navigation and token selection.\n\nThe `ui5-tokenizer` consists of two parts:\n- Tokens - displays the available tokens.\n- N-more indicator - contains the number of the remaining tokens that cannot be displayed due to the limited space.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-tokenizer` provides advanced keyboard handling.\nWhen a token is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Left] or [Right] / [Up] or [Down] - Navigates left and right through the tokens.\n- [Home] - Navigates to the first token.\n- [End] - Navigates to the last token.\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Space] - Selects a token.\n- [Backspace] / [Delete] - Deletes a token.\n**Note:** The deletion of a token is handled by the application with the use of the `token-delete` event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tokenizer.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **token-delete** - Fired when a token is deleted (delete icon, delete or backspace is pressed)\n- **selection-change** - Fired when token selection is changed by user interaction\n- **dialog-button-press** - Fired when a dialog button is pressed.\n- **show-more-items-press** - Fired when nMore link is pressed.",
-      "attributes": [
         {
           "name": "readonly",
-          "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.",
-          "values": []
-        },
-        {
-          "name": "accessible-name",
-          "description": "Defines the accessible ARIA name of the component.",
+          "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component can not be deleted or selected,\nbut still provides visual feedback upon user interaction.",
           "values": []
         },
         {
-          "name": "accessible-name-ref",
-          "description": "Receives id(or many ids) of the elements that label the component.",
+          "name": "selected",
+          "description": "Defines whether the component is selected or not.",
           "values": []
         }
       ],
@@ -3872,12 +3889,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(): _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(): _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.",
       "attributes": [
         {
           "name": "align-content",
           "description": "Indicated the direction in which the Toolbar items will be aligned.",
-          "values": [{ "name": "Start" }, { "name": "End" }]
+          "values": [{ "name": "End" }, { "name": "Start" }]
         },
         {
           "name": "accessible-name",
@@ -3905,9 +3922,9 @@
           "name": "design",
           "description": "Defines the action design.",
           "values": [
-            { "name": "Default" },
             { "name": "Positive" },
             { "name": "Negative" },
+            { "name": "Default" },
             { "name": "Transparent" },
             { "name": "Emphasized" },
             { "name": "Attention" }
@@ -3995,11 +4012,11 @@
           "name": "value-state",
           "description": "Defines the value state of the component.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -4095,18 +4112,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 `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.",
+      "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.",
       "attributes": [
         {
-          "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.",
+          "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.",
           "values": [
-            { "name": "Single" },
-            { "name": "Multiple" },
             { "name": "None" },
-            { "name": "SingleStart" },
-            { "name": "SingleEnd" },
-            { "name": "SingleAuto" },
+            { "name": "SingleSelect" },
+            { "name": "SingleSelectBegin" },
+            { "name": "SingleSelectEnd" },
+            { "name": "SingleSelectAuto" },
+            { "name": "MultiSelect" },
             { "name": "Delete" }
           ]
         },
@@ -4162,14 +4179,9 @@
           "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.",
           "values": []
         },
-        {
-          "name": "movable",
-          "description": "Defines whether the item is movable.",
-          "values": []
-        },
         {
           "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 `Multiple` 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 `MultiSelect` mode.",
           "values": []
         },
         {
@@ -4179,13 +4191,13 @@
         },
         {
           "name": "additional-text-state",
-          "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -4215,13 +4227,13 @@
         },
         {
           "name": "highlight",
-          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -4246,14 +4258,9 @@
           "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.",
           "values": []
         },
-        {
-          "name": "movable",
-          "description": "Defines whether the item is movable.",
-          "values": []
-        },
         {
           "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 `Multiple` 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 `MultiSelect` mode.",
           "values": []
         },
         {
@@ -4263,13 +4270,13 @@
         },
         {
           "name": "additional-text-state",
-          "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -4299,13 +4306,13 @@
         },
         {
           "name": "highlight",
-          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -4335,14 +4342,9 @@
           "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.",
           "values": []
         },
-        {
-          "name": "movable",
-          "description": "Defines whether the item is movable.",
-          "values": []
-        },
         {
           "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 `Multiple` 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 `MultiSelect` mode.",
           "values": []
         },
         {
@@ -4352,13 +4354,13 @@
         },
         {
           "name": "additional-text-state",
-          "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {
@@ -4388,13 +4390,13 @@
         },
         {
           "name": "highlight",
-          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
+          "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Success\"`, `\"Warning\"`, `\"Information\"` and `\"Error\"`.",
           "values": [
-            { "name": "Positive" },
-            { "name": "Negative" },
+            { "name": "Information" },
             { "name": "None" },
-            { "name": "Critical" },
-            { "name": "Information" }
+            { "name": "Success" },
+            { "name": "Warning" },
+            { "name": "Error" }
           ]
         },
         {