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

package/dist/custom-elements.json

@@ -155,6 +155,21 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/types/BarDesign.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "BarDesign",
+            "module": "dist/types/BarDesign.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/types/BorderDesign.js",
@@ -187,15 +202,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/types/BreadcrumbsSeparatorStyle.js",
+      "path": "dist/types/BreadcrumbsSeparator.js",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "BreadcrumbsSeparatorStyle",
-            "module": "dist/types/BreadcrumbsSeparatorStyle.js"
+            "name": "BreadcrumbsSeparator",
+            "module": "dist/types/BreadcrumbsSeparator.js"
           }
         }
       ]
@@ -337,15 +352,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/types/CarouselPageIndicatorStyle.js",
+      "path": "dist/types/CarouselPageIndicatorType.js",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CarouselPageIndicatorStyle",
-            "module": "dist/types/CarouselPageIndicatorStyle.js"
+            "name": "CarouselPageIndicatorType",
+            "module": "dist/types/CarouselPageIndicatorType.js"
           }
         }
       ]
@@ -472,15 +487,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/types/ListMode.js",
+      "path": "dist/types/ListSelectionMode.js",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ListMode",
-            "module": "dist/types/ListMode.js"
+            "name": "ListSelectionMode",
+            "module": "dist/types/ListSelectionMode.js"
           }
         }
       ]
@@ -515,6 +530,21 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/types/OverflowMode.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "OverflowMode",
+            "module": "dist/types/OverflowMode.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/types/PanelAccessibleRole.js",
@@ -547,15 +577,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/types/PopoverPlacementType.js",
+      "path": "dist/types/PopoverPlacement.js",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PopoverPlacementType",
-            "module": "dist/types/PopoverPlacementType.js"
+            "name": "PopoverPlacement",
+            "module": "dist/types/PopoverPlacement.js"
           }
         }
       ]
@@ -650,21 +680,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/types/TabContainerBackgroundDesign.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabContainerBackgroundDesign",
-            "module": "dist/types/TabContainerBackgroundDesign.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/types/TabContainerTabsPlacement.js",
@@ -755,21 +770,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/types/TabsOverflowMode.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabsOverflowMode",
-            "module": "dist/types/TabsOverflowMode.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/types/TitleLevel.js",
@@ -845,12 +845,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/Assets-static.js",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "dist/Assets.js",
@@ -1420,6 +1414,92 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/Bar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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\";`",
+          "name": "Bar",
+          "cssParts": [
+            {
+              "description": "Used to style the wrapper of the content of the component",
+              "name": "bar"
+            }
+          ],
+          "slots": [
+            {
+              "name": "startContent",
+              "description": "Defines the content at the start of the bar."
+            },
+            {
+              "name": "default",
+              "description": "Defines the content in the middle of the bar."
+            },
+            {
+              "name": "endContent",
+              "description": "Defines the content at the end of the bar."
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "design",
+              "type": {
+                "text": "BarDesign",
+                "references": [
+                  {
+                    "name": "BarDesign",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/BarDesign.js"
+                  }
+                ]
+              },
+              "description": "Defines the component's design.",
+              "default": "\"Header\"",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Defines the component's design.",
+              "name": "design",
+              "default": "\"Header\"",
+              "fieldName": "design",
+              "type": {
+                "text": "\"Header\" | \"Subheader\" | \"Footer\" | \"FloatingFooter\""
+              }
+            }
+          ],
+          "superclass": {
+            "name": "UI5Element",
+            "package": "@ui5/webcomponents-base",
+            "module": "dist/UI5Element.js"
+          },
+          "tagName": "ui5-bar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bar",
+            "module": "dist/Bar.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ui5-bar",
+          "declaration": {
+            "name": "Bar",
+            "module": "dist/Bar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/Breadcrumbs.js",
@@ -1454,14 +1534,14 @@
             },
             {
               "kind": "field",
-              "name": "separatorStyle",
+              "name": "separators",
               "type": {
-                "text": "BreadcrumbsSeparatorStyle",
+                "text": "BreadcrumbsSeparator",
                 "references": [
                   {
-                    "name": "BreadcrumbsSeparatorStyle",
+                    "name": "BreadcrumbsSeparator",
                     "package": "@ui5/webcomponents",
-                    "module": "dist/types/BreadcrumbsSeparatorStyle.js"
+                    "module": "dist/types/BreadcrumbsSeparator.js"
                   }
                 ]
               },
@@ -1498,9 +1578,9 @@
             },
             {
               "description": "Determines the visual style of the separator between the breadcrumb items.",
-              "name": "separator-style",
+              "name": "separators",
               "default": "\"Slash\"",
-              "fieldName": "separatorStyle",
+              "fieldName": "separators",
               "type": {
                 "text": "\"Slash\" | \"BackSlash\" | \"DoubleBackSlash\" | \"DoubleGreaterThan\" | \"DoubleSlash\" | \"GreaterThan\""
               }
@@ -1676,7 +1756,7 @@
                 ]
               },
               "description": "Defines the size of the component.",
-              "default": "\"Medium\"",
+              "default": "\"M\"",
               "privacy": "public"
             },
             {
@@ -1730,10 +1810,10 @@
             {
               "description": "Defines the size of the component.",
               "name": "size",
-              "default": "\"Medium\"",
+              "default": "\"M\"",
               "fieldName": "size",
               "type": {
-                "text": "\"Small\" | \"Medium\" | \"Large\""
+                "text": "\"S\" | \"M\" | \"L\""
               }
             },
             {
@@ -2089,7 +2169,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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\";`",
+          "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\";`",
           "name": "Calendar",
           "slots": [
             {
@@ -2220,12 +2300,12 @@
           ],
           "events": [
             {
-              "name": "selected-dates-change",
+              "name": "selection-change",
               "type": {
-                "text": "CustomEvent<CalendarSelectedDatesChangeEventDetail>",
+                "text": "CustomEvent<CalendarSelectionChangeEventDetail>",
                 "references": [
                   {
-                    "name": "CalendarSelectedDatesChangeEventDetail",
+                    "name": "CalendarSelectionChangeEventDetail",
                     "package": "@ui5/webcomponents",
                     "module": "dist/Calendar.js"
                   }
@@ -2814,7 +2894,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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`)",
+          "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`)",
           "name": "Card",
           "cssParts": [
             {
@@ -2912,7 +2992,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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\";`",
+          "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\";`",
           "name": "CardHeader",
           "cssParts": [
             {
@@ -2928,8 +3008,8 @@
               "name": "subtitle"
             },
             {
-              "description": "Used to style the status of the CardHeader",
-              "name": "status"
+              "description": "Used to style the additional text of the CardHeader",
+              "name": "additional-text"
             }
           ],
           "slots": [
@@ -2965,11 +3045,11 @@
             },
             {
               "kind": "field",
-              "name": "status",
+              "name": "additionalText",
               "type": {
                 "text": "string"
               },
-              "description": "Defines the status text.",
+              "description": "Defines the additional text.",
               "default": "\"\"",
               "privacy": "public"
             },
@@ -3013,10 +3093,10 @@
               }
             },
             {
-              "description": "Defines the status text.",
-              "name": "status",
+              "description": "Defines the additional text.",
+              "name": "additional-text",
               "default": "\"\"",
-              "fieldName": "status",
+              "fieldName": "additionalText",
               "type": {
                 "text": "string"
               }
@@ -3080,6 +3160,26 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "accessibleName",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines the accessible name of the component.",
+              "default": "\"\"",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "accessibleNameRef",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines the IDs of the elements that label the input.",
+              "default": "\"\"",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "cyclic",
@@ -3142,14 +3242,14 @@
             },
             {
               "kind": "field",
-              "name": "pageIndicatorStyle",
+              "name": "pageIndicatorType",
               "type": {
-                "text": "CarouselPageIndicatorStyle",
+                "text": "CarouselPageIndicatorType",
                 "references": [
                   {
-                    "name": "CarouselPageIndicatorStyle",
+                    "name": "CarouselPageIndicatorType",
                     "package": "@ui5/webcomponents",
-                    "module": "dist/types/CarouselPageIndicatorStyle.js"
+                    "module": "dist/types/CarouselPageIndicatorType.js"
                   }
                 ]
               },
@@ -3274,6 +3374,24 @@
             }
           ],
           "attributes": [
+            {
+              "description": "Defines the accessible name of the component.",
+              "name": "accessible-name",
+              "default": "\"\"",
+              "fieldName": "accessibleName",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "description": "Defines the IDs of the elements that label the input.",
+              "name": "accessible-name-ref",
+              "default": "\"\"",
+              "fieldName": "accessibleNameRef",
+              "type": {
+                "text": "string"
+              }
+            },
             {
               "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.",
               "name": "cyclic",
@@ -3330,9 +3448,9 @@
             },
             {
               "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)",
-              "name": "page-indicator-style",
+              "name": "page-indicator-type",
               "default": "\"Default\"",
-              "fieldName": "pageIndicatorStyle",
+              "fieldName": "pageIndicatorType",
               "type": {
                 "text": "\"Default\" | \"Numeric\""
               }
@@ -3907,48 +4025,6 @@
               "description": "Defines the ID or DOM Reference of the element that the popover is shown at.",
               "privacy": "public",
               "default": "undefined"
-            },
-            {
-              "kind": "method",
-              "name": "showAt",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "opener",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "the element that the popover is shown at"
-                }
-              ],
-              "description": "Shows the ColorPalettePopover.",
-              "privacy": "public",
-              "deprecated": "The method is deprecated in favour of `open` and `opener` properties."
-            },
-            {
-              "kind": "method",
-              "name": "openPopover",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "opener",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "the element that the popover is shown at"
-                }
-              ],
-              "description": "Shows the ColorPalettePopover.",
-              "privacy": "public",
-              "deprecated": "The method is deprecated in favour of `open` and `opener` properties."
             }
           ],
           "events": [
@@ -4069,7 +4145,7 @@
           "members": [
             {
               "kind": "field",
-              "name": "color",
+              "name": "value",
               "type": {
                 "text": "string"
               },
@@ -4090,9 +4166,9 @@
           "attributes": [
             {
               "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.",
-              "name": "color",
+              "name": "value",
               "default": "\"rgba(255, 255, 255, 1)\"",
-              "fieldName": "color",
+              "fieldName": "value",
               "type": {
                 "text": "string"
               }
@@ -8766,7 +8842,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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`)",
+          "description": "### Overview\n\nThe `ui5-list` component allows displaying a list of items, advanced keyboard\nhandling support for navigating between items, and predefined modes to improve the development efficiency.\n\nThe `ui5-list` is a container for the available list items:\n\n- `ui5-li`\n- `ui5-li-custom`\n- `ui5-li-groupheader`\n\nTo benefit from the built-in selection mechanism, you can use the available\nselection modes, such as\n`Single`, `Multiple` and `Delete`.\n\nAdditionally, the `ui5-list` provides header, footer, and customization for the list item separators.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete),\nwhen the `selectionMode` property is in use:\n\n- [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection\n- [Delete] - Delete an item if `selectionMode` property is `Delete`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/List.js\";`\n\n`import \"@ui5/webcomponents/dist/StandardListItem.js\";` (for `ui5-li`)\n\n`import \"@ui5/webcomponents/dist/CustomListItem.js\";` (for `ui5-li-custom`)\n\n`import \"@ui5/webcomponents/dist/GroupHeaderListItem.js\";` (for `ui5-li-groupheader`)",
           "name": "List",
           "slots": [
             {
@@ -8811,18 +8887,18 @@
             },
             {
               "kind": "field",
-              "name": "mode",
+              "name": "selectionMode",
               "type": {
-                "text": "ListMode",
+                "text": "ListSelectionMode",
                 "references": [
                   {
-                    "name": "ListMode",
+                    "name": "ListSelectionMode",
                     "package": "@ui5/webcomponents",
-                    "module": "dist/types/ListMode.js"
+                    "module": "dist/types/ListSelectionMode.js"
                   }
                 ]
               },
-              "description": "Defines the mode of the component.",
+              "description": "Defines the selection mode of the component.",
               "default": "\"None\"",
               "privacy": "public"
             },
@@ -8882,7 +8958,7 @@
             },
             {
               "kind": "field",
-              "name": "busy",
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
@@ -8892,11 +8968,11 @@
             },
             {
               "kind": "field",
-              "name": "busyDelay",
+              "name": "loadingDelay",
               "type": {
                 "text": "number"
               },
-              "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
+              "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
               "default": "1000",
               "privacy": "public"
             },
@@ -8986,7 +9062,7 @@
                   }
                 ]
               },
-              "description": "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`."
+              "description": "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`."
             },
             {
               "name": "selection-change",
@@ -9000,7 +9076,7 @@
                   }
                 ]
               },
-              "description": "Fired when selection is changed by user interaction\nin `SingleSelect`, `SingleSelectBegin`, `SingleSelectEnd` and `MultiSelect` modes."
+              "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes."
             },
             {
               "name": "load-more",
@@ -9039,12 +9115,12 @@
               }
             },
             {
-              "description": "Defines the mode of the component.",
-              "name": "mode",
+              "description": "Defines the selection mode of the component.",
+              "name": "selection-mode",
               "default": "\"None\"",
-              "fieldName": "mode",
+              "fieldName": "selectionMode",
               "type": {
-                "text": "\"None\" | \"SingleSelect\" | \"SingleSelectBegin\" | \"SingleSelectEnd\" | \"SingleSelectAuto\" | \"MultiSelect\" | \"Delete\""
+                "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\""
               }
             },
             {
@@ -9085,18 +9161,18 @@
             },
             {
               "description": "Defines if the component would display a loading indicator over the list.",
-              "name": "busy",
+              "name": "loading",
               "default": "false",
-              "fieldName": "busy",
+              "fieldName": "loading",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
-              "name": "busy-delay",
+              "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
+              "name": "loading-delay",
               "default": "1000",
-              "fieldName": "busyDelay",
+              "fieldName": "loadingDelay",
               "type": {
                 "text": "number"
               }
@@ -11194,16 +11270,6 @@
               "default": "false",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is hidden.",
-              "default": "false",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "icon",
@@ -11245,15 +11311,6 @@
                 "text": "boolean"
               }
             },
-            {
-              "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is hidden.",
-              "name": "disabled",
-              "default": "false",
-              "fieldName": "disabled",
-              "type": {
-                "text": "boolean"
-              }
-            },
             {
               "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
               "name": "icon",
@@ -11590,19 +11647,19 @@
             },
             {
               "kind": "field",
-              "name": "placementType",
+              "name": "placement",
               "type": {
-                "text": "PopoverPlacementType",
+                "text": "PopoverPlacement",
                 "references": [
                   {
-                    "name": "PopoverPlacementType",
+                    "name": "PopoverPlacement",
                     "package": "@ui5/webcomponents",
-                    "module": "dist/types/PopoverPlacementType.js"
+                    "module": "dist/types/PopoverPlacement.js"
                   }
                 ]
               },
               "description": "Determines on which side the component is placed at.",
-              "default": "\"Right\"",
+              "default": "\"End\"",
               "privacy": "public"
             },
             {
@@ -11869,11 +11926,11 @@
             },
             {
               "description": "Determines on which side the component is placed at.",
-              "name": "placement-type",
-              "default": "\"Right\"",
-              "fieldName": "placementType",
+              "name": "placement",
+              "default": "\"End\"",
+              "fieldName": "placement",
               "type": {
-                "text": "\"Top\" | \"Bottom\" | \"Left\" | \"Right\""
+                "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\""
               }
             },
             {
@@ -11882,7 +11939,7 @@
               "default": "\"Center\"",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Left\" | \"Right\" | \"Center\" | \"Stretch\""
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
               }
             },
             {
@@ -12357,16 +12414,6 @@
               "default": "\"\"",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Defines whether component is in disabled state.",
-              "default": "false",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "hideValue",
@@ -12425,15 +12472,6 @@
                 "text": "string"
               }
             },
-            {
-              "description": "Defines whether component is in disabled state.",
-              "name": "disabled",
-              "default": "false",
-              "fieldName": "disabled",
-              "type": {
-                "text": "boolean"
-              }
-            },
             {
               "description": "Defines whether the component value is shown.",
               "name": "hide-value",
@@ -13432,19 +13470,19 @@
             },
             {
               "kind": "field",
-              "name": "placementType",
+              "name": "placement",
               "type": {
-                "text": "PopoverPlacementType",
+                "text": "PopoverPlacement",
                 "references": [
                   {
-                    "name": "PopoverPlacementType",
+                    "name": "PopoverPlacement",
                     "package": "@ui5/webcomponents",
-                    "module": "dist/types/PopoverPlacementType.js"
+                    "module": "dist/types/PopoverPlacement.js"
                   }
                 ]
               },
               "description": "Determines on which side the component is placed at.",
-              "default": "\"Right\"",
+              "default": "\"End\"",
               "privacy": "public",
               "inheritedFrom": {
                 "name": "Popover",
@@ -13694,11 +13732,11 @@
             },
             {
               "description": "Determines on which side the component is placed at.",
-              "name": "placement-type",
-              "default": "\"Right\"",
-              "fieldName": "placementType",
+              "name": "placement",
+              "default": "\"End\"",
+              "fieldName": "placement",
               "type": {
-                "text": "\"Top\" | \"Bottom\" | \"Left\" | \"Right\""
+                "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\""
               },
               "inheritedFrom": {
                 "name": "Popover",
@@ -13711,7 +13749,7 @@
               "default": "\"Center\"",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Left\" | \"Right\" | \"Center\" | \"Stretch\""
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
               },
               "inheritedFrom": {
                 "name": "Popover",
@@ -17257,7 +17295,7 @@
               "description": "Holds the content associated with this tab."
             },
             {
-              "name": "subTabs",
+              "name": "items",
               "description": "Defines hierarchies with nested sub tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design."
             }
           ],
@@ -17331,20 +17369,13 @@
             },
             {
               "kind": "method",
-              "name": "getTabInStripDomRef",
+              "name": "getDomRefInStrip",
               "return": {
                 "type": {
-                  "text": "ITab | null",
-                  "references": [
-                    {
-                      "name": "ITab",
-                      "package": "@ui5/webcomponents",
-                      "module": "dist/TabContainer.js"
-                    }
-                  ]
+                  "text": "HTMLElement | undefined"
                 }
               },
-              "description": "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.",
+              "description": "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.",
               "privacy": "public"
             }
           ],
@@ -17465,16 +17496,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "fixed",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Defines whether the tabs are in a fixed state that is not\nexpandable/collapsible by user interaction.",
-              "default": "false",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "collapsed",
@@ -17485,17 +17506,6 @@
               "default": "false",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "showOverflow",
-              "type": {
-                "text": "boolean"
-              },
-              "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.",
-              "default": "false",
-              "privacy": "public",
-              "deprecated": "Since the introduction of TabsOverflowMode, overflows will always be visible if there is not enough space for all tabs,\nall hidden tabs are moved to a select list in the respective overflows and are accessible via the `overflowButton` and / or `startOverflowButton` slots."
-            },
             {
               "kind": "field",
               "name": "tabLayout",
@@ -17515,14 +17525,14 @@
             },
             {
               "kind": "field",
-              "name": "tabsOverflowMode",
+              "name": "overflowMode",
               "type": {
-                "text": "TabsOverflowMode",
+                "text": "OverflowMode",
                 "references": [
                   {
-                    "name": "TabsOverflowMode",
+                    "name": "OverflowMode",
                     "package": "@ui5/webcomponents",
-                    "module": "dist/types/TabsOverflowMode.js"
+                    "module": "dist/types/OverflowMode.js"
                   }
                 ]
               },
@@ -17534,12 +17544,12 @@
               "kind": "field",
               "name": "headerBackgroundDesign",
               "type": {
-                "text": "TabContainerBackgroundDesign",
+                "text": "BackgroundDesign",
                 "references": [
                   {
-                    "name": "TabContainerBackgroundDesign",
+                    "name": "BackgroundDesign",
                     "package": "@ui5/webcomponents",
-                    "module": "dist/types/TabContainerBackgroundDesign.js"
+                    "module": "dist/types/BackgroundDesign.js"
                   }
                 ]
               },
@@ -17551,12 +17561,12 @@
               "kind": "field",
               "name": "contentBackgroundDesign",
               "type": {
-                "text": "TabContainerBackgroundDesign",
+                "text": "BackgroundDesign",
                 "references": [
                   {
-                    "name": "TabContainerBackgroundDesign",
+                    "name": "BackgroundDesign",
                     "package": "@ui5/webcomponents",
-                    "module": "dist/types/TabContainerBackgroundDesign.js"
+                    "module": "dist/types/BackgroundDesign.js"
                   }
                 ]
               },
@@ -17568,14 +17578,7 @@
               "kind": "field",
               "name": "allItems",
               "type": {
-                "text": "Array<ITab>",
-                "references": [
-                  {
-                    "name": "ITab",
-                    "package": "@ui5/webcomponents",
-                    "module": "dist/TabContainer.js"
-                  }
-                ]
+                "text": "Array<Tab | TabSeparator>"
               },
               "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.",
               "privacy": "public",
@@ -17600,15 +17603,6 @@
             }
           ],
           "attributes": [
-            {
-              "description": "Defines whether the tabs are in a fixed state that is not\nexpandable/collapsible by user interaction.",
-              "name": "fixed",
-              "default": "false",
-              "fieldName": "fixed",
-              "type": {
-                "text": "boolean"
-              }
-            },
             {
               "description": "Defines whether the tab content is collapsed.",
               "name": "collapsed",
@@ -17618,16 +17612,6 @@
                 "text": "boolean"
               }
             },
-            {
-              "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.",
-              "name": "show-overflow",
-              "default": "false",
-              "fieldName": "showOverflow",
-              "type": {
-                "text": "boolean"
-              },
-              "deprecated": "Since the introduction of TabsOverflowMode, overflows will always be visible if there is not enough space for all tabs,\nall hidden tabs are moved to a select list in the respective overflows and are accessible via the `overflowButton` and / or `startOverflowButton` slots."
-            },
             {
               "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.",
               "name": "tab-layout",
@@ -17639,9 +17623,9 @@
             },
             {
               "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.",
-              "name": "tabs-overflow-mode",
+              "name": "overflow-mode",
               "default": "\"End\"",
-              "fieldName": "tabsOverflowMode",
+              "fieldName": "overflowMode",
               "type": {
                 "text": "\"End\" | \"StartAndEnd\""
               }
@@ -17713,20 +17697,13 @@
           "members": [
             {
               "kind": "method",
-              "name": "getTabInStripDomRef",
+              "name": "getDomRefInStrip",
               "return": {
                 "type": {
-                  "text": "ITab | null",
-                  "references": [
-                    {
-                      "name": "ITab",
-                      "package": "@ui5/webcomponents",
-                      "module": "dist/TabContainer.js"
-                    }
-                  ]
+                  "text": "HTMLElement | undefined"
                 }
               },
-              "description": "Returns the DOM reference of the separator that is placed in the header.\n\n**Note:** Tabs and separators, placed in the `subTabs` slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return `null`.",
+              "description": "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`.",
               "privacy": "public"
             }
           ],
@@ -18896,7 +18873,7 @@
               "name": "openPicker",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "void"
                 },
                 "description": "Resolves when the picker is open"
               },
@@ -18912,7 +18889,7 @@
               "name": "closePicker",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "void"
                 },
                 "description": "Resolves when the picker is closed"
               },
@@ -19202,7 +19179,7 @@
               "name": "openPicker",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "void"
                 },
                 "description": "Resolves when the picker is open"
               },
@@ -19214,7 +19191,7 @@
               "name": "closePicker",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "void"
                 },
                 "description": "Resolves when the picker is closed"
               },
@@ -20221,7 +20198,7 @@
               "name": "isOverflowOpen",
               "return": {
                 "type": {
-                  "text": "Promise<boolean>"
+                  "text": "boolean"
                 }
               },
               "description": "Returns if the overflow popup is open.",
@@ -20235,7 +20212,7 @@
               "default": "\"End\"",
               "fieldName": "alignContent",
               "type": {
-                "text": "\"End\" | \"Start\""
+                "text": "\"Start\" | \"End\""
               }
             },
             {
@@ -21203,7 +21180,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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\";`",
+          "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\";`",
           "name": "Tree",
           "slots": [
             {
@@ -21218,18 +21195,18 @@
           "members": [
             {
               "kind": "field",
-              "name": "mode",
+              "name": "selectionMode",
               "type": {
-                "text": "ListMode",
+                "text": "ListSelectionMode",
                 "references": [
                   {
-                    "name": "ListMode",
+                    "name": "ListSelectionMode",
                     "package": "@ui5/webcomponents",
-                    "module": "dist/types/ListMode.js"
+                    "module": "dist/types/ListSelectionMode.js"
                   }
                 ]
               },
-              "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.",
+              "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.",
               "privacy": "public",
               "default": "\"None\""
             },
@@ -21380,7 +21357,7 @@
                   }
                 ]
               },
-              "description": "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`."
+              "description": "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`."
             },
             {
               "name": "selection-change",
@@ -21394,17 +21371,17 @@
                   }
                 ]
               },
-              "description": "Fired when selection is changed by user interaction\nin `SingleSelect`, `SingleSelectBegin`, `SingleSelectEnd` and `MultiSelect` modes."
+              "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes."
             }
           ],
           "attributes": [
             {
-              "description": "Defines the mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.",
-              "name": "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": "selection-mode",
               "default": "\"None\"",
-              "fieldName": "mode",
+              "fieldName": "selectionMode",
               "type": {
-                "text": "\"None\" | \"SingleSelect\" | \"SingleSelectBegin\" | \"SingleSelectEnd\" | \"SingleSelectAuto\" | \"MultiSelect\" | \"Delete\""
+                "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\""
               }
             },
             {
@@ -21558,7 +21535,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `MultiSelect` mode.",
+              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.",
               "default": "false",
               "privacy": "public",
               "inheritedFrom": {
@@ -21782,7 +21759,7 @@
               }
             },
             {
-              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `MultiSelect` mode.",
+              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.",
               "name": "indeterminate",
               "default": "false",
               "fieldName": "indeterminate",
@@ -21981,7 +21958,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `MultiSelect` mode.",
+              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.",
               "default": "false",
               "privacy": "public"
             },
@@ -22159,7 +22136,7 @@
               }
             },
             {
-              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `MultiSelect` mode.",
+              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.",
               "name": "indeterminate",
               "default": "false",
               "fieldName": "indeterminate",
@@ -22365,7 +22342,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `MultiSelect` mode.",
+              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.",
               "default": "false",
               "privacy": "public",
               "inheritedFrom": {
@@ -22580,7 +22557,7 @@
               }
             },
             {
-              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `MultiSelect` mode.",
+              "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n-  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n-  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n-  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.",
               "name": "indeterminate",
               "default": "false",
               "fieldName": "indeterminate",